/* pangram audio — Grundgestaltung
   Anthrazit, keine Akzentfarbe, Serifen in den Überschriften.
   Die Filme sollen die einzige Farbe auf der Seite sein. */

:root{
  /* Sagt dem Browser, dass die Seite dunkel ist. Ohne diese Zeile rendert er
     die 26 Audioplayer auf der Hörprobenseite hellgrau und den Scrollbalken
     weiß — Bedienelemente, die wir nicht selbst zeichnen, aber die trotzdem
     zur Seite gehören. */
  color-scheme:dark;

  --bg:#1c1c20;        /* Anthrazit — nimmt dem Schwarz die Härte */
  --bg-soft:#26262b;
  --fg:#f4f4f2;
  --muted:#a5a5ab;
  --line:rgba(255,255,255,.11);
  --line-stark:rgba(255,255,255,.32);
  --maxw:1240px;

  /* Keine Akzentfarbe. Hervorhebung passiert über Helligkeit und Umkehrung,
     nicht über Buntheit — sonst konkurriert die Seite mit den Filmen. */
  --umkehr-bg:#f4f4f2;
  --umkehr-fg:#1c1c20;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* Link im Fließtext. Ohne Akzentfarbe läuft die Hervorhebung über
   Helligkeit: Fließtext ist --muted, der Link --fg, dazu eine
   Unterstreichung, die einfach da ist und nicht beim Überfahren
   herauswächst. */
.textlink{
  color:var(--fg);
  border-bottom:1px solid var(--line-stark);
  padding-bottom:1px;
}
.textlink:hover{border-bottom-color:var(--fg)}
.textlink:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

/* Kategorie über dem Namen einer Referenz („Kunstmuseum", „Showroom").
   Vorher Sperrsatz-Versalien in 11px — laut tells.md C6 raus, und die
   Farbe zeigte zusätzlich auf die tote Variable. Jetzt normale
   Schreibweise, gedämpft, weil es eine Einordnung ist und nicht der
   Name selbst. */
.rolle{
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-bottom:2px;
}

/* Überschriften in Serifen. Das ist der schnellste Weg weg von der
   Tech-Optik — und passt zum Feld, in dem die Akquise läuft
   (Museen, Ausstellungen, Film). */
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:normal}

/* ---------- Kopfzeile ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:var(--bg);              /* solide statt Milchglas */
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:24px}
/* Menü, Sprachwahl und Burger stehen in einer Reihe. Auf dem Handy klappt
   nur das Menü weg — Sprachwahl und Burger bleiben nebeneinander stehen. */
header nav{display:flex;align-items:center;gap:14px}
.logo{
  font-family:var(--sans);
  font-weight:600;font-size:20px;letter-spacing:.01em;
  display:flex;align-items:center;
}
/* Der pulsende Leuchtpunkt ist ersatzlos raus. Er hat nichts bedeutet. */
.logo .dot{display:none}
nav ul{display:flex;gap:22px;list-style:none;font-size:14px}
nav a{color:var(--muted);transition:color .15s;padding:4px 0;display:inline-block}
nav a:hover{color:var(--fg)}
/* Aktuelle Seite: schlichte Unterstreichung, die einfach da ist,
   statt einer Linie, die bei jedem Überfahren herauswächst */
nav a[aria-current="page"]{color:var(--fg);border-bottom:1px solid var(--fg)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:6px}
.burger span{width:24px;height:2px;background:var(--fg);display:block}
@media(max-width:980px){
  nav ul{
    display:none;position:absolute;top:66px;left:0;right:0;
    flex-direction:column;gap:0;background:var(--bg);
    border-bottom:1px solid var(--line);padding:10px 28px 22px;
  }
  nav ul.offen{display:flex}
  nav ul li{padding:11px 0;border-bottom:1px solid var(--line)}
  nav a{font-size:16px}
  .burger{display:flex}
}

/* ---------- Titelbereich ---------- */
.hero{padding:72px 0 44px;max-width:none}
.eyebrow{
  color:var(--muted);font-size:14px;margin-bottom:18px;
  font-family:var(--sans);
  /* kein Sperrsatz, keine Versalien, keine Akzentfarbe */
  letter-spacing:normal;text-transform:none;
}
h1{
  font-size:clamp(30px,4.2vw,50px);   /* vorher bis 80px */
  line-height:1.15;max-width:22ch;
}
/* Das hervorgehobene Einzelwort in der Überschrift ist abgeschafft.
   em bleibt kursiv wie im Fließtext, ohne Sonderfarbe. */
h1 em,h2 em{font-style:italic;color:inherit}
.hero p.lead{
  margin-top:22px;max-width:60ch;color:var(--muted);
  font-size:clamp(16px,1.6vw,18px);line-height:1.65;
}
.hero-actions{margin-top:28px;display:flex;gap:26px;flex-wrap:wrap;align-items:center}

/* Knöpfe: keine Pillen, kein Anheben beim Überfahren.
   Der zweite ist gar kein Knopf mehr, sondern ein Textlink. */
.btn{
  display:inline-flex;align-items:center;
  font-size:15px;font-weight:500;font-family:inherit;cursor:pointer;
  border:1px solid transparent;border-radius:0;
  padding:12px 22px;transition:background .15s,color .15s,border-color .15s;
}
.btn-primary{background:var(--umkehr-bg);color:var(--umkehr-fg)}
.btn-primary:hover{background:#fff}
.btn-ghost{
  border:0;padding:12px 0;color:var(--fg);
  border-bottom:1px solid var(--line-stark);
}
.btn-ghost:hover{border-bottom-color:var(--fg)}

/* ---------- Abschnitte ---------- */
section{padding:64px 0}
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:26px;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:14px;
}
.sec-head h2{font-size:clamp(22px,3vw,32px)}
.sec-head p{
  color:var(--muted);font-size:14px;font-family:var(--sans);
  letter-spacing:normal;text-transform:none;
}

/* ---------- Bildraster ---------- */
.grid{columns:3;column-gap:14px}
@media(max-width:900px){.grid{columns:2}}
@media(max-width:560px){.grid{columns:1}}
.card{
  break-inside:avoid;margin-bottom:14px;position:relative;
  border-radius:2px;overflow:hidden;background:var(--bg-soft);
  cursor:pointer;display:block;width:100%;padding:0;
  /* Feine Kante: zehn der 27 Filme sind sehr dunkel und würden sonst
     mit dem Hintergrund verschwimmen */
  border:1px solid var(--line);
  transition:border-color .2s;
}
.card:hover{border-color:var(--line-stark)}
/* Kein Graustufenfilter, der beim Überfahren zurückspringt, und kein
   Heranzoomen. Die Filme werden gezeigt wie sie sind. */
.card img,.card video{width:100%;height:auto;display:block}
.card .huelle{position:relative;display:block;line-height:0}
.card video{position:absolute;inset:0;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.card.laeuft video{opacity:1}
.card .spielmarke{
  position:absolute;top:9px;left:9px;z-index:2;
  background:rgba(28,28,32,.82);
  color:var(--fg);font-size:11px;
  padding:4px 8px;border-radius:2px;display:flex;align-items:center;gap:6px;
  transition:opacity .2s;
}
.card:hover .spielmarke{opacity:0}
.card .spielmarke::before{
  content:"";width:0;height:0;
  border-left:7px solid var(--fg);
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
}
.card:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.card .meta{
  position:absolute;left:0;right:0;bottom:0;padding:16px;text-align:left;
  /* Verlauf von Schwarz nach transparent — KEIN Zierrat, sondern der Grund,
     warum Titel und Kategorie über einem laufenden Film überhaupt lesbar
     bleiben. Bei hellen Bildern (Coke Zero, Samsung) verschwindet weißer Text
     sonst im Bild. Deshalb Schwarz und nicht Anthrazit: hier zählt Deckung,
     nicht Farbharmonie. Nicht entfernen. */
  background:linear-gradient(to top,rgba(0,0,0,.86),transparent);
  opacity:0;transition:opacity .2s;
}
.card:hover .meta,.card:focus-visible .meta{opacity:1}

/* ---------- Touchgeräte: Beschriftung steht fest ----------
   Ein Handy hat kein Überfahren. Ohne diese Regel zeigt die Startseite dort
   27 unbeschriftete Standbilder — Titel und Auftraggeber, also genau das,
   was die Arbeit belegt, wären auf dem Gerät unsichtbar, auf dem die meisten
   zuerst draufschauen.

   Der Verlauf darunter ist deshalb hier kein Zierrat, sondern die
   Voraussetzung: Bei hellen Standbildern (Coke Zero, Samsung) verschwindet
   weißer Text sonst im Bild.

   `pointer:coarse` als zweite Bedingung, weil einzelne Android-Browser
   `hover:none` falsch melden. */
@media(hover:none),(pointer:coarse){
  .card .meta{opacity:1}
  /* Die Filmmarke oben links weicht der Beschriftung nicht aus, sie bleibt
     an ihrem Platz — auf Touch läuft ohnehin kein Film. */
  .card:hover .spielmarke{opacity:1}
}
.card .meta h3{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--fg)}
.card .meta span{
  font-size:12px;color:var(--muted);display:block;margin-bottom:4px;
  letter-spacing:normal;text-transform:none;
}
.card .pruef{
  position:absolute;top:9px;right:9px;background:var(--umkehr-bg);color:var(--umkehr-fg);
  font-size:11px;font-weight:600;padding:3px 7px;border-radius:2px;
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(13,13,16,.97);
  display:none;align-items:center;justify-content:center;padding:40px 20px;
}
.lightbox.offen{display:flex}
.lightbox img,.lightbox video{max-width:100%;max-height:82vh;border-radius:2px;background:#000}
.lightbox .lb-info{
  position:absolute;bottom:26px;left:0;right:0;text-align:center;color:var(--muted);font-size:14px;
}
.lightbox .lb-info b{color:var(--fg);font-weight:600}
.lightbox button{
  position:absolute;background:none;border:1px solid var(--line);color:var(--fg);
  width:44px;height:44px;border-radius:0;cursor:pointer;font-size:19px;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.lightbox button:hover{border-color:var(--fg)}
.lb-zu{top:22px;right:22px}
.lb-vor{left:22px;top:50%;transform:translateY(-50%)}
.lb-nach{right:22px;top:50%;transform:translateY(-50%)}
/* Schmale Geräte: Die Blätterpfeile sitzen sonst auf halber Höhe mitten auf
   dem Video und liegen damit über der Abspielleiste. Sie wandern nach unten
   neben die Bildunterschrift. */
@media(max-width:600px){
  .lightbox{padding:20px 14px 96px}
  .lightbox video,.lightbox img{max-height:70vh}
  .lb-vor,.lb-nach{top:auto;bottom:18px;transform:none}
  .lb-vor{left:14px}
  .lb-nach{right:14px}
  .lb-zu{top:14px;right:14px}
  .lightbox .lb-info{bottom:74px;padding:0 14px}
}

/* ---------- Infoband ---------- */
.band{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
@media(max-width:820px){.band .wrap{grid-template-columns:1fr;gap:30px}}
.band h2{font-size:clamp(23px,3vw,32px);line-height:1.2}
.band p{color:var(--muted);margin-top:18px;font-size:17px;line-height:1.7;max-width:54ch}

/* Zahlenreihe: kleiner und unbunt. Große Neonzahlen mit Wörtchen darunter
   sind das Kennzeichen von Seiten, die Kennzahlen erfinden müssen. */
.stats{display:flex;gap:32px;margin-top:28px;flex-wrap:wrap}
.stat b{display:block;font-family:var(--serif);font-size:26px;font-weight:600;color:var(--fg)}
.stat span{font-size:13px;color:var(--muted);letter-spacing:normal;text-transform:none}

/* ---------- Hörproben ---------- */
.gruppe{margin-bottom:40px}
.gruppe h3{
  font-family:var(--sans);font-size:14px;font-weight:600;
  letter-spacing:normal;text-transform:none;
  color:var(--fg);margin-bottom:14px;
  border-bottom:1px solid var(--line);padding-bottom:8px;
}
.track{
  display:flex;align-items:center;gap:18px;padding:13px 0;
  border:0;border-bottom:1px solid var(--line);border-radius:0;margin-bottom:0;
  background:none;transition:none;
}
.track:hover{border-bottom-color:var(--line-stark)}
.track:target{background:var(--bg-soft);border-bottom-color:var(--fg)}
.track .nr{color:var(--muted);font-size:13px;min-width:24px;font-variant-numeric:tabular-nums}
.track .tt{flex:1;font-size:16px;font-weight:500}
.track audio{height:34px;max-width:280px}
.track .fehlt{
  font-size:12px;color:var(--muted);
  letter-spacing:normal;text-transform:none;
  border:1px solid var(--line);padding:3px 8px;border-radius:2px;
}
.track .permalink{color:var(--muted);font-size:15px;opacity:0;transition:.15s;padding:0 4px}
.track:hover .permalink{opacity:1}
.track .permalink:hover{color:var(--fg)}

/* Auf Touch steht der Direktlink fest. Im Vorspann der Seite steht, jedes
   Stück habe eine eigene Adresse, die man in eine Mail setzen kann — ohne
   diese Regel gibt es die Funktion auf dem Handy nicht. */
@media(hover:none),(pointer:coarse){
  .track .permalink{opacity:1}
}

/* Schmale Geräte: Die Zeile bricht um. Vorher lagen Nummer, Titel, Player
   und Link nebeneinander, der Player allein bis 280 px breit — auf 360 px
   Displaybreite blieb für den Titel fast nichts. Jetzt Titel oben,
   Player darunter über die volle Breite. */
@media(max-width:620px){
  .track{flex-wrap:wrap;gap:10px;padding:15px 0}
  .track .tt{flex:1 1 auto;min-width:0}
  .track .permalink{order:2}
  .track audio{order:3;flex:1 1 100%;width:100%;max-width:none}
}

/* ---------- Kontakt ---------- */
/* Nicht mehr zentriert und nicht mehr riesig. Eine Mailadresse ist
   eine Information, kein Plakat. */
.kontakt{text-align:left;padding:72px 0}
.kontakt h2{font-size:clamp(26px,3.4vw,38px)}
.kontakt a.mail{
  display:inline-block;margin-top:18px;font-size:clamp(17px,2vw,21px);
  color:var(--fg);border-bottom:1px solid var(--line-stark);padding-bottom:3px;
}
.kontakt a.mail:hover{border-bottom-color:var(--fg)}

/* ---------- Textseiten ---------- */
.prosa{max-width:64ch;padding:56px 0 20px}
.prosa h2{font-size:clamp(21px,2.6vw,28px);margin:40px 0 14px}
.prosa p{color:var(--muted);font-size:17px;line-height:1.75;margin-bottom:16px}
.prosa strong{color:var(--fg);font-weight:600}
.person{border-top:1px solid var(--line);padding:22px 0}
.person h3{font-size:20px;margin-bottom:6px}
.person span{
  color:var(--muted);font-size:14px;font-family:var(--sans);
  letter-spacing:normal;text-transform:none;
}
.person p{margin-top:10px}

/* ---------- Fußzeile ---------- */
footer{border-top:1px solid var(--line);padding:30px 0;margin-top:40px}
footer .wrap{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;font-size:14px;color:var(--muted);
}
footer a:hover{color:var(--fg)}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
}

/* ---------- Sprachumschalter ----------
   Steht in der Kopfzeile neben dem Burger, nicht im Klappmenü. Vorher war
   er auf dem Handy erst nach einem Tipp auf den Burger zu sehen — auf einer
   Seite, die international akquiriert, ist das der falsche Platz.

   Bleibt sichtbar, egal wie schmal es wird. Die Flaggen sind 17 px breit
   und damit klein genug, dass die einzige Farbe auf der Seite weiter die
   Filme sind. */
.sprachwahl{display:flex;align-items:center;gap:2px;flex-shrink:0}
.sprachwahl a,.sprachwahl span{
  display:flex;align-items:center;gap:6px;
  padding:5px 9px;font-size:13px;line-height:1;
  font-family:var(--sans);color:var(--muted);
  border:1px solid transparent;
  transition:color .15s,border-color .15s;
}
.sprachwahl a:hover{color:var(--fg);border-color:var(--line)}
/* Die aktive Sprache lief vorher nur über eine Nuance Helligkeit und einen
   Rahmen aus var(--line) — auf Anthrazit kaum zu sehen. Sie bekommt deshalb
   dieselbe Umkehrung wie die Tonkachel und die Hauptaktion: heller Grund,
   dunkle Schrift. Kein neuer Effekt, sondern der vorhandene an einer Stelle,
   an der er etwas bedeutet. */
.sprachwahl .aktiv{
  background:var(--umkehr-bg);color:var(--umkehr-fg);
  border-color:var(--umkehr-bg);cursor:default;
}
/* Die Flaggenkante ist weiß-transparent und verschwindet auf dem hellen
   Grund der aktiven Schaltfläche. Dort deshalb dunkel. */
.sprachwahl .aktiv img{outline-color:rgba(0,0,0,.22)}
.sprachwahl img{
  width:17px;height:12px;display:block;flex-shrink:0;
  /* Feine Kante: Die weißen Flächen im Union Jack und das Schwarz oben in
     der deutschen Flagge verschwimmen sonst mit dem Hintergrund. */
  outline:1px solid var(--line);outline-offset:-1px;
}
/* Sehr schmale Geräte: Flaggen bleiben, die Kürzel fallen weg.
   Zwei Flaggen nebeneinander sind auch ohne Text eindeutig. */
@media(max-width:400px){
  .sprachwahl a,.sprachwahl span{padding:5px 6px;gap:0}
  .sprachwahl .kuerzel{display:none}
}

/* ---------- Textmarkierung ----------
   Wer eine Adresse oder einen Stücktitel kopiert, bekommt sonst das
   Browserblau — die einzige Farbe auf einer Seite, die bewusst keine
   Akzentfarbe hat. Stattdessen dieselbe Umkehrung, die auch aktive
   Zustände markiert. */
::selection{background:var(--umkehr-bg);color:var(--umkehr-fg)}

/* ---------- Kachel ohne Bild ----------
   Für Referenzen, bei denen es nichts zu sehen gibt, weil der Ton die Arbeit
   ist. Erster Fall: Nietzsche-Haus Naumburg — das Haus zeigt bewusst keine
   originalen Objekte, der Ton trägt die gesamte Vermittlung.

   Die Kachel hat deshalb kein Standbild. Zwischen 27 Filmbildern ist eine
   leere Fläche das Auffälligste, was man ihr geben kann, und sie sagt
   gleichzeitig, worum es geht. Nebenbei braucht sie kein Bildrecht.

   Beim Überfahren kippt sie in die Umkehrung — dieselbe, die auch aktive
   Filterknöpfe und die Hauptaktion markiert. Kein neuer Effekt, sondern
   der vorhandene an einer Stelle, an der er etwas bedeutet. */
.card-ton{
  break-inside:avoid;margin-bottom:14px;
  border:1px solid var(--line);border-radius:2px;
  background:var(--bg-soft);
  padding:22px 20px 18px;
  transition:background .2s,color .2s,border-color .2s;
}
.card-ton .kat{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.card-ton h3{font-size:20px;line-height:1.25;margin-bottom:12px}
.card-ton p{color:var(--muted);font-size:14px;line-height:1.65;margin-bottom:16px}
.card-ton audio{width:100%;display:block}

.card-ton:hover{
  background:var(--umkehr-bg);
  color:var(--umkehr-fg);
  border-color:var(--umkehr-bg);
}
/* Auf hellem Grund braucht der gedämpfte Text einen eigenen Wert.
   #4a4a52 auf #f4f4f2 liegt bei 8:1 — der Wert für --muted käme auf 1,4
   und wäre unlesbar. */
.card-ton:hover .kat,.card-ton:hover p{color:#4a4a52}

/* Tonkachel mit Bild. Sieht aus wie eine Filmkachel, spielt aber Ton.
   Das Bild sitzt oben, ohne Innenabstand, der Text darunter — sonst
   entsteht ein Rahmen um das Bild, den keine andere Kachel hat. */
.card-ton--bild{padding:0;overflow:hidden}
.card-ton--bild .ton-bilder{display:grid;gap:1px;background:var(--line)}
.card-ton--bild .ton-bilder--2{grid-template-columns:1fr 1fr}
.card-ton--bild .ton-bilder img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/10}
.card-ton--bild .ton-text{padding:20px}
.ton-mehr{display:inline-block;margin-top:14px;font-size:14px}