/* Selbst gehostete Schriften, keine Fremdeinbindung (CLAUDE.md, Regel 6).
   Beide unter SIL Open Font License 1.1, Lizenztexte liegen daneben.
   Variable Schnitte: eine Datei deckt den Gewichtsbereich 400-600 ab.
   Getrennt nach latin und latin-ext, damit Besucher ohne deutsche Umlaute
   oder Akzente die zweite Datei gar nicht erst laden. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* atimaier.com
   Mobile-first und fliessend. Kein Fremd-CDN, keine Abhaengigkeit (CLAUDE.md,
   Regel 6). Die Schriftfamilien stehen als Variable, damit der Wechsel auf
   selbst gehostete WOFF2 eine Zeile ist und nicht vierzig. */

:root {
  /* Farbschema "Deep Space" (Justus, 25.09.2026, seitenweit), im zweiten
     Durchgang zurueckgenommen: "zu viel Blau", Schrift weiss statt eingefaerbt.
     Grund fast neutrales Schwarz, Tafeln und Karten neutrales Dunkelgrau mit
     einem Hauch Kuehle, Schrift weiss und neutral grau. Cyan bleibt die eine
     Farbe, als Akzent - kuehl, damit Ati Maiers warme, farbintensive Arbeiten
     nicht mit der Oberflaeche konkurrieren. Bis 25.09.2026 warmes Ocker
     (#f2b068) auf Braunschwarz, dazwischen Mitternachtsblau. */
  --bg:        #0a0a0c;
  --bg-raised: #131417;
  --text:      #f5f5f5;
  --text-dim:  #b4b4b8;
  --rule:      #2a2b30;
  /* Karten der Startseite: Mitternachtsblau mit blauer Kante, die Schrift
     darauf weiss (Justus, 25.09.2026: "Hintergrund der Karten wie vorher blau
     lassen") - das Blau bleibt auf die Karten beschraenkt, Menue und Tafeln
     sind neutral. */
  --bg-card:   #141d33;
  --rule-card: #2a3a63;
  /* Gedaempfter Text auf Karten, neutral grau (Pruefung 6: 8,1:1). */
  --text-dim-card: #b4b4b8;
  --accent:    #5ce1e6;

  --font-text: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --font-ui:   "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 64ch;
  --gap: clamp(1rem, 3vw, 2rem);
  --pad: clamp(1rem, 4vw, 3rem);
  /* Gemeinsamer Rahmen fuer Kopf, Inhalt und Fuss (Justus, 02.10.2026): auf
     grossen Schirmen steht die Seite mittig, links und rechts bleibt Grund.
     80rem fasst die breiteste Menuetafel (3 x 22rem) und Werkraster mit vier
     bis fuenf Spalten. Darunter aendert sich nichts. */
  --rahmen: 80rem;
}

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

/* Den Platz der Bildlaufleiste immer freihalten: sonst steht der mittige
   Rahmen auf langen Seiten (mit Leiste) und kurzen (ohne, etwa Contact) um
   ihre Breite versetzt, und der Kopf springt beim Seitenwechsel (Justus,
   02.10.2026). */
html { color-scheme: dark; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img, picture { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #111;
  padding: 0.6em 1em; font-family: var(--font-ui);
}
.skip:focus { left: var(--pad); top: 0.5rem; z-index: 10; }

/* --- Kopf und Navigation --- */

/* Der Rahmen: main ist hoechstens so breit wie er und steht mittig; Kopf und
   Fuss behalten ihre Linie ueber die volle Breite und ruecken nur ihren Inhalt
   auf dieselbe Kante ein. So beginnen Namenszug, Menue, Inhalt und Fuss auf
   jeder Seite an derselben Stelle - auch die Menuetafeln, die am Menue haengen. */
main { max-width: var(--rahmen); margin-inline: auto; }
.masthead, .footer {
  padding-inline: max(var(--pad), calc((100% - var(--rahmen)) / 2 + var(--pad)));
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem var(--gap);
  padding-top: var(--pad);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

/* Markenzeile wie im alten Kopf: Namenszug links, Leiterbahn rechts,
   Navigation darunter. Sie nimmt die volle Breite, damit die Navigation
   nicht dazwischenrutscht. */
.masthead__brand {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}


/* Beide Grafiken sind Vektoren mit transparentem Grund - kein mix-blend-mode
   mehr noetig, und beliebig skalierbar. Die Masse hier sind eine Setzung,
   keine Grenze der Dateien. */
.masthead__label {
  width: 114px;
  max-width: 42vw;
  height: auto;
}

/* Die Leiterbahn traegt preserveAspectRatio="xMaxYMid slice": reicht der Platz
   nicht, wird sie links angeschnitten statt gestaucht - und genau dort blendet
   sie ohnehin aus. Deshalb feste Hoehe und nachgebende Breite. */
.masthead__circuit {
  width: 420px;
  min-width: 0;
  flex-shrink: 1;
  height: 26px;
}

/* Hauptmenue mit bis zu drei Stufen (src/_data/menue.js). Die zweite Stufe
   klappt als Tafel unter dem Oberpunkt auf, die dritte darin nach unten auf -
   nicht seitlich ausfliegend: so verhaelt sie sich mit Maus, Tastatur und
   Finger gleich, und lange Listen (22 Jahrgaenge unter Galleries) rollen in
   der Tafel, statt aus dem Fenster zu laufen. Die Grossschreibung gleicht die
   uneinheitliche Schreibung der alten Menuetexte an. */
.nav { position: relative; flex: 1 0 100%; }
.nav ul { margin: 0; padding: 0; list-style: none; }

.nav__stufe1 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.nav a, .nav summary {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim);
  padding: 0.3em 0;
  display: inline-block;
  cursor: pointer;
}
.nav summary { list-style: none; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after {
  content: "";
  display: inline-block;
  width: 0.4em; height: 0.4em;
  margin-left: 0.5em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.2em) rotate(45deg);
}
.nav details[open] > summary::after { transform: translateY(0.05em) rotate(-135deg); }

.nav a:hover, .nav summary:hover { color: var(--accent); }
.nav details[open] > summary,
.nav__pfad > a,
.nav__pfad > details > summary { color: var(--text); }
.nav a[aria-current="page"],
.nav__stufe1 > .nav__pfad > details > summary,
.nav__stufe1 > .nav__pfad > a {
  color: var(--text);
  border-bottom: 1px solid var(--accent);
}

/* Zweite Stufe: Tafel unter dem Oberpunkt. */
.nav__stufe1 > li { position: relative; }
.nav .nav__stufe2 {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: -0.9rem;
  z-index: 20;
  min-width: 21rem;
  max-width: min(26rem, calc(100vw - 2rem));
  max-height: min(70vh, 40rem);
  overflow-y: auto;
  padding: 0.5rem 0.9rem;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.45);
}
.nav__stufe2 a, .nav__stufe2 summary,
.nav__stufe3 a {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
  padding: 0.45em 0;
}
.nav__stufe2 a[aria-current="page"],
.nav__stufe3 a[aria-current="page"] { border-bottom: 0; color: var(--accent); }
.nav__pdf { color: var(--text-dim); letter-spacing: 0.04em; }

/* Spaltentafeln: Galleries und Group Shows nach Dekaden, SpaceRider nach
   Filmen und Uebrigem. Die Tafel beginnt am linken Rand des Menues und ist
   hoechstens so breit, wie ihre Spalten brauchen. Das Jahr steht vorn in
   fester Breite und bildet eine senkrechte Achse, an der man entlangliest. */
.nav__stufe1 > li.nav__breit { position: static; }
.nav .nav__stufe2--spalten {
  left: 0; right: 0;
  min-width: 0; max-width: none;
}
.nav__jahr {
  display: inline-block;
  min-width: 3.2em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  /* Als inline-block erbte sie sonst den negativen Einzug des Verweises und
     rutschte ein zweites Mal nach links. */
  text-indent: 0;
}
a[aria-current="page"] .nav__jahr { color: inherit; }
/* Ein umbrechender Titel laeuft hinter der Jahreszahl weiter, nicht darunter. */
.nav .nav__stufe2--spalten .nav__stufe3 a:has(> .nav__jahr) { padding-left: 3.2em; text-indent: -3.2em; }
/* Nebenangabe: die Anzahl hinter dem Jahrgang, der Ort unter einer
   ausgewaehlten Ausstellung. */
.nav__zusatz { color: var(--text-dim); text-transform: none; letter-spacing: 0.02em; }
.nav__auswahl .nav__zusatz { display: block; font-size: 0.95em; margin-top: 0.1em; }
/* Die Ortszeile steht unter dem Titel, nicht unter der Jahreszahl: als Block
   erbte sie sonst den negativen Einzug des Verweises. */
.nav__auswahl .nav__zusatz { text-indent: 0; }
/* Hinweis an den Jahrgaengen der Gruppenausstellungen: die Titel des Jahres,
   bei Mauskontakt oder Tastaturfokus (teile/menue.njk). Er haengt am
   Listenpunkt, nicht am Verweis - wer mit der Maus auf ihn hinuebergeht,
   verliert ihn nicht (WCAG 1.4.13); Escape schliesst mit der Tafel auch ihn.
   Auf Geraeten ohne Mauszeiger gibt es kein Ueberfahren; dort steht dieselbe
   Liste einen Tipp weiter auf der Jahrgangsseite. */
.nav__stufe3 > li { position: relative; }
.nav__hinweis {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  z-index: 30;
  width: max-content;
  max-width: 22rem;
  padding: 0.55rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.5);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text);
}
.nav__hinweis > span { display: block; }
.nav__hinweis > span + span { margin-top: 0.25rem; }
.nav__stufe3 > li:focus-within > .nav__hinweis { display: block; }
@media (hover: hover) {
  .nav__stufe3 > li:hover > .nav__hinweis { display: block; }
}
/* In der rechten Spalte nach links aufklappen, sonst liefe er aus dem Fenster. */
.nav__stufe2--spalten > li:last-child .nav__hinweis { left: auto; right: 0; }
/* "2020s", nicht "2020S". */
.nav__stufe2--spalten > li > details > summary { text-transform: none; }

/* Am Rechner stehen die Spalten nebeneinander und immer offen
   (assets/js/menue.js oeffnet sie); ihre Kopfzeile ist Ueberschrift,
   kein Schalter. "Am Rechner": breit und mit Maus - auf Telefon und Tablet ist
   das Menue ein Blatt von unten (siehe "Leiste und Blatt"). Dieselbe Abfrage
   steht als DESKTOP in assets/js/menue.js. */
@media (min-width: 64.01rem) and (hover: hover) and (pointer: fine) {
  .nav .nav__stufe2--spalten {
    display: grid;
    grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
    max-width: calc(var(--spalten, 3) * 22rem);
    gap: 0 var(--gap);
  }
  /* Mit der Spalte "Selected" vorn: sie traegt Titel und Ort und bekommt
     mehr Raum als die Jahrgaenge. */
  .nav .nav__stufe2--spalten:has(> .nav__auswahl) {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
    padding: 1rem 1.25rem 1.25rem;
  }
  .nav__stufe2--spalten > li > details > summary {
    pointer-events: none;
    cursor: default;
    color: var(--text);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0.4rem;
  }
  .nav__stufe2--spalten > li > details > summary::after { display: none; }
  .nav .nav__stufe2--spalten .nav__stufe3 {
    margin: 0; padding-left: 0; border-left: 0;
  }
}

/* Dritte Stufe: klappt innerhalb der Tafel auf. */
.nav .nav__stufe3 {
  margin: 0 0 0.4rem 0.2rem;
  padding-left: 0.8rem;
  border-left: 1px solid var(--rule);
}

/* Schmal: die Tafel nimmt die ganze Breite des Menues ein, unter der Zeile
   der Oberpunkte, statt am einzelnen Punkt zu haengen. */
@media (max-width: 40rem) {
  .nav__stufe1 > li { position: static; }
  .nav .nav__stufe2 {
    left: 0; right: 0;
    min-width: 0; max-width: none;
  }
}

/* --- Leiste und Blatt (Telefon und Tablet) ---
   Justus, 10.10.2026: auf kleinen Schirmen und Touch-Geraeten, auch dem iPad
   quer, steht unten eine Leiste (teile/leiste.njk), und das Hauptmenue faehrt
   als Blatt von unten herein. Die Abfrage ist das genaue Gegenteil der
   Rechner-Abfrage oben. Bedienflaechen mindestens 44 px hoch. */
.leiste, .leiste__schleier, .nav .nav__zu { display: none; }

@media not all and (min-width: 64.01rem) and (hover: hover) and (pointer: fine) {
  body { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .masthead { padding-bottom: 1rem; }

  /* Schwebend wie in heutigen Apps (Justus, 11.10.2026): abgerundet, mit
     Abstand zum Rand, halb durchsichtig mit Unschaerfe dahinter. Der Abstand
     unten beruecksichtigt den Home-Balken des iPhones (safe-area). */
  .leiste {
    display: block;
    position: fixed;
    left: 0.75rem; right: 0.75rem;
    bottom: calc(0.6rem + env(safe-area-inset-bottom));
    max-width: 30rem; margin: 0 auto;
    /* Ueber dem offenen Blatt: "Menu" schliesst es wieder, wo es geoeffnet wurde. */
    z-index: 65;
    background: rgb(28 29 34 / 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 1.6rem;
    box-shadow: 0 0.6rem 1.8rem rgb(0 0 0 / 0.45);
    transition: transform 0.3s ease;
  }
  .leiste--weg { transform: translateY(calc(100% + 1rem + env(safe-area-inset-bottom))); }
  .leiste ul {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0; padding: 0.15rem 0.35rem; list-style: none;
  }
  .leiste a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.2rem; min-height: 3.6rem; border-radius: 1.3rem;
    font-family: var(--font-ui); font-size: 0.62rem; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
    color: var(--text-dim);
  }
  .leiste svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .leiste a.leiste__an, .leiste a[aria-expanded="true"] { color: var(--accent); }
  .leiste a[aria-expanded="true"] { background: rgb(255 255 255 / 0.08); }

  .leiste__schleier:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgb(0 0 0 / 0.55);
  }
  html.blatt-offen { overflow: hidden; }

  /* Das Hauptmenue als Blatt. */
  /* Schwebend ueber der Leiste, wie sie abgerundet und halb durchsichtig. */
  .masthead .nav {
    position: fixed; left: 0.75rem; right: 0.75rem;
    bottom: calc(5.2rem + env(safe-area-inset-bottom));
    z-index: 60;
    max-height: calc(82vh - 5.2rem); max-height: calc(82dvh - 5.2rem);
    overflow-y: auto; overscroll-behavior: contain;
    max-width: 30rem; margin: 0 auto;
    padding: 0.25rem 1.25rem 1.25rem;
    background: rgb(24 25 30 / 0.9);
    -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 1.4rem;
    box-shadow: 0 0.75rem 2.5rem rgb(0 0 0 / 0.6);
    transform: translateY(calc(100% + 7rem));
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .masthead .nav.offen, .masthead .nav:target {
    transform: none; visibility: visible;
    transition: transform 0.25s ease;
  }
  .nav .nav__zu {
    display: flex; justify-content: flex-end; align-items: center;
    min-height: 2.75rem;
    font-family: var(--font-ui); font-size: 0.8rem; color: var(--text-dim);
    text-decoration: none;
  }
  .nav__zu::before {
    content: ""; width: 2.5rem; height: 0.3rem; border-radius: 0.2rem;
    background: var(--rule); margin-right: auto; margin-left: calc(50% - 1.25rem);
  }
  .nav__stufe1 { display: block; }
  .nav__stufe1 > li { position: static; border-bottom: 1px solid var(--rule); }
  .nav__stufe1 > li > a, .nav__stufe1 > li > details > summary {
    display: flex; align-items: center; min-height: 3.25rem;
    font-size: 0.92rem; border-bottom: 0;
  }
  .nav__stufe1 > li > details > summary::after { margin-left: auto; }
  .nav__stufe1 > .nav__pfad > details > summary,
  .nav__stufe1 > .nav__pfad > a { color: var(--accent); border-bottom: 0; }
  .nav .nav__stufe2, .nav .nav__stufe2--spalten {
    position: static; display: block;
    min-width: 0; max-width: none; max-height: none; overflow: visible;
    padding: 0 0 0.75rem; background: none; border: 0; box-shadow: none;
  }
  .nav__stufe2 a, .nav__stufe2 summary, .nav__stufe3 a {
    display: flex; align-items: baseline; min-height: 2.75rem; padding: 0.7em 0;
    font-size: 0.85rem;
  }
  .nav .nav__stufe2--spalten .nav__stufe3 a:has(> .nav__jahr) { padding-left: 0; text-indent: 0; }
  .nav__jahr { flex: none; }
  .nav__hinweis { display: none !important; }

  /* Galleries oder SpaceRider aus der Leiste: nur dieser Zweig, sein Name als
     Ueberschrift statt als Schalter (assets/js/menue.js, data-nur). */
  .nav[data-nur] .nav__stufe1 > li { display: none; }
  .nav[data-nur="galleries"] .nav__stufe1 > li[data-zweig="galleries"],
  .nav[data-nur="spacerider"] .nav__stufe1 > li[data-zweig="spacerider"] { display: block; border-bottom: 0; }
  .nav[data-nur] .nav__stufe1 > li > details > summary {
    pointer-events: none; color: var(--accent);
    font-size: 0.8rem; letter-spacing: 0.14em; min-height: 2.5rem;
  }
  .nav[data-nur] .nav__stufe1 > li > details > summary::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .leiste, .masthead .nav { transition: none !important; }
}

/* --- Brotkrumen --- */

.breadcrumb { padding: 1.25rem var(--pad) 0; font-family: var(--font-ui); font-size: 0.78rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; color: var(--text-dim); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--rule); }
.breadcrumb a { text-decoration: none; }

/* --- Ausstellungsseite --- */

.exhibition { padding: 0 var(--pad) 4rem; }

.exhibition__head { padding: 2rem 0 2.5rem; max-width: var(--measure); }

.exhibition__head h1 {
  font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.4rem);
  line-height: 1.1;
  font-weight: 400;
  margin: 0 0 0.6rem;
}

.exhibition__meta {
  display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

/* Das Kopfbild steht buendig an der Kante des Rahmens wie alles andere
   (Justus, 02.10.2026). Vorher sprengte es die Innenabstaende der Seite, um
   bis zur Fensterbreite zu reichen - im Rahmen stand es dadurch links ueber. */
.lead {
  margin: 0 0 3rem;
}

.section { margin: 0 0 4rem; }

.section h2 {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

/* --- Raster --- */
/* auto-fit statt fester Umbruchpunkte: das Raster faellt von selbst auf eine
   Spalte, ohne dass die Seite Geraeteklassen kennen muss (SPEC.md, Gestaltung). */

.grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--gap);
}

.grid--shots { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--works { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.grid figure { margin: 0; }

.grid img { width: 100%; background: var(--bg-raised); }

.grid figcaption {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-dim);
  padding-top: 0.6rem;
}

/* Bildunterschrift dauerhaft sichtbar, nicht erst bei Mauskontakt (SPEC.md) */
.work__title { display: block; color: var(--text); font-size: 0.95rem; font-family: var(--font-text); }
.work__meta  { display: block; margin-top: 0.35rem; }

/* --- Fuss --- */

.footer {
  border-top: 1px solid var(--rule);
  padding-top: 2rem; padding-bottom: 3rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-dim);
}
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem var(--gap); }
.footer p { margin: 0; }
.footer a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Galerieansicht (PhotoSwipe) --- */

/* Dauerhaft sichtbare Bildunterschrift statt Einblendung bei Mauskontakt
   (SPEC.md, "Galerieansicht"). Sitzt unter dem Bild, nicht darueber. */
.pswp__unterschrift {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem clamp(1rem, 4vw, 3rem) 1.4rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}
.pswp__unterschrift:empty { display: none; }
.pswp__unterschrift b { font-family: var(--font-text); font-weight: 400; font-size: 1.05rem; }

.pswp__counter { font-family: var(--font-ui); opacity: 0.8; }

/* Die Ausloeser sind Verweise auf das Original: ohne JavaScript oeffnet sich
   schlicht die Bilddatei. Der Verweis soll aussehen wie das Bild selbst. */
.grid a { display: block; text-decoration: none; }
.grid a:focus-visible { outline-offset: 4px; }

/* Fliesstext eines Ausstellungs- oder Pressetextes. Die Zeilenlaenge wird
   begrenzt, weil langer Text ueber die volle Breite eines Grossbildschirms
   nicht mehr lesbar ist - das Auge findet den Zeilenanfang nicht wieder. */
.prose { max-width: 42rem; }
.prose p { margin: 0 0 1.2em; }

/* Ueberschrift, die nur fuer Screenreader da ist. Der Abschnitt braucht einen
   Namen, damit aria-labelledby greift; sichtbar waere er hier ueberfluessig,
   weil der Text unmittelbar unter dem Seitenkopf steht. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Liste aus Verweisen: Videoquellen, externe Seiten. */
.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { margin: 0 0 0.5em; }

/* Weitere Aufnahmen desselben Werks, als Reihe unter dem Hauptbild. */
.work__views { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; padding: 0; }
.work__views li { flex: 0 0 auto; }
.work__views img { display: block; width: 4rem; height: auto; }

/* Ueberschrift einer Werkgruppe, die sich Mass, Material und Jahr teilt. */
.grid__group { font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 2rem 0 0.8rem; }

/* Verweise auf die uebrigen Seiten derselben Ausstellung. */
.siblings { margin: 3rem 0 0; }
.siblings ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.2rem; margin: 0; padding: 0; }
.siblings [aria-current="page"] { font-weight: 600; }

/* Anschrift der Galerie im Seitenkopf. */
.exhibition__address { font-style: normal; margin: 0.6rem 0 0; }

/* Angaben zu einer Videoarbeit: Beteiligte, Laenge, Format, Auflage. */
.credits { list-style: none; margin: 0; padding: 0; max-width: 42rem; }
.credits li { margin: 0 0 0.3em; }

/* Zusatz im Seitenkopf: Untertitel, Hinweis auf eine Doppelausstellung. */
.exhibition__note { margin: 0.4rem 0 0; max-width: 42rem; }

/* --- Allgemeine Seite (Uebersichten, Textseiten) ------------------------- */
/* Derselbe Seitenrand wie bei den Ausstellungsseiten (.exhibition). */
.seite { padding: 1.5rem var(--pad) 4rem; }
.seite__head { margin: 0 0 2.5rem; }
.seite__intro { max-width: 42rem; margin: 0.6rem 0 0; }

/* --- Zeitleiste der Ausstellungen --------------------------------------- */
.jahr { margin: 0 0 2.5rem; }
.jahr__zahl { font-size: 1.1rem; letter-spacing: 0.1em; margin: 0 0 0.6rem; }
.jahr__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ausstellung {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto;
  gap: 0.2rem 1rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.ausstellung__titel { font-weight: 600; }
.ausstellung__ort, .ausstellung__zeit { color: var(--text-dim); font-size: 0.92rem; }
/* Die Art steht rechts und schmal: sie unterscheidet, ohne zu dominieren. */
.ausstellung__art {
  grid-column: 3; grid-row: 1;
  color: var(--text-dim);
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
}
@media (max-width: 40rem) {
  .ausstellung { grid-template-columns: 1fr auto; }
  .ausstellung__ort, .ausstellung__zeit { grid-column: 1; }
}

/* --- Kontaktseite -------------------------------------------------------- */
.kontakt__adresse { font-size: 1.2rem; margin: 0 0 2rem; }
.kontakt__qr { margin: 0 0 2rem; }
.kontakt__qr img { width: 8rem; height: auto; display: block; }
.kontakt__qr figcaption { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.4rem; }
.kontakt__rechte { color: var(--text-dim); font-size: 0.9rem; }

/* --- Impressum und Datenschutz ------------------------------------------- */
.rechtliches { max-width: 46rem; margin: 0 0 3rem; }
.rechtliches h2 { margin: 0 0 0.5rem; }
.rechtliches h3 { font-size: 1.05rem; margin: 1.75rem 0 0.4rem; }
.rechtliches__anschrift { font-style: normal; margin: 1rem 0; }
.rechtliches__angaben > div {
  display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  gap: 0 1.25rem; padding: 0.3rem 0; border-top: 1px solid var(--rule);
}
.rechtliches__angaben dt { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-dim); padding-top: 0.15em; }
.rechtliches__angaben dd { margin: 0; }
/* Noch zu liefernde Angabe: im Vorschaubereich deutlich sichtbar, damit Ati
   sie sieht. Vor dem finalen Austausch darf keine mehr uebrig sein. */
.offen {
  font-family: var(--font-ui); font-size: 0.85em;
  padding: 0.05em 0.45em; border: 1px dashed var(--accent); border-radius: 4px;
  color: var(--accent);
}
@media (max-width: 40rem) {
  .rechtliches__angaben > div { grid-template-columns: minmax(0, 1fr); }
}

/* --- Listen des Lebenslaufs ---------------------------------------------- */
.eintraege { list-style: none; margin: 0 0 2rem; padding: 0; }
.eintrag {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  max-width: 52rem;
}
.eintrag--schlicht { grid-template-columns: minmax(0, 1fr); }
.eintrag__jahr { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.eintrag__text { display: block; }
.eintrag__zeile { display: block; }
.eintrag__autor { color: var(--text-dim); }
.eintrag__verweise { display: block; font-size: 0.9rem; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .eintrag { grid-template-columns: minmax(0, 1fr); }
  .eintrag__jahr { margin-bottom: 0.2rem; }
}

/* Der Lebenslauf als PDF, an prominenter Stelle (SPEC.md, User Story 3). */
.cv__pdf { margin: 0 0 2.5rem; }
.cv__pdf a {
  display: inline-block; padding: 0.6rem 1.1rem;
  border: 1px solid var(--accent); border-radius: 2px;
  color: var(--accent); text-decoration: none;
}
.cv__pdf a:hover, .cv__pdf a:focus-visible { background: var(--accent); color: var(--bg); }

/* --- Uebersicht ueber Filme und SpaceRider-Arbeiten ---------------------- */
.grid--medien { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.medium__bild { display: block; margin: 0 0 0.7rem; }
.medium__bild img { display: block; width: 100%; height: auto; }
.medium__titel { font-size: 1rem; margin: 0 0 0.3rem; }
.medium__angaben { color: var(--text-dim); font-size: 0.85rem; margin: 0 0 0.5rem; }
.medium__angaben span { display: block; }
.medium__synopsis { font-size: 0.95rem; margin: 0; }

/* --- Nachrichten --------------------------------------------------------- */
.news { padding: 0 0 2rem; margin: 0 0 2rem; border-bottom: 1px solid var(--rule); }
.news__art {
  color: var(--text-dim); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.3rem;
}
.news__titel { font-size: 1.2rem; margin: 0 0 0.6rem; }
.news__text { max-width: 42rem; }
.news__text p { margin: 0 0 0.4em; }
.grid--news { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 1rem 0; }

/* --- Startseite ---------------------------------------------------------- */
/* Ein Anschlagbrett fuer das Aktuelle (Wunsch von Ati Maier, 25.09.2026): jede
   Meldung eine Karte wie ein Plakat (von Ati gewaehlte Variante G), alle in
   einer Spalte. Seit 02.10.2026 so breit wie jede andere Seite, im
   gemeinsamen Rahmen (Justus: vorher mittig auf hoechstens 54rem, schmaler als
   work.html). Lesbar bleiben die Zeilen ueber die Textbreite in der Karte. */
.start {
  padding: 2.5rem var(--pad) 4rem;
}
.start__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.25rem 1.5rem;
  margin: 0 0 1.75rem;
}
.start__titel { font-size: 1.4rem; margin: 0; }
.start__stand {
  margin: 0;
  font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--text-dim);
}
.start__stand time { color: var(--text); }

/* minmax(0, 1fr): ohne feste Spur waechst die Rasterspalte mit dem laengsten
   unteilbaren Inhalt (einer langen Adresse) und schiebt die Karten auf dem
   Telefon ueber den Rand. */
.karten {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem;
}

/* Die Karte hebt sich deutlich vom Grund ab (Ati: heller als der erste
   Entwurf); der gedaempfte Text ist dafuer etwas heller gesetzt, damit er
   auf dem helleren Grund lesbar bleibt (Pruefung 6). */
.karte {
  --text-dim: var(--text-dim-card);
  --rand: clamp(1.25rem, 3vw, 2rem);
  position: relative;
  overflow: hidden; overflow-wrap: anywhere;
  padding: 0 0 1.75rem;
  background: var(--bg-card);
  /* Die Kante traegt die Abgrenzung: Kartengrund und Seitengrund liegen im
     Nachthimmel-Schema nah beieinander. */
  border: 1px solid var(--rule-card);
  border-radius: 10px;
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.6);
}
.karte > * { margin-left: var(--rand); margin-right: var(--rand); }
.karte:not(.karte--bild) { border-left: 6px solid var(--accent); padding-top: 1.75rem; }

.karte__titel {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.2;
  margin-top: 0; margin-bottom: 1rem;
}
.karte:not(.karte--bild) .karte__titel { color: var(--accent); }

/* Kopf: Bilder und Titel in derselben Rasterzelle, der Titel unten auf einem
   dunklen Verlauf ueber den Bildern. Im Quelltext steht der Titel vorn. */
.karte .karte__kopf { display: grid; margin: 0 0 1.25rem; }
.karte__kopf > * { grid-area: 1 / 1; }
.karte__kopf .karte__titel {
  align-self: end; z-index: 1;
  margin: 0; padding: 4rem var(--rand) 1rem;
  background: linear-gradient(to top, rgb(0 0 0 / 0.88), rgb(0 0 0 / 0));
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
  pointer-events: none;
}
/* Bis zu drei Bilder nebeneinander, gleich hoch und zusammen genau kartenbreit:
   jedes waechst im Verhaeltnis seiner Breite zur Hoehe (flex-grow im Markup).
   Sehr hohe Reihen werden gekappt und dafuer gleichmaessig beschnitten. */
.karte__reihe { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; }
.karte__reihe > li { flex-basis: 0; min-width: 0; }
.karte__reihe a, .karte__reihe picture { display: block; }
.karte__reihe img { width: 100%; height: auto; max-height: 34rem; object-fit: cover; }

/* Videos: oben kartenbreit wie ein Bild, ein hochkantes Video nicht hoeher
   als eine Bildreihe. Vimeo als Flaeche mit Abspielknopf (assets/js/vimeo.js). */
.karte .karte__medien { margin-bottom: 1.25rem; }
.karte .karte__medien--oben { margin: 0 0 1.25rem; }
.karte__video {
  display: block; width: 100%; max-height: 34rem;
  background: #000;
}
.karte__vimeo, .karte__vimeo-rahmen {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
}
.karte__vimeo {
  position: relative;
  display: grid; place-items: center; align-content: center; gap: 0.75rem;
  background: radial-gradient(circle at 50% 45%, #2e3038, #0a0a0c 75%);
  color: #fff; text-decoration: none;
}
.karte__vimeo-bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Standbild leicht abgedunkelt, damit Knopf und Schrift darauf lesbar sind. */
.karte__vimeo:has(.karte__vimeo-bild)::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgb(0 0 0 / 0.65), rgb(0 0 0 / 0.15));
}
.karte__vimeo > .karte__play, .karte__vimeo > .karte__vimeo-text { position: relative; z-index: 2; }
.karte__vimeo-text { text-shadow: 0 1px 3px rgb(0 0 0 / 0.8); }
.karte__play {
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.5);
}
.karte__play::after {
  content: ""; margin-left: 0.3rem;
  border-style: solid; border-width: 0.8rem 0 0.8rem 1.3rem;
  border-color: transparent transparent transparent #111;
}
.karte__vimeo:hover .karte__play, .karte__vimeo:focus-visible .karte__play { transform: scale(1.06); }
.karte__vimeo-text { font-family: var(--font-ui); font-size: 0.95rem; text-align: center; }
.karte__vimeo-text small { display: block; margin-top: 0.2rem; font-size: 0.75rem; color: #d4d4d8; }
.news__video { display: block; width: 100%; max-width: 40rem; max-height: 30rem; margin: 1rem 0; background: #000; }

/* Weitere Bilder als Reihe kleiner Kacheln. */
.karte__kacheln {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: -0.5rem; margin-bottom: 1.25rem;
}
.karte__kacheln img { width: 5.5rem; height: 5.5rem; object-fit: cover; }

.karte__art {
  margin-top: 0; margin-bottom: 0.4rem;
  font-family: var(--font-ui); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
}
/* Text in der Karte auf Lesebreite, links an der Kante der Karte - die Bilder
   darueber nehmen die ganze Breite. */
.karte > .karte__text { max-width: 46rem; }
.karte__text p { margin: 0 0 0.5em; }
.karte__text + .karte__text { margin-top: 1rem; }
.karte__zwischentitel { font-weight: 600; margin-top: 1rem !important; }

/* Angaben ("Hours:" - "11am to 6pm ..."): zwei Spalten, auf dem Telefon die
   Werte eingerueckt unter der Bezeichnung (Ati: nicht als flache Liste). */
.karte__angaben { margin: 0.75rem 0 1rem; }
.karte__angaben > div {
  display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  gap: 0 1.25rem; padding: 0.3rem 0;
  border-top: 1px solid var(--rule-card);
}
.karte__angaben > div:first-child { border-top: 0; }
.karte__angaben dt {
  font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.03em;
  color: var(--text-dim); padding-top: 0.2em;
}
.karte__angaben dd { margin: 0; }

.karte__verweise {
  list-style: none; padding: 0.25rem 0 0; margin-top: 1.25rem; margin-bottom: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  font-family: var(--font-ui); font-size: 0.85rem;
}
.karte__verweise a {
  display: inline-block; padding: 0.45em 1em;
  border: 1px solid var(--accent); border-radius: 999px;
  color: var(--accent); text-decoration: none;
}
.karte__verweise a:hover, .karte__verweise a:focus-visible { background: var(--accent); color: #111; }
/* Notizen ohne Verweis (Pierogi at thirty) bleiben schlichte Zeilen. */
.karte__verweise li:not(:has(a)) { flex-basis: 100%; }

@media (max-width: 40rem) {
  .start { padding: 1.5rem var(--pad) 3rem; }
  .karte__angaben > div { grid-template-columns: minmax(0, 1fr); }
  .karte__angaben dd { padding-left: 1rem; }
}

/* Fundstelle einer Besprechung: Zeitschrift, Seite, Datum. */
.eintrag__quelle { color: var(--text-dim); overflow-wrap: anywhere; }
/* Fotos an einem Eintrag: Residenz, Ausstellungsansicht. */
.eintrag__bilder { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; }
.eintrag__bild img { display: block; width: 7rem; height: auto; }
.seite__zurueck { margin: 2.5rem 0 0; }

/* --- Jahrgang der Gruppenausstellungen ----------------------------------- */
/* Jede Ausstellung eine Kachel, die Kacheln in Spalten gestapelt (Masonry),
   die Bilder oben, unbeschnitten in ihrem eigenen Format - keine Luecken unter
   kurzen Kacheln, jedes Werk ganz zu sehen. Ohne Bild ein Sternenfeld als
   Grund. Gewaehlt von Justus am 03.10.2026 aus sechs Varianten (Cards, Orbit,
   Poster wall, Wall label, Zigzag, Masonry); vorher trennte nur eine duenne
   Linie die Ausstellungen. Die Reihenfolge laeuft spaltenweise. Die laufende
   Nummer ist Schmuck: fuer Screenreader leer. */
.jahrgang {
  counter-reset: schau;
  columns: 3 18rem; column-gap: 1.5rem;
  --sternenfeld:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 78% 14%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 33% 71%, #fff, transparent),
    radial-gradient(1px 1px at 61% 48%, #cfe, transparent),
    radial-gradient(1px 1px at 88% 82%, #fff, transparent),
    radial-gradient(1px 1px at 22% 88%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 92% 38%, #fff, transparent),
    radial-gradient(1px 1px at 47% 9%, #fff, transparent),
    radial-gradient(ellipse at 70% 30%, rgb(92 225 230 / 0.18), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgb(80 90 200 / 0.22), transparent 55%),
    #070910;
}
.ausstellung--gruppe {
  --text-dim: var(--text-dim-card);
  counter-increment: schau;
  display: flex; flex-direction: column; align-items: stretch;
  break-inside: avoid; margin: 0 0 1.5rem; padding: 0; gap: 0; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--rule-card); border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ausstellung--gruppe:hover { border-color: var(--accent); box-shadow: 0 0 2rem rgb(92 225 230 / 0.15); }
.ausstellung--gruppe:not(:has(.ausstellung__bilder)) { background: var(--sternenfeld); }

.ausstellung--gruppe .ausstellung__block { padding: 1.25rem 1.4rem 1.5rem; }
.ausstellung--gruppe .ausstellung__block::before {
  content: counter(schau, decimal-leading-zero) / "";
  display: block; margin: 0 0 0.4rem;
  font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent);
}
.ausstellung--gruppe .ausstellung__titel {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); line-height: 1.25;
  margin: 0 0 0.35rem; overflow-wrap: anywhere;
}
.ausstellung__untertitel { font-style: italic; margin: 0 0 0.75rem; }
.ausstellung--gruppe .ausstellung__ort,
.ausstellung--gruppe .ausstellung__zeit {
  margin: 0; color: var(--text-dim);
  font-family: var(--font-ui); font-size: 0.84rem; line-height: 1.5; overflow-wrap: anywhere;
}
.ausstellung--gruppe .ausstellung__zeit:first-of-type { margin-top: 0.15rem; }
.ausstellung__absatz { margin: 0.75rem 0 0; max-width: 46rem; font-size: 0.95rem; line-height: 1.55; }
/* Die Arbeit als Bildangabe, mit einer Raute im Akzent. */
.ausstellung__werk {
  margin: 1rem 0 0; padding-left: 1.1rem; position: relative;
  font-family: var(--font-ui); font-size: 0.86rem;
}
.ausstellung__werk::before {
  content: "" / ""; position: absolute; left: 0; top: 0.5em;
  width: 0.45rem; height: 0.45rem; background: var(--accent); transform: rotate(45deg);
}
/* Verweise als Schaltflaechen wie auf den Karten der Startseite. */
.ausstellung--gruppe .linklist,
.ausstellung__mehr {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.1rem 0 0;
  font-family: var(--font-ui); font-size: 0.82rem;
}
.ausstellung--gruppe .linklist li { margin: 0; }
.ausstellung--gruppe .linklist a,
.ausstellung__mehr a {
  display: inline-block; padding: 0.4em 0.95em; max-width: 100%; overflow-wrap: anywhere;
  border: 1px solid var(--accent); border-radius: 999px;
  color: var(--accent); text-decoration: none;
}
.ausstellung--gruppe .linklist a:hover, .ausstellung--gruppe .linklist a:focus-visible,
.ausstellung__mehr a:hover, .ausstellung__mehr a:focus-visible { background: var(--accent); color: #111; }

/* Bilder oben ueber die ganze Kachel, weitere als kleine Kacheln darunter. */
.ausstellung__bilder { order: -1; display: flex; flex-wrap: wrap; gap: 4px; }
.ausstellung__bild { margin: 0; }
.ausstellung__bild:not(.ausstellung__bild--klein) { flex-basis: 100%; }
.ausstellung__bild:not(.ausstellung__bild--klein) img { width: 100%; max-width: none !important; }
.ausstellung__bild--klein:first-of-type { margin-left: 4px; }
.ausstellung__bild--klein img { width: 5rem; height: 5rem; object-fit: cover; }

/* Beitraege innerhalb einer Gruppenausstellung. */
.beitraege { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.beitraege li { margin: 0 0 0.3em; }

.jahr__anschrift { font-style: normal; color: var(--text-dim); margin: 1.5rem 0 0; }

/* --- Einzelne Film- oder SpaceRider-Arbeit ------------------------------- */
/* SpaceRider-Filme auf Vimeo (Justus, 05.10.2026; medienseiten.njk,
   src/_data/vimeofilme.js). Das Standbild ist die Abspielflaeche, 16:9 wie der
   Spieler, damit beim Klick nichts springt; darunter zwei Spalten: Text in
   Lesebreite links, Angaben und "Watch on Vimeo" rechts. */
.film__spieler { margin: 0 0 2rem; }
.film__flaeche, .film__spieler .karte__vimeo-rahmen {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
}
.film__flaeche {
  position: relative; overflow: hidden;
  display: grid; place-items: center; align-content: center; gap: 0.75rem;
  background: radial-gradient(circle at 50% 45%, #2e3038, #0a0a0c 75%);
  color: #fff; text-decoration: none;
}
.film__flaeche .film__bild, .film__flaeche picture {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.film__flaeche .film__bild { object-fit: cover; max-width: none !important; }
/* Standbild leicht abgedunkelt, damit Knopf und Schrift lesbar bleiben. */
.film__flaeche::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.1) 60%);
}
.film__play, .film__hinweis { position: relative; z-index: 2; }
.film__play {
  width: 5rem; height: 5rem; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center;
  box-shadow: 0 0 0 0.5rem rgb(92 225 230 / 0.2), 0 0.75rem 2rem rgb(0 0 0 / 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}
.film__play::after {
  content: ""; margin-left: 0.35rem;
  border-style: solid; border-width: 0.9rem 0 0.9rem 1.45rem;
  border-color: transparent transparent transparent #111;
}
.film__flaeche:hover .film__play, .film__flaeche:focus-visible .film__play {
  transform: scale(1.06); box-shadow: 0 0 0 0.75rem rgb(92 225 230 / 0.3), 0 0.75rem 2rem rgb(0 0 0 / 0.5);
}
.film__hinweis {
  font-family: var(--font-ui); font-size: 0.95rem; text-align: center;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
}
.film__hinweis small { display: block; margin-top: 0.2rem; font-size: 0.75rem; color: #d4d4d8; }

.film__spalten {
  display: grid; grid-template-columns: minmax(0, 42rem) minmax(14rem, 1fr);
  gap: 1.5rem 3.5rem; align-items: start; margin: 0 0 4rem;
}
.film__spalten--ohne-text { grid-template-columns: minmax(0, 1fr); }
.film__text { max-width: none; }
.film__fakten {
  padding: 1.25rem 1.4rem; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--bg-raised); font-family: var(--font-ui); font-size: 0.85rem;
}
/* Ohne Text kein Kasten: die Schaltflaeche steht dann allein unter dem Film. */
.film__spalten--ohne-text .film__fakten { padding: 0; border: 0; background: none; }
.film__fakten > :first-child { margin-top: 0; }
.film__fakten > :last-child { margin-bottom: 0; }
.film__angaben { color: var(--text-dim); margin: 0 0 1rem; }
.film__angaben span { display: block; }
.film__kopfbild { margin: 1.25rem 0 0; }
.film__kopfbild img { width: 100%; border-radius: 4px; }
@media (max-width: 52rem) {
  .film__spalten { grid-template-columns: minmax(0, 1fr); }
}

/* Filmstreifen (Justus, 05.10.2026: "wie ein Negativstreifen"): Schnappschuesse
   vom Drehort in einer waagrechten Reihe auf dunklem, leicht braunem Filmgrund,
   oben und unten die Perforation, an jedem Bild eine Bildnummer in der
   Randschrift alter Negative. Gleich hoch, Breite nach Seitenverhaeltnis; auf
   schmalen Schirmen seitlich zu scrollen. Jedes Bild oeffnet die Grossansicht. */
.filmstreifen {
  --loch: 0.9rem;
  position: relative; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: calc(var(--loch) * 2.2) 0;
  background-color: #17110c;
  background-image:
    repeating-linear-gradient(to right, transparent 0 0.55rem, #0a0a0c 0.55rem 1.25rem, transparent 1.25rem 1.8rem),
    repeating-linear-gradient(to right, transparent 0 0.55rem, #0a0a0c 0.55rem 1.25rem, transparent 1.25rem 1.8rem);
  background-size: 100% var(--loch), 100% var(--loch);
  background-position: 0 calc(var(--loch) * 0.6), 0 calc(100% - var(--loch) * 0.6);
  background-repeat: repeat-x;
  background-attachment: local;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #2c2017;
}
.filmstreifen:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.filmstreifen__bilder {
  list-style: none; margin: 0; padding: 0 1rem;
  display: flex; gap: 0.9rem; width: max-content;
}
.filmstreifen__bilder li { position: relative; scroll-snap-align: start; }
.filmstreifen__bilder figure { margin: 0; }
.filmstreifen__bilder img {
  display: block; height: clamp(11rem, 26vw, 17rem); width: auto; max-width: none !important;
  border: 2px solid #050403;
  filter: sepia(0.15) contrast(1.05);
  transition: filter 0.2s;
}
.filmstreifen__bilder a:hover img, .filmstreifen__bilder a:focus-visible img { filter: none; }
/* Bildnummer in der Randschrift, Schmuck - fuer Screenreader leer. */
.filmstreifen__bilder li::after {
  content: attr(data-nummer) "A" / "";
  position: absolute; left: 0.3rem; bottom: calc(var(--loch) * -1.95);
  font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em;
  color: #e08a3c;
}

/* Seite mit Video und Textabschnitten unter Jahreszahlen (spacerider_performance,
   Justus 05.10.2026): das Video ueber die ganze Breite, die Unterschrift
   darunter; je Abschnitt die Jahreszahl gross in der Titelschrift links, der Text
   in zwei Spalten daneben - so nutzt er die Breite bei lesbarer Zeilenlaenge. */
.auftritt { margin: 0 0 3rem; }
.auftritt .medium__video { display: block; width: 100%; max-width: none; aspect-ratio: 16 / 9; }
.auftritt__unterschrift {
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; margin: 0.75rem 0 0;
  font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-dim);
}
.auftritt__unterschrift strong { flex-basis: 100%; color: var(--text); font-weight: 600; font-size: 0.95rem; }
.jahresabschnitt {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0 2.5rem;
  padding: 2rem 0; border-top: 1px solid var(--rule);
}
.jahresabschnitt__jahr {
  margin: 0; font-family: var(--font-text); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 600; line-height: 1; color: var(--accent);
}
.jahresabschnitt__text { columns: 2 22rem; column-gap: 3rem; }
.jahresabschnitt__text p { margin: 0 0 1em; }
.jahresabschnitt:last-of-type { margin-bottom: 4rem; }
@media (max-width: 48rem) {
  .jahresabschnitt { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
}

/* Laengerer Text auf SpaceRider-Seiten ohne Film (spacerider_andrew,
   observatories2017; Justus 05.10.2026): ganze Breite, zwei Spalten. */
.prose--spalten { max-width: none; columns: 2 22rem; column-gap: 3rem; margin-bottom: 2rem; }

/* Ein einzelnes Standbild in voller Breite (SpaceRider, Justus 05.10.2026). */
.grid--einzeln { grid-template-columns: minmax(0, 1fr); }
.grid--einzeln img { width: 100%; max-width: none !important; }

/* Abspann der SpaceRider-Filme (Justus, 05.10.2026): staerker betont und in der
   Gestalt des Seitentitels - Ueberschrift in der Titelschrift, Aufgabe klein in
   Versalien, Name gross daneben, wie im Abspann eines Films. Eine Tafel wie der
   Kasten der Angaben, eine Akzentlinie oben. In zwei Spalten, wo Platz ist. */
.abspann {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--bg-raised); border: 1px solid var(--rule); border-radius: 10px;
  border-top: 3px solid var(--accent);
}
.section h2.abspann__titel {
  font-family: var(--font-text); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 600; letter-spacing: 0.06em; color: var(--text);
  margin: 0 0 1.75rem; padding: 0; border: 0;
}
.abspann__liste { margin: 0; columns: 2 26rem; column-gap: 3.5rem; }
.abspann__liste > div {
  break-inside: avoid;
  display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: 0 1.25rem; align-items: baseline; padding: 0 0 0.9rem;
}
.abspann__liste dt {
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  text-align: right;
}
.abspann__liste dd { margin: 0; font-size: 1.12rem; line-height: 1.4; overflow-wrap: anywhere; }
/* Trenner (":" oder "@") stehen im Quelltext, der Wortlaut bleibt vollstaendig;
   sichtbar traegt die Spalte die Trennung. */
.abspann__trenner { display: none; }
.abspann__zeile { grid-template-columns: minmax(0, 1fr) !important; }
.abspann__zeile dd { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-dim); }
@media (max-width: 40rem) {
  .abspann__liste > div { grid-template-columns: minmax(0, 1fr); }
  .abspann__liste dt { text-align: left; }
}

/* Schaltflaeche "Watch on Vimeo" (V1), und dieselbe Gestalt fuer jeden
   Vimeo-Verweis auf SpaceRider- und Ausstellungsseiten: Pille im Akzent mit
   Abspielzeichen. Die Startseite traegt ihre eigenen (gesperrt, Regel 9). */
.knopf, .seite .linklist a[href^="https://vimeo.com/"], .exhibition .linklist a[href^="https://vimeo.com/"] {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.55em 1.15em; max-width: 100%; overflow-wrap: anywhere;
  border: 1px solid var(--accent); border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.knopf--vimeo { background: var(--accent); color: #111; }
.knopf--vimeo::before, .seite .linklist a[href^="https://vimeo.com/"]::before,
.exhibition .linklist a[href^="https://vimeo.com/"]::before {
  content: "" / ""; flex: none;
  border-style: solid; border-width: 0.38em 0 0.38em 0.62em;
  border-color: transparent transparent transparent currentColor;
}
.knopf:hover, .knopf:focus-visible,
.seite .linklist a[href^="https://vimeo.com/"]:hover, .seite .linklist a[href^="https://vimeo.com/"]:focus-visible,
.exhibition .linklist a[href^="https://vimeo.com/"]:hover, .exhibition .linklist a[href^="https://vimeo.com/"]:focus-visible {
  background: var(--accent); color: #111;
}
.knopf--vimeo:hover, .knopf--vimeo:focus-visible { background: #fff; border-color: #fff; color: #111; }

.medium__standbild { margin: 0 0 1.5rem; }
.medium__standbild img { display: block; width: 100%; height: auto; }
.medium__video { width: 100%; max-width: 56rem; height: auto; background: #000; }

/* Flash-Buehne. Der Kasten traegt das Seitenverhaeltnis der Datei, bevor Ruffle
   da ist - sonst springt das Layout in dem Moment, in dem der Spieler erscheint
   (SPEC.md, "Flash-Inhalte"). */
.flash { margin: 0 0 1.5rem; max-width: 56rem; }
/* Die Obergrenze traegt die Vorlage: es ist die Buehnenbreite der Datei selbst.
   Ein Vorschaustreifen von 200 Pixeln soll nicht auf Textbreite aufgeblasen
   werden - Vektor hin oder her, die Arbeiten sind fuer ihre Groesse gezeichnet. */
.flash__buehne {
  display: grid; place-items: center;
  width: 100%; background: #000; border: 1px solid var(--rule);
}
.flash__buehne ruffle-player, .flash__buehne ruffle-embed { width: 100%; height: 100%; }
/* Startbild und Schaltflaeche in derselben Rasterzelle; die Schaltflaeche
   bekommt einen dunklen Grund, damit sie auf dem Bild lesbar bleibt. */
.flash__buehne--bild > * { grid-area: 1 / 1; }
.flash__startbild { width: 100%; height: 100%; object-fit: contain; }
.flash__buehne--bild .flash__start { position: relative; background: rgb(0 0 0 / 0.75); }
.flash__buehne--bild .flash__start:hover, .flash__buehne--bild .flash__start:focus-visible { background: var(--accent); color: var(--bg); }
.flash__start {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--accent); border-radius: 2px;
  background: transparent; color: var(--accent);
  font: inherit; font-family: var(--font-ui); font-size: 0.95rem;
  cursor: pointer;
}
.flash__start:hover, .flash__start:focus-visible { background: var(--accent); color: var(--bg); }
.flash__start[disabled] { cursor: progress; opacity: 0.7; }
.flash__angabe, .flash__hinweis { color: var(--text-dim); max-width: 42rem; font-size: 0.92rem; }
.flash__angabe { margin-top: 0.6rem; }
.flash__hinweis { margin: 0 0 1rem; }
.flash__fehler { color: var(--text); margin: 0; padding: 1rem; }

/* Die Klaenge, die in einer Animation steckten. */
.klangliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; max-width: 34rem; }
.klangliste audio { width: 100%; }
.klangliste__angabe { display: block; color: var(--text-dim); font-size: 0.85rem; }

/* Weitere Angaben zu einer Arbeit: Festivals, Auszeichnungen, Drehorte. */
.medium__weiteres p { margin: 0 0 0.4em; }

/* --- Einzelne Werkseite -------------------------------------------------- */
.werkseite { margin: 0 0 2rem; max-width: 52rem; }
.werkseite img { display: block; width: 100%; height: auto; }
.werkseite figcaption { margin-top: 0.6rem; }

/* --- Essayseiten --------------------------------------------------------- */
.essay__autor { color: var(--text-dim); margin: 0 0 1.2rem; }
.essay p { margin: 0 0 1em; }

/* --- Sitemap: das Menue ausgeklappt (technischeseiten.njk) --- */

.sitemap, .sitemap ul { list-style: none; margin: 0; padding: 0; }
.sitemap { padding: 0 0 3rem; columns: 18rem; column-gap: var(--gap); }
.sitemap > li { break-inside: avoid; margin-bottom: 1.5rem; }
.sitemap ul { padding-left: 1rem; }
.sitemap li { line-height: 1.5; margin: 0.2rem 0; }
.sitemap__zusatz { color: var(--text-dim); font-family: var(--font-ui); font-size: 0.8rem; }
.sitemap .sitemap__hinweis { margin: 0.1rem 0 0.4rem; padding-left: 1rem; color: var(--text-dim); font-size: 0.9rem; }
.sitemap .sitemap__hinweis li { margin: 0; }
.sitemap__bereich {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Galerieseiten: die helle Wand ---
   Justus, 10.10.2026 (Variante A4 aus vier Entwuerfen): Ausstellungen finden
   meist in weissen Raeumen statt, deshalb stehen die Galerieseiten auf einer
   hellen Wand statt auf dem dunklen Grund der uebrigen Seite. Kopf, Menue und
   Fuss bleiben dunkel. .wand stellt nur die Farbwerte um - alles darunter
   (Raster, Unterschriften, Verweise, umgezogene Meldungen) erbt sie.
   Kontraste auf #f4f2ee: Text 15,8:1, gedaempft 6,6:1, Akzent 5,7:1. */
.wand {
  --bg:        #f4f2ee;
  --bg-raised: #e8e5de;
  --text:      #18181b;
  --text-dim:  #55555b;
  --rule:      #d6d2c9;
  --accent:    #0b6a6e;
  color-scheme: light;
  background: var(--bg);
  color: var(--text);
  padding-bottom: 1px;
}
.wand .breadcrumb { padding-top: 1.25rem; }
.wand .breadcrumb li + li::before { color: var(--text-dim); }
.wand a:hover { color: var(--accent); }

.wand .exhibition__head { padding: clamp(2rem, 5vw, 3.5rem) 0 1.25rem; max-width: none; }
.wand .exhibition__head h1 { font-size: clamp(2.2rem, 1.3rem + 4vw, 4.4rem); line-height: 1.04; }
.wand .exhibition__meta { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; }

/* Sprungleiste: bleibt oben stehen, rollt seitlich, wenn sie nicht passt. */
.sprung {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 0.4rem;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--pad)) 1rem;
  padding: 0.6rem var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.sprung::-webkit-scrollbar { display: none; }
.sprung a {
  flex: none; display: flex; align-items: center;
  min-height: 2.75rem; padding: 0 1rem;
  border: 1px solid var(--rule); border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500;
  text-decoration: none; color: var(--text);
}
.sprung a:hover { border-color: var(--text); color: var(--text); }
.wand [id] { scroll-margin-top: 4.5rem; }

/* Kopfbild und Film: mittig, wie an die Wand gehaengt. */
.wand .lead { max-width: 58rem; margin: 2.5rem auto 0; }
/* Das Bild traegt seine eigene Breite als max-width im style-Attribut (nie
   hochskalieren, eleventy.config.js). Das hob max-width: 100% auf - auf dem
   Telefon lief ein breites Kopfbild ueber den Rand und zog die ganze Seite
   breiter. Hier gilt beides: hoechstens Rahmenbreite, nie ueber die eigene. */
.wand .lead img { width: auto; max-width: 100% !important; margin-inline: auto; box-shadow: 0 1.4rem 2.8rem -1.4rem rgb(0 0 0 / 0.45); }
.wand .lead figcaption {
  margin-top: 0.9rem; padding-left: 0.8rem; border-left: 2px solid var(--text);
  font-family: var(--font-ui); font-size: 0.82rem; color: var(--text-dim);
}

/* Text links, Angaben rechts wie ein Wandtext. */
.wand__about {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  margin: 4rem 0 0;
}
.wand__about--ohne-text { grid-template-columns: minmax(0, 1fr); }
.wand__about--ohne-text .wand__angaben { columns: 3 16rem; column-gap: var(--gap); }
.wand__about .prose { max-width: none; font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.12rem); line-height: 1.68; }
.wand__angabe { break-inside: avoid; margin: 0 0 2rem; }
.wand__angabe h2 {
  font-family: var(--font-ui); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
  margin: 0 0 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule);
}
.wand__angabe .credits, .wand__angabe .linklist { font-size: 0.95rem; }
.wand__angabe .linklist a { overflow-wrap: anywhere; }

.wand .section { margin: 4.5rem 0 0; }
.wand .section h2 { color: var(--text-dim); }

/* Werke: an der Wand, mit Wandbeschriftung. */
.wand .grid img { background: var(--bg-raised); box-shadow: 0 0.9rem 1.9rem -1rem rgb(0 0 0 / 0.5); }
.wand .grid--works { gap: 3rem 2.25rem; align-items: end; }
.wand .grid figcaption { padding-top: 0.9rem; }

/* Umschalter Wand / Checklist (zwei Optionsfelder, siehe exhibition.njk). */
.werke__wahl { position: absolute; opacity: 0; pointer-events: none; }
.werke__schalter {
  display: inline-flex; padding: 3px; margin: 0 0 1.75rem;
  border: 1px solid var(--rule); border-radius: 999px;
}
.werke__schalter label {
  display: flex; align-items: center; min-height: 2.75rem; padding: 0 1.2rem;
  border-radius: 999px; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500;
}
#ansicht-wand:checked ~ .werke__schalter label[for="ansicht-wand"],
#ansicht-liste:checked ~ .werke__schalter label[for="ansicht-liste"] { background: var(--text); color: var(--bg); }
#ansicht-wand:focus-visible ~ .werke__schalter label[for="ansicht-wand"],
#ansicht-liste:focus-visible ~ .werke__schalter label[for="ansicht-liste"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.werke__liste { display: none; }
#ansicht-liste:checked ~ .werke__wand { display: none; }
#ansicht-liste:checked ~ .werke__liste { display: block; }

.checkliste { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 0.85rem; }
.checkliste th, .checkliste td { text-align: left; vertical-align: middle; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--rule); }
.checkliste thead th { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.checkliste__nr { color: var(--text-dim); font-variant-numeric: tabular-nums; width: 2.5rem; }
.checkliste__bild { width: 5.75rem; }
.checkliste__bild img { width: 5rem; aspect-ratio: 3 / 2; object-fit: cover; }
.checkliste__titel { font-family: var(--font-text); font-size: 0.98rem; font-weight: 600; }
.checkliste__gruppe th { padding-top: 1.5rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }

/* Installationsaufnahmen als Streifen zum Wischen. */
.streifen__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.25rem; }
.wand .streifen__kopf h2 { border-bottom: 0; margin: 0; }
.streifen__pfeile { display: flex; gap: 0.5rem; padding-bottom: 0.5rem; }
.streifen__pfeile[hidden] { display: none; }
.streifen__pfeile button {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--rule); background: transparent; color: var(--text);
  font: 1.1rem var(--font-ui); cursor: pointer;
}
.streifen__pfeile button:hover:not(:disabled) { border-color: var(--text); }
.streifen__pfeile button:disabled { opacity: 0.35; cursor: default; }
.streifen {
  list-style: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 1rem;
  display: flex; gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: thin;
}
.streifen > li { flex: none; scroll-snap-align: start; max-width: 85vw; }
.streifen figure { margin: 0; }
.streifen img { height: clamp(13rem, 42vh, 26rem); width: auto; max-width: none; box-shadow: 0 0.9rem 1.9rem -1rem rgb(0 0 0 / 0.5); }
.streifen figcaption { font-family: var(--font-ui); font-size: 0.8rem; line-height: 1.45; color: var(--text-dim); padding-top: 0.7rem; max-width: 22rem; }

.wand .siblings { margin-top: 4rem; padding-bottom: 3rem; }

@media (max-width: 48rem) {
  .wand .lead { margin: 1.25rem calc(-1 * var(--pad)) 0; }
  .wand .lead figcaption { margin-inline: var(--pad); }
  .wand__about { grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2.5rem; }
  .wand .grid--works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0.9rem; }
  .wand .grid--works figcaption { font-size: 0.74rem; }
  .wand .grid--works .work__title { font-size: 0.88rem; }
  .streifen img { height: auto; width: 78vw; max-height: 60vh; object-fit: contain; }
  /* Werkliste: Bild links, Angaben darunter gestapelt. */
  .checkliste thead { display: none; }
  .checkliste tr { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 0.9rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
  .checkliste th, .checkliste td { border: 0; padding: 0; grid-column: 2; }
  .checkliste__nr { display: none; }
  .checkliste__bild { grid-column: 1 !important; grid-row: 1 / span 4; width: auto; }
  .checkliste__bild img { width: 4.5rem; }
  .checkliste__gruppe { display: block !important; }
}

/* Filme als Karten, Hinweiszeilen und Katalog mit Umschlag (Galerieseiten,
   g2021spaceridercycle.html; Justus, 10.10.2026). */
.filmkarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.filmkarten__karte { display: block; text-decoration: none; }
.filmkarten__karte img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; max-width: none !important; box-shadow: 0 0.75rem 1.6rem -1rem rgb(0 0 0 / 0.55); }
.filmkarten__nr { display: block; margin-top: 0.7rem; font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.filmkarten__titel { display: block; font-size: 1.02rem; line-height: 1.35; }
.filmkarten__vimeo { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--font-ui); font-size: 0.75rem; color: var(--text-dim); }
.wand__hinweis { margin: -0.4rem 0 1.4rem; font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-dim); max-width: 46rem; }
.wand .lead .knopf { margin-top: 0.8rem; }
.wand .lead .film__flaeche { box-shadow: 0 1.4rem 2.8rem -1.4rem rgb(0 0 0 / 0.45); }
.dokument__bild { display: block; width: 8rem; margin-bottom: 0.5rem; }
.dokument__bild img { box-shadow: 0 0.6rem 1.2rem -0.8rem rgb(0 0 0 / 0.55); }
.dokument__text { margin: 0.4rem 0 0; font-family: var(--font-ui); font-size: 0.75rem; line-height: 1.5; color: var(--text-dim); }
@media (max-width: 48rem) {
  .filmkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0.9rem; }
}

/* Frameset-Galerien 2001-2005 auf der Wand (layouts/seite.njk, wand: true). */
.wand .seite { padding-top: clamp(2rem, 5vw, 3.5rem); }
.wand .seite__head h1 { font-size: clamp(2.2rem, 1.3rem + 4vw, 4.4rem); line-height: 1.04; font-weight: 400; }
.wand .seite .exhibition__meta { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; margin-bottom: 2rem; }
.wand .seite > .prose { margin: 2rem 0 3rem; font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.12rem); line-height: 1.68; }
.wand .seite > .grid { margin-bottom: 3rem; }
@media (max-width: 48rem) {
  .wand .seite .grid--works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0.9rem; }
}
/* Unterseiten ohne Titel nennen ihre Adresse ("galleries/2002/_whatgoesaround…") -
   ohne Umbruch lief sie auf dem Telefon ueber den Rand. */
.wand .medium__titel { overflow-wrap: anywhere; }

/* Galerien 2002 und 2003: die Arbeiten gross, mit allen Angaben (Justus,
   10.10.2026) - vorher Miniaturen von 36 bis 50 Pixeln, das Bild lag auf einer
   eigenen Werkseite. */
.grid--gross { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 3.5rem 2.5rem; }
.wand .grid--gross figcaption { font-size: 0.85rem; }
.wand .grid--gross .work__title { font-size: 1.05rem; }
.wand .seite .werke { margin: 0 0 3rem; }
@media (max-width: 48rem) {
  .wand .seite .grid--gross { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

/* Suche auf work.html (assets/js/werksuche.js). */
.werksuche { display: grid; grid-template-columns: minmax(0, 28rem) auto; align-items: end; gap: 0.4rem 1rem; margin: 0 0 1.5rem; }
.werksuche[hidden] { display: none; }
.werksuche label { grid-column: 1 / -1; font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.werksuche input {
  width: 100%; min-height: 2.9rem; padding: 0 1rem;
  font: 1rem var(--font-ui); color: var(--text);
  background: var(--bg-raised); border: 1px solid var(--rule); border-radius: 999px;
}
.werksuche input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
.werksuche__zahl { margin: 0; font-family: var(--font-ui); font-size: 0.8rem; color: var(--text-dim); }
.werksuche__leer { font-family: var(--font-ui); color: var(--text-dim); }
[data-suche][hidden], .jahr[hidden], .checkliste tbody[hidden], .werksuche__leer[hidden] { display: none !important; }
@media (max-width: 48rem) { .werksuche { grid-template-columns: minmax(0, 1fr); } }