/* =============================================================
   tippkarten-design.css — Neues Tipps-Tab Design (Owner-Handoff
   aus Claude-Design Tool, 2026-05-14).
   Aktiviert ueber body.tk-on. Affects:
   - globaler Background (Starfield ueber dem dunklen Grund)
   - Logo (Mint-Chip + "KI Tipps" Gradient-Text)
   - Top-Section (Mini-Stats + Banker + Date-Pill)
   - Match-Card im Tipps-Tab (Stadium2 Layout — Hex zentral)
   Andere Tabs / Karten bleiben unangetastet.
   ============================================================= */

/* ── Globale Akzent-Farbe ─────────────────────────────────────── */
body.tk-on { --tk-accent: #5EEAD4; }

/* ── Background: Simples Starfield ueber dem dunklen Grund ────── */
body.tk-on {
  background:
    radial-gradient(1.4px 1.4px at 12% 8%,  rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px   1px   at 27% 22%, rgba(255,255,255,.4)  50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 42% 14%, rgba(255,255,255,.5)  50%, transparent 51%),
    radial-gradient(1px   1px   at 58% 6%,  rgba(255,255,255,.38) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 73% 18%, rgba(255,255,255,.5)  50%, transparent 51%),
    radial-gradient(1px   1px   at 88% 12%, rgba(255,255,255,.36) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at  6% 38%, rgba(255,255,255,.42) 50%, transparent 51%),
    radial-gradient(1px   1px   at 33% 52%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 64% 44%, rgba(255,255,255,.42) 50%, transparent 51%),
    radial-gradient(1px   1px   at 82% 60%, rgba(255,255,255,.4)  50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 18% 72%, rgba(255,255,255,.46) 50%, transparent 51%),
    radial-gradient(1px   1px   at 50% 86%, rgba(255,255,255,.4)  50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 78% 92%, rgba(255,255,255,.42) 50%, transparent 51%),
    radial-gradient(1100px 800px at 50% -15%, rgba(94,234,212,.06), transparent 60%),
    radial-gradient(900px 700px at 110% 5%, rgba(79,195,247,.05), transparent 65%),
    linear-gradient(180deg, #07090f 0%, #0a0d15 100%) #07090f !important;
}

/* Bestehende BG-Layer abschalten — der neue Starfield ist die einzige Quelle. */
body.tk-on #tm-galaxy,
body.tk-on #tm-comets,
body.tk-on #tm-stars-canvas,
body.tk-on #tm-bg-video,
body.tk-on #tm-footballs { display: none !important; }

/* Ambient-Body::before aus index.html dimmen (sonst Doppel-Wash). */
body.tk-on::before { opacity: 0 !important; }

/* ── Globale Schrift-Familie fuer neue UI-Elemente ─────────────── */
body.tk-on {
  font-feature-settings: 'ss01', 'cv02';
}

/* ──────────────────────────────────────────────────────────────
   LOGO — Mint-Chip + "KI Tipps" Gradient
   ────────────────────────────────────────────────────────────── */
body.tk-on .nb {
  background: rgba(10, 13, 21, .82) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  box-shadow: none !important;
}

/* Alte Logo-Bestandteile verstecken (alle Variants v2-v8). */
body.tk-on .lm8,
body.tk-on .logo-mark,
body.tk-on .logo,
body.tk-on .logo-ball,
body.tk-on .nb-logo-wrap::before,
body.tk-on .nb-logo-wrap::after,
body.tk-on .nb-r { display: none !important; }

body.tk-on .nb-logo-wrap { overflow: visible !important; }

/* Neuer Logo-Mark. */
.tk-logo {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 22px/1 'Inter Tight', 'DM Sans', system-ui, sans-serif !important;
  letter-spacing: -.01em;
  color: #fff;
  cursor: pointer;
  user-select: none;
  text-decoration: none !important;
}
.tk-logo__icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(94,234,212,.18), rgba(94,234,212,.04));
  box-shadow: 0 0 0 1px rgba(94,234,212,.28), 0 0 20px rgba(94,234,212,.2);
  flex-shrink: 0;
}
.tk-logo__icon svg { display: block; }
.tk-logo__text {
  background: linear-gradient(180deg, #fff 30%, #b9bccb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.01em;
}

/* Sub-Headline unter Logo. */
.tk-logo-sub {
  font: 600 11px/1.4 'Inter Tight', sans-serif !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: rgba(244,246,251,.36) !important;
  margin-top: 4px;
  white-space: nowrap;
  text-align: center;
}

/* ──────────────────────────────────────────────────────────────
   TOP-SECTION — Mini-Stats + Banker
   Doppelte Selektor-Hierarchie (html body.tk-on) damit jede
   !important-Cascade aus transparency-pass.css definitiv ueberstimmt
   wird — auch wenn Service-Worker noch alte Bundles cached.
   ────────────────────────────────────────────────────────────── */
html body.tk-on #sbar.sbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

html body.tk-on .sbar .mini-stat {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.012) 22%, rgba(0,0,0,.45) 100%),
    linear-gradient(180deg, #0a0d14 0%, #06080d 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  padding: 11px 14px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.55) inset,
    0 12px 26px rgba(0,0,0,.38) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  position: relative;
  overflow: hidden;
  /* Killswitch fuer alten transparency-pass.css green-tube: blur-Layer aus. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body.tk-on .sbar .mini-stat::after {
  content: '';
  position: absolute; left: 1px; right: 1px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.32) 25%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.32) 75%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
html body.tk-on .sbar .mini-stat__value {
  font: 800 26px/1 'Inter Tight', sans-serif !important;
  color: #fff !important;
  letter-spacing: -.025em !important;
  font-variant-numeric: tabular-nums;
}
html body.tk-on .sbar .mini-stat__label {
  font: 600 9.5px/1 'Inter Tight', sans-serif !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: rgba(244,246,251,.45) !important;
  margin-top: 1px;
}
html body.tk-on .sbar .mini-stat__delta {
  font: 600 11px/1.2 'Inter Tight', sans-serif !important;
  color: var(--tk-accent) !important;
  margin-top: 2px !important;
  letter-spacing: -.005em !important;
}

/* ──────────────────────────────────────────────────────────────
   Layout: kein Pflicht-100vh + kein 108px-Reserve-Padding mehr
   (Owner-Wunsch 2026-05-14). Bei wenigen Karten klebte die Card-
   Liste oben und der grosse Leerraum bis zum Footer wirkte
   unfertig. Body-BG wird vom Browser ueber die ganze Viewport
   gepaintet, daher safe min-height aufzuheben.
   ────────────────────────────────────────────────────────────── */
html body.tk-on .pw,
html body.tk-on #app-page,
html body.tk-on main,
html body.tk-on .cn,
html body.tk-on .cg {
  min-height: 0 !important;
}
/* Auf Mobile: das grosse Reserve-Padding (108px) aus .cn killen.
   Der Credits-Footer hat eigenes padding-bottom (80px + nav-lift),
   das deckt die fixed Bottom-Nav-Clearance ab. */
@media (max-width: 600px) {
  html body.tk-on .cn { padding: 0 10px 0 !important; }
  html body.tk-on .cg { padding-bottom: 8px !important; }
  html body.tk-on .tm-credits-footer { margin-top: 10px !important; }
}

/* ──────────────────────────────────────────────────────────────
   SMART-TAB — Banker-Schein / Value-Schein / HT-FT Sektionen
   Owner-Wunsch 2026-05-14: alles im Stadium2-Look.
   Targets sind Inline-Style-Container von smartKombi.tab.js
   (renderSheetCard, renderSmartTabHtFt).
   Legs werden seit 2026-05-14 als <article class="tk-stadium2-leg">
   gerendert (renderStadiumLeg) → keine .match-card-Restyle mehr noetig.
   ────────────────────────────────────────────────────────────── */

/* Stadium2-Leg = kompaktere Card-Variante mit Quote-Footer. */
body.tk-on .tk-stadium2-leg {
  border-radius: 14px;
}
body.tk-on .tk-stadium2-leg .tk-stadium2__body {
  padding: 6px 10px 8px;
}
body.tk-on .tk-stadium2-leg .tk-stadium2__hex {
  width: 56px; height: 62px;
}
body.tk-on .tk-stadium2-leg .tk-stadium2__hex-pick {
  font-size: 13px;
}
body.tk-on .tk-stadium2-leg .tk-stadium2__hex-pct {
  font-size: 10.5px;
}
body.tk-on .tk-stadium2-leg .tk-stadium2__hex-pct i {
  font-size: 7.5px;
}
body.tk-on .tk-stadium2-leg .tk-stadium2__center {
  width: 56px;
  height: 62px;
}
body.tk-on .tk-stadium2-leg .tk-stadium2__t-name {
  font-size: 12px;
}

/* Schein-Tab Leg-Wrapper: kompaktes Container fuer Stadium-Leg + Extras.
   Owner-Wunsch 2026-05-14: Schein-Tab muss flüssig laufen, auch wenn
   4 Lanes × 3-5 Legs = bis zu 20 Stadium-Cards gleichzeitig sichtbar.
   → aggressive Mobile-Perf-Optimierungen direkt fuer Lane-Legs.
   ────────────────────────────────────────────────────────────── */
body.tk-on .tk-claude-leg,
body.tk-on .tk-conservative-leg,
body.tk-on .tk-quant-leg,
body.tk-on .tk-aggressive-leg {
  position: relative;
  /* Off-screen Legs skippen (massiver Scroll-Gewinn auf Mobile). */
  content-visibility: auto;
  contain-intrinsic-size: auto 130px;
}

/* Mobile + Schein-Tab-Lane: alle teuren Filter / Animationen aus.
   Cards bleiben statisch im Stadium2-Look, ohne GPU-Last. */
@media (max-width: 600px) {
  body.tk-on .tk-claude-leg .tk-stadium2,
  body.tk-on .tk-conservative-leg .tk-stadium2,
  body.tk-on .tk-quant-leg .tk-stadium2,
  body.tk-on .tk-aggressive-leg .tk-stadium2 {
    animation: none !important;
  }
  /* Hex-Aura: blur(9px) ist auf Mobile GPU-teuer — Solid-Radial statt blurred. */
  body.tk-on .tk-claude-leg .tk-stadium2__hex-aura,
  body.tk-on .tk-conservative-leg .tk-stadium2__hex-aura,
  body.tk-on .tk-quant-leg .tk-stadium2__hex-aura,
  body.tk-on .tk-aggressive-leg .tk-stadium2__hex-aura {
    filter: none !important;
    inset: -6px !important;
    opacity: .55 !important;
    animation: none !important;
  }
  /* Form-Chip Glow-Shadows aus — bis zu 96 Shadows bei 4 Lanes × 3 Legs × 2 Teams × 4 Chips. */
  body.tk-on .tk-claude-leg .tk-chip,
  body.tk-on .tk-conservative-leg .tk-chip,
  body.tk-on .tk-quant-leg .tk-chip,
  body.tk-on .tk-aggressive-leg .tk-chip {
    box-shadow: none !important;
  }
  /* Shield Drop-Shadow aus — pro Leg 2 Drop-Shadows × 12 Legs = teuer. */
  body.tk-on .tk-claude-leg .tk-shield,
  body.tk-on .tk-conservative-leg .tk-shield,
  body.tk-on .tk-quant-leg .tk-shield,
  body.tk-on .tk-aggressive-leg .tk-shield,
  body.tk-on .tk-claude-leg .tk-shield--logo,
  body.tk-on .tk-conservative-leg .tk-shield--logo,
  body.tk-on .tk-quant-leg .tk-shield--logo,
  body.tk-on .tk-aggressive-leg .tk-shield--logo {
    filter: none !important;
  }
  /* Stagger-Reveal-Animation: nur 1× initial, danach statisch (kein Re-Animation
     bei Day-Switch oder LLM-Refresh). */
  body.tk-on .tk-claude-leg .tk-anim-in,
  body.tk-on .tk-conservative-leg .tk-anim-in,
  body.tk-on .tk-quant-leg .tk-anim-in,
  body.tk-on .tk-aggressive-leg .tk-anim-in {
    animation: none !important;
  }
  /* Tk-Anim-In komplett aus auf Mobile fuer Lanes (zu viele parallele Reveal-Anims). */
  body.tk-on .tk-claude-leg .tk-stadium2-leg,
  body.tk-on .tk-conservative-leg .tk-stadium2-leg,
  body.tk-on .tk-quant-leg .tk-stadium2-leg,
  body.tk-on .tk-aggressive-leg .tk-stadium2-leg {
    animation: none !important;
  }
  /* Quote-Footer Drop-Shadow (am Pred-Value) entfernen — laeuft eh statisch. */
  body.tk-on .tk-claude-leg .tk-stadium2-leg__odds-value,
  body.tk-on .tk-conservative-leg .tk-stadium2-leg__odds-value,
  body.tk-on .tk-quant-leg .tk-stadium2-leg__odds-value,
  body.tk-on .tk-aggressive-leg .tk-stadium2-leg__odds-value {
    filter: none !important;
  }
}

/* Result-Tint: subtle Bordertinge wenn Match settled. */
body.tk-on .tk-leg-correct .tk-stadium2 {
  border-color: rgba(0,230,118,.32) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.55) inset,
    0 12px 26px rgba(0,0,0,.38),
    0 0 0 1px rgba(0,230,118,.12),
    0 0 14px rgba(0,230,118,.10) !important;
}
body.tk-on .tk-leg-wrong .tk-stadium2 {
  border-color: rgba(255,82,82,.28) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.55) inset,
    0 12px 26px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,82,82,.10),
    0 0 12px rgba(255,82,82,.08) !important;
}

/* Extra-Zeile fuer Result-Badge + Reasoning unter dem Leg-Card. */
.tk-leg__extra {
  margin-top: 6px;
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}
.tk-leg__result {
  display: flex; gap: 6px;
}
.tk-leg__badge,
.tk-leg__result span {
  display: inline-flex; align-items: center;
  font: 700 9.5px/1 'Inter Tight', sans-serif;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 999px;
}
.tk-leg__badge--correct {
  background: rgba(0,230,118,.18);
  color: #2BE3AE;
  border: 1px solid rgba(0,230,118,.32);
}
.tk-leg__badge--wrong {
  background: rgba(255,82,82,.18);
  color: #FF6680;
  border: 1px solid rgba(255,82,82,.30);
}
.tk-leg__reasoning {
  font: 400 11.5px/1.5 'Inter Tight', sans-serif;
  color: rgba(244,246,251,.55);
  letter-spacing: -.005em;
  padding: 0 2px;
  word-wrap: break-word;
}

/* Footer-Strip mit Quote (rechts), zarter Akzent. */
.tk-stadium2-leg__footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px;
  padding: 5px 12px 7px;
  border-top: 1px solid rgba(255,255,255,.05);
  background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(0,0,0,.18));
  position: relative;
  z-index: 2;
}
.tk-stadium2-leg__odds-label {
  font: 600 9px/1 'Inter Tight', sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244,246,251,.45);
}
.tk-stadium2-leg__odds-value {
  font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 35%, transparent));
}

/* Outer-Container der Sheet-Cards (BANKER / VALUE / HT-FT).
   Attribute-Selektor faengt die Inline-Style-Container ab. */
html body.tk-on #smart-kombi-content [style*="border:1px solid"][style*="border-radius:10px"],
html body.tk-on #smart-kombi-content [style*="border: 1px solid"][style*="border-radius: 10px"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 22%, rgba(0,0,0,.45) 100%),
    linear-gradient(180deg, #0a0d14 0%, #06080d 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.55) inset,
    0 12px 26px rgba(0,0,0,.38) !important;
  overflow: hidden;
}
html body.tk-on #smart-kombi-content [style*="border:1px solid"][style*="border-radius:10px"]::before,
html body.tk-on #smart-kombi-content [style*="border: 1px solid"][style*="border-radius: 10px"]::before {
  content: '';
  position: absolute; left: 1px; right: 1px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32) 25%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.32) 75%, transparent);
  pointer-events: none;
  z-index: 1;
}

/* Inner Mini-Cards (buildMiniCard nutzt .match-card) im Smart-Tab.
   Stadium2-Glas statt Cyan-Tube. */
html body.tk-on #smart-kombi-content .match-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 22%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, #0a0d14 0%, #06080d 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 12px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.55) inset,
    0 8px 18px rgba(0,0,0,.32) !important;
  padding: 8px 10px !important;
  position: relative;
  overflow: hidden;
}
html body.tk-on #smart-kombi-content .match-card::before {
  content: '';
  position: absolute; left: 1px; right: 1px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32) 25%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.32) 75%, transparent);
  pointer-events: none;
  z-index: 1;
}
html body.tk-on #smart-kombi-content .match-card::after { display: none !important; }

/* Tip-Box innerhalb der Mini-Cards (HEIMSIEG | 70.2% ×1.50). */
html body.tk-on #smart-kombi-content .match-card__predictions,
html body.tk-on #smart-kombi-content .match-card__predictions--single {
  background:
    linear-gradient(180deg, rgba(94,234,212,.06), rgba(94,234,212,.012)),
    rgba(0,0,0,.32) !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 0 !important;
  padding: 6px 10px !important;
  margin: 0 -10px -8px !important;
}
html body.tk-on #smart-kombi-content .pred-badge {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body.tk-on #smart-kombi-content .pred-badge__label {
  font: 600 9px/1 'Inter Tight', sans-serif !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: rgba(244,246,251,.55) !important;
}
html body.tk-on #smart-kombi-content .pred-badge__value {
  font: 700 12px/1 'Inter Tight', sans-serif !important;
  color: var(--tk-accent, #5EEAD4) !important;
  letter-spacing: -.005em !important;
}

/* Team-Logo-Fallback Kreise zarter machen (matchen Stadium2-Aesthetik). */
html body.tk-on #smart-kombi-content .match-card__team-logo {
  width: 24px !important;
  height: 24px !important;
  font-size: .8rem !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset !important;
}
html body.tk-on #smart-kombi-content .match-card__team-name {
  font: 700 12px/1.15 'Inter Tight', sans-serif !important;
  color: #fff !important;
  letter-spacing: -.005em !important;
}
html body.tk-on #smart-kombi-content .match-card__league {
  font: 600 9.5px/1 'Inter Tight', sans-serif !important;
  letter-spacing: .14em !important;
  color: rgba(244,246,251,.5) !important;
}

/* Section-Header-Texte (BANKER-SCHEIN / VALUE-SCHEIN / HT/FT WAHRSCHEINLICHKEITEN)
   in Inter Tight statt mono. Akzentfarben bleiben (gruen/gold). */
html body.tk-on #smart-kombi-content [style*="⬡ BANKER"],
html body.tk-on #smart-kombi-content [style*="⬡ VALUE"],
html body.tk-on #smart-kombi-content [style*="∑ HT/FT"] {
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
}

/* Killswitch fuer alte Neon-Tube-Layer aus transparency-pass.css.
   Greift fuer mini-stat + banker + filter-card im neuen Mode.
   html-Prefix fuer Specificity (0,2,2) > (0,1,0). */
html body.tk-on .sbar .mini-stat,
html body.tk-on .banker-inline,
html body.tk-on .mobile-filter-card {
  /* Verhindert dass uebrig gebliebene Legacy-Rules irgendwelche
     gruenen Box-Shadows oder Backdrop-Blurs ueber unser Glas legen. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ──────────────────────────────────────────────────────────────
   BANKER — Stadium2-Layout mit Gold-Akzent (Owner-Handoff 2026-05-14)
   Erbt komplette tk-stadium2-Struktur (Top + Body Grid mit Shields/Hex).
   Hier nur Banker-spezifische Overrides: Gold-Border, Crown-Chip,
   Gold-Hex statt Mint, Score-Pill, Footer mit Pick + Stats-Chips.
   ────────────────────────────────────────────────────────────── */
body.tk-on .sbar .banker-inline.tk-banker.tk-stadium2 {
  grid-column: 1 / -1 !important;
  border: 1px solid rgba(245,192,74,.32) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  cursor: default !important;
  margin: 0 !important;
  /* Gold-Outer-Glow statt Cyan, sonst gleiche Material-Sprache. */
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.6) inset,
    0 16px 36px rgba(0,0,0,.5),
    0 2px 10px rgba(0,0,0,.35),
    0 0 0 1px rgba(245,192,74,.12),
    0 0 18px rgba(245,192,74,.10) !important;
}
/* Edge-Highlight oben (gold). */
body.tk-on .sbar .banker-inline.tk-banker .tk-edge-hl {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245,192,74,.45) 25%,
    rgba(245,192,74,.65) 50%,
    rgba(245,192,74,.45) 75%,
    transparent 100%);
}

/* Banker-Chip oben links: Gold-Tint mit Crown. */
body.tk-on .tk-banker__chip {
  background: linear-gradient(180deg, rgba(245,192,74,.18), rgba(245,192,74,.04)) !important;
  border-color: rgba(245,192,74,.32) !important;
  color: #F5C04A !important;
  letter-spacing: .14em !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  font-size: 10px !important;
  max-width: none !important;
}
.tk-banker__crown { font-size: 13px; line-height: 1; }

/* Score-Pill rechts: Gold statt Mint. */
body.tk-on .tk-banker__elo {
  background: rgba(245,192,74,.18) !important;
  color: #F5C04A !important;
  border: 1px solid rgba(245,192,74,.32);
  letter-spacing: .12em !important;
  font-size: 8.5px !important;
  padding: 3px 7px !important;
  animation: none !important;
  box-shadow: 0 0 8px rgba(245,192,74,.18) !important;
}

/* Hex im Banker: Gold-Akzent statt Mint, kein conic-spin (Static-Look). */
body.tk-on .banker-inline.tk-banker .tk-stadium2__hex {
  background:
    linear-gradient(180deg, rgba(245,192,74,.42), rgba(245,192,74,.10)),
    rgba(0,0,0,.55) !important;
}
body.tk-on .banker-inline.tk-banker .tk-stadium2__hex::before {
  border-color: #F5C04A !important;
}
body.tk-on .banker-inline.tk-banker .tk-stadium2__hex-pick {
  text-shadow:
    0 0 14px rgba(245,192,74,.65),
    0 1px 2px rgba(0,0,0,.5) !important;
}
body.tk-on .banker-inline.tk-banker .tk-stadium2__hex-aura {
  background: radial-gradient(closest-side, rgba(245,192,74,.55), transparent 75%) !important;
  animation: none !important;
  opacity: .7;
}
/* Spin/Scan im Banker komplett aus — er soll ruhig wirken (Premium-Pick). */
body.tk-on .banker-inline.tk-banker .tk-stadium2__hex-spin,
body.tk-on .banker-inline.tk-banker .tk-stadium2__hex-scan,
body.tk-on .banker-inline.tk-banker .tk-stadium2__shimmer { display: none !important; }

/* Banker-Footer: Pick-Line links + Stats-Chips rechts. */
.tk-banker__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(245,192,74,.14);
  background: linear-gradient(180deg, rgba(245,192,74,.04), rgba(0,0,0,.18));
  flex-wrap: wrap;
}
.tk-banker__pick-line {
  display: inline-flex; align-items: baseline; gap: 6px;
  font: 700 13.5px/1 'Inter Tight', sans-serif;
  color: #F5C04A;
  letter-spacing: -.005em;
}
.tk-banker__pick-line strong { font-weight: 800; color: #fff; }
.tk-banker__arrow {
  font-weight: 700;
  opacity: .85;
  font-size: 14px;
}
.tk-banker__footer-stats {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tk-banker__stat {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 7px;
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.tk-banker__stat-label {
  font: 600 9px/1 'Inter Tight', sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244,246,251,.45);
}
.tk-banker__stat-value {
  font: 700 11.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -.005em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tk-banker__stat-value--green {
  color: var(--tk-accent, #5EEAD4);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tk-accent, #5EEAD4) 35%, transparent));
}

/* Banker Body kompakter (weniger Padding als Match-Cards weil Footer dazu kommt). */
body.tk-on .banker-inline.tk-banker .tk-stadium2__body {
  padding: 6px 10px 8px;
}

/* Mobile-Tweaks Banker. */
@media (max-width: 600px) {
  body.tk-on .tk-banker__chip { font-size: 9.5px !important; padding: 3px 8px 3px 5px !important; }
  .tk-banker__crown { font-size: 12px; }
  .tk-banker__footer { padding: 7px 10px 9px; gap: 8px; }
  .tk-banker__pick-line { font-size: 12.5px; }
  .tk-banker__stat { padding: 3px 7px 3px 6px; gap: 4px; }
  .tk-banker__stat-label { font-size: 8.5px; }
  .tk-banker__stat-value { font-size: 11px; }
}

/* ──────────────────────────────────────────────────────────────
   DATE-PILL — restyled .dn row
   ────────────────────────────────────────────────────────────── */
body.tk-on .dn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  font: 500 12px/1 'Inter Tight', sans-serif !important;
  color: rgba(244,246,251,.58) !important;
  box-shadow: none !important;
  gap: 8px !important;
}
body.tk-on .dn .db_ {
  background: transparent !important;
  border: 0 !important;
  color: rgba(244,246,251,.7) !important;
  font-size: 16px !important;
  padding: 4px 8px !important;
  cursor: pointer;
  font-weight: 600;
}
body.tk-on .dn .db_:hover { color: var(--tk-accent) !important; }
body.tk-on .dn .dd {
  font: 600 12px/1 'Inter Tight', sans-serif !important;
  color: #fff !important;
  flex: 1;
  text-align: center;
  letter-spacing: -.005em !important;
}

/* ──────────────────────────────────────────────────────────────
   MATCH-CARD — Stadium2 (NUR im #ml Container)
   ────────────────────────────────────────────────────────────── */
body.tk-on .tk-stadium2 {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 22%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, #0a0d14 0%, #06080d 100%);
  border: 1px solid rgba(255,255,255,.06);
  padding: 0;
  margin: 0 0 8px 0;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.6) inset,
    0 16px 36px rgba(0,0,0,.5),
    0 2px 10px rgba(0,0,0,.35),
    0 0 0 1px rgba(94,234,212,.06),
    0 0 14px rgba(94,234,212,.06);
  transition: transform .25s ease;
  /* Off-screen Karten ueberspringen — sehr grosser FPS-Gewinn bei vielen Cards. */
  content-visibility: auto;
  contain-intrinsic-size: auto 130px;
}
body.tk-on .tk-stadium2:hover { transform: translateY(-1px); }

body.tk-on .tk-stadium2::before,
body.tk-on .tk-stadium2::after { display: none !important; }

/* Edge-Highlight (oben). */
.tk-stadium2 > .tk-edge-hl {
  position: absolute; left: 1px; right: 1px; top: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.4) 25%, rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.4) 75%, transparent 100%);
  z-index: 1; pointer-events: none;
}

/* Team-Halo Background. */
.tk-stadium2__bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(55% 100% at 12% 50%, var(--home, #444) 0%, transparent 65%),
    radial-gradient(55% 100% at 88% 50%, var(--away, #444) 0%, transparent 65%);
  opacity: .22;
  /* tk-bg-drift Animation entfernt — animiert scale auf grossen Radial-Gradients,
     teurer Repaint pro Frame. Static reicht visuell. */
}
.tk-stadium2 > *:not(.tk-stadium2__bg):not(.tk-edge-hl) {
  position: relative; z-index: 2;
}

/* Shimmer-Sweep. */
.tk-stadium2__shimmer {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 38%; pointer-events: none; z-index: 1;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,.06) 35%,
    rgba(255,255,255,.14) 50%,
    rgba(255,255,255,.06) 65%,
    transparent 100%);
  transform: translateX(-150%);
  animation: tk-shimmer-sweep 7s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* Top-Bar. */
.tk-stadium2__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.tk-stadium2__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.09);
  font: 700 10px/1 'Inter Tight', sans-serif;
  color: #fff;
  letter-spacing: .04em;
  white-space: nowrap;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-stadium2__meta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 9px/1 'Inter Tight', sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.tk-stadium2__market {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.tk-stadium2__elo-pill {
  font: 700 8.5px/1 'Inter Tight', sans-serif;
  letter-spacing: .15em;
  padding: 2.5px 5px;
  border-radius: 4px;
  background: var(--tk-accent);
  color: #0a0d12;
  box-shadow: 0 0 10px color-mix(in srgb, var(--tk-accent) 45%, transparent);
  animation: tk-elo-pulse 2.8s ease-in-out infinite;
}
.tk-stadium2__live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #FF4D6A;
  box-shadow: 0 0 6px rgba(255,77,106,.7);
  animation: tk-live-blink 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.tk-stadium2__time {
  font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Body-Grid: Team-Col | Hex | Team-Col. */
.tk-stadium2__body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px;
}
.tk-stadium2__col {
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 0;
}
.tk-stadium2__col--rev { flex-direction: row-reverse; text-align: right; }

.tk-stadium2__shield-stack {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  flex-shrink: 0;
}
.tk-stadium2__avg-under {
  font: 700 9.5px/1 'JetBrains Mono', ui-monospace, monospace;
  color: #fff;
  font-variant-numeric: tabular-nums;
  padding: 2.5px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.09);
  letter-spacing: .03em;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
  white-space: nowrap;
}

.tk-stadium2__t-info {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  padding-top: 2px;
}
.tk-stadium2__col--rev .tk-stadium2__t-info { align-items: flex-end; }
.tk-stadium2__t-name {
  font: 700 12.5px/1.15 'Inter Tight', sans-serif;
  letter-spacing: -.015em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Hex zentral. */
.tk-stadium2__center {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  width: 64px;
  height: 72px;
}
.tk-stadium2__hex {
  width: 64px; height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tk-accent) 45%, transparent), color-mix(in srgb, var(--tk-accent) 12%, transparent)),
    rgba(0,0,0,.55);
}
.tk-stadium2__hex::before {
  content: '';
  position: absolute; inset: 1.5px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.88));
  border: 1px solid var(--tk-accent);
}
.tk-stadium2__hex > * { position: relative; z-index: 1; }
.tk-stadium2__hex-pick {
  font: 800 16px/1 'Inter Tight', sans-serif;
  letter-spacing: -.04em;
  color: #fff;
  text-shadow:
    0 0 14px color-mix(in srgb, var(--tk-accent) 65%, transparent),
    0 1px 2px rgba(0,0,0,.5);
  text-align: center;
  padding: 0 4px;
}
.tk-stadium2__hex-pct {
  margin-top: 2px;
  font: 800 12px/1 'Inter Tight', sans-serif;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tk-stadium2__hex-pct i {
  font-style: normal;
  font-size: 8.5px;
  opacity: .65;
  margin-left: 1px;
}

/* Hex-Effects. */
.tk-stadium2__hex-aura {
  position: absolute; inset: -14px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tk-accent) 55%, transparent), transparent 75%);
  filter: blur(9px);
  pointer-events: none;
  animation: tk-hex-aura 2.4s ease-in-out infinite;
  z-index: 0;
}
.tk-stadium2__hex-spin {
  position: absolute; inset: -3px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: conic-gradient(from 0deg,
    transparent 0deg,
    transparent 240deg,
    color-mix(in srgb, var(--tk-accent) 90%, transparent) 295deg,
    var(--tk-accent) 330deg,
    transparent 360deg);
  animation: tk-hex-spin 3.2s linear infinite;
  filter: blur(.6px);
  pointer-events: none;
  z-index: 0;
}
.tk-stadium2__hex-scan {
  position: absolute; left: 4px; right: 4px; top: 0; height: 14px;
  pointer-events: none; z-index: 1;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--tk-accent) 35%, transparent) 50%,
    transparent 100%);
  animation: tk-hex-scan 2.6s ease-in-out infinite;
  border-radius: 50%;
  filter: blur(1px);
}

/* Form-Chips (W/D/L Mini-Tiles, 5 letzte). */
.tk-form-row {
  display: inline-flex;
  gap: 1.5px;
  align-items: center;
}
.tk-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px; height: 13px;
  border-radius: 3px;
  font: 800 8.5px/1 'Inter Tight', sans-serif;
  letter-spacing: 0;
  border: .5px solid;
  flex-shrink: 0;
}
.tk-chip--W {
  background: linear-gradient(180deg, #2BE3AE, #16A77E);
  color: #04150F;
  border-color: rgba(43,227,174,.7);
  box-shadow: 0 0 7px rgba(34,211,158,.65);
}
.tk-chip--L {
  background: linear-gradient(180deg, #FF6680, #D63854);
  color: #fff;
  border-color: rgba(239,79,107,.6);
  box-shadow: 0 0 5px rgba(239,79,107,.4);
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.tk-chip--D {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.16);
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}

/* Team-Shield (SVG-Wrapper). */
.tk-shield {
  display: block;
  flex-shrink: 0;
}

/* Flagge im Liga-Chip. */
.tk-flag {
  border-radius: 2px;
  overflow: hidden;
  display: block;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.15);
  flex-shrink: 0;
}

/* Card-in Animation (gestaffelt). */
.tk-anim-in { animation: tk-card-in .55s cubic-bezier(.2,.65,.3,1) both; }

/* Reduced-Motion. */
@media (prefers-reduced-motion: reduce) {
  body.tk-on .tk-stadium2,
  .tk-stadium2__bg,
  .tk-stadium2__shimmer,
  .tk-stadium2__hex-spin,
  .tk-stadium2__hex-scan,
  .tk-stadium2__hex-aura,
  .tk-stadium2__live-dot,
  .tk-stadium2__elo-pill,
  .tk-anim-in { animation: none !important; }
}

/* ──────────────────────────────────────────────────────────────
   ANIMATIONEN
   ────────────────────────────────────────────────────────────── */
@keyframes tk-card-in {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tk-card-breathe {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255,255,255,.07) inset,
      0 -1px 0 rgba(0,0,0,.6) inset,
      0 16px 36px rgba(0,0,0,.5),
      0 2px 10px rgba(0,0,0,.35),
      0 0 0 1px color-mix(in srgb, var(--tk-accent) 0%, transparent),
      0 0 0 0 transparent;
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255,255,255,.07) inset,
      0 -1px 0 rgba(0,0,0,.6) inset,
      0 16px 36px rgba(0,0,0,.5),
      0 2px 10px rgba(0,0,0,.35),
      0 0 0 1px color-mix(in srgb, var(--tk-accent) 18%, transparent),
      0 0 28px color-mix(in srgb, var(--tk-accent) 22%, transparent);
  }
}
@keyframes tk-bg-drift {
  0%, 100% { opacity: .22; transform: scale(1); }
  50%      { opacity: .34; transform: scale(1.08); }
}
@keyframes tk-shimmer-sweep {
  0%   { transform: translateX(-150%); }
  55%  { transform: translateX(360%); }
  100% { transform: translateX(360%); }
}
@keyframes tk-hex-spin {
  to { transform: rotate(360deg); }
}
@keyframes tk-hex-scan {
  0%   { transform: translateY(-20%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(76px); opacity: 0; }
}
@keyframes tk-hex-aura {
  0%, 100% { opacity: .55; transform: scale(.92); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes tk-live-blink {
  0%, 100% { transform: scale(1);    opacity: .55; box-shadow: 0 0 4px  rgba(255,77,106,.5); }
  45%      { transform: scale(1.35); opacity: 1;   box-shadow: 0 0 12px rgba(255,77,106,.95); }
  90%      { transform: scale(1);    opacity: .7; }
}
@keyframes tk-elo-pulse {
  0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--tk-accent) 45%, transparent); }
  50%      { box-shadow: 0 0 18px color-mix(in srgb, var(--tk-accent) 75%, transparent); }
}

/* Stagger fuer mehrere Karten im #ml. */
body.tk-on .tk-stadium2:nth-child(1) { animation-delay: 0ms,    0ms; }
body.tk-on .tk-stadium2:nth-child(2) { animation-delay: 70ms,   0ms; }
body.tk-on .tk-stadium2:nth-child(3) { animation-delay: 140ms,  0ms; }
body.tk-on .tk-stadium2:nth-child(4) { animation-delay: 210ms,  0ms; }
body.tk-on .tk-stadium2:nth-child(5) { animation-delay: 280ms,  0ms; }
body.tk-on .tk-stadium2:nth-child(6) { animation-delay: 350ms,  0ms; }
body.tk-on .tk-stadium2:nth-child(n+7) { animation-delay: 420ms, 0ms; }

/* ──────────────────────────────────────────────────────────────
   MATCH-GROUP HEADER abschalten in Tipps-Tab (Doppel-"HEUTE" weg)
   und Filter-Bar zarter machen.
   ────────────────────────────────────────────────────────────── */
body.tk-on #ml .match-group__header { display: none !important; }

body.tk-on #lf.filter-bar {
  /* Filter-Pills duenner, transparenter — passt zum neuen Look. */
  gap: 6px;
}

/* ──────────────────────────────────────────────────────────────
   Mobile: alles bleibt funktional, kleine Anpassungen.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  body.tk-on #sbar.sbar {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  body.tk-on .sbar .mini-stat__value { font-size: 24px !important; }
  body.tk-on .sbar .mini-stat__label { font-size: 9.5px !important; }
  body.tk-on .sbar .mini-stat__delta { font-size: 10.5px !important; }

  body.tk-on .tk-stadium2 { margin-bottom: 10px; }
  body.tk-on .tk-stadium2__t-name { font-size: 11.5px; max-width: 86px; }
  body.tk-on .tk-stadium2__hex { width: 60px; height: 68px; }
  body.tk-on .tk-stadium2__hex-pick { font-size: 14px; }
  body.tk-on .tk-stadium2__hex-pct  { font-size: 11px; }

  /* ───────────────────────────────────────────────────────────
     Mobile-Performance: teure Animationen aus.
     - shimmer-sweep + hex-spin (conic+blur) + hex-scan + elo-pulse
       + live-blink + bg-drift sind GPU-Frames-Killer auf Mobile.
     - hex-aura (radial+blur) bleibt — ist der wichtigste visuelle
       Akzent und nur an einer Stelle pro Card.
     - card-Animation-in: 1× beim Mount ist OK, infinite-loops aus.
     ─────────────────────────────────────────────────────────── */
  body.tk-on .tk-stadium2__shimmer,
  body.tk-on .tk-stadium2__hex-spin,
  body.tk-on .tk-stadium2__hex-scan,
  body.tk-on .tk-stadium2__elo-pill,
  body.tk-on .tk-stadium2__live-dot,
  body.tk-on .tk-stadium2__bg { animation: none !important; }

  /* hex-spin auf Mobile komplett verstecken — conic-gradient + blur
     ist auf alten ARM-GPUs der teuerste Effekt. */
  body.tk-on .tk-stadium2__hex-spin { display: none !important; }
  body.tk-on .tk-stadium2__shimmer  { display: none !important; }

  /* hex-aura sanfter machen: kein Animation-Loop, statt dessen
     statischer Halo (gleiche Optik, kein Repaint pro Frame). */
  body.tk-on .tk-stadium2__hex-aura { animation: none !important; opacity: .7; }

  /* mini-stat::after Hairline weg auf Mobile (subtiler Detail-Sweep). */
  body.tk-on .sbar .mini-stat::after { display: none; }
}

/* ──────────────────────────────────────────────────────────────
   Filter-Card (Tag + Liga) im neuen Design.
   Override: gruenes Neon-Tube aus transparency-pass.css raus,
   stattdessen Stadium2-Glas-Look (gleiche Material-Sprache wie
   Match-Cards). NUR im tk-on Modus.
   html-Prefix sichert maximale Specificity gegen Legacy-Cascade.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  html body.tk-on .mobile-filter-card {
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.012) 22%, rgba(0,0,0,.45) 100%),
      linear-gradient(180deg, #0a0d14 0%, #06080d 100%) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.07) inset,
      0 -1px 0 rgba(0,0,0,.55) inset,
      0 12px 26px rgba(0,0,0,.38) !important;
    padding: 4px !important;
    gap: 6px !important;
    animation: none !important;
    /* Killswitch backdrop-filter (legacy haftet halbtransparent vor Match-Cards). */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: relative;
    overflow: hidden;
  }
  /* Top-Hairline analog zu Stadium2 Match-Card. */
  html body.tk-on .mobile-filter-card::before {
    content: '';
    position: absolute; left: 1px; right: 1px; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.32) 25%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.32) 75%, transparent);
    pointer-events: none;
    z-index: 2;
  }
  /* Trennlinie zwischen Tag und Liga zarter. */
  html body.tk-on .mobile-day-control {
    border-right: 1px solid rgba(255,255,255,.05) !important;
    background: transparent !important;
  }
  /* Tag/Liga-Container kein eigener Background, kein zusaetzlicher Rahmen. */
  html body.tk-on .mobile-league-trigger {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  /* Tag/Liga-Labels (oberhalb der Werte) in mint-Akzent + caps. */
  html body.tk-on .mobile-filter-card .label-tag,
  html body.tk-on .mobile-filter-card .label-liga,
  html body.tk-on .mobile-filter-card [class*="label"] {
    color: rgba(94,234,212,.55) !important;
    letter-spacing: .14em !important;
    font: 600 9px/1 'Inter Tight', sans-serif !important;
    text-transform: uppercase;
  }
  /* Werte (HEUTE / Alle Ligen) in Inter Tight 700 weiss. */
  html body.tk-on .mobile-filter-card strong,
  html body.tk-on .mobile-filter-card .value {
    font: 700 13px/1 'Inter Tight', sans-serif !important;
    color: #fff !important;
    letter-spacing: -.005em !important;
  }
  /* Chevron-Buttons zarter. */
  html body.tk-on .mobile-day-control > button:first-child,
  html body.tk-on .mobile-day-control > button:last-child {
    color: rgba(244,246,251,.55) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Doppeltes "HEUTE": die obere .dn-Pille verstecken — die
     mobile-filter-card hat schon den Tag-Switcher. */
  html body.tk-on .dn { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────
   Globale Mobile-Perf (alle Geraete mit pointer:coarse):
   Bewegungs-Animationen am Body-BG drosseln.
   ────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  body.tk-on { background-attachment: scroll !important; }
}