@media (min-width: 46.01rem) and (max-width: 62rem) {
  
  .platte { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  
  
  .produktion { grid-template-columns: 1fr; }
}
/* Knapp über der Telefonbreite passen Name und Menü nicht nebeneinander.
   Dann steht das Menü bewusst in einer eigenen Zeile darunter, statt dass
   ein einzelner Punkt zufällig in die zweite Zeile rutscht. */
@media (min-width: 46.01rem) and (max-width: 52rem) {
  .site-header__inner { flex-wrap: wrap; row-gap: 0.2rem; }
  .nav { width: 100%; }
}

/* fonts.css wird im Seitenkopf separat verlinkt – ein @import hier würde das
   Laden der Schriften um einen zusätzlichen Rundlauf verzögern. */

/* ==========================================================================
   Werner Bodinek – Gestaltung
   Prinzip: Theaterzettel. Links die Funktion (Jahr, Rolle, Datum),
   rechts die Sache (Titel, Name, Ort). Eine Spalte führt, eine trägt.
   ========================================================================== */

:root {
  /* Farbe – Bühnenboden, warmes Schwarz, das Grün aus der alten Site vertieft */
  --paper:      #e9e7e1;
  --paper-2:    #e0ddd5;
  --ink:        #17170f;
  --ink-2:      #5a584c;
  --rule:       #b9b4a6;
  /* Kein Akzentton: Hierarchie entsteht über Grösse, Gewicht und den
     dunklen Bühnenblock. Die einzige Farbe kommt aus den Fotos. */
  --auf-dunkel: #cfcabb;   /* gedämpfter Text auf der Bühne */

  /* Schrift */
  /* Eine Schrift für alles: eine Serife mit Füsschen, wie Werner es sich
     wünscht (Book Antiqua). Book Antiqua, Palatino Linotype und Palatino
     sind dieselbe Form – vorinstalliert auf Windows, Mac und iPhone, ohne
     Webfont. Die drei Rollennamen bleiben, damit das CSS lesbar bleibt. */
  --serif:   "Book Antiqua", "Palatino Linotype", Palatino, "URW Palladio L",
             P052, "Times New Roman", serif;
  --display: var(--serif);
  --body:    var(--serif);
  --mono:    var(--serif);

  /* Mass */
  --rail: 8.25rem;          /* Breite der Jahres-/Rollenspalte */
  --gap: clamp(1.5rem, 3vw, 2.75rem);
  --bleed: clamp(1.25rem, 4vw, 3.5rem);
  /* Der Satzspiegel richtet sich nach dem Text, nicht nach dem Bildschirm:
     Rubrikspalte plus Lesebreite ergeben zusammen die Seitenbreite. Bei
     78rem endete der Text in der Mitte und rechts stand ein Drittel leer. */
  --max: 60rem;

  /* Eine Abstandsskala für die ganze Site. Vorher stand an jeder Stelle
     ein eigener clamp() – dadurch wirkten manche Bereiche eng, andere weit.
     Alles baut jetzt auf diesen sechs Stufen auf. */
  --raum-1: 0.4rem;
  --raum-2: 0.85rem;
  --raum-3: 1.5rem;
  --raum-4: clamp(2rem, 3.5vw, 3rem);
  --raum-5: clamp(3rem, 6vw, 5rem);
  --raum-6: clamp(4.5rem, 9vw, 8rem);   /* Rhythmus zwischen Abschnitten */

  /* Lesemasse */
  --lesebreite: 36em;       /* Fliesstext */
  --lead-breite: 30em;      /* grössere Einleitungen */

  /* Sieben Stufen, mehr nicht. Jede hat eine Aufgabe:
     --2 Marken · --1 Marginalien und Labels · 0 Fliesstext ·
     1 Eintragstitel und Anriss · 2 Abschnittstitel · 3 Seitentitel · 4 Bühne */
  --step--2: 0.72rem;   /* 11.5 px: über dem Minimum von 11 pt (accessibility.md) */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(1.0rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.5rem + 2.8vw, 4rem);
  --step-4:  clamp(2.8rem, 1.6rem + 5.4vw, 6.5rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Platz für den Scrollbalken immer freihalten: sonst rücken kurze Seiten
     ohne Balken um ein paar Pixel nach rechts, und beim Wechsel springt
     der ganze Inhalt. */
  scrollbar-gutter: stable;
}

/* Sprungziele nicht unter die feste Kopfzeile schieben. Die Jahreseinträge
   im Werkverzeichnis müssen zusätzlich unter der Jahrzehnt-Leiste bleiben. */
:target,
[id^="j19"], [id^="j20"],
#spielplan, #produktion, #inhalt { scroll-margin-top: 5.5rem; }
/* Kopfzeile (66px) plus Jahrzehnt-Leiste (88px) plus Luft. */
.werk__item[id] { scroll-margin-top: 11rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-variant-numeric: oldstyle-num;
  -webkit-font-smoothing: antialiased;
}

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

/* Das hidden-Attribut muss immer gewinnen. Ohne diese Regel blieben
   Einträge im Produktionsverzeichnis sichtbar, die die Suche ausblendet:
   .werk__item setzt display: grid und überstimmte damit hidden. */
[hidden] { display: none !important; }

/* Ein einziger Link-Stil für die ganze Site: unterstrichen in Haarlinie,
   beim Überfahren kräftiger. Keine Farbe, keine zweite Variante. */
a {
  color: inherit;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 140ms ease;
}
a:hover { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { a { transition: none; } }

/* Ein einziger Knopf-Stil für Handlungen (Weiterführen, Aufklappen). */
.tat {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--step--1);
  color: inherit;
  background: none;
  border: 0;
  padding: 0 0 0.2rem;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  transition: border-color 140ms ease;
}
.tat:hover { border-bottom-color: transparent; }
/* Die Schrift ergibt 24 px Höhe. Eine unsichtbare Erweiterung bringt die
   Fläche auf über 40 px; Strich und Abstände bleiben, wo sie sind. */
.tat, .mehr-zeile a, .werk__alle { position: relative; }
.tat::after, .mehr-zeile a::after, .werk__alle::after {
  content: ""; position: absolute; inset: -0.6rem -0.4rem;
}
.spielplan__ort { padding-block: 0.4rem; }
@media (prefers-reduced-motion: reduce) { .tat { transition: none; } }

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

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--bleed);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprunglink: unsichtbar, bis er den Tastaturfokus bekommt.
   Vorher war er dauerhaft 1×1 Pixel gross und damit nutzlos. */
.skiplink {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skiplink:focus { top: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .skiplink { transition: none; } }

/* Erhöhter Kontrast: Nebentext und Linien werden kräftiger. */
@media (prefers-contrast: more) {
  :root { --ink-2: #33322a; --rule: #6f6a5c; --auf-dunkel: #f1efe8; }
}

/* --- Textbausteine ------------------------------------------------------ */

.label {                       /* die Mono-Marke: Jahr, Rolle, Datum, Rubrik */
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums;
}

.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: var(--lead-breite);
}

.prose { max-width: var(--lesebreite); }
.prose p { margin: 0 0 1.15em; }
.prose h2 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--step-1);
  letter-spacing: 0.01em;
  margin: 2.2em 0 0.7em;
}
.prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
}
.prose a:hover { text-decoration-color: currentColor; }
/* Fett und kursiv aus dem alten Editor stehen nur auf einzelnen Seiten.
   Einheitlich gesetzt: alles in der Grundschrift. */
.prose strong, .prose b { font-weight: inherit; }
.prose em, .prose i { font-style: normal; }
.prose img { margin: 1.6em 0; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }

/* --- Kopfzeile ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
/* Erst wenn die Seite gescrollt ist, grenzt sich die Kopfzeile kräftiger ab.
   Am Seitenanfang soll sie mit der Fläche verschmelzen. */
.site-header[data-gescrollt] { border-bottom-color: var(--ink); }
/* Nicht mehr: die Kopfzeile beim Scrollen zusammenrücken zu lassen. Sie
   steht im Fluss – jede Änderung ihrer Höhe zieht den ganzen Text um 14 px
   nach oben, mitten in der Bewegung. */

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  padding-block: var(--raum-2);
  min-height: 3.4rem;
}

.wordmark-wrap { margin: 0; }

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--step-1);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span { display: block; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  border: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font: 600 var(--step--1)/1 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  /* Die Schrift allein ergäbe eine 13 px hohe Fläche. Der Knopf öffnet am
     Telefon die ganze Navigation – er braucht eine fingerbreite Fläche,
     die nach aussen greift, ohne die Zeile höher zu machen. */
  min-height: 2.75rem;
  margin-block: -0.85rem;
  padding-inline: 0.35rem;
  margin-right: -0.35rem;
}
.nav-toggle__mark,
.nav-toggle__mark::after {
  display: block;
  width: 1rem;
  height: 1px;
  background: currentColor;
  content: "";
  transition: transform 180ms ease;
}
.nav-toggle__mark { position: relative; }
.nav-toggle__mark::after { position: absolute; inset: 0; transform: rotate(90deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__mark { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__mark::after { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle__mark, .nav-toggle__mark::after { transition: none; }
}

.nav { display: flex; gap: clamp(0.7rem, 1.3vw, 1.15rem); flex-wrap: wrap; }
.nav a {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--step--1);
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }

/* Die aktive Seite trägt volle Schwärze und einen kräftigen Strich –
   vorher unterschied sie sich nur durch den Strich. */
.nav a[aria-current] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
@media (prefers-reduced-motion: reduce) { .nav a { transition: none; } }

/* --- Bühne: der dunkle Block ------------------------------------------- */

/* Die Zahl trägt den Massstab seiner Arbeit. */

/* Demnächst: ein Abschnitt auf Papier, kein zweiter Auftritt. */
.produktion {
  display: grid;
  /* Die Termine brauchen mehr Platz als das Bild – sonst bricht der
     Spielort um und die Premiere-Marke rutscht in eine zweite Zeile. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.produktion .spielplan__row { grid-template-columns: 6.6rem 3.4rem minmax(0, 1fr); }

/* Bild und Text stehen mittig zueinander. */

/* Kein erzwungener Beschnitt: Bühnenfotos sind komponiert. */

/* Zeile mit weiterführenden Links – gleiches Bild wie im Eingang. */
.mehr-zeile {
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
}
.mehr-zeile a {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--step--1);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.15rem;
}
.mehr-zeile a:hover { border-bottom-color: transparent; }


/* --- Eingang: die Bühne ------------------------------------------------
   Ein Bühnenfoto trägt die Fläche, die Schrift steht unten links in der
   dunklen Zone des Bildes. Ein Bild, keine Teilung.
   ------------------------------------------------------------------------ */

.buehne {
  position: relative;
  /* Der Abzug ist bewusst kleiner als die Kopfzeile (gemessen 59.9 px).
     Zog man exakt oder mehr ab, endete die Bühne ein paar Pixel zu früh und
     der helle Abschnitt darunter blitzte als schmaler Streifen hervor.
     So überragt sie minimal – unsichtbar, aber ohne Spalt. */
  min-height: min(calc(100vh - 3.4rem), 58rem);
  min-height: min(calc(100svh - 3.4rem), 58rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Schrift oben links: dort ist die Szene in jedem Ausschnitt dunkel.
     Unten liefe sie quer über sein Gesicht. */
  align-content: space-between;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

/* Die Fotos liegen übereinander auf der ganzen Bühne; sichtbar ist das
   aktive, der Wechsel ist eine langsame Überblendung wie ein Lichtwechsel. */
.buehne__fotos {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.buehne__bild {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  max-width: none;   /* sonst deckelt die Grundregel img{max-width:100%} */
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.buehne__fotos .ist-aktiv { opacity: 1; }
/* Quadratisches Foto (Motz & Motzer): rechts in voller Höhe, links bleibt
   Bühnenschwarz für den Namen. Die linke Kante und der untere Rand laufen
   weich in den Grund aus – ein Lichtkegel, kein Rahmen. */
.buehne__bild--quadrat {
  right: 0;
  /* Breite = Höhe der Bühne, ausdrücklich: Safari leitete die Breite aus
     der Bilddatei ab (1000 px) und schnitt dann oben den Kopf ab. */
  width: min(calc(100vh - 3.4rem), 58rem);
  width: min(calc(100svh - 3.4rem), 58rem);
  aspect-ratio: 1 / 1;
  object-position: 50% 0 !important;   /* oben anschlagen: nie der Kopf, höchstens der Saum */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 34%),
    linear-gradient(to top, transparent 0, #000 24%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 34%),
    linear-gradient(to top, transparent 0, #000 24%);
  mask-composite: intersect;
}
/* Breites Foto (Der Tribun): füllt die Bühne. Um 3% nach rechts geschoben
   und breiter als der Rahmen, links verankert: so rückt die Figur nach
   rechts, das Manuskript reicht bis unter den Namen. */
.buehne__bild--breit {
  left: 3%;
  width: 110%;
}

.buehne::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Die linke Spalte muss dunkel bleiben, egal was das Foto dort zeigt –
     sonst liegt Schrift auf hellem Haar. */
  background:
    linear-gradient(to right, rgba(10, 10, 7, 0.82) 0%,
                              rgba(10, 10, 7, 0.7) 24%,
                              rgba(10, 10, 7, 0.34) 42%,
                              rgba(10, 10, 7, 0.06) 58%,
                              rgba(10, 10, 7, 0) 70%),
    linear-gradient(to bottom, rgba(10, 10, 7, 0.5) 0%,
                               rgba(10, 10, 7, 0) 30%),
    linear-gradient(to top, rgba(10, 10, 7, 0.6) 0%,
                            rgba(10, 10, 7, 0) 16%);
}

.buehne__inhalt {
  position: relative;
  width: 100%;
  padding-block: clamp(2rem, 5vw, 4rem) 0;
}

.buehne__name {
  color: var(--paper);
  /* Versalien einer Serife: normal stark und gesperrt wie auf einem
     Theaterplakat. Fett und eng wirkten sie klobig – und lauter, als
     Werner es möchte. */
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1.04;
  font-size: clamp(2.3rem, 1.3rem + 3.9vw, 4.7rem);
  margin: 0;
  max-width: 11ch;
}

/* Bildnachweis: klein, damit klar ist, welches Stück man sieht. */
/* Auf grossen Schirmen steht der Name in der Mitte der Bühne statt oben
   angeklebt: nach dem Wegfall des Premiere-Blocks war er zu kurz, um die
   Figur rechts aufzuwiegen, und darunter klaffte eine leere Fläche. Mitte
   heisst hier: links vom Gesicht, oberhalb der hellen Papiere. */
@media (min-width: 46.01rem) {
  .buehne { grid-template-rows: 1fr auto; align-content: stretch; }
  .buehne__inhalt { align-self: center; padding-block: 0 18vh; }
}

.buehne__nachweis {
  /* rechts, höchstens halb so breit wie die Bühne: in der Mitte steht der Pfeil */
  margin: 0 0 0 auto;
  max-width: 44%;
  text-align: right;
  /* Platz für zwei Zeilen, auch wenn die Legende nur eine braucht: sonst
     rutscht beim Bildwechsel der ganze Fuss, und mit ihm der Name. */
  min-height: 2.9em;
  min-height: 2lh;
  transition: opacity 0.6s ease;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--auf-dunkel);
}

.buehne__fuss {
  position: relative;
  width: 100%;
  padding-block: 1.4rem 1.6rem;
}

/* Der Pfeil zeigt, dass unten weitergeht, und bewegt sich ruhig auf und ab.
   Er hängt an der Mitte des Abschnitts, nicht an einem Raster neben dem Text –
   so sitzt er unabhängig von der Zeilenlänge exakt in der Mitte. */
.buehne__weiter {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  flex: none;
  color: var(--auf-dunkel);
  display: inline-flex;
  padding: 0.4rem;
}
.buehne__weiter:hover { color: var(--paper); }
.buehne__pfeil { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .buehne__pfeil { animation: winken 2.6s ease-in-out 1.6s 3; }
  @keyframes winken {
    0%, 62%, 100% { transform: translateY(0); }
    76%           { transform: translateY(0.45rem); }
    88%           { transform: translateY(0.12rem); }
  }
}


/* Licht an: die Szene kommt hoch, dann tritt der Text auf. Beide
   Bewegungsabläufe waren aufgerufen, aber nie definiert – die Bühne stand
   von Anfang an einfach da. */
@media (prefers-reduced-motion: no-preference) {
  .buehne__fotos   { animation: licht-an 900ms cubic-bezier(0.22, 0.61, 0.25, 1) both; }
  .buehne__name    { animation: auftritt 700ms cubic-bezier(0.22, 0.61, 0.25, 1) 380ms both; }
  
  

  @keyframes licht-an {
    from { opacity: 0; transform: scale(1.03); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes auftritt {
    from { opacity: 0; transform: translateY(0.7rem); }
    to   { opacity: 1; transform: none; }
  }
}

@media (max-width: 46rem) {
  .buehne { min-height: 0; align-content: start; }
  /* Auf dem Telefon die ganze Szene zeigen, nicht den verschobenen Ausschnitt. */
  .buehne__fotos { position: relative; width: 100%; aspect-ratio: 1 / 1; z-index: auto; }
  .buehne__bild { left: 0; right: 0; width: 100%; aspect-ratio: auto;
                  -webkit-mask-image: none; mask-image: none; }
  .buehne__nachweis { max-width: none; }
  .buehne::before {
    background: linear-gradient(to top, var(--ink) 0%, rgba(12, 12, 8, 0) 26%);
  }
  .buehne__inhalt { padding-block: 1.5rem 0.4rem; }
  .buehne { align-content: start; }
  /* Die Bühne ist schmal nur so hoch wie ihr Inhalt. Ein absolut gesetzter
     Pfeil rutschte dann in die Rollenzeile – hier läuft er im Fluss mit. */
  .buehne__fuss { display: flex; flex-direction: column; gap: 1.4rem; padding-block: 1.4rem 1.7rem; }
  .buehne__weiter { align-self: center; }
  .buehne__weiter { position: static; transform: none; }
  .buehne__pfeil { width: 22px; height: 28px; }
}


@media print {
  .buehne::before { display: none; }
  .buehne, .buehne * { animation: none !important; opacity: 1 !important; }
}


/* --- Spielplan ---------------------------------------------------------- */

.spielplan { border-top: 1px solid #3a382c; }
.spielplan__row {
  display: grid;
  grid-template-columns: 7.5rem 4rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.62rem;
  border-bottom: 1px solid #3a382c;
  align-items: baseline;
}
/* Die Marke gehört zum Datum, nicht zum Spielort. Als viertes Feld in der
   Zeile stand sie am rechten Rand und drückte den Ort in einen Umbruch;
   im Ortsfeld sass sie irgendwo unter dem Ortsnamen. Jetzt steht sie in
   der Datumsspalte, direkt unter dem Tag, den sie bezeichnet. */
.spielplan__marke {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 0.2rem;
  white-space: nowrap;
}
.spielplan__marke:empty { display: none; }
/* Zwischentitel vor den gespielten Vorstellungen, in der Datumsspalte. */
.spielplan__trenner {
  margin: 0;
  padding: 1.1rem 0 0.35rem;
  border-bottom: 1px solid var(--rule);
}
.spielplan__row > * { font-family: var(--mono); font-size: var(--step--1); }
.spielplan__date { font-weight: 500; font-variant-numeric: tabular-nums; }
.spielplan__time { color: #a8a496; font-variant-numeric: tabular-nums; }
.spielplan__venue { letter-spacing: 0.02em; }
.spielplan__ort {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.spielplan__row--premiere .spielplan__date { font-weight: 500; }
/* "Premiere" steht als echter Text im HTML, nicht als CSS-Inhalt – sonst
   liest ein Screenreader es doppelt oder gar nicht. */
.spielplan__premiere {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
  padding: 0.12em 0.42em 0.1em;
  vertical-align: 0.08em;
}

/* auf hellem Grund */
.spielplan--light { border-top-color: var(--ink); }
.spielplan--light .spielplan__row { border-bottom-color: var(--rule); }
.spielplan--light .spielplan__time { color: var(--ink-2); }
.spielplan--light .spielplan__premiere { color: var(--ink); }

/* Bereits gespielte Vorstellungen bleiben lesbar, treten aber zurück. */
.spielplan__row--vorbei > * { color: var(--ink-2); }   /* 5.8:1 statt 3.7:1 mit opacity */
.spielplan__row--vorbei .spielplan__ort { text-decoration-color: var(--rule); }

/* --- Abschnitte --------------------------------------------------------- */

.section { padding-block: clamp(2.5rem, 6vw, 5.5rem); }

/* Lange Rubriken wie "Uraufführung" sauber trennen statt irgendwo
   umbrechen. Silbentrennung braucht das lang-Attribut, das steht im <html>. */
.section__head > .label,
.kopf > .label,
.inhalt-grid > .inhalt-grid__rail {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.section__head {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--gap);
  align-items: baseline;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.75rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.section__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--step-2);
  line-height: 1;
  margin: 0;
}
.section__note {
  grid-column: 2;
  margin: 0.5rem 0 0;
  color: var(--ink-2);
  font-size: var(--step--1);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* --- Werkverzeichnis: die Jahresspalte ---------------------------------- */

/* Keine Oberkante an der Liste: der Abschnittskopf darüber bringt
   bereits eine Linie mit – sonst stehen zwei übereinander. */

.werk__item {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--gap);
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.werk__item:hover { background: var(--paper-2); }

.werk__jahr {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  padding-top: 0.35rem;
}
/* Ein Jahr steht nur einmal – so liest sich die Spalte als Zeitstrahl */

.werk__titel {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: var(--step-1);
  line-height: 1.05;
  margin: 0;
}
.werk__titel a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
  /* Grosse Trefferfläche für Finger, ohne den Text darunter zu überdecken –
     eine unsichtbare Klickschicht über der ganzen Zeile würde verhindern,
     dass man die Mitwirkenden markieren und zitieren kann. */
  display: inline-block;
  /* Fläche nach oben und unten erweitern, ohne den Abstand zu ändern:
     vorher 25 px hoch, unter dem Minimum von 28 pt. */
  padding-block: 0.4rem;
  margin-block: -0.25rem;
}
.werk__titel a:hover { text-decoration-color: currentColor; }

.werk__meta {
  margin: 0.35rem 0 0;
  color: var(--ink-2);
  font-size: var(--step-0);
  line-height: 1.45;
  max-width: 46em;
}
/* Ohne Akzentfarbe muss die Unterstreichung zeigen, welche der Titel eine
   eigene Seite haben. Sie ist zurückhaltend gesetzt und wird beim
   Darüberfahren kräftig. */

/* --- Suche im Werkverzeichnis ------------------------------------------- */

/* Dieselbe Rubrikspalte wie überall: "Suchen" links, das Feld beginnt an
   der Inhaltskante. Vorher stand es je nach Wortlänge irgendwo dazwischen. */
.suche {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: baseline;
  padding-block: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.suche label { grid-column: 1; }
.suche input, .suche__ergebnis { grid-column: 2; }
.suche input {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: var(--body);
  font-size: var(--step-0);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 0.25rem 0.1rem;
  border-radius: 0;
  appearance: none;
}
.suche input::placeholder { color: var(--ink-2); opacity: 0.75; }
.suche input:focus { outline: 0; border-bottom-width: 2px; }
.suche__ergebnis {
  margin: 0;
  flex: none;
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}


/* --- Werkverzeichnis: aufklappbare Jahrzehnte ---------------------------
   76 Einträge am Stück erschlagen. Jedes Jahrzehnt ist ein <details>-Block:
   das jüngste offen, die übrigen zu. Ohne JavaScript bedienbar.
   ------------------------------------------------------------------------ */

.dekade { border-bottom: 1px solid var(--ink); }
.dekade:first-child { border-top: 1px solid var(--ink); }

.dekade__kopf {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) auto;
  gap: var(--gap);
  align-items: baseline;
  padding-block: 1.1rem;
  cursor: pointer;
  list-style: none;
}
.dekade__kopf::-webkit-details-marker { display: none; }
.dekade__kopf:hover { background: var(--paper-2); }
.dekade__kopf:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.dekade__jahre {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: 0.01em;
  font-variant-numeric: lining-nums;
}
.dekade__spanne,
.dekade__zahl {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Zeichen für auf/zu: ein Strich wird zum Kreuz */
.dekade__zahl { position: relative; width: 0.85rem; height: 1rem; align-self: center; }
.dekade__zahl::before,
.dekade__zahl::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.85rem;
  height: 1px;
  background: var(--ink);
  transition: transform 180ms ease;
}
.dekade__zahl::after { transform: rotate(90deg); }
.dekade[open] .dekade__zahl::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
  .dekade__zahl::before, .dekade__zahl::after { transition: none; }
}

/* Ein Jahrzehnt klappt nicht auf, es geht auf: der Inhalt kommt aus dem
   Kopf heraus statt schlagartig dazustehen. */
@media (prefers-reduced-motion: no-preference) {
  .dekade[open] .werk { animation: auftun 340ms cubic-bezier(0.22, 0.61, 0.25, 1) both; }
  /* Öffnet man alle auf einmal, kommen sie der Reihe nach – wie Kapitel,
     die aufgeschlagen werden, nicht wie ein Schalter. */
  .dekade:nth-of-type(2)[open] .werk { animation-delay: 60ms; }
  .dekade:nth-of-type(3)[open] .werk { animation-delay: 120ms; }
  .dekade:nth-of-type(4)[open] .werk { animation-delay: 180ms; }
  .dekade:nth-of-type(5)[open] .werk { animation-delay: 240ms; }
  .dekade:nth-of-type(6)[open] .werk { animation-delay: 300ms; }
  @keyframes auftun {
    from { opacity: 0; transform: translateY(-0.4rem); }
    to   { opacity: 1; transform: none; }
  }
}

.dekade .werk { padding-bottom: 1rem; }
.dekade .werk__item:last-child { border-bottom: 0; }

.werk__alle {
  border: 0;
  background: transparent;
  padding: 0 0 0.15rem;
  cursor: pointer;
  color: inherit;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--step--1);
  border-bottom: 2px solid currentColor;
}
.werk__alle:hover { border-bottom-color: transparent; }

/* --- Bilder ------------------------------------------------------------- */

.figure { margin: 0 0 1.5rem; }
.figure img { width: 100%; }
.figure figcaption {
  margin-top: 0.55rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.05em;
  color: var(--ink-2);
}
/* Der Nachweis ist klein – der Link darin darf es nicht sein. Ohne diese
   Zeilen ist "Herunterladen" 15 px hoch und am Telefon kaum zu treffen. */
.figure figcaption a {
  display: inline-block;
  padding-block: 0.55rem;
  margin-block: -0.55rem;
}

.video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  background: var(--ink);
}

/* --- Seitenkopf einer Produktion ---------------------------------------- */

.kopf {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--gap);
  padding-block: var(--raum-5) var(--raum-4);
  border-bottom: 1px solid var(--ink);
}
/* Lange Einzeltitel ("MORITATENNACHT", "BLACKMAGICBULLET") sind in der
   Serife breiter als der Telefonbildschirm: dann wird getrennt, statt dass
   die ganze Seite seitlich scrollt. */
.kopf__titel, .werk__titel, .reflex__titel, .ehrung__titel {
  hyphens: auto;
  overflow-wrap: break-word;
}
.kopf__sub, .credits__row dd { overflow-wrap: break-word; }
/* Im Fliesstext stehen Reste aus dem alten Editor, etwa eine Punktlinie
   ohne Leerzeichen. "anywhere" lässt das Raster schmaler werden als sie. */
.prose { overflow-wrap: anywhere; }

.kopf__titel {
  /* bescheiden: "PRODUKTIONSARCHIV" passt auch am Telefon auf eine Zeile */
  font-size: var(--step-2);
  line-height: 0.96;
  margin: -0.12em 0 0;      /* optisch auf die Grundlinie der Rubrik */
}
.kopf__sub + .kopf__sub { margin-top: 0.35rem; }
.kopf__sub--autor { font-size: var(--step-0); }
.kopf__sub {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--ink-2);
  margin: var(--raum-2) 0 0;
  max-width: var(--lead-breite);
}

.inhalt-grid {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--gap);
  padding-block: var(--raum-5) 0;
}
.inhalt-grid:last-child { padding-bottom: var(--raum-5); }
/* Die Rubrik steht auf derselben Grundlinie wie die erste Textzeile
   daneben. Vorher galt der Browser-Standardabstand des <p> (1em), die
   Rubrik hing damit gut 12 px unter der Zeile. Gemessen: 0.36em. */
.inhalt-grid > .inhalt-grid__rail { grid-column: 1; margin-top: 0.36em; margin-bottom: 0; }
.inhalt-grid > .inhalt-grid__body { grid-column: 2; }

/* Volle Breite, wenn die Randspalte leer bliebe – sonst wirkt der Text in
   der halben Spalte zusammengequetscht. Muss NACH der Grundregel stehen:
   gleiche Spezifität, die spätere gewinnt. */

/* --- Detailseite: Kopf, Besetzung, Blättern ------------------------------ */

/* Bilder gross und ohne Rahmen – sie sind der Grund, warum es die Seite gibt. */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--raum-3);
}
.galerie .figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--paper-2);
}
.galerie .figure:only-child { grid-column: 1 / -1; }
.galerie .figure:only-child img { aspect-ratio: auto; }

/* Bilder einer Produktion: alle gleich hoch nebeneinander, Hochformate
   schmal, Querformate breit – nichts wird beschnitten oder vergrössert. */
.bilder { display: flex; flex-wrap: wrap; gap: var(--raum-3); align-items: flex-start; }
.bilder .figure { margin: 0; flex: 0 1 auto; max-width: 100%; }
.bilder .figure img { width: auto; height: 24rem; max-width: 100%; object-fit: contain; }
@media (max-width: 46rem) {
  .bilder .figure img { height: 18rem; }
}

/* Besetzung: links die Funktion, rechts die Namen – der Theaterzettel.
   Keine Tabellenoptik, keine Rahmen, nur eine feine Trennung. */
/* Die Besetzung braucht mehr Breite als der Fliesstext – zwei Spalten
   Rolle/Namen quetschen sich sonst auf Lesebreite zusammen. */
.credits { margin: var(--raum-3) 0; max-width: 52em; }
.credits__row {
  display: grid;
  grid-template-columns: minmax(7rem, 13rem) minmax(0, 1fr);
  gap: var(--raum-2) var(--gap);
  padding-block: var(--raum-2);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.credits__row:last-child { border-bottom: 0; }
.credits__row dt {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--ink-2);
}
.credits__row dd {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.45;
}


/* --- Vita ---------------------------------------------------------------- */

/* Kurzangaben und Mitwirkende: schlichte Zeilen in Lesetextgrösse.
   Vorher standen sie eine Stufe grösser als der Rest der Site – beim
   Wechsel von Werk auf Vita sprang die Schrift sichtbar. */
.fakten {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--lesebreite);
}
.fakten li { padding-block: 0.3rem; }

/* Auszeichnungen: gleiche Bauform wie ein Eintrag im Werkverzeichnis –
   Haarlinie oben, Titel in Eintragsgrösse, Begründung als ruhiger Text. */
.ehrungen { display: grid; gap: var(--raum-4); }
.ehrung {
  max-width: var(--lesebreite);
  border-top: 1px solid var(--rule);
  padding-top: var(--raum-3);
}
.ehrung__titel {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--step-1);
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0 0 var(--raum-2);
  text-wrap: balance;
}
.ehrung__text { margin: 0; color: var(--ink-2); }
/* Auszeichnungen ohne Begründung: eine Zeile je Preis, Schriftgrösse des
   Fliesstexts, so wie Werner sie geschrieben hat. */
.ehrung__zeile { margin: 0; }
.ehrung__zeile + .ehrung__zeile { margin-top: 0.35em; }

/* Die Chronik der Theaterprojekte nutzt dieselbe Jahresspalte wie das
   Werkverzeichnis. Anders als dort steht kein Abschnittskopf darüber, der
   die erste Linie mitbrächte – also bekommt sie hier eine eigene. */
.werk--chronik {
  border-top: 1px solid var(--ink);
  margin-top: var(--raum-4);
}

/* --- Media --------------------------------------------------------------- */

/* Die CD bekommt eine eigene Fläche statt einer Bildunterschrift. */
.platte {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: var(--raum-4);
  align-items: center;
}
.platte__huelle { margin: 0; }
.platte__huelle img { width: 100%; }
.platte__titel {
  font-size: var(--step-1);
  margin: 0 0 var(--raum-2);
}

.video figcaption { display: grid; gap: 0.2rem; }
.video__titel { font-size: var(--step-0); color: var(--ink); }
.video__jahr {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums;
}


/* --- Reflexe: Texte, keine Blogeinträge --------------------------------- */

/* Die Liste stand als einzige links neben der Rubrikspalte statt im
   Inhaltsfeld. Jetzt beginnt sie dort, wo auf allen anderen Seiten der
   Inhalt beginnt, und Linie und Text enden gemeinsam. */
.reflexe {
  display: grid;
  gap: var(--raum-5);
  margin-left: calc(var(--rail) + var(--gap));
  max-width: var(--lesebreite);
}
.reflex { border-top: 1px solid var(--ink); padding-top: var(--raum-3); }
.reflex__titel {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--step-1);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
/* Gleiche Behandlung wie die Titel im Werkverzeichnis. Ohne Unterstreichung
   war am Telefon nicht zu sehen, dass der Titel zum ganzen Text führt –
   dort gibt es kein Überfahren, das es verraten könnte. */
.reflex__titel a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
  display: inline-block;
  padding-block: 0.4rem;
  margin-block: -0.25rem;
}
.reflex__titel a:hover { text-decoration-color: currentColor; }
.reflex__anriss {
  margin: var(--raum-2) 0 0;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Die einzelne Textseite: ruhig, grosszügig, gut lesbar. */
.reflex-seite .prose { line-height: 1.75; }
.reflex-seite .prose p { margin: 0 0 1.4em; }

/* --- Kontakt ------------------------------------------------------------- */

/* Porträts zum Aufklappen – dieselbe Bauform wie die Jahrzehnte im
   Produktionsverzeichnis: eine Zeile mit Plus, die sich zu Minus dreht. */
.klappe { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.klappe__kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
  padding-block: 1.1rem;
  cursor: pointer;
  list-style: none;
}
.klappe__kopf::-webkit-details-marker { display: none; }
.klappe__zeichen { position: relative; flex: none; width: 0.85rem; height: 1rem; }
.klappe__zeichen::before,
.klappe__zeichen::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.85rem;
  height: 1px;
  background: var(--ink);
  transition: transform 180ms ease;
}
.klappe__zeichen::after { transform: rotate(90deg); }
.klappe[open] .klappe__zeichen::after { transform: rotate(0deg); }
.klappe__inhalt { padding-bottom: var(--raum-3); }
@media (prefers-reduced-motion: reduce) {
  .klappe__zeichen::before, .klappe__zeichen::after { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .klappe[open] .klappe__inhalt { animation: auftun 340ms cubic-bezier(0.22, 0.61, 0.25, 1) both; }
}

.adressen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--raum-4);
  max-width: 46em;
}
.adresse { border-top: 1px solid var(--ink); padding-top: var(--raum-2); }
.adresse .label { display: block; margin-bottom: var(--raum-2); color: var(--ink); }
.adresse__zeile { margin: 0.15rem 0 0; }
.adresse__ort { margin: var(--raum-2) 0 0; color: var(--ink-2); }


/* Bausteine ohne eigene Gestaltung, die dennoch eine Regel brauchen, damit
   das Raster stimmt und nichts unbeabsichtigt erbt. */
.platte__text { min-width: 0; }
.dekaden-liste { display: block; }
.nav-toggle__label { display: inline-block; }

/* --- Fusszeile ---------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 6vw, 5rem);
}
.site-footer a { color: var(--paper); }
.site-footer .label { color: #a8a496; }
/* Zwei Blöcke an die Aussenkanten. Das frühere auto-fit-Raster legte sie
   nebeneinander in die ersten Spalten – rechts blieb alles leer. */
.footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem 3rem;
}
.footer__block { max-width: 22rem; }
.footer__block:last-child { text-align: right; }
.footer__block p { margin: 0.35rem 0 0; font-size: var(--step-0); }
.footer__fein {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid #3a382c;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.05em;
  color: #a8a496;
}

/* --- Schmal ------------------------------------------------------------- */

@media (max-width: 46rem) {
  :root { --rail: 3.6rem; --gap: 1rem; }

  /* Auf dem Telefon ist Höhe knapp: die Kopfzeile scrollt mit,
     nur die Jahrzehnt-Leiste bleibt stehen. So kann sich nichts überlagern. */
  .footer__block:last-child { text-align: left; }
  /* Telefon und Mail sind am Telefon die eigentliche Handlung. Als blosse
     Textzeile waren sie 21 px hoch – hier bekommen sie Zeilenluft. */
  .footer__block a { display: inline-block; padding-block: 0.45rem; }
  .footer__block p { line-height: 1.5; }
  .site-header { position: static; }

  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
  }
  .wordmark-wrap { grid-column: 1; grid-row: 1; }
  .nav-toggle { display: inline-flex; grid-column: 2; grid-row: 1; }
  .nav {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 0.2rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--rule);
    gap: 0.5rem 1rem;
  }
  .js .nav { display: none; }
  .js .nav[data-open] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Fingerbreite Ziele: die Zeilen waren 35 px hoch, das ist für eine
     Menüzeile am Telefon zu knapp. 44 px ist das übliche Mindestmass. */
  .nav a { padding-block: 0.7rem; min-height: 2.75rem; display: flex; align-items: center; }

  /* Auf schmalen Schirmen wird aus dem Theaterzettel-Raster eine Spalte:
     Rubrik über dem Inhalt statt daneben. */
  .kopf,
  .werk__item,
  .credits__row,
  .section__head,
  .inhalt-grid,
  .produktion { grid-template-columns: 1fr; }
  .inhalt-grid > .inhalt-grid__body,
  .section__note { grid-column: 1; }
  .werk__jahr { padding-top: 0; }
  .credits__row { padding-block: 0.7rem; }
  .credits__row dt { margin-bottom: 0.15rem; }
  .spielplan__row { grid-template-columns: 5.6rem 3.2rem minmax(0, 1fr); gap: 0.5rem; }

  /* --- Schmalformat: eigene Hierarchie statt gestauchtem Desktop -------- */

  /* Suche: Beschriftung über dem Feld, Feld über die volle Breite */
  .suche { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .suche label, .suche input, .suche__ergebnis { grid-column: 1; }

  .kopf__titel { font-size: clamp(1.35rem, 6.4vw, 1.9rem); }

  /* Besetzung und Presse: Rolle über den Namen, sonst bleiben 2 cm Text */
  .credits__row { grid-template-columns: 1fr; gap: 0.15rem; }
  

  
  
  

  
  
  
  

  /* CD und Videos: volle Breite */
  .platte { grid-template-columns: 1fr; gap: var(--raum-3); }
  .adressen { grid-template-columns: 1fr; }

  /* Reflexe */
  .reflexe { gap: var(--raum-4); margin-left: 0; }
}

/* Knapp über der Telefonbreite passen Name und Menü nicht nebeneinander.
   Dann steht das Menü bewusst in einer eigenen Zeile darunter, statt dass
   ein einzelner Punkt zufällig in die zweite Zeile rutscht. */
@media (min-width: 46.01rem) and (max-width: 52rem) {
  .site-header__inner { flex-wrap: wrap; row-gap: 0.2rem; }
  .nav { width: 100%; }
  .platte { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  
  
  .produktion { grid-template-columns: 1fr; }
  
  
}

@media print {
  .site-header, .site-footer, .skiplink { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .spielplan__row { border-bottom: 1px solid #999; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}