/* ============================================================
   SC Nienstedten — Design tokens
   Palette derived from the club crest (royal blue / red),
   grounded in Nienstedten's actual identity rather than a
   generic template palette.
   ============================================================ */
:root{
  --blue-900:#141e50;
  --blue-800:#1a2769;
  --blue-700:#23348a;
  --blue-600:#2d44b6;
  --blue-050:#edeffa;
  --red-600:#c83736;
  --red-500:#cc4443;
  --grass:#4c7a3d;
  --grass-dim:#3c6231;
  /* Grundflächen: reines Weiß als Basis, ein kühles, kaum blaues Hellgrau
     für Wechselflächen. Die früheren warmen Beigetöne sind bewusst raus. */
  --chalk:#ffffff;
  --chalk-dim:#f3f5fb;
  --surface-2:#f3f5fb;
  --ink:#14202e;
  --ink-soft:#4a5566;
  --line:#dde2ee;
  --white:#ffffff;

  /* Gold-Akzent: analog zu Vereinsjubiläen/Prestige-Auftritten großer
     Klubs sparsam eingesetzt — Call-to-Actions, Badges, Trennlinien.
     Nie als Fließtextfarbe (Kontrast auf Weiß/Blau reicht dafür nicht). */
  --gold:#b8902f;
  --gold-light:#d9ae4d;
  --gold-ink:#4a3610;

  --font-display:'Oswald Variable','Arial Narrow',sans-serif;
  --font-body:'Source Sans 3','Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --nav-h:88px;
  /* Kompakte Kopfleiste nach dem ersten Scrollen (siehe main.js /
     body.is-scrolled). --nav-h-live ist der jeweils aktuelle Wert und
     wird von Kopfleiste, Menü-Overlay und Jumpbar gelesen; #main behält
     bewusst den vollen --nav-h, damit der Seiteninhalt nicht springt. */
  --nav-h-compact:68px;
  --nav-h-live:var(--nav-h);
  --promo-h:38px;
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Kräftigere Kurven für Einblenden (ease-out) und Bewegung auf der
     Fläche (in-out) — die Browser-Defaults sind zu zahm. */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}
body.is-scrolled{ --nav-h-live:var(--nav-h-compact); }

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scrollbar-color:var(--blue-700) var(--chalk-dim);}
::selection{background:var(--blue-900);color:#fff;}
.cta-band ::selection,.structure ::selection,.events ::selection,.site-footer ::selection{background:var(--gold-light);color:var(--gold-ink);}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--chalk);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--blue-900);
}
h1,h2{text-wrap:balance;}
/* Kein pauschales Versal-Uppercase mehr auf h1/h2: Unsere Headlines sind
   ganze, mit Punkt endende Sätze ("Fußball, bei dem der Ball im
   Mittelpunkt steht."), keine kurzen Poster-Titel — in Versalien wirkt
   das schnell wie ein Meme statt wie eine seriöse Überschrift. Oswalds
   kondensiert-fette Form trägt die "Sport"-Note bereits ohne Versalien;
   die kleinen Mono-Eyebrows/Badges bleiben die einzige Großschreibung. */
p{margin:0 0 1em;color:var(--ink-soft);}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red-600);
  display:flex;align-items:center;gap:.5em;
  margin-bottom:1.3em;
}
/* the "ball" signature marker: a stitched dot used as a
   consistent bullet across eyebrows, list markers and links */
.eyebrow::before,
.ball-marker{
  content:"";
  width:9px;height:9px;
  border-radius:50%;
  background:var(--red-600);
  background-image:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.55) 0 1px, transparent 1px),
    linear-gradient(90deg, transparent 45%, rgba(0,0,0,.25) 46%, transparent 50%);
  flex:none;
}

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

button{font-family:inherit;cursor:pointer;}

/* ---------------------------------------------------------
   Skip link
--------------------------------------------------------- */
.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--blue-900);color:#fff;padding:12px 18px;z-index:999;
}
.skip-link:focus{left:16px;top:16px;}

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
.hero{
  position:relative;min-height:min(86vh,780px);
  display:flex;align-items:flex-end;
  background:var(--blue-900);
  overflow:hidden;
}
.hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.8;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg, rgba(20,30,80,.7) 2%, rgba(20,30,80,.22) 42%, rgba(20,30,80,.04) 85%);
}
/* Schräger, dynamischer Farbblock über dem Foto — die "Feature-Banner"-
   Note des Redesigns, angelehnt an große Sport-Klub-Startseiten. Läuft
   diagonal von unten links nach oben rechts und bündelt so den Blick auf
   die Headline, ohne das Foto komplett zuzudecken. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(115deg, rgba(20,30,80,.94) 0%, rgba(20,30,80,.75) 34%, transparent 58%);
  clip-path:polygon(0 0, 64% 0, 42% 100%, 0 100%);
}
.hero-content{position:relative;z-index:2;padding:96px 0 88px;color:#fff;}
/* Einstiegs-Choreografie (nur Startseite, einmal pro Aufruf): der schräge
   Farbblock fährt von links ein, Foto zoomt langsam aus, Textzeilen steigen
   versetzt nach. Alles über transform/opacity/clip-path, unter 1s gesamt. */
.hero::after{animation:hero-sweep .9s var(--ease-out) both;}
.hero img{animation:hero-settle 1.8s var(--ease-out) both;}
.hero-content > *{animation:hero-rise .7s var(--ease-out) both;}
.hero-content > :nth-child(1){animation-delay:.18s;}
.hero-content > :nth-child(2){animation-delay:.28s;}
.hero-content > :nth-child(3){animation-delay:.4s;}
.hero-content > :nth-child(4){animation-delay:.5s;}
@keyframes hero-sweep{from{clip-path:polygon(0 0, 0 0, 0 100%, 0 100%);}}
@keyframes hero-settle{from{transform:scale(1.06);}to{transform:scale(1);}}
@keyframes hero-rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.hero-content h1{
  color:#fff;font-size:clamp(2.6rem,6.2vw,4.8rem);max-width:16ch;
  text-wrap:balance;
}
.hero-content p{color:#dfe6f2;max-width:46ch;font-size:1.08rem;}
.hero-eyebrow{color:#ffd9d6;}
.hero-eyebrow::before{background:#fff;}
.hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  padding:13px 24px;border-radius:999px;font-weight:700;font-size:.94rem;
  border:1px solid transparent;
  transition:background-color .2s var(--ease), border-color .2s var(--ease),
             color .2s var(--ease), transform .16s var(--ease-out);
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--red-600);color:#fff;}
.btn-gold{background:var(--gold);color:var(--gold-ink);}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn-dark{background:var(--blue-900);color:#fff;}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--red-500);}
  .btn-gold:hover{background:var(--gold-light);}
  .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}
  .btn-dark:hover{background:var(--blue-800);}
}
/* Pfeil-Icon als CSS-Maske (ein gezeichnetes Icon statt Unicode-Glyph),
   gleitet beim Hover ein Stück nach rechts — das gleiche Icon nutzen die
   Karten-Links (.go), damit die ganze Seite eine Pfeilsprache spricht. */
.btn-arrow::after,
.go::after{
  content:"";display:inline-block;width:.85em;height:.85em;flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .22s var(--ease-out);
}
.go{display:inline-flex;align-items:center;gap:.4em;}
.btn-back::before{
  content:"";display:inline-block;width:.85em;height:.85em;flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .22s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .btn-arrow:hover::after,
  a:hover .go::after,
  .go:hover::after{transform:translateX(4px);}
  .btn-back:hover::before{transform:translateX(-4px);}
}

/* ---------------------------------------------------------
   Match-Ticker — schmale Leiste direkt unter dem Hero, zeigt den
   nächsten Termin. Bewusst schmal/eilig gehalten (Ticker-Charakter),
   Gold-Trennlinie zum Hero als ruhiger Akzent.
--------------------------------------------------------- */
.match-ticker{
  background:var(--ink);border-bottom:3px solid var(--gold);
  overflow:hidden;
}
.match-ticker-inner{
  display:flex;align-items:center;gap:18px;
  padding:13px 24px;white-space:nowrap;overflow-x:auto;scrollbar-width:none;
}
.match-ticker-inner::-webkit-scrollbar{display:none;}
.match-ticker-label{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-light);flex:none;
}
.match-ticker-date{
  font-family:var(--font-mono);font-size:.82rem;color:#9aa6ba;flex:none;
  font-variant-numeric:tabular-nums;
}
.match-ticker-countdown{
  flex:none;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--gold-ink);background:var(--gold-light);
  padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums;
}
/* Pulsierender Punkt vor "Nächstes Event" — das eine, dauerhaft laufende
   Detail auf der Seite, bewusst klein und langsam (2,4 s). */
.live-dot{
  position:relative;width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--red-500);
}
.live-dot::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1.5px solid var(--red-500);opacity:0;
  animation:live-pulse 2.4s var(--ease-out) infinite;
}
@keyframes live-pulse{0%{transform:scale(.6);opacity:.9;}70%,100%{transform:scale(1.6);opacity:0;}}
.match-ticker-title{
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  color:#fff;flex:none;
}
.match-ticker-ort{color:#8b96a6;font-size:.85rem;flex:none;}
.match-ticker-link{
  margin-left:auto;flex:none;font-weight:700;font-size:.86rem;
  color:var(--gold-light);
}
.match-ticker-link:hover{color:var(--gold);}
@media (max-width:640px){
  .match-ticker-inner{gap:12px;padding:11px 20px;}
  .match-ticker-link{margin-left:0;}
}

/* ---------------------------------------------------------
   Ball-arc divider — the signature transition element.
   A dashed trajectory with a resting ball, used sparingly
   between major sections to suggest a pass moving the reader
   down the page.
--------------------------------------------------------- */
.ball-divider{
  height:64px;position:relative;max-width:1180px;margin:0 auto;
}
.ball-divider svg{position:absolute;left:50%;transform:translateX(-50%);top:0;overflow:visible;}
/* Der Ball rollt entlang der ersten Hälfte der Flugbahn bis zur Ruheposition
   in der Mitte, sobald der Trenner sichtbar wird (main.js setzt .is-visible).
   Ohne JS oder ohne offset-path-Unterstützung liegt er wie bisher statisch
   in der Mitte (cx/cy im Markup). */
@supports (offset-path: path('M0 0 L1 1')){
  .ball-divider circle{
    cx:0;cy:0;
    offset-path:path('M0 8 Q120 8 120 32');
    offset-rotate:0deg;
    offset-distance:100%;
  }
  .js-reveal .ball-divider:not(.is-visible) circle{offset-distance:0%;opacity:0;}
  .js-reveal .ball-divider.is-visible circle{
    transition:offset-distance .9s var(--ease-out), opacity .3s var(--ease);
  }
}
.js-reveal .ball-divider path{opacity:0;transition:opacity .6s var(--ease);}
.js-reveal .ball-divider.is-visible path{opacity:1;}

/* ---------------------------------------------------------
   Sections
--------------------------------------------------------- */
/* Abstandsskala: großzügig auf Desktop, fließend kleiner auf Mobil */
:root{--section:clamp(72px, 8.5vw, 128px);--section-sm:clamp(56px, 6vw, 88px);}
section{padding:var(--section) 0;}
.section-alt{background:var(--surface-2);}
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:center;
}
.split img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;}
.split.reverse .split-media{order:2;}
.split h2{font-size:clamp(1.7rem,3vw,2.3rem);}
.lede{font-size:1.08rem;max-width:44ch;}

/* Section without an image — single, narrower column instead of an
   empty second grid track. */
.split-solo{grid-template-columns:minmax(0,62ch) 1fr;}

/* Reveal-on-scroll for content sections. Guarded behind .js-reveal so a
   page with JS disabled or failed shows everything immediately — see
   assets/js/main.js. */
.js-reveal .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);}
.js-reveal .reveal.is-visible{opacity:1;transform:none;}
/* Gruppen (Kachel-Raster, Karten-Grids, Listen): die Kinder erscheinen
   gestaffelt, 60 ms Abstand, maximal ~0,7 s Gesamtverzögerung. Als Animation
   mit fill:backwards statt Transition, damit der Hover-Transform der Karten
   danach wieder frei ist. */
.js-reveal .reveal-group > *{opacity:0;}
.js-reveal .reveal-group.is-visible > *{
  opacity:1;
  animation:reveal-rise .65s var(--ease-out) backwards;
  animation-delay:calc(var(--i, 0) * 60ms);
}
.reveal-group > :nth-child(1){--i:0;} .reveal-group > :nth-child(2){--i:1;}
.reveal-group > :nth-child(3){--i:2;} .reveal-group > :nth-child(4){--i:3;}
.reveal-group > :nth-child(5){--i:4;} .reveal-group > :nth-child(6){--i:5;}
.reveal-group > :nth-child(7){--i:6;} .reveal-group > :nth-child(8){--i:7;}
.reveal-group > :nth-child(9){--i:8;} .reveal-group > :nth-child(n+10){--i:9;}
@keyframes reveal-rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

.pill-list{list-style:none;padding:0;margin:0 0 1.4em;display:flex;flex-direction:column;gap:10px;}
.pill-list li{
  display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft);font-size:.98rem;
}
.pill-list li::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--grass);
  margin-top:7px;flex:none;
}

/* ---------------------------------------------------------
   Team grid (Mannschaften overview)
--------------------------------------------------------- */

.team-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px;
}
/* Explizites 3-Spalten-Raster auf breiteren Bildschirmen (Content-Grid-
   Vorgabe), darunter fällt es auf das auto-fill-Verhalten oben zurück. */
@media (min-width:900px){
  .team-grid{grid-template-columns:repeat(3,1fr);}
}
.team-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .team-card:hover{transform:translateY(-6px);box-shadow:0 22px 36px -16px rgba(20,30,80,.3);}
}
.team-card:active{transform:scale(.985);}
.team-card .thumb{aspect-ratio:4/3;overflow:hidden;background:var(--blue-050);position:relative;}
.team-card .thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s var(--ease);
}
.team-card:hover .thumb img,
.team-card:focus-visible .thumb img{transform:scale(1.08);}
.team-card .thumb .tag{
  position:absolute;bottom:10px;left:10px;background:rgba(20,30,80,.85);color:#fff;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
  padding:4px 9px;border-radius:999px;
}
/* Kategorie-Badge: Rot fürs Erwachsenenteam, Blau für alle Jugendbereiche —
   auf einen Blick erkennbar, welche Altersstufe eine Kachel zeigt. */
.badge{
  position:absolute;top:10px;left:10px;color:#fff;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;
  z-index:1;
}
.badge--red{background:var(--red-600);}
.badge--blue{background:var(--blue-700);}
.team-card .body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column;}
.team-card h3{font-size:1.05rem;margin-bottom:4px;}
/* Jahrgang als Teil der Überschrift — leichter und in Gold, damit Name und
   Jahrgang auf einen Blick zusammengehören, der Name aber vorne bleibt. */
.team-jahrgang{
  font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.06em;
  color:var(--gold);white-space:nowrap;text-transform:uppercase;vertical-align:.15em;
}
.team-card .meta{font-size:.84rem;color:var(--ink-soft);margin-bottom:10px;}
.team-card .go{margin-top:auto;font-size:.86rem;font-weight:700;color:var(--red-600);}

/* ---------------------------------------------------------
   Vereinsstruktur — Wegweiser-Kacheln zwischen Hero und
   "Was wir machen": wer beim SCN wo hingehört, auf einen Blick.
--------------------------------------------------------- */
.structure{
  background:var(--blue-900);color:#fff;
  padding:var(--section) 0;
  background-image:radial-gradient(circle at 88% 8%, rgba(255,255,255,.06), transparent 45%);
}
.structure-heading{
  color:#fff;
  font-size:clamp(2.5rem, 9.5vw, 6rem);
  line-height:.94;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  max-width:14ch;
  margin-bottom:.45em;
}
/* Zweite Zeile als reine Kontur — die Poster-Typografie großer Klub-Seiten,
   mit Oswald ohne zusätzliche Schrift. Fallback ohne text-stroke: normal weiß. */
.structure-heading .outline{
  color:#fff;
  -webkit-text-stroke:2px #fff;
  paint-order:stroke fill;
}
@supports (-webkit-text-stroke:1px #fff){
  .structure-heading .outline{color:transparent;}
}
.club-stats{
  list-style:none;margin:0 0 56px;padding:22px 0 0;
  display:flex;flex-wrap:wrap;gap:12px 0;
  border-top:1px solid rgba(255,255,255,.16);
}
.club-stats li{
  display:flex;flex-direction:column;gap:2px;
  padding:0 40px 0 0;margin-right:40px;
  border-right:1px solid rgba(255,255,255,.16);
}
.club-stats li:last-child{border-right:0;margin-right:0;padding-right:0;}
.club-stat-num{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;color:#fff;
  letter-spacing:-0.01em;font-variant-numeric:tabular-nums;
}
.club-stat-num small{
  font-family:var(--font-mono);font-weight:500;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:#a8bad6;margin-right:.35em;
  vertical-align:.35em;
}
.club-stat-label{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:#a8bad6;
}

/* Links bleibt beim Runterscrollen stehen, bis die Kachelspalte rechts
   zu Ende ist — dasselbe Prinzip wie im Mouratoglou-Vorbild, mit
   eigenem Text und eigener Farbwelt. */
.structure-row{
  display:flex; align-items:flex-start; gap:56px;
}
.structure-pin{
  flex:0 0 30%;
  position:sticky;
  top:calc(var(--promo-h) + var(--nav-h) + 40px);
}
.structure-lede{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.7rem, 2.8vw, 2.6rem);
  line-height:1.12; letter-spacing:-0.01em;
  color:#fff; margin:0;
}

.structure-grid{
  flex:1 1 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.structure-tile{
  position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:4px;
  display:flex;align-items:flex-end;isolation:isolate;
  background:var(--blue-800);
}
.structure-tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;transition:transform .5s var(--ease);
}
.structure-tile::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg, rgba(9,22,41,.72) 16%, rgba(9,22,41,.15) 55%, rgba(9,22,41,0) 90%);
}
.structure-tile::after{transition:opacity .35s var(--ease);}
@media (hover:hover) and (pointer:fine){
  .structure-tile:hover img{transform:scale(1.05);}
  .structure-tile:hover::after{opacity:.85;}
}
.structure-tile:focus-visible img{transform:scale(1.05);}
.structure-tile:active img{transform:scale(1.02);}
.structure-tile-label{
  position:relative;z-index:1;padding:20px;
  display:flex;flex-direction:column;gap:4px;width:100%;
  font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:#fff;
  letter-spacing:-0.01em;line-height:1.1;
}
.structure-tile-label .go{
  font-family:var(--font-mono);font-weight:500;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:#d5deed;
}

@media (max-width:860px){
  .structure-row{flex-direction:column;gap:32px;}
  .structure-pin{position:static;flex:none;}
}

@media (max-width:640px){
  .structure{padding:64px 0 60px;}
  .structure-heading{margin-bottom:.4em;}
  .structure-grid{gap:12px;}
  .structure-tile-label{font-size:1.1rem;padding:14px;}
  .structure-tile-label .go{font-size:.6rem;}
  .club-stats{margin-bottom:40px;gap:16px 0;}
  .club-stats li{padding-right:18px;margin-right:18px;}
  .club-stats li:nth-child(2){border-right:0;}
  .footer-wordmark small{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .structure-tile img{transition:none;}
}

/* ---------------------------------------------------------
   Trainer contact card
--------------------------------------------------------- */
.trainer-card{
  display:flex;gap:18px;align-items:center;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;
  transition:border-color .2s var(--ease);
}
.trainer-card:hover{border-color:var(--blue-700);}
.trainer-card .avatar{
  width:64px;height:64px;border-radius:50%;background:var(--blue-050);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;color:var(--blue-700);flex:none;
}
.trainer-card .avatar--photo{overflow:hidden;background:var(--chalk-dim);}
.trainer-card .avatar--photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* Vorstand: Foto rechts neben dem Text, Text bleibt links bündig. */
.trainer-card--board{justify-content:space-between;}
.trainer-card .avatar--right{order:2;margin-left:auto;}
.trainer-card h4{margin:0 0 3px;font-size:1.02rem;color:var(--blue-900);}
.trainer-card .role{font-size:.8rem;color:var(--ink-soft);margin-bottom:6px;}
.trainer-card .contact-line{font-family:var(--font-mono);font-size:.86rem;color:var(--blue-700);display:block;}

/* Kontaktseite: Trainer-Verzeichnis nach Bereich gegliedert, damit die
   45 Karten nicht als eine Wand stehen. */
.directory-group + .directory-group{margin-top:64px;}
.directory-group .section-head{margin-bottom:16px;}
.directory-group .section-head h2{font-size:1.15rem;text-transform:none;letter-spacing:0;}

/* ---------------------------------------------------------
   Probetraining CTA band + Form (global — appears on every page)
--------------------------------------------------------- */
.cta-band{
  background:var(--blue-900);color:#fff;padding:var(--section-sm) 0;
  background-image:radial-gradient(circle at 85% 20%, rgba(255,255,255,.06), transparent 45%);
}
.cta-band h2{color:#fff;}
.cta-band .lede{color:#c9d4e5;}

.trial-form{
  background:var(--white);color:var(--ink);border-radius:6px;
  padding:32px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);
}
.trial-form h3{margin-bottom:4px;}
/* Team-Frage: helle Sektion, Formularkarte mit Rahmen statt Schatten */
.teamfrage .trial-form{box-shadow:none;border:1px solid var(--line);}
.teamfrage .lede{max-width:46ch;}
.teamfrage-hint a{color:var(--red-600);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.teamfrage .form-success:focus,.teamfrage .form-error:focus{outline:none;}
.trial-form .sub{color:var(--ink-soft);font-size:.9rem;margin-bottom:22px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-grid .full{grid-column:1/-1;}
label{display:block;font-size:.82rem;font-weight:700;color:var(--blue-900);margin-bottom:6px;}
input,select,textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 12px;font-family:inherit;font-size:.94rem;background:var(--white);
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
input,select,textarea{caret-color:var(--red-600);}
input:focus,select:focus,textarea:focus{border-color:var(--blue-600);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(45,68,182,.14);}
textarea{resize:vertical;min-height:80px;}
.form-foot{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap;}
.form-note{font-size:.78rem;color:var(--ink-soft);}
.form-success{
  display:none;background:#eef7ec;border:1px solid #bfe3b6;color:var(--grass-dim);
  padding:14px 16px;border-radius:var(--radius);font-size:.9rem;margin-bottom:16px;
}
.form-success.is-visible{display:block;}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.site-footer{background:var(--ink);color:#b7c0cc;padding:64px 0 36px;overflow:hidden;}
/* Große Wortmarke über dem Footer-Raster — rein dekorativ (aria-hidden),
   sehr niedriger Kontrast ist hier Absicht: ein Wasserzeichen, kein Text. */
.footer-wordmark{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(3.2rem,11.5vw,9.8rem);line-height:.9;letter-spacing:-0.03em;
  color:rgba(255,255,255,.055);margin:0 0 36px;white-space:nowrap;
  display:flex;align-items:baseline;gap:.25em;
}
.footer-wordmark small{
  font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;
  color:rgba(255,255,255,.28);text-transform:uppercase;
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px;
}
.footer-grid h5{
  color:#fff;font-family:var(--font-display);font-size:.85rem;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;
}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.footer-grid a{
  font-size:.9rem;color:#b7c0cc;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  transition:color .18s var(--ease), text-decoration-color .18s var(--ease);
}
.footer-grid a:hover{color:#fff;text-decoration-color:var(--gold-light);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.8rem;color:#7c8798;
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width:900px){
  section{padding:var(--section-sm) 0;}
  .split,.footer-grid{grid-template-columns:1fr;gap:32px;}
  .split.reverse .split-media{order:-1;}
  .split-media{order:-1;}
  .form-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .trial-form{padding:24px;}
}

@media (max-width:760px){
  .hero{min-height:auto;}
  .hero-content{padding:64px 0 56px;}
  .hero-actions .btn{flex:1 1 100%;justify-content:center;}
  .footer-grid{grid-template-columns:1fr;}
  .trainer-card{flex-direction:column;align-items:flex-start;}
}

/* Respect reduced-motion preferences: Bewegung raus, Zustandswechsel
   (Farben, Opazität) bleiben lesbar. Der Live-Punkt hört auf zu pulsieren. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .live-dot::after{display:none;}
  .js-reveal .reveal,.js-reveal .reveal-group > *{opacity:1;transform:none;}
}

/* Druck: Reveal-Zustände aufheben, sonst fehlen noch nicht gescrollte Abschnitte */
@media print{
  .js-reveal .reveal,.js-reveal .reveal-group > *,.js-reveal .ball-divider path,.js-reveal .ball-divider circle{opacity:1 !important;transform:none !important;}
  .site-header,.cta-band,.site-footer{display:none !important;}
  #main{padding-top:0 !important;}
}

/* Full-width figure used on interior pages */
.hero-figure img{
  width:100%;max-height:420px;object-fit:cover;border-radius:var(--radius);
}

/* Anchors must not disappear behind the fixed header (promo bar + nav
   together, the tallest state — a little extra margin once the promo bar
   is dismissed is harmless, landing short under the header is not). */
[id]{scroll-margin-top:calc(var(--promo-h) + var(--nav-h-live) + 16px);}
body:has(.jumpbar) section[id]{scroll-margin-top:calc(var(--promo-h) + var(--nav-h-live) + 72px);}

/* Jump bar — quick overview of the team categories on a long page.
   Sticks directly under the fixed header; its height changes with the
   promo bar, so this mirrors the same two states as .site-header. */
.jumpbar{
  position:sticky;top:calc(var(--promo-h) + var(--nav-h-live));z-index:80;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:12px 0;margin-bottom:8px;
  transition:top .25s var(--ease);
}
body.promo-dismissed .jumpbar{ top:var(--nav-h-live); }
.jumpbar ul{
  list-style:none;margin:0;padding:0;display:flex;gap:10px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.jumpbar ul::-webkit-scrollbar{display:none;}
.jumpbar a{
  display:inline-block;white-space:nowrap;
  border:1px solid var(--line);background:var(--white);
  color:var(--ink-soft);font-size:.85rem;font-weight:600;
  padding:8px 15px;border-radius:999px;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease-out);
}
.jumpbar a:hover,.jumpbar a.is-active{
  background:var(--blue-900);border-color:var(--blue-900);color:#fff;
}
.jumpbar a:active{transform:scale(.97);}
.jumpbar a .count{opacity:.65;font-family:var(--font-mono);font-size:.78rem;margin-left:5px;}

/* Section headings on the team page get a little more presence */
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:32px;border-bottom:1px solid var(--line);padding-bottom:14px;
}
.section-head h2{margin:0;font-size:clamp(1.5rem,2.6vw,2rem);text-transform:uppercase;letter-spacing:-0.01em;}
.section-head .count{
  font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft);
  letter-spacing:.06em;text-transform:uppercase;
}
@media (max-width:760px){
  .jumpbar{padding:10px 0;}
}

/* ---------------------------------------------------------
   Events — horizontal rail. Sits right under the hero/match-ticker
   now, so it's deliberately light: a quick "what's on" glance, not
   a second homepage section competing for attention. Compact
   16:10 cards instead of tall 3:4 portraits keep it to one
   short band regardless of screen width.
--------------------------------------------------------- */
.events{
  background:var(--blue-900);color:#fff;
  padding:64px 0 72px;
  background-image:radial-gradient(circle at 12% 15%, rgba(255,255,255,.07), transparent 40%);
}
.events h2{color:#fff;font-size:1.5rem;margin:0;}
.events-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;margin-bottom:28px;
}
.events-head-actions{display:flex;align-items:center;gap:16px;}
.events-shop-link{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;
  color:#c9d4e5;transition:color .18s var(--ease);
}
.events-shop-link:hover{color:var(--gold-light);}
.rail-nav{display:flex;gap:8px;flex:none;}
.rail-nav button{
  width:34px;height:34px;border-radius:50%;
  background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;
  font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease), transform .12s var(--ease-out);
}
.rail-nav button:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:#fff;}
.rail-nav button:active:not(:disabled){transform:scale(.94);}
.rail-nav button svg{display:block;}
.rail-nav button:disabled{opacity:.3;cursor:default;}

.rail{
  display:flex;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail::-webkit-scrollbar{display:none;}

.event-card{
  flex:0 0 336px;scroll-snap-align:start;
  position:relative;border-radius:4px;overflow:hidden;
  aspect-ratio:16/10;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--blue-800);
  isolation:isolate;
}
.event-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;transition:transform .5s var(--ease);
}
.event-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg, rgba(9,22,41,.96) 18%, rgba(9,22,41,.55) 58%, rgba(9,22,41,.12) 100%);
}
.event-card{transition:transform .25s var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .event-card:hover{transform:translateY(-4px);}
  .event-card:hover img{transform:scale(1.05);}
}
.event-card:focus-visible img{transform:scale(1.05);}
.event-card:active{transform:scale(.985);}

.event-date{
  position:absolute;top:12px;left:12px;
  background:var(--white);color:var(--blue-900);
  border-radius:3px;padding:6px 10px;text-align:center;
  font-family:var(--font-mono);line-height:1.1;
}
.event-date{font-variant-numeric:tabular-nums;}
.event-date .d{display:block;font-size:1.15rem;font-weight:500;}
.event-date .m{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7;}
.event-flag{
  position:absolute;top:12px;right:12px;
  background:var(--red-600);color:#fff;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 11px;border-radius:999px;
}
.event-body{padding:15px 17px;position:relative;}
.event-body h3{color:#fff;font-size:1.15rem;line-height:1.25;margin-bottom:3px;}
.event-body .where{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;
  color:#a8bad6;text-transform:uppercase;margin-bottom:5px;display:block;
}
.event-body p{
  color:#d5deed;font-size:.95rem;margin:0 0 7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.event-body .go{font-size:.92rem;font-weight:700;color:#fff;}

.rail-hint{
  display:none;margin-top:10px;font-size:.74rem;color:#8fa3c2;
  font-family:var(--font-mono);letter-spacing:.06em;
}

@media (max-width:760px){
  .events{padding:38px 0 42px;}
  .events-head{gap:14px;}
  .events-head h2{font-size:1.3rem;}
  .rail-nav{display:none;}
  .rail-hint{display:block;}
  .event-card{flex-basis:78vw;}
  /* let the rail bleed to the screen edge so the next card peeks in */
  .rail{margin:0 -24px;padding:0 24px 6px;}
}

/* Event detail rows on the events page */
.event-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.event-row + .event-row{margin-top:72px;}
.event-row img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%;}
.event-row:nth-child(even) .event-row-media{order:2;}
.event-meta{
  list-style:none;padding:0;margin:0 0 20px;
  display:grid;grid-template-columns:auto 1fr;gap:8px 18px;
  font-size:.92rem;
}
.event-meta dt{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--red-600);padding-top:3px;
}
.event-meta dd{margin:0;color:var(--ink-soft);}
@media (max-width:900px){
  .event-row{grid-template-columns:1fr;gap:28px;}
  .event-row:nth-child(even) .event-row-media{order:-1;}
  .event-row-media{order:-1;}
}

/* ---------------------------------------------------------
   Form states
--------------------------------------------------------- */

/* Honeypot. Bots fill hidden fields; people must never see it.
   It is moved right off the canvas rather than hidden with
   display:none, because some bots skip undisplayed inputs.
   The field is also aria-hidden and removed from tab order. */
.hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden;
}

.form-error{
  display:none;
  background:#fdecea;border:1px solid #f2b8b2;color:#8c1f18;
  padding:14px 16px;border-radius:var(--radius);
  font-size:.9rem;margin-bottom:16px;
}
.form-error.is-visible{display:block;}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"]{
  border-color:var(--red-600);
  background:#fff8f7;
}

/* ---------------------------------------------------------
   Two-click embed placeholder — used for Google Maps (kontakt.php)
   and for the fußball.de Heimspiele widget (home.php). Loading either
   would contact a third party before the visitor had any say in it,
   so the embed markup sits inertly in a data attribute until asked for.
--------------------------------------------------------- */
.embed-consent{
  aspect-ratio:4/3;
  background:var(--blue-050);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;
}
.embed-consent.is-loaded{
  display:block;padding:0;border:none;background:none;aspect-ratio:auto;
}
.embed-consent-inner{max-width:34ch;}
.embed-consent-title{
  font-family:var(--font-display);font-weight:700;
  color:var(--blue-900);margin-bottom:6px;
}
.embed-consent-text{font-size:.88rem;color:var(--ink-soft);margin-bottom:16px;}
.embed-consent-alt{font-size:.82rem;margin:14px 0 0;}
.embed-consent-alt a{color:var(--blue-700);font-weight:600;text-decoration:underline;}

/* ---------------------------------------------------------
   Legal pages — long-form reading, generous rhythm
--------------------------------------------------------- */
.legal{font-size:1rem;}
.legal h2{
  font-size:1.3rem;margin:2.2em 0 .6em;
  padding-top:1.2em;border-top:1px solid var(--line);
}
.legal h2:first-child{border-top:none;padding-top:0;margin-top:0;}
.legal h3{font-size:1.05rem;margin:1.6em 0 .4em;}
.legal p,.legal li{color:var(--ink-soft);line-height:1.7;}
.legal ul,.legal ol{padding-left:1.2em;margin:0 0 1em;}
.legal li{margin-bottom:.4em;}
.legal a{color:var(--blue-700);text-decoration:underline;text-underline-offset:2px;}
.legal strong{color:var(--ink);}
/* Placeholders the club still has to fill in */
.legal em{
  background:#fff5cc;color:#6b5200;font-style:normal;
  padding:1px 5px;border-radius:2px;font-size:.94em;
}
.legal-date{
  margin-top:2.5em;padding-top:1.2em;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:.8rem;color:var(--ink-soft);
}

.footer-legal{display:flex;gap:18px;flex-wrap:wrap;}
.footer-legal a{color:#7c8798;}
.footer-legal a:hover{color:#fff;}

/* ---------------------------------------------------------
   Typografie- und Abstands-Utilities (Redesign-Pass)
   Vereinheitlicht Überschriftengrößen und Abstände, die zuvor
   pro Template als Inline-Styles mit leicht abweichenden Werten
   gesetzt waren.
--------------------------------------------------------- */
.h1-page{font-size:clamp(2rem,4.5vw,3.2rem);}
.h1-page--small{font-size:clamp(1.9rem,4vw,2.8rem);}
.h2-tight{font-size:1.6rem;}
.section-tight-header{padding:var(--section-sm) 0 16px;}
.section-header-loose{padding:var(--section-sm) 0 48px;}
.section-tight{margin-top:24px;}
.lede-spaced{margin-bottom:40px;}
.trainer-card-row{margin-bottom:16px;}
.hero-figure-tight{padding:24px 0 0;}

/* Teamseite: Trainer:innen links, Training als eigene Karte rechts — die
   zweite Spalte bleibt so nie leer, auch ohne zweites Foto. */
.team-info{display:grid;grid-template-columns:1.1fr .9fr;gap:40px 56px;align-items:start;}
.team-info .eyebrow{margin-bottom:14px;}
.training-card{
  background:var(--blue-900);color:#fff;border-radius:8px;padding:40px 44px 44px;
}
.training-card .eyebrow{color:#ffd9d6;}
.training-card .eyebrow::before{background:#fff;}
.training-card h2{color:#fff;font-size:1.5rem;margin-bottom:14px;}
.training-list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;}
.training-list li{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid rgba(255,255,255,.14);color:#fff;font-size:1rem;
}
.training-list li:last-child{border-bottom:1px solid rgba(255,255,255,.14);}
.training-list .ort{color:#a8bad6;font-size:.88rem;}
.training-card .btn + .btn{margin-left:10px;}
.training-card .training-links{display:flex;flex-wrap:wrap;gap:10px;}
.team-second{margin-top:40px;}
.team-second img{border-radius:var(--radius);aspect-ratio:16/9;object-fit:cover;width:100%;}
@media (max-width:900px){
  .team-info{grid-template-columns:1fr;gap:32px;}
}

/* Team-Hero: das Mannschaftsfoto bleibt unangetastet scharf und ungefiltert
   (kein Dunkelblau-Overlay wie beim großen Startseiten-Hero) — Titel und
   Kategorie sitzen stattdessen in einer eigenen, ruhigen Farbleiste direkt
   darunter, nicht auf dem Bild. */
.team-hero-media{
  aspect-ratio:16/9;overflow:hidden;background:var(--blue-050);
}
.team-hero-media img{width:100%;height:100%;object-fit:cover;}
.team-hero-bar{
  background:var(--blue-900);color:#fff;padding:44px 0 52px;
}
.team-hero-bar h1{
  color:#fff;margin:0;
  font-size:clamp(2.6rem,7vw,5.4rem);line-height:.96;
  text-transform:uppercase;letter-spacing:-0.02em;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em .45em;
}
.team-hero-bar .team-jahrgang{
  font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;
  font-size:clamp(1.2rem,2.4vw,1.9rem);color:var(--gold-light);vertical-align:baseline;
}
.team-hero-bar .hero-eyebrow{color:#ffd9d6;}
.team-hero-bar .hero-eyebrow::before{background:#fff;}

/* ---------------------------------------------------------
   External-CTA card — Platzhalter für die vier Formulare, die
   künftig auf der Vereinssoftware-Subdomain liegen (Vereinseintritt,
   IBAN-Änderung, Kündigung, später Probetraining). Ohne gepflegte
   URL erscheint dieselbe Karte gedämpft mit einem Hinweis-Badge,
   nie ein toter Link.
--------------------------------------------------------- */
.cta-card{
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  padding:26px 28px;display:flex;flex-direction:column;gap:14px;
  align-items:flex-start;
}
.cta-card h3{margin:0;font-size:1.1rem;}
.cta-card p{margin:0;font-size:.92rem;}
.cta-card--pending{background:var(--chalk-dim);}
.cta-card--pending h3,.cta-card--pending p{color:var(--ink-soft);}
.cta-card-badge{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);
  background:var(--line);padding:5px 11px;border-radius:999px;
}

/* ---------------------------------------------------------
   Mitgliedschaftsseite — weißer Grund, ruhiger Rhythmus (56/64px),
   ein Schwerpunkt: der Mitglieder-Schalter.
--------------------------------------------------------- */
body.template-mitgliedschaft{background:var(--white);}
.member-head{padding:var(--section-sm) 0 24px;}
.member-head .lede{max-width:56ch;font-size:1.15rem;}

.member-desk{padding:24px 0 var(--section);}
.desk{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.desk-row{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px 48px;
  padding:40px 48px;background:var(--white);
}
.desk-row + .desk-row{border-top:1px solid var(--line);}
.desk-row h2{font-size:1.55rem;margin:0 0 8px;}
.desk-row p{margin:0;max-width:52ch;}
.desk-row--primary{background:var(--blue-900);}
.desk-row--primary h2{color:#fff;font-size:2.1rem;}
.desk-row--primary p{color:#c9d4e5;}
.desk-row .btn{white-space:nowrap;}

.member-fees{padding:var(--section) 0;background:var(--surface-2);}
.fees-split{align-items:start;}
.fees-billing p{max-width:48ch;font-size:.95rem;}
.fees-panel{display:flex;flex-direction:column;gap:32px;}
.fees-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.fees-table caption{
  text-align:left;padding:20px 28px 14px;
  font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--blue-900);
  background:var(--white);
}
.fees-table th,.fees-table td{padding:17px 28px;border-top:1px solid var(--line);font-size:1rem;}
.fees-table th{text-align:left;font-weight:600;color:var(--ink);}
.fees-table td{
  text-align:right;white-space:nowrap;color:var(--blue-900);font-weight:700;
  font-variant-numeric:tabular-nums;
}
.fees-period{margin-left:.5em;font-weight:400;color:var(--ink-soft);font-size:.85rem;}

.member-project{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--blue-900);color:#fff;
  padding:0; /* das Foto füllt die volle Bandhöhe, der Textteil trägt den Abstand */
}
.member-project-media{position:relative;min-height:420px;}
.member-project-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.member-project-body{padding:var(--section) clamp(24px,6vw,96px);align-self:center;}
.member-project-body .eyebrow{color:#ffd9d6;}
.member-project-body .eyebrow::before{background:#fff;}
.member-project-body h2{color:#fff;font-size:clamp(1.8rem,3vw,2.5rem);max-width:18ch;}
.member-project-body .lede{color:#c9d4e5;max-width:46ch;}

.member-questions{padding:var(--section) 0;text-align:center;}
.member-questions .container{max-width:640px;}
.member-questions h2{font-size:clamp(1.6rem,2.6vw,2.1rem);}
.member-questions .lede{margin:0 auto 32px;}

@media (max-width:900px){
  .member-project{grid-template-columns:1fr;}
  .member-project-media{min-height:240px;}
  .member-project-body{padding:48px 24px;}
}
@media (max-width:640px){
  .member-desk{padding:16px 0 var(--section-sm);}
  .desk-row{grid-template-columns:1fr;padding:28px 22px;gap:18px;}
  .desk-row .btn{justify-self:start;}
  .desk-row--primary h2{font-size:1.6rem;}
  .fees-table th,.fees-table td{padding:14px 18px;}
}

/* ---------------------------------------------------------
   Zukunftsrasen-Teaser (Startseite) — leicht grün akzentuiert
   statt vollflächig, damit es neben dem dunkelblauen Termine-Band
   und der hellen Vereinsstruktur als eigener, ruhiger Ton wirkt.
--------------------------------------------------------- */
.zukunftsrasen{background:var(--surface-2);padding:var(--section) 0;}
.zukunftsrasen h2{max-width:16ch;}
.zukunftsrasen-inner{align-items:center;}
.zukunftsrasen-facts{list-style:none;margin:22px 0 26px;padding:0;display:flex;flex-direction:column;gap:12px;}
.zukunftsrasen-facts li{display:flex;align-items:center;gap:12px;font-size:.96rem;color:var(--ink-soft);}
.zukunftsrasen-fact-icon{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--white);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.zukunftsrasen-fact-icon svg{
  width:16px;height:16px;fill:none;stroke:var(--grass);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.zukunftsrasen-fact-icon svg path[stroke-width]{fill:none;}
.zukunftsrasen-media{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px;}
.zukunftsrasen-diagram{width:100%;height:auto;display:block;}
.zr-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;
  fill:var(--ink-soft);
}
@media (max-width:760px){
  .zukunftsrasen{padding:56px 0;}
}

/* ---------------------------------------------------------
   Spendenseite Zukunftsrasen (/mitgliedschaft/zukunftsrasen)
--------------------------------------------------------- */
.hero--project{min-height:min(70vh,640px);}
.hero--project .hero-content h1{max-width:18ch;font-size:clamp(2.4rem,5.4vw,4.2rem);}
.project-why{align-items:start;}
.project-aside{position:sticky;top:calc(var(--promo-h) + var(--nav-h-live) + 32px);}
.project-text p,.abteilung-text p{max-width:58ch;}
.project-text p:last-child{font-weight:600;color:var(--ink);}
.project-aside{display:flex;flex-direction:column;gap:32px;}
.project-figures{
  margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.project-figures div{
  background:var(--blue-900);color:#fff;border-radius:6px;padding:28px 30px;
}
.project-figures dt{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:#a8bad6;margin-bottom:8px;
}
.project-figures dd{
  margin:0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1;font-variant-numeric:tabular-nums;
}
.project-aside .zukunftsrasen-facts{margin:0;}
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:24px;}
.help-card{
  background:var(--surface-2);border:1px solid var(--line);border-radius:6px;
  padding:36px 36px 40px;display:flex;flex-direction:column;gap:18px;
  align-items:flex-start;
}
.help-card h3{margin:0;font-size:1.35rem;}
.help-card p{margin:0;}
.help-card .btn{margin-top:auto;}
.help-note{font-size:.88rem;}
.bank-details{margin:0;display:flex;flex-direction:column;gap:14px;width:100%;}
.bank-details dt{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red-600);margin-bottom:2px;
}
.bank-details dd{margin:0;color:var(--ink);font-weight:600;}
.bank-iban{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.bank-iban-value{font-family:var(--font-mono);font-size:.98rem;letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.bank-copy{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;color:var(--blue-900);
  transition:background-color .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease-out);
}
.bank-copy:hover{border-color:var(--blue-900);}
.bank-copy:active{transform:scale(.96);}
.bank-copy.is-copied{background:var(--blue-900);color:#fff;border-color:var(--blue-900);}
.project-thanks{background:var(--blue-900);color:#fff;text-align:center;padding:var(--section) 0;}
.project-thanks-text{color:#dfe6f2;font-size:1.15rem;max-width:40ch;margin:0 auto 14px;}
.project-signature{color:#fff;font-family:var(--font-display);font-weight:600;font-size:1.3rem;margin:0 0 22px;}
.project-claim{
  margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-0.02em;color:var(--gold-light);line-height:1;
}
@media (max-width:900px){
  .help-grid{grid-template-columns:1fr;}
  .project-aside{position:static;}
}
@media (max-width:560px){
  .project-figures{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------
   Heimspiele-Widget (fußball.de) — teilt sich die Zwei-Klick-
   Consent-Mechanik mit der Kontakt-Karte (.embed-consent).
--------------------------------------------------------- */
.heimspiele{padding:var(--section) 0;}
.heimspiele-teams{
  display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px;
}
.heimspiele-teams li{
  list-style:none;font-family:var(--font-mono);font-size:.78rem;
  color:var(--blue-700);background:var(--blue-050);
  padding:6px 12px;border-radius:999px;
}

/* ---------------------------------------------------------
   Ankündigungen — kurze Textkarten in der Aktuelles-Leiste/Hub,
   abgeleitet von .event-card, aber ohne Bildpflicht.
--------------------------------------------------------- */
.ankuendigung-card{
  flex:0 0 336px;scroll-snap-align:start;
  background:var(--blue-800);color:#fff;border-radius:4px;
  padding:17px 19px;display:flex;flex-direction:column;gap:6px;
}
.ankuendigung-card .event-flag{position:static;align-self:flex-start;}
.ankuendigung-card h3{color:#fff;font-size:1.15rem;margin:0;}
.ankuendigung-card p{
  color:#d5deed;font-size:.95rem;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ankuendigung-card .go{font-size:.92rem;font-weight:700;color:#fff;margin-top:auto;}
@media (max-width:760px){
  .ankuendigung-card{flex-basis:78vw;}
}

/* Ankündigungen-Liste auf der Aktuelles-Hub-Seite (Fließtext-Karten,
   anders als die kompakten .ankuendigung-card in der Startseiten-Leiste) */
.ankuendigungen-list{display:flex;flex-direction:column;gap:20px;}
.ankuendigung-row{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;position:relative;
}
.ankuendigung-row.is-wichtig{border-color:var(--red-600);}
.ankuendigung-row .event-flag{position:static;display:inline-flex;margin-bottom:10px;}
.ankuendigung-row h3{margin-bottom:6px;font-size:1.1rem;}
.ankuendigung-row p{margin-bottom:12px;}