/* Bunte Liga Göttingen – Styles
   Schwarz-weiß wie das Logo, oben und unten petrolgrün (Einstieg, Seitenköpfe, Kopfzeile, Menü; Abschluss und Fußzeile),
   dazwischen weiße und hellgraue Inhaltsflächen.
   Farbe tragen nur echte Fotos und die kleinen Teampunkte. Eine Schrift (Archivo, lokal), Überschriften schmal in
   Versalien. Bewegung nur mit html.motion (siehe main.js, ball.js). */

/* ---------- Schrift (lokal, keine Anfragen an fremde Server) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --schwarz: #0A0A0A;
  --weiss: #FFFFFF;
  /* Petrolgrün für Bühne oben und Fußzeile (Vorlage des Nutzers, 05.10.2026; vorher Dunkelgrün #113222) */
  --gruen: #0F5156;
  --gruen-rgb: 15 81 86;
  /* Dunkleres Petrol nur für Verläufe über Fotos: so dunkel wie früher das Dunkelgrün, damit kleine Schrift auf
     hellen Bildstellen lesbar bleibt (Petrol selbst ist dreimal so hell) */
  --tief-rgb: 8 45 49;

  /* Teamfarben: nur als kleiner Punkt an den Teamkarten */
  --red: #E8554E;
  --orange: #F39A3B;
  --yellow: #F5C842;
  --green: #8CC63F;
  --blue: #3FA9E0;
  --violet: #9B7BDB;
  --pink: #E963A0;
  --teal: #2EB8A0;
  --coral: #FF7A45;

  /* Form und Raster */
  --r: 18px;        /* Bilder, Karten */
  --r-lg: 28px;     /* große Flächen */
  --r-sm: 10px;
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --container: 1240px;
  --header-h: 72px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 450ms;
  --dur-media: 600ms;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Hell (Standard): weiße Flächen, schwarze Schrift, schwarze Knöpfe */
:root, .hell {
  --bg: var(--weiss);
  --surface-1: #F2F2F2;
  --surface-2: #E8E8E8;
  --text: var(--schwarz);
  --text-2: #363636;
  --text-3: #5E5E5E;          /* 6,6:1 auf Weiß, 6:1 auf #F2F2F2 */
  --line: rgb(0 0 0 / 0.12);
  --line-strong: rgb(0 0 0 / 0.32);
  --action: var(--schwarz);
  --action-hover: #2E2E2E;
  --on-action: var(--weiss);
  --scrim: 0 0 0;
}
/* Dunkel: die schwarze Bühne */
.dunkel {
  --bg: var(--schwarz);
  --surface-1: #161616;
  --surface-2: #212121;
  --text: var(--weiss);
  --text-2: #D0D0D0;
  --text-3: #9E9E9E;          /* 7,3:1 auf #0A0A0A */
  --line: rgb(255 255 255 / 0.14);
  --line-strong: rgb(255 255 255 / 0.34);
  --action: var(--weiss);
  --action-hover: #E0E0E0;
  --on-action: var(--schwarz);
  color: var(--text-2);
  background-color: var(--bg);
}
/* Bühne oben und unten: Petrolgrün. Text-2 und Text-3 heller als auf Schwarz und weiter gespreizt:
   7,1:1 und 5,4:1 auf --gruen, Text-3 4,6:1 auf --surface-1 */
.hero-home.dunkel, .page-hero.dunkel, .join-band.dunkel, .site-footer.dunkel {
  --bg: var(--gruen); --surface-1: #1D5B60; --surface-2: #2C666A; --text-2: #E4E4E4; --text-3: #C8C8C8;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--gruen);   /* oben und unten grün, auch beim Überziehen beim Scrollen */
}
html.motion { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font: 400 clamp(1rem, 0.97rem + 0.15vw, 1.0625rem)/1.6 var(--font);
  font-stretch: 100%;
  color: var(--text-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
main { background: var(--bg); }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
strong { font-weight: 650; color: var(--text); }
h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: manual;
}
h1 {
  font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.75rem);
  font-weight: 850;
  font-stretch: 68%;
  line-height: 0.92;
}
h2 {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  font-weight: 850;
  font-stretch: 70%;
  line-height: 0.95;
}
h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
  font-weight: 800;
  font-stretch: 80%;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
main:focus { outline: none; }
::selection { background: var(--text); color: var(--bg); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  padding: var(--s-3) var(--s-5);
  font-weight: 700; color: var(--weiss); background: var(--schwarz);
  border: 2px solid var(--weiss); border-radius: 999px;
}
.skip-link:focus { top: var(--s-4); }

.icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Typo-Bausteine ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 0.6em;
  margin: 0 0 var(--s-3);
  font-size: 0.8125rem; font-weight: 700; font-stretch: 88%;
  line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow::before { content: ""; width: 14px; height: 2px; flex: none; background: currentColor; }
.lead {
  font-size: clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 46ch;
}
.big {
  font-size: clamp(1.2rem, 1.06rem + 0.65vw, 1.5rem);
  line-height: 1.45;
  font-weight: 500;
  color: var(--text);
  max-width: 40ch;
}
.chip {
  display: inline-flex; align-items: center; justify-self: start; align-self: start;
  padding: 0.4em 0.75em;
  font-size: 0.75rem; font-weight: 700; font-stretch: 88%; line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

/* ---------- Buttons und Links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0 1.5em;
  font: 700 0.9375rem/1 var(--font); font-stretch: 88%;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  border: 2px solid transparent; border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.btn .icon { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }
.btn-primary { color: var(--on-action); background: var(--action); }
.btn-primary:hover { background: var(--action-hover); }
.btn-secondary { color: var(--text); border-color: var(--line-strong); background: transparent; }
.btn-secondary:hover { border-color: var(--text); }
.btn-sm { min-height: 40px; padding: 0 1.1em; font-size: 0.875rem; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 44px;
  font-size: 0.8125rem; font-weight: 700; font-stretch: 88%; line-height: 1;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  color: var(--text);
}
.link-arrow .icon { transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- Kopfzeile ---------- */
/* Oben über der grünen Bühne: durchsichtig, weiße Schrift. Sobald gescrollt wird (.is-solid): weiß mit schwarzer
   Schrift. Hintergrund nur auf Pseudo-Elementen: Ein transform/filter am Header würde das mobile Menü einsperren. */
.site-header {
  --bg: var(--gruen);
  --text: var(--weiss);
  --text-2: #E4E4E4;
  --text-3: #C8C8C8;
  --line-strong: rgb(255 255 255 / 0.34);
  --action: var(--weiss);
  --action-hover: #E0E0E0;
  --on-action: var(--schwarz);
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  color: var(--text);
  transition: transform 300ms var(--ease-out);
}
.site-header.is-solid {
  --bg: var(--weiss);
  --text: var(--schwarz);
  --text-2: #363636;
  --text-3: #5E5E5E;
  --line-strong: rgb(0 0 0 / 0.32);
  --action: var(--schwarz);
  --action-hover: #2E2E2E;
  --on-action: var(--weiss);
}
.site-header::before,
.site-header::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
/* Kein Überblenden: Hintergrund, Logo und Schriftfarbe wechseln im selben Moment (sonst kurz schwarz auf schwarz) */
/* Verlauf für Lesbarkeit über Fotos im Seitenkopf */
.site-header::before { inset: 0 0 -48px; background: linear-gradient(rgb(var(--tief-rgb) / 0.8), rgb(var(--tief-rgb) / 0.5) 55%, rgb(var(--tief-rgb) / 0)); }
.page-index .site-header::before { opacity: 0; }
.site-header::after {
  opacity: 0;
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.08);
}
.site-header.is-solid::before { opacity: 0; }
.site-header.is-solid::after { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }
.no-js .site-header { position: absolute; }
body.nav-open .site-header { transform: none; }
body.nav-open { overflow: hidden; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: min(100% - 2 * var(--gutter), var(--container)); height: 100%; margin-inline: auto;
}
.brand { position: relative; z-index: 2; display: block; border-radius: var(--r-sm); }
.brand img {
  width: auto; height: 34px;
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}
.brand .logo-hell { display: none; }
.site-header.is-solid .brand .logo-dunkel { display: none; }
.site-header.is-solid .brand .logo-hell { display: block; }
.site-header.is-compact .brand img { transform: scale(0.88); }

.site-nav { display: flex; align-items: center; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a:not(.btn) {
  position: relative; display: inline-flex; align-items: center;
  font-weight: 700; font-stretch: 88%; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: var(--text-2);
  transition: color var(--dur-1);
}
.nav-list a:not(.btn):hover,
.nav-list a[aria-current="page"]:not(.btn) { color: var(--text); }
.site-header:not(.is-solid) .nav-list a:not(.btn) { color: var(--text); }
.nav-toggle {
  position: relative; z-index: 2;
  display: none; align-items: center; gap: 0.6rem;
  min-height: 44px; padding: 0 1rem;
  font: 700 0.875rem/1 var(--font); font-stretch: 88%; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text); background: transparent;
  border: 1px solid var(--line-strong); border-radius: 999px;
  cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 18px; height: 2px; background: currentColor;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Handy und Tablet: Menü als petrolgrüne Vollbild-Ebene (nur mit JS) */
@media (max-width: 959.98px) {
  body.nav-open .site-header { --text: var(--weiss); --text-2: #E4E4E4; --text-3: #C8C8C8; --line-strong: rgb(255 255 255 / 0.34);
    --action: var(--weiss); --action-hover: #E0E0E0; --on-action: var(--schwarz); }
  body.nav-open .site-header::after, body.nav-open .site-header::before { opacity: 0; }
  body.nav-open .site-header .brand .logo-dunkel { display: block; }
  body.nav-open .site-header .brand .logo-hell { display: none; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav-list {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column;
    padding: calc(var(--header-h) + var(--s-5)) var(--gutter) var(--s-6);
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--gruen);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  }
  .js .nav-list.is-open {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out);
  }
  .js .nav-list li { border-bottom: 1px solid rgb(255 255 255 / 0.14); }
  .js .nav-list a:not(.btn) {
    display: flex; justify-content: space-between; width: 100%;
    min-height: 68px;
    font-size: 2rem; font-weight: 850; font-stretch: 70%; letter-spacing: 0.01em;
    color: var(--weiss);
  }
  .js .nav-list a:not(.btn)::after {
    content: ""; width: 10px; height: 10px; margin-right: 4px;
    border-top: 2px solid var(--text-3); border-right: 2px solid var(--text-3);
    transform: rotate(45deg);
  }
  .js .nav-list a[aria-current="page"]:not(.btn) { text-decoration: underline 3px; text-underline-offset: 0.2em; }
  .js .nav-list a[aria-current="page"]:not(.btn)::after { border-color: var(--weiss); }
  .js .nav-cta { margin-top: auto; padding-top: var(--s-6); border-bottom: 0 !important; }
  .js .nav-cta .btn { width: 100%; min-height: 56px; font-size: 1rem; color: var(--schwarz); background: var(--weiss); }
  /* Ohne JS: einfache Liste unter dem Logo */
  .no-js .site-header { height: auto; }
  .no-js .header-inner { flex-wrap: wrap; padding-block: var(--s-3); }
  .no-js .nav-list { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
  .no-js .nav-list a:not(.btn) { min-height: 40px; font-size: 0.875rem; }
  /* Die umbrechende Linkliste ist höher als die Kopfzeile: in den Fluss nehmen, sonst liegt sie über der Überschrift */
  .no-js .site-header { position: relative; background: var(--gruen); }
  .no-js .hero-home, .no-js .page-hero { padding-top: var(--s-6); }
}
@media (min-width: 960px) {
  .nav-list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
  .nav-list a:not(.btn) { min-height: 44px; font-size: 0.875rem; }
  .nav-list a:not(.btn)::after {
    content: ""; position: absolute; inset: auto 0 8px; height: 2px;
    background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .nav-list a:not(.btn):hover::after,
  .nav-list a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); }
  .brand img { height: 40px; }
}
@media (min-width: 960px) and (max-width: 1139.98px) {
  .nav-cta { display: none; }
}

/* ---------- Einstieg der Startseite: schwarze Bühne mit Ball ---------- */
.hero-home {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: max(620px, min(100svh, 1000px));
  padding: calc(var(--header-h) + clamp(1.5rem, 5vh, 3.5rem)) 0 clamp(4.5rem, 10vh, 7rem);
}
.hero-content { position: relative; z-index: 3; }
.hero-title {
  margin: 0 0 var(--s-6);
  /* „Fußball für alle,“ ist 7,6 em breit und darf nie umbrechen (sonst stoßen die Ü-Punkte in die Zeile darüber) */
  font-size: clamp(2.25rem, min(1rem + 7.4vw, (100vw - 2 * var(--gutter)) / 7.8), 8.25rem);
  font-weight: 900; font-stretch: 64%; line-height: 0.86; letter-spacing: -0.005em;
}
/* Maske für das Hochschieben; oben Platz für Umlaut-Punkte */
.zeile { display: block; overflow: hidden; overflow: clip; padding-block: 0.12em 0.05em; margin-block: -0.12em -0.05em; }
.zeile > span { display: inline-block; }
.zeile-2 { padding-left: 18%; }
.zeile-3 > span { color: transparent; -webkit-text-stroke: max(1.5px, 0.018em) var(--text); }
@supports not (-webkit-text-stroke: 1px black) { .zeile-3 > span { color: var(--text); } }
.hero-kicker { margin-bottom: var(--s-5); font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.9375rem); color: var(--text); }
@media (max-width: 479.98px) { .hero-kicker { letter-spacing: 0.08em; } }
/* Kleine Schrift im Einstieg: schwarzer Schein, damit Feldlinien dahinter nicht stören (wie der Ring um den Ball) */
.hero-kicker, .hero-lead { text-shadow: 0 0 0.4em var(--bg), 0 0 0.15em var(--bg); }
.hero-unten { display: grid; gap: var(--s-5); max-width: 34rem; }
.hero-lead { margin: 0; color: var(--text-2); }
@media (forced-colors: active) { .zeile-3 > span { color: CanvasText; -webkit-text-stroke: 0; } }

/* Linienfarbe: Weiß, nach hinten in die Bühnenfarbe gemischt (deckend, damit Überlappungen nicht heller werden);
   ohne color-mix bleiben die Grauwerte aus dem SVG */
.feld .feld-s0 { stop-color: color-mix(in srgb, var(--weiss) 90%, var(--bg)); }
.feld .feld-s1 { stop-color: color-mix(in srgb, var(--weiss) 60%, var(--bg)); }
.feld .feld-s2 { stop-color: color-mix(in srgb, var(--weiss) 30%, var(--bg)); }
/* Spielfeld (website_art.py → feld_svg()): weiße Linien hinter Schrift und Ball. Die SVG-Box ist genau die Box des
   Balls, die Linien ragen weit darüber hinaus (abgeschnitten vom Einstieg). So liegt der Anstoßpunkt bei jeder Breite
   unter dem Ball. */
.feld { position: absolute; z-index: 1; aspect-ratio: 1; overflow: visible; pointer-events: none; }

/* Ball: fliegt beim Laden ein, dreht sich (ball.js) und rollt beim Scrollen mit. Liegt vor der Schrift;
   ein schwarzer Ring (.ball-halo) trennt ihn von weißen Buchstaben. */
.ball-bahn {
  position: absolute; z-index: 4;
  right: -7vw;
  top: calc(var(--header-h) + 1vh);
  width: clamp(150px, 40vw, 240px); aspect-ratio: 1;
  pointer-events: none;
}
.ball-flug { width: 100%; height: 100%; }
.ball { width: 100%; height: 100%; overflow: visible; }
.ball .b5 { fill: var(--schwarz); stroke: var(--schwarz); stroke-width: 1.6; stroke-linejoin: round; }
.ball .b6 { fill: var(--weiss); stroke: var(--schwarz); stroke-width: 1.6; stroke-linejoin: round; }
.ball-grund { fill: var(--weiss); }
.ball-rand { fill: none; stroke: var(--weiss); stroke-width: 3; }   /* weißer Umriss auf Schwarz, Halo trennt von Schrift */
.ball-halo { fill: none; stroke: var(--bg); stroke-width: 7; }   /* Ring in der Farbe der Bühne */
/* Unter 768 px steht der Ball im Fluss über der Überschrift und kann keine Buchstaben verdecken */
@media (max-width: 767.98px) {
  .hero-home { grid-template-rows: auto 1fr; align-items: end; padding-top: var(--header-h); }
  .ball-bahn {
    position: relative; top: auto; right: auto; grid-row: 1; justify-self: end;
    width: clamp(120px, 34vw, 220px); margin: 0 -6vw var(--s-4) 0;
  }
  .hero-content { grid-row: 2; }
  /* dieselbe Stelle wie der Ball im Fluss: oben im Einstieg (Abstand = padding-top), rechts angeschnitten */
  .feld { top: var(--header-h); right: -6vw; width: clamp(120px, 34vw, 220px); }
  .no-js .feld { top: var(--s-6); }
}
@media (min-width: 768px) {
  .ball-bahn, .feld { top: calc(var(--header-h) + 2vh); right: -4vw; width: clamp(200px, 28vw, 300px); }
  .zeile-2 { padding-left: 22%; }
}
@media (min-width: 1140px) {
  .ball-bahn, .feld {
    --ball: clamp(260px, 25vw, 400px);
    top: 47%; right: max(1vw, calc((100vw - var(--container)) / 2 - 3vw));
    width: var(--ball); margin-top: calc(-0.5 * var(--ball));
  }
}

.scroll-cue {
  position: absolute; left: 50%; bottom: var(--s-4); z-index: 4;
  display: grid; place-items: center; width: 44px; height: 44px; margin-left: -22px;
  color: var(--schwarz); background: var(--weiss); border-radius: 50%;
}
.scroll-cue .icon { width: 24px; height: 24px; }

/* ---------- Seitenkopf (Unterseiten): schwarz mit dezent farbigem Bild ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-height: clamp(400px, 60svh, 600px);
  padding: calc(var(--header-h) + var(--s-7)) 0 var(--s-8);
}
.page-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.page-hero-media img {
  width: 100%; height: 120%; max-width: none; object-fit: cover; object-position: var(--pos, 65% 40%);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(var(--tief-rgb) / 0.97) 0%, rgb(var(--tief-rgb) / 0.72) 38%, rgb(var(--tief-rgb) / 0.1) 80%);
}
.page-hero h1 { margin-bottom: var(--s-4); max-width: 14em; font-size: clamp(2.75rem, 1.5rem + 5vw, 6rem); font-weight: 900; font-stretch: 64%; line-height: 0.88; }
.page-hero .lead { margin: 0; color: var(--text); }
/* Knöpfe unter der Einleitung (Mach mit) mit Abstand wie ein Absatz, wie bei „Wir suchen dich.“ auf der Startseite */
.page-hero .lead + .actions { margin-top: var(--s-6); }
.page-hero-plain { min-height: 0; padding: calc(var(--header-h) + var(--s-8)) 0 var(--s-7); }
.page-hero-plain::before { display: none; }
/* Seitenkopf mit echtem Foto (Teams): Personen frei sichtbar, Überschrift darunter; unten läuft das Foto über dem Rasen
   ins Grün aus. Ab 960 px liegt die durchsichtige Kopfzeile über Himmel und Bäumen, darunter beginnt das Foto unter ihr. */
.page-hero-foto { display: block; min-height: 0; padding: var(--header-h) 0 var(--s-8); }
.page-hero-foto::before { display: none; }
.page-hero-foto .page-hero-media { position: relative; inset: auto; z-index: 0; display: block; width: 100%; aspect-ratio: 2 / 1; max-height: 72svh; }
.page-hero-foto .page-hero-media img { height: 100%; object-position: 50% 80%; filter: saturate(0.55) contrast(1.04) brightness(0.9); }
/* Filter wie die anderen Seitenköpfe (Nutzer, 05.10.2026): Farbe zurückgenommen, leichter Grünschleier der Bühne,
   oben etwas dichter (Kopfzeile). Nur Darstellung, das Foto selbst bleibt unverändert. */
.page-hero-foto .page-hero-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(var(--gruen-rgb) / 0.45), rgb(var(--gruen-rgb) / 0.18) 45%, rgb(var(--gruen-rgb) / 0.12));
}
.page-hero-foto .page-hero-media::after {
  content: ""; position: absolute; inset: auto 0 0; z-index: 2; height: 30%;
  background: linear-gradient(to top, var(--bg), rgb(var(--gruen-rgb) / 0));
}
.page-hero-foto .page-hero-content { position: relative; margin-top: calc(-1 * clamp(1.25rem, 4vw, 4rem)); }
.page-hero-caption {
  display: flex; align-items: center; gap: 0.6rem; margin-top: var(--s-6); margin-bottom: 0;
  font-size: 0.8125rem; font-weight: 700; font-stretch: 88%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}
.page-hero-caption::before { content: ""; width: 1.4rem; height: 2px; background: currentColor; }
@media (min-width: 960px) { .page-hero-foto { padding-top: 0; } }
@media (min-width: 960px) {
  .page-hero::before {
    background:
      linear-gradient(90deg, rgb(var(--tief-rgb) / 0.92) 0%, rgb(var(--tief-rgb) / 0.6) 45%, rgb(var(--tief-rgb) / 0.05) 80%),
      linear-gradient(to top, var(--gruen) 0%, rgb(var(--gruen-rgb) / 0) 40%);
  }
}
.breadcrumb { margin-bottom: var(--s-5); font-size: 0.8125rem; color: var(--text-2); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5em; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/" / ""; margin-right: 0.5em; color: var(--text-3); }
.breadcrumb a { color: var(--text); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- Abschnitte ---------- */
.section { position: relative; padding-block: var(--section-y); background: var(--bg); }
/* Hellgrauer Abschnitt; Karten darin werden weiß (Werte direkt, eine Variable kann sich nicht selbst lesen) */
.section-alt { --bg: #F2F2F2; --surface-1: var(--weiss); --surface-2: #F7F7F7; }
.section-alt.dunkel { --bg: #121212; --surface-1: #1C1C1C; --surface-2: #262626; }
.section-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4);
  padding-bottom: var(--s-4); margin-bottom: var(--s-7);
  border-bottom: 1px solid var(--line);
}
.section-head .eyebrow { margin-bottom: var(--s-3); }

/* Fotostreifen: hohe Kacheln, dezent farbig (website_assets.py → dezent()), wandern beim Scrollen seitlich (main.js) */
.fotostreifen { padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--s-4); background: var(--bg); overflow: hidden; }
.streifen { overflow: hidden; }
.streifen-spur {
  display: flex; gap: clamp(0.75rem, 1.4vw, 1.25rem);
  list-style: none; margin: 0; padding: 0 var(--gutter);
  width: max-content;
  will-change: transform;
}
.streifen-spur li { flex: none; width: clamp(150px, 19vw, 270px); }
.streifen-spur img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--r);
}
.streifen-spur li:nth-child(even) { margin-top: clamp(1.5rem, 3vw, 3rem); }
.streifen-link { display: flex; justify-content: flex-end; margin-top: var(--s-4); margin-bottom: 0; }

/* Karten „Die Liga im Überblick“: Bild mit runden Ecken, Text darunter; unter 1140 px seitlich wischbar.
   Die Bilder sind dezent farbig (website_assets.py → dezent()); beim Überfahren etwas kräftiger. */
.karten {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 320px);
  gap: var(--s-5);
  list-style: none; margin: -6px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter) var(--s-4);   /* Platz für den Fokusrahmen */
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.karte { display: grid; scroll-snap-align: start; min-width: 0; }
/* Gleich hohe Karten, „Mehr erfahren“ bündig unten */
.karte-link { display: grid; grid-template-rows: auto 1fr; gap: var(--s-4); color: var(--text); text-decoration: none; border-radius: var(--r); }
.karte-bild { display: block; overflow: hidden; overflow: clip; border-radius: var(--r); background: var(--surface-1); }
.karte-bild img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform var(--dur-media) var(--ease-out), filter var(--dur-media) var(--ease-out);
}
.karte-text { display: grid; grid-template-rows: auto auto auto 1fr; gap: var(--s-2); }
.karte-chip { font-size: 0.75rem; font-weight: 700; font-stretch: 88%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.karte-titel { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); font-weight: 900; font-stretch: 66%; line-height: 0.95; text-transform: uppercase; }
.karte-teaser { font-size: 0.9375rem; line-height: 1.45; color: var(--text-2); }
.karte-mehr {
  display: inline-flex; align-items: center; align-self: end; justify-self: start; gap: 0.4em; margin-top: var(--s-2);
  font-size: 0.8125rem; font-weight: 700; font-stretch: 88%; letter-spacing: 0.08em; text-transform: uppercase;
}
.karte-mehr .icon { transition: transform var(--dur-2) var(--ease-out); }
@media (min-width: 1140px) {
  .karten { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
}
@media (hover: hover) and (pointer: fine) {
  .karte-link:hover .karte-bild img { transform: scale(1.05); filter: saturate(1.5); }
  .karte-link:hover .karte-mehr { text-decoration: underline 2px; text-underline-offset: 0.35em; }
  .karte-link:hover .karte-mehr .icon { transform: translateX(4px); }
}
.karte-link:focus-visible { outline-offset: 6px; }

/* Mitmachen: Abschluss „Wir suchen dich.“ über die ganze Breite, grün wie die Fußzeile, ohne Verlauf
   (Nutzer, 05.10.2026: harte Kante; den Übergang tragen unten die Fans) */
.join-panel { display: grid; gap: var(--s-5) var(--s-8); }
.join-panel > * { min-width: 0; }
.join-titel .eyebrow { margin-bottom: var(--s-3); }
/* Zeigende Hand („We Want You“, website_assets.py → finger()): weiß und freigestellt über der Überschrift.
   Beim Einblenden schiebt sie sich einmal nach vorn (nur mit Bewegung, Endzustand = Grundzustand). */
.join-finger { display: block; width: clamp(150px, 46vw, 200px); height: auto; margin: 0 0 var(--s-5) -1%; }
@media (min-width: 960px) { .join-finger { width: clamp(200px, 19vw, 270px); } }
.motion .join-panel .join-finger { transform-origin: 62% 30%; transition: transform 1.1s var(--ease-expo) 0.2s; }
.motion .join-panel:not(.is-in) .join-finger { transform: scale(0.72) rotate(-8deg); }
.join-titel h2 { margin: 0; font-size: clamp(2.75rem, 1.5rem + 5vw, 6rem); font-weight: 900; font-stretch: 64%; line-height: 0.88; }
.join-text .lead { margin: 0 0 var(--s-6); max-width: 38ch; color: var(--text); }
@media (min-width: 960px) {
  .join-panel { grid-template-columns: 1fr 1fr; align-items: end; }
}

/* ---------- Teams ---------- */
.team-grid { display: grid; gap: var(--s-7) var(--s-5); list-style: none; margin: 0; padding: 0; }
.team-card { display: flex; flex-direction: column; gap: var(--s-4); }
.team-media { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r); }
.team-media img { width: 100%; height: 100%; object-fit: cover; }
.team-media-empty {
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 calc(23% - 1px), var(--line) calc(23% - 1px) 23%, transparent 23%),
    linear-gradient(90deg, transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    var(--surface-1);
}
.team-code {
  font-size: 3.5rem; font-weight: 900; font-stretch: 66%; line-height: 1;
  color: var(--text); letter-spacing: 0.02em;
  background: var(--surface-1); padding: 0 0.15em;
}
.credit {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  padding: 0.35em 0.7em;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--weiss); background: rgb(0 0 0 / 0.7); border-radius: 999px;
}
.team-body { flex: 1; }
.team-name { display: flex; align-items: center; gap: 0.5em; margin-bottom: var(--s-2); font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); font-weight: 900; font-stretch: 66%; }
.team-name::before { content: ""; width: 0.42em; height: 0.42em; flex: none; border-radius: 50%; background: var(--team, var(--text)); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-strong); }
.team-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin: 0; color: var(--text-3); }
.team-tag { margin: 0 0 var(--s-3); }
.team-quote { color: var(--text-2); }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Saison & Tabelle ---------- */
/* Aktuelle bzw. kommende Saison: über die ganze Breite; ab 960 px Symbol, Titel und Text nebeneinander */
.live { display: grid; gap: var(--s-4); }
.live-label { font-size: 0.875rem; font-weight: 700; font-stretch: 88%; letter-spacing: 0.12em; color: var(--text-3); }
.live-link {
  position: relative;
  display: grid; gap: var(--s-3); justify-items: start;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  color: var(--text); text-decoration: none;
  background: var(--surface-1);
  border-radius: var(--r-lg);
  transition: background-color var(--dur-1), transform var(--dur-3) var(--ease-out);
}
.live-link .icon-calendar { width: 40px; height: 40px; stroke-width: 1.75; }
.live-title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); font-weight: 900; font-stretch: 66%; line-height: 0.95; text-transform: uppercase; }
.live-text { color: var(--text-2); }
.live-note { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
a.live-link:hover { background: var(--surface-2); transform: translateY(-3px); }
@media (min-width: 960px) {
  .live-link { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--s-7); }
  .live-link .icon-calendar { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; }
  .live-link .live-title { grid-column: 2; grid-row: 1 / span 2; }
  .live-link .live-text { grid-column: 3; grid-row: 1; align-self: end; }
  .live-link .live-note { grid-column: 3; grid-row: 2; align-self: start; }
  .live-link.is-soon .live-badge { grid-column: 2; grid-row: 1; align-self: end; }
  .live-link.is-soon .live-title { grid-row: 2; align-self: start; }
  .live-link.is-soon .live-text { grid-row: 1 / span 2; align-self: center; }
}

/* Ehrentafel: je Jahr nur die Sieger (Saison, Hallenturnier); die letzten Jahre zuerst, ältere per Knopf (main.js).
   Am Handy steht das Jahr über den Siegern, ab 640 px links daneben, ab 768 px die beiden Sieger nebeneinander. */
.honors { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; max-width: 960px; }
.honors-season[hidden] { display: none; }
.honors-year:focus { outline: none; }
.honors-year:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.honors-mehr { margin-top: var(--s-6); }
.honors-season {
  display: grid; gap: var(--s-4);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--surface-1); border-radius: var(--r-lg);
}
.honors-year {
  justify-self: start;
  font-size: clamp(3rem, 2.2rem + 3vw, 4.5rem); font-weight: 900; font-stretch: 64%; line-height: 0.9;
  font-variant-numeric: tabular-nums lining-nums;
}
/* Jahre ganz ohne Sieger (keine Saison, unbekannt) blass */
.honors-season.is-offen .honors-year { color: var(--text-3); }
.sieger-liste { display: grid; gap: var(--s-4); margin: 0; }
/* Medaille links, Wettbewerb klein darüber, Teamname groß; ohne Sieger bleibt der Platz der Medaille frei */
.sieger { position: relative; display: grid; align-content: center; min-height: 3.5rem; padding-left: 3.5rem; }
.sieger .medaille { position: absolute; left: 0; top: 50%; width: 2.5rem; transform: translateY(-50%); }
/* Medaillen (website_art.py): nur Gold, die Ehrentafel zeigt nur Sieger */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.medaille { display: block; height: auto; }
.sieger-art {
  margin-bottom: var(--s-1);
  font-size: 0.75rem; font-weight: 700; font-stretch: 88%; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
}
.sieger-team {
  margin: 0;
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 900; font-stretch: 70%; line-height: 1;
  text-transform: uppercase; color: var(--text);
}
.sieger-notiz {
  display: block; margin-top: var(--s-1);
  font-size: 0.875rem; font-weight: 400; font-stretch: 100%; line-height: 1.35; text-transform: none; color: var(--text-3);
}
.sieger.is-kein .sieger-team { font-size: 1rem; font-weight: 600; font-stretch: 100%; line-height: 1.35; text-transform: none; color: var(--text-2); }
.honors-hinweis { margin: var(--s-6) 0 0; max-width: 60ch; color: var(--text-2); }
.honors-hinweis a { color: var(--text); text-decoration-thickness: 2px; }
@media (min-width: 640px) {
  /* Jahr in Tabellenziffern: die Spalte ist in jeder Karte gleich breit, die Sieger fluchten */
  .honors-season { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-7); align-items: center; }
  .honors-mehr + .honors-hinweis { margin-top: var(--s-5); }
}
@media (min-width: 768px) {
  .sieger-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}

/* Sprung aus der ewigen Tabelle zu einem Jahr: die Karte bekommt kurz einen Rahmen (ohne Bewegung) */
.honors-season { scroll-margin-top: calc(var(--header-h) + 16px); }
.honors-season:target { outline: 2px solid var(--text); outline-offset: 3px; }

/* Ewige Tabelle: eine Zeile je Team als <details> (Kopfzeile nur zur Orientierung, für Vorleser stehen die Spalten
   im Text der Zeile). Spalten: Platz, Team, Saison, Halle, Titel, Plus. */
.ewig { --spalten: 3rem minmax(0, 1fr) repeat(3, 3.25rem) 36px; max-width: 960px; }
.ewig-kurz { display: none; }
.ewig-intro { max-width: 60ch; margin: calc(var(--s-6) * -1) 0 var(--s-6); color: var(--text-2); }
.ewig-kopf, .ewig-team summary { display: grid; grid-template-columns: var(--spalten); align-items: center; column-gap: var(--s-3); }
.ewig-kopf {
  padding: 0 var(--s-5) var(--s-3);
  font-size: 0.75rem; font-weight: 700; font-stretch: 88%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}
.ewig-kopf > span:nth-child(n + 3) { text-align: center; }
.ewig-liste { display: grid; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.ewig-team { background: var(--surface-1); border-radius: var(--r); }
.ewig-team summary {
  min-height: 64px; padding: var(--s-3) var(--s-5);
  color: var(--text); list-style: none; cursor: pointer; border-radius: var(--r);
}
.ewig-team summary::-webkit-details-marker { display: none; }
.ewig-platz { font-size: 1.5rem; font-weight: 900; font-stretch: 64%; font-variant-numeric: tabular-nums; }
.ewig-name { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem); font-weight: 900; font-stretch: 70%; line-height: 1.05; text-transform: uppercase; }
.ewig-name .sieger-notiz { text-transform: none; letter-spacing: 0; }
.ewig-zahl { text-align: center; font-size: 1.25rem; font-weight: 800; font-stretch: 80%; font-variant-numeric: tabular-nums; color: var(--text-2); }
.ewig-gesamt { font-size: 1.5rem; font-weight: 900; color: var(--text); }
.ewig-team summary:hover .faq-icon, .ewig-team summary:focus-visible .faq-icon { color: var(--on-action); background: var(--action); border-color: var(--action); }
.ewig-team[open] .faq-icon::after { transform: scaleY(0); }
.ewig-detail { padding: 0 var(--s-5) var(--s-5) calc(var(--s-5) + 3rem + var(--s-3)); }
.ewig-detail-titel { margin: 0 0 var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--text-3); }
.ewig-titel { display: grid; gap: var(--s-3); margin: 0; }
.ewig-titel > div { display: grid; gap: var(--s-2); }
.ewig-titel dt { font-size: 0.75rem; font-weight: 700; font-stretch: 88%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.ewig-titel dd { margin: 0; }
.ewig-jahre { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
/* Jahre als runde Chips; ein Klick springt zur Karte des Jahres in der Ehrentafel */
.ewig-jahr {
  display: inline-flex; align-items: baseline; gap: 0.35em; min-height: 40px; padding: 0.55em 1em;
  font-size: 0.9375rem; font-weight: 800; font-variant-numeric: tabular-nums; text-decoration: none;
  color: var(--text); border: 1px solid var(--line-strong); border-radius: 999px;
  transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.ewig-jahr small { font-size: 0.75rem; font-weight: 400; color: var(--text-3); }
.ewig-jahr.is-vermutlich { border-style: dashed; }
.ewig-jahr:hover { color: var(--on-action); background: var(--action); border-color: var(--action); }
.ewig-jahr:hover small { color: inherit; }
@supports (interpolate-size: allow-keywords) {
  .motion .ewig-team::details-content {
    height: 0; overflow: clip;
    transition: height var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
  }
  .motion .ewig-team[open]::details-content { height: auto; }
}
.ewig-aufteilung { display: none; }
/* Handy: nur Platz, Team und Titel als Spalten; Saison und Halle klein unter dem Namen (die Spalten bleiben für
   Vorleser im Text, nur unsichtbar) */
@media (max-width: 639px) {
  .ewig { --spalten: 1.75rem minmax(0, 1fr) 2.5rem 32px; }
  .ewig-kopf { padding-inline: var(--s-4); column-gap: var(--s-3); }
  .ewig-kopf > span:nth-child(3), .ewig-kopf > span:nth-child(4), .ewig-lang { display: none; }
  .ewig-kurz { display: inline; }
  .ewig-team summary { padding-inline: var(--s-4); }
  .ewig-zahl:not(.ewig-gesamt) {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ewig-aufteilung {
    display: block; margin-top: var(--s-1);
    font-size: 0.8125rem; font-weight: 600; font-stretch: 100%; line-height: 1.35; text-transform: none; color: var(--text-3);
  }
  .ewig-team .faq-icon { width: 32px; height: 32px; }
  .ewig-gesamt { font-size: 1.375rem; }
  .ewig-detail { padding: 0 var(--s-4) var(--s-4); }
}

/* ---------- Geschichte ---------- */
/* Zeitleiste nach dem Muster einer Firmen-Zeitleiste: eine Linie mit runden Punkten und Icons. Handy: senkrecht.
   Desktop: waagerecht, die Einträge abwechselnd darüber und darunter, mit kurzen Stielen zum Punkt
   (ausgelegt auf vier Meilensteine, 8 Spalten). */
.timeline { --punkt: 48px; position: relative; display: grid; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
/* Handy: die Linie besteht aus Stücken von Punkt zu Punkt und endet so genau am letzten */
.tl-item:not(:last-child)::after {
  content: ""; position: absolute; z-index: -1; left: calc(var(--punkt) / 2 - 1px); top: calc(var(--punkt) / 2);
  width: 2px; height: calc(100% + var(--s-6)); background: var(--gruen);
}
.tl-item { position: relative; isolation: isolate; display: grid; grid-template-columns: var(--punkt) minmax(0, 1fr); column-gap: var(--s-4); align-items: start; }
.tl-punkt {
  display: grid; place-items: center; width: var(--punkt); height: var(--punkt);
  color: var(--weiss); background: var(--gruen); border-radius: 50%;
}
.tl-punkt .icon { width: 24px; height: 24px; stroke-width: 1.75; }
.tl-item.is-now .tl-punkt { color: var(--gruen); background: #5DB98A; }
.tl-text { padding-top: var(--s-1); }
.tl-when {
  margin: 0 0 var(--s-2);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 900; font-stretch: 64%; line-height: 0.95;
  text-transform: uppercase; color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
.tl-title {
  margin-bottom: var(--s-2);
  font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
}
.tl-text p:last-child { margin: 0; max-width: 46ch; font-size: 0.9375rem; color: var(--text-2); }
.source { margin: var(--s-7) 0 var(--s-2); font-size: 0.9375rem; color: var(--text-3); }
.source a { color: var(--text-2); }
.more-link { margin: 0; }
@media (min-width: 960px) {
  .timeline { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0; }
  /* Linie genau auf der Grenze der beiden Reihen; die Punkte ragen je zur Hälfte hinein */
  .timeline::before {
    content: ""; position: absolute; grid-row: 1 / 2; grid-column: 1 / -1; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--gruen);
    transform-origin: left;
    transition: transform 1.2s var(--ease-out);
  }
  .motion .timeline:not(.is-in)::before { transform: scaleX(0); }
  .tl-item:not(:last-child)::after { content: none; }
  .tl-item { display: flex; flex-direction: column; gap: 0; padding-right: var(--s-6); }
  .tl-item:nth-child(odd) { grid-row: 1; flex-direction: column-reverse; align-self: end; margin-bottom: calc(var(--punkt) / -2); }
  .tl-item:nth-child(even) { grid-row: 2; align-self: start; margin-top: calc(var(--punkt) / -2); }
  .tl-item:nth-child(1) { grid-column: 1 / span 3; }
  .tl-item:nth-child(2) { grid-column: 3 / span 3; }
  .tl-item:nth-child(3) { grid-column: 5 / span 3; }
  .tl-item:nth-child(4) { grid-column: 7 / span 2; padding-right: 0; }
  .tl-text { position: relative; padding: var(--s-5) 0 0 calc(var(--punkt) / 2 + var(--s-3)); }
  .tl-item:nth-child(odd) .tl-text { padding-top: 0; padding-bottom: var(--s-5); }
  /* Stiel vom Punkt zum Text */
  .tl-text::before {
    content: ""; position: absolute; left: calc(var(--punkt) / 2 - 0.5px); top: 0; height: calc(var(--s-5) - var(--s-2));
    width: 1px; background: var(--line-strong);
  }
  .tl-item:nth-child(odd) .tl-text::before { top: auto; bottom: 0; }
  .tl-item:nth-child(even) { padding-bottom: 0; }
  .source { margin-top: var(--s-8); }
}

/* ---------- Impressionen ---------- */
/* Fotos: am Handy untereinander, ab 640 px zu zweit; das erste groß über die ganze Breite, ab 960 px mit der
   Bildunterschrift rechts daneben. Bilder immer 3:2, damit alle Personen drauf bleiben (Ausschnitt in IMPRESSIONEN). */
.fotos { display: grid; gap: var(--s-7) var(--s-5); list-style: none; margin: 0; padding: 0; }
.foto figure { margin: 0; }
.foto-link { position: relative; display: block; overflow: hidden; border-radius: var(--r); }
.foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--dur-media) var(--ease-out); }
.foto-text { margin-top: var(--s-3); }
.foto-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem;
  margin: 0;
  font-size: 0.8125rem; font-weight: 700; font-stretch: 88%; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2);
}
.foto-jahr { font-size: 1.5rem; font-weight: 900; font-stretch: 66%; letter-spacing: 0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.foto-einblick { margin: var(--s-2) 0 0; max-width: 52ch; font-size: 0.9375rem; color: var(--text-2); }
@media (hover: hover) and (pointer: fine) {
  .foto-link:hover img { transform: scale(1.04); }
}
@media (min-width: 640px) {
  .fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foto-gross { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .foto-gross figure { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-6); align-items: end; }
  .foto-gross .foto-text { margin: 0; padding-bottom: var(--s-2); }
  .foto-gross .foto-kopf { flex-direction: column; align-items: start; gap: var(--s-3); font-size: 0.875rem; }
  .foto-gross .foto-jahr { font-size: clamp(3rem, 2.2rem + 3vw, 5rem); line-height: 0.9; letter-spacing: 0; }
  .foto-gross .foto-titel { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem); font-weight: 900; font-stretch: 70%; line-height: 1; letter-spacing: 0.01em; color: var(--text); }
}

/* Foto groß ansehen (Dialog, main.js): tiefes Petrol über die ganze Fläche, Foto so groß wie möglich und ganz zu sehen,
   Bildunterschrift direkt darunter, Blättern unten. Platz für Knopf oben, Unterschrift und Blättern: 15rem. */
.lightbox:not([open]) { display: none; }   /* auch in Browsern ohne <dialog> (dort ist es ein unbekanntes Element) */
.lightbox {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
  color: var(--text-2); background: rgb(var(--tief-rgb)); border: 0;
}
.lightbox[open] {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4);
  padding: calc(var(--s-4) + 56px) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));
}
.lightbox::backdrop { background: rgb(8 45 49); }   /* ::backdrop erbt in älteren Browsern keine Variablen */
.lightbox-figur { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); max-width: 100%; margin: 0; }
.lightbox-bild {
  width: auto; height: auto; max-width: 100%;
  max-height: calc(100vh - 15rem); max-height: calc(100dvh - 15rem);
  object-fit: contain; border-radius: var(--r-sm);
}
.lightbox-text { max-width: 60ch; text-align: center; font-size: 0.9375rem; line-height: 1.45; color: var(--text-2); white-space: pre-line; }
.lightbox-nav { display: flex; align-items: center; gap: var(--s-4); }
.lightbox-nav[hidden] { display: none; }
.lightbox-zahl { min-width: 4.5ch; margin: 0; text-align: center; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lightbox-zu { position: absolute; top: var(--s-4); right: var(--gutter); }
.motion .lightbox[open] { animation: einblenden 200ms ease both; }
html:has(.lightbox[open]) { overflow: hidden; }
/* Handy quer und andere niedrige Fenster: weniger Rand, damit das Foto groß bleibt */
@media (max-height: 560px) {
  .lightbox[open] { gap: var(--s-3); padding-top: var(--s-3); padding-inline: calc(var(--gutter) + 48px + var(--s-3)); }
  .lightbox-bild { max-height: calc(100vh - 10rem); max-height: calc(100dvh - 10rem); }
  .lightbox-text { font-size: 0.875rem; }
  .lightbox-zu { top: var(--s-3); }
}

/* Einblicke (früher „Mehr als nur Liga“): Karten, ab 768 px zu zweit, ab 1140 px zu dritt */
.info-grid { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.info-card {
  display: flex; flex-direction: column; align-items: start;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--surface-1); border-radius: var(--r-lg);
}
.info-card h3 { margin-bottom: var(--s-3); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 900; font-stretch: 66%; line-height: 0.95; }
.info-card p { max-width: 46ch; }
.info-card p:last-child { margin: 0; }
.info-card .info-link { margin-top: auto; padding-top: var(--s-2); }
@media (min-width: 768px) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
@media (min-width: 1140px) {
  .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .info-card h3 { font-size: clamp(1.75rem, 0.9rem + 1.2vw, 2.25rem); }
}

/* Runde Knöpfe mit Symbol (Foto-Dialog) */
.icon-btn {
  display: grid; place-items: center; width: 48px; height: 48px;
  color: var(--text); background: transparent;
  border: 1px solid var(--line-strong); border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1), opacity var(--dur-1);
}
.icon-btn .icon { width: 22px; height: 22px; }
.icon-btn:hover { color: var(--on-action); background: var(--action); border-color: var(--action); }

/* ---------- Regeln & Spielorte ---------- */
.rules-why { margin-bottom: var(--s-7); max-width: 52ch; }
.rules { display: grid; gap: 0 var(--s-8); list-style: none; margin: 0; padding: 0; }
.rules li {
  display: grid; grid-template-columns: 3.4ch 1fr; gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}
.rule-num { font-size: 1.75rem; font-weight: 900; font-stretch: 64%; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.rule-title { margin-bottom: var(--s-2); font-size: 1.25rem; }
.rules li p { margin: 0; }
@media (min-width: 960px) { .rules { grid-template-columns: 1fr 1fr; } }

.venue-grid { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.venue {
  display: grid; gap: var(--s-2); align-content: start; justify-items: start;
  padding: var(--s-6);
  background: var(--surface-1); border-radius: var(--r-lg);
}
.venue .icon-pin { width: 28px; height: 28px; margin-bottom: var(--s-2); }
.venue-name { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem); font-weight: 900; font-stretch: 66%; line-height: 0.95; }
.venue-detail { margin: 0; font-size: 0.9375rem; color: var(--text-2); }
.venue-links { display: flex; flex-wrap: wrap; column-gap: var(--s-5); margin: 0; }
@media (min-width: 640px) { .venue-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-5); } }

/* ---------- Häufige Fragen ---------- */
.faq { max-width: 880px; border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-height: 68px; padding: var(--s-4) 0;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); font-weight: 650; line-height: 1.35;
  color: var(--text);
  list-style: none; cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  position: relative; width: 36px; height: 36px; flex: none;
  border: 1px solid var(--line-strong); border-radius: 50%;
  transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor;
  transition: transform var(--dur-2) var(--ease-out);
}
.faq-icon::before { width: 14px; height: 2px; margin: -1px 0 0 -7px; }
.faq-icon::after { width: 2px; height: 14px; margin: -7px 0 0 -1px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-item summary:hover .faq-icon { color: var(--on-action); background: var(--action); border-color: var(--action); }
@media (forced-colors: active) { .faq-icon::before, .faq-icon::after { forced-color-adjust: none; background: CanvasText; } }
.faq-answer { padding: 0 var(--s-7) var(--s-5) 0; }
.faq-answer p { margin: 0; max-width: 60ch; }
.faq-answer a { color: var(--text); text-decoration-thickness: 2px; }
@supports (interpolate-size: allow-keywords) {
  .motion { interpolate-size: allow-keywords; }
  .motion .faq-item::details-content {
    height: 0; overflow: clip;
    transition: height var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
  }
  .motion .faq-item[open]::details-content { height: auto; }
}

/* ---------- Fußzeile ---------- */
.site-footer { position: relative; overflow: hidden; }
.footer-grid { display: grid; gap: var(--s-7); padding-block: var(--s-8) var(--s-7); }
.footer-brand img { width: 120px; height: auto; margin-bottom: var(--s-4); }
.footer-brand p { max-width: 30ch; margin: 0; }
.footer-nav ul, .footer-contact ul, .footer-legal ul { list-style: none; margin: 0; padding: 0; }
.footer-nav a, .footer-contact a, .footer-share {
  display: inline-flex; align-items: center; min-height: 40px;
  color: var(--text-2); text-decoration: none;
}
.footer-nav a:hover, .footer-contact a:hover, .footer-share:hover, .footer-legal a:hover { color: var(--text); text-decoration: underline; }
.footer-nav a[aria-current="page"] { color: var(--text); text-decoration: underline 2px; text-underline-offset: 0.25em; }
.footer-contact a { overflow-wrap: anywhere; }
.footer-share { padding: 0; font: inherit; background: none; border: 0; cursor: pointer; }
.footer-legal { position: relative; z-index: 1; padding-block: var(--s-4) var(--s-6); border-top: 1px solid var(--line); }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; color: var(--text-3); text-decoration: none; }
/* Abschluss: jubelnde Fans von hinten (website_art.py → fans_svg()), dahinter blass der Schriftzug wie eine
   Bande im Stadion. Die Töne sind auf --gruen abgestimmt: hinten nah am Grund, vorn dunkle Figuren in hellen Trikots. */
.footer-tribuene { position: relative; margin-top: var(--s-6); }
.footer-wortmarke {
  position: absolute; top: 0; left: 0; right: 0; margin-inline: auto;
  width: min(100% - 2 * var(--gutter), var(--container)); height: auto; opacity: 0.09;
}
/* Höhe wächst ab 1600 px mit der Breite (viewBox 1600×300), sonst würde slice oben Köpfe und Fahnen abschneiden */
.fans {
  position: relative; display: block; width: 100%; height: max(clamp(150px, 19vw, 300px), 18.75vw);
  -webkit-user-select: none; user-select: none;
}
.fans .r1 { --h: #1B6566; --t: #21706B; --n: #2A7C73; }
.fans .r2 { --h: #165E60; --t: #2F8A78; --n: #1D6B69; }
.fans .r3 { --h: #0A3A3E; --t: #5DB98A; --n: #0A3A3E; }
.fans .h { fill: var(--h); }
.fans .t { fill: var(--t); }
.fans .n { fill: var(--n); }
.fans .arm, .fans .hand, .fans .aermel { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fans .arm { stroke: var(--h); stroke-width: calc(var(--u) * 0.92); }
.fans .hand { stroke: var(--h); stroke-width: calc(var(--u) * 1.25); }
.fans .aermel { stroke: var(--t); stroke-width: calc(var(--u) * 1.3); }
.fans .nr { stroke: var(--n); }   /* Rückennummern: Blockziffern, Strich erbt der Pfad in <defs> vom <use> */
@media (min-width: 960px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* ---------- Rechtstexte ---------- */
.legal { max-width: 72ch; }
.legal h2 {
  margin: var(--s-7) 0 var(--s-4); padding-top: var(--s-4);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  border-top: 1px solid var(--line-strong);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal > p:first-child + h2 { margin-top: var(--s-6); }
.legal h3 {
  margin: var(--s-5) 0 var(--s-2);
  font-size: 0.875rem; font-weight: 700; font-stretch: 88%; letter-spacing: 0.12em; color: var(--text-2);
}
.legal p, .legal ul, .legal address { margin: 0 0 var(--s-4); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: var(--s-1); }
.legal address { font-style: normal; line-height: 1.6; }
.legal a { color: var(--text); overflow-wrap: anywhere; }
.legal strong { font-weight: 650; }

/* ---------- Lesefortschritt ---------- */
.progress {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: none; height: 3px;
  background: var(--weiss); mix-blend-mode: difference;
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}
.motion .progress { display: block; }

/* ---------- Bewegung (nur mit html.motion) ---------- */
/* Einblenden beim Scrollen: einmalig, 24 px; Endzustand ohne transform (wichtig für fixierte Kinder) */
.motion [data-reveal]:not(.is-in),
.motion [data-reveal-group]:not(.is-in) > * { opacity: 0; transform: translateY(24px); }
.motion [data-reveal],
.motion [data-reveal-group] > * {
  transition: opacity var(--dur-media) var(--ease-out), transform var(--dur-media) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* Fans: kein Einblenden, stattdessen läuft einmal eine La-Ola-Welle von links nach rechts durch alle Reihen,
   sobald das Band zu sehen ist (unter 3,5 s, danach Ruhe) */
.motion .fans[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
.motion .fans.is-in .fan { animation: ola 0.9s var(--ease-out) calc(0.3s + var(--d) * 2s) 1 both; }
@keyframes ola { 0%, 100% { translate: 0 0; } 40% { translate: 0 calc(var(--u) * -1.8); } }

/* Seitenköpfe der Unterseiten: Bild zoomt leicht heraus, Text steigt nacheinander auf */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
.motion .page-hero-media { animation: settle 1.4s var(--ease-out) both; }
.motion .page-hero-content > * { animation: rise 600ms var(--ease-out) both; }
.motion .page-hero-content > :nth-child(2) { animation-delay: 100ms; }
.motion .page-hero-content > :nth-child(3) { animation-delay: 180ms; }
.motion .page-hero-content > :nth-child(4) { animation-delay: 260ms; }

/* Startseite: die Zeilen schieben sich aus einer Maske hoch, der Ball fliegt ein, dann Text und Knöpfe.
   Nur transform/opacity, Endzustand = Grundzustand. */
.motion .hero-home { --t0: 0.05s; }
@keyframes zeile-hoch { from { transform: translateY(108%); } }
@keyframes ball-rein {
  from { transform: translate3d(22vw, -120vh, 0) scale(0.7); }
  to { transform: none; }
}
@keyframes einblenden { from { opacity: 0; } }
.motion .hero-home .zeile > span { animation: zeile-hoch 0.95s var(--ease-expo) both; animation-delay: var(--t0); }
.motion .hero-home .zeile-2 > span { animation-delay: calc(var(--t0) + 0.09s); }
.motion .hero-home .zeile-3 > span { animation-delay: calc(var(--t0) + 0.18s); }
.motion .hero-home .hero-kicker { animation: einblenden 0.6s ease both; animation-delay: var(--t0); }
.motion .hero-home .hero-unten { animation: rise 0.7s var(--ease-out) both; animation-delay: calc(var(--t0) + 0.4s); }
.motion .hero-home .ball-flug { animation: ball-rein 1.35s var(--ease-expo) both; animation-delay: calc(var(--t0) + 0.05s); }
.motion .hero-home .feld { animation: einblenden 1.2s ease both; animation-delay: calc(var(--t0) + 0.3s); }
.motion .hero-home .scroll-cue { animation: einblenden 0.6s ease both; animation-delay: calc(var(--t0) + 1s); }

/* ---------- Prüfmodus für Annahmen (?pruefen) ---------- */
body.pruefen .annahme {
  position: relative;
  cursor: help;
  outline: 2px dashed #F59E0B;
  outline-offset: 2px;
  border-radius: 2px;
}
body.pruefen span.annahme { color: #0A0A0A; background: #FFE066; }
body.pruefen .annahme:hover::after,
body.pruefen .annahme:focus-visible::after,
body.pruefen a:focus-visible .annahme::after {
  content: "Annahme: " attr(data-frage);
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
  width: max-content; max-width: min(320px, 80vw);
  padding: 0.6rem 0.75rem;
  font: 600 0.85rem/1.35 var(--font); font-stretch: 100%;
  text-align: left; text-transform: none; letter-spacing: 0; white-space: normal;
  color: #0A0A0A; background: #FFFFFF;
  border: 2px solid #F59E0B; border-radius: var(--r-sm);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.35);
  -webkit-text-stroke: 0;
}
body.pruefen .team-card, body.pruefen .team-media { overflow: visible; }
body.pruefen .credit.annahme { position: absolute; }
body.pruefen .scroll-cue { display: none; }
/* Annahmen in rechten Spalten (zweiter Sieger, rechte Einblick-Karten): Frage rechtsbündig, sonst läuft sie aus dem Bild */
@media (min-width: 641px) {
  body.pruefen .sieger + .sieger .annahme::after,
  body.pruefen .info-grid > :nth-child(2n) .annahme::after { left: auto; right: 0; }
}
@media (min-width: 1140px) {
  body.pruefen .info-grid > :nth-child(2n) .annahme::after { left: 0; right: auto; }
  body.pruefen .info-grid > :nth-child(3n) .annahme::after { left: auto; right: 0; }
}
/* Der Fotostreifen schneidet seitlich ab (overflow: hidden): Frage innen anzeigen */
body.pruefen .streifen.annahme::after { top: 0.75rem; left: var(--gutter); }
@media (max-width: 640px) {
  body.pruefen .annahme:hover::after,
  body.pruefen .annahme:focus-visible::after,
  body.pruefen a:focus-visible .annahme::after {
    position: fixed; top: auto; right: 1rem; bottom: 4.5rem; left: 1rem; width: auto; max-width: none;
  }
}
.check-toggle {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 70;
  min-height: 44px; padding: 0.6rem 1.1rem;
  font: 700 0.9rem/1 var(--font); font-stretch: 88%; letter-spacing: 0.08em; text-transform: uppercase;
  color: #0A0A0A; background: #FFE066;
  border: 2px dashed #B45309; border-radius: 999px;
  cursor: pointer;
}
.check-toggle[aria-pressed="true"] { background: #FFFFFF; }

/* ---------- Druck ---------- */
@media print {
  :root, .dunkel, .site-header,
  .hero-home.dunkel, .page-hero.dunkel, .join-band.dunkel, .site-footer.dunkel {
    --text: #000; --text-2: #222; --text-3: #444; --bg: #fff; --surface-1: #fff; --surface-2: #fff; --line: #ccc;
  }
  body, .dunkel { background: #fff; color: #222; }
  .site-header, .skip-link, .progress, .lightbox, .scroll-cue, .check-toggle, .page-hero-media,
  .ball-bahn, .feld, .fotostreifen, .footer-tribuene { display: none !important; }
  .section.join-band, .site-footer { background: #fff !important; }
  .join-finger { display: none; }
  .motion [data-reveal], .motion [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
  .page-hero::before { display: none; }
  .hero-home, .page-hero { min-height: 0; padding: 1rem 0; }
  .zeile-3 > span { color: #000; -webkit-text-stroke: 0; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}