/* ============================================================================
   TuS Mulmshorn e.V. — Stylesheet
   Palette aus dem Wappen: reines Vereinsblau + Weiß. Dunkelton getönt navy.
   ============================================================================ */
/* Schriften — lokal, nie per Google-Link (Datenschutz) */
@font-face {
  font-family: 'Fraunces'; src: url('../schriften/fraunces.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces'; src: url('../schriften/fraunces-italic.woff2') format('woff2');
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Public Sans'; src: url('../schriften/public-sans.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
}

:root {
  --verein:       #1220d6;   /* Vereinsblau (kräftig, aus dem Wappen abgeleitet) */
  --verein-tief:  #0b1596;   /* dunkler fürs Hover */
  --verein-hell:  #4a62ff;   /* heller Akzent/Glow */
  --navy:         #0a1442;   /* dunkler Hero-Grund */
  --navy-tief:    #060b26;
  --tinte:        #111a38;   /* getönter Dunkelton (Text auf Hell) */
  --tinte-sanft:  #4a5878;
  --papier:       #f4f6fc;   /* getöntes Weiß */
  --papier-warm:  #eaeef8;
  --linie:        #d7deec;
  --signal:       #eab23a;   /* warmer Akzent, sehr sparsam */

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;      /* wird als woff2 lokal ergänzt */
  --text: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --seite: min(92vw, 1180px);
}

* { box-sizing: border-box; }
/* Dunkler html-Grund: beim Überscrollen (Gummiband oben/unten) darf kein
   weißer Balken hinter Hero/Footer aufblitzen — Seiten beginnen & enden dunkel. */
html { overflow-x: hidden; scroll-behavior: smooth; background: #060b26; }
body {
  margin: 0; font-family: var(--text); color: var(--tinte);
  background: var(--papier); -webkit-font-smoothing: antialiased; line-height: 1.62;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.02; letter-spacing: -.02em; margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* --- Knöpfe ---------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .95rem 1.6rem; border-radius: 2px; font-weight: 600; font-size: 1rem;
  background: var(--verein); color: #fff; border: 1.5px solid var(--verein);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), background .3s ease, box-shadow .3s ease;
  box-shadow: 0 8px 24px -10px rgba(18,32,214,.7);
}
.knopf:hover { background: var(--verein-tief); border-color: var(--verein-tief); transform: translateY(-2px); }
.knopf--geist { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); box-shadow: none; }
.knopf--geist:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.knopf--dunkel { color: var(--tinte); border-color: var(--linie); background: transparent; box-shadow: none; }
.knopf--dunkel:hover { background: var(--verein); color: #fff; border-color: var(--verein); }
/* Auf dunklen Flächen als heller Geist-Button (sonst dunkel-auf-dunkel = unsichtbar) */
.abschnitt--dunkel .knopf--dunkel, .darts-band .knopf--dunkel { color: #fff; border-color: rgba(255,255,255,.5); }
.abschnitt--dunkel .knopf--dunkel:hover, .darts-band .knopf--dunkel:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* ============================================================================
   HELD — das Herzstück: das Wappen implodiert zusammen
   ============================================================================ */
/* Hero pinnt: hohe Bahn (Scroll-Strecke), darin ein klebender 100vh-Bereich */
.held {
  position: relative; min-height: 100svh; overflow: hidden; color: #fff;
  display: grid; align-items: center; text-align: center;
  background: radial-gradient(120% 100% at 50% 40%, #0d1a3e 0%, #070e24 46%, #03050e 100%);
}
/* Marken-Bühne: dezent atmender Licht-Glow hinter dem Wappen */
/* Orts-Hintergrund (Platzhalter-Foto): dunkel-blau, ganz hinten, atmosphärisch */
.held__ort { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.held__ort img {
  position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover;
  filter: saturate(.62) brightness(.5) contrast(1.06) hue-rotate(200deg);
  opacity: .72; animation: kenburns-ort 34s ease-in-out infinite alternate;
}
@keyframes kenburns-ort {
  from { transform: scale(1.02) translate(0,0); }
  to   { transform: scale(1.12) translate(-2%,-1.5%); }
}
.held__ort::after {                       /* dunkelt Ränder ab, hält den Neon-Kontrast */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(100% 90% at 50% 42%, rgba(6,12,34,.05), rgba(3,5,14,.78) 100%),
    linear-gradient(180deg, rgba(3,5,14,.45) 0%, rgba(3,5,14,.06) 44%, rgba(3,5,14,.8) 100%);
}
@media (prefers-reduced-motion: reduce) { .held__ort img { animation: none; } }

.held__buehne { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.held__glow {
  position: absolute; left: 50%; top: 42%; width: min(92vw, 740px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(120,150,255,.5) 0%, rgba(74,98,255,.16) 44%, transparent 70%);
  filter: blur(10px); animation: atmen 11s ease-in-out infinite; transform-origin: 50% 50%;
}
@keyframes atmen {
  0%,100% { opacity: .82; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: 1;   transform: translate(-50%,-50%) scale(1.12); }
}
/* feine Vignette am Rand */
.held::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, transparent 54%, rgba(4,8,22,.55) 100%);
}

.held__inner {
  position: relative; z-index: 5; width: var(--seite); max-width: 900px; margin-inline: auto;
  display: grid; justify-items: center; text-align: center; gap: clamp(1.3rem, 3vh, 2.2rem);
  padding-block: clamp(3rem, 8vh, 5rem); will-change: transform, opacity;
}
.kicker {
  font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
  font-size: clamp(.66rem, 1.4vw, .82rem); color: #9db4ff; margin: 0;
  opacity: 0; animation: aufblenden .9s .15s both;
}

/* --- Das Wappen als leuchtendes NEON-Emblem ------------------------------ */
.held__wappen-buehne {
  position: relative; width: min(58vw, 320px); aspect-ratio: 1014 / 1200;
  animation: schweben 7s ease-in-out 1.4s infinite;
}
@keyframes schweben { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
/* Canvas der 3D-Medaille (Rückfall-Option, aktuell inaktiv) */
.held__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; opacity: 0; pointer-events: none; }
.gl-aktiv .held__wappen-buehne { animation: none; }
.gl-aktiv .held__wappen-karte { opacity: 0; pointer-events: none; }
.gl-aktiv .held__gl { pointer-events: auto; }

.held__wappen-karte { position: absolute; inset: 0; }

/* leuchtende Schild-Kontur mit umlaufendem Lichtpunkt */
.neon-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.neon-basis {
  fill: none; stroke: #5f97ff; stroke-width: 2.2; stroke-linejoin: round;
  opacity: .5; filter: url(#neonglow); animation: neonatmen 3.6s ease-in-out infinite;
}
.neon-lauf {
  fill: none; stroke: #eaf3ff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  filter: url(#neonglow);                 /* stroke-dasharray/-offset setzt hero-neon.js */
}
@keyframes neonatmen { 0%,100% { opacity: .38; } 50% { opacity: .7; } }

/* das Wappen selbst leuchtet, sitzt zentriert in der Kontur */
.held__wappen-gross {
  position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; z-index: 2;
  opacity: 0; animation: wappen-auf 1.2s .3s both, neonpuls 3.6s ease-in-out 1.6s infinite;
}
@keyframes wappen-auf { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes neonpuls {
  0%,100% { filter: drop-shadow(0 0 5px rgba(95,151,255,.8)) drop-shadow(0 0 18px rgba(63,123,255,.5)) drop-shadow(0 0 40px rgba(43,92,255,.3)); }
  50%     { filter: drop-shadow(0 0 9px rgba(125,175,255,.95)) drop-shadow(0 0 30px rgba(85,145,255,.7)) drop-shadow(0 0 62px rgba(55,105,255,.45)); }
}

.held__text { display: grid; justify-items: center; gap: clamp(1rem, 2.4vh, 1.5rem); }
.held__text h1 {
  font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: .96; letter-spacing: -.03em;
  text-shadow: 0 6px 40px rgba(4,10,40,.5);
  opacity: 0; animation: aufblenden 1s .55s both;
}
.held__text h1 em { font-style: italic; color: var(--verein-hell); }
.lead {
  max-width: 48ch; margin: 0; font-size: clamp(1.02rem, 1.5vw, 1.22rem); color: #d7e0fb;
  opacity: 0; animation: aufblenden 1s .75s both;
}
.cta-reihe { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center;
  opacity: 0; animation: aufblenden 1s .95s both; }
@keyframes aufblenden { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.scroll-hinweis {
  position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content;
  bottom: clamp(1.1rem, 3.5vh, 2rem);
  z-index: 6; display: grid; justify-items: center; gap: .5rem; color: #b9c6f5;
  opacity: 0; animation: aufblenden 1s 1.4s both;   /* zentriert via margin, damit die Animation die Zentrierung nicht killt */
}
.scroll-hinweis span { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; }
.scroll-hinweis .pfeil {
  width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); animation: wippe 1.7s ease-in-out infinite;
}
@keyframes wippe { 0%,100% { transform: rotate(45deg) translate(-2px,-2px); } 50% { transform: rotate(45deg) translate(3px,3px); } }

@media (prefers-reduced-motion: reduce) {
  .held__glow, .held__wappen-buehne, .held__wappen-gross, .neon-basis, .scroll-hinweis .pfeil,
  .kicker, .held__text h1, .lead, .cta-reihe, .scroll-hinweis {
    animation: none; opacity: 1; transform: none; translate: none;
  }
  .neon-basis { opacity: .55; }
}

/* --- Leichte-Effekte-Weiche für Nicht-Chromium (Klasse setzt hero-neon.js) 
   Safari/Firefox rendern SVG-Filter (url(#neonglow)) und ANIMIERTE drop-shadows
   jeden Frame neu auf der CPU → Hero laggt. Chromium bleibt unverändert.
   Rezept wie beim Handy-Fallback: Bewegung (Transforms) bleibt, Filter werden
   statisch bzw. abgeschaltet. */
.fx-leicht .neon-basis {
  filter: none; animation: none; opacity: .5; stroke: #79a8ff;
}
.fx-leicht .neon-lauf { filter: none; }
.fx-leicht .held__wappen-gross {
  animation: wappen-auf 1.2s .3s both;      /* Puls (Filter-Animation) aus */
  filter: drop-shadow(0 0 6px rgba(95,151,255,.85)) drop-shadow(0 0 22px rgba(63,123,255,.55)) drop-shadow(0 0 46px rgba(43,92,255,.35));
}
.fx-leicht .held__glow { animation: none; opacity: .9; }
/* Milchglas-Nav: backdrop-filter rechnet Safari bei JEDEM Scroll-Frame neu →
   in der Leicht-Fassung solider Grund statt Frost (optisch fast identisch). */
.fx-leicht #nav::before { backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(9,16,50,.96); }

@media (max-width: 820px) {
  .held__wappen-buehne { width: min(62vw, 240px); }
  .held__text h1 { font-size: clamp(2.4rem, 12vw, 3.4rem); }

  /* Handy-Performance: filter-lastige Dauer-Animationen aus → kein Ruckeln.
     Das Wappen leuchtet statisch weiter (leichterer Glow); die separate Neon-
     Kontur (die auf klein versetzt wirkt) weg — das reine Glow-Wappen ist sauber. */
  .held__wappen-buehne { animation: none; }
  .held__wappen-gross { position: absolute; inset: 4%; width: 92%; height: 92%;
    animation: wappen-auf 1.2s .3s both;
    filter: drop-shadow(0 0 6px rgba(95,151,255,.85)) drop-shadow(0 0 22px rgba(63,123,255,.55)) drop-shadow(0 0 46px rgba(43,92,255,.35)); }
  .neon-svg { display: none; }
  .held__ort img { animation: none; }
  /* Kicker darf auf schmalen Screens nicht rauslaufen */
  .kicker { font-size: .58rem; letter-spacing: .16em; }

  /* Sparten enger, damit Name + Icon + Pfeil sicher passen */
  .sparte-kopf { gap: .7rem; grid-template-columns: 2.2rem 1fr auto auto; }
  .sparte-icon { width: clamp(28px, 8vw, 34px); }
  .sparte .name { font-size: clamp(1.4rem, 6.5vw, 1.9rem); }
}

/* Platzhalter für die noch folgenden Sektionen */
.platzhalter { min-height: 60vh; display: grid; place-items: center; color: var(--tinte-sanft); padding: 4rem; text-align: center; }

/* ============================================================================
   TYPO-FEINSCHLIFF + GRUNDLAGEN
   ============================================================================ */
body {
  font-kerning: normal; font-optical-sizing: auto;
  font-variant-ligatures: common-ligatures contextual;
}
p { font-variant-numeric: oldstyle-nums proportional-nums; text-wrap: pretty;
    hyphens: manual; max-width: 64ch; }   /* NIE hyphens:auto — Felix hasst Trennstriche im Wort */
h1, h2, h3 { text-wrap: balance; }
/* Lead- und Notiz-Texte gleichmäßig umbrechen (ausgewogene Zeilen statt Waisenwort) */
.blei, .hallen-stand, .beitrag-hinweis, .fussnote, .seiten-kopf p, .verein-kopf .blei { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--verein-hell); outline-offset: 3px; border-radius: 2px; }
.wrap { width: min(1120px, 92%); margin-inline: auto; }
.vorzeile { display:inline-block; font-family: var(--text); font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; font-size: .74rem; color: var(--verein); margin: 0 0 1.1rem; }
.abschnitt { padding: clamp(3.2rem, 6vh, 5rem) 0; }   /* enger & rem-dominant (Felix: „zu viel Lücke") */
.abschnitt--hell { background: var(--papier); }
.abschnitt--weiss { background: #fff; }
/* Dunkelblaue Sektion (Wechsel hell/dunkel) — Texte auf hell umgestellt */
.abschnitt--dunkel { background: radial-gradient(120% 120% at 80% 15%, #16225e, #0a1240 58%, #070d2a); color: #dfe6fb; }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: #fff; }
.abschnitt--dunkel .vorzeile { color: var(--verein-hell); }
.abschnitt--dunkel .blei, .abschnitt--dunkel p { color: #dbe3fb; }
/* News-Absätze: sonst greift .news-item p (--tinte-sanft, dunkel) → auf Dunkelblau unlesbar */
.abschnitt--dunkel .news-item p { color: #dbe3fb; }
.abschnitt--dunkel .news { border-top-color: rgba(255,255,255,.16); }
.abschnitt--dunkel .news-item { border-bottom-color: rgba(255,255,255,.14); }
.abschnitt--dunkel .news-item time { color: var(--verein-hell); }
.abschnitt--dunkel .person { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.15);
  box-shadow: 0 16px 36px -26px rgba(0,0,0,.7); }
.abschnitt--dunkel .person .rolle { color: var(--verein-hell); }
.abschnitt--dunkel .person .pname { color: #fff; }
.abschnitt--dunkel .person a { color: #b9c6f5; }
.abschnitt--dunkel .person a:hover { color: #fff; }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.025em; }
.blei { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--tinte-sanft); max-width: 56ch; }

/* ============================================================================
   NAVIGATION
   ============================================================================ */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: 74px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1.1rem, 5vw, 3rem);
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
/* WICHTIG: backdrop-filter/filter/transform NICHT auf #nav selbst — das macht #nav zum
   Bezugsrahmen für das position:fixed Mobil-Menü (.menue) und zerschießt es nach dem Scrollen.
   Deshalb liegt der Frost-Balken auf einem ::before-Pseudoelement, #nav bleibt filterfrei. */
#nav::before { content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background: rgba(9,16,50,.82); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,.08);
  transition: opacity .3s ease; }
#nav.fest::before { opacity:1; }
.nav-logo { display: flex; align-items: center; gap: .6rem; color: #fff; font-family: var(--display);
  font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; }
.nav-logo img { height: 34px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.menue { display: flex; gap: 1.7rem; list-style: none; align-items: center; margin: 0; padding: 0; }
.menue a { color: #e7ecfb; font-size: .98rem; font-weight: 500; position: relative; }
.menue a:not(.knopf)::after { content:''; position:absolute; left:0; bottom:-5px; height:2px; width:0;
  background: var(--verein-hell); transition: width .3s cubic-bezier(.2,.7,.3,1); }
.menue a:not(.knopf):hover::after { width: 100%; }
.menue .knopf { padding: .6rem 1.1rem; font-size: .92rem; }
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 12px; }
.burger span { display:block; width: 26px; height: 2px; background: #fff; margin: 5px 0;
  transition: transform .3s, opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
html { scroll-padding-top: 90px; }

@media (max-width: 1140px) {   /* 7 Nav-Reiter (~1113px nötig) brauchen ~1200px → Burger schon früher einblenden */
  .burger { display: block; z-index: 61; }
  .menue {
    position: fixed; inset: 74px 0 0 0; flex-direction: column; justify-content: center; gap: 2.2rem;
    background: linear-gradient(180deg,#0a1240,#060b26); transform: translateX(100%);
    transition: transform .38s cubic-bezier(.22,1,.36,1);
  }
  .menue.offen { transform: translateX(0); }
  .menue a { font-size: 1.5rem; }
}

/* ============================================================================
   VEREIN / KENNZAHLEN
   ============================================================================ */
.verein-kopf { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4.5rem); align-items: start; }
.verein-kopf p { font-size: clamp(1.05rem,1.6vw,1.22rem); }
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  margin-top: clamp(2.5rem,5vw,4rem); border-top: 1px solid var(--linie); padding-top: 2.5rem; }
.zahl { }
.zahl b { display:block; font-family: var(--display); font-weight: 600; font-size: clamp(2.6rem,5vw,3.8rem);
  color: var(--verein); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.zahl span { display:block; margin-top: .5rem; font-size: .95rem; color: var(--tinte-sanft); }
@media (max-width: 720px){ .verein-kopf{ grid-template-columns: 1fr; } }

/* ============================================================================
   SPARTEN — Editorial-Index (kein Karten-Trio)
   ============================================================================ */
.sparten { margin-top: clamp(2.5rem,5vw,3.5rem); max-width: 900px; display: grid; gap: 0;
  overflow-x: clip; border-top: 1px solid var(--linie); }
.sparte { border-bottom: 1px solid var(--linie); position: relative; }
/* von LINKS reingeschoben, sobald sie ins Bild scrollen */
.js .sparte { opacity: 0; translate: -70px 0;
  transition: opacity .7s cubic-bezier(.16,1,.3,1), translate .7s cubic-bezier(.16,1,.3,1); }
.js .sparte.ist-sichtbar { opacity: 1; translate: 0 0; }

.sparte-kopf {
  width: 100%; display: grid; grid-template-columns: clamp(2.6rem,5vw,4.4rem) 1fr auto auto; align-items: center;
  gap: clamp(1rem,3vw,2.2rem); padding: clamp(1.3rem,2.6vw,2.05rem) .3rem;
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--tinte); font: inherit;
}
/* Sparten-Symbol — schlichtes Profi-Icon (Tabler), blau, ohne Container */
.sparte-icon {
  justify-self: end; width: clamp(32px, 3.6vw, 40px); aspect-ratio: 1; color: var(--verein);
  transition: transform .5s cubic-bezier(.2,.7,.3,1), color .35s ease;
}
.sparte-icon svg { width: 100%; height: 100%; display: block; stroke-width: 1.8; }
/* Hover / aufgeklappt: rückt leicht mit, kräftigeres Vereinsblau */
.sparte-kopf:hover .sparte-icon,
.sparte.offen .sparte-icon { transform: translateX(-4px); color: var(--verein-tief); }
.sparte .nr { font-family: var(--display); font-size: clamp(1.05rem,1.9vw,1.5rem); color: var(--tinte-sanft);
  font-variant-numeric: lining-nums; transition: color .35s ease; }
.sparte-txt { display: grid; gap: .3rem; min-width: 0; }   /* min-width:0 → Grid läuft nicht über, Pfeil bleibt im Container */
.sparte .name { font-family: var(--display); font-size: clamp(1.55rem,3.8vw,2.6rem); font-weight: 600;
  letter-spacing: -.02em; line-height: 1; transition: transform .45s cubic-bezier(.2,.7,.3,1), color .35s ease; }
.sparte .zeile { font-family: var(--text); font-size: clamp(.9rem,1.3vw,1rem); color: var(--tinte-sanft); }
.sparte-kopf:hover .name { transform: translateX(12px); }
.sparte-kopf:hover .nr, .sparte.offen .nr { color: var(--verein); }
.sparte.offen .name { color: var(--verein); }
/* runder +/− Button rechts */
.sparte .pfeil { position: relative; width: clamp(34px,4vw,42px); aspect-ratio: 1; justify-self: end;
  border-radius: 50%; border: 1px solid var(--linie); transition: background .35s ease, border-color .35s ease; }
.sparte-kopf:hover .pfeil { border-color: var(--verein); }
.sparte.offen .pfeil { background: var(--verein); border-color: var(--verein); }
.sparte .pfeil::before, .sparte .pfeil::after { content:''; position:absolute; left:50%; top:50%; width:14px; height:2px;
  background: var(--verein); border-radius:2px; transition: transform .4s cubic-bezier(.2,.7,.3,1), background .35s; }
.sparte .pfeil::before { transform: translate(-50%,-50%); }
.sparte .pfeil::after  { transform: translate(-50%,-50%) rotate(90deg); }
.sparte.offen .pfeil::after { transform: translate(-50%,-50%) rotate(0); }              /* + → − */
.sparte.offen .pfeil::before, .sparte.offen .pfeil::after { background: #fff; }
/* Aufklapp-Panel mit edlem Bild-Rahmen */
.sparte-detail { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.4,0,.2,1); }
.sparte-foto { aspect-ratio: 16/9; margin: .2rem 0 clamp(1.4rem,3vw,2rem) clamp(2.6rem,5vw,4.4rem);
  border-radius: 10px; overflow: hidden; display: grid; place-items: center; text-align: center; padding: 1.5rem;
  color: var(--tinte-sanft); border: 1px solid var(--linie);
  background: linear-gradient(135deg, rgba(18,32,214,.12), rgba(18,32,214,.02)),
              radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.6), transparent 60%); }
.sparte-foto b { display: block; color: var(--verein); font-family: var(--display); font-size: 1.15rem; margin-bottom: .35rem; }
.sparte-foto span { font-size: .92rem; max-width: 34ch; }
.sparte-mehr { margin: 0 0 clamp(1.4rem,3vw,2rem) clamp(2.6rem,5vw,4.4rem); }
.sparte-mehr a { color: var(--verein); font-weight: 600; }
.sparte--neu .name { color: var(--verein); }
.badge-neu { display:inline-block; margin-left: .7rem; padding: .15em .6em; border-radius: 999px;
  background: var(--verein); color:#fff; font-family: var(--text); font-size: .62rem; font-weight: 800;
  letter-spacing: .12em; vertical-align: middle; }

/* ============================================================================
   DARTS-BAND (dunkelblauer Kontrast-Rhythmus)
   ============================================================================ */
.darts-band { background: radial-gradient(120% 120% at 80% 20%, #16225e, #0a1240 60%, #070d2a); color:#fff; position: relative; overflow: hidden; }
.darts-band .vorzeile { color: var(--verein-hell); }
.darts-band h2 { color: #fff; }
.darts-band .blei { color: #cdd7f7; }
.darts-inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.darts-fakten { display:grid; gap: .9rem; }
.darts-fakten div { display:flex; gap: .8rem 1.4rem; align-items: start; padding-bottom: .8rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.darts-fakten div:has(.kontakt-dd) { align-items: center; }   /* Name + Icons auf gleicher Höhe wie das Label */
.darts-fakten dt { flex: none; width: 9rem; padding-top: .15rem; font-weight:700; color:#9db4ff; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.darts-fakten dd { margin:0; color:#eaf0ff; }
@media (max-width: 780px){
  .darts-inner{ grid-template-columns: 1fr; }
  /* Label über den Wert, konsistent linksbündig — keine springende Ausrichtung */
  .darts-fakten div, .darts-fakten div:has(.kontakt-dd) { flex-direction: column; gap: .25rem; align-items: flex-start; }
  .darts-fakten dt { width: auto; padding-top: 0; }
}

/* ============================================================================
   NEWS
   ============================================================================ */
.news { display: grid; gap: 0; margin-top: clamp(2rem,4vw,3rem); border-top: 1px solid var(--linie); }
.news-item { display:grid; grid-template-columns: 8.5rem 1fr; gap: 1.6rem; padding: 1.7rem .4rem;
  border-bottom: 1px solid var(--linie); align-items: baseline; transition: background .3s ease; }
.news-item time { font-size: .9rem; color: var(--verein); font-weight: 700; letter-spacing:.03em; }
.news-item h3 { font-size: clamp(1.2rem,2.4vw,1.6rem); margin-bottom:.4rem; }
.news-item p { color: var(--tinte-sanft); font-size: 1rem; margin:0 0 .5rem; }
.news-body p:last-child { margin-bottom: 0; }
/* Klemme: lange News auf ~3 Zeilen kürzen, per „mehr anzeigen" ausklappen */
.news-body.klappbar { max-height: 4.9em; overflow: hidden; transition: max-height .45s cubic-bezier(.16,1,.3,1); }
.news-mehr { margin-top: .7rem; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--text); font-weight: 700; font-size: .92rem; color: var(--verein);
  display: inline-flex; align-items: center; gap: .4rem; }
.news-mehr::after { content: ""; width: .48em; height: .48em; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s ease; }
.news-item.offen .news-mehr::after { transform: rotate(-135deg) translateY(1px); }
.news-mehr:hover { text-decoration: underline; }
.abschnitt--dunkel .news-mehr { color: var(--verein-hell); }
@media (max-width: 620px){ .news-item{ grid-template-columns: 1fr; gap:.4rem; } }

/* ============================================================================
   ANLAGE / FOTO-SLOTS
   ============================================================================ */
.anlage-inner { display:grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.anlage-inner ul { list-style:none; padding:0; margin: 1.4rem 0 0; display:grid; gap: 1rem; }
.anlage-inner li { display:flex; gap:.8rem; }
.anlage-inner li b { color: var(--tinte); }
.foto-slot { aspect-ratio: 4/3; border: 2px dashed rgba(18,32,214,.35); border-radius: 4px;
  display:grid; place-items:center; text-align:center; padding: 2rem; color: var(--tinte-sanft);
  background: repeating-linear-gradient(45deg, rgba(18,32,214,.03) 0 12px, transparent 12px 24px); }
.foto-slot span { font-size:.92rem; max-width: 26ch; }
.foto-slot b { display:block; color: var(--verein); font-family: var(--display); font-size:1.1rem; margin-bottom:.4rem; }
@media (max-width: 780px){ .anlage-inner{ grid-template-columns: 1fr; } }

/* ============================================================================
   VORSTAND
   ============================================================================ */
/* Vorstand: kompakte Karten, die beim Hover wachsen & den Kontakt einblenden (5 gleich, keine Waise) */
.vorstand { display:grid; grid-template-columns: repeat(5, 1fr); gap:.7rem; margin-top: clamp(1.6rem,3vw,2.4rem); }
.person { text-align:left; display:flex; flex-direction:column; padding:1.1rem 1.05rem; border:1px solid var(--linie); border-radius:14px; background:#fff;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease; }
.person:hover { position:relative; z-index:2; transform: translateY(-5px) scale(1.04);
  box-shadow: 0 26px 50px -22px rgba(11,21,90,.5); }
.person .mono { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; margin-bottom:.7rem;
  background: linear-gradient(135deg, var(--verein), var(--verein-hell)); color:#fff;
  font-family: var(--display); font-weight:600; font-size:.95rem; letter-spacing:.02em; }
.person .rolle { font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color: var(--verein); font-weight:600; line-height:1.25; }
.person .pname { font-family: var(--display); font-size:1.02rem; font-weight:600; margin:.15rem 0 0; line-height:1.15; }
.person-kontakt { display:block; margin-top:.55rem; word-break:break-word;
  color: var(--tinte-sanft); font-size:.85rem; transition: color .2s ease; }
.person-kontakt:hover { color: var(--verein); }
.person-icons { display:flex; gap:.45rem; margin-top:auto; padding-top:.85rem; }
/* dunkle Sektion */
.abschnitt--dunkel .person { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.abschnitt--dunkel .person:hover { background: rgba(255,255,255,.1); border-color: rgba(74,98,255,.5);
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.6), 0 8px 30px -6px rgba(74,98,255,.4); }
.abschnitt--dunkel .person .rolle { color: var(--verein-hell); }
.abschnitt--dunkel .person .pname { color:#fff; }
.abschnitt--dunkel .person-kontakt { color:#b9c6f5; }
.abschnitt--dunkel .person-kontakt:hover { color:#fff; }
/* Schmaler: eine Spalte (Karten stapeln, Icons bleiben unten bündig) */
@media (max-width: 1000px){
  .vorstand { grid-template-columns: 1fr; }
}

/* ============================================================================
   MITMACHEN / KONTAKT
   ============================================================================ */
.mitmachen { text-align:center; }   /* heller Grund kommt von .abschnitt--hell (Wechsel hell/dunkel) */
.mitmachen .blei { margin-inline:auto; }
.mitmachen .verein-text { max-width: 62ch; margin-inline:auto; }
.mitmachen .cta-reihe { justify-content:center; margin-top: 2.2rem; }
.mitmachen .knopf--geist { border-color: var(--linie); color: var(--tinte); }
/* auf DUNKLEN Sektionen (z.B. Abschluss-CTA sparten.html) Ghost-Button wieder hell — sonst unsichtbar */
.abschnitt--dunkel .knopf--geist { color: #fff; border-color: rgba(255,255,255,.5); }
.abschnitt--dunkel .knopf--geist:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.mitmachen .fussnote { margin: 1.6rem auto 0; max-width: 52ch; color: var(--tinte-sanft); font-size:.92rem; }

/* ============================================================================
   FOOTER + IMPRESSUM/DATENSCHUTZ
   ============================================================================ */
footer { background: #060b26; color: #b9c6f5; padding: clamp(3.5rem,7vw,5rem) 0 2.5rem; }
.foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); }
.foot-grid h4 { font-family: var(--display); color:#fff; font-size:1.1rem; margin:0 0 1rem; font-weight:600; }
.foot-grid a { color:#b9c6f5; display:inline-block; }
.foot-grid a:hover { color:#fff; }
.foot-mark { display:flex; align-items:center; gap:.7rem; margin-bottom: 1rem; }
.foot-mark img { height: 44px; }
.foot-mark b { font-family: var(--display); color:#fff; font-size:1.15rem; font-weight:600; }
.foot-liste { list-style:none; padding:0; margin:0; display:grid; gap:.55rem; font-size:.96rem; }
.rechtliches { margin-top: clamp(2.5rem,5vw,3.5rem); border-top: 1px solid rgba(255,255,255,.12); padding-top: 2rem;
  display:grid; gap:1rem; max-width: 780px; }
.rechtliches details { position:relative; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: .1rem 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); overflow:hidden;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.rechtliches details:hover { border-color: rgba(125,155,255,.42); }
.rechtliches details[open] { border-color: rgba(125,155,255,.38);
  background: linear-gradient(180deg, rgba(74,98,255,.12), rgba(255,255,255,.02));
  box-shadow: 0 24px 55px -32px rgba(0,0,0,.7); }
.rechtliches summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 0; font-family:var(--display); font-weight:600; color:#fff; font-size: 1.12rem; }
.rechtliches summary::-webkit-details-marker { display:none; }
.rechtliches summary::after { content:""; width:10px; height:10px; flex:none; margin-right:3px;
  border-right:2px solid #8ea6ff; border-bottom:2px solid #8ea6ff; transform: rotate(45deg);
  transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.rechtliches details[open] summary::after { transform: rotate(-135deg); }
.rechtliches details[open] summary { border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: .9rem; }
.rechtliches p { color:#9fb0e0; font-size:.92rem; margin:.5rem 0; line-height:1.7; overflow-wrap:break-word; }
.rechtliches p:last-of-type { margin-bottom: 1.2rem; }
.rechtliches a { color:#cdd7f7; }
.impressum-route { font-size:.85rem; color:#8ea0d0; margin-top:.4rem; }
.entwurf { display:inline-block; padding:.15em .6em; border-radius: 4px; background: #3a2f00; color: #ffd871;
  font-size:.86rem; font-weight:600; }
.copy { margin-top: 2rem; font-size:.86rem; color:#6b7bb0; }
@media (max-width: 760px){ .foot-grid{ grid-template-columns: 1fr; } }

/* ============================================================================
   BEWEGUNG — Reveals mit Charakter (IO-gesteuert)
   ============================================================================ */
.js .erscheint { opacity:0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(min(var(--i,0),6) * 75ms); }
.js .erscheint-zahl { opacity:0; filter: blur(10px); scale:.96;
  transition: opacity .7s cubic-bezier(.16,1,.3,1), filter .7s cubic-bezier(.16,1,.3,1), scale .7s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(min(var(--i,0),6) * 90ms); }
.js .ist-sichtbar { opacity:1; transform:none; filter:none; scale:1; }
/* Sparten-Chips einzeln nacheinander einblenden (ungedeckelter Stagger) */
.js .sp-chip.erscheint { transition-delay: calc(var(--i,0) * 65ms); }

@media (prefers-reduced-motion: reduce) {
  .js .erscheint, .js .erscheint-zahl { opacity:1; transform:none; filter:none; scale:1; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ============================================================================
   HERO-FOTO — echtes Sportplatz-Luftbild hinter dem Partikel-Wappen
   ============================================================================ */
/* (Hero-Foto entfernt — Herzstück ist jetzt die Wappen-Marken-Bühne, siehe oben) */

/* ============================================================================
   ANLAGE-FOTO — echtes Vereinsheim-Luftbild statt Platzhalter
   ============================================================================ */
.anlage-foto { margin: 0; position: relative; border-radius: 4px; overflow: hidden;
  box-shadow: 0 20px 50px -22px rgba(11,21,90,.5);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; }
.anlage-foto:hover { transform: translateY(-5px); box-shadow: 0 34px 66px -24px rgba(11,21,90,.6); }
.anlage-foto img { width: 100%; aspect-ratio: 16/10; object-fit: cover;
  filter: saturate(.9) contrast(1.03); transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.anlage-foto:hover img { transform: scale(1.04); }
.anlage-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.2rem .9rem; color: #fff; font-size: .92rem;
  background: linear-gradient(0deg, rgba(6,11,38,.8), transparent); }

/* ============================================================================
   HALLENZEITEN — Wochenplan als saubere Tabelle (aus dem Hallenbelegungsplan)
   ============================================================================ */
.hallen { margin-top: clamp(2rem,4vw,3rem); border-top: 2px solid var(--verein); max-width: 820px; }
.hallen-tag { display: grid; grid-template-columns: 8.5rem 1fr; gap: .8rem 1.6rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--linie); align-items: start; }
.hallen-tag .tag { font-family: var(--display); font-weight: 700;
  font-size: clamp(1.15rem,2.4vw,1.55rem); color: var(--verein); line-height: 1.1; }
.hallen-slots { display: grid; gap: .55rem; }
.hallen-slot { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: baseline; }
.hallen-slot .zeit { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinte); white-space: nowrap; }
.hallen-slot .was { color: var(--tinte-sanft); }
.hallen-stand { font-family: var(--text); font-size: .82rem; color: var(--tinte-sanft); margin-top: 1.2rem; }
@media (max-width: 600px) {
  .hallen-tag { grid-template-columns: 1fr; gap: .4rem; }
  .hallen-slot { grid-template-columns: 6.5rem 1fr; gap: .7rem; }
}

/* ============================================================================
   BEITRÄGE — Mitgliedsbeiträge als gestaltete Liste + Info-Karten
   ============================================================================ */
.beitrag-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.6rem,4vw,3.2rem);
  align-items: start; margin-top: clamp(2rem,4vw,3rem); }
@media (max-width: 860px) { .beitrag-grid { grid-template-columns: 1fr; } }
.beitrag-liste { border-top: 2px solid var(--verein); }
.beitrag-zeile { display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  align-items: baseline; padding: .9rem 0; border-bottom: 1px solid var(--linie); }
.beitrag-zeile .kat { font-weight: 600; color: var(--tinte); }
.beitrag-zeile .kat small { display: block; font-size: .82rem; color: var(--tinte-sanft); font-weight: 400; margin-top: .15rem; }
.beitrag-zeile .betrag { font-family: var(--display); font-weight: 700;
  font-size: clamp(1.15rem,2.2vw,1.5rem); color: var(--verein); white-space: nowrap; text-align: right; }
.beitrag-zeile .betrag small { display: block; margin-top: .2rem; white-space: normal; line-height: 1.35;
  font-family: var(--text); font-size: .62em; color: var(--tinte-sanft); font-weight: 500; }
.beitrag-hinweis { font-size: .85rem; color: var(--tinte-sanft); margin-top: 1.1rem; }
.beitrag-karten { display: grid; gap: 1rem; }
.beitrag-karte { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 1.3rem 1.4rem; }
.beitrag-karte h3 { font-size: 1.05rem; margin: 0 0 .3rem; color: var(--tinte); }
.beitrag-karte .gross { font-family: var(--display); font-weight: 700; font-size: 1.7rem; color: var(--verein); }
.beitrag-karte p { font-size: .92rem; color: var(--tinte-sanft); margin: .35rem 0 0; line-height: 1.55; }

/* ============================================================================
   UNTERSEITEN (sparten.html) — Nav dauerhaft frosted, damit die helle
   Nav-Schrift auch über hellem Inhalt lesbar ist (kein dunkler Hero am Anfang)
   ============================================================================ */
.seite-innen #nav::before { opacity: 1; }

.seiten-kopf { background: radial-gradient(120% 120% at 80% 15%, #16225e, #0a1240 58%, #070d2a);
  color: #dfe6fb; padding: clamp(7rem,16vh,10rem) 0 clamp(2.6rem,6vh,4rem); }
.seiten-kopf img.wappen-mini { width: 60px; height: auto; margin-bottom: 1.1rem; filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
.seiten-kopf .vorzeile { color: var(--verein-hell); }
.seiten-kopf h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem,6vw,4rem);
  color: #fff; line-height: 1.02; letter-spacing: -.02em; margin: .5rem 0 0; }
.seiten-kopf p { color: #cdd7f7; max-width: 54ch; margin: 1rem 0 0; font-size: clamp(1.05rem,1.7vw,1.25rem); }

/* Sparten-Artikel: Foto + Text, alternierend (Foto mal links, mal rechts) */
/* Foto-Spalte bewusst breiter als der Text, damit die Fotos groß & sichtbar wirken.
   Bei „gedreht" (Foto rechts) wird das Verhältnis gespiegelt → Foto bleibt IMMER die breitere Spalte. */
.sp-artikel { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.6rem,4vw,3.5rem);
  align-items: center; padding: clamp(2.4rem,5vw,4rem) 0; border-bottom: 1px solid var(--linie); }
.sp-artikel.gedreht { grid-template-columns: 1fr 1.35fr; }
.sp-artikel:last-child { border-bottom: 0; }
.sp-artikel > * { min-width: 0; }   /* verhindert, dass Inhalt die Spalte aufbläht */
.sp-artikel.gedreht .sp-foto { order: 2; }
@media (max-width: 820px) {
  /* Handy: eine Spalte, Reihenfolge Name → Bild → Text (Textblock aufgelöst) */
  .sp-artikel, .sp-artikel.gedreht { grid-template-columns: 1fr; gap: 0; align-items: start; }
  .sp-txt { display: contents; }
  .sp-artikel .sp-nr { order: 1; }
  .sp-artikel h2 { order: 1; }
  .sp-foto, .sp-artikel.gedreht .sp-foto { order: 2; margin: .3rem 0 1.2rem; }
  .sp-txt > :not(.sp-nr):not(h2) { order: 3; }
}
.sp-foto { width: 100%; aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 50px -24px rgba(11,21,90,.45);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; }
.sp-foto:hover { transform: translateY(-5px); box-shadow: 0 32px 64px -26px rgba(11,21,90,.55); }
.sp-foto.sp-kachel svg { transition: transform .35s ease; }
.sp-foto.sp-kachel:hover svg { transform: scale(1.08); }
.sp-foto img { width: 100%; height: 100%; object-fit: cover; }
.sp-foto.platzhalter { display: grid; place-items: center; text-align: center; padding: 2rem;
  aspect-ratio: auto; min-height: 0; height: clamp(240px,30vw,360px);
  border: 2px dashed var(--linie); background: var(--papier-warm); box-shadow: none; }
.sp-foto.platzhalter span { color: var(--tinte-sanft); font-family: var(--text); font-size: .9rem; line-height: 1.5; }
.sp-foto.platzhalter b { display: block; color: var(--verein); font-family: var(--display); font-size: 1.05rem; margin-bottom: .3rem; }
/* Foto-Slideshow (wischend) im Sparten-Foto */
.sp-slideshow { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; cursor: grab; }
.sp-slideshow:active { cursor: grabbing; }
.sp-slides { display: flex; height: 100%; transition: transform .8s cubic-bezier(.16,1,.3,1); will-change: transform; }
.sp-slides img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.sp-dots { position: absolute; left: 0; right: 0; bottom: 11px; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.sp-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.55); box-shadow: 0 1px 4px rgba(0,0,0,.5); transition: background .3s, transform .3s; }
.sp-dots button.aktiv { background: #fff; transform: scale(1.35); }
/* Pfeil-Buttons (erscheinen bei Hover; auf Touch dezent sichtbar) */
.sp-pfeil-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  display: grid; place-items: center; background: rgba(7,13,42,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 3px 10px rgba(0,0,0,.35); opacity: .92; transition: opacity .3s ease, background .3s ease, transform .3s ease; }
.sp-pfeil-btn.zurueck { left: 12px; } .sp-pfeil-btn.vor { right: 12px; }
.sp-pfeil-btn svg { width: 22px; height: 22px; }
.sp-slideshow:hover .sp-pfeil-btn, .sp-pfeil-btn:focus-visible { opacity: 1; }
.sp-pfeil-btn:hover { background: rgba(18,32,214,.82); transform: translateY(-50%) scale(1.08); }
@media (prefers-reduced-motion: reduce) { .sp-slides { transition: none; } }

/* Designte Icon-Kachel für Sparten ohne Foto (statt leerem Platzhalter) */
.sp-foto.sp-kachel { display: grid; place-items: center; border: 0;
  background: radial-gradient(120% 120% at 30% 18%, #1a2a72, #0d1852 58%, #070d33); }
.sp-foto.sp-kachel svg { width: 38%; height: 38%; color: rgba(255,255,255,.92); }
.sp-foto.sp-kachel svg [fill]:not([fill="none"]) { fill: currentColor; }

/* ===== Fußball: fussball.de Live-Tabelle & Spiele (Consent-gesteuert) ===== */
/* Der Live-Block gehört zur Fußball-Sparte → Trennlinie & großer Abstand darüber weg,
   damit er direkt an Sparte 01 andockt. */
#fussball { border-bottom: 0; padding-bottom: clamp(.6rem,1.6vw,1.1rem); }
.fde-block { padding: clamp(.4rem,1.2vw,.9rem) 0 clamp(2.2rem,4.5vw,3.6rem); border-bottom: 1px solid var(--linie); }
.fde-kopf { text-align: center; max-width: 60ch; margin: 0 auto clamp(1.4rem,3vw,2rem); }
.fde-kopf .sp-nr { justify-content: center; display: flex; }
.fde-kopf h3 { font-family: var(--display); font-weight: 600; color: var(--tinte);
  font-size: clamp(1.5rem,3vw,2.1rem); line-height: 1.1; margin: .25rem 0 .45rem; }
.fde-sub { color: var(--tinte-sanft); font-family: var(--text); }
.fde-consent { max-width: 560px; margin: 0 auto; text-align: center; background: var(--papier-warm);
  border: 1px solid var(--linie); border-radius: 16px; padding: clamp(1.6rem,3.5vw,2.4rem); }
.fde-consent svg { width: 46px; height: 46px; color: var(--verein); margin-bottom: .6rem; }
.fde-consent-text { color: var(--tinte); font-family: var(--text); line-height: 1.6; margin-bottom: 1.3rem; }
.fde-consent .knopf { margin-bottom: 1rem; }
.fde-remember { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap;
  color: var(--tinte-sanft); font-family: var(--text); font-size: .85rem; cursor: pointer; line-height: 1.4; }
.fde-remember input { width: 16px; height: 16px; accent-color: var(--verein); flex: none; }
.fde-consent-klein { margin-top: .9rem; font-size: .8rem; color: var(--tinte-sanft); }
.fde-consent-klein a { color: var(--verein); }
.fde-demnaechst { max-width: 560px; margin: 0 auto; text-align: center; background: var(--papier-warm);
  border: 1px solid var(--linie); border-radius: 16px; padding: clamp(1.6rem,3.5vw,2.4rem); }
.fde-demnaechst svg { width: 44px; height: 44px; color: var(--verein); margin-bottom: .5rem; }
.fde-demnaechst-titel { font-family: var(--display, var(--text)); font-weight: 700; color: var(--tinte);
  font-size: clamp(1.15rem,2.4vw,1.4rem); margin-bottom: .5rem; }
.fde-demnaechst-text { color: var(--tinte-sanft); font-family: var(--text); line-height: 1.65; }
.fde-demnaechst-text a { color: var(--verein); font-weight: 600; }
.fde-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem,2.5vw,2rem); align-items: start; }
@media (max-width: 820px) { .fde-grid { grid-template-columns: 1fr; } }
.fde-karte { background: #fff; border: 1.5px solid rgba(18,32,214,.28); border-radius: 14px;
  padding: clamp(1rem,2vw,1.4rem); box-shadow: 0 20px 50px -30px rgba(11,21,90,.4); overflow: hidden; }
.fde-karte h4 { font-family: var(--display); font-weight: 600; color: var(--verein); font-size: 1.05rem; margin-bottom: .8rem; }
.fde-karte .fussballde_widget { min-height: 120px; }
.fde-karte .fussballde_widget iframe { width: 100% !important; border: 0; }
.fde-widerruf { display: block; margin: 1.5rem auto 0; background: none; border: 0; cursor: pointer;
  color: var(--tinte-sanft); font-family: var(--text); font-size: .8rem; text-decoration: underline; }
.fde-widerruf:hover { color: var(--verein); }
/* Spiele-Karte: auf Desktop kompakt & innen scrollbar (Widget zeigt 10 Spiele = letzte+nächste),
   damit sie nicht riesig wird und auf Tabellenhöhe bleibt. Am Handy natürlich (kein Scroll-Trap). */
@media (min-width: 821px) {
  .fde-karte--spiele .fde-scroll { max-height: 680px; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding-right: .5rem; }
  .fde-karte--spiele .fde-scroll::-webkit-scrollbar { width: 8px; }
  .fde-karte--spiele .fde-scroll::-webkit-scrollbar-track { background: transparent; }
  .fde-karte--spiele .fde-scroll::-webkit-scrollbar-thumb { background: var(--linie); border-radius: 8px; }
  .fde-karte--spiele .fde-scroll:hover::-webkit-scrollbar-thumb { background: #b9c4e6; }
}

/* Anlage-Slideshow (Startseite): Slideshow im 16/10-Rahmen der Figure */
.anlage-foto .sp-slideshow { aspect-ratio: 16/10; width: 100%; }
.anlage-foto .sp-slides img { aspect-ratio: auto; height: 100%; transition: none; }
.anlage-foto:hover .sp-slides img { transform: none; }
.anlage-foto .sp-dots { bottom: 54px; }

.sp-artikel .sp-nr { font-family: var(--text); font-weight: 700; color: var(--verein); font-size: .85rem; letter-spacing: .14em; }
.sp-artikel h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem,3.4vw,2.5rem);
  margin: .35rem 0 .7rem; line-height: 1.05; }
.sp-artikel p { color: var(--tinte-sanft); }
.sp-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 2rem; margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linie); align-items: start; }
@media (max-width: 560px) { .sp-meta { grid-template-columns: 1fr; } }
.sp-meta div { display: grid; align-content: start; }
.sp-meta dt { font-family: var(--text); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--verein); margin: 0; }
.sp-meta dd { margin: .2rem 0 0; color: var(--tinte); font-weight: 600; font-size: .95rem; }
/* Instagram-Link in der Sparten-Meta: Icon + Handle nebeneinander */
.sp-meta .sp-insta { display: inline-flex; align-items: center; gap: .4rem; color: var(--verein); text-decoration: none; }
.sp-meta .sp-insta svg { width: 18px; height: 18px; flex: none; }
.sp-meta .sp-insta:hover { text-decoration: underline; }
/* Instagram-Zelle: Label + Icon zentriert gestapelt (Icon mittig unter „Instagram") */
.sp-meta .insta-zelle { justify-items: center; text-align: center; }
.sp-meta .insta-zelle .kontakt-dd { justify-content: center; }

/* feelxclusive-Credit — Box unten rechts im Abschluss (wie kw Consulting),
   helle Box mit blauem Mulmshorn-Rand, damit das originale (dunkle) Logo sichtbar ist */
.footer-leiste { margin-top: clamp(1.6rem,4vw,2.4rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.footer-leiste .copy { margin: 0; }
.footer-credit { display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  opacity: .72; transition: opacity .3s ease; }
.footer-credit:hover { opacity: 1; }
.footer-credit__label { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: #5f6f9e; white-space: nowrap; }
.footer-credit__marke { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 7px;
  background: #dfe5f5; border: 1px solid rgba(18,32,214,.12); box-shadow: none;
  transition: border-color .3s, background .3s; }
.footer-credit__marke img { height: 24px; width: auto; display: block; }
.footer-credit:hover .footer-credit__marke { background: #e9edfa; border-color: rgba(18,32,214,.28); }
@media (max-width: 600px) { .footer-leiste { flex-direction: column; align-items: center; text-align: center; gap: 18px; } }

/* Sparten-Teaser auf der Startseite — Chips (Icon + Name) → eigene Sparten-Seite */
/* Gleichmäßiges Raster (8 Sparten = 4×2) mit edlen Karten (Icon-Badge + Name) */
.sparten-teaser { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.7rem,1.4vw,1rem);
  margin: clamp(1.6rem,3.5vw,2.4rem) 0 clamp(1.4rem,3vw,2rem); }
@media (max-width: 720px){ .sp-chip { flex-basis: calc(50% - .5rem) !important; } }
.sp-chip { position: relative; flex: 0 1 calc(33.333% - .7rem); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .8rem; text-align: center; min-width: 0; padding: clamp(1.1rem,2.4vw,1.6rem) .9rem;
  border: 1px solid var(--linie); border-radius: 16px; text-decoration: none; color: var(--tinte); background: #fff;
  transition: border-color .35s, transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.sp-chip-badge { width: clamp(46px,5vw,54px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--verein); color: #fff; box-shadow: 0 8px 18px -8px rgba(18,32,214,.5);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.sp-chip-badge svg { width: 54%; height: 54%; }
.sp-chip-name { font-family: var(--display); font-weight: 600; font-size: clamp(1rem,1.5vw,1.18rem); line-height: 1.1; }
.sp-chip:hover { border-color: var(--verein); transform: translateY(-4px); box-shadow: 0 20px 36px -20px rgba(18,32,214,.5); }
.sp-chip:hover .sp-chip-badge { transform: scale(1.08) rotate(-4deg); background: var(--verein-tief); box-shadow: 0 12px 26px -8px rgba(18,32,214,.7); animation-play-state: paused; }
/* Dezentes Dauer-Schweben der Sparten-Icons (gestaffelt, auch mobil sichtbar) */
@media (prefers-reduced-motion: no-preference) {
  .sp-chip-badge { animation: sp-schweb 4.6s ease-in-out infinite; animation-delay: calc(var(--i,0) * .3s); }
}
@keyframes sp-schweb { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-3deg); } }
.sp-chip .badge-neu { position: absolute; top: 10px; right: 10px; }

/* Instagram-Link im Footer — Icon sauber mit Text zentriert */
.foot-grid a.foot-insta, .foot-grid a.foot-mail { display: inline-flex; align-items: center; gap: .5rem; line-height: 1; }
.foot-grid a.foot-insta svg, .foot-grid a.foot-mail svg { width: 18px; height: 18px; flex: none; }
.foot-kontakt-icons { display: flex; gap: .6rem; margin-top: 1.1rem; }
/* Footer-/Impressum-Kontakt-Icons: blau getönt (on-brand) statt washed-grau */
.foot-kontakt-icons .kontakt-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(74,98,255,.16); border: 1px solid rgba(125,155,255,.30); color: #cdd9ff; }
.foot-kontakt-icons .kontakt-btn:hover { background: rgba(74,98,255,.32); border-color: #7d9bff; color: #fff; transform: translateY(-2px); }
/* Kontakt-Symbole auch im Impressum (Mail + Instagram) */
.impressum-kontakt a.foot-mail, .impressum-kontakt a.foot-insta { display: inline-flex; align-items: center; gap: .45rem; }
.impressum-kontakt a.foot-mail svg, .impressum-kontakt a.foot-insta svg { width: 17px; height: 17px; flex: none; }
.impressum-kontakt a { line-height: 1.9; }

/* ============================================================================
   AUFNAHMEANTRAG — natives Formular (Mitmachen-Sektion). Blau-Weiß, DSGVO-schlank.
   Speicher-Weg (WordPress/Google) wird in js/formular.js über FORMULAR_ENDPUNKT
   verdrahtet — hier nur Darstellung + Validierung.
   ============================================================================ */
.antrag { text-align: left; max-width: 780px; margin: clamp(2rem,4vw,3rem) auto 0; display: grid; gap: 1.4rem; }
.antrag-block { border: 1px solid var(--linie); border-radius: 14px; padding: clamp(1.2rem,3vw,1.8rem); background: #fff; }
.antrag-block > legend { font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--tinte); padding: 0 .5rem; }
.antrag .opt { color: var(--tinte-sanft); font-weight: 400; font-size: .85em; }

.feld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feld { display: grid; gap: .35rem; }
.feld--breit { grid-column: 1 / -1; }
.feld > span { font-size: .82rem; font-weight: 600; color: var(--tinte); }
.feld-hinweis { font-size: .74rem; color: var(--tinte-sanft); line-height: 1.4; margin-top: .1rem; }
.feld-opt { font-style: normal; font-weight: 400; font-size: .68rem; color: var(--tinte-sanft); }
.familie-sparten { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-top: .15rem; }
@media (max-width: 820px) { .familie-sparten { grid-template-columns: repeat(2, 1fr); } }
.mini-check { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--tinte); cursor: pointer; background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: .3rem .6rem; user-select: none; }
.mini-check input { width: 15px; height: 15px; accent-color: var(--verein); flex: none; }
.mini-check:has(input:checked) { border-color: var(--verein); background: #eef0ff; }
.notiz-feld { width: 100%; box-sizing: border-box; border: 1px solid var(--linie); border-radius: 10px; padding: .7rem .9rem; font-family: var(--text); font-size: .95rem; color: var(--tinte); line-height: 1.5; resize: vertical; }
.notiz-feld:focus { outline: none; border-color: var(--verein); }
.antrag input, .antrag select {
  font: inherit; width: 100%; padding: .7rem .85rem; border: 1.5px solid var(--linie); border-radius: 8px;
  background: var(--papier); color: var(--tinte); transition: border-color .2s ease, box-shadow .2s ease; }
.antrag input[type=checkbox] { width: 1.15em; height: 1.15em; padding: 0; }
.antrag input:focus, .antrag select:focus { outline: 0; border-color: var(--verein); box-shadow: 0 0 0 3px rgba(18,32,214,.15); }
.antrag input:user-invalid { border-color: #c0392b; }

.sparten-wahl { border: 0; padding: 0; margin: 1.2rem 0 0; }
.sparten-wahl > legend { font-size: .82rem; font-weight: 600; color: var(--tinte); padding: 0; margin-bottom: .55rem; }
.sparten-check { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem .9rem; }
.sparten-check label, .check-zeile { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer;
  font-size: .92rem; color: var(--tinte); line-height: 1.42; }
.sparten-check input, .check-zeile input { flex: 0 0 auto; margin-top: .12em; accent-color: var(--verein); }

.antrag-hinweis { font-size: .9rem; color: var(--tinte-sanft); margin: 0 0 1rem; }
.familie-zeile { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: .7rem; align-items: end; margin-bottom: .8rem; }
.familie-zeile .feld > span { font-size: .72rem; }
.familie-weg { align-self: end; border: 1.5px solid var(--linie); background: #fff; border-radius: 8px;
  width: 44px; height: 44px; cursor: pointer; color: var(--tinte-sanft); font-size: 1.35rem; line-height: 1; transition: .2s; }
.familie-weg:hover { border-color: #c0392b; color: #c0392b; }
.knopf.klein { padding: .55rem 1.05rem; font-size: .9rem; box-shadow: none; }

.mandat-text { font-size: .84rem; color: var(--tinte-sanft); line-height: 1.55; margin: 1rem 0;
  padding: .9rem 1rem; background: var(--papier-warm); border-radius: 8px; }
.mandat-text .entwurf { display: block; margin-top: .5rem; }
.check-zeile { margin-top: 1rem; }

/* SEPA-Unterschriftenfeld (zeichnen mit Maus/Finger) */
.sepa-unterschrift { margin-top: 1.3rem; }
.sign-label { display:block; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--verein); font-weight:600; margin-bottom:.55rem; }
.sign-label .opt { text-transform:none; letter-spacing:0; color:var(--tinte-sanft); font-weight:400; }
.sign-box { position:relative; }
#sign-canvas { display:block; width:100%; height:170px; background:#fff; border:1px solid var(--linie); border-radius:12px; touch-action:none; cursor:crosshair; }
.sign-hint { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; color:var(--tinte-sanft); font-size:.95rem; opacity:.5; pointer-events:none; }
.sign-hint.weg { display:none; }
.sign-clear { position:absolute; right:10px; bottom:10px; padding:.4rem .9rem; font-size:.82rem; font-weight:600; color:var(--verein); background:var(--papier); border:1px solid var(--linie); border-radius:8px; cursor:pointer; }
.sign-clear:hover { background:var(--papier-warm); border-color:var(--verein); }

.antrag-absenden { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: .3rem; }
.antrag-oder { color: var(--tinte-sanft); font-size: .95rem; }
.antrag-oder a { color: var(--verein); font-weight: 600; }
.antrag-status { margin: .4rem 0 0; padding: .95rem 1.15rem; border-radius: 10px; font-weight: 600; font-size: .98rem; }
.antrag-status.ok { background: #e7f6ec; color: #1a7a3c; }
.antrag-status.fehler { background: #fdece9; color: #c0392b; }

@media (max-width: 620px) {
  .feld-grid { grid-template-columns: 1fr; }
  .sparten-check { grid-template-columns: 1fr; }
  .familie-zeile { grid-template-columns: 1fr 1fr; }
  .familie-weg { grid-column: 1 / -1; width: 100%; }
}

/* PDF-Downloads unter den Einwilligungen (Aufnahmeantrag-Seite) */
.antrag-downloads { margin: .2rem 0 .4rem; padding: 1.1rem 1.2rem; background: var(--papier-warm); border-radius: 12px; }
.dl-titel { display: block; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-sanft); margin-bottom: .7rem; }
.dl-liste { display: grid; gap: .55rem; }
.dl-link { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .95rem; color: var(--verein); }
.dl-link svg { width: 20px; height: 20px; flex: 0 0 auto; }
a.dl-link:hover { color: var(--verein-tief); text-decoration: underline; }
.dl-typ { font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: .14em .55em; border-radius: 999px; background: rgba(18,32,214,.12); color: var(--verein); }
.dl-folgt { color: var(--tinte-sanft); cursor: default; }
.dl-folgt .dl-typ { background: rgba(74,88,120,.16); color: var(--tinte-sanft); }

/* „Der Verein"-Seite: Fließtext-Blöcke + Info-Karte */
.verein-text { max-width: 64ch; margin-top: 1.6rem; }
.verein-text p { color: var(--tinte); margin-bottom: 1rem; }
/* Zweispaltiger Magazin-Textblock — füllt die Breite statt links zu kleben */
.verein-text--split { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem,4vw,3.6rem); }
.verein-text--split p:last-child { margin-bottom: 0; }
@media (max-width: 720px){ .verein-text--split { grid-template-columns: 1fr; gap: .4rem; } }
.abschnitt--dunkel .verein-text p { color: #dbe3fb; }
.karte-info { margin-top: 2.2rem; max-width: 64ch; padding: 1.3rem 1.6rem; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.karte-info p { margin: 0; color: #cdd7f7; }
/* Helle Variante (auf weißen Abschnitten) */
.abschnitt--weiss .karte-info { background: rgba(18,32,214,.045); border-color: rgba(18,32,214,.12); }
.abschnitt--weiss .karte-info p { color: var(--tinte); }
.abschnitt--weiss .karte-info strong { color: var(--verein); }
/* Kleine Text-CTA in einer Info-Box */
.karte-cta { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.1rem;
  font-family: var(--text); font-weight: 600; font-size: .95rem; color: var(--verein-hell); }
.karte-cta svg { width: 17px; height: 17px; transition: transform .25s ease; }
.karte-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.karte-cta:hover svg { transform: translateX(4px); }
.abschnitt--weiss .karte-cta { color: var(--verein); }
/* Sicherheits-Box in der Mitglied-Sektion füllt die Spaltenhöhe ordentlich */
#mitglied .karte-info { margin-top: 0; }

/* Aktueller Titelträger (oben, neustes Jahr) — dezenter Akzent */
.eh-karte.eh-neuste { border-color: rgba(74,98,255,.55); box-shadow: 0 20px 44px -24px rgba(11,21,90,.5), 0 0 0 1px rgba(74,98,255,.35) inset; }
.eh-karte.eh-neuste .eh-jahr { color: #7ff0fb; }

/* Sportler des Jahres — Ehrentafel (Verein-Seite): gestapelte, langgezogene Boxen, neustes Jahr oben */
.eh-top { display: flex; flex-direction: column; gap: .9rem; margin: 2rem 0 2.6rem; }
.eh-karte { position:relative; display:flex; align-items:center; gap:1.3rem;
  background: radial-gradient(130% 200% at 12% 15%, #1a2a72, #0d1852 60%, #070d33); color:#fff;
  border-radius: 14px; padding: 1.15rem 1.7rem; box-shadow: 0 20px 44px -24px rgba(11,21,90,.5);
  border:1px solid rgba(74,98,255,.18); overflow:hidden;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease; }
.eh-karte::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(60% 120% at 92% 0%, rgba(74,98,255,.35), transparent 70%);
  opacity:0; transition:opacity .35s ease; }
.eh-karte:hover { transform: translateX(6px); border-color: rgba(74,98,255,.55);
  box-shadow: 0 30px 60px -22px rgba(11,21,90,.7), 0 6px 26px -6px rgba(74,98,255,.45); }
.eh-karte:hover::after { opacity:1; }
.eh-karte .eh-jahr { flex:0 0 auto; min-width:3.4rem; margin:0; color: #35d3e6; font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:.02em; line-height:1; }
.eh-karte b { flex:1 1 auto; margin:0; font-family:var(--display); font-weight:600; font-size:1.35rem; color:#fff; line-height:1.15; }
.eh-karte .eh-was { flex:0 0 auto; margin:0; text-align:right; font-size:.9rem; color:#b9c6f5; }
@media (max-width:560px){ .eh-karte { gap:.9rem; padding:1rem 1.15rem; flex-wrap:wrap; }
  .eh-karte .eh-jahr { font-size:1.25rem; min-width:2.9rem; } .eh-karte b { font-size:1.15rem; }
  .eh-karte .eh-was { flex-basis:100%; text-align:left; margin-top:.1rem; } }

.eh-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; margin-top:.4rem; border-top:1px solid var(--linie); }
.eh-zeile { display:flex; align-items:baseline; gap:.9rem; padding:.62rem .2rem; border-bottom:1px solid var(--linie); }
.eh-zeile .eh-jahr { flex:0 0 3.2rem; font-family:var(--display); font-weight:600; color:var(--verein); }
.eh-zeile .eh-name { font-weight:600; color:var(--tinte); }
.eh-zeile .eh-was { margin-left:auto; padding-left:.8rem; font-size:.8rem; color:var(--tinte-sanft); text-align:right; }
.eh-zeile.eh-leer { opacity:.55; }
.eh-zeile.eh-leer .eh-name { font-weight:400; font-style:italic; }
@media (max-width:720px){ .eh-top{ grid-template-columns:1fr; } .eh-liste{ grid-template-columns:1fr; gap:0; } }

/* Gesundheitssport: trainierte Fähigkeiten als Chips + Motto */
.gs-faehig { list-style:none; margin:.5rem 0 1.1rem; padding:0; display:grid; grid-template-columns: repeat(2,1fr); gap:.5rem; }
.gs-faehig li { text-align:center; font-size:.82rem; font-weight:600; color:var(--verein); background:rgba(18,32,214,.09);
  border:1px solid rgba(18,32,214,.16); border-radius:999px; padding:.45em .6em; cursor:default;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.gs-faehig li:hover { background:var(--verein); color:#fff; border-color:var(--verein); transform:translateY(-2px); }
@media (max-width:400px){ .gs-faehig { grid-template-columns: 1fr; } }
.gs-motto { font-family:var(--display); font-style:italic; color:var(--verein-tief); font-size:1.05rem;
  border-left:3px solid var(--verein); padding-left:1rem; margin-top:.4rem; }

/* Sportanlage: Feature-Liste (Halle/Platz · Beachvolleyball · Bewegungspfad) */
.anlage-features { margin-top: 1.6rem; display: grid; gap: 1rem; }
.af { padding-left: 1rem; border-left: 3px solid var(--verein); }
.af b { display: block; color: var(--tinte); font-size: 1rem; }
.af span { display: block; color: var(--tinte-sanft); font-size: .92rem; margin-top: .18rem; line-height: 1.5; }

/* Fanshop-Kachel (Startseite) */
.fanshop-karte { display:flex; align-items:center; gap:clamp(1.2rem,3vw,2rem); text-decoration:none;
  padding:clamp(1.6rem,3.5vw,2.4rem) clamp(1.6rem,4vw,3rem); border-radius:18px; color:#fff;
  background:radial-gradient(120% 140% at 85% 10%, #1a2a72, #0d1444 62%, #070c28);
  box-shadow:0 30px 70px -34px rgba(11,21,90,.7); transition:transform .3s ease, box-shadow .3s ease; }
.fanshop-karte:hover { transform:translateY(-3px); box-shadow:0 40px 80px -30px rgba(11,21,90,.82); }
.fanshop-icon { flex:0 0 auto; display:grid; place-items:center; width:64px; height:64px; border-radius:16px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); }
.fanshop-icon svg { width:32px; height:32px; color:#fff; }
.fanshop-text { flex:1; min-width:0; }
.fanshop-text .vorzeile { color:var(--verein-hell); }
.fanshop-h { display:block; font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,2.6vw,1.9rem); margin:.25rem 0 .35rem; color:#fff; }
.fanshop-p { display:block; color:#cdd7f7; max-width:52ch; }
.fanshop-knopf { flex:0 0 auto; background:#fff; color:var(--verein-tief); font-weight:700; padding:.85rem 1.5rem; border-radius:2px; white-space:nowrap; transition:background .3s ease, color .3s ease; }
.fanshop-karte:hover .fanshop-knopf { background:var(--verein-hell); color:#fff; }
@media (max-width:760px){ .fanshop-karte{ flex-direction:column; align-items:flex-start; } .fanshop-knopf{ align-self:stretch; text-align:center; } }

/* ============================================================================
   POLITUR-DURCHGANG (03.09.2026) — Konsistenz: Abstände, Radien, Rhythmus
   ============================================================================ */
/* Mobil: feste enge Sektions-Abstände statt vh-Aufblähen */
@media (max-width: 820px) { .abschnitt { padding-block: 2.9rem; } }
/* Einheitliche Radien: Fotos 12px, Karten 14px, Feature-Karte 16px */
.anlage-foto { border-radius: 12px; }
.sp-foto { border-radius: 12px; }
.karte-info { border-radius: 14px; }
.fanshop-karte { border-radius: 16px; }

/* Sportanlage: Adresse mit Maps-Symbol-Buttons (Google Maps + Apple Karten) */
.maps-links { display: flex; gap: .6rem; margin-top: .6rem; }
.maps-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px;
  background: #fff; border: 1px solid var(--linie); box-shadow: 0 5px 16px -9px rgba(11,21,90,.45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.maps-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(11,21,90,.55); border-color: var(--verein); }
.maps-btn svg { width: 25px; height: 25px; display: block; }

/* Adresse-li mit Maps-Buttons: Adresse oben, Symbole darunter (nicht daneben) */
.anlage-inner li:has(.maps-links) { display: block; }

/* Sportanlage: Intro-Zeile oben, großes Vollbreit-Foto (16:9), Feature-Dreierreihe darunter */
.anlage-kopf { display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:end; margin-bottom:clamp(1.8rem,3.5vw,2.6rem); }
.anlage-kopf .blei { margin-bottom:0; }   /* Text-Unterkante = Maps-Icons-Unterkante (bündig) */
.anlage-kopf ul { list-style:none; padding:0; margin:0; }
.anlage-kopf li b { color:var(--tinte); }
.anlage-foto--gross { width:100%; }
.anlage-foto--gross .sp-slideshow { aspect-ratio:16/9; }
.anlage-features--reihe { grid-template-columns:repeat(2,1fr); gap:1.4rem 2rem; margin-top:clamp(1.8rem,3.5vw,2.6rem); max-width:820px; margin-inline:auto; }
@media (max-width:820px){
  .anlage-kopf{ grid-template-columns:1fr; align-items:start; }
  .anlage-features--reihe{ grid-template-columns:1fr; }
  .anlage-foto--gross .sp-slideshow{ aspect-ratio:4/3; }
}

/* Dezenter blauer Strich unter der Fanshop-Box (an den Enden ausblendend) */
.fanshop-strich { height: 2px; margin-top: clamp(2.2rem,4.5vw,3.2rem); border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--verein) 22%, var(--verein) 78%, transparent); opacity: .3; }

/* Ansprechpartner-Kontakt-Symbole (WhatsApp + Mail) — z.B. Darts */
.kontakt-dd { display:flex; align-items:center; flex-wrap:wrap; gap:.2rem .5rem; }
.kontakt-icons { display:inline-flex; gap:.45rem; }
.kontakt-btn { display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#cdd7ff;
  transition:background .22s ease, transform .22s ease, border-color .22s ease; }
.kontakt-btn:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.3); transform:translateY(-2px); }
.kontakt-btn svg { width:21px; height:21px; display:block; }
/* Auf hellem Grund (z.B. Sparten-Seite): heller Button, dunkler Rahmen, blaues Mail-Icon */
.abschnitt--weiss .kontakt-btn, .abschnitt--hell .kontakt-btn { background:var(--papier); border-color:var(--linie); color:var(--verein); }
.abschnitt--weiss .kontakt-btn:hover, .abschnitt--hell .kontakt-btn:hover { background:var(--papier-warm); border-color:var(--verein); }

/* ===== Lenis (weiches Scrollen) — empfohlene Basis ===== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ===== Bewegungspfad-Sektion (Text + ATP-Schild-Foto) ===== */
.pfad-block { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(1.6rem,4vw,3.4rem);
  align-items: center; margin-top: clamp(2.4rem,5vw,3.8rem); }
@media (max-width: 820px){ .pfad-block { grid-template-columns: 1fr; } }
.pfad-text h3 { font-family: var(--display); font-weight: 600; line-height: 1.1;
  font-size: clamp(1.5rem,3vw,2.15rem); margin: .3rem 0 .7rem; }
.pfad-quelle { margin-top: .9rem; font-size: .82rem; color: var(--tinte-sanft); opacity: .85; }
.pfad-foto { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--linie);
  box-shadow: 0 30px 60px -38px rgba(0,0,0,.5); background: var(--papier); }
.pfad-foto img { display: block; width: 100%; height: auto; }
.pfad-foto figcaption { padding: .7rem 1rem; text-align: center; font-size: .82rem; color: var(--tinte-sanft); }