/*
Theme Name: Wettanbieter
Description: Broadcast-Scoreboard-Theme für wettanbieter.com.de — Tag/Nacht-Modus, GGL-Vergleich.
Version: 1.0.0
Author: wettanbieter.com.de Redaktion
Text Domain: wettanbieter
*/

/* ---------- Fonts (self-hosted, kein CDN) ---------- */
@font-face { font-family:'Barlow Condensed'; src:url('assets/fonts/barlow-condensed-v13-latin_latin-ext-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('assets/fonts/barlow-condensed-v13-latin_latin-ext-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('assets/fonts/barlow-condensed-v13-latin_latin-ext-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('assets/fonts/barlow-condensed-v13-latin_latin-ext-600italic.woff2') format('woff2'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('assets/fonts/barlow-condensed-v13-latin_latin-ext-700italic.woff2') format('woff2'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Instrument Sans'; src:url('assets/fonts/instrument-sans-v4-latin_latin-ext-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Instrument Sans'; src:url('assets/fonts/instrument-sans-v4-latin_latin-ext-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Instrument Sans'; src:url('assets/fonts/instrument-sans-v4-latin_latin-ext-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ---------- Design-Tokens: Nacht (Default) ---------- */
:root {
  --flut-bg0:#0a0c10; --flut-bg1:#0f1115; --flut-bg2:#161920;
  --flut-panel:#1a1e26; --flut-panel2:#1e232d;
  --flut-line:rgba(255,255,255,.09); --flut-line2:rgba(255,255,255,.16);
  --flut-text:#f2f5f9; --flut-muted:#8d97a7; --flut-faint:#5c6575;
  --flut-blau:#2f6bff; --flut-blau-hell:#5d8bff; --flut-blau-tief:#1c48c0;
  --flut-amber:#ffb02e; --flut-gruen:#2fbf71; --flut-rot:#e2504c;
  --schrift-display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --schrift-text:'Instrument Sans', system-ui, sans-serif;
  /* Motion-Personality: broadcast-snap */
  --tempo-kurz:120ms; --tempo-mittel:200ms; --tempo-lang:320ms;
  --schwung:cubic-bezier(.22,.9,.3,1);
  --neigung:-12deg;
  accent-color:var(--flut-blau);
  color-scheme:dark;
}

/* ---------- Design-Tokens: Tag ---------- */
html[data-licht="tag"] {
  --flut-bg0:#eef1f6; --flut-bg1:#f7f9fc; --flut-bg2:#e4e9f1;
  --flut-panel:#ffffff; --flut-panel2:#f2f5fa;
  --flut-line:rgba(13,19,29,.12); --flut-line2:rgba(13,19,29,.22);
  --flut-text:#101521; --flut-muted:#4f5a6c; --flut-faint:#7d8798;
  --flut-blau:#1c50e0; --flut-blau-hell:#2f6bff; --flut-blau-tief:#143ba8;
  --flut-amber:#b46e00; --flut-gruen:#177a4a; --flut-rot:#bf3430;
  color-scheme:light;
}
@media (prefers-color-scheme: light) {
  html:not([data-licht]) {
    --flut-bg0:#eef1f6; --flut-bg1:#f7f9fc; --flut-bg2:#e4e9f1;
    --flut-panel:#ffffff; --flut-panel2:#f2f5fa;
    --flut-line:rgba(13,19,29,.12); --flut-line2:rgba(13,19,29,.22);
    --flut-text:#101521; --flut-muted:#4f5a6c; --flut-faint:#7d8798;
    --flut-blau:#1c50e0; --flut-blau-hell:#2f6bff; --flut-blau-tief:#143ba8;
    --flut-amber:#b46e00; --flut-gruen:#177a4a; --flut-rot:#bf3430;
    color-scheme:light;
  }
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--flut-bg1); color:var(--flut-text);
  font-family:var(--schrift-text); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; }
a { color:var(--flut-blau-hell); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--flut-blau); }
::selection { background:var(--flut-blau); color:#fff; }
* { scrollbar-color:var(--flut-faint) var(--flut-bg2); }
:focus-visible { outline:2px solid var(--flut-blau); outline-offset:2px; border-radius:2px; }
hr { border:0; height:1px; background:linear-gradient(90deg, var(--flut-blau) 0 48px, var(--flut-line) 48px); margin:2.5rem 0; }
.leser-sprung { position:absolute; left:-9999px; }
.leser-sprung:focus { left:1rem; top:1rem; z-index:99; background:var(--flut-blau); color:#fff; padding:.5rem 1rem; }

h1,h2,h3 { font-family:var(--schrift-display); text-transform:uppercase; letter-spacing:.01em; line-height:1.08; margin:0 0 .5em; }
h1 { font-size:clamp(2.4rem,6vw,4rem); font-weight:700; font-style:italic; }
h2 { font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:700; font-style:italic; }
h3 { font-size:1.25rem; font-weight:600; }
h4 { margin:0 0 .4em; font-size:1.02rem; }

.hof { max-width:1180px; margin:0 auto; padding:0 clamp(1rem,3vw,2rem); }
.sektion { padding:clamp(2.5rem,6vw,4.5rem) 0; }
.sektion--getoent { background:var(--flut-bg0); border-top:1px solid var(--flut-line); border-bottom:1px solid var(--flut-line); }
.dachzeile { font-family:var(--schrift-display); font-weight:600; font-style:italic; text-transform:uppercase; letter-spacing:.14em; font-size:.85rem; color:var(--flut-blau-hell); }
.dachzeile--amber { color:var(--flut-amber); }

/* ---------- Header ---------- */
.kopf { position:sticky; top:0; z-index:50; background:var(--flut-bg0); border-bottom:1px solid var(--flut-line); }
.kopf__zeile { display:flex; align-items:center; justify-content:space-between; gap:1rem; height:64px; }
.marke { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--flut-text); }
.marke__zeichen { flex:0 0 auto; }
.marke__wort { font-family:var(--schrift-display); font-weight:700; font-style:italic; font-size:1.3rem; text-transform:uppercase; letter-spacing:.02em; }
.marke__wort em { color:var(--flut-blau-hell); font-style:italic; }
.hauptnav { display:flex; align-items:center; gap:1.4rem; }
.hauptnav ul { display:flex; gap:1.4rem; list-style:none; margin:0; padding:0; }
.hauptnav a {
  position:relative; display:inline-block; padding:.35rem 0;
  font-family:var(--schrift-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; font-size:.95rem; color:var(--flut-text); text-decoration:none;
}
/* Link-Treatment: skewed sweep (passend zum Marken-Skew) */
.hauptnav a::after {
  content:""; position:absolute; left:0; right:.35em; bottom:0; height:3px;
  background:var(--flut-blau); transform:skewX(var(--neigung)) scaleX(0);
  transform-origin:left center; transition:transform var(--tempo-mittel) var(--schwung);
}
.hauptnav a:hover::after, .hauptnav a:focus-visible::after,
.hauptnav .aktuell > a::after { transform:skewX(var(--neigung)) scaleX(1); }

/* Flutlicht-Toggle (Signature-Moment) */
.flutlicht {
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  background:var(--flut-panel); color:var(--flut-muted);
  border:1px solid var(--flut-line2); padding:.4rem .7rem; border-radius:999px;
  font:600 .78rem/1 var(--schrift-text); letter-spacing:.06em; text-transform:uppercase;
  transition:color var(--tempo-mittel) var(--schwung), border-color var(--tempo-mittel) var(--schwung);
}
.flutlicht:hover { color:var(--flut-text); border-color:var(--flut-blau); }
.flutlicht svg { display:block; }
.flutlicht .strahl { opacity:0; transition:opacity var(--tempo-lang) var(--schwung); }
html:not([data-licht="tag"]) .flutlicht .strahl { opacity:1; }

/* Mobile Nav */
.nav-schalter { display:none; background:none; border:1px solid var(--flut-line2); color:var(--flut-text); padding:.45rem .6rem; border-radius:4px; }
@media (max-width: 880px) {
  .nav-schalter { display:inline-flex; }
  .hauptnav { display:none; position:absolute; top:64px; left:0; right:0; background:var(--flut-bg0); border-bottom:1px solid var(--flut-line); padding:1rem clamp(1rem,3vw,2rem) 1.4rem; }
  .hauptnav.offen { display:block; }
  .hauptnav ul { flex-direction:column; gap:.6rem; }
}

/* ---------- Buttons ---------- */
.cta {
  display:inline-block; background:var(--flut-blau); color:#fff !important; text-decoration:none;
  font-family:var(--schrift-display); font-weight:700; font-style:italic; text-transform:uppercase;
  letter-spacing:.08em; font-size:1rem; padding:.65rem 1.5rem;
  clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transition:background var(--tempo-kurz) var(--schwung), transform var(--tempo-kurz) var(--schwung);
}
.cta:hover { background:var(--flut-blau-tief); }
.cta:active { transform:scale(.985); }
.cta--zweitrangig { background:transparent; color:var(--flut-text) !important; box-shadow:inset 0 0 0 1px var(--flut-line2); }
.cta--zweitrangig:hover { background:var(--flut-panel2); }

/* ---------- Kopf-Bühne (Homepage-Hero hinter H1 + Intro) ----------
   Bewusst in BEIDEN Modi dunkel (Broadcast-Opening) — Text im Band immer hell. */
.kopf-buehne { position:relative; overflow:hidden; background:#0a0c10; }
.kopf-buehne__bild, .kopf-buehne__bild img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 62%;
}
.kopf-buehne::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(92deg, rgba(10,12,16,.92) 0%, rgba(10,12,16,.72) 45%, rgba(10,12,16,.30) 100%);
}
.kopf-buehne__inhalt { position:relative; z-index:1; padding-top:3.5rem; padding-bottom:4rem; }
.kopf-buehne .dachzeile { color:var(--flut-amber); }
[data-licht="tag"] .kopf-buehne .dachzeile { color:#ffb02e; } /* Tag-Amber wäre zu dunkel auf dem Band */
.kopf-buehne h1 { color:#f2f5f9; }
.kopf-buehne .prosa-intro { max-width:640px; color:#cfd6e1; }
.kopf-buehne .prosa-intro a { color:#8db1ff; }
@media (max-width: 720px) {
  .kopf-buehne__inhalt { padding-top:2.5rem; padding-bottom:2.75rem; }
  .kopf-buehne::after { background:linear-gradient(180deg, rgba(10,12,16,.88) 0%, rgba(10,12,16,.62) 100%); }
}

/* ---------- Infografik-Einbettung ---------- */
.einbettung { margin:1.25rem 0 2.25rem; border:1px solid var(--flut-line); background:var(--flut-panel); }
.einbettung__kopf {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.55rem .9rem; border-bottom:1px solid var(--flut-line); background:var(--flut-panel2);
}
.einbettung__label {
  font-family:var(--schrift-display); font-weight:700; font-style:italic; text-transform:uppercase;
  letter-spacing:.1em; font-size:.95rem; color:var(--flut-muted);
}
.einbettung__knopf { font-size:.8rem; padding:.4rem 1.1rem; border:0; cursor:pointer; }
.einbettung__knopf[hidden] { display:none; } /* .cta display:inline-block schlägt sonst das hidden-Attribut (No-JS) */
.cta.einbettung__knopf--ok, .cta.einbettung__knopf--ok:hover { background:var(--flut-gruen); } /* muss .cta:hover schlagen */
.einbettung__hinweis { margin:.8rem .9rem 0; font-size:.85rem; color:var(--flut-muted); }
.einbettung__code {
  margin:.55rem .9rem .9rem; padding:.7rem .8rem;
  background:var(--flut-bg1); border:1px dashed var(--flut-line2);
  font:400 .78rem/1.55 ui-monospace, 'Cascadia Mono', Consolas, monospace; color:var(--flut-text);
  white-space:pre-wrap; word-break:break-all; /* mobil umbrechen statt horizontal scrollen */
}

/* ---------- Rangliste (Scoreboard-Zeilen) ---------- */
.rangliste { display:grid; gap:.75rem; margin:1.5rem 0 0; padding:0; list-style:none; }
.anbieter-zeile {
  display:grid; grid-template-columns:64px minmax(140px,1.2fr) 1.6fr 1fr 96px 160px;
  align-items:center; gap:1rem; padding:1.1rem 1.25rem;
  background:var(--flut-panel); border:1px solid var(--flut-line);
  border-left:3px solid var(--flut-blau);
  transition:border-color var(--tempo-mittel) var(--schwung), background var(--tempo-mittel) var(--schwung);
}
.anbieter-zeile:hover { border-color:var(--flut-line2); border-left-color:var(--flut-blau-hell); background:var(--flut-panel2); }
.anbieter-zeile--top { border-left-color:var(--flut-amber); }
.rang { font-family:var(--schrift-display); font-weight:700; font-style:italic; font-size:2rem; color:var(--flut-faint); }
.anbieter-zeile--top .rang { color:var(--flut-amber); }
.zeile-name { display:grid; grid-template-columns:auto 1fr; gap:.25rem .6rem; align-items:center; }
.zeile-name .anbieter-etikett { grid-column:1 / -1; }
.anbieter-logo { width:28px; height:28px; object-fit:contain; background:#fff; border-radius:4px; padding:2px; }
.anbieter-name { font-family:var(--schrift-display); font-weight:700; font-size:1.35rem; text-transform:uppercase; margin:0; }
.anbieter-name a { color:var(--flut-text); text-decoration:none; }
.anbieter-name a:hover { color:var(--flut-blau-hell); }
.anbieter-etikett { display:block; font-size:.75rem; color:var(--flut-muted); letter-spacing:.04em; }
.bonus-block strong { display:block; font-family:var(--schrift-display); font-style:italic; font-weight:600; font-size:1.15rem; color:var(--flut-blau-hell); }
.bonus-bedingungen { font-size:.74rem; color:var(--flut-muted); }
.bonus-bedingungen span + span::before { content:"·"; margin:0 .35em; color:var(--flut-faint); }
.steuer-badge { font-size:.8rem; font-weight:600; }
.steuer-badge--frei { color:var(--flut-gruen); }
.steuer-badge--abzug { color:var(--flut-muted); }
.wertung { text-align:center; }
.wertung__zahl { font-family:var(--schrift-display); font-weight:700; font-size:1.5rem; color:var(--flut-text); }
.wertung__max { font-size:.75rem; color:var(--flut-faint); }
.wertung__balken { display:block; height:4px; background:var(--flut-bg2); margin-top:.35rem; overflow:hidden; }
.wertung__balken i { display:block; height:100%; background:linear-gradient(90deg, var(--flut-blau), var(--flut-blau-hell)); }
.zeile-aktion { display:grid; gap:.45rem; justify-items:stretch; text-align:center; }
.zeile-aktion .testbericht-link { font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--flut-muted); text-decoration:none; }
.zeile-aktion .testbericht-link:hover { color:var(--flut-text); }
@media (max-width: 980px) {
  .anbieter-zeile { grid-template-columns:48px 1fr 1fr; grid-template-areas:"rang name aktion" "rang bonus aktion" "rang steuer wertung"; }
  .anbieter-zeile > .rang { grid-area:rang; } .zeile-name { grid-area:name; } .bonus-block { grid-area:bonus; }
  .steuer-zelle { grid-area:steuer; } .wertung { grid-area:wertung; text-align:left; } .zeile-aktion { grid-area:aktion; }
}
@media (max-width: 620px) {
  .anbieter-zeile { grid-template-columns:1fr 1fr; grid-template-areas:"rang name" "bonus bonus" "steuer wertung" "aktion aktion"; row-gap:.7rem; }
}

/* ---------- Vergleichstabelle ---------- */
.tabellen-rahmen { overflow-x:auto; border:1px solid var(--flut-line); }
table.vergleich { width:100%; border-collapse:collapse; font-size:.92rem; min-width:640px; }
.vergleich th {
  font-family:var(--schrift-display); font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  font-size:.78rem; color:var(--flut-muted); text-align:left; padding:.7rem .9rem;
  background:var(--flut-bg0); border-bottom:1px solid var(--flut-line2);
}
.vergleich td { padding:.75rem .9rem; border-bottom:1px solid var(--flut-line); }
.vergleich tr:nth-child(even) td { background:color-mix(in srgb, var(--flut-panel) 60%, transparent); }
.vergleich .ja { color:var(--flut-gruen); font-weight:600; }
.vergleich .nein { color:var(--flut-faint); }

/* ---------- RG-Notice ---------- */
.spielerschutz {
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.2rem;
  max-width:76ch; box-sizing:border-box;
  border:1px solid var(--flut-line2); border-left:3px solid var(--flut-amber);
  background:var(--flut-bg0); padding:.8rem 1.1rem; font-size:.82rem; color:var(--flut-muted); margin:1.4rem 0;
}
.spielerschutz .achtzehn {
  flex:0 0 auto; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  border:2px solid var(--flut-amber); color:var(--flut-amber); font-weight:700; font-size:.78rem;
}

/* ---------- Karten (Tools/Wissen) ---------- */
.kachel-reihe { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1.5rem; }
.werkzeug-kachel {
  display:block; background:var(--flut-panel); border:1px solid var(--flut-line);
  border-top:3px solid var(--flut-blau); padding:1.3rem 1.2rem; text-decoration:none; color:var(--flut-text);
  transition:transform var(--tempo-kurz) var(--schwung), border-color var(--tempo-mittel) var(--schwung);
}
.werkzeug-kachel:hover { border-color:var(--flut-line2); border-top-color:var(--flut-amber); transform:translateY(-2px); }
.werkzeug-kachel h3 { margin:.6rem 0 .3rem; }
.werkzeug-kachel p { margin:0; font-size:.86rem; color:var(--flut-muted); }
.werkzeug-kachel svg { color:var(--flut-blau-hell); }

/* ---------- FAQ ---------- */
.faq-liste { display:grid; gap:.6rem; margin-top:1.4rem; }
.faq-liste details { background:var(--flut-panel); border:1px solid var(--flut-line); }
.faq-liste summary {
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.95rem 1.15rem; font-family:var(--schrift-display); font-weight:600; font-size:1.05rem;
  text-transform:uppercase; letter-spacing:.04em;
}
.faq-liste summary::-webkit-details-marker { display:none; }
.faq-liste summary::after { content:"+"; font-size:1.3rem; color:var(--flut-blau-hell); transition:transform var(--tempo-mittel) var(--schwung); }
.faq-liste details[open] summary::after { transform:rotate(45deg); }
.faq-liste .faq-antwort { padding:0 1.15rem 1.05rem; color:var(--flut-muted); }

/* ---------- Live-Pulse ---------- */
.live-punkt { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--flut-rot); margin-right:.4rem; vertical-align:1px; }

/* ---------- Content / Prosa ---------- */
.prosa { max-width:76ch; }
.prosa h2, .prosa h3 { font-style:italic; }
.prosa blockquote { margin:1.5em 0; padding:.4em 0 .4em 1.2em; border-left:3px solid var(--flut-blau); color:var(--flut-muted); font-style:italic; }
.prosa table { width:100%; border-collapse:collapse; display:block; overflow-x:auto; }
.prosa table tbody, .prosa table thead { display:table; width:100%; min-width:560px; border-collapse:collapse; }
.prosa table td, .prosa table th { border:1px solid var(--flut-line); padding:.55rem .7rem; }

/* ---------- Footer ---------- */
.fuss { background:var(--flut-bg0); border-top:1px solid var(--flut-line); margin-top:3rem; padding:2.5rem 0 1.5rem; font-size:.88rem; color:var(--flut-muted); }
.fuss__spalten { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
@media (max-width:720px){ .fuss__spalten { grid-template-columns:1fr; } }
.fuss h4 { font-family:var(--schrift-display); text-transform:uppercase; letter-spacing:.1em; font-size:.85rem; color:var(--flut-text); }
.fuss ul { list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.fuss a { color:var(--flut-muted); text-decoration:none; }
.fuss a:hover { color:var(--flut-text); }
.fuss__compliance { margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--flut-line); display:flex; flex-wrap:wrap; gap:1rem; align-items:center; font-size:.78rem; }

/* ---------- Rechner ---------- */
.rechner { background:var(--flut-panel); border:1px solid var(--flut-line); border-top:3px solid var(--flut-blau); padding:1.4rem; max-width:720px; margin-top:1.2rem; }
.rechner__reihe { display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:.9rem; align-items:end; }
.rechner label { display:grid; gap:.3rem; font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--flut-muted); }
.rechner input[type="number"], .rechner select {
  background:var(--flut-bg1); color:var(--flut-text); border:1px solid var(--flut-line2);
  padding:.55rem .7rem; font:500 1rem var(--schrift-text); width:130px; border-radius:2px;
}
.rechner input:focus, .rechner select:focus { border-color:var(--flut-blau); outline:none; }
.rechner select { width:auto; }
.rechner__zeile-btn { background:none; border:1px dashed var(--flut-line2); color:var(--flut-muted); padding:.45rem .9rem; cursor:pointer; font:600 .8rem var(--schrift-text); }
.rechner__zeile-btn:hover { color:var(--flut-text); border-color:var(--flut-blau); }
.rechner__pick { display:flex; gap:.9rem; align-items:end; margin-bottom:.6rem; }
.rechner__pick .entfernen { background:none; border:none; color:var(--flut-rot); cursor:pointer; font-size:1.1rem; padding:.4rem; }
.rechner__ergebnis { margin-top:1.1rem; border-top:1px solid var(--flut-line); padding-top:1rem; display:grid; gap:.4rem; }
.rechner__ergebnis p { margin:0; display:flex; justify-content:space-between; gap:1rem; font-size:.95rem; }
.rechner__ergebnis p strong { font-family:var(--schrift-display); font-size:1.15rem; }
.rechner__ergebnis .hervor { color:var(--flut-gruen); }
.rechner__ergebnis .negativ { color:var(--flut-rot); }
.rechner__hinweis { font-size:.78rem; color:var(--flut-faint); margin-top:.8rem; }

/* ---------- Live-Quoten ---------- */
.live-brett { display:grid; gap:.6rem; margin-top:1.2rem; }
.live-spiel { display:grid; grid-template-columns:1fr auto; gap:.6rem 1rem; align-items:center; background:var(--flut-panel); border:1px solid var(--flut-line); padding:.85rem 1.1rem; }
.live-spiel__liga { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--flut-muted); }
.live-spiel__paarung { font-family:var(--schrift-display); font-weight:600; font-size:1.1rem; }
.live-spiel__stand { font-family:var(--schrift-display); font-weight:700; font-size:1.3rem; color:var(--flut-amber); }
.live-quoten-set { display:flex; gap:.5rem; }
.live-quote { min-width:64px; text-align:center; background:var(--flut-bg1); border:1px solid var(--flut-line2); padding:.35rem .5rem; font-size:.85rem; }
.live-quote b { display:block; font-family:var(--schrift-display); font-size:1.05rem; }
.live-stand-hinweis { font-size:.78rem; color:var(--flut-faint); margin-top:.7rem; }

/* ---------- Tabellen mobil: stapeln statt scrollen ---------- */
@media (max-width: 720px) {
  table.stapelbar { display:block; min-width:0; border:none; }
  table.stapelbar thead, table.stapelbar .stapel-kopf { display:none; }
  table.stapelbar tbody { display:block; width:100%; min-width:0; }
  table.stapelbar tbody tr, table.stapelbar > tr {
    display:block; margin:0 0 .75rem; padding:.4rem .9rem;
    background:var(--flut-panel); border:1px solid var(--flut-line);
    border-left:3px solid var(--flut-blau);
  }
  table.stapelbar td, table.stapelbar tbody th {
    display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
    border:none; border-bottom:1px solid var(--flut-line);
    padding:.5rem 0; text-align:right; background:none !important;
  }
  table.stapelbar td:last-child { border-bottom:none; }
  table.stapelbar td::before {
    content:attr(data-label);
    font-family:var(--schrift-display); font-weight:600; text-transform:uppercase;
    letter-spacing:.06em; font-size:.75rem; color:var(--flut-muted); text-align:left;
    flex:0 0 auto;
  }
  table.stapelbar td:first-child { font-weight:600; }
  /* Wrapper braucht mobil keinen Scroll mehr */
  .tabellen-rahmen { overflow:visible; border:none; }
  .prosa table.stapelbar { overflow:visible; }
}

/* ---------- Infografiken (SVG immer responsiv) ---------- */
.prosa figure { margin:2rem 0; }
.prosa figure svg { max-width:100%; height:auto; display:block; }
.prosa figure figcaption { font-size:.78rem; color:var(--flut-faint); margin-top:.4rem; }
.prosa textarea { width:100%; background:var(--flut-bg1); color:var(--flut-muted); border:1px solid var(--flut-line2); font-size:.75rem; padding:.5rem; }

/* ---------- Seiten-Hero + Autoren-Box ---------- */
.seiten-hero { margin:2rem 0; }
.seiten-hero img { display:block; width:100%; height:auto; border:1px solid var(--flut-line); }
.autoren-box {
  display:flex; gap:1rem; align-items:center; max-width:76ch; margin-top:2.2rem;
  background:var(--flut-panel); border:1px solid var(--flut-line);
  border-left:3px solid var(--flut-blau); padding:1rem 1.2rem;
}
.autoren-box img { width:72px; height:72px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.autoren-box__name { margin:0 0 .25rem; font-size:.92rem; }
.autoren-box__bio { margin:0; font-size:.82rem; color:var(--flut-muted); }

/* ---------- Age-Gate ---------- */
.alterspruefung {
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:color-mix(in srgb, var(--flut-bg0) 88%, transparent);
  backdrop-filter:blur(6px); padding:1rem;
}
.alterspruefung__karte {
  max-width:460px; background:var(--flut-panel); border:1px solid var(--flut-line2);
  border-top:3px solid var(--flut-amber); padding:1.8rem; font-size:.92rem;
}
.alterspruefung__marke { font-family:var(--schrift-display); font-style:italic; font-weight:700; text-transform:uppercase; color:var(--flut-blau-hell); margin:0 0 .3rem; }
.alterspruefung__karte h2 { font-size:1.5rem; }
.alterspruefung__karte p { color:var(--flut-muted); }
.alterspruefung__aktionen { display:flex; gap:.8rem; flex-wrap:wrap; margin:1.1rem 0 .6rem; }
.alterspruefung__hilfe { font-size:.78rem; }
body.gate-offen { overflow:hidden; }

/* ---------- Reveal (scoreline-rise, nur below-fold, JS-armed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .anpfiff [data-einlauf] { opacity:0; transform:translateY(10px); }
  .anpfiff [data-einlauf].im-bild { opacity:1; transform:none; transition:opacity var(--tempo-lang) var(--schwung), transform var(--tempo-lang) var(--schwung); }
  /* Flutlicht-Sweep beim Umschalten */
  @keyframes flutlicht-sweep { from { opacity:.55; } to { opacity:0; } }
  html.licht-wechsel .kopf::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 60% 180% at 85% -40%, var(--flut-blau-hell), transparent 70%);
    animation:flutlicht-sweep .55s var(--schwung) forwards;
  }
}