/* ==========================================================================
   Daniel Scheuch — 7-Spalten-Raster, 20 px Außenabstand
   Referenzbreite der Rekonstruktion: 1512 px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Farben */
  --paper: #ffffff;
  --ink: #000000;
  --placeholder: #f2f2f2;
  --focus: #000000;

  /* Raster */
  --pad: 20px;              /* Außenabstand zum Browserrand, alle Seiten */
  --gap: 20px;              /* Spaltenabstand */
  --cols: 7;                /* Desktop-Ausgangsbasis */

  /* Typografie */
  --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --fs-body: 12px;          /* eine Größe für den gesamten Header und den Fließtext */
  --lh-body: 14.8px;
  --para-gap: 13.5px;       /* Abstand zwischen Textabsätzen */

  /* Vertikale Rhythmik */
  --masthead-gap: 128px;    /* Header -> erste Arbeit */
  --masthead-row-gap: 30px; /* nur bei Umbruch des Headers */
  --work-gap: 100px;        /* Abstand zwischen den Arbeiten */
  --work-row-gap: 40px;     /* Bilder -> Text, sobald sie umbrechen */
  --body-row-gap: var(--lh-body);

  /* Rasterpositionen: Seitenebene */
  --gc-contact: 7 / 8;  --gr-contact: 1;
  --contact-align: flex-end;
  --contact-space: 0px;

  /* Rasterpositionen: Header. Die Shows rücken nach links auf, damit die
     Past Shows zwei Spalten bekommen — ihre Einträge sind deutlich länger
     als die der Next Shows. */
  --gc-bio: 1 / 4;   --gr-bio: 1;
  --gc-next: 4 / 5;  --gr-next: 1;
  --gc-past: 5 / 7;  --gr-past: 1;

  /* Rasterpositionen: Arbeiten */
  --gc-figures: 1 / 4;  --fig-cols: 3;
  --gc-body: 4 / 8;     --body-cols: 4;
  --gc-title: 1 / 2;    --gr-title: 1;
  --gc-text: 2 / 4;     --gr-text: 1;
  --gc-specs: 4 / 5;    --gr-specs: 1;
}

/* --------------------------------------------------------------------------
   2. Reset / Basis
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p,
figure {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Bilder sind immer genau eine Rasterspalte breit und behalten ihre eigenen
   Proportionen. Hoch- und Querformat werden dadurch vollständig gezeigt —
   nichts wird beschnitten oder verzerrt. */
img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Seitenrahmen und Raster
   -------------------------------------------------------------------------- */

/* Die Seite selbst ist das 7-Spalten-Raster. Header, Main und Kontakt sind
   Rasterelemente; Header und Main spannen alle Spalten und wiederholen das
   Raster intern deckungsgleich. */
.page {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
  padding: var(--pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}

.masthead,
.works {
  grid-column: 1 / -1;
  min-width: 0;
}

.masthead {
  grid-row: 1;
  row-gap: var(--masthead-row-gap);
}

.works {
  grid-row: 2;
  margin-top: var(--masthead-gap);
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.masthead__bio {
  grid-column: var(--gc-bio);
  grid-row: var(--gr-bio);
}

.shows--next {
  grid-column: var(--gc-next);
  grid-row: var(--gr-next);
}

.shows--past {
  grid-column: var(--gc-past);
  grid-row: var(--gr-past);
}

/* Überschrift und Liste erben die Größe des Fließtexts (12px/14.8px), damit
   der gesamte Header in einer Schriftgröße läuft. */
.shows__heading {
  margin-bottom: 3px;
}

/* Fuge zwischen den Einträgen. Beide Listen enthalten zweizeilige Einträge;
   ohne diese Fuge liest sich die zweite Zeile wie ein eigener Termin. 6px
   heben den Eintragswechsel klar von der Zeilenschaltung (14.8px) ab und
   lassen die einzeiligen Einträge trotzdem dicht stehen. */
.shows__list li + li {
  margin-top: 6px;
}

.shows__list {
  overflow-wrap: break-word;
}

/* Vorschaubild nur am Text des Strömungen-Termins, nicht am Instagram-Link.
   Position folgt dem Cursor (bindShowThumb), analog zum .hint. */
.shows__thumb {
  display: none;
}

@media (hover: hover) {
  .shows__thumb {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 16;
    width: 160px;
    height: auto;
    padding: 4px;
    background: var(--paper);
    object-fit: contain;
    pointer-events: none;
  }

  .shows__thumb[hidden] {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   5. Kontakt — Desktop oben rechts, ab 599px als Footer am Seitenende
   -------------------------------------------------------------------------- */

.contact {
  grid-column: var(--gc-contact);
  grid-row: var(--gr-contact);
  min-width: 0;
  margin-top: var(--contact-space);
}

.contact__list {
  display: flex;
  flex-direction: column;
  align-items: var(--contact-align);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   6. Links
   -------------------------------------------------------------------------- */

.link {
  color: var(--ink);
  text-decoration: none;
  transition: opacity 120ms linear;
  /* Bricht ein Link über zwei Zeilen, bekommt jede Zeile ihren eigenen
     Fokusrahmen statt eines aufgerissenen Kastens. */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.link:active {
  opacity: 0.5;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.link:focus-visible {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   7. Arbeiten
   -------------------------------------------------------------------------- */

.work + .work {
  margin-top: var(--work-gap);
}

.work {
  row-gap: var(--work-row-gap);
}

/* Bildgruppe: eigenes Raster, das die Spaltenbreite des Seitenrasters exakt
   wiederholt (n Spalten + (n-1) Gaps innerhalb von n gespannten Spalten). */
.work__figures {
  grid-column: var(--gc-figures);
  display: grid;
  grid-template-columns: repeat(var(--fig-cols), minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}

/* Kein festes Seitenverhältnis: Die Höhe ergibt sich aus der jeweiligen Datei.
   Der graue Grund verhindert nur, dass der Platz leer zusammenfällt, solange
   ein Bild noch lädt oder fehlt. */
.work__figure {
  position: relative;
  min-height: 40px;
  background: var(--placeholder);
  user-select: none;
  -webkit-user-select: none;
}

/* Klickfläche zum Weiterblättern. Wird nur per JS eingefügt und nur dann,
   wenn ein Projekt mehr Bilder enthält, als Plätze sichtbar sind. */
.work__slot {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.work__slot ~ img {
  transition: opacity 120ms linear;
}

.work__slot:hover ~ img,
.work__slot:focus-visible ~ img {
  opacity: 0.82;
}

.work__slot:active ~ img {
  opacity: 0.6;
}

.work__figure img {
  -webkit-user-drag: none;
}

/* Test-Hinweis zum Vollbild. Zusammen mit bindHint() in script.js entfernen. */
@media (hover: hover) {
  .hint {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 15;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--ink);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: 0;
    white-space: nowrap;
    pointer-events: none;
  }

  .hint[hidden] {
    display: none;
  }
}

/* Textzone: ebenfalls rasterdeckend */
.work__body {
  grid-column: var(--gc-body);
  display: grid;
  grid-template-columns: repeat(var(--body-cols), minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--body-row-gap);
  align-content: start;
  align-items: start;
}

.work__title {
  grid-column: var(--gc-title);
  grid-row: var(--gr-title);
}

.work__text {
  grid-column: var(--gc-text);
  grid-row: var(--gr-text);
}

.work__text p + p {
  margin-top: var(--para-gap);
}

.work__specs {
  grid-column: var(--gc-specs);
  grid-row: var(--gr-specs);
}

/* --------------------------------------------------------------------------
   8. Vollbildansicht
   -------------------------------------------------------------------------- */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  background: #000000;
  color: var(--paper);
}

.viewer[hidden] {
  display: none;
}

/* Hebt die globale Regel img { width: 100% } auf, damit Hoch- und
   Querformat vollständig in den Viewport passen, ohne Beschnitt. */
.viewer__image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, calc(100vw - 88px));
  max-height: calc(100vh - 40px);
  object-fit: contain;
  pointer-events: none;
}

.viewer__close,
.viewer__prev,
.viewer__next {
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.viewer__close {
  top: var(--pad);
  right: var(--pad);
  z-index: 2;
  width: 36px;
  height: 36px;
}

.viewer__prev,
.viewer__next {
  top: 0;
  bottom: 0;
  width: 20%;
  max-width: 160px;
}

.viewer__prev {
  left: 0;
}

.viewer__next {
  right: 0;
}

.viewer__close:hover,
.viewer__prev:hover,
.viewer__next:hover {
  opacity: 0.7;
}

.viewer__close:active,
.viewer__prev:active,
.viewer__next:active {
  opacity: 0.45;
}

.viewer__close:focus-visible,
.viewer__prev:focus-visible,
.viewer__next:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  .link,
  .work__slot ~ img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   9. Responsive Verdichtung: 7 -> 6 -> 5 -> 4 -> 3 -> 2 -> 1 Spalten
   -------------------------------------------------------------------------- */

/* 6 Spalten: Die Shows brechen in eine zweite Headerzeile, damit die
   Past Shows zwei Spalten behalten und die Bio drei breit bleibt. */
@media (max-width: 1279px) {
  :root {
    --cols: 6;

    --gc-contact: 6 / 7;   --gr-contact: 1;
    --gc-bio: 1 / 4;       --gr-bio: 1;
    --gc-next: 1 / 2;      --gr-next: 2;
    --gc-past: 2 / 4;      --gr-past: 2;

    --gc-figures: 1 / 4;  --fig-cols: 3;
    --gc-body: 4 / 7;     --body-cols: 3;
    --gc-title: 1 / 4;    --gr-title: 1;
    --gc-text: 1 / 3;     --gr-text: 2;
    --gc-specs: 3 / 4;    --gr-specs: 2;
  }
}

/* 5 Spalten: Angaben rücken unter den Text, Header weiter zweizeilig */
@media (max-width: 1119px) {
  :root {
    --cols: 5;

    --gc-contact: 5 / 6;   --gr-contact: 1;
    --gc-bio: 1 / 4;       --gr-bio: 1;
    --gc-next: 1 / 2;      --gr-next: 2;
    --gc-past: 2 / 4;      --gr-past: 2;

    --gc-figures: 1 / 4;  --fig-cols: 3;
    --gc-body: 4 / 6;     --body-cols: 2;
    --gc-title: 1 / 3;    --gr-title: 1;
    --gc-text: 1 / 3;     --gr-text: 2;
    --gc-specs: 1 / 3;    --gr-specs: 3;
  }
}

/* 4 Spalten (Tablet): Shows brechen in die zweite Headerzeile, Bilder zweispaltig */
@media (max-width: 959px) {
  :root {
    --cols: 4;

    --masthead-gap: 88px;
    --work-gap: 72px;

    --gc-contact: 4 / 5;  --gr-contact: 1;
    --gc-bio: 1 / 4;      --gr-bio: 1;
    --gc-next: 1 / 2;     --gr-next: 2;
    --gc-past: 2 / 4;     --gr-past: 2;

    --gc-figures: 1 / 3;  --fig-cols: 2;
    --gc-body: 3 / 5;     --body-cols: 2;
    --gc-title: 1 / 3;    --gr-title: 1;
    --gc-text: 1 / 3;     --gr-text: 2;
    --gc-specs: 1 / 3;    --gr-specs: 3;
  }

  .work__text,
  .work__specs,
  .masthead__bio {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* 3 Spalten: Bilder oben über die volle Rasterbreite.

   Ab hier stehen Bilder und Text übereinander, das Layout ist also gestapelt.
   Die Zugehörigkeit kann dann nur noch der vertikale Abstand zeigen, deshalb
   rückt der Abstand zwischen zwei Arbeiten deutlich von den Abständen
   innerhalb einer Arbeit ab (Verhältnis mindestens 3:1). */
@media (max-width: 767px) {
  :root {
    --cols: 3;

    --masthead-gap: 88px;
    --work-gap: 80px;      /* zwischen zwei Arbeiten */
    --work-row-gap: 24px;  /* Bilder -> Text innerhalb einer Arbeit */

    --gc-contact: 3 / 4;  --gr-contact: 1;
    --gc-bio: 1 / 3;      --gr-bio: 1;
    --gc-next: 1 / 2;     --gr-next: 2;
    --gc-past: 2 / 4;     --gr-past: 2;

    --gc-figures: 1 / 4;  --fig-cols: 2;
    --gc-body: 1 / 4;     --body-cols: 3;
    --gc-title: 1 / 4;    --gr-title: 1;
    --gc-text: 1 / 3;     --gr-text: 2;
    --gc-specs: 3 / 4;    --gr-specs: 2;
  }
}

/* 2 Spalten: Kontakt wandert ans Seitenende (echter Footer) */
@media (max-width: 599px) {
  :root {
    --cols: 2;

    --masthead-gap: 80px;
    --masthead-row-gap: 24px;
    --work-gap: 72px;
    --work-row-gap: 24px;

    --gc-contact: 1 / -1;  --gr-contact: 3;
    --contact-align: flex-start;
    --contact-space: var(--work-gap);

    --gc-bio: 1 / 3;   --gr-bio: 1;
    --gc-next: 1 / 3;  --gr-next: 2;
    --gc-past: 1 / 3;  --gr-past: 3;

    --gc-figures: 1 / 3;  --fig-cols: 2;
    --gc-body: 1 / 3;     --body-cols: 2;
    --gc-title: 1 / 3;    --gr-title: 1;
    --gc-text: 1 / 3;     --gr-text: 2;
    --gc-specs: 1 / 3;    --gr-specs: 3;
  }
}

/* 1 Spalte (Mobile) — nur der Text; die Bildgruppe bleibt zweispaltig, weil
   sich über den Klickwechsel ohnehin jedes Bild erreichen lässt. */
@media (max-width: 439px) {
  :root {
    --cols: 1;

    --masthead-gap: 72px;
    --work-gap: 64px;
    --work-row-gap: 20px;

    --gc-contact: 1 / -1;  --gr-contact: 3;

    --gc-bio: 1 / 2;   --gr-bio: 1;
    --gc-next: 1 / 2;  --gr-next: 2;
    --gc-past: 1 / 2;  --gr-past: 3;

    --gc-figures: 1 / 2;  --fig-cols: 2;
    --gc-body: 1 / 2;     --body-cols: 1;
    --gc-title: 1 / 2;    --gr-title: 1;
    --gc-text: 1 / 2;     --gr-text: 2;
    --gc-specs: 1 / 2;    --gr-specs: 3;
  }
}