/* ============================================================================
   THEME SPORT — Tokens + Basis. Design kommt (wie in der Vorlage) aus den
   Inline-var()-Styles der Views; hier nur Tokens, Font-Fallback, Body-Basis,
   Hover-/Responsive-Helfer (was Inline nicht kann).
   Grundmodus DUNKEL (Arena/nativ, wie Vorlage). Hell via :root[data-theme="light"].
   Identität: harte Kanten (radius 3px), Oswald-Versalien, Signal-Rot + Gelb.
   ========================================================================== */

:root{
  --bg:#08080a; --bg2:#141418; --text:#f5f5f6; --muted:#9a9aa2; --border:#26262d;
  --primary:#ff2e2e; --primary-ink:#ffffff; --on-primary:#ffffff; --accent:#facc15;
  --radius:3px; --radius-lg:4px; --chip-radius:2px;
  --card-bw:1px; --card-bc:var(--border);
  /* Schatten-Skala (11/2026): weich + mehrlagig, kleine Y-Versätze. Dunkel: etwas mehr
     Deckkraft, damit Tiefe auf dunklem Grund überhaupt sichtbar bleibt — nie hart. */
  --shadow-sm:0 1px 2px rgba(0,0,0,.18);
  --shadow:0 1px 2px rgba(0,0,0,.16),0 6px 16px -6px rgba(0,0,0,.32);
  --shadow-hover:0 2px 4px rgba(0,0,0,.18),0 14px 28px -10px rgba(0,0,0,.40);
  --shadow-pop:0 4px 10px -2px rgba(0,0,0,.24),0 18px 36px -12px rgba(0,0,0,.45);
  /* Abstands-Raster (8er-System) — EINE Quelle für Karten-/Raster-/Spalten-Luft. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --gap-grid:var(--sp-4); --gap-card:var(--sp-5); --gap-col:40px; --gap-section:var(--sp-7);
  --font-head:'Oswald',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --head-weight:700; --head-spacing:0.01em; --head-transform:uppercase;
  --maxw:1240px;
}
:root[data-theme="light"]{
  --bg:#f4f4f6; --bg2:#ffffff; --text:#111114; --muted:#5c5c66; --border:#e1e1e7;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.04);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 12px -2px rgba(16,24,40,.06);
  --shadow-hover:0 2px 4px rgba(16,24,40,.04),0 12px 24px -6px rgba(16,24,40,.10);
  --shadow-pop:0 4px 8px -2px rgba(16,24,40,.06),0 16px 32px -8px rgba(16,24,40,.14);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body.sp{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column;}
.sp a{color:inherit;text-decoration:none;}
.sp img{max-width:100%;}
.sp-main{flex:1 0 auto;}
.sp-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%;}

/* Hover-/Transition-Helfer (Inline kann kein :hover) */
.sp-lift{transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;}
.sp-lift:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:var(--shadow-hover);}
.sp-btn{transition:transform .12s ease,filter .12s ease;cursor:pointer;text-decoration:none;}
.sp-btn:hover{transform:translateY(-1px);filter:brightness(1.08);}
.sp-link:hover{color:var(--primary)!important;}
@media(prefers-reduced-motion:reduce){ .sp-lift,.sp-btn{transition:none;} .sp-lift:hover,.sp-btn:hover{transform:none;} }

/* Live-Ticker (Sport-Signatur) */
.sp-ticker-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;animation:sp-ticker 26s linear infinite;}
@keyframes sp-ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){ .sp-ticker-track{animation:none;} }

/* Header-Navigation responsiv (Inline kann kein media query) */
.sp-navlink{color:var(--muted);transition:color .14s;}
.sp-navlink:hover{color:var(--text);}
.sp-navlink.is-active{color:var(--primary-ink);background:var(--primary);}
/* Burger nur mobil: !important schlägt das inline display:inline-flex des Icon-Buttons */
.sp-burger{display:none!important;}
@media(max-width:960px){
  .sp-nav{display:none!important;}
  .sp-burger{display:inline-flex!important;}
  .sp-nav.sp-open{display:flex!important;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    background:var(--bg2);border-bottom:1px solid var(--border);padding:12px 24px;gap:4px;z-index:120;}
}
.sp-hd-text{display:none;}
@media(min-width:600px){.sp-hd-text{display:inline;}}