/* ============================================================
   SpVgg Kirch-Grottenherten — Block-Theme Komponenten & Tokens
   Monochrom Schwarz/Weiss. Hell = Standard, Dunkel via [data-theme="dark"].
   Design-Tokens dupliziert als CSS-Variablen, damit der Live-Umschalter
   ALLE Komponenten (auch Core-Bloecke) mitnimmt. Erft Digital.
   ============================================================ */

/* ---------- Tokens: Light (Standard) ---------- */
:root{
  color-scheme: light;
  --bg:#F7F7F5; --surface:#FFFFFF; --surface-elev:#FFFFFF; --surface-muted:#ECECEA;
  --text:#111111; --muted:#5B5B58; --border:#E2E2DF; --border-strong:#C7C7C3;
  --accent:#111111; --accent-hover:#000000; --on-accent:#FFFFFF; --accent-on-dark:#FFFFFF;
  --accent-soft:#EDEDEB; --hero-bg:#0E0E0E;
  --result-win:#111111; --result-draw:#5B5B58; --result-loss:#5B5B58;
  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-display:clamp(3rem,8vw,5rem); --fs-h1:clamp(2.5rem,5vw,3.75rem);
  --fs-h2:clamp(1.875rem,3.5vw,2.75rem); --fs-h3:clamp(1.375rem,2.2vw,1.875rem);
  --fs-body-lg:clamp(1.125rem,1.5vw,1.375rem); --fs-eyebrow:.8125rem;
  --fs-stat:clamp(3rem,6vw,4.5rem); --fs-score:clamp(2rem,4vw,3rem);
  --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px;
  --space-xl:40px; --space-2xl:64px; --space-3xl:96px; --space-4xl:128px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(20,21,15,.05); --shadow-md:0 4px 16px rgba(20,21,15,.08);
  --shadow-lg:0 12px 40px rgba(20,21,15,.12); --shadow-accent:0 10px 30px rgba(17,17,17,.22);
  --ease-standard:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:150ms; --dur-base:250ms; --dur-reveal:400ms;
  --content-max:1200px; --gutter:clamp(20px,5vw,40px);
}

/* ---------- Tokens: Dark ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E0E0E; --surface:#191919; --surface-elev:#222222; --surface-muted:#151515;
  --text:#F4F4F2; --muted:#A6A6A2; --border:#2A2A2A; --border-strong:#3A3A3A;
  --accent:#F4F4F2; --accent-hover:#FFFFFF; --on-accent:#111111; --accent-on-dark:#FFFFFF;
  --accent-soft:#222222; --hero-bg:#0E0E0E;
  --result-win:#F4F4F2; --result-draw:#A6A6A2; --result-loss:#A6A6A2;
}

/* ---------- Basis ---------- */
body.wp-site-blocks,
body{ background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.editor-styles-wrapper{ background:var(--bg); color:var(--text); }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--text); }
a{ color:var(--accent); }
img{ max-width:100%; height:auto; }

/* Focus (WCAG AA) */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}
:root[data-theme="dark"] :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{ outline-color:var(--accent-on-dark); }

/* ---------- Skip link ---------- */
.skip-link{ position:absolute; left:16px; top:-100px; z-index:2000; background:var(--accent);
  color:var(--on-accent); padding:12px 16px; border-radius:var(--radius-md); font-weight:800;
  transition:top var(--dur-fast); text-decoration:none; }
.skip-link:focus{ top:16px; }

/* ---------- Core-Buttons an Tokens koppeln (Dark-Umschalter greift) ---------- */
.wp-element-button,.wp-block-button__link{ background-color:var(--accent); color:var(--on-accent);
  border-radius:var(--radius-md); font-weight:800; font-family:var(--font-body);
  border:2px solid transparent; transition:background-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base); }
.wp-element-button:hover,.wp-block-button__link:hover{ background-color:var(--accent-hover); box-shadow:var(--shadow-accent); }
.wp-block-button.is-style-outline .wp-block-button__link{ background:transparent; color:var(--text);
  border-color:var(--border-strong); }
.wp-block-button.is-style-outline .wp-block-button__link:hover{ border-color:var(--accent); color:var(--accent); box-shadow:none; }
/* Auf dunklem Grund: primaerer Button weiss, Outline hell */
.on-dark .wp-element-button,.on-dark .wp-block-button__link{ background-color:#FFFFFF; color:#111111; }
.on-dark .wp-block-button.is-style-outline .wp-block-button__link{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.on-dark .wp-block-button.is-style-outline .wp-block-button__link:hover{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }

/* ---------- Section-Rhythmus ---------- */
.spvgg-section{ padding-block:var(--space-2xl); }
@media(min-width:768px){ .spvgg-section{ padding-block:var(--space-3xl); } }
.spvgg-eyebrow{ font-family:var(--font-body); font-weight:800; font-size:var(--fs-eyebrow);
  text-transform:uppercase; letter-spacing:.14em; color:var(--accent); margin-bottom:var(--space-sm); }
:root[data-theme="dark"] .spvgg-eyebrow{ color:var(--accent-on-dark); }
.on-dark .spvgg-eyebrow{ color:var(--accent-on-dark); }
.spvgg-lead{ font-size:var(--fs-body-lg); color:var(--muted); max-width:60ch; }
.on-dark, .on-dark h1,.on-dark h2,.on-dark h3,.on-dark p{ color:#F4F4F2; }
.spvgg-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ---------- Header ---------- */
.spvgg-header{ position:sticky; top:0; z-index:900; background:var(--hero-bg); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08); }
/* Header-Inhalt auf Inhaltsbreite begrenzen und zentrieren (sonst klebt er an den Rändern) */
.spvgg-header > .wp-block-group{ max-width:1200px; margin-left:auto; margin-right:auto; width:100%;
  padding-left:24px; padding-right:24px; box-sizing:border-box; }
.spvgg-header a,.spvgg-header .wp-block-site-title a,.spvgg-header .wp-block-navigation a{ color:#F4F4F2; text-decoration:none; }
.spvgg-header .wp-block-navigation a:hover{ color:#fff; text-decoration:underline; }
.spvgg-header .wp-block-site-title{ font-family:var(--font-display); font-weight:700; }
.spvgg-header img{ border-radius:0; }

/* ---------- Hero (core/cover) ---------- */
.spvgg-hero{ min-height:82svh; }
.spvgg-hero.wp-block-cover{ align-items:flex-end; }
.spvgg-hero h1{ font-size:var(--fs-display); line-height:1.02; max-width:16ch; }
.spvgg-hero .spvgg-lead{ color:rgba(243,239,230,.88); max-width:54ch; }

/* ---------- Chalk divider ---------- */
.chalk{ display:block; width:100%; height:24px; overflow:visible; margin-inline:auto; max-width:var(--content-max); }
.chalk svg{ width:100%; height:24px; display:block; }
.chalk path{ stroke:var(--border-strong); stroke-width:2; fill:none; stroke-linecap:round;
  stroke-dasharray:2000; stroke-dashoffset:2000; transition:stroke-dashoffset 700ms var(--ease-out); }
.chalk.drawn path{ stroke-dashoffset:0; }
.chalk.accent path{ stroke:var(--accent); }
:root[data-theme="dark"] .chalk path{ stroke:var(--border); }

/* ---------- Card block style ---------- */
.wp-block-group.is-style-spvgg-card{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-lg); }
@media(min-width:768px){ .wp-block-group.is-style-spvgg-card{ padding:var(--space-xl); } }
.wp-block-group.is-style-spvgg-band-dark{ background:#111; color:#fff; border-radius:var(--radius-xl);
  padding:var(--space-2xl) var(--space-xl); }
:root[data-theme="dark"] .wp-block-group.is-style-spvgg-band-dark{ background:#000; border:1px solid var(--border); }

/* ---------- Stat tiles ---------- */
.spvgg-stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-lg); }
.spvgg-stat__num{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-stat); line-height:1;
  font-variant-numeric:tabular-nums; color:var(--text); }
.spvgg-stat__label{ color:var(--muted); font-size:.8125rem; text-transform:uppercase; letter-spacing:.08em; margin-top:var(--space-xs); }

/* Ergebnis-Badges */
.spvgg-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px;
  padding:0 8px; border-radius:var(--radius-sm); font-family:var(--font-display); font-weight:700; font-size:.9rem; }
.spvgg-badge.win{ background:var(--accent); color:var(--on-accent); }
.spvgg-badge.draw{ background:transparent; border:1.5px solid var(--border-strong); color:var(--text); }
.spvgg-badge.loss{ background:var(--muted); color:var(--on-accent); }

/* ---------- Countdown / Match band (core/html) ---------- */
.spvgg-countdown{ display:flex; gap:var(--space-md); margin-top:var(--space-sm); flex-wrap:wrap; }
.spvgg-cd-unit{ text-align:center; }
.spvgg-cd-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,5vw,3rem); line-height:1;
  font-variant-numeric:tabular-nums; color:var(--text); }
.spvgg-cd-label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:4px; }

/* ---------- News cards ---------- */
.spvgg-news-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; transition:border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base); height:100%; }
.spvgg-news-card:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-md); transform:translateY(-4px); }
.spvgg-news-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.spvgg-news-card .spvgg-news-body{ padding:var(--space-lg); }
.spvgg-cat{ font-size:.8125rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); }
:root[data-theme="dark"] .spvgg-cat{ color:var(--accent-on-dark); }
.spvgg-demo-tag{ display:inline-block; background:var(--surface-muted); color:var(--muted); font-size:.7rem;
  font-weight:800; letter-spacing:.08em; padding:2px 8px; border-radius:var(--radius-sm); }

/* ---------- Team tiles ---------- */
.spvgg-team-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-lg); transition:border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base); height:100%; }
.spvgg-team-card:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-md); transform:translateY(-4px); }
.spvgg-team-card .spvgg-team-num{ font-family:var(--font-display); font-size:2rem; color:var(--accent); font-weight:700; }
:root[data-theme="dark"] .spvgg-team-card .spvgg-team-num{ color:var(--accent-on-dark); }

/* ---------- Kader (Spieler-Karten) ---------- */
.spvgg-squad-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.spvgg-player{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden;
  transition:transform .25s,box-shadow .25s; }
.spvgg-player:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.spvgg-player__photo{ position:relative; aspect-ratio:1/1; background:linear-gradient(155deg,#2b2b2b,#141414);
  display:grid; place-items:center; }
.spvgg-player__initials{ font-family:var(--font-display); font-weight:700; font-size:34px; color:rgba(255,255,255,.92); margin:0; }
.spvgg-player__num{ position:absolute; top:8px; right:8px; min-width:26px; height:26px; padding:0 7px; border-radius:8px;
  background:#fff; color:#111; font-family:var(--font-display); font-weight:700; font-size:14px; display:grid; place-items:center; margin:0; }
.spvgg-player__cap{ position:absolute; top:8px; left:8px; width:24px; height:24px; border-radius:6px; background:#111;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px; display:grid; place-items:center; margin:0; }
.spvgg-player__meta{ padding:11px 12px 13px; }
.spvgg-player__fn{ font-size:12.5px; color:var(--muted); margin:0; }
.spvgg-player__name{ font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1.15; margin:0; }
.spvgg-posgroup{ margin-top:var(--space-lg); }
.spvgg-posgroup > h3{ font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent);
  margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.spvgg-posgroup > h3::after{ content:""; flex:1; height:1px; background:var(--border); }
:root[data-theme="dark"] .spvgg-posgroup > h3{ color:var(--accent-on-dark); }

/* ---------- Vorstand / Ansprechpartner ---------- */
.spvgg-board-card{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; height:100%; }
.spvgg-board-card .av{ width:44px; height:44px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:15px; flex:none; margin:0; }
:root[data-theme="dark"] .spvgg-board-card .av{ color:var(--accent-on-dark); }
.spvgg-board-card b{ display:block; font-size:15px; }
.spvgg-board-card span{ font-size:13px; color:var(--muted); }
.spvgg-board-name{ margin:0; font-weight:800; font-size:15px; }
.spvgg-board-role{ margin:0; font-size:13px; color:var(--muted); }

/* ---------- Chronik / Timeline ---------- */
.spvgg-timeline{ list-style:none; margin:0; padding:0; border-left:2px solid var(--border); }
.spvgg-timeline li{ position:relative; padding:0 0 var(--space-lg) var(--space-lg); }
.spvgg-timeline li::before{ content:""; position:absolute; left:-7px; top:4px; width:12px; height:12px; border-radius:50%;
  background:var(--accent); }
:root[data-theme="dark"] .spvgg-timeline li::before{ background:var(--accent-on-dark); }
.spvgg-timeline .yr{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; display:block; }
.spvgg-timeline .tx{ color:var(--muted); }

/* ---------- Sponsors ---------- */
.spvgg-sponsor{ min-height:88px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:800; letter-spacing:.05em;
  font-size:.85rem; padding:var(--space-md); text-align:center; }

/* ---------- Kontakt / Boxen ---------- */
.spvgg-infobox{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-lg); }

/* ---------- fussball.de / Maps Consent-Embed ---------- */
.fd-embed,.embed{ background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.fd-consent,.embed-consent{ padding:40px 28px; text-align:center; max-width:620px; margin:0 auto; }
.fd-consent .ico,.embed-consent .ico{ width:56px; height:56px; border-radius:14px; background:var(--accent-soft);
  color:var(--accent); display:grid; place-items:center; margin:0 auto 16px; font-size:26px; }
:root[data-theme="dark"] .fd-consent .ico,:root[data-theme="dark"] .embed-consent .ico{ color:var(--accent-on-dark); }
.fd-consent h3,.embed-consent h3{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; margin-bottom:10px; }
.fd-consent p,.embed-consent p{ color:var(--muted); font-size:.92rem; line-height:1.6; }
.fd-consent .fd-remember{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:.85rem; color:var(--muted); cursor:pointer; }
.fd-consent .fd-cta,.embed-consent .cta{ margin-top:20px; }
.fd-note,.embed-note{ margin-top:16px; font-size:.78rem; color:var(--muted); }
.fussballde_widget{ min-height:120px; }
#fd-matches iframe,#map-embed iframe{ width:100%!important; min-height:460px; border:0; display:block; }
.spvgg-consent-btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--font-body);
  font-weight:800; padding:12px 24px; border-radius:var(--radius-md); border:2px solid transparent;
  background:var(--accent); color:var(--on-accent); }
.spvgg-consent-btn:hover{ background:var(--accent-hover); }

/* ---------- CTA-Band ---------- */
.spvgg-cta{ background:#111; color:#fff; border-radius:var(--radius-xl); padding:var(--space-2xl) var(--space-xl); text-align:center; }
:root[data-theme="dark"] .spvgg-cta{ background:#000; border:1px solid var(--border); }
.spvgg-cta h2,.spvgg-cta p{ color:#fff; }
.spvgg-cta p{ max-width:52ch; margin-inline:auto; }

/* ---------- Footer ---------- */
.spvgg-footer{ background:#0E0E0E; color:#F4F4F2; }
.spvgg-footer h2,.spvgg-footer h3,.spvgg-footer h4{ color:#F4F4F2; }
.spvgg-footer p,.spvgg-footer li{ color:#A6A6A2; }
.spvgg-footer a{ color:#F4F4F2; }
.spvgg-footer a:hover{ color:#fff; }
.spvgg-footer .made-by{ color:#6A6A66; font-size:.8rem; }
.spvgg-footer ul.wp-block-list{ list-style:none; padding-left:0; }
.spvgg-footer ul.wp-block-list li{ margin-bottom:8px; }

/* Footer-Umschalter */
.spvgg-toggles{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.spvgg-toggle{ background:transparent; border:1px solid #3A3A3A; color:#F4F4F2; border-radius:999px; padding:6px 14px;
  font-size:.8rem; font-weight:600; cursor:pointer; font-family:inherit; line-height:1.2;
  transition:border-color .2s,background-color .2s,color .2s; }
.spvgg-toggle:hover{ border-color:#F4F4F2; }
.spvgg-toggle[aria-pressed="true"]{ background:#F4F4F2; color:#111; border-color:#F4F4F2; }
.spvgg-toggle:focus-visible{ outline:2px solid #F4F4F2; outline-offset:2px; }

/* ---------- Reveals ---------- */
.spvgg-reveal{ opacity:0; transform:translateY(12px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out); }
.spvgg-reveal.in{ opacity:1; transform:none; }

/* ---------- Ball cursor ---------- */
@media(hover:hover) and (pointer:fine){
  body.ballcursor,body.ballcursor a,body.ballcursor button,body.ballcursor input,
  body.ballcursor textarea,body.ballcursor select,body.ballcursor label{ cursor:none; }
}
#ball-cursor{ position:fixed; top:0; left:0; width:26px; height:26px; z-index:3000; pointer-events:none;
  transform:translate(-50%,-50%); will-change:transform; display:none; }

/* ---------- Intro overlay ---------- */
#intro{ position:fixed; inset:0; left:0; right:0; z-index:5000; background:var(--hero-bg); overflow:hidden;
  width:100vw; height:100vh; max-width:none; margin:0;
  display:flex; align-items:center; justify-content:center; }
#intro.hide{ opacity:0; visibility:hidden; transition:opacity 600ms var(--ease-standard),visibility 600ms; }
.intro-aerial{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(2.3); opacity:.55; }
.intro-aerial.play{ animation:introZoom 2200ms var(--ease-out) forwards; }
@keyframes introZoom{ 0%{ transform:scale(2.3); opacity:.35; } 60%{ opacity:.6; } 100%{ transform:scale(1.05); opacity:.72; } }
.intro-vignette{ position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 30%,rgba(14,16,11,.85) 100%); }
.intro-content{ position:relative; z-index:2; text-align:center; color:#fff; opacity:0; }
.intro-content.show{ animation:introFade 900ms var(--ease-out) 900ms forwards; }
@keyframes introFade{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} }
.intro-content img{ width:120px; height:120px; margin:0 auto var(--space-md); }
.intro-content .name{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,5vw,2.5rem);
  max-width:14ch; margin:0 auto var(--space-xs); text-wrap:balance; }
.intro-content .sub{ color:var(--accent-on-dark); font-weight:800; text-transform:uppercase; letter-spacing:.14em; font-size:.85rem; }
.intro-skip{ position:absolute; top:20px; right:20px; z-index:3; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:var(--radius-pill); padding:8px 18px;
  font-weight:700; font-size:.85rem; cursor:pointer; font-family:var(--font-body); }
.intro-skip:hover{ background:rgba(255,255,255,.2); }

/* ---------- Flutlicht-Effekt ---------- */
/* max-width/margin-Reset: WordPress' is-layout-constrained zwingt direkten Kindern
   sonst max-width:1200px auf -> das Overlay wuerde als Rechteck erscheinen. */
#flutlicht-fx{ position:fixed; inset:0; left:0; right:0; z-index:4000; pointer-events:none;
  display:none; overflow:hidden; width:100vw; max-width:none; margin:0; }
#flutlicht-fx .fx-dark{ position:absolute; inset:0; background:#050604; opacity:0; }
/* Lichtebenen VOLLFLAECHIG (inset:0), weicher Auslauf, keine harten Kanten (kein Rechteck) */
#flutlicht-fx .fx-beam{ position:absolute; inset:0; opacity:0; mix-blend-mode:screen; }
#flutlicht-fx .fx-beam.l{ background:radial-gradient(65% 75% at 22% -5%,rgba(255,255,255,.85) 0%,rgba(255,255,255,.22) 32%,transparent 62%); }
#flutlicht-fx .fx-beam.r{ background:radial-gradient(65% 75% at 78% -5%,rgba(255,255,255,.85) 0%,rgba(255,255,255,.22) 32%,transparent 62%); }
#flutlicht-fx .fx-glow{ position:absolute; inset:0; opacity:0; mix-blend-mode:screen;
  background:radial-gradient(130% 85% at 50% -12%,rgba(255,255,255,.6) 0%,transparent 70%); }
#flutlicht-fx.on .fx-dark{ animation:fxDark 2400ms linear forwards; }
#flutlicht-fx.on .fx-beam.l{ animation:fxStrikeL 2400ms linear forwards; }
#flutlicht-fx.on .fx-beam.r{ animation:fxStrikeR 2400ms linear forwards; }
#flutlicht-fx.on .fx-glow{ animation:fxGlow 2400ms ease-out forwards; }
@keyframes fxDark{ 0%{opacity:0} 10%{opacity:.94} 58%{opacity:.94} 86%{opacity:.25} 100%{opacity:0} }
@keyframes fxStrikeL{ 0%,14%{opacity:0} 16%{opacity:.85} 18%{opacity:.08} 21%{opacity:.95} 24%{opacity:.15} 28%{opacity:1} 70%{opacity:1} 100%{opacity:0} }
@keyframes fxStrikeR{ 0%,27%{opacity:0} 29%{opacity:.8} 31%{opacity:.1} 34%{opacity:.9} 37%{opacity:.2} 41%{opacity:1} 72%{opacity:1} 100%{opacity:0} }
@keyframes fxGlow{ 0%,40%{opacity:0} 58%{opacity:.9} 78%{opacity:.55} 100%{opacity:0} }
.win-btn{ position:fixed; right:20px; bottom:20px; z-index:900; background:var(--accent); color:var(--on-accent);
  border:0; border-radius:var(--radius-pill); padding:12px 20px; font-weight:800; font-family:var(--font-body);
  font-size:.95rem; cursor:pointer; box-shadow:var(--shadow-accent); display:inline-flex; align-items:center; gap:8px; }
.win-btn:hover{ background:var(--accent-hover); }

/* ---------- Consent-Banner ---------- */
#consent-banner{ position:fixed; left:0; right:0; bottom:0; z-index:5500; display:none;
  width:100vw; max-width:none; margin:0;
  background:var(--hero-bg,#0E0E0E); color:#F4F4F2; border-top:2px solid #F4F4F2;
  box-shadow:0 -12px 40px rgba(0,0,0,.35); transform:translateY(100%); transition:transform .3s var(--ease-out); }
#consent-banner.show{ transform:translateY(0); }
#consent-banner .cb-inner{ max-width:var(--content-max); margin:0 auto; padding:20px var(--gutter);
  display:flex; gap:18px 28px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
#consent-banner .cb-text{ flex:1 1 460px; min-width:280px; }
#consent-banner .cb-text b{ font-family:var(--font-display); font-size:1.05rem; display:block; margin-bottom:4px; }
#consent-banner .cb-text p{ color:#B7B1A4; font-size:.88rem; line-height:1.55; }
#consent-banner .cb-text a{ color:#F4F4F2; text-decoration:underline; }
#consent-banner .cb-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
#consent-banner .cb-btn{ font-family:var(--font-body); font-weight:800; font-size:.9rem; padding:11px 18px;
  border-radius:var(--radius-md); cursor:pointer; border:2px solid transparent; }
#consent-banner .cb-accept{ background:#F4F4F2; color:#111; }
#consent-banner .cb-accept:hover{ background:#fff; }
#consent-banner .cb-essential{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
#consent-banner .cb-essential:hover{ border-color:#fff; }

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .spvgg-reveal{ opacity:1!important; transform:none!important; }
  .chalk path{ stroke-dashoffset:0!important; }
  #ball-cursor{ display:none!important; }
}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{
  animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
body.reduce-motion .spvgg-reveal{ opacity:1!important; transform:none!important; }
body.reduce-motion .chalk path{ stroke-dashoffset:0!important; }