/* =========================================================================
   landing.css -- Landing-Sektionen im bw-juniors-Layout (Vorlage:
   sites/fc-blauweiss-erlenbach, landing_updated.css), umgesetzt in den
   hellen Fussball-Verrueckt-Farben (theme.css Tokens).
   Bausteine: group-hero (Overlay-Card, gestapelter Titel, 2 CTAs),
   section-tag Kopfzeilen, KPI-Ringe, Camp-Karten, Partner-Grid.
   ========================================================================= */

/* ---------- Header-Akzent beim Scrollen (bw-juniors: Gold-Linie -> Logo-Blau) ---------- */
.site-header.is-scrolled {
  border-bottom: 2px solid var(--brand);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ---------- Hero (bw-juniors group-hero Muster: gross, Foto, Blau-Band) ---------- */
.group-hero { margin: 1.1rem 0 0; }
.hero-media {
  position: relative;
  border-radius: clamp(18px, 2.5vw, 26px);
  overflow: hidden;
  background:
    radial-gradient(130% 150% at 82% 8%, rgba(11,142,220,.30), transparent 55%),
    linear-gradient(140deg, #10131c 0%, #16233a 62%, #0a2740 100%);
  min-height: clamp(420px, 58vw, 620px);
  display: flex;
  align-items: flex-end;
  box-shadow: 0 26px 60px -18px rgba(10,20,40,.55), 0 0 0 1px rgba(15,23,42,.25);
}
/* Foto-Variante: echtes Camp-Foto (inline background-image), gross und wichtig. */
.hero-media--photo {
  background-size: cover;
  background-position: center 32%;
  min-height: clamp(480px, 72vh, 700px);
}
/* Weiche Lichtkegel ueber dem Foto/Video. Die diagonalen Trikot-Streifen sind
   ENTFERNT (User 2026-08-16: "das gestreifte wegnehmen" — sie lagen als Textur
   ueber dem GANZEN Hero, nicht nur im Band). */
.hero-media--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 0%, rgba(148,163,184,.18) 0, transparent 55%),
    radial-gradient(circle at 85% 0%, rgba(148,163,184,.14) 0, transparent 55%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
/* Video-Variante: Camp-Video laeuft stumm als Hero-Hintergrund. Das Foto bleibt als
   inline background-image darunter = Poster/Fallback (Autoplay blockiert, Datenspar-
   modus, reduced motion). Scrim = gleicher Verlauf wie der inline Foto-Gradient,
   damit Titel und CTAs auf dem hellen Video lesbar bleiben. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  z-index: 0;
}
.hero-video-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(165deg, rgba(9,14,24,.72) 0%, rgba(9,17,28,.38) 48%, rgba(5,20,35,.82) 100%);
}
/* Textur + Licht-Sweep muessen ueber dem Video liegen (sonst verdeckt es sie) */
.hero-media--photo::before,
.hero-media--photo::after { z-index: 2; }
.hero-media-inner { width: 100%; position: relative; z-index: 3; }
/* Video-Hero: das Video ist der Star (Feedback 2026-08-15: war hinter dem Band kaum
   sichtbar). Deutlich hoeher als die Foto-Variante -> mehr freie Video-Flaeche
   oberhalb des Bands, und das Blau-Band transparenter, damit das Video auch
   dahinter durchschimmert (backdrop-blur bleibt = Glas-Effekt). */
.hero-media--video { min-height: clamp(480px, 72vh, 760px); border-radius: 0; }
/* Video-Hero volle Breite + Fold-Fit (User 2026-08-15: ganze Breite fuer das Video,
   und beim Oeffnen der Seite muss ALLES sichtbar sein -> Hoehe = Viewport minus
   Header (Topbar ~2.1rem + Headerbar 3.6rem), Rest der Seite bleibt auf --maxw). */
.group-hero.wrap { max-width: none; padding-inline: 0; margin: 0; }
.hero-media--video .overlay {
  padding: clamp(.9rem, 2vw, 1.4rem) var(--gutter);
}
.hero-media--video .stacked-title { font-size: clamp(1.5rem, 2.6vw, 2.5rem); }
.hero-media--video .hero-lead-line { font-size: clamp(.92rem, 1vw, 1.05rem); max-width: none; margin-top: .55rem; }
/* Schmale Screens bekommen per main.js die 9:16-Videoquelle -> mittig zeigen */
@media (max-width: 720px) {
  .hero-video { object-position: center; }
}
@media (min-width: 721px) {
  .hero-media--video {
    height: calc(100vh - 5.75rem);
    height: calc(100svh - 5.75rem);
    min-height: 480px;
  }
  /* Titel einzeilig: "Willkommen bei fussballverrückt" in einer Zeile
     (inline-block statt block, damit der Skew der Akzentzeile erhalten bleibt) */
  .hero-media--video .stacked-title .line { display: inline-block; }
  /* Buttons rechtsbuendig statt mittig in der rechten Spalte */
  .hero-media--video .overlay-card { grid-template-columns: minmax(0, 1fr) auto; }
  .hero-media--video .hero-ctas { justify-content: flex-end; }
}
/* Band neutral-dunkel statt Blau (User 2026-08-16: "das Blaue entfernen") */
.hero-media--video .overlay::before {
  background: linear-gradient(90deg,
    rgba(9,14,24,.78) 0%,
    rgba(9,14,24,.62) 28%,
    rgba(9,14,24,.32) 58%,
    rgba(9,14,24,.08) 85%,
    rgba(9,14,24,0) 100%);
}
/* Scrim oben schwaecher, damit das Video oben nicht absaeuft -- unten bleibt er
   kraeftig genug fuer den Uebergang ins Band. */
.hero-media--video .hero-video-scrim {
  background: linear-gradient(165deg, rgba(9,14,24,.45) 0%, rgba(9,17,28,.22) 48%, rgba(5,20,35,.60) 100%);
}
.overlay { position: relative; padding: clamp(1.1rem, 3vw, 2.1rem); }
/* Band hinter Titel und CTAs, laeuft nach rechts aus, mit Glas-Blur ueber dem
   Foto. Seit 2026-08-16 neutral-dunkel statt Logo-Blau (User: "das Blaue
   entfernen") — die Marke bleibt ueber Buttons/Akzente sichtbar. */
.overlay::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(9,14,24,.88) 0%,
    rgba(9,14,24,.74) 28%,
    rgba(9,14,24,.42) 58%,
    rgba(9,14,24,.10) 85%,
    rgba(9,14,24,0) 100%);
  backdrop-filter: blur(8px);
  box-shadow: 0 -2px 14px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.22);
  pointer-events: none;
}
.overlay-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.4fr);
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
  width: 100%;
}
/* Trikot-Muster im Band ENTFERNT (User 2026-08-16: "das gestreifte wegnehmen").
   Regel bleibt als Leiche dokumentiert geloescht — kein ::before mehr. */
.overlay-card::before {
  content: none;
  position: absolute;
  inset: -30% -10%;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 4px, transparent 4px 10px);
  opacity: .3;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.stacked-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: .045em;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
}
.stacked-title .line {
  display: block;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 3px 10px rgba(0,0,0,.55);
}
/* Akzentzeile "Verrueckt": kursiver Speed-Slant + pulsierender Glow.
   PERF: text-shadow wird NICHT mehr animiert (Repaint pro Frame). Stattdessen
   liegt der Puls-Glow als Text-Duplikat (::after, attr(data-text)) darunter
   und pulsiert per opacity -- das laeuft rein im Compositor. */
.stacked-title .accent {
  position: relative;
  display: inline-block;
  color: #eef8ff;
  /* Brand-Schreibweise: "fussballverrückt" bleibt klein (Antonio 2026-08-09),
     trotz Caps-Transform des Titels; leicht kleiner, damit das lange Wort
     auch auf schmalen Screens in eine Zeile passt. */
  text-transform: none;
  font-size: .88em;
  transform: skewX(-7deg);
  text-shadow:
    0 1px 0 rgba(6,40,70,.9),
    0 2px 0 rgba(6,40,70,.8),
    0 0 14px rgba(124,196,240,.95),
    0 0 30px rgba(124,196,240,.75),
    0 8px 22px rgba(0,0,0,.75);
}
.stacked-title .accent::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  pointer-events: none;
  text-shadow:
    0 0 22px rgba(124,196,240,1),
    0 0 52px rgba(143,111,224,.85);
  animation: glow-breathe 3.2s ease-in-out infinite;
}
@keyframes glow-breathe {
  0%, 100% { opacity: .2; }
  50%      { opacity: 1; }
}
/* Licht-Sweep, der alle paar Sekunden schraeg ueber das Hero-Foto zieht */
.hero-media--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.15) 50%, transparent 58%);
  transform: translateX(-130%);
  animation: sweep 7s ease-in-out infinite 1.2s;
}
@keyframes sweep {
  0%, 55% { transform: translateX(-130%); }
  80%, 100% { transform: translateX(130%); }
}
/* Einstiegs-Animation der Hero-Card */
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.overlay-card { animation: heroIn .8s cubic-bezier(.2, .7, .2, 1) both .15s; }
/* Unterstrich-Bevel: Blau laeuft ins Logo-Violett */
.stacked-title .accent::before {
  content: "";
  position: absolute;
  left: 2%; right: 22%;
  bottom: -7px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124,196,240,0), rgba(124,196,240,.95) 30%, var(--violet-300), rgba(143,111,224,0));
}
.hero-lead-line {
  margin-top: .95rem;
  color: rgba(255,255,255,.94);
  font-size: var(--t-0);
  font-weight: 500;
  max-width: 30rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.hero-ctas {
  display: inline-flex;
  gap: clamp(8px, 1.4vw, 16px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Sportliche Pill-Buttons mit weissem Rand (bw-juniors-Muster) + Shine-Sweep */
.hero-ctas .btn, .cta-actions .btn {
  position: relative;
  overflow: hidden;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
  transition: transform .12s ease, box-shadow .2s ease;
}
.hero-ctas .btn::after, .cta-actions .btn::after {
  content: "";
  position: absolute;
  top: -40%; bottom: -40%;
  left: -60%;
  width: 38%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  transition: left .45s ease;
  pointer-events: none;
}
.hero-ctas .btn:hover::after, .cta-actions .btn:hover::after { left: 130%; }
.hero-ctas .hero-primary, .cta-actions .hero-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-300));
  color: #fff;
}
.hero-ctas .hero-primary:hover, .cta-actions .hero-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 18px rgba(11,142,220,.85);
}
.hero-ctas .hero-secondary, .cta-actions .hero-secondary {
  background: linear-gradient(135deg, var(--violet-700), var(--violet));
  color: #fff;
}
.hero-ctas .hero-secondary:hover, .cta-actions .hero-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 16px rgba(143,111,224,.8);
}
@media (max-width: 720px) {
  .overlay-card { grid-template-columns: 1fr; }
  .hero-ctas { justify-content: flex-start; margin-top: 1rem; }
  .overlay::before { background: linear-gradient(180deg, rgba(9,14,24,0) 0%, rgba(9,14,24,.86) 30%, rgba(9,14,24,.94) 100%); }
}

/* ---------- Section-Kopf: SPEED-Optik statt braver Labels ----------
   Schraeger Gradient-Chip (Trikot-Flankenschnitt), Titel 900 in Caps mit
   schraegem Farbbalken, dahinter ein riesiges Outline-Geisterwort. */
.section-tag {
  display: inline-block;
  font-size: var(--t--1);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, var(--brand), var(--violet));
  border-radius: 6px;
  padding: .38rem 1.05rem;
  margin-bottom: .9rem;
  transform: skewX(-12deg);
  box-shadow: 0 8px 22px rgba(11,142,220,.35);
}
.section__head { position: relative; z-index: 0; }
.section__title {
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .015em;
}
.section__title::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: .42rem;
  margin-top: .6rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-300), var(--violet-300));
  transform: skewX(-18deg);
}
/* Geisterwort hinter dem Titel (grosses Outline-Wort, Sport-Editorial) */
.section__head[data-ghost]::before {
  content: attr(data-ghost);
  position: absolute;
  top: -.52em;
  left: -.04em;
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  font-size: clamp(3.4rem, 9vw, 6.8rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(124,196,240,.17);
  pointer-events: none;
}
:root[data-theme="light"] .section__head[data-ghost]::before {
  -webkit-text-stroke-color: rgba(10,118,186,.15);
}

/* ---------- Laufband-Ticker (Streetwear/Sport-Muster, pure CSS) ---------- */
.ticker {
  overflow: hidden;
  margin-top: clamp(1.2rem, 3vw, 2rem);
  border-block: 1px solid rgba(124,196,240,.20);
  background: rgba(11,142,220,.06);
  transform: skewY(-1.2deg);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  width: max-content;
  padding: .7rem 0;
  animation: ticker 28s linear infinite;
}
.ticker-track span {
  font-family: var(--font-display);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .95rem;
  white-space: nowrap;
  /* Halbtransparente Fuellung statt color:transparent: Outline-Look bleibt,
     aber der Kontrast erreicht 4.5:1 (WCAG AA, Lighthouse color-contrast). */
  color: rgba(124,196,240,.7);
  -webkit-text-stroke: 1px rgba(124,196,240,.6);
}
.ticker-track span.solid {
  color: #7cc4f0;
  -webkit-text-stroke: 0;
}
/* Brand-Item im Ticker: klein geschrieben (Brand-Schreibweise) */
.ticker-track span.brand { text-transform: none; }
.ticker-track span.dot {
  color: var(--violet-300);
  -webkit-text-stroke: 0;
  font-size: 1.1rem;
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- KPI-Ringe (stat-kpi Muster) ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: 2rem;
}
.stat-kpi { text-align: center; }
.stat-kpi-ring {
  width: clamp(6.5rem, 11vw, 8.5rem);
  height: clamp(6.5rem, 11vw, 8.5rem);
  margin: 0 auto .8rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: var(--shadow);
  /* Farbige Ringe (bw-juniors-Muster) in der Logo-Palette: Blau / Violett / Ink */
  border: 3px solid var(--brand-300);
}
.stat-kpi-ring--gold   { border-color: var(--brand-300); }
.stat-kpi-ring--blue   { border-color: var(--violet); }
.stat-kpi-ring--violet { border-color: var(--ink); }
.stat-kpi-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(var(--t-2) * 1.12);
  background: linear-gradient(135deg, var(--brand-300), var(--violet-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-kpi-label { font-weight: 700; }
.stat-kpi-sub { color: var(--muted); font-size: var(--t--1); }
/* Glass-Card um die ganze Stats-Sektion (bw-juniors teams-stats-card) */
.stats-card {
  border-radius: 1.6rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
}
:root[data-theme="light"] .stats-card {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.stats-card .stats-grid { margin-top: .5rem; }
.stat-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
  margin-top: 2rem;
}
.detail-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  font-weight: 600;
  font-size: var(--t--1);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.detail-card .icon { color: var(--brand); flex: none; }
@media (max-width: 640px) { .stats-grid { grid-template-columns: 1fr; } }

/* ---------- Camp-Karten = bw-juniors team-cards: volles Foto, dunkler
   Verlauf, Label unten links (Tagline / Name / Datum) ---------- */
.camp-grid {
  display: grid;
  /* max 28rem pro Karte + justify-content:center statt 1fr: bei nur 1-2 Camps
     spannt sich die Karte sonst riesig ueber die volle Breite (User 2026-08-16,
     nach Loeschen eines Camps im Admin). Bei 3+ Karten identisch wie vorher. */
  grid-template-columns: repeat(auto-fit, minmax(17rem, 28rem));
  justify-content: center;
  gap: 1.3rem;
  margin-top: 2rem;
}
.camp-card {
  display: block;
  border-radius: 1.4rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  transform-origin: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.camp-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 30px rgba(11,142,220,.25);
}
/* Gradient-Ring beim Hover (Blau -> Violett) */
.camp-card { position: relative; }
.camp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--brand-300), var(--violet-300));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.camp-card:hover::after { opacity: 1; }
.camp-image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, #10131c, #0a2740);
}
.camp-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform .3s ease-out;
}
.camp-card:hover .camp-image-wrap img { transform: scale(1.08); }
.camp-image-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.camp-image-fallback .icon { width: 3rem; height: 3rem; color: var(--brand-300); }
.camp-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,.95), transparent 55%);
}
.camp-label {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: .18rem;
}
.camp-tagline {
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--violet-300);
}
.camp-name {
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #7cc4f0;
}
.camp-date-line {
  color: rgba(226,232,240,.92);
  font-size: .92rem;
  font-weight: 600;
}

/* ---------- Impressionen als Carousel (bw-juniors news-carousel Muster) ---------- */
.foto-carousel {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2rem;
}
.caro-window { overflow: hidden; flex: 1; border-radius: 1.2rem; }
.caro-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.caro-track::-webkit-scrollbar { display: none; }
.caro-track .photo-card {
  flex: 0 0 min(20rem, 78vw);
  scroll-snap-align: start;
}
.photo-card {
  margin: 0;
  border-radius: 1.2rem;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.4);
  aspect-ratio: 4 / 3;
}
:root[data-theme="light"] .photo-card { border-color: var(--line); box-shadow: var(--shadow); }
.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.photo-card:hover img { transform: scale(1.04); }
.caro-btn {
  flex: none;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.caro-btn:hover { background: rgba(11,142,220,.28); border-color: var(--brand-300); transform: scale(1.06); }
.caro-btn .icon { width: 1.15rem; height: 1.15rem; }
:root[data-theme="light"] .caro-btn { background: #fff; border-color: var(--line); }
@media (max-width: 560px) { .caro-btn { display: none; } }

/* ---------- Sponsor-Spotlight (bw-juniors: Video-Banner-Card -> bei uns
   Foto-Banner mit Kicker, Glow-Titel und Partner-Cards darunter) ---------- */
.spotlight-card {
  width: min(100%, 1080px);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 1.8rem;
  background:
    radial-gradient(circle at 12% 10%, rgba(143,111,224,.16), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(11,142,220,.20), transparent 42%),
    linear-gradient(135deg, rgba(2,6,23,.97), rgba(9,60,100,.92) 48%, rgba(15,23,42,.98));
  border: 1px solid rgba(124,196,240,.45);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08);
}
.spotlight-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(240px, 36vw, 400px);
  display: grid;
  place-items: end center;
}
.spotlight-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .68;
  filter: saturate(1.12) contrast(1.05);
}
.spotlight-overlay {
  position: absolute;
  inset: 0;
  /* Trikot-Streifen-Textur entfernt (User-Feedback 2026-08-09: wirkte wie
     stoerende weisse Balken ueber dem Foto) -- nur noch Glow + Abdunklung. */
  background:
    radial-gradient(circle at 50% 42%, rgba(124,196,240,.14), transparent 34%),
    linear-gradient(to top, rgba(2,6,23,.88) 0%, rgba(2,6,23,.48) 52%, rgba(2,6,23,.16) 100%);
  pointer-events: none;
}
.spotlight-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(1.2rem, 3vw, 2.2rem);
}
.spotlight-kicker {
  display: inline-flex;
  padding: .26rem .8rem;
  border-radius: 999px;
  background: rgba(15,23,42,.84);
  border: 1px solid rgba(124,196,240,.75);
  color: #7cc4f0;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: .65rem;
}
.spotlight-copy h2 {
  color: #fff;
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0;
  text-shadow: 0 4px 14px rgba(0,0,0,.95), 0 0 30px rgba(124,196,240,.2);
}
.spotlight-copy h2::after {
  content: "";
  display: block;
  width: 74px;
  height: 3px;
  margin: .65rem auto 0;
  border-radius: 999px;
  background: linear-gradient(to right, transparent, #7cc4f0, var(--violet-300), transparent);
}
.spotlight-sub { color: rgba(226,232,240,.88); margin: .7rem 0 0; font-size: .95rem; }
.spotlight-sub a { color: #7cc4f0; }
/* ---------- Sponsoren-Wall: grosse CHROM-Wortmarken statt Kaertchen ----------
   Vorbild: Sponsor-Lineups grosser Sportmarken (F1/Fussball): die Namen stehen
   GROSS und frei auf der dunklen Flaeche, wie gestanzte Metall-Schriftzuege.
   Chrom-Effekt: vertikaler Metall-Verlauf im background-clip:text + wandernder
   Licht-Sweep. Hover: Wortmarke schlaegt in den Marken-Gradient um und leuchtet.
   Kommt ein echtes Logo vom Kunden, ersetzt ein <img> die .partner-word 1:1. */
.partner-wall {
  /* Flex statt Grid-auto-fit: bei 5 Logos bleibt fast immer eine Waise uebrig
     (4+1 / 3+2). Im Grid klebt die an der linken Kante, in Flex mit
     justify-content:center sitzt jede angebrochene Reihe mittig. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(.6rem, 1.6vw, 1rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1rem, 2.4vw, 1.6rem);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(11,142,220,.10), transparent 60%),
    linear-gradient(to bottom, rgba(2,6,23,.14), rgba(2,6,23,.46)),
    rgba(255,255,255,.035);
}

/* Variante fuer die /sponsoring-Seite: gleiche Karten, aber ohne die dunkle
   Spotlight-Flaeche drumherum (dort steht die Wall frei im Textfluss). */
.partner-wall--plain {
  background: none;
  padding: .2rem 0 1.4rem;
  margin-bottom: .6rem;
}

/* ---------- Partner-LOGO-Karten ----------
   Helle Karte als gemeinsamer Nenner: die gelieferten Logos sind fuer weissen
   Grund gebaut (Legea schwarz, Switch5 grau, Concordia blaugrau) und waeren auf
   dem dunklen Theme unlesbar. Einheitliche Kartenhoehe + object-fit:contain
   sorgen fuer gleiche optische Groesse trotz sehr unterschiedlicher Seitenverhaeltnisse. */
.partner-logo {
  /* FLEX, nicht Grid: in einem Grid-Item resolved `max-height:100%` am Bild
     gegen eine implizite auto-Row, die selbst mitwaechst -- zirkulaer, damit
     wirkungslos. Das hoechste Logo (Trek 359x200) ragte so 19px unter die
     Karte und durchschnitt den Radius (gemessen 2026-08-09). Mit Flex klemmt
     max-height korrekt. */
  display: flex;
  align-items: center;
  justify-content: center;
  /* kein flex-grow: sonst zieht eine allein stehende Karte in der letzten Reihe
     auf die volle Restbreite und ist sichtbar breiter als die anderen. */
  flex: 0 1 9.5rem;
  height: 5.4rem;
  padding: .85rem 1rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  opacity: .93;
  transition: transform .18s ease, box-shadow .22s ease, opacity .18s ease;
}
.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Logos mit eigener Farbflaeche (Trek teal, drucks gelb) fuellen die Karte
   randlos aus, sonst schwimmt ein Farbklotz im Weissraum. */
.partner-logo--boxed { padding: .45rem .5rem; }
.partner-logo--boxed img { border-radius: 7px; }
.partner-logo:hover,
.partner-logo:focus-visible {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .38), 0 0 20px rgba(11, 142, 220, .45);
}
@media (max-width: 560px) {
  .partner-logo { flex-basis: 7rem; height: 4.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .partner-logo { transition: none; }
  .partner-logo:hover { transform: none; }
}
.partner-word {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.25rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  transition: transform .22s ease, filter .22s ease;
}
.partner-word span {
  /* Chrom: hell -> silber -> dunkel -> hell (wie gebuerstetes Metall) */
  background: linear-gradient(180deg, #ffffff 0%, #dbe4ee 34%, #8194ab 52%, #c3cfdd 66%, #f2f6fa 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
  transition: background .25s ease;
}
/* Licht-Sweep: schmaler Glanz zieht EINMAL ueber den Namen, aber NUR beim
   Hover (User-Wunsch 2026-08-09: keine Dauer-Animation). PERF: transform +
   opacity statt background-position (kein Repaint pro Frame). */
.partner-word::after {
  content: "";
  position: absolute;
  inset: -12% -6%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.38) 50%, transparent 60%);
  transform: translateX(-130%);
  opacity: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.partner-word:hover::after,
.partner-word:focus-visible::after {
  animation: partner-sheen .85s ease-out;
}
@keyframes partner-sheen {
  /* Ein-/Ausblenden an den Raendern: transform verschiebt die ganze Box --
     ohne Fade stuende der Streifen am Ende sichtbar NEBEN dem Wort. */
  0%   { transform: translateX(-130%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}
/* (Trennpunkte zwischen den Wortmarken entfernt: die Wall ist jetzt ein
   Karten-Grid, ein absolut positionierter Punkt sass darin schief. Die
   Wortmarke selbst bleibt als Fallback fuer Partner ohne Logo.) */
.partner-word { justify-self: center; align-self: center; }
.partner-word:hover, .partner-word:focus-visible {
  transform: translateY(-3px) scale(1.04);
  filter: drop-shadow(0 0 18px rgba(11,142,220,.35));
}
.partner-word:hover span, .partner-word:focus-visible span {
  background: linear-gradient(120deg, #7cc4f0 0%, #0b8edc 45%, var(--violet-300) 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
@media (prefers-reduced-motion: reduce) {
  .partner-word::after { animation: none; display: none; }
  .partner-word:hover { transform: none; }
}

/* ---------- CTA-Sektion (bw-juniors cta-hero: Copy + Benefits + Foto mit Glow) ---------- */
.cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: clamp(1.6rem, 3vw, 2.4rem);
  align-items: center;
  border-radius: 1.8rem;
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  background:
    radial-gradient(circle at 80% 0%, rgba(11,142,220,.18), transparent 45%),
    linear-gradient(135deg, rgba(2,6,23,.96), rgba(9,60,100,.9) 55%, rgba(15,23,42,.97));
  border: 1px solid rgba(124,196,240,.35);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  color: #fff;
}
.cta-heading {
  font-size: var(--t-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 850;
  margin: 0;
  color: #fff;
}
.cta-text { margin: .9rem 0 0; color: rgba(226,232,240,.9); }
.cta-benefits {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  gap: .6rem;
}
.cta-benefits li { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: #e6edf5; }
.cta-benefits .icon { color: #7cc4f0; flex: none; }
.cta-actions { display: flex; gap: .8rem; margin-top: 1.4rem; flex-wrap: wrap; }
.cta-photo { position: relative; }
.cta-photo img {
  width: 100%;
  border-radius: 1.4rem;
  display: block;
  position: relative;
  z-index: 1;
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.cta-photo-glow {
  position: absolute;
  inset: -8%;
  background: radial-gradient(circle, rgba(11,142,220,.35), transparent 60%);
  filter: blur(10px);
  z-index: 0;
}
.cta-badge {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, var(--violet-700), var(--violet));
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
@media (max-width: 820px) { .cta-card { grid-template-columns: 1fr; } }

/* ---------- Formular: Fehler-Box + Honeypot ---------- */
.form-alert {
  background: color-mix(in srgb, #d64545 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #d64545 45%, transparent);
  color: var(--ink);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: var(--t--1);
}
.form-alert strong { color: #b23434; }
.form-alert ul { margin: .4rem 0 0; padding-left: 1.15rem; }
.form-alert li { margin: .15rem 0; }

/* ---------- Bewegung: Reveal mit Blur-in + reduced-motion Respekt ---------- */
.reveal {
  filter: blur(6px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), filter .7s ease;
}
.reveal.is-visible { filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .ticker-track,
  .stacked-title .accent,
  .hero-media--photo::after,
  .overlay-card {
    animation: none !important;
  }
  .reveal { filter: none !important; }
  /* Hero-Video aus -> das Foto (inline background-image) uebernimmt */
  .hero-video { display: none !important; }
}

/* Honeypot: fuer echte Besucher unsichtbar, Screenreader ignorieren es (aria-hidden). */
.hp-field {
  position: absolute !important;
  left: -5000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================================
   RUNDE 4 -- "STADION-DETAILS": Spielfeld-Geometrie, Pointer-Spotlight +
   3D-Tilt, rollender Ball als Scroll-Progress, Konfetti auf /danke,
   Selection/Scrollbar-Polish. Alles dekorativ (aria-hidden / pointer-events
   none) und reduced-motion-sicher (Guards in CSS + main.js).
   ========================================================================= */

/* ---------- Spielfeld-Kreide-Linien in der Stats-Card ----------
   Mittellinie + Mittelkreis + Anstosspunkt + 4 Corner-Arcs, wie mit Kreide
   auf den dunklen Rasen gezogen. Der Mittelkreis nimmt die KPI-Ringe auf. */
.stats-card { position: relative; }
.stats-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  --chalk: rgba(124, 196, 240, .11);
  background:
    /* Mittellinie (vertikal) */
    linear-gradient(to right,
      transparent calc(50% - 1px), var(--chalk) calc(50% - 1px),
      var(--chalk) calc(50% + 1px), transparent calc(50% + 1px)),
    /* Anstosspunkt */
    radial-gradient(circle at 50% 50%, var(--chalk) 3px, transparent 4px),
    /* Mittelkreis */
    radial-gradient(circle at 50% 50%,
      transparent calc(5.2rem - 2px), var(--chalk) calc(5.2rem - 2px),
      var(--chalk) 5.2rem, transparent 5.2rem),
    /* Corner-Arcs */
    radial-gradient(circle at 0 0,       transparent calc(1.7rem - 2px), var(--chalk) calc(1.7rem - 2px), var(--chalk) 1.7rem, transparent 1.7rem),
    radial-gradient(circle at 100% 0,    transparent calc(1.7rem - 2px), var(--chalk) calc(1.7rem - 2px), var(--chalk) 1.7rem, transparent 1.7rem),
    radial-gradient(circle at 0 100%,    transparent calc(1.7rem - 2px), var(--chalk) calc(1.7rem - 2px), var(--chalk) 1.7rem, transparent 1.7rem),
    radial-gradient(circle at 100% 100%, transparent calc(1.7rem - 2px), var(--chalk) calc(1.7rem - 2px), var(--chalk) 1.7rem, transparent 1.7rem);
}
:root[data-theme="light"] .stats-card::before { --chalk: rgba(10, 118, 186, .12); }

/* ---------- Pointer-Spotlight + 3D-Tilt (nur Maus-Geraete) ----------
   main.js schreibt --mx/--my (Pointer-Position in %) und --tiltX/--tiltY
   (Grad) auf die Karte. Custom Properties erben in die Pseudo-Elemente. */
@media (hover: hover) and (pointer: fine) {
  /* Camp-Karten: Licht folgt dem Pointer ueber das Foto, Karte kippt in 3D */
  .camp-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(11rem circle at var(--mx, 50%) var(--my, 50%),
      rgba(124, 196, 240, .30), transparent 62%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
  }
  .camp-card:hover .camp-image-wrap::after { opacity: 1; }
  .camp-card:hover {
    transform: perspective(750px)
      rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg))
      translateY(-6px) scale(1.02);
  }
  /* Service-Karten: dezenter Blau-Schein unter dem Pointer */
  .service::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(13rem circle at var(--mx, 50%) var(--my, 50%),
      rgba(11, 142, 220, .13), transparent 62%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
  }
  .service:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .camp-card:hover { transform: none; }
  .camp-image-wrap::after, .service::after { display: none; }
}

/* ---------- Scroll-Progress: Ball rollt auf der Linie am unteren Rand ----------
   Markup kommt aus main.js (nur ohne reduced-motion), rein dekorativ. */
.scroll-progress {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 90;
  pointer-events: none;
}
.scroll-progress__bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-300) 55%, var(--violet-300));
  box-shadow: 0 0 12px rgba(11, 142, 220, .55);
  transform-origin: left;
  transform: scaleX(0);
}
.scroll-progress__ball {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55));
  will-change: transform;
}
.scroll-progress__ball svg {
  width: 100%;
  height: 100%;
  stroke: #10131c;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Konfetti auf /danke (Markup + Farben aus main.js) ---------- */
.confetti {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 95;
}
.confetti i {
  position: absolute;
  top: -4vh;
  width: 9px;
  height: 14px;
  opacity: 0;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0%   { opacity: 1; translate: 0 0;            rotate: 0deg; }
  85%  { opacity: 1; }
  100% { opacity: 0; translate: var(--dx, 0) 106vh; rotate: 560deg; }
}

/* =========================================================================
   RUNDE 5 -- "FLUTLICHT-PASS": Hero-Parallax + Stadionstaub, Geisterwoerter
   wandern beim Scrollen, KPI-Ringe zeichnen sich selbst, magnetische CTAs.
   Guards wie gehabt: reduced-motion bekommt den ruhigen Endzustand.
   ========================================================================= */

/* (Hero-Parallax ueber background-position wurde nach Perf-Messung entfernt:
   repaint des ganzen Hero-Fotos pro Scroll-Frame = Hauptquelle des Ruckelns.) */

/* ---------- Stadionstaub: feine Lichtpartikel steigen im Hero auf ----------
   (Markup aus main.js, nur ohne reduced-motion; sitzt UNTER der Overlay-Card.
   PERF: bewusst OHNE filter:blur -- opacity/translate laufen im Compositor.) */
.hero-dust {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-dust i {
  position: absolute;
  bottom: -8px;
  border-radius: 50%;
  opacity: 0;
  animation: dust-rise linear infinite;
}
@keyframes dust-rise {
  0%   { opacity: 0; translate: 0 0; }
  12%  { opacity: .85; }
  80%  { opacity: .35; }
  100% { opacity: 0; translate: var(--sway, 12px) calc(-1 * var(--rise, 420px)); }
}

/* ---------- Geisterwoerter wandern beim Scrollen seitlich ----------
   main.js schreibt --ghost-x (px) auf den section__head. */
.section__head[data-ghost]::before {
  transform: translateX(var(--ghost-x, 0px));
  will-change: transform;
}

/* ---------- KPI-Ringe zeichnen sich beim Reinscrollen (conic + mask) ----------
   Ohne mask-Support oder ohne JS bleibt der statische border-Ring stehen. */
@supports ((-webkit-mask: radial-gradient(#000, #fff)) or (mask: radial-gradient(#000, #fff))) {
  .stat-kpi-ring { border-color: transparent; }
  .stat-kpi-ring::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    --ring-c: var(--brand-300);
    background: conic-gradient(from -90deg,
      var(--ring-c) calc(var(--sweep, 1) * 360deg), transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 3px));
    pointer-events: none;
  }
  .stat-kpi-ring { position: relative; }
  .stat-kpi-ring--gold::before   { --ring-c: var(--brand-300); }
  .stat-kpi-ring--blue::before   { --ring-c: var(--violet); }
  .stat-kpi-ring--violet::before { --ring-c: var(--ink); }
}

/* ---------- Magnetische CTAs: Button zieht sanft zum Pointer ----------
   main.js schreibt die translate-Werte; hier nur die Feder zurueck. */
@media (hover: hover) and (pointer: fine) {
  .hero-ctas .btn, .cta-actions .btn {
    transition: transform .12s ease, box-shadow .2s ease,
                translate .3s cubic-bezier(.2, .7, .3, 1.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dust { display: none; }
  .section__head[data-ghost]::before { transform: none; }
  .stacked-title .accent::after { animation: none; opacity: .4; }
}

/* ---------- PERF auf schmalen Viewports: backdrop-filter ist dort am
   teuersten (das Hero-Band deckt fast die ganze Flaeche) und die Bands sind
   auf Mobile ohnehin fast deckend -- Blur bringt visuell nichts mehr. ---------- */
@media (max-width: 720px) {
  .overlay::before { backdrop-filter: none; }
  .stats-card { backdrop-filter: none; }
  .hero-countdown { backdrop-filter: none; background: rgba(5, 10, 20, .8); }
}

/* =========================================================================
   RUNDE 6 -- "ZIELGRUPPEN-PASS": Countdown-Chip im Hero (Dringlichkeit),
   Matchplan-Taktiktafel (Eltern: wie laeuft der Tag), Skill-Sticker (Kids),
   FAQ-Accordion (Eltern: Vertrauen), Sticky-Anmelde-CTA mobil (Conversion).
   ========================================================================= */

/* ---------- Countdown-Chip im Hero ---------- */
.hero-countdown {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .9rem;
  padding: .42rem .95rem;
  border-radius: 999px;
  background: rgba(5, 10, 20, .55);
  border: 1px solid rgba(124, 196, 240, .55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #56e39f;
  box-shadow: 0 0 0 0 rgba(86, 227, 159, .65);
  animation: live-pulse 1.9s ease-out infinite;
  flex: none;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(86, 227, 159, .65); }
  70%  { box-shadow: 0 0 0 9px rgba(86, 227, 159, 0); }
  100% { box-shadow: 0 0 0 0 rgba(86, 227, 159, 0); }
}

/* ---------- Matchplan: Camp-Tag als Taktiktafel ----------
   Gestrichelte Pass-Linie verbindet die 4 Stationen, jede Station hat einen
   Ball-Node auf der Linie und einen schraegen Zeit-Chip. */
.matchplan {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 1.8rem);
  position: relative;
}
/* Pass-Linie: horizontal durch alle Nodes (Kreide-Look) */
.matchplan::before {
  content: "";
  position: absolute;
  top: 9px;
  left: calc(12.5% - 1rem);
  right: calc(12.5% - 1rem);
  border-top: 2px dashed rgba(124, 196, 240, .45);
}
.mp-stop { position: relative; padding-top: 2rem; }
.mp-node {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 28%, #dbe4ee 55%, #8194ab 100%);
  border: 2px solid var(--brand-300);
  box-shadow: 0 0 14px rgba(11, 142, 220, .55);
}
.mp-stop { text-align: center; }
.mp-chip {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t--1);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, var(--brand), var(--violet));
  border-radius: 6px;
  padding: .3rem .85rem;
  transform: skewX(-12deg);
  box-shadow: 0 6px 16px rgba(11, 142, 220, .3);
  margin-bottom: .55rem;
}
.mp-title {
  font-size: var(--t-1);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: .15rem 0 .3rem;
}
.mp-desc { color: var(--muted); font-size: var(--t--1); max-width: 15rem; margin-inline: auto; }
@media (max-width: 720px) {
  .matchplan { grid-template-columns: 1fr; gap: 1.4rem; }
  /* Linie vertikal an den linken Rand, Nodes und Text daneben */
  .matchplan::before {
    top: .4rem; bottom: .4rem; left: 9px; right: auto;
    border-top: 0;
    border-left: 2px dashed rgba(124, 196, 240, .45);
  }
  .mp-stop { padding: 0 0 0 2.4rem; text-align: left; }
  .mp-node { left: 0; top: .2rem; transform: none; }
  .mp-desc { margin-inline: 0; }
}

/* ---------- Skill-Sticker (Kids-Energie): schraege Wortmarken-Tiles ---------- */
.skill-wall {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.7rem, 2vw, 1.1rem);
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.skill-tile {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  padding: .7rem 1.35rem .75rem;
  border-radius: 10px;
  transform: skewX(-8deg);
  background: linear-gradient(135deg, rgba(11, 142, 220, .16), rgba(143, 111, 224, .12));
  border: 1px solid rgba(124, 196, 240, .45);
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.skill-tile:nth-child(even) { border-color: rgba(179, 154, 240, .5); }
.skill-tile i {
  font-style: normal;
  font-size: .62em;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .1em;
}
.skill-tile:hover {
  transform: skewX(0deg) translateY(-3px) scale(1.04);
  background: linear-gradient(135deg, var(--brand), var(--violet));
  color: #fff;
  box-shadow: 0 12px 30px rgba(11, 142, 220, .4);
}
.skill-tile:hover i { color: rgba(255, 255, 255, .8); }

/* ---------- FAQ-Accordion (native details/summary, kein JS) ---------- */
.faq { max-width: 46rem; display: grid; gap: .7rem; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq-item[open] { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: .95rem 2.8rem .95rem 1.1rem;
  font-weight: 700;
  position: relative;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Plus-Icon, dreht sich beim Oeffnen zum X */
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
  transition: rotate .25s ease;
}
.faq-item[open] summary::after { rotate: 45deg; }
.faq-item summary:hover { color: var(--brand); }
.faq-item p { padding: 0 1.1rem 1rem; margin: 0; color: var(--muted); }
.faq-item a { color: var(--brand); }

/* ---------- Sticky-Anmelde-CTA (nur mobil, Markup aus main.js) ---------- */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 80;
  display: none;
  transform: translate(-50%, 150%);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
  padding: .85rem 1.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-300));
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, .7);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 20px rgba(11, 142, 220, .5);
  white-space: nowrap;
}
.sticky-cta.is-shown { transform: translate(-50%, 0); }
@media (max-width: 44rem) {
  .sticky-cta { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .skill-tile, .sticky-cta { transition: none; }
}

/* ---------- Kleine Marken-Details ---------- */
::selection { background: var(--brand); color: #fff; }
html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--brand) 55%, var(--surface-2)) transparent;
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--brand), var(--violet));
  border-radius: 999px;
  border: 2px solid var(--bg);
}