/* 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); }
.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: die letzten Jahre zuerst, ältere per Knopf (main.js); Jahre ohne Daten blass */
.honors { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; max-width: 760px; }
.honors-season[hidden] { display: none; }
.honors-year:focus { outline: none; }
.honors-year:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.honors-season.is-offen { padding-block: var(--s-5); }
.honors-season.is-offen .honors-year { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); color: var(--text-3); }
.honors-offen { margin: 0; color: var(--text-3); }
.honors-mehr { margin-top: var(--s-6); }
.honors-season {
  display: grid; gap: var(--s-4);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--surface-1); border-radius: var(--r-lg);
}
.honors-year {
  justify-self: start;
  font-size: clamp(3rem, 2.2rem + 3vw, 5rem); font-weight: 900; font-stretch: 64%; line-height: 0.9;
  font-variant-numeric: tabular-nums lining-nums;
}
.podium { list-style: none; margin: 0; padding: 0; }
.podium li {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 48px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}
.podium li:last-child { border-bottom: 0; }
/* Medaillen (website_art.py): Gold, Silber, Bronze; die Spalte ist gleich breit, damit die Namen fluchten */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.podium-rank { display: grid; place-items: center; width: 3.25rem; flex: none; }
.medaille { display: block; width: 2.25rem; height: auto; }
.podium li { padding-block: var(--s-2); }
.podium-1 .medaille { width: 3.25rem; }
.podium-1 .podium-team { font-size: 1.5rem; font-weight: 900; font-stretch: 70%; text-transform: uppercase; color: var(--text); }
@media (min-width: 640px) {
  .honors-season { grid-template-columns: auto 1fr; gap: var(--s-7); align-items: center; }
}

/* ---------- Geschichte ---------- */
.timeline { position: relative; display: grid; gap: var(--s-6); list-style: none; margin: 0; padding: 0 0 0 var(--s-6); }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px;
  background: var(--text);
  transform-origin: top;
  transition: transform 1.2s var(--ease-out);
}
.motion .timeline:not(.is-in)::before { transform: scaleY(0); }
.tl-item { position: relative; }
.tl-item::before {
  content: ""; position: absolute; left: calc(-1 * var(--s-6)); top: 4px;
  width: 14px; height: 14px;
  background: var(--bg); border: 2px solid var(--text); border-radius: 50%;
}
.tl-item.is-now::before { background: var(--text); }
.tl-when {
  margin: 0 0 var(--s-2);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); 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-3); font-size: 1.125rem; color: var(--text-2); }
.tl-item p:last-child { margin: 0; max-width: 46ch; }
.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(4, minmax(0, 1fr)); column-gap: var(--s-6); padding: var(--s-6) 0 0; }
  .timeline::before { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .motion .timeline:not(.is-in)::before { transform: scaleX(0); }
  .tl-item::before { left: 0; top: calc(-1 * var(--s-6)); }
  @supports (grid-template-rows: subgrid) {
    .timeline { grid-template-rows: auto auto 1fr; row-gap: 0; }
    .tl-item { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  }
}

/* ---------- Mehr als nur Liga ---------- */
.info-grid { display: grid; gap: var(--s-4); }
.info-card {
  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:last-child { margin: 0; max-width: 46ch; }
@media (min-width: 960px) { .info-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }

/* Galerie (seitlich scrollbar, mit Pfeilen) */
.rail .section-head { margin-bottom: var(--s-6); }
.rail-nav { display: flex; gap: var(--s-2); }
.rail-nav[hidden] { display: none; }
.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:not([aria-disabled="true"]) { color: var(--on-action); background: var(--action); border-color: var(--action); }
.icon-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.rail-viewport {
  position: relative;   /* Bezugsrahmen für .sr-only in den Bildlinks, sonst ragen sie aus dem Scrollbereich */
  --inset: max(var(--gutter), calc((100vw - var(--container)) / 2));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--inset);
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.rail-viewport:focus-visible { outline-offset: -3px; }
.rail-track {
  display: flex; gap: var(--s-5);
  list-style: none; margin: 0; padding: 6px var(--inset) var(--s-4);
  width: max-content;
}
.moment { flex: 0 0 min(82vw, 560px); scroll-snap-align: start; }
.moment figure { margin: 0; }
.moment-link { position: relative; display: block; overflow: hidden; border-radius: var(--r); }
.moment img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--dur-media) var(--ease-out); }
.moment-caption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem;
  margin-top: var(--s-3);
  font-size: 0.8125rem; font-weight: 700; font-stretch: 88%; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2);
}
.moment-year { font-size: 1.5rem; font-weight: 900; font-stretch: 66%; letter-spacing: 0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .moment-link:hover img { transform: scale(1.04); }
}

/* ---------- 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; }
/* Der Fotostreifen schneidet seitlich ab (overflow: hidden): Frage innen anzeigen */
body.pruefen .streifen.annahme::after { top: 0.75rem; left: var(--gutter); }
body.pruefen .rail .annahme:hover::after,
body.pruefen .rail .annahme:focus-visible::after { position: fixed; top: auto; right: 1rem; bottom: 4.5rem; left: 1rem; width: auto; max-width: 420px; }
@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, .rail-nav, .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; }
}