/* ==========================================================================
   Santec Music Orchestra – Konzertvorlage
   Vorlage für WebFlowLocal.

   Schriften: Arapey und Open Sans, beide frei (SIL OFL). Sie kommen über
   die @import-Zeile unten; WebFlowLocal lädt sie beim Importieren herunter
   und serviert sie danach aus dem eigenen Sitz.

   FARBEN: alles steht in :root. Zuerst die Blau-Skala (aus dem Logo),
   darunter die Rollen (Fläche, Text, Akzent). Wer den Blauton wechseln
   will, ändert nur die Skala – die Rollen ziehen automatisch nach.
   ========================================================================== */

/* Arapey (Überschriften) und Open Sans (Fließtext), beide freie Schriften
   unter der SIL Open Font License. WebFlowLocal lädt sie beim Importieren
   herunter und schreibt diese Zeile auf die eigenen Dateien um, so dass im
   fertigen Sitz nichts mehr von Google geholt wird. */
@import url("../../fonts/fonts.css");

:root {
  /* --- Blau-Skala: aus dem Logo (Lyra-Blau #2a3c86, H 228°) ----------- */
  --blue-950: #080c1c;   /* Tiefstes Blau: Fußzeile, Grund der Menü-Fläche */
  --blue-900: #0d132b;   /* Fußzeile                                        */
  --blue-800: #131c3f;   /* Grundton: Kopfzeile, dunkle Abschnitte          */
  --blue-700: #1a2656;   /* Band mit den Eckdaten                           */
  --blue-600: #22316d;   /* Aufruf-Abschnitt                                */
  --blue-500: #2a3c86;   /* DAS BLAU DES LOGOS: Links, dunkle Schaltflächen */
  --blue-400: #4458a7;   /* Hellere Variante für Zustände                   */
  --blue-300: #8490c2;   /* Blaugrau                                         */
  --blue-200: #c7cde6;   /* Helle Fläche                                     */
  --blue-100: #e6e9f4;   /* Sehr helle Fläche                                */

  /* --- Akzent und helle Flächen ---------------------------------------- */
  --gold:      #d0a82b;
  --gold-soft: #e2c469;
  --gold-dark: #6f540e;   /* Gold für kleine Schrift auf hellem Grund */
  --cream:     #f8f4ec;
  --cream-2:   #efe8db;
  --gelb:      #fbf1d4;   /* helles Gelb wie der Verlauf der Bühne */

  /* --- Rollen ---------------------------------------------------------- */
  --surface:      var(--cream);
  --surface-alt:  var(--cream-2);
  --surface-dark: var(--blue-800);
  --text:         #1c2740;
  --text-muted:   #54637a;
  --text-invert:  var(--cream);
  --text-invert-muted: rgba(248, 244, 236, .78);
  --accent:       var(--gold);
  --accent-soft:  var(--gold-soft);
  --on-accent:    var(--blue-950);
  --line:         rgba(19, 28, 63, .16);
  --line-dark:    rgba(226, 196, 105, .30);
  --header-line:  rgba(42, 60, 134, .20);

  /* Arapey hat nur einen Schnitt (400) und Kursiv: nie fett setzen, sonst
     rechnet der Browser ein unschönes Kunstfett dazu. */
  --serif: "Arapey", Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans:  "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Luft zwischen den Blöcken. EIN Wert für die ganze Seite: hier drehen,
     wenn die Seite gedrängter oder luftiger werden soll. */
  --abstand:       clamp(48px, 6.5vw, 82px);
  --abstand-klein: clamp(30px, 4vw, 46px);

  --wrap: 1240px;
  --radius: 4px;
  --shadow: 0 18px 44px rgba(8, 12, 28, .12);
  --header-h: 74px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.nav-open { overflow: hidden; }

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

a { color: var(--blue-500); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--blue-800);
  line-height: 1.15;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.25rem; }

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

/* --- Hilfsklassen ------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blue-800); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; }

.eyebrow {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* Das helle Gold käme auf hellem Grund nur auf 2:1 – für so kleine
     Großbuchstaben zu wenig. Auf dunklem Grund bleibt es das helle. */
  color: var(--gold-dark);
  margin: 0 0 1.1em;
}
.section.dark .eyebrow,
.page-header .eyebrow,
.hero .eyebrow { color: var(--accent); }

.lead { font-size: 1.15rem; color: var(--text-muted); }

.rule {
  width: 68px; height: 2px; border: 0;
  background: var(--accent);
  margin: 0 0 1.8em;
}

.button {
  display: inline-block;
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
}
.button.ghost { background: transparent; color: var(--accent); }

/* Beim Überfahren TAUSCHEN die beiden Schaltflächen früher ihr Aussehen:
   die gefüllte wurde leer, die leere gefüllt – und dann sahen beide gleich
   aus. Jetzt behält jede ihre Rolle und wird nur eine Spur heller bzw.
   bekommt einen zarten Farbschleier. Nur für Geräte mit Zeiger: auf dem
   Handy bliebe der Zustand nach dem Tippen sonst hängen. */
@media (hover: hover) {
  .button:hover {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
    color: var(--on-accent);
  }
  .button.ghost:hover {
    background: rgba(226, 196, 105, .16);
    border-color: var(--accent-soft);
    color: var(--accent-soft);
  }
}
.button:active { transform: translateY(1px); }

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

/* Die Leiste ist hell gehalten: das Signet der Lyra ist blau, und auf
   dunklem Blau wäre Blau auf Blau nicht zu erkennen. Auf Creme steht es
   so da wie auf dem Briefkopf. */
.site-header {
  position: sticky; top: 0; z-index: 70;
  background: var(--cream);
  border-bottom: 1px solid var(--header-line);
  transition: background .35s ease, border-color .35s ease;
}

.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; position: relative; z-index: 80; }
.brand img { width: auto; height: 48px; }
.brand-logo-hell { display: none; }
.brand-name {
  font-family: var(--serif);
  font-size: .98rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--blue-500);
  transition: color .35s ease;
}

.main-nav ul { list-style: none; margin: 0; padding: 0; }

.nav-list { display: flex; gap: 26px; }
.nav-list a {
  color: var(--blue-800);
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav-list a:hover { color: var(--blue-500); border-bottom-color: var(--accent); }

.nav-extra { display: none; }

/* --- Schaltfläche für das Menü ------------------------------------------ */

.nav-toggle {
  display: none;
  position: relative; z-index: 80;
  align-items: center; gap: 12px;
  background: none;
  border: 1px solid var(--header-line);
  border-radius: var(--radius);
  color: var(--blue-800);
  font-family: var(--sans);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 11px 16px;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.nav-toggle:hover { border-color: var(--blue-500); color: var(--blue-500); }

.nav-toggle .bars {
  position: relative;
  width: 20px; height: 2px;
  background: currentColor;
  transition: background .2s ease;
}
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: "";
  position: absolute; left: 0;
  width: 20px; height: 2px;
  background: currentColor;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), width .3s ease;
}
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after  { top: 6px; width: 13px; }

.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after  { transform: translateY(-6px) rotate(-45deg); width: 20px; }

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

/* VARIANTE DUNKEL */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--blue-800) center / cover no-repeat;
  color: var(--text-invert);
  text-align: center;
  padding: clamp(76px, 11vw, 140px) 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 28, .72), rgba(8, 12, 28, .93));
}
/* Die Palmwedel aus dem gedruckten Programmheft */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    url("../../images/palmwedel-2.png") left -60px top -60px / auto 118% no-repeat,
    url("../../images/palmwedel-1.png") right 0    top -90px / auto 125% no-repeat;
  opacity: .17;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; max-width: 860px; }
.hero h1 { color: var(--text-invert); margin-bottom: .35em; }
.hero .hero-date {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  color: var(--accent-soft);
  margin-bottom: .4em;
}
.hero .hero-place { color: var(--text-invert-muted); margin-bottom: 2.2em; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* --- Helle Fassung der Bühne -------------------------------------------
   Der warme Verlauf und die Palmwedel aus dem gedruckten Programmheft,
   blaue Schrift auf Gold – genau wie auf dem Blatt.
   Einschalten: <section class="hero hell" …>  Ausschalten: "hell" weg. */

.hero.hell {
  background: linear-gradient(170deg, #fdf7e4 0%, #fbebb8 58%, #f8e49f 100%);
  color: var(--text);
}
.hero.hell::before { background: none; }
.hero.hell::after {
  background:
    url("../../images/palmwedel-2-gold.png") left -60px top -60px / auto 118% no-repeat,
    url("../../images/palmwedel-1-gold.png") right 0    top -90px / auto 125% no-repeat;
  opacity: .40;
}
.hero.hell .eyebrow    { color: var(--gold-dark); }
.hero.hell h1          { color: var(--blue-500); }
.hero.hell .hero-date  { color: var(--blue-600); }
.hero.hell .hero-place { color: #6b5a2e; }

/* Auf Gold hebt sich Gold nicht ab (Kontrast 1,9:1): die Schaltflächen
   werden hier blau, das ist auch die Paarung des gedruckten Blattes. */
.hero.hell .button {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: var(--cream);
}
.hero.hell .button.ghost { background: transparent; border-color: var(--blue-500); color: var(--blue-500); }

@media (hover: hover) {
  .hero.hell .button:hover {
    background: var(--blue-600);
    border-color: var(--blue-600);
    color: var(--cream);
  }
  .hero.hell .button.ghost:hover {
    background: rgba(42, 60, 134, .10);
    border-color: var(--blue-600);
    color: var(--blue-600);
  }
}

/* --- Eckdaten ----------------------------------------------------------- */

.facts { background: var(--blue-700); color: var(--text-invert); }
/* Nicht vier gleich breite Spalten: "Ort" und "Eintritt" tragen die
   längeren Sätze und bekommen mehr Platz, damit beide mit drei Zeilen
   auskommen. Sonst rutschte der Eintritt auf vier und das ganze Band
   wurde eine Zeile höher. */
.facts .grid {
  display: grid;
  grid-template-columns: .9fr .85fr 1.15fr 1.1fr;
}
.fact { padding: 28px 24px; border-left: 1px solid var(--line-dark); }
.fact:first-child { border-left: 0; }
.fact h3 {
  font-family: var(--sans);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .9em;
}
.fact p { color: var(--text-invert-muted); font-size: .97rem; line-height: 1.6; }

@media (min-width: 1041px) and (max-width: 1199px) {
  .fact { padding: 26px 16px; }
  .fact p { font-size: .9rem; }
}

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

.section { padding: var(--abstand) 0; }
.section.tinted { background: var(--surface-alt); }
.section.gelb   { background: var(--gelb); }
.section.dark { background: var(--surface-dark); color: var(--text-invert-muted); }
.section.dark h2, .section.dark h3 { color: var(--text-invert); }
.section.dark .lead { color: var(--text-invert-muted); }

.section-head { max-width: 720px; margin: 0 0 var(--abstand-klein); }
/* Steht die Überschrift allein im Block, fällt der Abstand darunter weg –
   sonst bleibt unten ein leerer Streifen ohne Inhalt. */
.section-head:last-child { margin-bottom: 0; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.centered .rule { margin-left: auto; margin-right: auto; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}


/* --- Programm ----------------------------------------------------------- */

.programm-split { align-items: start; }

.programm-teil {
  font-family: var(--sans);
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-dark);
  margin: 0 0 .6em;
  padding-bottom: .9em;
  border-bottom: 1px solid var(--line);
}

.werk { padding: 16px 0; border-bottom: 1px solid var(--line); }
.werk .jahre {
  font-family: var(--sans);
  font-size: .7rem; letter-spacing: .16em;
  color: var(--text-muted);
  margin: 0 0 .35em;
}
.werk h3 { font-size: 1.2rem; margin: 0 0 .3em; }
.werk p { margin: 0; color: var(--text-muted); font-size: .96rem; line-height: 1.55; }

.stiftung {
  margin: 26px 0 0;
  padding: 20px 22px;
  border-left: 3px solid var(--accent);
  background: rgba(208, 168, 43, .09);
}
.stiftung p { margin: 0; color: var(--text-muted); font-size: .94rem; }
.stiftung .stiftung-titel {
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--blue-800);
  margin: 0 0 .35em;
}

.pause {
  text-align: center;
  font-family: var(--serif);
  font-size: 1.45rem;
  letter-spacing: .06em;
  color: var(--blue-500);
  margin: 30px 0 0;
}

.programm-schluss {
  margin: 26px 0 0;
  text-align: center;
  font-size: .93rem;
  color: var(--text-muted);
  line-height: 1.6;
}


/* --- Karten ------------------------------------------------------------- */

.price-list { list-style: none; margin: 0 0 2em; padding: 0; }
.price-list li {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 1.02rem;
}
.price-list li:first-child { border-top: 1px solid var(--line-dark); }

.info-box {
  background: rgba(226, 196, 105, .10);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 30px 32px;
}
.info-box h3 { color: var(--text-invert); margin-bottom: .6em; }
.info-box a { color: var(--accent-soft); }

.contact-lines { list-style: none; margin: 0; padding: 0; }
.contact-lines li { padding: 7px 0; }

/* --- Anfahrt ------------------------------------------------------------ */

.address { font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.6em; }

/* --- Veranstaltungsort -------------------------------------------------- */

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.info-spalte { border-top: 2px solid var(--accent); padding-top: 22px; }
.info-spalte h3 {
  font-family: var(--sans);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 1em;
}
.info-spalte p { color: var(--text-muted); font-size: .98rem; margin: 0; }
.info-spalte .address { color: var(--text); font-size: 1.02rem; line-height: 1.75; margin: 0; }

/* --- Aufruf ------------------------------------------------------------- */

.cta { background: var(--blue-600); color: var(--text-invert); text-align: center; padding: var(--abstand) 0; }
.cta h2 { color: var(--text-invert); }
.cta p { color: var(--text-invert-muted); max-width: 620px; margin-left: auto; margin-right: auto; }
.cta .hero-actions { margin-top: 2em; }

/* --- Fließtextseiten (Impressum, Datenschutz) --------------------------- */

.page-header {
  background: var(--blue-800);
  color: var(--text-invert);
  padding: clamp(60px, 8vw, 96px) 0 clamp(40px, 5vw, 60px);
}
.page-header h1 { color: var(--text-invert); font-size: clamp(2rem, 4.6vw, 3.1rem); }
.page-header p { color: var(--text-invert-muted); margin: 0; }

.prose { max-width: 760px; }
.prose h2 { font-size: 1.6rem; margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: .5em; }

.note {
  border-left: 3px solid var(--accent);
  background: rgba(208, 168, 43, .09);
  padding: 18px 22px;
  margin: 1.6em 0;
  font-size: .96rem;
}

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

.site-footer {
  background: var(--blue-900);
  color: var(--text-invert-muted);
  padding: 48px 0 34px;
  font-size: .92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-dark);
}
.site-footer h3 {
  font-family: var(--sans);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.2em;
}
.site-footer a { color: rgba(248, 244, 236, .82); text-decoration: none; }
.site-footer a:hover { color: var(--accent-soft); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { padding: 5px 0; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  padding-top: 26px;
  font-size: .86rem;
  color: rgba(248, 244, 236, .55);
}

.to-top {
  display: inline-block;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
}

/* ==========================================================================
   Menü für kleine Bildschirme: Überlagerung über die ganze Fläche
   ========================================================================== */

@media (max-width: 900px) {

  .nav-toggle { display: inline-flex; }

  /* Bei offenem Menü liegt die Leiste auf der dunklen Fläche: Signet und
     Beschriftung wechseln auf die helle Fassung. */
  body.nav-open .site-header {
    background: transparent;
    border-bottom-color: transparent;
  }
  body.nav-open .brand-logo { display: none; }
  body.nav-open .brand-logo-hell { display: block; }
  body.nav-open .brand-name { color: var(--cream); }
  body.nav-open .nav-toggle { color: var(--cream); border-color: var(--line-dark); }
  body.nav-open .nav-toggle:hover { color: var(--accent-soft); border-color: var(--accent); }

  .main-nav {
    position: fixed; inset: 0; z-index: 60;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--header-h) + 34px) 28px 44px;
    overflow-y: auto;
    overscroll-behavior: contain;

    background:
      radial-gradient(90% 55% at 88% 6%, rgba(208, 168, 43, .18), transparent 62%),
      radial-gradient(80% 50% at 0% 100%, rgba(42, 60, 134, .60), transparent 60%),
      linear-gradient(165deg, var(--blue-800) 0%, var(--blue-950) 100%);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
  }

  .main-nav.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .4s ease, transform .4s ease, visibility 0s;
  }

  /* Signet groß und sehr blass als Hintergrund der Überlagerung */
  .main-nav::after {
    content: "";
    position: absolute; right: -70px; bottom: -70px;
    width: 300px; height: 390px;
    background: url("../../images/logo-lyra-hell.png") center / contain no-repeat;
    opacity: .08;
    pointer-events: none;
  }

  .main-nav .nav-list,
  .main-nav .nav-extra { position: relative; z-index: 1; }

  .nav-list {
    display: block;
    border-top: 1px solid rgba(226, 196, 105, .20);
  }

  .nav-list li {
    border-bottom: 1px solid rgba(226, 196, 105, .20);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
  }
  .main-nav.open .nav-list li { opacity: 1; transform: none; }
  .main-nav.open .nav-list li:nth-child(1) { transition-delay: .10s; }
  .main-nav.open .nav-list li:nth-child(2) { transition-delay: .16s; }
  .main-nav.open .nav-list li:nth-child(3) { transition-delay: .22s; }
  .main-nav.open .nav-list li:nth-child(4) { transition-delay: .28s; }
  .main-nav.open .nav-list li:nth-child(5) { transition-delay: .34s; }
  .main-nav.open .nav-list li:nth-child(6) { transition-delay: .40s; }

  .nav-list a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 18px 4px;
    font-family: var(--serif);
    font-size: clamp(1.7rem, 8vw, 2.5rem);
    letter-spacing: .01em;
    text-transform: none;
    border-bottom: 0;
    color: var(--cream);
  }
  .nav-list a::before {
    content: attr(data-num);
    font-family: var(--sans);
    font-size: .68rem;
    letter-spacing: .22em;
    color: var(--accent);
    min-width: 26px;
  }
  .nav-list a:hover,
  .nav-list a:focus-visible { color: var(--accent-soft); }

  .nav-extra {
    display: block;
    margin-top: 34px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease .44s, transform .5s ease .44s;
  }
  .main-nav.open .nav-extra { opacity: 1; transform: none; }

  .nav-extra-title {
    font-family: var(--sans);
    font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .9em;
  }
  .nav-contact { margin: 0 0 26px; }
  .nav-contact li { padding: 5px 0; }
  .nav-contact a {
    color: var(--text-invert-muted);
    text-decoration: none;
    font-size: 1rem;
  }
  .nav-contact a:hover { color: var(--accent-soft); }
  .nav-extra .button { display: block; text-align: center; }
}

/* --- Weitere Breiten ---------------------------------------------------- */

@media (max-width: 1040px) {
  .facts .grid { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(3) { border-left: 0; }
}

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .info-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  /* Der Schriftzug bleibt stehen: er wird kleiner, bricht in zwei Zeilen
     und die Lyra rückt zusammen. Ausblenden wäre bequemer gewesen, aber
     dann fehlt auf dem Handy genau der Name des Orchesters. */
  .brand { gap: 10px; }
  .brand img { height: 42px; }
  .brand-name {
    font-size: .74rem;
    letter-spacing: .10em;
    line-height: 1.3;
    max-width: 9em;
  }
  .nav-toggle { padding: 11px 13px; gap: 10px; }

  .split { grid-template-columns: 1fr; }
  .programm-spalte + .programm-spalte { margin-top: 14px; }

  /* Auf dem Handy nur EIN Wedel: zwei machen den Grund unruhig, weil vom
     schmalen Bildschirm von beiden nur Blattspitzen übrig bleiben. */
  .hero::after {
    background:
      url("../../images/palmwedel-2.png") right -130px bottom -30px / auto 68% no-repeat;
    opacity: .13;
  }
  .hero.hell::after {
    background:
      url("../../images/palmwedel-2-gold.png") right -130px bottom -30px / auto 68% no-repeat;
    opacity: .26;
  }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .info-grid { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 520px) {
  /* Auf ganz schmalen Geräten weicht die Beschriftung der Schaltfläche,
     damit der Schriftzug ganz bleibt. Das Symbol trägt die Bedeutung,
     und aria-label sagt Vorlesegeräten weiterhin, was es tut. */
  .nav-toggle-text { display: none; }
  .nav-toggle { padding: 12px; }
  .brand img { height: 40px; }

  .facts .grid { grid-template-columns: 1fr; }
  .fact { border-left: 0; border-top: 1px solid var(--line-dark); }
  .fact:first-child { border-top: 0; }
  .hero-actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .main-nav .nav-list li,
  .main-nav .nav-extra { opacity: 1; transform: none; }
}