/* ==========================================================================
   Posaunenchor – Stylesheet
   ==========================================================================

   INHALT
     1. Design Tokens ....... Farben, Schriftgrößen, Abstände   ← hier anpassen
     2. Basis ............... Reset, Schriften, Grundlayout
     3. Komponenten ......... Buttons, Karten, Navigation, Lightbox
     4. Abschnitte .......... Hero, Video, Programm, Chor, Geschichte,
                              Kontakt, Rechtstexte

   Aufbau durchgehend Mobile First: Die Grundregeln gelten für schmale
   Displays, größere Bildschirme werden über `min-width`-Media-Queries
   ergänzt. Kein Abschnitt hat eine feste Höhe.
   ========================================================================== */



/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Farben: der Steinton und seine Verwandten -------------------------
     Die ganze Seite steht auf einer einzigen Farbfamilie: einem hellen,
     leicht ins Grüne gehenden Naturton – Thüringer Wald, nicht Stein.
     Alle Flächen sind Abstufungen desselben Farbwinkels, nur in
     unterschiedlicher Helligkeit. Dadurch gehören die Abschnitte sichtbar
     zusammen, bleiben aber unterscheidbar.

     Warum Grün und nicht mehr Greige: Ein neutrales Grau wirkt neben
     Messing leicht schmutzig – es hat keine eigene Richtung und nimmt die
     Wärme des Goldes nicht auf. Ein gedämpftes Waldgrün liegt dem Gold
     gegenüber und lässt es leuchten, statt es zu dämpfen.

     Es gibt bewusst nur vier helle Werte. Wer eine Fläche braucht, nimmt
     einen davon und legt keinen fünften an.                               */
  --c-cream: #f9faf5;        /* hellster Ton — Karten, Text auf Dunkel */
  --c-stone-light: #f1f3ec;  /* die meisten Abschnitte */
  --c-stone: #e7ebe1;        /* abgesetzte Abschnitte */
  --c-stone-deep: #d5dacd;   /* Trennlinien und Rahmen auf hell */

  /* Die dunklen Gegenstücke: dieselbe Farbe, nur tief. Waldgrün statt
     Taupe – sie wirken dadurch nach Nadelwald im Schatten und nicht nach
     grauem Beton. Sie sind zugleich eine Spur heller als die früheren
     Taupetöne, damit die dunklen Abschnitte nicht drücken.                */
  --c-forest: #3d4d42;       /* dunkle Abschnitte */
  --c-forest-deep: #313f36;  /* eine Spur tiefer — nur der Fußbereich */
  --c-forest-soft: #4d6054;  /* aufgehellte Variante für Karten auf Dunkel */
  --c-forest-line: #607668;  /* Linien auf dunklem Grund */

  /* Textfarben: derselbe Farbwinkel, damit auch die Schrift zur Fläche
     gehört. Alle drei erreichen auf jeder hellen Fläche mindestens 4,5:1. */
  --c-ink: #232a24;          /* Fließtext */
  --c-ink-soft: #4c5450;     /* Sekundärtext */
  --c-ink-faint: #5c6460;    /* Meta-Angaben, kleinste Schrift */

  /* Dieselben Farben noch einmal als Kanalwerte. Nur so lassen sich
     halbdurchsichtige Flächen (`rgb(var(--c-cream-rgb) / 0.7)`) an die
     Tokens binden. Vorher standen an 55 Stellen feste rgba-Werte im Code;
     die wären bei dieser Umstellung alle im alten Grau steckengeblieben.
     Bei einer Änderung oben also immer auch hier ändern.                  */
  --c-cream-rgb: 249 250 245;
  --c-ink-rgb: 35 42 36;
  --c-ruby-rgb: 140 47 57;
  --c-brass-rgb: 184 134 43;
  --c-brass-light-rgb: 217 167 65;
  --c-brass-glow-rgb: 240 206 121;

  /* --- Farben: erster Akzent (Messing) ----------------------------------
     Sparsam einsetzen. Messing ist der lauteste Ton der Seite und soll
     nur dort stehen, wo er Blicke wirklich führen soll:
     Hauptaktion, nächster Termin, Abspielknopf, Fokus.                    */
  --c-brass: #b8862b;        /* Flächen und Rahmen auf hellem Grund */
  --c-brass-ink: #8a6318;    /* kontraststarke Variante für Text auf Creme */
  /* Noch eine Stufe dunkler, für Gold auf den etwas dunkleren Steintönen.
     Auf der gescrollten Kopfzeile kommt --c-brass-ink nur auf 4,2 : 1 und
     verfehlt damit knapp die geforderten 4,5 : 1; diese Variante erreicht
     dort 5,1 : 1. */
  --c-brass-deep: #7a5612;

  /* Der einzige rote Ton der Seite, ausschließlich für besondere Termine
     wie Jubiläen. Gold ist bereits an „Nächster Termin“ vergeben; käme
     dort noch mehr Gold dazu, hätte man zwei gleich laute Signale. Ein
     tiefes Weinrot passt zum warmen Stein und ist in einer Kirche ohnehin
     die Farbe der Festtage. Sparsam bleiben – die Wirkung lebt davon,
     dass Rot sonst nirgends vorkommt. */
  --c-ruby: #8c2f39;         /* Rahmen und Bänder */
  --c-ruby-ink: #7a2832;     /* Text auf hellem Grund */
  --c-ruby-light: #f0adb4;   /* Text auf dunklem Grund */
  --c-brass-light: #d9a741;  /* Akzent auf dunklem Grund */
  --c-brass-glow: #f0ce79;   /* Hover auf Dunkel */

  /* --- Farben: zweiter Akzent (Sandstein) -------------------------------
     Derselbe Farbwinkel wie der Steinton, nur kräftiger gesättigt. Trägt
     alles, was sich wiederholt: Auszeichnungszeilen, Spaltentitel,
     Datumsangaben in der Chronik, Instrumentgrafiken.                     */
  --c-bark: #6b6144;         /* auf hellem Grund */
  --c-bark-light: #dedcc4;   /* auf dunklem Grund */

  /* --- Semantische Zuweisungen ------------------------------------------ */
  --bg: var(--c-stone-light);
  --bg-alt: var(--c-stone);
  --fg: var(--c-ink);
  --fg-muted: var(--c-ink-soft);
  --fg-subtle: var(--c-ink-faint);
  --line: var(--c-stone-deep);
  --accent: var(--c-brass);          /* Hauptakzent — sparsam */
  --accent-text: var(--c-brass-ink);
  --accent-soft: var(--c-bark);      /* zweiter Akzent — für Wiederkehrendes */

  /* Auf dunklen Sektionen wird dieser Block per .theme-dark umgeschaltet. */

  /* --- Typografie ------------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display-xl: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem);
  --fs-display-l: clamp(2rem, 1.2rem + 2.8vw, 3.25rem);
  --fs-display-s: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body: 1.125rem;      /* 18 px – bewusst groß, gut lesbar */
  --fs-small: 1rem;         /* 16 px – Mindestgröße für Nebentexte */
  --fs-meta: 0.9375rem;     /* 15 px – kleinste eingesetzte Größe */
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.06;
  --lh-snug: 1.24;
  --lh-body: 1.65;

  /* Mindestgröße für alles, was angetippt wird */
  --tap: 3rem;

  /* Etwas enger gesperrt als zuvor: Die längste Auszeichnungszeile passt
     dadurch auf dem Handy in eine Zeile statt in zwei. */
  --tracking-eyebrow: 0.14em;
  --tracking-display: -0.015em;

  /* --- Raster & Abstände ------------------------------------------------ */
  --wrap: 78rem;         /* Standard-Inhaltsbreite */
  --wrap-narrow: 46rem;  /* Lesebreite für Fließtext */
  --wrap-wide: 92rem;    /* für breite, editoriale Layouts */
  --gutter: clamp(1.5rem, 5vw, 4rem);   /* Innenabstand links/rechts */

  --space-s: 1.25rem;
  --space-m: 2rem;
  --space-l: 3.25rem;
  --space-2xl: clamp(4rem, 8vw, 8rem);   /* vertikaler Sektionsabstand */

  /* Innenabstand aller Karten – Terminkarten, Mitgliederkarten und
     Archiveinträge. Ein einziger Wert für Rand→Bild, Rand→Text und
     Bild→Text, damit überall dieselbe Luft steht. Innerhalb eines
     Textblocks (Rolle, Name, Instrument) wird enger gesetzt. */
  --card-pad: clamp(1.125rem, 3.5vw, 1.75rem);

  /* Abstand rund um die Zeitachse in der Chronik. Ein einziger Wert regelt
     alle vier Abstände: Text links ↔ Linie, Linie ↔ Bild rechts, Bild links
     ↔ Linie, Linie ↔ Text rechts. Er ist die Spaltenlücke des Rasters; die
     Linie sitzt genau in deren Mitte, also liegt links wie rechts die
     halbe Lücke an. */
  --timeline-gap: clamp(2.5rem, 6vw, 5.5rem);
  --timeline-inset: 2.5rem;   /* einspaltig: Abstand der Inhalte zur Achse */

  /* --- Formen & Schatten ------------------------------------------------ */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 20px;
  --radius-pill: 999px;

  /* Bewusst flach gehalten: sehr weiche, großflächige Schatten sind teuer
     zu zeichnen und kosteten beim Scrollen messbar Bildrate. */
  --shadow-s: 0 1px 2px rgb(var(--c-ink-rgb) / 0.07);
  --shadow-m: 0 3px 10px rgb(var(--c-ink-rgb) / 0.10);
  --shadow-l: 0 8px 24px rgb(var(--c-ink-rgb) / 0.18);

  /* --- Bewegung --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 640ms;

  /* Eigene Werte fürs Einblenden beim Scrollen.
     Die frühere Kurve (0.16, 1, 0.3, 1) legte 75 % des Weges in den ersten
     20 % der Zeit zurück – das sah nach Aufploppen aus, egal wie lang die
     Dauer war. Diese Kurve verteilt die Bewegung gleichmäßiger und kommt
     erst zum Schluss langsam zur Ruhe. */
  --ease-reveal: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-reveal: 1100ms;

  --header-h: 4.75rem;
}

/* Dunkle Sektionen: gleiche Komponenten, invertierte Semantik. */
.theme-dark {
  --bg: var(--c-forest);
  --bg-alt: var(--c-forest-soft);
  --fg: var(--c-cream);
  --fg-muted: #cbbfae;
  --fg-subtle: #a89b8b;
  --line: var(--c-forest-line);
  --accent: var(--c-brass-light);
  --accent-text: var(--c-brass-light);
  --accent-soft: var(--c-bark-light);
  color-scheme: dark;
}

/* Ab Tablet-Breite darf die Kopfzeile etwas höher werden. */
@media (min-width: 48rem) {
  :root { --header-h: 5.75rem; }
}


/* ==========================================================================
   2. BASIS
   ========================================================================== */

/* --- Selbstgehostete Schriften (keine externen Requests, DSGVO-freundlich) --
   Fraunces & Inter, beide unter der SIL Open Font License 1.1.
   Siehe assets/fonts/README.md                                              */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Reset ---------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

/* Der Hintergrund von <html> liegt hinter dem Dokument und wird beim
   Über-den-Rand-Scrollen (Overscroll) sichtbar. Er ist bewusst dunkel
   gehalten, damit dort kein weißer Streifen aufblitzt – oben grenzt der
   dunkle Hero an, unten der dunkle Fußbereich. */
html {
  background-color: #313f36;
}

body {
  /* Sehr lange Wörter – etwa Ortsnamen oder E-Mail-Adressen – dürfen
     umbrechen, statt aus ihrem Kasten zu laufen. */
  overflow-wrap: break-word;
  background-color: var(--c-stone-light);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, picture {
  display: block;
  max-width: 100%;
}
img { height: auto; }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

:target { scroll-margin-top: calc(var(--header-h) + 2rem); }

/* --- Fokus: sichtbar, aber gestalterisch eingebunden ---------------------- */

:focus-visible {
  outline: 2px solid var(--c-brass);
  outline-offset: 3px;
  border-radius: 2px;
}
.theme-dark :focus-visible { outline-color: var(--c-brass-glow); }

::selection {
  background: var(--c-brass-light);
  color: var(--c-ink);
}

/* --- Typografie ----------------------------------------------------------- */

h1, h2, h3, h4 {
  /* Silbentrennung für lange zusammengesetzte Wörter im Deutschen. */
  hyphens: auto;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
  text-wrap: balance;
}

p { text-wrap: pretty; }

strong, b { font-weight: 600; }

/* --- Layout-Hilfen --------------------------------------------------------
   Die Abschnitte liegen lückenlos untereinander: keine Außenabstände, keine
   festen Höhen. Jeder Abschnitt wächst mit seinem Inhalt und füllt die
   volle Breite. Die Hintergrundfarbe sitzt jeweils auf dem Abschnitt selbst,
   damit keine Farbfläche eines Elternelements durchscheinen kann.          */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--wrap-wide); }

.section {
  position: relative;
  width: 100%;
  padding-block: var(--space-2xl);
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
}

/* Jede Sektion setzt sich mit einer feinen Linie von der vorherigen ab –
   auch dann, wenn beide dieselbe Hintergrundfarbe haben. Die Linie nimmt
   automatisch den zum Hintergrund passenden Ton an. */
.hero + .section,
.section + .section {
  border-block-start: 1px solid var(--line);
}

/* Kopfbereich jeder Sektion: einheitlicher Aufbau, damit beim Scrollen
   sofort erkennbar ist, wo ein neuer Abschnitt beginnt. */
.section-head {
  display: grid;
  gap: 0.875rem;
  max-width: 44rem;
  margin-block-end: clamp(2.25rem, 5vw, 4rem);
}

/* --- Zugänglichkeit ------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--c-ink);
  color: var(--c-cream);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --- Papier-Textur ---------------------------------------------------------
   Hier lag früher eine fixierte Rausch-Ebene mit `mix-blend-mode` über dem
   ganzen Fenster. Sie war bei 3,5 % Deckkraft kaum sichtbar, zwang den
   Browser aber bei jedem Scrollschritt, die gesamte Seite neu zu mischen
   (gemessen: rund 15 % der Bildzeit). Deshalb entfernt.                    */


/* --- Scroll-Animationen --------------------------------------------------- */

/* Sehr zurückhaltend: im Kern eine Aufblendung, dazu eine halbe
   Zeilenhöhe Bewegung von unten. Mehr Weg würde beim Ankommen springen,
   weniger Zeit würde aufploppen. Die Deckkraft läuft etwas länger als die
   Bewegung – dadurch steht das Element ruhig, während es noch fertig
   aufblendet, statt am Ende zu „einrasten“. */
[data-reveal] {
  opacity: 0;
  /* translate3d statt translateY: Der Browser rechnet die Bewegung damit
     zuverlässig auf der Grafikkarte und muss den Inhalt nicht neu zeichnen. */
  transform: translate3d(0, 0.5rem, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-reveal),
    transform calc(var(--dur-reveal) * 0.8) var(--ease-reveal);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --- Druck ---------------------------------------------------------------- */

@media print {
  .site-header, .video-facade, .nav-drawer { display: none !important; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   3. KOMPONENTEN
   ========================================================================== */

/* --------------------------------------------------------------- Eyebrow ---
   Kleine Auszeichnungszeile über Überschriften. Sie kommt auf der Startseite
   siebenmal vor und ist deshalb bewusst im zweiten Akzent gehalten – nicht
   in Messing. Die kurze Linie steht nur links; die frühere zweite Linie auf
   der rechten Seite war reine Dekoration.                                   */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-soft);
}
/* Mobile ohne Strich: Die Zeile beginnt dadurch exakt an derselben Kante
   wie die Überschrift darunter, und auf schmalen Displays geht kein Platz
   für ein rein schmückendes Element verloren. Ab Tablet kommt er dazu. */
@media (min-width: 48rem) {
  .eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 2px;
    flex: none;
    /* Messing statt Textfarbe: ein winziger Marker, der in jedem Abschnitt
       wiederkehrt und die Seite dadurch zusammenbindet. */
    background: var(--accent);
    border-radius: 1px;
  }
}

/* --------------------------------------------------------- Sektionskopf --- */

.section-head--center {
  justify-items: center;
  text-align: center;
  margin-inline: auto;
}
.section-head__title {
  font-size: var(--fs-display-l);
  line-height: var(--lh-tight);
}
.section-head__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 34rem;
}

/* --------------------------------------------------------------- Buttons --- */

.btn {
  --btn-bg: var(--c-brass);
  --btn-fg: var(--c-ink);
  --btn-border: var(--c-brass);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: var(--tap);
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}
.btn:active { transform: translateY(0); }

.btn__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.btn:hover .btn__icon { transform: translateX(3px); }

/* Sekundär: Kontur */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-border: color-mix(in srgb, var(--fg) 30%, transparent);
}
.btn--ghost:hover {
  --btn-bg: color-mix(in srgb, var(--accent) 12%, transparent);
  --btn-border: var(--accent);
}

/* Zurückhaltend: klar als Schaltfläche erkennbar, aber neutral gehalten.
   Diese Variante steht auf jeder Terminkarte – in Messing wären das allein
   im Programm sechs weitere goldene Elemente. Der Akzent erscheint erst
   beim Darüberfahren. */
.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--fg-muted);
  /* Etwas kräftiger als die reine Trennlinienfarbe – sonst verliert die
     Schaltfläche ihre Kontur und ist nicht mehr als solche erkennbar. */
  --btn-border: color-mix(in srgb, var(--fg-muted) 28%, transparent);
  min-height: 2.75rem;
  padding-inline: 1.25rem;
  font-size: var(--fs-meta);
}
.btn--quiet:hover {
  --btn-bg: color-mix(in srgb, var(--accent) 8%, transparent);
  --btn-border: color-mix(in srgb, var(--accent) 55%, transparent);
  --btn-fg: var(--accent-text);
}

/* Auf dunklem Grund */
.theme-dark .btn { --btn-bg: var(--c-brass-light); --btn-fg: var(--c-ink); --btn-border: var(--c-brass-light); }
.theme-dark .btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-cream); --btn-border: rgb(var(--c-cream-rgb) / 0.32); }
.theme-dark .btn--ghost:hover { --btn-border: var(--c-brass-light); --btn-fg: var(--c-brass-glow); }

/* Text-Link mit animierter Messinglinie */
.link-brass {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  color: var(--accent-text);
  font-weight: 600;
  font-size: var(--fs-small);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur) var(--ease);
}
.link-brass:hover { background-size: 100% 1px; }

/* ---------------------------------------------------------------- Chips ---- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-alt) 70%, transparent);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  max-width: 100%;
}
/* Die erste Angabe („10 Mitglieder“) darf etwas fester stehen als die
   Aufschlüsselung daneben – dafür genügt der zweite Akzent. */
.chip--accent {
  border-color: color-mix(in srgb, var(--accent-soft) 35%, transparent);
  background: var(--c-cream);
  color: var(--accent-soft);
  font-weight: 600;
}
.chip__icon { width: 1.125rem; height: 1.125rem; flex: none; }

/* Die Aufschlüsselung der Instrumente ist auf schmalen Displays
   entbehrlich – sie steht ohnehin auf jeder Karte. */
.chip--detail { display: none; }
@media (min-width: 48rem) { .chip--detail { display: inline-flex; } }

/* --------------------------------------------------------- Medienrahmen ---- */

.media {
  position: relative;
  overflow: hidden;
  background: var(--c-forest);
  border-radius: var(--radius-m);
}
.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Der Zoom-Übergang wird nur für Geräte mit Maus überhaupt angelegt –
   auf Touchgeräten kann er nie auslösen und wäre reine Last. */
@media (hover: hover) {
  .media--zoom > img { transition: transform 900ms var(--ease-out-soft); }
  .media--zoom:hover > img { transform: scale(1.04); }
}
.media--3x2 { aspect-ratio: 3 / 2; }

/* Feine Innenkante, damit Bilder auf dunklem Grund eine Kontur behalten.
   Früher war sie messingfarben – ein weiteres goldenes Element pro Bild.
   Jetzt neutral und nur so kräftig, dass die Kante sichtbar bleibt. */
.media--framed::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgb(var(--c-cream-rgb) / 0.14);
  border-radius: inherit;
  pointer-events: none;
}

/* ---------------------------------------------------------------- Karte ---- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover {
  /* Nur Verschiebung und Rahmenfarbe: beides ist günstig zu zeichnen.
     Ein wechselnder Schatten würde die ganze Karte neu rastern. */
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent-soft) 45%, var(--line));
}
.theme-dark .card {
  background: var(--c-forest-soft);
  border-color: var(--c-forest-line);
}

/* --------------------------------------------------------- Kopfzeile / Nav -
   Aufbau: Wortmarke links, Navigation mittig, Handlungsaufruf rechts.
   Mobile First: zunächst nur Wortmarke und Menüschalter, ab 66rem kommt
   die waagerechte Navigation dazu.                                        */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  height: var(--header-h);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Deckende Fläche statt Weichzeichner. `backdrop-filter` zwingt den
     Browser, bei jedem Scrollschritt den Bereich hinter der Kopfzeile neu
     zu mischen – auf Mobilgeräten die teuerste Einzelmaßnahme dieser
     Seite. Optisch ist der Unterschied kaum wahrnehmbar. */
  background: var(--c-cream);
  border-block-end: 1px solid var(--c-stone-deep);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.site-header.is-scrolled::before { opacity: 1; }

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
@media (min-width: 66rem) {
  /* Drei feste Zonen – die Navigation sitzt dadurch immer exakt mittig
     und wandert nicht mit der Länge des Chornamens. */
  .site-header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(1rem, 2.5vw, 3rem);
  }
  .site-header__actions { justify-self: end; }
}

/* --- Wortmarke --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  min-width: 0;
  color: var(--c-cream);
  transition: color var(--dur) var(--ease);
}
.site-header.is-scrolled .brand { color: var(--c-ink); }

/* Logo: wird immer vollständig eingepasst (object-fit: contain), damit ein
   späteres echtes Logo in jedem Seitenverhältnis unverzerrt bleibt.
   Breite und Höhe stehen zusätzlich im HTML – so entsteht beim Laden
   kein Sprung im Layout. */
.brand__logo {
  width: 3.75rem;
  height: 3.75rem;
  flex: none;
  object-fit: contain;
  border-radius: var(--radius-s, 6px);
}

.brand__text { display: grid; min-width: 0; line-height: 1.2; }
/* Der Chorname steht in zwei Zeilen, darunter der Zusatz – zusammen ein
   kompakter Dreizeiler statt einer langen Zeile. Das lässt das Logo größer
   werden, ohne dass die Kopfzeile in die Breite läuft, und schafft Platz
   für die Navigation daneben. */
.brand__name {
  /* Block statt Grid: Dann bleibt das Leerzeichen zwischen den beiden Zeilen
     im Textinhalt erhalten (wichtig fürs Kopieren), ohne sichtbar zu werden. */
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.brand__name-line {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand__sub {
  display: none;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 22rem) {
  .brand { gap: 0.8125rem; }
  .brand__logo { width: 4.25rem; height: 4.25rem; }
  /* Die Zusatzzeile macht aus der Wortmarke den Dreizeiler. Sie erscheint
     schon ab 22rem (352 px), damit auch übliche Telefone sie zeigen; nur auf
     sehr schmalen Geräten bleiben es zwei Zeilen. */
  .brand__name { font-size: 1.0625rem; }
  .brand__sub { display: block; font-size: 0.625rem; letter-spacing: 0.16em; }
}
@media (min-width: 90rem) {
  .brand__logo { width: 4.5rem; height: 4.5rem; }
  .brand__name { font-size: 1.125rem; }
  .brand__sub { font-size: 0.6875rem; }
}

/* --- Waagerechte Navigation (ab 66rem) --- */
.nav-desktop { display: none; }

@media (min-width: 66rem) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    justify-self: end;
    max-width: 100%;
    padding: 0.25rem;
    border-radius: var(--radius-pill);
    background: rgb(var(--c-ink-rgb) / 0.24);
    border: 1px solid rgb(var(--c-cream-rgb) / 0.09);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .site-header.is-scrolled .nav-desktop {
    background: color-mix(in srgb, var(--c-stone-deep) 45%, transparent);
    border-color: rgb(var(--c-ink-rgb) / 0.07);
  }
}

/* Die Navigation trat früher zu weit zurück – man musste sie suchen. Sie
   steht jetzt in vollem Kontrast und etwas kräftiger im Schnitt; beim
   Überfahren und für den gerade sichtbaren Abschnitt kommt Gold dazu. Die
   Handlungsaufforderung rechts bleibt trotzdem unterscheidbar: Sie ist die
   einzige gefüllte goldene Fläche in der Kopfzeile. */
.nav-desktop__link {
  position: relative;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-cream);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-desktop__link { color: var(--c-brass-glow); }
.nav-desktop__link:hover { color: var(--c-cream); }
/* Auf hellem Grund braucht es den dunklen Messington – das helle Gold wäre
   auf Creme nicht mehr lesbar. Die gescrollte Kopfzeile ist etwas dunkler
   als Creme, deshalb hier die tiefste Stufe. */
.site-header.is-scrolled .nav-desktop__link { color: var(--c-brass-deep); }
.site-header.is-scrolled .nav-desktop__link:hover { color: var(--c-ink); }

/* Der gerade sichtbare Abschnitt bekommt zusätzlich eine Fläche – bei
   durchgehend goldener Schrift wäre die Farbe allein kein Unterschied mehr. */
.nav-desktop__link.is-active {
  background: rgb(var(--c-brass-glow-rgb) / 0.18);
  color: var(--c-brass-glow);
}
.site-header.is-scrolled .nav-desktop__link.is-active {
  background: rgb(var(--c-brass-rgb) / 0.16);
  color: var(--c-brass-deep);
}

@media (min-width: 90rem) {
  .nav-desktop { padding: 0.3125rem; }
  .nav-desktop__link { padding: 0.5rem 0.9375rem; font-size: 0.9375rem; }
}

/* --- Aktionen rechts ---
   Der Handlungsaufruf erscheint erst, wenn die Kopfzeile ihn ohne Gedränge
   trägt. Bis dahin steht die Navigation rechts (statt in einer optisch
   schiefen Mitte), ab dann rückt sie in die Mitte.                        */
.site-header__actions { display: flex; align-items: center; gap: 0.75rem; }

.header__cta { display: none; }
@media (min-width: 82rem) {
  .header__cta { display: inline-flex; min-height: 2.75rem; padding-inline: 1.375rem; }
  .nav-desktop { justify-self: center; }
}

/* Kopfzeile auf Unterseiten: dauerhaft auf hellem Grund. Dort gibt es keine
   waagerechte Navigation; ohne diese Regel rutschte die Schaltfläche in die
   mittlere, dehnbare Rasterspalte und lief über die halbe Seitenbreite. */
.site-header--solid::before { opacity: 1; }
.site-header--solid .site-header__inner {
  display: flex;
  justify-content: space-between;
}

/* --- Menüschalter --- */
.nav-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgb(var(--c-cream-rgb) / 0.24);
  color: var(--c-cream);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-scrolled .nav-toggle { border-color: rgb(var(--c-ink-rgb) / 0.16); color: var(--c-ink); }
.nav-toggle:hover { border-color: currentColor; }
@media (min-width: 66rem) { .nav-toggle { display: none; } }

.nav-toggle__bars { display: grid; gap: 5px; width: 1.125rem; }
.nav-toggle__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), width var(--dur) var(--ease);
}
.nav-toggle__bars span:nth-child(2) { width: 70%; margin-inline-start: auto; }
body.nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
body.nav-open .nav-toggle { color: var(--c-cream); border-color: rgb(var(--c-cream-rgb) / 0.3); }

/* --- Mobiles Overlay-Menü ---
   Wächst mit dem Inhalt und wird bei Bedarf scrollbar, damit auf niedrigen
   Displays kein Eintrag abgeschnitten wird.                              */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-m);
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-forest);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
/* Ohne Lichtschein und ohne Muster: das Menü ist eine Bedienoberfläche,
   keine Bühne. Ein ruhiger Grund lässt die Einträge deutlicher wirken. */
body.nav-open .nav-drawer {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.nav-drawer__list { position: relative; display: grid; }
.nav-drawer__item {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 400ms var(--ease-out-soft), transform 400ms var(--ease-out-soft);
}
body.nav-open .nav-drawer__item {
  opacity: 1;
  transform: none;
  transition-delay: var(--d, 0ms);
}

.nav-drawer__link {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  min-height: 3.25rem;
  padding-block: 0.5rem;
  border-block-end: 1px solid rgb(var(--c-cream-rgb) / 0.09);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6.5vw, 2.125rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--c-cream);
  transition: color var(--dur) var(--ease), padding-inline-start var(--dur) var(--ease);
}
.nav-drawer__link:hover,
.nav-drawer__link.is-active { color: var(--c-brass-light); padding-inline-start: 0.375rem; }
/* Die Nummern sind reine Orientierung – sie stehen deshalb zurückhaltend
   im zweiten Akzent und nicht in Messing. */
.nav-drawer__num {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--c-bark-light);
  opacity: 0.55;
}
.nav-drawer__foot {
  position: relative;
  display: grid;
  gap: 0.875rem;
  justify-items: start;
  color: rgb(var(--c-cream-rgb) / 0.72);
  font-size: var(--fs-small);
}
/* Im Menü tragen nur zwei Dinge Messing: der aktive Eintrag („Sie sind
   hier“) und die Schaltfläche. Die E-Mail-Adresse ist als Verweis über die
   Unterstreichung eindeutig genug. */
.nav-drawer__foot a:not(.btn) {
  color: var(--c-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgb(var(--c-cream-rgb) / 0.4);
}

body.nav-open { overflow: hidden; }

/* ------------------------------------------------------------- Lightbox ---- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 2rem);
  /* Der Grund ist zu 94 % deckend – ein zusätzlicher Weichzeichner wäre
     dahinter ohnehin nicht zu sehen und kostet nur Rechenzeit. */
  background: rgba(38, 49, 42, 0.96);   /* tiefstes Waldgrün, fast deckend */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--c-cream); }
.lightbox__counter { font-size: var(--fs-small); letter-spacing: 0.12em; color: var(--c-brass-light); }
.lightbox__close {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgb(var(--c-cream-rgb) / 0.28);
  color: var(--c-cream);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox__close:hover { border-color: var(--c-brass-light); color: var(--c-brass-light); transform: rotate(90deg); }
.lightbox__close svg { width: 1.125rem; height: 1.125rem; }

.lightbox__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  min-height: 0;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--radius-m);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lightbox__nav {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 1px solid rgb(var(--c-cream-rgb) / 0.24);
  color: var(--c-cream);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lightbox__nav:hover { background: rgb(var(--c-brass-light-rgb) / 0.18); border-color: var(--c-brass-light); }
.lightbox__nav svg { width: 1.25rem; height: 1.25rem; }
.lightbox__caption {
  text-align: center;
  color: rgb(var(--c-cream-rgb) / 0.78);
  font-size: var(--fs-small);
  min-height: 1.5rem;
}

/* ------------------------------------------- Instrument-Grafiken (SVG) -----
   Die Strichstärke bleibt dank `non-scaling-stroke` in jeder Größe gleich
   fein – vom kleinen Badge bis zur großflächigen Hintergrundgrafik.        */

.instrument {
  width: 100%;
  height: auto;
  /* Zeichnungen sind erklärendes Beiwerk und stehen deshalb im zweiten
     Akzent. In Messing säßen allein im Chorbereich zehn goldene Grafiken. */
  color: var(--accent-soft);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.instrument path,
.instrument circle,
.instrument g {
  vector-effect: non-scaling-stroke;
}


/* ==========================================================================
   4. ABSCHNITTE
   ========================================================================== */

/* ============================================================== 1. HERO ====
   Mobile First: eine Spalte, Höhe wächst mit dem Inhalt. Ab 62rem stehen
   Überschrift und Einstiegstext nebeneinander. Es gibt bewusst keine feste
   Höhe und kein 100vh – der Bereich passt sich immer dem Inhalt an.      */

.hero {
  position: relative;
  width: 100%;
  /* Unten bewusst Luft: Begrüßung und Imagefilm haben denselben
     Hintergrund, deshalb trennt sie ein deutlicher Abstand plus die feine
     Linie am Anfang der folgenden Sektion. */
  padding-block: calc(var(--header-h) + clamp(2rem, 6vw, 4.5rem)) clamp(3rem, 8vw, 5.5rem);
  overflow: hidden;
  background-color: var(--c-forest);
  color: var(--c-cream);
  isolation: isolate;
}

/* Hintergrund: ein einziger, ruhiger Verlauf in warmem Taupe.
   Zwei Dinge sind hier bewusst geändert worden:
   1. Der Bereich ist insgesamt heller und wärmer als zuvor – er wirkt
      dadurch freundlicher und weniger wie eine eigene Website.
   2. Der Verlauf wird nach unten heller statt dunkler. So läuft der
      Kopfbereich auf den helleren Filmbereich zu, und der Übergang
      zu den hellen Inhaltsflächen entsteht schrittweise. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 55% at 80% 8%, rgb(var(--c-brass-light-rgb) / 0.09), transparent 62%),
    linear-gradient(176deg, #333f37 0%, #3d4b41 52%, #47564b 80%, #536355 100%);
}

/* Große, sehr zurückhaltende Instrumentgrafik als Hintergrundmotiv.
   Auf kleinen Displays ausgeblendet, dort ist der Platz zu knapp. */
.hero__ornament { display: none; }
@media (min-width: 48rem) {
  .hero__ornament {
    display: block;
    position: absolute;
    z-index: -1;
    inset-block-start: 8%;
    inset-inline-end: -6%;
    width: min(38rem, 60%);
    color: var(--c-bark-light);
    opacity: 0.06;
    transform: rotate(-9deg);
    pointer-events: none;
  }
}

.hero__inner { position: relative; }

.hero__content {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.hero__content > * { min-width: 0; }
@media (min-width: 62rem) {
  /* Editoriale Aufteilung: große Zeile links, Einstiegstext rechts. */
  .hero__content {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }
}

/* Überschrift, Einstiegssatz und Schaltfläche stehen jetzt in einer Spalte
   untereinander. Der Satz „Seit 1971 …“ schließt damit direkt an den
   Chornamen an, statt in einer eigenen Spalte daneben zu stehen. */
.hero__headline { display: grid; gap: 1rem; min-width: 0; }
.hero__headline .hero__lead { max-width: 32rem; }
.hero__headline .hero__actions { margin-block-start: 0.5rem; }

.hero__title {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  font-weight: 500;
  font-variation-settings: 'SOFT' 45, 'WONK' 1;
  max-width: 15ch;
}
.hero__title em {
  display: block;
  font-style: normal;
  color: var(--c-brass-light);
  font-weight: 600;
}

.hero__intro { display: grid; gap: 1.5rem; max-width: 34rem; }

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: rgb(var(--c-cream-rgb) / 0.8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* Auf sehr schmalen Displays füllen die Schaltflächen die Breite –
   große, sichere Tippflächen statt gequetschter Pillen. */
@media (max-width: 26rem) {
  .hero__actions .btn { flex: 1 1 100%; }
}

/* Hinweis auf den nächsten Auftritt.
   Er steht in der rechten Spalte – also unter der Schaltfläche „Nächste
   Termine“ in der Kopfzeile, mit der er inhaltlich zusammengehört. Vorher
   lag er unten links und damit über Kreuz zu ihr. Als abgesetzte Fläche
   ist er zugleich als eigene Einheit erkennbar, ohne der Überschrift den
   Rang abzulaufen: Beschriftung im zweiten Akzent, Betonung über das Datum. */
.hero__next {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 0.375rem;
  margin-block-start: clamp(1.75rem, 4vw, 2.5rem);
  padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid rgb(var(--c-cream-rgb) / 0.16);
  border-radius: var(--radius-m, 14px);
  background: rgb(var(--c-ink-rgb) / 0.22);
  font-size: var(--fs-small);
  color: rgb(var(--c-cream-rgb) / 0.72);
}
.hero__next-label {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-bark-light);
}
.hero__next-date { color: var(--c-cream); font-weight: 600; font-size: var(--fs-body); }
.hero__next-title { color: var(--c-cream); }
.hero__next-place { color: rgb(var(--c-cream-rgb) / 0.66); }

/* Der Weg von hier zum vollständigen Programm. Ohne ihn war die Fläche nur
   eine Auskunft; jetzt führt sie auch irgendwohin. Bewusst als schlichter
   Verweis und nicht als Schaltfläche – die eine Schaltfläche links soll
   die auffälligste im Begrüßungsbereich bleiben. */
.hero__next-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-block-start: 0.5rem;
  min-height: 2.75rem;
  color: var(--c-brass-glow);
  font-weight: 600;
  transition: color var(--dur) var(--ease);
}
.hero__next-link:hover { color: var(--c-cream); }

/* Besonderer Termin im Begrüßungsbereich – ein Jubiläum soll man sehen,
   ohne erst ins Programm zu scrollen. Er steht unter dem nächsten
   Auftritt, fällt aber trotzdem zuerst auf: Rot kommt sonst nirgends auf
   der Seite vor. */
.hero__highlight {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.25rem 1.125rem;
  border: 1px solid var(--c-ruby-light);
  border-inline-start-width: 4px;
  border-radius: var(--radius-m);
  background: rgb(var(--c-ruby-rgb) / 0.22);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero__highlight:hover {
  background: rgb(var(--c-ruby-rgb) / 0.32);
  border-color: var(--c-cream);
}
.hero__highlight-flag {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-ruby-light);
}
.hero__highlight-date { color: var(--c-cream); font-weight: 600; font-size: var(--fs-body); }
.hero__highlight-title { color: var(--c-cream); }
.hero__highlight-place { font-size: var(--fs-small); color: rgb(var(--c-cream-rgb) / 0.66); }
.hero__next-icon { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease); }
.hero__next-link:hover .hero__next-icon { transform: translateX(3px); }
/* Zwischen 48rem und 62rem steht der Hinweis noch über die volle Breite;
   dort ist die zweispaltige Auszeichnung platzsparender. Ab 62rem sitzt er
   in der schmalen rechten Spalte und wird wieder einspaltig. */
@media (min-width: 48rem) and (max-width: 61.999rem) {
  .hero__next {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 1.5rem;
  }
  .hero__next-label { grid-row: 1 / span 3; }
}
/* Die rechte Spalte als Einheit: nächster Auftritt, darunter die drei
   Zahlen. Sie steht am rechten Rand und damit auf derselben Achse wie
   „Nächste Termine“ in der Kopfzeile – was zusammengehört, steht
   untereinander. Der Abstand nach oben setzt sie ungefähr auf Höhe der
   ersten Überschriftenzeile: Die Überschrift bleibt das Erste, was man
   liest, die Spalte rechts das Zweite. */
.hero__aside { display: grid; gap: var(--space-s); align-content: start; }

@media (min-width: 62rem) {
  .hero__content { align-items: start; }
  /* Der Abstand nach oben entspricht der Auszeichnungszeile über der
     Überschrift. Dadurch beginnt die Fläche genau auf Höhe von
     „Willkommen“ – nachgemessen, nicht geschätzt. */
  .hero__aside {
    margin-block-start: 2.375rem;
    justify-self: end;
    inline-size: min(100%, 23rem);
  }
  .hero__next { margin-block-start: 0; }
}

/* Die beiden Termine nach dem nächsten – als schmale Zeilen unter dem
   Hauptdatum, abgesetzt durch eine feine Linie. Sie machen aus der Fläche
   einen kleinen Terminplan statt einer Einzelauskunft und füllen die
   Spalte, ohne etwas Fremdes hineinzuholen. */
.hero__next-more {
  display: grid;
  gap: 0.375rem;
  margin-block-start: 0.875rem;
  padding-block-start: 0.875rem;
  border-block-start: 1px solid rgb(var(--c-cream-rgb) / 0.14);
}
.hero__next-more-label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-bark-light);
}
.hero__next-row {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
}
.hero__next-row-date { color: var(--c-brass-glow); font-weight: 600; }
/* Der Ort steht mit dabei: Zwei Termine können denselben Titel tragen –
   „Musik zum Volkstrauertag“ an zwei Orten –, und ohne den Ort sähe das
   nach einem doppelten Eintrag aus. */
.hero__next-row-text { display: grid; gap: 0.0625rem; min-width: 0; }
.hero__next-row-title { color: rgb(var(--c-cream-rgb) / 0.85); }
.hero__next-row-place { font-size: var(--fs-meta); color: rgb(var(--c-cream-rgb) / 0.55); }

/* Gruppenfoto: breit, mit angedeutetem Bogen — eine Anspielung auf
   Kirchenfenster, ohne echte Gruppenfotos zu beschneiden.
   Das Seitenverhältnis wird mit der Bildschirmbreite flacher, die Höhe
   zusätzlich begrenzt, damit das Bild auf niedrigen Bildschirmen nicht
   den ganzen sichtbaren Bereich einnimmt. */
.hero__figure {
  position: relative;
  margin-block: clamp(2.25rem, 6vw, 4rem) 0;
  width: 100%;
}
/* Auf schmalen Displays steht das Gruppenfoto im Seitenverhältnis der
   Vorlage (empfohlen 16:9). Dadurch wird links und rechts nichts mehr
   abgeschnitten – vorher stand hier 4:3, wodurch von einem 16:9-Foto rund
   ein Viertel der Breite wegfiel und die äußeren Personen verloren gingen.
   Das Bild wird dadurch flacher; das ist der bewusste Tausch: lieber
   etwas kleiner als angeschnitten.

   Auch der Bogen ist auf Mobile flacher. Bei nur rund 190 Pixel Bildhöhe
   hätte ein 47 Pixel tiefer Radius die oberen Ecken samt Köpfen
   weggeschnitten. Ab Tablet, wo das Bild hoch genug ist, kommt die
   ausgeprägte Bogenform zurück. */
.hero__figure .media {
  aspect-ratio: 16 / 9;
  /* Hier lag die Ursache dafür, dass das Foto aus der Mitte gerückt wirkte:
     Sobald die Höhenbegrenzung greift – bei flachen Fenstern also regelmäßig –
     verringert `aspect-ratio` die Breite entsprechend mit. Der Kasten wurde
     dadurch schmaler als der Inhaltsbereich und blieb als gewöhnlicher Block
     linksbündig stehen. `margin-inline: auto` hält ihn in jedem Fall mittig. */
  margin-inline: auto;
  max-block-size: 72svh;
  border-end-start-radius: var(--radius-m);
  border-end-end-radius: var(--radius-m);
  border-start-start-radius: 1.25rem;
  border-start-end-radius: 1.25rem;
  box-shadow: var(--shadow-m);
}
@media (min-width: 48rem) {
  .hero__figure .media {
    box-shadow: var(--shadow-l);
    border-start-start-radius: clamp(3rem, 10vw, 8rem);
    border-start-end-radius: clamp(3rem, 10vw, 8rem);
  }
}
/* Früher stand hier ab 75rem zusätzlich 21:9. Aus einer 16:9-Vorlage schnitt
   das oben und unten je ein Sechstel weg – die Gruppe saß dadurch angeschnitten
   im Rahmen und wirkte aus der Mitte gerückt. Jetzt gilt überall dasselbe
   Verhältnis wie bei der empfohlenen Vorlage; begrenzt wird die Höhe nur noch
   über max-block-size, und der Bildausschnitt bleibt in beiden Achsen mittig. */

/* Der zweite, goldene Rahmen um das Gruppenfoto ist entfallen: Er war reine
   Dekoration, hat die Bogenform doppelt nachgezeichnet und im Kopfbereich
   ein weiteres goldenes Element gesetzt. Die Bogenform des Bildes selbst
   bleibt erhalten. */

.hero__figcaption {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 0.3125rem 0.875rem;
  border-radius: var(--radius-pill);
  background: rgba(38, 49, 42, 0.72);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  color: rgb(var(--c-cream-rgb) / 0.66);
  white-space: nowrap;
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 48rem) { .hero__figcaption { font-size: 0.75rem; } }

/* ============================================================= 2. VIDEO ==== */

/* Der Filmbereich ist die Brücke zwischen dem dunklen Kopfbereich und den
   hellen Inhaltsflächen. Er trägt den tieferen der beiden hellen Steintöne
   und liegt damit zwischen Taupe und den helleren Flächen dahinter. */
/* Der Film steht jetzt hinter „Unser Chor“ (Steinton). Damit die beiden
   Abschnitte sich voneinander absetzen, trägt er den helleren Steinton –
   vorher war es umgekehrt, weil er über dem Programm lag. */
.video-section {
  background-color: var(--c-stone-light);
  overflow: hidden;
}
/* Zwischen Kopfbereich und Filmbereich braucht es keine Trennlinie – der
   Farbwechsel trennt bereits, eine helle Linie wäre nur eine Naht. */
.hero + .video-section { border-block-start: 0; }
.video-section__head {
  display: grid;
  gap: var(--space-s);
  justify-items: center;
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  margin-block-end: clamp(2.5rem, 5vw, 3.75rem);
}
.video-section__title {
  font-size: var(--fs-display-l);
  line-height: var(--lh-tight);
  font-weight: 500;
}
.video-section__lead { font-size: var(--fs-lead); color: var(--fg-muted); }

/* Ohne goldene Umrandung: Das Videobild bringt seine Kante selbst mit,
   ein zusätzlicher Rahmen wäre nur ein weiteres Highlight. */
.video-frame {
  position: relative;
  max-width: 68rem;
  margin-inline: auto;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-m);
  isolation: isolate;
}

/* Klick-zum-Laden: YouTube wird erst nach aktivem Klick geladen. */
.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: var(--c-forest);
  /* Der Bereich ist jetzt hell, das Vorschaubild dahinter aber dunkel:
     Die Beschriftung im Bild bleibt deshalb ausdrücklich in Creme. */
  color: var(--c-cream);
}
.video-facade img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out-soft), opacity var(--dur) var(--ease);
}
.video-facade:hover img { transform: scale(1.03); opacity: 0.85; }

/* Abspielknopf in der bekannten YouTube-Form: abgerundetes Rechteck im
   Seitenverhältnis 68:48 mit weißem Dreieck. Kein Kreis, keine Animation
   außer dem Aufhellen beim Darüberfahren.

   Das Rot ist bewusst das echte YouTube-Rot. Es ist das einzige rote
   Element der Seite und sitzt dort, wo eine Fremdmarke hingehört: auf dem
   Vorschaubild ihres eigenen Dienstes. Wer es lieber in der Farbwelt der
   Seite hätte, ersetzt --play-bg unten durch var(--c-brass) und
   --play-fg durch var(--c-forest). */
.video-facade__play {
  --play-bg: #f00;
  --play-fg: #fff;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(4rem, 6.5vw, 4.75rem);
  aspect-ratio: 68 / 48;
  /* YouTube rundet mit gleichmäßigen 12 px auf einer Fläche von 68 × 48.
     In Prozent ausgedrückt sind das 17,6 % der Breite und 25 % der Höhe –
     die beiden Werte standen hier vertauscht, wodurch die Ecken waagerecht
     gestreckt wurden und die Form eher wie eine Lutschtablette aussah als
     wie der bekannte Knopf. */
  border-radius: 17.6% / 25%;
  background: var(--play-bg);
  color: var(--play-fg);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.video-facade:hover .video-facade__play {
  --play-bg: #ff2323;
  transform: translate(-50%, -50%) scale(1.04);
}
.video-facade__play svg {
  /* Dreieck exakt in den Proportionen von YouTube: dort misst es 18 von
     68 Einheiten Breite, also gut ein Viertel der Knopfbreite. */
  width: 27%;
  height: auto;
  fill: currentColor;
  stroke: none;
}

.video-facade__label {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(to top, rgba(16, 22, 18, 0.85), transparent);
  text-align: start;
}
.video-facade__title { font-family: var(--font-display); font-size: clamp(1.125rem, 2.2vw, 1.5rem); font-weight: 600; }
.video-facade__hint { font-size: 0.8125rem; color: rgb(var(--c-cream-rgb) / 0.6); }

.video-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.video-section__note {
  max-width: 68rem;
  margin: 1.25rem auto 0;
  font-size: 0.8125rem;
  /* Auf dem Steinton reicht der hellste Grauton nicht mehr aus. */
  color: var(--fg-muted);
  text-align: center;
}
.video-section__note a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 3px; }
.video-section__note a:hover { color: var(--accent-text); }

.video-section__actions { display: flex; justify-content: center; margin-block-start: var(--space-m); }

/* ========================================================== 3. PROGRAMM ====
   Mobile First: jeder Termin ist eine eigenständige Karte. Ganz oben steht
   das Datum, darunter Titel, Uhrzeit und Ort – erst dann Beschreibung und
   Zusatzangaben. Ab 48rem tritt links eine Datumsspalte daneben.         */

.program { background-color: var(--c-stone-light); }

.program__head {
  display: grid;
  gap: var(--space-s);
  margin-block-end: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 56rem) {
  .program__head { grid-template-columns: 1fr auto; align-items: end; }
  .program__head .section-head { margin-block-end: 0; }
}

.program__list { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .program__list { gap: 1.25rem; } }

/* --- Terminkarte --- */
.event {
  position: relative;
  overflow: hidden;
  background: var(--c-cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}
.event__inner {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: var(--card-pad);
}

/* Kennzeichnung des nächsten Termins: ein durchgehendes Band über der
   Karte. Bewusst über die volle Breite, damit es als Beschriftung und
   nicht als anklickbare Schaltfläche gelesen wird. */
/* Bänder am Kopf einer Terminkarte. Meist nur eines; ein Termin kann aber
   zugleich der nächste und ein besonderer sein. */
.event__flags { display: flex; flex-wrap: wrap; }
.event__flag {
  padding: 0.625rem var(--card-pad);
  background: var(--c-brass);
  color: var(--c-ink);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.event__flag--highlight { background: var(--c-ruby); color: var(--c-cream); }
/* Stoßen zwei Bänder aneinander, bekommt das zweite weniger Innenabstand –
   sonst klafft in der Mitte eine Lücke. */
.event__flag + .event__flag { padding-inline-start: 1rem; }

/* Datum */
.event__when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
  color: var(--fg);
}
.event__day {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9vw, 3.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}
/* Der Monat stand früher auf jeder Karte in Messing – bei sechs Terminen
   sechsmal Gold. Jetzt trägt ihn der zweite Akzent; Messing bleibt allein
   dem nächsten Termin vorbehalten (siehe .event--next weiter unten). */
.event__month {
  font-size: clamp(1.125rem, 4vw, 1.375rem);
  font-weight: 600;
  color: var(--accent-soft);
}
.event__weekday {
  width: 100%;
  font-size: var(--fs-meta);
  color: var(--fg-subtle);
}

.event__title {
  font-size: clamp(1.375rem, 5vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  margin-block-start: 0.25rem;
}

/* Uhrzeit und Ort: die beiden wichtigsten Zusatzangaben, deutlich gesetzt */
.event__facts {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
}
.event__fact {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-body);
  color: var(--fg);
}
.event__fact dt { display: flex; flex: none; }
/* Uhr- und Ortssymbol: ein abgeschwächtes Messing. Kräftig genug, um
   die Terminkarten mit dem Rest der Seite zu verbinden, zu leise, um
   mit der Markierung des nächsten Termins zu konkurrieren. */
.event__fact dt svg {
  width: 1.25rem;
  height: 1.25rem;
  color: color-mix(in srgb, var(--accent) 72%, var(--fg-subtle));
}
.event__fact dd { margin: 0; font-weight: 500; }

.event__text {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  max-width: 46rem;
}

/* Zusatzangaben als schlichte Textzeile – keine Pillen, keine Rahmen,
   nichts, was nach einer Schaltfläche aussieht. */
.event__meta {
  padding-block-start: 0.625rem;
  border-block-start: 1px solid var(--line);
  width: 100%;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* Hervorgehobener nächster Termin – die einzige Karte im Programm, die
   Messing tragen darf. Genau dorthin soll der Blick zuerst gehen. */
.event--next {
  border-color: color-mix(in srgb, var(--c-brass) 50%, var(--line));
  box-shadow: var(--shadow-s);
}
.event--next .event__day,
.event--next .event__month { color: var(--accent-text); }

/* Besonderer Termin – ein Jubiläum sticht kräftiger heraus als der
   nächste Termin. Deutlicherer Rahmen, roter Anstrich beim Datum, ein
   Hauch Farbe in der Fläche. Steht ein Termin auf beiden Listen, gewinnt
   Rot: Es ist die seltenere Auszeichnung. */
.event--highlight {
  border-color: var(--c-ruby);
  border-width: 2px;
  box-shadow: var(--shadow-m);
  background:
    linear-gradient(to bottom, rgb(var(--c-ruby-rgb) / 0.05), rgb(var(--c-ruby-rgb) / 0));
}
.event--highlight .event__day,
.event--highlight .event__month,
.event--next.event--highlight .event__day,
.event--next.event--highlight .event__month { color: var(--c-ruby-ink); }

@media (min-width: 48rem) {
  /* Ab Tablet wandert das Datum in eine eigene Spalte links. */
  .event__inner {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 2.5rem);
    padding: var(--card-pad);
  }
  .event__when {
    grid-row: 1 / span 5;
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 0.125rem;
    padding-inline-end: clamp(1.5rem, 4vw, 2.5rem);
    border-inline-end: 1px solid var(--line);
  }
  .event__when > * { width: 100%; }
  .event__title,
  .event__facts,
  .event__text,
  .event__meta,
  .event__inner .btn { grid-column: 2; }
  .event__title { margin-block-start: 0; }
}

/* Beim Überfahren nimmt die Karte den Akzent auf – dieselbe Sprache wie
   bei den Mitgliederkarten und im Archiv. */
@media (hover: hover) {
  .event { transition: border-color var(--dur) var(--ease); }
  .event:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
}

.program__empty {
  padding: var(--space-l);
  border: 1px dashed var(--line);
  border-radius: var(--radius-l);
  text-align: center;
  color: var(--fg-muted);
}

/* =========================================================== 4. DER CHOR === */

/* Die hellen Abschnitte wechseln nur zwischen zwei benachbarten Werten
   derselben Steinfamilie. Die Verteilung ist symmetrisch: Der tiefere
   Steinton steht an den beiden Übergängen zu den dunklen Blöcken
   (Filmbereich vorn, Chor hinten), dazwischen liegt die hellere Variante.
   Der Unterschied ist klein genug, dass die Seite zusammenhängt, und groß
   genug, dass man beim Scrollen merkt, wo ein neuer Abschnitt beginnt. */
.choir { background-color: var(--c-stone); }

/* Zwei benannte Gruppen sorgen für die Gliederung. Auf schmalen Displays
   sind alle Karten gleich aufgebaut – nur die Beschriftung unterscheidet
   Leitung und Gruppe. Erst ab 62rem wird die Leitung zusätzlich als
   breitere Querkarte hervorgehoben. */

.choir__block + .choir__block { margin-block-start: clamp(2.5rem, 6vw, 4rem); }

.choir__group-title {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-soft);
  padding-block-end: 0.75rem;
  margin-block-end: 1.25rem;
  border-block-end: 1px solid var(--line);
}

.choir__lead,
.choir__group { display: grid; gap: 1.25rem; }

@media (min-width: 40rem) {
  .choir__group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  /* Die Leitungskarte bekommt hier die gleiche Kartenform wie die Gruppe.
     Ohne Breitenbegrenzung würde ihr Portrait über die volle Spaltenbreite
     laufen und die Karte unverhältnismäßig hoch machen. */
  .choir__lead { justify-items: center; }
  .member--lead { width: 100%; max-width: 22rem; }
}
@media (min-width: 62rem) {
  .choir__group { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
}

/* --- Kartenaufbau ---
   Mobile: Portrait links, Angaben rechts – beide mit demselben Abstand zum
   Kartenrand. Drei Dinge sind dadurch anders als zuvor:

   1. Das Bild klebt nicht mehr am Kartenrand, sondern ist wie der Text um
      --card-pad eingerückt. Alle drei Abstände – Rand→Bild, Rand→Text und
      Bild→Text – haben denselben Wert.
   2. Das Bild behält das empfohlene Hochformat 4:5 und wird damit gar nicht
      mehr beschnitten. Vorher lag es im Format 3:2 quer, wodurch von einem
      hochkanten Portrait weit über die Hälfte wegfiel.
   3. Die Karten bleiben flach: Zehn Karten mit einem Bild über die volle
      Breite würden den Abschnitt auf dem Handy sehr lang machen.        */
.member {
  display: grid;
  /* Auf sehr schmalen Displays bekommt die Textspalte den Vorrang, ab
     22rem darf das Portrait etwas größer werden. */
  grid-template-columns: minmax(5rem, 30%) minmax(0, 1fr);
  column-gap: var(--card-pad);
  row-gap: 0.5rem;
  align-items: start;
  padding: var(--card-pad);
}
@media (min-width: 22rem) {
  .member { grid-template-columns: minmax(6rem, 34%) minmax(0, 1fr); }
}
.member__media {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
}
.member__body {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 0;
}
.member__text {
  grid-column: 2;
  grid-row: 2;
  padding: 0;
  font-size: var(--fs-small);
  color: var(--fg-muted);
}
/* Die große Instrumentzeichnung ist auf Mobile nicht nötig – der Name des
   Instruments steht bereits im Text. Ab 40rem kommt sie wieder dazu. */
.member__instrument { display: none; }

.member__role {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.member__name {
  font-size: clamp(1.25rem, 4.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
}
/* Instrumentangabe auf schmalen Displays: eine eigenständige kleine
   Zeile mit Zeichnung, direkt unter dem Namen. Vorher stand hier nur
   grauer Text, der sich kaum von der Beschreibung darunter unterschied. */
.member__instrument-line {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-block-start: 0.125rem;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-soft);
}
.instrument--mini {
  width: 1.75rem;
  flex: none;
  color: var(--accent);
  stroke-width: 2;
}

@media (min-width: 40rem) {
  /* Ab Tablet trägt das Bild wieder die volle Kartenbreite und steht
     hochkant – dort ist genug Platz, es muss gar nicht beschnitten werden.
     Der Innenabstand wandert deshalb von der Karte in ihre Bestandteile. */
  .member {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    /* Zurücksetzen: In der Mobile-Ansicht steht hier `start`, damit Bild und
       Text oben bündig beginnen. In der Spaltenansicht müssen die Teile
       dagegen die volle Kartenbreite einnehmen – sonst endet der
       Instrumentfuß samt Trennlinie mitten in der Karte. */
    align-items: stretch;
  }
  /* flex: none, damit das Bild sein Seitenverhältnis behält, wenn die
     Karte für die Reihenhöhe gestreckt wird. */
  .member__media { border-radius: 0; flex: none; }
  .member__body {
    gap: 0.375rem;
    padding: var(--card-pad) var(--card-pad) 0.75rem;
  }
  .member__text { padding: 0 var(--card-pad) 1.25rem; }
  .member__instrument-line { display: none; }

  /* Der Instrumentfuß der Karte: ruhige Steinfläche statt goldenem Verlauf.
     Zehn Karten mit goldener Zeichnung und goldenem Schimmer waren der
     größte Einzelposten beim Messing auf dieser Seite. */
  .member__instrument {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    margin-block-start: auto;
    padding: 0.875rem var(--card-pad);
    border-block-start: 1px solid var(--line);
    background: color-mix(in srgb, var(--c-stone) 55%, transparent);
  }
  .member__instrument .instrument {
    width: clamp(4.5rem, 10vw, 6.25rem);
    flex: none;
    color: color-mix(in srgb, var(--accent-soft) 75%, transparent);
  }
  .member__instrument-text { display: grid; gap: 0.125rem; min-width: 0; }
  .member__instrument-name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .member__instrument-voice { font-size: var(--fs-meta); color: var(--fg-subtle); }
}

@media (min-width: 62rem) {
  /* Leitung als breite Querkarte: Bild links, Angaben rechts. */
  .choir__lead { justify-items: center; }
  .member--lead {
    width: 100%;
    max-width: 44rem;
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    border-color: color-mix(in srgb, var(--accent-soft) 40%, var(--line));
    box-shadow: var(--shadow-s);
  }
  .member--lead .member__media { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; height: 100%; }
  .member--lead .member__body { grid-column: 2; grid-row: 1; padding-block-end: 0; }
  .member--lead .member__text { grid-column: 2; grid-row: 2; padding-inline: var(--card-pad); }
  .member--lead .member__instrument { grid-column: 2; grid-row: 3; }
  .member--lead .member__name { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
}

/* ========================================================= 5. GESCHICHTE === */

.history {
  background-color: var(--c-forest);
  color: var(--c-cream);
  overflow: hidden;
}
/* Der frühere Lichtschein hinter der Überschrift ist entfallen. Er war die
   Ursache des gemeldeten Scroll-Effekts und trug als reine Dekoration
   nichts zur Orientierung bei. Der Abschnitt beginnt jetzt einfach mit
   einer ruhigen Fläche. */

.history__list { position: relative; display: grid; gap: clamp(2.75rem, 6vw, 4.5rem); }
.history__list::before {
  content: '';
  position: absolute;
  inset-block: 0.5rem;
  inset-inline-start: 0.4375rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--c-forest-line) 8%, var(--c-forest-line) 92%, transparent);
}
@media (min-width: 62rem) {
  .history__list::before { inset-inline-start: 50%; }
}

.era {
  position: relative;
  display: grid;
  gap: var(--space-s);
  padding-inline-start: var(--timeline-inset);
}
/* Einspaltig füllt das Bild die Spalte. Die Angabe steht hier und nicht
   weiter unten, damit die Media Query für die zweispaltige Darstellung sie
   überschreiben kann und nicht umgekehrt. */
.era__media { width: 100%; }
@media (min-width: 62rem) {
  .era {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--timeline-gap);
    row-gap: var(--space-s);
    align-items: center;
    padding-inline-start: 0;
  }

  /* Ungerade Einträge stehen links, gerade rechts. Beide Seiten folgen
     demselben Prinzip: Text und Bild rücken jeweils an die Zeitachse heran
     und halten dorthin exakt die halbe Spaltenlücke Abstand. Nach außen
     bleibt der Rest der Spalte als Luft. Vorher waren die Abstände
     ungleich – gemessen 40 px auf der rechten, 0 px auf der linken Seite,
     weil ein `width: 100%` die Außenabstände unwirksam machte und die
     linken Bilder bis an die Linie liefen.

     Der Text bleibt dabei immer linksbündig gesetzt; nur der Block als
     Ganzes wandert an die Achse. Aufzählungen lesen sich so am besten. */
  .era__body { justify-items: end; }
  .era__body > * { text-align: start; }
  .era:nth-child(even) .era__body { order: 2; justify-items: start; }

  .era__media { width: min(100%, 30rem); justify-self: start; }
  .era:nth-child(even) .era__media { justify-self: end; }
}

/* Punkt auf der Zeitachse. Er markiert die Position im Zeitstrahl und ist
   schlicht gefüllt. Früher füllte er sich erst beim Einblenden – seit die
   Chronikeinträge von Anfang an sichtbar sind, wäre er sonst dauerhaft
   ein leerer Ring geblieben. */
.era::before {
  content: '';
  position: absolute;
  inset-block-start: 0.625rem;
  inset-inline-start: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--c-bark-light);
  border: 1.5px solid var(--c-bark-light);
  z-index: 1;
}
@media (min-width: 62rem) {
  .era::before { inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); }
}

.era__body { position: relative; display: grid; gap: 1.25rem; justify-items: start; }
/* Das Jahrzehnt ist die oberste Ebene der Chronik. Seine Wirkung kommt aus
   der Größe, nicht aus der Farbe – der helle Sandsteinton reicht völlig und
   nimmt der Sektion sechs goldene Blickfänge. */
.era__decade {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--c-bark-light);
}

/* Einzelne Einträge eines Jahrzehnts. Bewusst schlicht gehalten: eine
   Zeitangabe, darunter die Stichpunkte. Genug Abstand dazwischen, damit
   die Chronik auf dem Handy nicht gedrängt wirkt. */
.era__events {
  display: grid;
  gap: 1.125rem;
  width: 100%;
  max-width: 34rem;
}
/* Innerhalb eines Jahrzehnts gilt: Jahreszahl zurückhaltend, Ereignis
   deutlich. Vorher standen alle 29 Jahreszahlen der Chronik in Messing –
   das war der größte Einzelposten an Gold auf der ganzen Seite. */
.era-event {
  position: relative;
  padding-inline-start: 1rem;
  border-inline-start: 1px solid var(--c-forest-line);
}
/* Kurzes Messingstück auf Höhe der Jahreszahl – der Zeitstrahl bekommt
   dadurch sichtbare Kerben, ohne durchgehend golden zu werden. */
.era-event::before {
  content: '';
  position: absolute;
  inset-inline-start: -1px;
  inset-block-start: 0.2em;
  width: 2px;
  height: 1.1em;
  background: var(--c-brass-light);
}
/* Die Jahreszahl ist der Anker, an dem sich das Auge durch die Chronik
   hangelt – und die einzige Stelle des Abschnitts mit Messing. Alles
   andere (Jahrzehnt, Ereignis, Stichpunkte) bleibt in Sand und Creme. */
.era-event__when {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Auf dem aufgehellten Waldgrün reicht --c-brass-light nicht mehr
     (4,09 : 1). Die hellere Stufe kommt auf 5,9 : 1. */
  color: var(--c-brass-glow);
}
.era-event__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  margin-block-start: 0.25rem;
  color: var(--c-cream);
}
.era-event__note,
.era-event__notes {
  margin-block-start: 0.25rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: rgb(var(--c-cream-rgb) / 0.78);
}
.era-event__notes { display: grid; gap: 0.25rem; }
.era-event__notes li { padding-inline-start: 1rem; position: relative; }
.era-event__notes li::before {
  content: '';
  position: absolute;
  inset-block-start: 0.6em;
  inset-inline-start: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-bark-light) 45%, transparent);
}
/* Der Bildkasten ist eine Schaltfläche: Ein Klick öffnet das Foto groß.
   Die Schaltfläche selbst bringt vom Browser Rahmen, Innenabstand und
   Hintergrund mit – die werden hier zurückgesetzt, damit sie sich wie das
   frühere reine Bild verhält. */
/* Platz eines fehlenden Fotos, als Bitte statt als Lücke. Der gestrichelte
   Rahmen sagt auf einen Blick: Hier ist noch nichts – und hier kann etwas
   hin. Gleiche Fläche wie ein Foto, damit der Zeitstrahl im Takt bleibt. */
.era__wanted {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.5rem;
  padding: var(--card-pad);
  min-block-size: 12rem;
  border: 1px dashed rgb(var(--c-cream-rgb) / 0.28);
  border-radius: var(--radius-m);
  background: rgb(var(--c-ink-rgb) / 0.18);
}
.era__wanted-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--c-cream);
}
.era__wanted-text {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: rgb(var(--c-cream-rgb) / 0.7);
}
.era__wanted-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.75rem;
  color: var(--c-brass-glow);
  font-weight: 600;
  font-size: var(--fs-small);
  transition: color var(--dur) var(--ease);
}
.era__wanted-link:hover { color: var(--c-cream); }
.era__wanted-icon { width: 1rem; height: 1rem; }

.era__media-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  box-shadow: var(--shadow-m);
}
/* Leichter Sepiaton: eine bewusste Ausnahme, weil er die historischen
   Aufnahmen als solche kennzeichnet. */
.era__media img { filter: sepia(0.3) contrast(1.02); }

/* Einordnung in das Posaunenwerk. Schmaler gesetzt als der Zeitstrahl,
   damit die Zeilen lesbar kurz bleiben, und etwas zurückgenommen im Ton:
   Es ist Hintergrund, nicht die Hauptsache. */
.history__werk {
  position: relative;
  display: grid;
  gap: var(--space-s);
  max-inline-size: 42rem;
  margin-inline: auto;
  margin-block-start: clamp(3rem, 6vw, 4.5rem);
  padding-block-start: clamp(2rem, 4vw, 3rem);
  border-block-start: 1px solid var(--c-forest-line);
  color: rgb(var(--c-cream-rgb) / 0.78);
}
.history__werk-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: var(--lh-tight);
  color: var(--c-cream);
}

.history__outro {
  position: relative;
  margin-block-start: clamp(3rem, 6vw, 4.5rem);
  padding-block-start: clamp(2rem, 4vw, 3rem);
  border-block-start: 1px solid var(--c-forest-line);
  text-align: center;
  color: rgb(var(--c-cream-rgb) / 0.66);
  font-size: var(--fs-small);
}

/* ===================================================== 6. KONTAKT / FOOTER =
   Drei klar getrennte Ebenen, die normal im Textfluss aufeinander folgen:
   1. Handlungsaufruf   2. Kontaktangaben in Spalten   3. Abschlusszeile
   Keine feste Höhe, keine Positionierung – der Fußbereich steht einfach
   am Ende des Inhalts und wächst mit ihm.                                 */

.contact {
  background-color: var(--c-forest-deep);
  color: var(--c-cream);
  padding-block: clamp(3rem, 7vw, 6rem) clamp(1.75rem, 3vw, 2.5rem);
}

/* --- 1. Handlungsaufruf --- */
/* Der Kasten selbst bleibt ruhig – goldener Rahmen und goldener Lichtschein
   sind entfallen. Das Messing sitzt hier allein auf der Schaltfläche, die
   den einzigen Handlungsaufruf des Abschnitts trägt. */
.contact__cta {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--c-forest-line);
  border-radius: var(--radius-l);
  background: var(--c-forest-soft);
}
/* Die rechte Spalte ist nach oben begrenzt. Vorher stand dort `auto`: Die
   Spalte wuchs mit ihrem Inhalt, und als der Hinweistext unter die
   Schaltflächen kam, blieb links so wenig übrig, dass die Überschrift
   Wort für Wort umbrach. */
@media (min-width: 56rem) {
  .contact__cta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    align-items: start;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
}
.contact__cta-title {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem);
  font-weight: 500;
  line-height: var(--lh-snug);
}
.contact__cta-text {
  color: rgb(var(--c-cream-rgb) / 0.72);
  font-size: var(--fs-small);
  margin-block-start: 0.625rem;
  max-width: 40rem;
}
.contact__cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
@media (max-width: 26rem) { .contact__cta-actions .btn { flex: 1 1 100%; } }

/* Hinweis unter den Schaltflächen: Ein Verweis, der das Mailprogramm
   öffnet, überrascht sonst. */
.contact__cta-hint {
  flex: 1 1 100%;
  font-size: var(--fs-small);
  color: rgb(var(--c-cream-rgb) / 0.6);
}

/* --- 2. Wortmarke, Proben und Kontakt ---
   Die Wortmarke steht frei, Proben und Kontakt dagegen als zwei abgesetzte
   Karten nebeneinander. So ist beim Scrollen sofort erkennbar, wo die
   Probenzeiten stehen und wo die Kontaktdaten – vorher waren es zwei
   gleich aussehende Textspalten.

   Mobile: alles untereinander. Ab 40rem stehen die beiden Karten
   nebeneinander, ab 68rem tritt die Wortmarke links daneben.            */
.contact__main {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.25rem);
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 40rem) {
  .contact__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
  .contact__main { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); }
}

.contact__block { display: grid; gap: 1rem; align-content: start; min-width: 0; }
@media (min-width: 40rem) {
  /* Die Identitätsspalte steht auf Tablet über der vollen Breite,
     damit Wortmarke und Claim nicht in eine schmale Säule gequetscht werden. */
  .contact__block--identity { grid-column: 1 / -1; }
}
@media (min-width: 68rem) {
  .contact__block--identity { grid-column: auto; align-self: stretch; }
}

/* Karte: bewusst zurückhaltend – nur eine leicht abgesetzte Fläche mit
   feiner Kontur. Zwei große, kräftige Kästen würden den Fußbereich
   dominieren, der ja bereits den Handlungsaufruf trägt. */
.contact__block--card {
  gap: 0.875rem;
  padding: var(--card-pad);
  border: 1px solid var(--c-forest-line);
  border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--c-forest-soft) 55%, transparent);
}

.contact__col-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-bark-light);
}
/* Derselbe kurze Messingstrich wie über den Abschnittsüberschriften. */
.contact__col-title::before {
  content: '';
  width: 1.25rem;
  height: 2px;
  flex: none;
  background: var(--accent);
  border-radius: 1px;
}

.contact__brand { display: inline-flex; align-items: center; gap: 0.75rem; }
.contact__brand .brand__logo { width: 3rem; height: 3rem; }
.contact__about {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgb(var(--c-cream-rgb) / 0.72);
  max-width: 30rem;
}

.contact__list {
  display: grid;
  gap: 0.5rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: rgb(var(--c-cream-rgb) / 0.76);
  font-style: normal;
}
.contact__list a { transition: color var(--dur) var(--ease); overflow-wrap: anywhere; }
.contact__list a:hover { color: var(--c-brass-light); }
.contact__list dt {
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--c-cream-rgb) / 0.6);
}
.contact__list dd { margin: 0 0 0.375rem; }
.contact__list dd:last-child { margin-block-end: 0; }
.contact__note {
  font-size: var(--fs-meta);
  line-height: 1.55;
  color: rgb(var(--c-cream-rgb) / 0.62);
  max-width: 26rem;
}

.social { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.social__link {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(var(--c-cream-rgb) / 0.18);
  border-radius: 50%;
  color: rgb(var(--c-cream-rgb) / 0.8);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.social__link:hover {
  color: var(--c-forest);
  background: var(--c-brass-light);
  border-color: var(--c-brass-light);
  transform: translateY(-3px);
}
.social__link svg { width: 1.25rem; height: 1.25rem; }

/* --- 3. Abschlusszeile --- */
.contact__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-start: 1.25rem;
  border-block-start: 1px solid rgb(var(--c-cream-rgb) / 0.12);
  font-size: var(--fs-meta);
  color: rgb(var(--c-cream-rgb) / 0.62);
}
.contact__legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.contact__legal a,
.contact__bottom .to-top,
.contact__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.contact__legal a { transition: color var(--dur) var(--ease); }
.contact__legal a:hover { color: var(--c-brass-light); }

/* ------------------------------------------- Sprungmarke zum Seitenanfang ---
   Sie schwebt unten rechts und ist auf jeder Höhe der Seite erreichbar. Weil
   sie das leistet, steht im Fußbereich kein zweiter „Nach oben“-Verweis mehr.
   Sichtbar wird sie erst nach dem Begrüßungsbereich – ganz oben wäre sie
   sinnlos. */
.to-top-float {
  position: fixed;
  inset-block-end: clamp(1rem, 3vw, 1.75rem);
  inset-inline-end: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--c-brass);
  color: var(--c-forest-deep);
  box-shadow: 0 6px 20px rgb(var(--c-ink-rgb) / 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition:
    opacity 260ms var(--ease),
    transform 260ms var(--ease),
    visibility 0s linear 260ms,
    background-color var(--dur) var(--ease);
}
.to-top-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.to-top-float:hover { background: var(--c-brass-light); }
.to-top-float:focus-visible { outline: 2px solid var(--c-cream); outline-offset: 3px; }
.to-top-float svg { width: 1.375rem; height: 1.375rem; }

@media (min-width: 48rem) {
  .to-top-float { width: 3.25rem; height: 3.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top-float { transition: opacity 1ms linear, visibility 0s; transform: none; }
}

/* ------------------------------------------------- Hinweis zum Datenschutz ---
   Kein Einwilligungsbanner: Es gibt nichts einzuwilligen. Deshalb versperrt
   der Hinweis auch nichts, sondern legt sich als schmaler Streifen unten an
   und lässt sich wegklicken. */
.privacy-note {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 120;
  padding: var(--space-s) var(--gutter) calc(var(--space-s) + env(safe-area-inset-bottom, 0px));
  background: var(--c-forest-deep);
  color: rgb(var(--c-cream-rgb) / 0.86);
  border-block-start: 1px solid var(--c-forest-line);
  box-shadow: 0 -8px 28px rgb(var(--c-ink-rgb) / 0.22);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.privacy-note.is-visible { opacity: 1; transform: translateY(0); }

.privacy-note__inner {
  display: grid;
  gap: var(--space-s);
  align-items: center;
  max-width: var(--wrap, 68rem);
  margin-inline: auto;
}
.privacy-note__text { font-size: var(--fs-small); line-height: 1.55; }
.privacy-note__text strong { color: var(--c-cream); }

.privacy-note__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.privacy-note__link {
  color: var(--c-brass-light);
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.privacy-note__link:hover { color: var(--c-brass-glow); }

@media (min-width: 48rem) {
  .privacy-note__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-m);
  }
}
/* Solange der Hinweis steht, weicht die Sprungmarke nach oben aus. */
.privacy-note.is-visible ~ .to-top-float,
body:has(.privacy-note.is-visible) .to-top-float {
  inset-block-end: calc(clamp(1rem, 3vw, 1.75rem) + 6.5rem);
}
@media (min-width: 48rem) {
  body:has(.privacy-note.is-visible) .to-top-float {
    inset-block-end: calc(clamp(1rem, 3vw, 1.75rem) + 5rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .privacy-note { transition: opacity 1ms linear; transform: none; }
}

/* ======================================================= Rechtstext-Seiten = */

.legal { padding-block: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)) var(--space-2xl); }
.legal__title { font-size: var(--fs-display-l); line-height: var(--lh-tight); margin-block-end: var(--space-s); }
.legal__body { display: grid; gap: var(--space-m); max-width: var(--wrap-narrow); }
.legal__body h2 { font-size: var(--fs-display-s); margin-block-start: var(--space-s); }
.legal__body h3 { font-size: 1.125rem; font-family: var(--font-sans); font-weight: 600; }
.legal__body p, .legal__body li { color: var(--fg-muted); }
.legal__body ul { display: grid; gap: 0.5rem; padding-inline-start: 1.25rem; list-style: disc; }
.legal__body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.legal__note {
  padding: var(--space-s) var(--space-m);
  border-inline-start: 3px solid var(--c-brass);
  background: var(--c-stone);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  font-size: var(--fs-small);
}