/* Schlichtes, rein textbasiertes Layout */

:root {
  --text: #000000;
  --muted: #555555; /* Grau für Nebenangaben (Gattung, Verlag, Datum) */
  --bg: #ffffff;
  --line: #e2e2e2;
  --link: #003399;
  --rot: #8b0000;
  /* Eine Spaltenbreite für alle Terminseiten (Auftritte, Medien, Theater): links Datum, Menügruppe
     bzw. Buchcover, rechts Ort, Menüpunkt bzw. Titel und Uraufführung – alles bündig */
  --spalte: 96px;
  --spalten-abstand: 20px;
  --menue-abstand: 20px; /* Abstand zwischen den Menüpunkten; bestimmt auch die Breite des Namens (siehe .kopf::after) */
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #e8e8e8;
    --muted: #9a9a9a;
    --bg: #141414;
    --line: #2c2c2c;
    --link: #6699ff;
    --rot: #e05a5a;
  }
}

* { box-sizing: border-box; }

/* Mit »hidden« ausgeblendete Teile bleiben unsichtbar, auch wenn sonst eine Anzeigeart gesetzt ist */
[hidden] { display: none !important; }

/* Schriftgröße auf iPhone/iPad beim Drehen nicht automatisch aufblähen */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.6;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 20px 64px;
  position: relative; /* Bezug für die Sprachwahl oben rechts */
}

/* Sprachwahl oben rechts als blauer Kasten: »EN« auf den deutschen, »DE« auf den englischen Seiten */
.sprache { position: absolute; top: 16px; right: 20px; padding: 3px 5px 2px; border: 1px solid currentColor; font-size: 0.75rem; line-height: 1; letter-spacing: 0.04em; color: var(--link); }
.sprache:hover { background: var(--link); color: var(--bg); text-decoration: none; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Kopf ---------- */

header {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}

/* Name so breit wie bisher (siehe .kopf::after) */
.kopf { display: inline-block; max-width: 100%; vertical-align: top; }
.buchstaben { display: flex; justify-content: space-between; font-variant: small-caps; }

header h1 {
  font-size: 1.6rem;
  font-weight: normal;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}

header h1 a, header h1 a:hover { text-decoration: none; }

/* Wappen am Ende der Seite, mittig unter der Fußzeile, verlinkt auf die Startseite; 36 px hoch.
   Bild in dreifacher Größe in der Linkfarbe #003399 (wappen-blau.png), im dunklen Modus in #6699ff (wappen-blau-dunkel.png). */
.wappen { display: block; width: max-content; margin: 28px auto 0; }
.wappen img { display: block; width: auto; height: 36px; }

nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px var(--menue-abstand); font-size: 0.95rem; margin-bottom: 9px; } /* Abstand zum Strich wie bisher */

/* Größere Tippflächen für Finger, ohne das Schriftbild zu ändern */
nav a { display: inline-block; padding: 6px 0; }

/* Aktuelle Seite unterstrichen (Menü oben und Fußzeile unten) */
nav a.aktiv, footer a.aktiv { text-decoration: underline; text-underline-offset: 5px; }

/* Unsichtbare Zeile mit fünf Menüwörtern unter dem Namen: hält den Namen so breit wie bisher.
   Steht nur hier, nicht in den Seiten. Wortabstand = Menüabstand (abzüglich des Leerzeichens). */
.kopf::after {
  content: "Bücher Übersetzungen Auftritte Theater Filme";
  display: block; height: 0; overflow: hidden; visibility: hidden;
  font-size: 0.95rem; white-space: nowrap;
  word-spacing: calc(var(--menue-abstand) - 0.24em);
}

/* ---------- Inhalt ---------- */

/* Lange Wörter (z. B. Adressen, E-Mail) umbrechen statt überstehen */
main { overflow-wrap: break-word; }

main p { margin: 0 0 24px; }

h2 {
  font-size: 0.9rem; /* gleich groß wie die Liste der Auftritte */
  font-weight: normal;
  margin: 40px 0 24px;
}

main > h2:first-child { margin-top: 0; }

/* Bücher und Filme */
ul.werke { list-style: none; padding: 0; margin: 0; }
ul.werke li { display: flow-root; padding: 18px 0; border-bottom: 1px solid var(--line); }
ul.werke li:first-child { padding-top: 0; }

/* Bücher und Filme: Cover bzw. Plakat links neben dem Text, alle gleich groß
   (Dateien 192 x 295 Pixel in den Ordnern »buecher« und »plakate«).
   Auf schmalen Bildschirmen rutschen die Händler-Kästchen unter das Cover. */
.titelbild { float: left; width: 96px; margin: 4px 20px 4px 0; }
.titelbild img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--line); }

/* Titel in Kapitälchen (wie der Name oben) */
.titel { font-size: 1.1rem; font-variant: small-caps; letter-spacing: 0.06em; }
/* Seite Bücher: Buchtitel als Überschrift <h2 class="werk-titel"> (für Suchmaschinen und Screenreader),
   sieht aber genau so aus wie vorher der Link allein: keine eigene Größe, kein Abstand */
ul.werke h2.werk-titel { font-size: inherit; font-weight: inherit; margin: 0; }

.info { color: var(--muted); font-size: 0.95rem; display: block; }

/* Hervorhebung in Dunkelrot, z. B. Erscheinungstermin eines neuen Buchs */
.rot { color: var(--rot); }

/* Verlag unter der Info-Zeile */
.verlag { color: var(--muted); font-size: 0.85rem; display: block; }
/* Hörbücher: Sprecherinnen und Sprecher, wie der Verlag */
.sprecher { color: var(--muted); font-size: 0.85rem; display: block; }
/* Hörbücher: die Cover sind quadratisch und damit niedriger als die Buchcover; der Text bleibt trotzdem
   rechts neben dem Cover und rutscht nicht darunter (Abstand = Coverbreite + Abstand) */
main.hoerbuecher ul.werke li > :not(.titelbild) { margin-left: 116px; }

.links { font-size: 0.9rem; display: block; margin-top: 2px; }
/* Trennstrich zwischen zwei Links; als eigener Block, damit er beim Darüberfahren nicht mit unterstrichen wird */
.links a + a::before { content: " | "; color: var(--muted); display: inline-block; white-space: pre; }

/* Händler-Logos unter jedem Buch, jeweils mit direktem Link zum Buch beim Händler.
   Weiße Kästchen auch im Dunkelmodus, weil die Logos dunkle Schrift haben. */
.haendler {
  display: grid;
  grid-template-columns: repeat(3, 88px); /* eine Reihe mit drei kleinen Kästchen */
  gap: 4px;
  margin-top: 10px;
}
.haendler a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid var(--line);
}
.haendler a:hover { border-color: #999; }
/* Alle Logos füllen ihr Kästchen gleich aus, egal wie groß die Datei angelegt ist */
.haendler img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Terminlisten: Auftritte, Medien, Theater */
ul.auftritte { list-style: none; padding: 0; margin: 0 0 32px; font-size: 0.9rem; }

ul.auftritte li {
  display: flex;
  align-items: baseline; /* Datum und Ort auf einer Linie */
  gap: var(--spalten-abstand);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

ul.auftritte .datum {
  flex: 0 0 var(--spalte);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Größere Tippflächen für Finger */
ul.auftritte a { display: inline-block; padding: 2px 0; }
main.termine ul.auftritte .datum + span { display: inline-block; padding: 2px 0; } /* Einträge ohne Link so hoch wie mit Link */

/* Menü mit Sprungmarken (Theater: oben über den Stücken; Auftritte: über den vergangenen Auftritten),
   im Raster der Terminlisten: links in der Datumsspalte die Gruppe in Kapitälchen (»Stücke«,
   »Vergangene Auftritte«), rechts in der Spalte der Orte die Sprungmarken zu den Abschnitten. */
.menue-gruppen { margin: 0 0 36px; padding-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.menue-gruppen p { display: flex; align-items: baseline; gap: var(--spalten-abstand); margin: 0; }
.menue-gruppen .gruppe { flex: 0 0 var(--spalte); color: var(--muted); font-variant: small-caps; letter-spacing: 0.06em; font-size: 0.95em; } /* so breit wie die Datumsspalte */
/* Die Punkte stehen untereinander in der Spalte der Orte, jeder in einer eigenen Zeile;
   die Gruppe steht auf der Höhe des ersten Punkts. */
.menue-gruppen .punkte { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.menue-gruppen a { display: inline-block; padding: 4px 0; white-space: nowrap; } /* größere Tippflächen */
/* Medien: Abschnitte (Podcasts, TV, Radio …) in Kapitälchen wie die Stücktitel auf der Theaterseite (.titel) */
main.termine h2 { font-size: 1.1rem; font-variant: small-caps; letter-spacing: 0.06em; }

/* Kleine Links unter den Listen (Fehlerseite: → Startseite) */
.klein-link { font-size: 0.9rem; }

/* Übersetzungen, Fotos, Kontakt, Impressum, Datenschutz, Soziale Medien: Text in kleiner Schrift */
main.klein p { font-size: 0.9rem; }

/* Kontakt: dünne Striche zwischen den Adressblöcken (wie bei Bücher und Filme) */
main.kontakt p { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
main.kontakt p:first-child { padding-top: 0; }

/* Kein doppelter Strich: der letzte Listenstrich entfällt, der Strich über »Impressum« ersetzt ihn.
   Abstand bis zum Strich so groß wie unter dem Kopf. */
main > :last-child { margin-bottom: 0; }
ul.werke li:last-child, main.kontakt p:last-child { border-bottom: none; padding-bottom: 0; }
/* Ebenso bei der letzten Terminliste einer Seite (Medien) */
ul.auftritte:last-of-type li:last-child { border-bottom: none; }

/* Fotos (Datei fotos.html): untereinander in drei Vierteln der Spaltenbreite, darunter Fotograf und Download.
   Die graue Fläche hält den Platz frei, bis das Foto geladen ist. */
.fotos { display: grid; gap: 40px; }
.fotos figure { margin: 0; width: 75%; }
.fotos img { display: block; width: 100%; height: auto; background: var(--line); }
.fotos figcaption { margin-top: 8px; }

/* Übersetzungen: gleich große Cover in Reihen, darunter Land und Verlag.
   Feine Linie, damit auch weiße Cover vom Hintergrund abgesetzt sind. */
.cover { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px 12px; }
.cover figure { margin: 0; }
.cover figure > a { display: block; }
.cover img { display: block; width: 100%; height: auto; aspect-ratio: 240 / 369; border: 1px solid var(--line); background: var(--line); }
.cover a:hover img { border-color: #999; }
.cover figcaption { margin-top: 6px; font-size: 0.75rem; line-height: 1.35; overflow-wrap: anywhere; }
/* Cover und Verlage ohne Buchseite (mit Stern): ein Klick zeigt den Hinweis »kein-link« */
.cover sup { line-height: 0; }
.kein-link { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--link); text-align: inherit; cursor: pointer; }
.cover figure > .kein-link { display: block; width: 100%; }
.cover .kein-link:hover img { border-color: #999; }
.cover figcaption .kein-link:hover { text-decoration: underline; text-underline-offset: 3px; }
#kein-link { max-width: min(340px, calc(100vw - 32px)); padding: 20px 24px 16px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
#kein-link p { margin: 0 0 12px; }
#kein-link button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--link); cursor: pointer; }
#kein-link::backdrop { background: rgb(0 0 0 / 0.2); }
/* Theater und Auftritte (gleich aufgebaut, beide <main class="theater">): je Abschnitt oben links das
   Buchcover (Theater, Ordner »buecher«) bzw. das Plakat (Auftritte, Ordner »plakate«), daneben der Titel
   in Kapitälchen (Theater: mit Uraufführung), darunter die Liste der Termine */
main.theater .stueck { margin-top: 48px; }
main.theater .stueck:first-of-type { margin-top: 0; }
main.theater .stueck-kopf { display: flex; align-items: flex-start; gap: var(--spalten-abstand); margin-bottom: 20px; }
main.theater .stueck-text { flex: 1; min-width: 0; }
main.theater .stueck-cover { flex: 0 0 var(--spalte); margin-top: 4px; }
main.theater .stueck-cover img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--line); }
main.theater a.stueck-cover:hover img { border-color: #999; } /* nur verlinkte Cover und Plakate */
/* Etwas Luft über dem Stücktitel nach einem Sprung aus dem Menü (nur ohne JavaScript; sonst filtert das Menü) */
main.theater h2 { margin: 0 0 12px; scroll-margin-top: 20px; }
/* Uraufführung unter dem Stücktitel, in Schwarz wie der übrige Text: »Uraufführung« klein in Kapitälchen,
   darunter Datum und Ort */
main.theater .ua { margin: 0; font-size: 0.9rem; color: var(--text); }
main.theater .ua-titel { font-variant: small-caps; letter-spacing: 0.06em; }
/* Theater (Gott, Terror): Link »Abstimmungen« klein rechts neben dem Stücktitel (bricht auf schmalen
   Bildschirmen bei Bedarf unter den Titel um) */
main.theater .titelzeile { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; margin-bottom: 6px; }
main.theater .titelzeile h2 { margin: 0; }
main.theater a.abstimmung { font-size: 0.9rem; }
/* Nur Seite Theater (Stücke nach dem Menü): Zeilen neben dem Cover etwas enger, damit der Text nicht unter das Cover reicht */
main.theater .stuecke-menue ~ .stueck h2 { margin-bottom: 6px; }
main.theater .stuecke-menue ~ .stueck .ua, main.theater .stuecke-menue ~ .stueck .anzahl { line-height: 1.35; }
/* Seite Theater: dünner Strich zwischen den Uraufführungen und der Statistik (Premieren, Wiederaufnahmen) */
main.theater .stuecke-menue ~ .stueck .anzahl { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
/* Seite Theater: Statistik (Premieren, Wiederaufnahmen, Aufführungen) in kleinerer Schrift */
main.theater .stuecke-menue ~ .stueck .anzahl { font-size: 0.8rem; }
/* Seite Theater: »Uraufführung(en)« in normaler Schrift, nicht in Kapitälchen */
main.theater .stuecke-menue ~ .stueck .ua-titel { font-variant: normal; letter-spacing: normal; }
/* Seite Theater: dünner Strich auch zwischen Stücktitel und Uraufführung, über die ganze Textspalte */
main.theater .stuecke-menue ~ .stueck .ua { padding-top: 6px; border-top: 1px solid var(--line); }
/* Theater (Gott, Terror): dünner senkrechter Strich »|« zwischen Titel und »Abstimmungen« */
main.theater .titelzeile .trenner { color: var(--line); }
/* Seite Theater (Computer und Telefon gleich): links das Cover (so breit wie die Datumsspalte), rechts in der
   Spalte der Orte der Titel, darunter »Abstimmungen« (ohne »|«) und die Statistik; darunter die Liste. */
main.theater .stuecke-menue ~ .stueck .stueck-kopf { display: grid; grid-template-columns: var(--spalte) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--spalten-abstand); align-items: start; } /* Cover so breit wie die Datumsspalte, Titel in der Spalte der Orte */
main.theater .stuecke-menue ~ .stueck .stueck-text { display: contents; }
main.theater .stuecke-menue ~ .stueck .stueck-cover { grid-column: 1; grid-row: 1 / 3; margin-top: 4px; }
main.theater .stuecke-menue ~ .stueck .stueck-text > h2, main.theater .stuecke-menue ~ .stueck .titelzeile { grid-column: 2; grid-row: 1; margin: 0; }
main.theater .stuecke-menue ~ .stueck .titelzeile { flex-direction: column; align-items: flex-start; row-gap: 2px; }
main.theater .stuecke-menue ~ .stueck .titelzeile .trenner { display: none; }
/* Reihenfolge unter Cover und Titel: erst die Statistik, dann die Uraufführungen; Striche darüber, dazwischen und darunter */
main.theater .stuecke-menue ~ .stueck .ua { grid-column: 1 / -1; grid-row: 3; margin-top: 0; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); line-height: 1.45; }
/* Uraufführungen in denselben Spalten wie die Termine: links »Uraufführung(en)« grau wie die Daten der Liste,
   rechts Datum und Ort der Uraufführungen */
main.theater .stuecke-menue ~ .stueck .ua { display: grid; grid-template-columns: var(--spalte) minmax(0, 1fr); column-gap: var(--spalten-abstand); align-items: baseline; }
main.theater .stuecke-menue ~ .stueck .ua-titel { color: var(--muted); }
main.theater .stuecke-menue ~ .stueck .anzahl { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; padding-top: 8px; padding-bottom: 8px; line-height: 1.5; font-size: 0.85rem; }
/* Seite Theater: Statistik unter dem Titel in der rechten Spalte neben dem Cover (Länder, Premieren,
   Wiederaufnahmen, Vorstellungen untereinander); auf Telefonen etwas enger, damit sie neben dem Cover bleibt */
main.theater .stuecke-menue ~ .stueck .stueck-kopf { row-gap: 0; }
main.theater .stuecke-menue ~ .stueck .anzahl.statistik { grid-column: 2; grid-row: 2; display: block; margin: 6px 0 0; padding: 0; border: 0; font-size: 0.9rem; line-height: 1.3; }
/* Titel und »Abstimmungen« enger zusammen, damit die Zahlen höher stehen */
main.theater .stuecke-menue ~ .stueck .stueck-text > h2, main.theater .stuecke-menue ~ .stueck .titelzeile h2 { line-height: 1.3; }
main.theater .stuecke-menue ~ .stueck .titelzeile { row-gap: 2px; }
main.theater .stuecke-menue ~ .stueck .titelzeile a.abstimmung { line-height: 1.3; }
/* Seite Theater: Uraufführungen in der Terminliste dunkelrot, mit »(UA)« */
main.theater ul.auftritte li.ua-zeile, main.theater ul.auftritte li.ua-zeile .datum { color: var(--rot); } /* Theater und Auftritte */
/* Auftritte und Theater: Anzahl unter Titel und Uraufführung (»7 Aufführungen«, »9 Premieren, 1 Wiederaufnahme«), Schrift wie .ua */
main.theater .anzahl { margin: 10px 0 0; font-size: 0.9rem; color: var(--text); }
/* Auftritte: Gattung direkt unter dem Titel (»Ein Bühnenabend«, »Theaterstück«), schwarz */
main.theater .gattung { margin: -4px 0 0; font-size: 0.9rem; line-height: 1.3; color: var(--text); } /* schwarz, mit etwas Abstand unter dem Titel */
/* Auftritte: Beschreibung von »Der stille Freund« unter Cover und Titel, mit etwas Abstand */
.beschreibung { margin: 0 0 28px; padding-top: 16px; font-size: 0.95rem; }
/* Bücher: etwas Luft über dem angesprungenen Buch (Link aus der Beschreibung auf der Seite Auftritte) */
ul.werke li[id] { scroll-margin-top: 20px; }
.beschreibung p { margin: 0 0 16px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* Blocksatz, mit Silbentrennung (sonst große Lücken auf dem Handy) */
/* Auftritte: Anzahl unter dem Titel wie die Statistik auf der Seite Theater (gleiche Schrift, gleicher Abstand) */
main.theater .vergangen-titel ~ .stueck .anzahl { margin-top: 14px; line-height: 1.3; }
/* Auftritte (auftritte.html): unter den kommenden Terminen ein Strich, darunter das Menü
   »Vergangene Auftritte« (wie auf der Seite Theater) und die Abschnitte */
main.theater #kommende-termine li:last-child { border-bottom: none; }
/* Kommende Termine: eine Zeile je Termin – Datum, Ort (wie bei den vergangenen Terminen), Kasten »Karten« bzw. »Tickets«.
   Datum und Ort genau wie bei den vergangenen Terminen; am Handy ist nur der Kasten etwas kleiner. */
main.theater #kommende-termine li { align-items: baseline; }
#kommende-termine .ort { flex: 1; min-width: 0; }
#kommende-termine .tickets { flex: none; align-self: center; display: inline-block; padding: 4px 10px 3px; border: 1px solid currentColor; font-size: 0.85rem; line-height: 1.2; letter-spacing: 0.03em; } /* Kasten wie »↑ Menü« */
#kommende-termine .tickets:hover { text-decoration: none; background: var(--link); color: var(--bg); }
@media (max-width: 480px) {
  #kommende-termine .tickets { padding: 3px 7px 2px; font-size: 13px; }
}
main.theater h2.vergangen-titel { margin: 40px 0 28px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--text); font-variant: small-caps; letter-spacing: 0.06em; font-size: 1.1rem; } /* Überschrift »Vergangene Auftritte«: schwarz, so groß wie die Titel (.titel), ohne Links */
main.theater .stueck h3 { font-size: 0.9rem; font-weight: normal; margin: 0 0 12px; } /* Auftritte: vergangene Abschnitte (h3 unter »Vergangene Auftritte«) sehen aus wie die Titel oben (h2) */
main.theater .vergangen-titel + .stueck { margin-top: 0; }
main.theater .stueck h2 { scroll-margin-top: 20px; } /* Theater: etwas Luft über dem angesprungenen Stück */
/* Liste: Strich unter der letzten Inszenierung jedes Stücks; beim letzten Stück ersetzt ihn der Strich über der Fußzeile */
main.theater .stueck ul.auftritte { margin-bottom: 0; }
main.theater .stueck ul.auftritte li:last-child { border-bottom: 1px solid var(--line); }
main.theater .stueck:last-of-type ul.auftritte li:last-child { border-bottom: none; }
/* Lange Theaternamen umbrechen sauber; das Datum bleibt auf Höhe der ersten Zeile */
main.theater ul.auftritte a { display: inline; }
/* Anmerkung im Menü unter den Punkten (über dem Strich), über die ganze Breite, kleiner als die Listen */
.menue-gruppen p.legende { font-size: 0.9rem; color: var(--muted); margin: 18px 0 10px; }
/* Medien: Abschnitte wie die Stücke auf der Seite Theater: Strich unter dem letzten Eintrag, darunter »↑ Menü«;
   Klick im Menü springt nur zum Abschnitt (nichts wird ausgeblendet) */
main.termine .medien-abschnitt { margin-top: 40px; }
main.termine .medien-abschnitt h2 { scroll-margin-top: 20px; } /* etwas Luft über dem angesprungenen Abschnitt */
main.termine .medien-abschnitt:first-of-type { margin-top: 0; }
main.termine .medien-abschnitt ul.auftritte { margin-bottom: 0; }
main.termine .medien-abschnitt ul.auftritte li:last-child { border-bottom: 1px solid var(--line); }
/* Medien, Abschnitt Fotos: Hinweis zur Verwendung in kleiner Schrift (wie früher auf der Seite Fotos) */
main.termine .fotos-hinweis { margin: 0 0 24px; font-size: 0.9rem; }
/* Medien: Anmerkung am Ende der Seite, links, klein und grau */
main > p.legende { margin: 32px 0 0; font-size: 0.9rem; color: var(--muted); }
.gespraeche-menue { padding-bottom: 18px; } /* Medien: Luft zwischen Icons und Strich (die Anmerkung steht am Ende der Seite) */
/* Theater: Menü der Stücke in normaler Schriftgröße und in Kapitälchen wie die Stücktitel (die Legende bleibt klein) */
/* Medien: die Punkte jeder Gruppe nebeneinander, also zwei Reihen (Gespräche / Porträts) */
.stuecke-menue { font-size: 1em; } /* so groß wie der Text (wächst mit der Grundschrift: 17 / 18 / 19 px) */
/* Medien: Menü in einer Reihe, fünf Punkte über die ganze Breite verteilt (wie die Cover auf der Seite Theater);
   jeder Punkt ein Icon (Strichzeichnung in Linkfarbe), darunter das Wort */
.gespraeche-menue .medien-punkte { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 4px 0 0; }
.gespraeche-menue .medien-punkte a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; font-size: 0.9rem; }
.gespraeche-menue svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.gespraeche-menue .medien-punkte a:hover { text-decoration: none; }
.gespraeche-menue .medien-punkte a:hover span { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 480px) {
  .gespraeche-menue .medien-punkte { gap: 8px; }
  .gespraeche-menue .medien-punkte a { font-size: 0.8rem; }
  .gespraeche-menue svg { width: 30px; height: 30px; }
}
/* Menüpunkte auf Theater und Medien in normaler Schrift (keine Kapitälchen), so groß wie der Text */
/* Theater: Menü der Stücke als Leiste mit kleinen Covern nebeneinander, darunter der Titel */
.stuecke-menue .cover-menue { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; margin: 4px 0 0; }
.stuecke-menue .cover-menue a { display: flex; flex-direction: column; align-items: center; padding: 0; text-align: center; line-height: 1.3; }
.stuecke-menue .cover-menue span { font-size: 0.9rem; white-space: nowrap; } /* Titel klein und immer in einer Zeile; darf mittig etwas breiter sein als das Cover */
.stuecke-menue .cover-menue picture { display: block; width: 100%; max-width: 96px; margin-bottom: 8px; } /* so groß wie die Cover auf der Seite Bücher (.titelbild) */
.stuecke-menue .cover-menue img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--line); transition: opacity 0.15s; }
.stuecke-menue .cover-menue a:hover img { opacity: 0.85; }
@media (max-width: 480px) { .stuecke-menue .cover-menue { gap: 12px; } .stuecke-menue .cover-menue picture { max-width: 80px; } } /* Telefone: wie .titelbild */
@media (max-width: 480px) { .stuecke-menue .cover-menue span { font-size: clamp(9.5px, calc((100vw - 20px) / 33), 0.8rem); } } /* Telefone: Titel schrumpft mit der Bildschirmbreite, damit »Sie sagt. Er sagt.« in eine Zeile passt */
@media (max-width: 374px) { .stuecke-menue .cover-menue { gap: 10px; } }
 
/* Hinweis »Die Liste der Übersetzungen ist nicht vollständig.« unter den Covern */
main.uebersetzungen > .hinweis { margin-top: 32px; }

/* Impressum und Datenschutz: Abschnitte in Kapitälchen (wie Name und Buchtitel), Unterabschnitte kursiv */
main.recht h2 { font-size: 1rem; font-variant: small-caps; letter-spacing: 0.06em; margin: 40px 0 16px; }
main.recht > h2:first-child { margin-top: 0; }
main.recht h3 { font-size: 0.9rem; font-weight: normal; font-style: italic; margin: 24px 0 4px; }
main.recht h3 + p { margin-top: 0; }

/* ---------- Fuß mit »Impressum«: dünner Strich darüber, wie unter dem Kopf ---------- */

/* Kontakt, Impressum, Datenschutz, Soziale Medien nebeneinander, Schrift und Abstände wie im Menü oben */
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 20px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  text-align: center;
}

/* ---------- Telefone ---------- */

@media (max-width: 480px) {
  body { font-size: 17px; } /* Grundschrift: bestimmt die Zeilenabstände mit */
  .wrap { padding: 28px 16px 48px; }
  .sprache { top: 6px; right: 16px; }
  :root { --menue-abstand: 14px; } /* bestimmt auch die Breite des Namens */
  header { margin-bottom: 28px; }
  footer { gap: 0 16px; margin-top: 28px; }
  :root { --spalte: 88px; --spalten-abstand: 12px; } /* Terminseiten: siehe oben */
  .fotos { gap: 28px; }
  .titelbild { width: 80px; margin-right: 16px; }
  .haendler { grid-template-columns: repeat(3, minmax(0, 88px)); } /* Kästchen schrumpfen neben dem Cover */
  main.hoerbuecher ul.werke li > :not(.titelbild) { margin-left: 96px; }
}

/* Telefone und schmale Fenster: Menü in zwei Reihen, alle Punkte gleich groß
   (Auftritte · Bücher · Theater · Filme / Übersetzungen · Medien · Fotos);
   am Computer stehen alle sieben in einer Reihe */
@media (max-width: 560px) {
  nav { row-gap: 0; }
  nav::after { content: ""; flex-basis: 100%; order: 2; }
  nav a:nth-child(n+5) { order: 3; }
}

/* Sehr schmale Telefone: etwas weniger Abstand zwischen den Menüpunkten */
@media (max-width: 374px) {
  :root { --menue-abstand: 10px; }
  footer { gap: 0 10px; }
}

/* Kleinste Telefone: Händler-Kästchen unter das Cover, in voller Größe */
@media (max-width: 359px) {
  .haendler { clear: left; } /* drei Spalten wie bei Telefonen (siehe oben) */
  main.hoerbuecher ul.werke li > .haendler { margin-left: 0; }
}

/* Telefone: Fußzeile in zwei gleichen Reihen (Kontakt · Impressum / Datenschutz · »Soziale Medien«),
   damit »Soziale Medien« nie allein in der zweiten Reihe steht */
@media (max-width: 480px) {
  footer { row-gap: 3px; } /* zählt zweimal (unsichtbare Trennzeile): 6px zwischen den Reihen */
  footer::after { content: ""; flex-basis: 100%; order: 2; }
  footer a:nth-child(n+3) { order: 3; }
}

/* Große Bildschirme: etwas größere Grundschrift (bestimmt die Zeilenabstände mit) */
@media (min-width: 1400px) {
  body { font-size: 19px; }
}

/* ---------- Drucken: schwarz auf weiß, ohne Menü ---------- */

@media print {
  nav, footer, .haendler, .sprache, .menue-gruppen, .wappen { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}