@import url('fonts.css');

/* ---------- Grundlagen ---------- */

:root {
  --papier: #eeeeee;
  --papier-rein: #ffffff;
  --tinte: #383944;
  --tinte-kraeftig: #25262d;
  --tinte-leise: #6d6e79;
  --linie: #d5d5d8;
  --buehne: #111318;
  --akzent: #111b38;
  --akzent-warm: #e8b7a1;   /* aktiver Menüpunkt, Wert aus der alten Seite */
  --breite: 1120px;
  --breite-text: 720px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  font-kerning: normal;
}

h1, h2, h3, h4 {
  font-family: 'ABeeZee', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  color: var(--tinte-kraeftig);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.125rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tinte-kraeftig); }

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

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

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

.zum-inhalt {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(-120%);
  z-index: 100; background: var(--papier-rein); color: var(--akzent);
  padding: 0.75rem 1.25rem; font-family: 'Oswald', sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem;
  transition: transform 0.15s ease;
}
.zum-inhalt:focus { transform: translateX(-50%) translateY(0); }

/* Sprungmarke „Zum Inhalt" darf nicht unter dem fixierten Kopf landen. */
#inhalt { scroll-margin-top: 5.5rem; }

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.auszeichnung {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

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

/*
 * Zwei Zustände, wie auf der alten Seite:
 *   über einer dunklen Bühne  → transparent, weißes Monogramm, weiße Links
 *   sobald gescrollt wird     → oben fixiert, weißer Grund, dunkle Schrift
 *
 * Umgesetzt mit einer scroll-getriebenen CSS-Animation, NICHT mit einem
 * Scroll-Listener — Regel 2 (funktioniert ohne JavaScript) gilt auch hier.
 * Der massive Zustand unten ist die Vorgabe und damit der Rückfall in
 * Browsern ohne `animation-timeline`: dort ist der Kopf immer weiß und
 * lesbar, statt transparent über hellem Inhalt zu verschwinden.
 *
 * Der transparente Zustand gilt nur auf Seiten mit `body.mit-buehne`
 * (Bühne direkt unter dem Kopf). Auf Biographie, Impressum und Datenschutz
 * beginnt heller Inhalt — weiße Links wären dort unsichtbar.
 */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(238, 238, 238, 0.94);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: blur(6px);
  color: var(--tinte);
}

.kopf__innen {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}

/* justify-self: sonst füllt der Link die ganze Gitterspalte und das
   Klickziel wäre unsichtbar breiter als das Monogramm. */
.kopf__marke { display: inline-flex; align-items: center; justify-self: start; text-decoration: none; }

.kopf__zeichen {
  position: relative;
  display: block;
  width: 3.125rem;          /* 50 px wie auf der alten Seite */
  aspect-ratio: 1;
}
.kopf__zeichen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Das helle Monogramm gibt es nur im transparenten Zustand. */
.kopf__zeichen-hell { opacity: 0; }

.navigation { grid-column: 2; }
.navigation ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigation a {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;           /* folgt der Kopffarbe, damit der Wechsel greift */
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
}
.navigation a:hover { border-bottom-color: currentColor; }
.navigation a[aria-current='page'] { color: var(--akzent-warm); }

/* Navigation auf kleinen Geräten: ohne JavaScript benutzbar (Regel 2) */
@media (max-width: 719px) {
  .kopf__innen {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.6rem;
    padding-block: 0.85rem;
  }
  .navigation { grid-column: 1; }
  .kopf__marke { justify-self: center; }
  .navigation ul { gap: 0.1rem 0.9rem; }
  /* Tippziele: 32 px hohe Links sind auf dem Telefon zu klein (Richtwert 48 px).
     Mehr Innenabstand statt groesserer Schrift — die Zeile bliebe sonst nicht
     in zwei Reihen. */
  .navigation a { font-size: 0.75rem; letter-spacing: 0.1em; padding: 0.75rem 0.35rem; }
  .kopf__zeichen { width: 2.5rem; }
}

@supports (animation-timeline: scroll()) {
  body.mit-buehne .kopf {
    position: fixed;
    inset: 0 0 auto 0;
    /* Kein Weichzeichner: im transparenten Zustand würde er die Bühne
       dahinter verwischen, und bei 0.97 Deckkraft bringt er nichts. */
    backdrop-filter: none;
    animation: kopf-verfestigen linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 200px;
  }

  @keyframes kopf-verfestigen {
    from {
      background-color: rgba(255, 255, 255, 0);
      border-bottom-color: rgba(213, 213, 216, 0);
      color: #fff;
    }
    to {
      background-color: rgba(255, 255, 255, 0.97);
      border-bottom-color: var(--linie);
      color: var(--tinte);
    }
  }

  /* Monogramm überblenden: weiß über der Bühne, schwarz auf weißem Grund. */
  body.mit-buehne .kopf__zeichen-hell,
  body.mit-buehne .kopf__zeichen-dunkel {
    animation: linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 200px;
  }
  body.mit-buehne .kopf__zeichen-hell { animation-name: zeichen-ausblenden; }
  body.mit-buehne .kopf__zeichen-dunkel { animation-name: zeichen-einblenden; }

  @keyframes zeichen-ausblenden { from { opacity: 1; } to { opacity: 0; } }
  @keyframes zeichen-einblenden { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Bühne (Hero) ---------- */

.buehne {
  position: relative;
  display: grid;
  place-items: center;
  /* Die Bühne füllt das Fenster — wie auf der alten Seite (dort über
     39vh/46vh Innenabstand). Jede Deckelung macht daraus auf großen
     Schirmen ein schmales Band: das Bild ist 1,5:1, ein 2560er-Fenster
     mit gedeckelten 736px wäre 3,5:1 und zeigte nur 43 % der Bildhöhe.
     svh statt vh, damit auf dem Telefon die Browserleiste die Bühne nicht
     über den sichtbaren Bereich hinausschiebt. */
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(4rem, 14vh, 9rem) 1.5rem;
  background: var(--buehne) center/cover no-repeat;
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.buehne::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,11,15,0.45) 0%, rgba(10,11,15,0.2) 45%, rgba(10,11,15,0.6) 100%);
}
.buehne__innen { position: relative; z-index: 1; max-width: 46rem; }
.buehne h1 { color: #fff; margin-bottom: 0.15em; text-shadow: 0 2px 24px rgba(0,0,0,0.45); }
.buehne__unterzeile {
  font-family: 'ABeeZee', sans-serif;
  font-style: italic;
  font-size: clamp(1.25rem, 3.4vw, 2.1rem);
  color: #fff;
  margin: 0 0 1.75rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.45);
}

.buehne--schmal { min-height: min(60vh, max(46vh, 30vw)); }

/* Hintergründe je Seite als Klasse, nicht als style-Attribut — damit die
   Auslieferung eine strikte CSP ohne 'unsafe-inline' erlauben kann. */
.buehne--start          { background-image: url('../bilder/hero-start.jpg'); }
.buehne--vorstellungen  { background-image: url('../bilder/hero-vorstellungen.jpg'); }
.buehne--bilder         { background-image: url('../bilder/forza-trabucco.jpg'); }
.buehne--kontakt        { background-image: url('../bilder/fairlady-harry.jpg'); }

/* Auf dem Telefon die kleine Fassung: das grosse Buehnenbild wiegt 179 kB und
   wurde bisher an jedes Geraet ausgeliefert, obwohl die 54-kB-Fassung daneben
   liegt. Bei 640 px Breite deckt sie auch dichte Displays ausreichend ab. */
@media (max-width: 640px) {
  .buehne--start          { background-image: url('../bilder/hero-start@900.jpg'); }
  .buehne--vorstellungen  { background-image: url('../bilder/hero-vorstellungen@900.jpg'); }
  .buehne--bilder         { background-image: url('../bilder/forza-trabucco@900.jpg'); }
  .buehne--kontakt        { background-image: url('../bilder/fairlady-harry@900.jpg'); }
}
.buehne--schmal h1 { font-size: clamp(1.75rem, 4.4vw, 2.75rem); }

.knopf {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: rgba(17, 19, 24, 0.82);
  border: 1px solid rgba(255,255,255,0.55);
  padding: 0.95rem 2.1rem;
}
.knopf:hover { background: #fff; color: var(--tinte-kraeftig); border-color: #fff; }

.knopf--dunkel {
  color: #fff; background: var(--tinte-kraeftig); border-color: var(--tinte-kraeftig);
}
.knopf--dunkel:hover { background: var(--akzent); border-color: var(--akzent); color: #fff; }

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

.abschnitt { padding-block: clamp(3.5rem, 9vh, 6.5rem); }
.abschnitt--rein { background: var(--papier-rein); }
.abschnitt--eng { padding-block: clamp(2.5rem, 6vh, 4rem); }
.abschnitt--kopf-luft { padding-top: clamp(3rem, 9vh, 5.5rem); }
.abschnitt--ohne-luft-oben { padding-top: 0; }

.abschnitt__kopf { text-align: center; margin-bottom: clamp(2rem, 5vh, 3.25rem); }
.abschnitt__kopf .auszeichnung { font-size: 0.72rem; color: var(--tinte-leise); display: block; margin-bottom: 0.9rem; }
.abschnitt__kopf h2 { margin-bottom: 0.3em; }
.abschnitt__kopf p { color: var(--tinte-leise); max-width: 38rem; margin-inline: auto; }

.textspalte { max-width: var(--breite-text); margin-inline: auto; }
.textspalte--breit { max-width: 60rem; }

.zitat {
  margin: 0;
  border-left: 2px solid var(--linie);
  padding-left: 1.6rem;
}
.zitat blockquote {
  margin: 0 0 0.75rem;
  font-family: 'ABeeZee', sans-serif;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.45;
  color: var(--tinte-kraeftig);
}
.zitat figcaption { font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinte-leise); }

/* ---------- Vorstellungen ---------- */

.vorstellungen { list-style: none; margin: 0; padding: 0; }

.vorstellung {
  border-top: 1px solid var(--linie);
  padding-block: 1.75rem;
}
.vorstellung:last-child { border-bottom: 1px solid var(--linie); }

.vorstellung__zeile {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  gap: 0.4rem 2rem;
  align-items: start;
}

.vorstellung__datum {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  line-height: 1.25;
}
.vorstellung__tag { display: block; font-size: 1.6rem; color: var(--tinte-kraeftig); }
.vorstellung__monat { display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinte-leise); }

.vorstellung__titel {
  font-family: 'ABeeZee', sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--tinte-kraeftig);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.vorstellung__meta {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--tinte-leise);
}
.vorstellung__meta > * + *::before { content: '·'; margin-inline: 0.5rem; }
.vorstellung__text { margin: 0.9rem 0 0; max-width: 46rem; }
.vorstellung__aktion { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }

.vorstellung__link {
  font-family: 'Oswald', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--linie);
  padding: 0.6rem 1.1rem;
  color: var(--tinte-kraeftig);
}
.vorstellung__link:hover { background: var(--tinte-kraeftig); color: #fff; border-color: var(--tinte-kraeftig); }
.vorstellung__link--leise { border-color: transparent; padding-inline: 0; text-decoration: underline; text-underline-offset: 3px; }
.vorstellung__link--leise:hover { background: none; color: var(--akzent); border-color: transparent; }

.vorstellung--vergangen { opacity: 0.72; }
.vorstellung--vergangen .vorstellung__tag { font-size: 1.25rem; }

.vorstellung__bild { margin-top: 1.25rem; }
.vorstellung__bild img { width: 100%; max-width: 34rem; }

.hinweis-leer {
  border: 1px dashed var(--linie);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--tinte-leise);
}
.hinweis-leer p:first-child {
  font-family: 'ABeeZee', sans-serif;
  font-size: 1.15rem;
  color: var(--tinte-kraeftig);
}

/* Nächste Vorstellung auf der Startseite */
.naechste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.naechste__datum {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1;
  color: var(--tinte-kraeftig);
}
.naechste__datum small {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-top: 0.75rem;
}

/* ---------- Repertoire ---------- */

.repertoire { margin: 0; }
.repertoire__gruppe {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0.5rem 2rem;
  border-top: 1px solid var(--linie);
  padding-block: 1.4rem;
}
.repertoire__gruppe:last-child { border-bottom: 1px solid var(--linie); }

.repertoire__komponist {
  font-family: 'ABeeZee', sans-serif;
  font-size: 1.05rem;
  color: var(--tinte-kraeftig);
  margin: 0;
}
.repertoire__werke { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.repertoire__werk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0.35rem 2rem; }
/* margin 0: sonst schlägt der Basis-Absatzabstand durch, sobald Titel und
   Partien auf dem Telefon untereinanderstehen. */
.repertoire__titel { font-style: italic; margin: 0; }
.repertoire__sprache {
  font-family: 'Oswald', sans-serif;
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-left: 0.6rem;
}
.repertoire__rollen { list-style: none; margin: 0; padding: 0; font-size: 0.97rem; }
.repertoire__rollen li { line-height: 1.5; }
.repertoire__hinweis { font-style: italic; color: var(--tinte-leise); font-size: 0.88em; }

/* ---------- PDF-Download ---------- */

.pdf-knopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1rem;
  margin: 0 0 clamp(2rem, 5vh, 3rem);
}
.pdf-knopf__info {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

/* ---------- Galerie ---------- */

.galerie {
  /* Fotowand: Spalten statt Raster — behält die echten Bildformate und
     lässt keine Lücken zwischen hoch- und querformatigen Aufnahmen. */
  columns: 3;
  column-gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.galerie li { break-inside: avoid; margin: 0 0 1rem; }

.kachel {
  position: relative;
  margin: 0;
  background: #e2e2e4;
  overflow: hidden;
}
.kachel img { width: 100%; height: auto; display: block; }

/* Beschriftung wie auf der alten Seite: erscheint beim Überfahren.
   Sie steht immer im Markup (Screenreader, Suchmaschinen) und ist auf
   Geräten ohne Maus dauerhaft sichtbar — siehe (hover: none) unten. */
.kachel__text {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.15rem;
  padding: 1.5rem 1.25rem 1.1rem;
  color: #fff;
  background: linear-gradient(180deg, rgba(10, 11, 15, 0) 0%, rgba(10, 11, 15, 0.82) 55%);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.kachel__werk {
  font-family: 'Oswald', sans-serif;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
}
.kachel__credit {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}

.kachel:hover .kachel__text,
.kachel:focus-within .kachel__text {
  opacity: 1;
  transform: translateY(0);
}

/* Ohne Maus gibt es kein Überfahren — dort steht die Angabe dauerhaft. */
@media (hover: none) {
  .kachel__text { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kachel__text { transition: none; transform: none; }
}

@media (max-width: 1000px) { .galerie { columns: 2; } }
@media (max-width: 600px)  { .galerie { columns: 1; } }

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

.kontakt-gitter {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.kontakt-karten {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kontakt-karte {
  background: var(--papier-rein);
  border: 1px solid var(--linie);
  padding: 1.5rem 1.6rem;
}
.kontakt-karte h2, .kontakt-karte h3, .formular-karte h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: 0.7rem;
}
.kontakt-karte a { word-break: break-word; }

/* ---------- Formular ---------- */

.formular-karte {
  background: var(--papier-rein);
  border: 1px solid var(--linie);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.formular { margin-top: 1.5rem; }

/* Abstand über das Raster, nicht über die Ränder der Felder: sonst fällt der
   Abstand nach dem letzten Feld des Paares weg, sobald es einspaltig umbricht. */
.formular__paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1.1rem 1rem;
  margin-bottom: 1.1rem;
}
.formular__paar .feld { margin-bottom: 0; }

.feld { margin: 0 0 1.1rem; }
.feld label {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: 0.4rem;
}
.feld input,
.feld textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--tinte-kraeftig);
  background: var(--papier);
  border: 1px solid var(--linie);
  padding: 0.7rem 0.85rem;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.feld textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.feld input:focus-visible,
.feld textarea:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
  background: var(--papier-rein);
}

/*
 * Honigtopf: für Menschen unsichtbar, für Bots auffindbar. Bewusst NICHT
 * `display: none` per style-Attribut — das würde die strikte CSP brechen —
 * und bewusst kein Captcha, denn das wäre ein fremdes Skript (Regel 1) und
 * ohne JavaScript nicht bedienbar (Regel 2).
 */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__fuss {
  display: grid;
  gap: 0.9rem;
  margin: 1.5rem 0 0;
  justify-items: start;
}
.formular__hinweis {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--tinte-leise);
}

/* Rückmeldung an Ort und Stelle (nur mit JavaScript; ohne greift die
   Weiterleitung auf /kontakt/danke/). */
.formular__meldung {
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--linie);
  font-size: 0.95rem;
  line-height: 1.55;
}
.formular__meldung[hidden] { display: none; }
.formular__meldung--erfolg { border-left-color: #3f7d4e; background: #f1f6f2; color: #2c5a38; }
.formular__meldung--fehler { border-left-color: #b4632b; background: #fbf2ea; color: #7a3f13; }

.knopf--erfolg,
.knopf--erfolg:hover {
  background: #3f7d4e;
  border-color: #3f7d4e;
  color: #fff;
  cursor: default;
}

.feld input:disabled,
.feld textarea:disabled { opacity: 0.55; cursor: not-allowed; }

button.knopf { font: inherit; cursor: pointer; }
button.knopf--dunkel {
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .kontakt-gitter { grid-template-columns: 1fr; }
}

.entwurf {
  border: 1px dashed #b4632b;
  background: #fbf2ea;
  color: #7a3f13;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  font-size: 0.95rem;
}
.entwurf strong { font-family: 'Oswald', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78rem; display: block; margin-bottom: 0.4rem; }

/* ---------- Fuß ---------- */

.fuss {
  background: var(--buehne);
  color: rgba(255,255,255,0.72);
  padding-block: 3.5rem 2.5rem;
  font-size: 0.95rem;
}
.fuss__innen { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.fuss h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.9rem;
}
.fuss a { color: #fff; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.fuss__zeichen { width: 2.6rem; height: auto; margin-bottom: 0.9rem; }
.fuss__name { font-family: 'ABeeZee', sans-serif; font-size: 1.25rem; color: #fff; margin: 0 0 0.3rem; }
.fuss__unten {
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.75rem 1.5rem; justify-content: space-between;
  font-size: 0.82rem; color: rgba(255,255,255,0.55);
}
.fuss__moweex { display: inline-flex; align-items: center; opacity: 0.6; transition: opacity 0.2s ease; }
.fuss__moweex:hover, .fuss__moweex:focus-visible { opacity: 1; }
.fuss__moweex img { width: 6.5rem; height: auto; }
@media (prefers-reduced-motion: reduce) { .fuss__moweex { transition: none; } }

/* ---------- Schmale Geräte ---------- */

@media (max-width: 860px) {
  .naechste { grid-template-columns: 1fr; }

  /*
   * Drei Spalten untereinander ergeben auf dem Telefon eine Textwand, in der
   * nicht mehr erkennbar ist, was zu wem gehört. Deshalb eine andere
   * Gliederung statt nur eines Umbruchs: der Komponist wird zur Überschrift,
   * die Werke rücken an einer Linie ein.
   *
   * Die Partien stehen bewusst WEITER untereinander. Inline mit Trennzeichen
   * war ausprobiert und wieder verworfen: gemessen 2 % Ersparnis (die meisten
   * Werke haben nur eine Rolle), dafür lesen sich die dichten Einträge wie
   * Bernsteins »Candide« als Fließtext statt als Liste. Für ein Verzeichnis,
   * das überflogen wird, ist das ein schlechter Tausch.
   *
   * Das Repertoire bleibt auf dem Telefon rund fünf Bildschirme lang. Genau
   * dafür gibt es den PDF-Download — nicht als Beiwerk, sondern als den
   * eigentlichen Weg für Intendanzen und Agenturen.
   */
  .repertoire__gruppe { grid-template-columns: 1fr; gap: 0.7rem; padding-block: 1.2rem; }

  .repertoire__komponist {
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tinte-leise);
  }

  .repertoire__werke { gap: 1.1rem; }
  .repertoire__werk {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--linie);
  }
  .repertoire__titel { font-size: 1.05rem; }
  .repertoire__sprache { margin-left: 0.45rem; }

  .repertoire__rollen { color: var(--tinte-leise); }
}

@media (max-width: 599px) {
  .vorstellung__zeile { grid-template-columns: 1fr; gap: 0.75rem; }
  .vorstellung__datum { display: flex; align-items: baseline; gap: 0.6rem; }
  .vorstellung__tag { font-size: 1.3rem; }
  .vorstellung__aktion { align-items: flex-start; }
}

@media print {
  .kopf, .fuss, .knopf, .zum-inhalt { display: none; }
  body { background: #fff; font-size: 11pt; }
  .buehne { min-height: 0; background: none; color: var(--tinte); }
  .buehne::after { display: none; }
  .buehne h1, .buehne__unterzeile { color: var(--tinte-kraeftig); text-shadow: none; }
}

/* ---------- Bildnachweise (Impressum) ---------- */

.nachweise { list-style: none; margin: 0 0 1.25em; padding: 0; display: grid; gap: 0.6rem; }
.nachweise li { padding-left: 1rem; border-left: 2px solid var(--linie); }
.nachweise strong { font-family: 'Oswald', sans-serif; font-weight: 400; letter-spacing: 0.04em; }

/* ---------- Kleine Hilfsklassen ---------- */
/* Ersetzen frühere style-Attribute. Siehe CLAUDE.md, Abschnitt CSP. */

.mittig-abstand { text-align: center; margin-top: 2.5rem; }
.abstand-oben { margin-top: 2rem; }

.untertitel {
  font-family: 'ABeeZee', sans-serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--tinte-kraeftig);
}

.zwei-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.zitat--abstand { margin-bottom: 2.5rem; }

.karte-wert { font-family: 'ABeeZee', sans-serif; font-size: 1.05rem; }
.karte-hinweis { margin-top: 1rem; color: var(--tinte-leise); font-size: 0.95rem; }

.vorstellung__aktion--anreisser { margin-top: 1.5rem; }

/* ---------- Tabelle in Rechtstexten ---------- */

.tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
  font-size: 0.92rem;
  line-height: 1.55;
}
.tabelle th,
.tabelle td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.9rem 0.6rem 0;
  border-bottom: 1px solid var(--linie);
}
.tabelle th {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  border-bottom-color: var(--tinte-leise);
}

/* Auf dem Telefon wird aus jeder Zeile ein eigener Block: drei Spalten mit
   Fließtext ergeben sonst Wortsalat in 8-Zeichen-Spalten. */
@media (max-width: 720px) {
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle thead { display: none; }
  .tabelle tr { border-bottom: 1px solid var(--linie); padding-block: 0.9rem; }
  .tabelle td { border: 0; padding: 0.1rem 0; }
  .tabelle td:first-child {
    font-family: 'Oswald', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinte-kraeftig);
    margin-bottom: 0.25rem;
  }
  .tabelle td:last-child { color: var(--tinte-leise); font-size: 0.88rem; }
}

.nichts-umbrechen { white-space: nowrap; }

/* ---------- Telefon: Bedienbarkeit ---------- */

@media (max-width: 719px) {
  /* Fusszeilen-Links waren 21 px hoch — zu wenig zum Treffen. */
  .fuss ul { gap: 0.1rem; }
  .fuss ul a,
  .fuss__unten a {
    display: inline-block;
    padding-block: 0.6rem;
  }

  /* Die kleinsten Auszeichnungen lagen bei 11,5 px. Lesbar bleibt ab 12 px. */
  .abschnitt__kopf .auszeichnung,
  .kachel__credit,
  .galerie figcaption,
  .fuss h2 { font-size: 0.78rem; }
}

/* ---------- Porträt mit Bildnachweis ---------- */

.portraet { margin: 0; }
.portraet__nachweis {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  padding-top: 0.6rem;
}