/* ═══════════════════════════════════════════════════════
   TheBetAI Design System — CSS-Variablen & Utilities
═══════════════════════════════════════════════════════ */

:root {
  --tba-dark:         #221D54;  /* 01.09.2026: war #26215C, zwischendurch #1B1747 (zu dunkel).
                                   Siehe Flaechen-Rampe unten. */
  --tba-purple:       #6F65D8;
  --tba-purple-mid:   #493FA8;
  --tba-purple-light: #A49CEA;
  --tba-surface:      #EEEDFE;
  --tba-white:        #FFFFFF;
  --tba-gold:         #fbbf24;  /* Premium / höchste Conviction (5★ Featured) — Amber/Champagner */
  --tba-orange:       #FB923C;  /* Mittelstufe einer Gut/Schlecht-Skala (01.09.2026, Formzahl 1–4).
                                   ⚠ NICHT --tba-gold nehmen: Gold ist das Premium- und
                                   Conviction-Signal und steht in derselben Oberfläche für „sehr
                                   hohe Sicherheit". Eine goldene Mittelstufe hieße das Gegenteil
                                   von dem, was Gold sonst sagt. Dieses Orange liegt im Farbton
                                   klar zwischen Rot (#F87171) und Gold und liest sich als Orange,
                                   nicht als Champagner. */

  /* ── Flaechen-Rampe (01.09.2026) ──────────────────────────────────────────────
     Flaechen entstanden bis hierher als `rgba(255,255,255, α)` ueber dem Grund.
     Das hellt zwar auf, entzieht der Flaeche aber Farbe: Weiss hat keine Buntheit,
     jedes Weiss-Overlay zieht Richtung Grau. Gemessen war ausgerechnet die Karte,
     die vorne steht, die unbunteste Flaeche der Seite -- Grund 47 % Saettigung,
     Karte 39 %, Kachel darin 34 %, Balkenspur 30 %. Je weiter vorn, desto grauer.

     Ein Overlay kann das nicht loesen: Aufhellen braucht Helligkeit, und helle
     Farben sind in sRGB zwangslaeufig weniger bunt. Die Rampe setzt die Flaechen
     deshalb als VOLLTON. Fuenf Stufen, Saettigung konstant bei 51 % ± 2, die
     Helligkeit steigt gleichmaessig (19,2 → 20,8 → 25,1 → 29,4 → 34,9 → 39,4 %).

     Welche Stufe wohin gehoert, richtet sich nach dem UNTERGRUND, nicht nach dem
     alten Alpha-Wert: Was auf dem Seitengrund liegt, ist -1; was auf einer Karte
     liegt, -2. Das leisteten die Overlays vorher von selbst, Volltoene nicht.

     ⚠ Die Rampe ersetzt Weiss als FLAECHE. Weiss als SCHRIFT (285 Stellen
     `color: rgba(255,255,255, …)`) bleibt unberuehrt -- ebenso Trennlinien und
     Balkenfuellungen, wo neutrales Weiss gewollt ist.
     ⚠ Neue Toenungen gehoeren als Token hierher, nicht als rohes rgba ins Regelwerk
     (Design-Guide, Lehre aus der Brand-Rampen-Korrektur vom 24.08.2026). */
     ⚠ NICHT „eingesenkt" denken. Auf hellem Grund heisst dunkler „vertieft"; auf dunklem
     Grund heisst dunkler schlicht unsichtbar. Die Weiss-Overlays waren immer HELLER als
     ihr Untergrund, und das war richtig. Ein erster Anlauf am 01.09.2026 legte die
     dezenten Balkensegmente und die Gewichtsspuren auf eine dunklere Stufe -- sie
     verschwanden auf der Karte. Alles, was SICHTBAR sein soll, liegt ueber seinem
     Untergrund; nach unten geht nur, was aktiv zuruecktreten soll (gesperrte Zeilen). */
  --tba-surf-sunk:    #241E62;  /* zurueckgenommen: gesperrte / deaktivierte Zeilen */
  --tba-surf-1:       #2A2472;  /* Karte / Panel auf dem Seitengrund              */
  --tba-surf-2:       #332C86;  /* Kachel / Pille AUF einer Karte                 */
  --tba-surf-3:       #3C3499;  /* hervorgehoben, hover, aktives Segment          */

  /* Ausgangsfarben H/D/A (Prognose-Sektion) — bewusst NICHT Gold (Gold = Abo/Freischalten) */
  --tba-out-h:        #34D399;  /* Heimsieg — Grün */
  /* Unentschieden. War bis 24.08.2026 identisch mit --tba-purple; seit die Brand-Rampe
     eine Nuance dunkler ist, bleibt DIESER Wert bewusst auf der alten Helligkeit:
     H (#34D399) und A (#1EA8EB) sind hell, und ein abgesacktes D liesse den
     Ausgangs-Balken schief wirken. Die drei Ausgaenge sind gleichwertig. */
  --tba-out-d:        #7F77DD;  /* Unentschieden — Periwinkle, heller als --tba-purple */
  --tba-out-a:        #1EA8EB;  /* Auswärtssieg — Azur. Bis 01.09.2026 Sky #5B9DF9 (213°); der
                                   neue Grund ist gesaettigtes Violett (245°), davon loeste sich
                                   das alte Blau mit 32° Abstand nicht mehr. 200° liegt mittig
                                   zwischen Emerald (160°) und Brand (245°) — 40 bzw. 45 Grad. */

  /* ── Section-Marken (24.08.2026) ─────────────────────────────────────────────
     Vier Farben fuer den kleinen Balken links von den Abschnitts-Ueberschriften, in
     Spielkarte und Spielseite. Sie faerben AUSSCHLIESSLICH den Balken.

     ⚠ Die UEBERSCHRIFT bleibt weiss. Ein Zwischenstand am selben Tag faerbte auch den
     Titel mit — verworfen, weil der Abschnitts-Titel dann farblich mit den Werten
     darunter konkurrierte, die ihre Farbe aus einer BEDEUTUNG beziehen (Ausgang,
     Status, Vorzeichen). Der Balken markiert, der Titel benennt.

     ⚠ Die Zuordnung ist nicht beliebig. Zwei Bedingungen gelten gleichzeitig:
     1. Aufeinanderfolgende Abschnitte liegen weit auseinander: 187° → 292° → 81° → 330°,
        also 105° · 149° · 111°. Zwei aehnliche Balken untereinander waeren schlimmer
        als gar keine Farbe.
     2. Keine Marke steht neben einer verwandten Farbe IN IHREM EIGENEN Block. Deshalb
        bekommt die Aufstellung NICHT Cyan (ihr Netzdiagramm ist sky-blau) und die
        Ligastatistik NICHT Lime (ihre Treffer-Kaestchen sind gruen).

     Belegt sind: Rot 0° · Orange 27° · Gold 43° · Emerald 160° · Sky 215° · Blau 217° ·
     Indigo 239° · Periwinkle/Brand 245° · Violett 258°. Frei blieben nur drei Baender
     (Lime ~80°, Cyan ~187°, Fuchsia/Pink ~290–330°) — fuer eine fuenfte Marke ist kein
     Platz mehr, ohne etwas Bestehendes zu verwaessern.

     ⚠ Engste Stelle: Pink 330° liegt 30° von Danger-Rot 0°, und die Ligastatistik
     enthaelt rote ✗-Kaestchen. Verschiedene Groesse und Form, rund 100 px auseinander. */
  /* --tba-sec-forecast / -lineup / -facts / -league (Cyan · Fuchsia · Lime · Pink)
     am 29.08.2026 entfernt. Die vier Marken waren die einzigen Farben ohne inhaltliche
     Bedeutung und zogen genau dadurch Aufmerksamkeit von den Werten ab, die ihre Farbe
     aus einer Bedeutung beziehen. Abschnitte tragen jetzt eine Purple-Marke und eine
     nummerierte Purple-Kachel (.cas-x-num). */

  /* Typografie */
  --tba-font-serif:   'Outfit', sans-serif;
  --tba-font-sans:    'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Abstände */
  --tba-radius-sm:    6px;
  --tba-radius-md:    10px;
  --tba-radius-lg:    14px;

  /* Shadows */
  --tba-shadow-sm:    0 1px 4px rgba(38,33,92,0.10);
  --tba-shadow-md:    0 3px 12px rgba(38,33,92,0.15);
}

/* ── Sicherheitsnetz gegen horizontales Wegschieben (01.09.2026) ───────────────
   Ein einziges zu breites Element verschiebt in einem Dokument IMMER die ganze Seite,
   nicht nur sich selbst: Links wird Inhalt abgeschnitten, rechts erscheint eine weisse
   Flaeche. Das ist am 31.08.2026 an der Kopfzeile aufgetreten und am 01.09.2026 erneut
   an der Spaltenliste — beide Male gezielt behoben, aber ohne Netz darunter. Es kommt
   sonst beim naechsten zu breiten Element wieder.

   ⚠ `clip`, NICHT `hidden`. `overflow: hidden` auf einem Vorfahren macht jedes
   `position: sticky` darin unwirksam — die Kopfzeile der App ist sticky und waere
   mitgerissen worden. `clip` schneidet genauso ab, laesst sticky aber intakt.

   ⚠ Das Netz ersetzt keine Ursachensuche: Was zu breit ist, wird jetzt abgeschnitten
   statt die Seite zu verschieben. Beides ist falsch — nur ist Abschneiden das kleinere
   Uebel und vor allem eines, das nicht jede andere Seite mit kaputtmacht. */
html, body { overflow-x: clip; max-width: 100%; }

/* ── Fokusrahmen der Seitenüberschrift ──────────────────
   `<FocusOnNavigate Selector="h1">` in Routes.razor setzt bei jeder Navigation
   den Fokus auf die erste Überschrift, damit Screenreader nach einem Seitenwechsel
   ansagen, wo der Nutzer gelandet ist. Dafür trägt Blazor `tabindex="-1"` ein — und
   der Browser zeichnet daraufhin seinen Fokusrahmen um die Überschrift. Auf der
   Landing sah das aus wie ein Darstellungsfehler (gemeldet 30.08.2026).

   Wir unterdrücken nur den *sichtbaren Rahmen*, nicht den Fokus selbst: die Ansage
   für Screenreader bleibt vollständig erhalten. `tabindex="-1"` heißt, dass das
   Element per Tabulator gar nicht erreichbar ist — ein Fokusrahmen kann hier also
   niemandem bei der Tastaturbedienung helfen. Alle echten Bedienelemente
   (Links, Schaltflächen, Felder) behalten ihren Rahmen unverändert. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus { outline: none; }

/* ── Buttons ── */
.tba-btn-primary {
  background: var(--tba-purple);
  color: var(--tba-white);
  border: none;
  border-radius: var(--tba-radius-md);
  padding: 10px 24px;
  font-weight: 600;
  font-family: var(--tba-font-sans);
  cursor: pointer;
  transition: background 0.18s;
  text-decoration: none;
  display: inline-block;
}
.tba-btn-primary:hover { background: var(--tba-purple-mid); color: var(--tba-white); }

.tba-btn-outline {
  background: transparent;
  color: var(--tba-purple);
  border: 1.5px solid var(--tba-purple);
  border-radius: var(--tba-radius-md);
  padding: 10px 24px;
  font-weight: 600;
  font-family: var(--tba-font-sans);
  cursor: pointer;
  transition: background 0.18s;
  text-decoration: none;
  display: inline-block;
}
.tba-btn-outline:hover { background: var(--tba-surface); }

/* ── Cards ── */
.tba-card {
  background: var(--tba-white);
  border: 0.5px solid var(--tba-surface);
  border-radius: var(--tba-radius-lg);
  padding: 1rem 1.25rem;
  box-shadow: var(--tba-shadow-sm);
}

.tba-card-dark {
  background: var(--tba-dark);
  border-radius: var(--tba-radius-lg);
  padding: 1rem 1.25rem;
}

.tba-card-surface {
  background: var(--tba-surface);
  border-radius: var(--tba-radius-lg);
  padding: 1rem 1.25rem;
}

/* ── Badges ── */
.tba-badge {
  display: inline-block;
  background: var(--tba-surface);
  color: var(--tba-purple-mid);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
}

.tba-badge-dark {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  color: var(--tba-purple-light);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
}

/* ── Metriken ── */
.tba-metric {
  background: var(--tba-surface);
  border-radius: var(--tba-radius-md);
  padding: 0.85rem 1rem;
  text-align: center;
}
.tba-metric .val {
  font-size: 24px;
  font-weight: 700;
  color: var(--tba-dark);
}
.tba-metric .lbl {
  font-size: 11px;
  color: var(--tba-purple-mid);
  margin-top: 3px;
}
.tba-metric.pos .val { color: #1D9E75; }
.tba-metric.neg .val { color: #E24B4A; }

/* ── Footer ── */
.tba-footer {
  background: var(--tba-dark);
  padding: 2rem;
  text-align: center;
  margin-top: 3rem;
}
.tba-footer-legal {
  color: var(--tba-purple-mid);
  font-size: 12px;
  margin-top: 1rem;
}

/* ── Logo wrapper ── */
.tba-logo-wrap {
  display: block;
  line-height: 0;
}

/* ── ROI Performance Komponente ── */
.roi-performance { padding: 0.25rem 0; }
.roi-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 1.5rem;
}
@media (max-width: 600px) {
  .roi-metric-grid { grid-template-columns: repeat(2, 1fr); }
}
.roi-metric {
  background: var(--mud-palette-background-grey, #f5f5f5);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  text-align: center;
}
.roi-metric-val { font-size: 22px; font-weight: 500; }
.roi-metric-lbl { font-size: 11px; color: var(--mud-palette-text-secondary); margin-top: 3px; }
.roi-metric.roi-pos .roi-metric-val { color: #1D9E75; }
.roi-metric.roi-neg .roi-metric-val { color: #E24B4A; }
.roi-pos { color: #1D9E75; }
.roi-neg { color: #E24B4A; }
.roi-slider-wrap {
  background: var(--mud-palette-background-grey, #f5f5f5);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.roi-slider-title { font-size: 13px; font-weight: 500; margin-bottom: 12px; }
.roi-slider-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.roi-slider-label { font-size: 12px; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.roi-result-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.roi-result-item { display: flex; flex-direction: column; }
.roi-result-label { font-size: 11px; color: var(--mud-palette-text-secondary); margin-bottom: 2px; }
.roi-result-value { font-size: 18px; font-weight: 500; }
.roi-result-arrow { font-size: 18px; color: var(--mud-palette-text-disabled); padding: 0 4px; }
.roi-result-big { font-size: 30px; font-weight: 500; }
.roi-drawdown-note {
  font-size: 11px;
  border-left: 3px solid #E24B4A;
  padding: 8px 12px;
  margin-bottom: 1rem;
  color: var(--mud-palette-text-secondary);
}
.roi-disclaimer {
  font-size: 11px;
  color: var(--mud-palette-text-disabled);
  margin-top: 1rem;
  line-height: 1.6;
  border-top: 1px solid var(--mud-palette-lines-inputs, #e0e0e0);
  padding-top: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════
   Landing Page — Inter + Playfair Display
══════════════════════════════════════════════════════════════ */
.lp-page { display: flex; flex-direction: column; min-height: 100vh; font-family: var(--tba-font-sans); }

/* ── Nav ── */
.lp-nav {
  background: var(--tba-dark);
  padding: 0.85rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 16px;
  border-bottom: 1px solid rgba(111,101,216,0.18);
  backdrop-filter: blur(8px);
}
.lp-nav-links { display: flex; gap: 28px; }
.lp-nav-links a { color: var(--tba-purple-light); font-size: 14px; font-weight: 500; text-decoration: none; letter-spacing: 0.2px; transition: color 0.15s; }
.lp-nav-links a:hover { color: var(--tba-white); }
.lp-nav-btn {
  background: var(--tba-purple);
  color: var(--tba-white);
  padding: 9px 22px;
  border-radius: var(--tba-radius-md);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 10px rgba(111,101,216,0.3);
}
.lp-nav-btn:hover { background: var(--tba-purple-mid); color: var(--tba-white); box-shadow: 0 4px 16px rgba(111,101,216,0.45); }

/* Menü-Schaltfläche für schmale Geräte. Auf Desktop-Breiten unsichtbar — dort stehen
   die Menüpunkte wie gewohnt in der Zeile. Werte bewusst identisch zu `.lp-feature-icon`
   (Grund, Rahmen, Farbe), damit hier keine zweite Gestaltungssprache entsteht; einziges
   neues Maß ist die 40×40-Fläche, die Fingern eine ausreichende Zielgröße gibt. */
.lp-nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  border-radius: var(--tba-radius-md);
  background: rgba(111,101,216,0.12);
  border: 1px solid rgba(111,101,216,0.25);
  color: var(--tba-purple-light);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lp-nav-burger:hover { background: rgba(111,101,216,0.2); border-color: var(--tba-purple-light); }

/* ── Sections ── */
.lp-section { padding: 3.25rem 2.5rem; }
.lp-section-light { background: #FFFFFF; }
.lp-section-dark { background: var(--tba-dark); }
.lp-container { max-width: 960px; margin: 0 auto; }
.lp-container-narrow { max-width: 700px; margin: 0 auto; }

.lp-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--tba-purple);
  margin-bottom: 12px;
}
.lp-section-title {
  font-family: var(--tba-font-serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--tba-white);
  margin: 0 0 16px 0;
  line-height: 1.2;
}
.lp-section-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.68);
  max-width: 600px;
  line-height: 1.8;
  margin-bottom: 0;
}
.lp-trust-note { text-align: center; font-size: 12px; color: rgba(111,101,216,0.6); margin-top: 1.5rem; font-style: italic; }

/* ── Hero ── */
.lp-hero {
  background: var(--tba-dark);
  padding: 5rem 2.5rem 4rem;
  position: relative;
  overflow: hidden;
}
.lp-hero::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(111,101,216,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.lp-hero-logo {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 2rem;
}
.lp-hero-content { max-width: 740px; margin: 0 auto; position: relative; }
.lp-hero-title {
  font-family: var(--tba-font-serif);
  font-size: 46px;
  font-weight: 700;
  color: var(--tba-white);
  margin: 0 0 1.25rem 0;
  line-height: 1.12;
  letter-spacing: -0.5px;
}
.lp-hero-sub {
  font-size: 17px;
  color: var(--tba-purple-light);
  max-width: 500px;
  margin: 0 0 2rem 0;
  line-height: 1.8;
  font-weight: 400;
}
/* Ligen-Zeile im Hero (Design-Handoff landing_hero, 2026-08-30).
   Zeigt ALLE aktiven Ligen als Pillen — bewusst ohne „+ n weitere"-Abkürzung:
   Die vollständige Liste IST das Argument, eine gekürzte wirft die Frage auf,
   was fehlt. Deshalb `flex-wrap`, die Zeile darf umbrechen. */
.lp-leagues { margin: 0 0 1.9rem 0; max-width: 500px; }
.lp-leagues-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tba-purple-light);
  margin-bottom: 9px;
}
.lp-leagues-row { display: flex; flex-wrap: wrap; gap: 7px; }
.lp-league {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(111, 101, 216, 0.28);
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}
/* Flagge als Bild statt Emoji: 🏴 (England/Schottland) rendert auf Windows
   nicht zuverlässig — das Handoff nennt das Problem selbst. Quelle: CountryFlags. */
.lp-league img { display: block; border-radius: 2px; flex: 0 0 auto; }

.lp-hero-btns {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.lp-btn-primary {
  background: var(--tba-purple);
  color: var(--tba-white);
  padding: 14px 34px;
  border-radius: var(--tba-radius-md);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(111,101,216,0.35);
}
.lp-btn-primary:hover { background: var(--tba-purple-mid); color: var(--tba-white); box-shadow: 0 6px 24px rgba(111,101,216,0.5); transform: translateY(-1px); }
.lp-btn-secondary {
  background: transparent;
  color: var(--tba-purple-light);
  padding: 14px 34px;
  border-radius: var(--tba-radius-md);
  font-size: 15px;
  font-weight: 500;
  border: 1.5px solid rgba(111,101,216,0.35);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.lp-btn-secondary:hover { color: var(--tba-white); border-color: var(--tba-purple); background: rgba(111,101,216,0.08); }

/* ── Hero: Modell-Hervorhebung, Trust-Zeile, Casual-Showcase, Schluss-CTA (Landing-Redesign) ── */
.lp-hero-emph {
  font-size: 19px;
  font-weight: 700;
  color: var(--tba-white);
  line-height: 1.4;
  margin: 0 0 0.5rem 0;
}
.lp-hero-trust {
  font-size: 12px;
  color: rgba(175,169,236,0.7);
  margin-top: 1.1rem;
  line-height: 1.6;
}
.lp-hero-showcase { align-self: center; }
.lp-final-cta {
  text-align: center;
  border: 1px solid rgba(111,101,216,0.25);
  background: rgba(255,255,255,0.04);
  border-radius: 20px;
  padding: 3rem 2rem;
}

/* ── Hero Two-Column Layout ── */
.lp-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto 3rem;
}
.lp-hero-right {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(111,101,216,0.22);
  border-radius: 20px;
  padding: 1.25rem;
}
/* Hero-Bet-Card: 2-Zeilen-Layout (Kopf mit Datum/Zeit/Match, Fuß mit Tipp/Quoten/Edge/Stars/Treffer).
   Scope auf .lp-hero-right; .nvb-row Wrapper bleibt für Border/Background. */
.lp-hero-right .nvb-row { padding: 12px 1rem; }
.lp-hero-bet-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.lp-hero-bet-time {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 64px;
}
.lp-hero-bet-date  { font-size: 14px; font-weight: 600; color: var(--tba-white); }
.lp-hero-bet-clock { font-size: 11px; color: rgba(255,255,255,0.6); }
.lp-hero-bet-match-block { flex: 1; min-width: 0; }
.lp-hero-bet-match {
  font-size: 14px;
  font-weight: 600;
  color: var(--tba-white);
  line-height: 1.3;
  white-space: normal;
}
.lp-hero-bet-league { font-size: 12px; color: rgba(255,255,255,0.65); margin-top: 2px; }
.lp-hero-bet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.lp-hero-bet-foot .nvb-thr-val,
.lp-hero-bet-foot .nvb-market-val { font-size: 18px; }
.lp-hero-bet-hit {
  font-size: 11px;
  font-weight: 700;
  color: #34D399;
  background: rgba(52,211,153,0.15);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.lp-hero-bets-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.lp-hero-bets-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--tba-purple-light);
  text-transform: uppercase;
}
.lp-hero-bets-live {
  font-size: 10px;
  font-weight: 700;
  color: #34D399;
  letter-spacing: 1px;
}
.lp-hero-bets-list, .lp-hero-bets-skeleton { display: flex; flex-direction: column; gap: 10px; }
.lp-hero-bets-empty {
  text-align: center;
  color: var(--tba-purple-light);
  font-size: 13px;
  padding: 2rem 0;
  font-style: italic;
}
.lp-hero-bets-cta {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tba-white);
  text-decoration: none;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--tba-purple);
  border: 0;
  transition: background 0.15s, transform 0.15s;
}
.lp-hero-bets-cta:hover { background: var(--tba-purple-dark, #5a4fc9); transform: translateY(-1px); }

/* ── Hero Bet Cards ── */
.lp-hbet {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(111,101,216,0.18);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  transition: border-color 0.15s;
}
.lp-hbet:hover { border-color: rgba(111,101,216,0.45); }
.lp-hbet-teams { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lp-hbet-badges { display: flex; gap: 4px; flex-shrink: 0; }
.lp-hbet-badge {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--tba-purple-mid);
  color: var(--tba-white);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.lp-hbet-badge-away { background: rgba(111,101,216,0.35); }
.lp-hbet-match { flex: 1; min-width: 0; }
.lp-hbet-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--tba-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-hbet-meta { font-size: 10px; color: var(--tba-purple-light); margin-top: 2px; }
.lp-hbet-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lp-hbet-dir {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.lp-hbet-dir-h { color: #60A5FA; background: rgba(96,165,250,0.15); }
.lp-hbet-dir-d { color: #FBBF24; background: rgba(251,191,36,0.15); }
.lp-hbet-dir-a { color: #FB923C; background: rgba(251,146,60,0.15); }
.lp-hbet-right { display: flex; align-items: center; gap: 8px; }
.lp-hbet-compare { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.lp-hbet-compare-lbl { font-size: 9px; color: var(--tba-purple-mid); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.lp-hbet-compare-val { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.55); }
.lp-hbet-compare-market .lp-hbet-odds { font-size: 18px; font-weight: 700; color: var(--tba-white); line-height: 1; }
.lp-hbet-compare-arrow { font-size: 13px; color: var(--tba-purple-light); opacity: 0.6; }
.lp-hbet-odds { font-size: 18px; font-weight: 700; color: var(--tba-white); line-height: 1; }
.lp-hbet-odds-time { font-size: 9px; color: rgba(255,255,255,0.4); margin-top: 1px; }
.lp-hbet-edge {
  font-size: 11px;
  font-weight: 700;
  color: #34D399;
  background: rgba(52,211,153,0.15);
  border-radius: 999px;
  padding: 3px 8px;
}
.lp-hbet-skeleton {
  height: 72px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  animation: lp-pulse 1.4s ease-in-out infinite;
}

/* ── Hero Metrics Bar ── */
.lp-hero-metrics {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid rgba(111,101,216,0.2);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(4px);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}
.lp-hero-metric {
  text-align: center;
  padding: 1.25rem 1.5rem;
  flex: 1;
  min-width: 100px;
}
.lp-hero-metric-divider {
  width: 1px;
  height: 52px;
  background: rgba(111,101,216,0.2);
  flex-shrink: 0;
}
.lp-hero-metric-val {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--tba-white);
  line-height: 1;
  margin-bottom: 7px;
  font-family: var(--tba-font-sans);
}
.lp-hero-metric-lbl { font-size: 10px; color: var(--tba-purple-light); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500; }
.lp-val-pos { color: #34D399 !important; }
.lp-val-neg { color: #F87171 !important; }

/* ── Value Bets (Light BG) ── */
.lp-bets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 2.5rem;
}
@keyframes lp-pulse {
  0%, 100% { opacity: 0.08; }
  50% { opacity: 0.18; }
}
.lp-bet-card {
  background: var(--tba-white);
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: 0 2px 12px rgba(38,33,92,0.06);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  position: relative;
}
.lp-bet-card:hover {
  box-shadow: 0 8px 32px rgba(38,33,92,0.12);
  transform: translateY(-3px);
  border-color: var(--tba-purple-light);
}
.lp-bet-card-skeleton {
  min-height: 280px;
  background: #f3f4f6;
  animation: lp-pulse 1.4s ease-in-out infinite;
}
.lp-bets-empty {
  text-align: center;
  padding: 3rem 0;
  color: #9CA3AF;
  font-size: 14px;
  font-style: italic;
}
.lp-bet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.lp-bet-liga-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--tba-purple-mid);
  background: var(--tba-surface);
  border-radius: 999px;
  padding: 3px 10px;
}
.lp-bet-vb-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #065F46;
  background: #ECFDF5;
  border: 1px solid #6EE7B7;
  border-radius: 999px;
  padding: 3px 10px;
}
.lp-bet-teams-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.lp-bet-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.lp-bet-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tba-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.lp-bet-logo img { width: 36px; height: 36px; object-fit: contain; }
.lp-bet-logo span { font-size: 12px; font-weight: 700; color: var(--tba-dark); }
.lp-bet-teamname { font-size: 11px; font-weight: 600; color: var(--tba-dark); line-height: 1.3; text-align: center; }
.lp-bet-vs { font-size: 11px; color: #9CA3AF; font-weight: 500; flex-shrink: 0; }
.lp-bet-datetime { font-size: 11px; color: #9CA3AF; margin-bottom: 1rem; }
.lp-bet-tipp-row {
  background: var(--tba-surface);
  border-radius: var(--tba-radius-sm);
  padding: 8px 12px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lp-bet-tipp-label { font-size: 10px; color: var(--tba-purple-mid); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.lp-bet-tipp-val { font-size: 13px; font-weight: 700; color: var(--tba-dark); }
.lp-bet-odds-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.lp-bet-odds-block { text-align: center; }
.lp-bet-edge-block { text-align: center; }
.lp-bet-odds-num { font-size: 34px; font-weight: 700; color: var(--tba-dark); line-height: 1; }
.lp-bet-edge-num {
  font-size: 20px;
  font-weight: 700;
  color: #059669;
  line-height: 1;
}
.lp-bet-odds-lbl { font-size: 10px; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; font-weight: 500; }
.lp-bet-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FAFAFA;
  border: 2px dashed #E5E7EB;
  border-radius: 16px;
  padding: 2rem 1.25rem;
  min-height: 280px;
}
.lp-bet-lock-icon { font-size: 28px; }
.lp-bet-lock-count { font-size: 14px; font-weight: 600; color: var(--tba-dark); }
.lp-bet-lock-hint { font-size: 12px; color: #9CA3AF; }
.lp-bet-lock-btn { font-size: 13px !important; padding: 10px 22px !important; }

/* ── Problem / Lösung ── */
.lp-problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 2.5rem;
}
.lp-problem-col {
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(239,68,68,0.07);
}
.lp-solution-col {
  border-color: rgba(16,185,129,0.35);
  background: rgba(16,185,129,0.07);
}
.lp-problem-header { padding: 14px 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; }
.lp-problem-header.neg {
  background: rgba(239,68,68,0.15);
  color: #FCA5A5;
  border-bottom: 1px solid rgba(239,68,68,0.2);
}
.lp-problem-header.pos {
  background: rgba(16,185,129,0.15);
  color: #6EE7B7;
  border-bottom: 1px solid rgba(16,185,129,0.2);
}
.lp-problem-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,0.05);
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
}
.lp-x { color: #F87171; font-weight: 700; flex-shrink: 0; }
.lp-check { color: #34D399; font-weight: 700; flex-shrink: 0; }

/* ── 3 Schritte ── */
.lp-steps-grid { display: flex; align-items: flex-start; gap: 16px; margin-top: 2.5rem; flex-wrap: wrap; }
.lp-step {
  flex: 1; min-width: 180px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(111,101,216,0.2);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.lp-step:hover { border-color: var(--tba-purple); background: rgba(111,101,216,0.07); }
.lp-step-nr { font-size: 40px; font-weight: 700; color: var(--tba-purple); margin-bottom: 12px; line-height: 1; font-family: var(--tba-font-serif); }
.lp-step-title { font-size: 15px; font-weight: 600; color: var(--tba-white); margin-bottom: 8px; }
.lp-step-desc { font-size: 13px; color: var(--tba-purple-light); line-height: 1.7; }
.lp-step-arrow { font-size: 20px; color: rgba(111,101,216,0.35); align-self: center; flex-shrink: 0; }
.lp-step-light { background: #F9FAFB; border-color: #E5E7EB; }
.lp-step-light:hover { background: #F3F4F6; border-color: var(--tba-purple-light); }
.lp-step-title-light { color: var(--tba-dark); }
.lp-step-desc-light { color: #6B7280; }
.lp-step-arrow-light { color: #9CA3AF; }

/* ── Features ── */
.lp-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 2rem;
}
@media (max-width: 720px) { .lp-features-grid { grid-template-columns: 1fr; } }
.lp-feature-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(111,101,216,0.2);
  border-radius: 14px;
  padding: 1.35rem 1.25rem;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.lp-feature-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.25); border-color: var(--tba-purple-light); transform: translateY(-2px); }
.lp-feature-icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(111,101,216,0.12);
  border: 1px solid rgba(111,101,216,0.25);
  color: var(--tba-purple-light);
  margin-bottom: 12px;
}
.lp-feature-title { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; color: var(--tba-white); }
.lp-feature-desc { font-size: 12.5px; color: var(--tba-purple-light); line-height: 1.6; }

/* ── Preise ── */
.lp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 28px;
  margin-top: 2.5rem;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.lp-pricing-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(111,101,216,0.22);
  border-radius: 18px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
}
.lp-pricing-featured {
  border: 2px solid var(--tba-purple);
  position: relative;
  padding-top: 2.5rem;
  background: rgba(111,101,216,0.07);
}
.lp-pricing-badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--tba-purple);
  color: var(--tba-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 18px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(111,101,216,0.45);
}
.lp-pricing-name { font-size: 18px; font-weight: 600; color: var(--tba-purple-light); margin-bottom: 12px; }
.lp-pricing-price { font-size: 44px; font-weight: 700; color: var(--tba-white); margin-bottom: 4px; line-height: 1; }
.lp-pricing-period { font-size: 16px; font-weight: 400; }
.lp-pricing-annual { font-size: 11px; color: var(--tba-purple-mid); margin-bottom: 1.5rem; }
.lp-pricing-features { list-style: none; padding: 0; margin-bottom: 1.75rem; flex: 1; }
.lp-pricing-features li {
  font-size: 13px;
  color: var(--tba-purple-light);
  padding: 8px 0;
  border-bottom: 1px solid rgba(111,101,216,0.1);
  line-height: 1.4;
  font-weight: 500;
}
.lp-pricing-check { color: #34D399; font-weight: 700; margin-right: 8px; }
.lp-pricing-btn {
  display: block;
  text-align: center;
  padding: 14px;
  border-radius: var(--tba-radius-md);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  border: 1.5px solid var(--tba-purple);
  color: var(--tba-purple);
  transition: background 0.15s;
}
.lp-pricing-btn:hover { background: rgba(111,101,216,0.12); color: var(--tba-purple); }
.lp-pricing-btn-featured { background: var(--tba-purple); color: var(--tba-white); border-color: var(--tba-purple); box-shadow: 0 4px 14px rgba(111,101,216,0.4); }
.lp-pricing-btn-featured:hover { background: var(--tba-purple-mid); color: var(--tba-white); }

/* Gold-Variante der Featured-Pricing-Karte = ABO/Saison-Pass-Signal (--tba-gold).
   Gold ist projektweit die „Abo/Freischalten"-Farbe (Dashboard „Alle freischalten",
   Account-Kauf-Buttons, UpgradeLock, „Im Saison-Pass freischalten"). Die Pricing-Karte
   folgt jetzt derselben Konvention statt Lila. Kein neuer Farbwert. */
.lp-pricing-featured-gold { border-color: var(--tba-gold); background: rgba(251,191,36,0.07); }
.lp-pricing-featured-gold .lp-pricing-badge {
  background: var(--tba-gold); color: var(--tba-dark);
  box-shadow: 0 3px 10px rgba(251,191,36,0.45);
}
.lp-pricing-btn-gold {
  background: var(--tba-gold); color: var(--tba-dark);
  border-color: var(--tba-gold); box-shadow: 0 4px 14px rgba(251,191,36,0.4);
}
.lp-pricing-btn-gold:hover { background: var(--tba-gold); filter: brightness(0.93); color: var(--tba-dark); }

/* Plan-/Abo-Badge — einheitliche Gold-Pille für Plan-Namen (Free / Casual / Pro),
   damit sofort erkennbar ist „hier geht es um einen Plan/ein Abo". Gleiches Design
   wie das Dashboard-Pill .cas-free-pill. Als inline <span> überall nutzbar. */
.tba-plan-badge {
  display: inline-block; vertical-align: middle;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--tba-gold);
  background: rgba(251,191,36,0.14);
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 999px; padding: 4px 12px;
}
.lp-pricing-card-light { background: var(--tba-white); border-color: #E5E7EB; }
.lp-pricing-featured-light { border: 2px solid var(--tba-purple); background: #F8F7FF; }
.lp-pricing-name-light { color: var(--tba-purple-mid); }
.lp-pricing-price-light { color: var(--tba-dark); }
.lp-pricing-annual-light { color: #6B7280; }
.lp-pricing-features-light li { color: #374151; border-bottom-color: #F3F4F6; }
.lp-pricing-btn-light { border-color: var(--tba-purple); color: var(--tba-purple); background: transparent; }
.lp-pricing-btn-light:hover { background: rgba(111,101,216,0.08); color: var(--tba-purple); }

/* Kompakt-Variante (z. B. eingebettet in FreePicksShowcase) — 2-Spalten, schmaler, kleinerer Preis */
.lp-pricing-grid-compact { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 0; max-width: none; }
.lp-pricing-card-compact { padding: 1.25rem 1.25rem; border-radius: 14px; }
.lp-pricing-card-compact.lp-pricing-featured { padding-top: 1.75rem; }
.lp-pricing-card-compact .lp-pricing-name { font-size: 16px; margin-bottom: 8px; }
.lp-pricing-card-compact .lp-pricing-price { font-size: 30px; }
.lp-pricing-card-compact .lp-pricing-period { font-size: 13px; }
.lp-pricing-card-compact .lp-pricing-annual { font-size: 11px; margin-bottom: 1rem; }
.lp-pricing-card-compact .lp-pricing-features { margin-bottom: 1.1rem; }
.lp-pricing-card-compact .lp-pricing-features li { font-size: 12.5px; padding: 6px 0; }
.lp-pricing-card-compact .lp-pricing-btn { padding: 10px; font-size: 13px; }
@media (max-width: 540px) {
  .lp-pricing-grid-compact { grid-template-columns: 1fr; }
}

/* ── FAQ ── */
.lp-faq { margin-top: 2.5rem; }
.lp-faq-item { border-bottom: 1px solid rgba(111,101,216,0.15); }
.lp-faq-q {
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--tba-white);
  user-select: none;
  padding: 1.2rem 0;
}
.lp-faq-q::-webkit-details-marker { display: none; }
.lp-faq-q::after { content: '+'; color: var(--tba-purple-light); font-size: 22px; font-weight: 300; flex-shrink: 0; margin-left: 16px; }
details[open] .lp-faq-q::after { content: '−'; }
.lp-faq-a { font-size: 14px; color: var(--tba-purple-light); line-height: 1.8; padding: 0 1rem 1.25rem 0; }

/* ── Footer ── */
.lp-footer { background: var(--tba-dark); padding: 2.5rem; border-top: 1px solid rgba(111,101,216,0.15); }
.lp-footer-content {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; max-width: 960px; margin: 0 auto 1.25rem;
}
.lp-footer-links { display: flex; gap: 24px; }
.lp-footer-links a { font-size: 13px; color: var(--tba-purple-mid); text-decoration: none; font-weight: 500; transition: color 0.15s; }
.lp-footer-links a:hover { color: var(--tba-purple-light); }
.lp-footer-disclaimer {
  font-size: 11px; color: rgba(111,101,216,0.4);
  text-align: center; border-top: 1px solid rgba(111,101,216,0.1);
  padding-top: 1.25rem; max-width: 960px; margin: 0 auto;
}

@media (max-width: 900px) {
  .lp-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 700px) {
  /* Bis 31.08.2026 wurden die Menüpunkte hier ersatzlos ausgeblendet (seit 20.04.).
     Damit waren auf dem Handy weder Dashboard noch Modellqualität oder Methodik
     erreichbar — der Footer trägt nur Preise, Prognosen und die Rechtstexte. Ein
     zahlender Nutzer kam an seine Prognosen also nur über einen CTA oder die URL.
     Jetzt klappt dieselbe `<nav>` als Panel unter der Kopfzeile auf: kein zweites
     Markup, kein JavaScript, nur ein Zustand am Header. Absolut positioniert, damit
     die sticky Leiste ihre Höhe behält und nichts nach unten schiebt. */
  .lp-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 16px;
    padding: 0.9rem 1rem 1.1rem;
    background: var(--tba-dark);
    border-bottom: 1px solid rgba(111,101,216,0.18);
  }
  .lp-nav.is-open .lp-nav-links { display: flex; }
  .lp-nav-links a { padding: 6px 0; }
  .lp-nav-burger { display: inline-flex; }
  /* Die Kopfzeile behielt bis 2026-08-30 den Desktop-Innenabstand von 2.5rem —
     das sind 80px allein für die Ränder. Auf einem 385px-Gerät lief der
     „Registrieren"-Button dadurch rechts aus dem Bild. Der Hero daneben wurde
     längst auf 1.5rem reduziert, die Nav war schlicht vergessen worden. */
  .lp-nav { padding: 0.85rem 1rem; gap: 10px; }
  .app-nav-right { gap: 10px; }
  .lp-nav-btn { padding: 9px 16px; }
  /* Obergrenze für die Wortmarke auf schmalen Geräten. Die 180px (MainLayout) bzw.
     220px (LandingLayout) aus dem MaxWidth-Parameter sind Desktop-Maße; zusammen mit
     „Account · Admin · Logout" ergaben sie am 31.08.2026 rund 430px Kopfzeile auf einem
     360px-Display — abgeschnittener Button plus horizontal verschiebbare Seite.
     !important ist hier kein Stilbruch, sondern notwendig: TheBetAILogo setzt max-width
     als Inline-Style, und der schlägt jede Regel aus dem Stylesheet. Die Untergrenze
     bleibt bewusst offen — der Anchor trägt min-width:0, das Logo gibt also weiter nach,
     wenn ein Gerät noch schmaler ist. Lieber ein kleines Logo als eine kaputte Seite. */
  .lp-nav .tba-logo-wrap { max-width: 140px !important; }
  /* Der Deskriptor in der Logo-Sperrung entfällt auf dem Handy. Das Marktauftritt-Handoff
     schreibt vor: unter 520 px Anzeigebreite die Version ohne Deskriptor nutzen — bei den
     140 px der Regel darüber stünde er im Bruchteil eines Pixels.
     ⚠ Seit 06.09.2026 trägt die Navbar ohnehin die Fassung OHNE Deskriptor
     (BrandAssets.WordmarkDark): Der neue Deskriptor „DATA-DRIVEN FOOTBALL ANALYTICS" ist
     doppelt so breit wie der alte Claim und in 240 px nicht lesbar unterzubringen. Diese
     Regel greift damit nur noch, falls die Claim-Sperrung anderswo schmal eingesetzt wird —
     sie bleibt als Schutz stehen. Siehe BrandAssets.WordmarkDarkClaim. */
  .tba-claim { display: none; }
  /* Und die Wortmarke rückt nach: Sie sitzt in der Claim-Sperrung auf Baseline 54, damit
     darunter der Leitspruch Platz hat. Fällt der weg, stünde sie zu hoch und die Sperrung
     wirkte nach oben verschoben — die Mark-Box daneben ist unverändert 1,5 bis 92,5 hoch.
     11 px sind genau die Differenz zur Baseline 65 der Fassung OHNE Claim
     (BrandAssets.WordmarkDark); damit steht sie wieder mittig zur Marke. */
  .tba-wordmark { transform: translateY(11px); }
  .lp-hero { padding: 3.5rem 1.5rem 3rem; }
  .lp-hero-title { font-size: 30px; letter-spacing: -0.2px; }
  .lp-hero-metrics { gap: 0; border-radius: 12px; max-width: 100%; }
  .lp-hero-metric { padding: 1rem 0.75rem; min-width: 80px; }
  .lp-hero-metric-val { font-size: 30px; }
  .lp-problem-grid { grid-template-columns: 1fr; }
  .lp-step-arrow, .lp-step-arrow-light { display: none; }
  .lp-steps-grid { flex-direction: column; }
  .lp-pricing-grid { max-width: 100%; }
  .lp-bets-grid { grid-template-columns: 1fr; }
  .lp-section { padding: 3.5rem 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   CLV-Kennzahlen Komponente
══════════════════════════════════════════════════════════════ */
/* ── CLV-Kennzahlen Komponente ── */
.clv-hero {
  background: var(--tba-dark);
  border-radius: var(--tba-radius-lg);
  padding: 1.5rem 2rem;
  text-align: center;
}
.clv-hero-wert {
  font-size: 48px;
  font-weight: 700;
  font-family: var(--tba-font-serif);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.clv-hero-label {
  font-size: 13px;
  color: var(--tba-purple-light);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.clv-hero-sub {
  font-size: 14px;
  color: var(--tba-purple-light);
  margin-bottom: 0.5rem;
}
.clv-hero-version {
  font-size: 11px;
  color: var(--tba-purple-mid);
  margin-bottom: 1rem;
}
.clv-verteilung { margin-top: 0.5rem; }
.clv-bar-wrap {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.clv-bar { height: 100%; transition: width .3s; }
.clv-bar-extrem  { background: #1D9E75; }
.clv-bar-hoch    { background: #6F65D8; }
.clv-bar-gut     { background: #A49CEA; }
.clv-bar-leicht  { background: #493FA8; }
.clv-bar-negativ { background: #E24B4A; }
.clv-legende {
  font-size: 11px;
  color: var(--tba-purple-light);
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.clv-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
}
.clv-dot-extrem  { background: #1D9E75; }
.clv-dot-hoch    { background: #6F65D8; }
.clv-dot-gut     { background: #A49CEA; }
.clv-dot-leicht  { background: #493FA8; }
.clv-dot-negativ { background: #E24B4A; }
/* CLV-Pos/Neg + Tabelle — Default ist Dark (Statistiken). Innerhalb `.tba-mud-page`
   (AdminControlling, Account, etc.) greift der hellere Override darunter. */
.clv-pos { color: #34D399; }
.clv-neg { color: #F87171; }
.clv-col-extrem  { color: #34D399; }
.clv-col-hoch    { color: var(--tba-purple-light); }
.clv-col-gut     { color: rgba(255,255,255,0.55); }
.clv-col-negativ { color: #F87171; }
.clv-col-version {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}
.clv-col-sep { color: rgba(255,255,255,0.4); }
.clv-tabelle { width: 100%; border-collapse: collapse; font-size: 12px; }
.clv-tabelle th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.clv-tabelle td {
  padding: 8px 10px;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.clv-tabelle tr:hover td { background: rgba(111,101,216,0.08); }
.clv-tabelle tr:last-child td { border-bottom: none; }

/* Hell-Override für MudBlazor-Page-Wrapper. */
.tba-mud-page .clv-pos { color: #1D9E75; }
.tba-mud-page .clv-neg { color: #E24B4A; }
.tba-mud-page .clv-col-extrem  { color: #1D9E75; }
.tba-mud-page .clv-col-hoch    { color: #6F65D8; }
.tba-mud-page .clv-col-gut     { color: #A49CEA; }
.tba-mud-page .clv-col-negativ { color: #E24B4A; }
.tba-mud-page .clv-tabelle th {
  color: var(--tba-purple-mid);
  background: transparent;
  border-bottom: 1px solid var(--tba-surface);
}
.tba-mud-page .clv-tabelle td {
  color: var(--tba-dark);
  border-bottom: 1px solid var(--tba-surface);
}
.tba-mud-page .clv-tabelle tr:hover td { background: rgba(111,101,216,0.05); }
.tba-mud-page .clv-col-sep { color: rgba(0,0,0,0.4); }

/* ── Conviction Score ── */
.conviction-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.conviction-1 { background: rgba(107,114,128,0.12); color: #6B7280; }
.conviction-2 { background: rgba(99,102,241,0.12);  color: #6366F1; }
.conviction-3 { background: rgba(59,130,246,0.14);  color: #3B82F6; }
.conviction-4 { background: rgba(16,185,129,0.14);  color: #059669; }
.conviction-5 { background: rgba(245,158,11,0.15);  color: #D97706; }

/* ── Dashboard Filter Bar ── */
.db-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.db-filter-btn {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--tba-surface);
  background: transparent;
  color: #6B7280;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--tba-font-sans);
}
.db-filter-btn:hover {
  border-color: var(--tba-purple);
  color: var(--tba-purple-mid);
}
.db-filter-btn.active {
  background: var(--tba-purple);
  border-color: var(--tba-purple);
  color: #fff;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   Value Bets — List View
══════════════════════════════════════════════════════════════ */

.vb-page-header { margin-bottom: 1.25rem; }

/* ── Legende ── */
.vb-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #6B7280;
  background: var(--tba-surface);
  border-radius: var(--tba-radius-md);
  padding: 8px 14px;
  margin-bottom: 1rem;
}

/* ── List container ── */

/* ── Date separator ── */

/* ── Row ── */
.vb-row {
  background: var(--tba-white);
  border: 1px solid var(--tba-surface);
  border-radius: var(--tba-radius-lg);
  padding: 14px 18px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: box-shadow 0.18s, border-color 0.18s;
  overflow: hidden;
  user-select: none;
}
.vb-row:hover           { box-shadow: var(--tba-shadow-md); border-color: var(--tba-purple-light); }
.vb-row.vb-expanded     { border-color: var(--tba-purple-light); box-shadow: var(--tba-shadow-md); }

/* ── Main row layout: left (match) | right (bet) ── */

/* ── Left: match info ── */



/* Time states */

/* Live indicator — green pulsing dot */
.vb-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #16A34A;
  border-radius: 50%;
  flex-shrink: 0;
  animation: vb-pulse 1.6s ease-in-out infinite;
}
@keyframes vb-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

/* ── Right: bet info — strict column grid ── */

/* Column 1: Direction badge */
.vb-dir {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  min-width: 92px;
  text-align: center;
}

/* Column 2: KI → Market compare group */

/* Column 3: Edge badge */
.vb-edge {
  background: #ECFDF5;
  color: #059669;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  min-width: 56px;
  text-align: center;
}
/* High edge (≥8%) — amber/fire, NOT red */

/* Column 4: Conviction stars */

/* Column 5: Chevron */

/* ── Blurred pill ── */

/* ── Detail panel ── */
.vb-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}
.vb-row:hover .vb-detail,
.vb-row.vb-expanded .vb-detail { max-height: 600px; }

.vb-detail-inner {
  border-top: 1px solid var(--tba-surface);
  margin-top: 12px;
  padding-top: 14px;
}

/* Erklär-Box für Hobby-Wetter */

/* ── AI Probability bars ── */

/* ── Bet rows in detail ── */

/* ── Detail footer ── */

/* ── Upgrade banner ── */
.vb-upgrade-left  { flex: 1; min-width: 200px; }
.vb-upgrade-title { font-size: 15px; font-weight: 700; color: var(--tba-dark); }
.vb-upgrade-sub   { font-size: 13px; color: #6B7280; margin-top: 3px; }

/* ── Mobile ── */
@media (max-width: 700px) {
  .vb-dir { min-width: auto; }
  .vb-legend { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   New Value Bets — nvb-* dark design (Landing-Page inspired)
══════════════════════════════════════════════════════════════ */

.nvb-page { padding-bottom: 2rem; }

/* ── Hero / Performance Widget ── */
.nvb-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--tba-dark);
  border-radius: var(--tba-radius-lg);
  padding: 1.5rem 2rem;
  margin-bottom: 14px;
  flex-wrap: wrap;
  border: 1px solid rgba(111,101,216,0.18);
}
.nvb-hero-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--tba-purple-light);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.nvb-hero-title {
  font-family: var(--tba-font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--tba-white);
  margin: 0 0 6px 0;
  line-height: 1.1;
}
.nvb-hero-sub {
  font-size: 13px;
  color: var(--tba-purple-light);
  margin: 0;
}
.nvb-hero-metrics {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(111,101,216,0.2);
  border-radius: 12px;
  padding: 0 8px;
  flex-shrink: 0;
}
.nvb-hero-metric {
  text-align: center;
  padding: 0.9rem 1.25rem;
}
.nvb-hero-metric-div {
  width: 1px;
  height: 32px;
  background: rgba(111,101,216,0.2);
  flex-shrink: 0;
}
.nvb-hero-metric-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--tba-white);
  line-height: 1;
  margin-bottom: 4px;
}
.nvb-hero-metric-lbl {
  font-size: 10px;
  color: var(--tba-purple-light);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 500;
}
.nvb-pos   { color: #34D399 !important; }
.nvb-neg   { color: #F87171 !important; }
.nvb-amber { color: #EF9F27 !important; }

/* ── Performance Widget ── */
.nvb-widget {
  border-radius: var(--tba-radius-lg);
  border: 1.5px solid rgba(111,101,216,0.2);
  background: var(--tba-dark);
  margin-bottom: 20px;
  overflow: hidden;
}
.nvb-widget-pos { border-color: rgba(29,158,117,0.45); }
.nvb-widget-neg { border-color: rgba(239,159,39,0.45); }

.nvb-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(111,101,216,0.1);
}
.nvb-widget-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tba-purple-light);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.nvb-widget-since {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 3px;
}
.nvb-badge-pos {
  font-size: 11px;
  font-weight: 700;
  color: #1D9E75;
  background: rgba(29,158,117,0.14);
  border: 1px solid rgba(29,158,117,0.3);
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.nvb-badge-neg {
  font-size: 11px;
  font-weight: 700;
  color: #EF9F27;
  background: rgba(239,159,39,0.14);
  border: 1px solid rgba(239,159,39,0.3);
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.nvb-widget-body { padding: 18px 20px 14px; }
.nvb-widget-hero { margin-bottom: 16px; }
.nvb-widget-hero-val {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1;
}
.nvb-widget-hero-lbl {
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 5px;
}

.nvb-wstat-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.nvb-wstat { display: flex; flex-direction: column; gap: 3px; }
.nvb-wstat-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--tba-white);
  line-height: 1;
}
.nvb-wstat-lbl {
  font-size: 10px;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nvb-wstat-sep {
  width: 1px;
  height: 30px;
  background: rgba(111,101,216,0.18);
  flex-shrink: 0;
}

.nvb-widget-chart {
  padding: 0 20px;
  border-top: 1px solid rgba(111,101,216,0.08);
}

.nvb-widget-footer {
  padding: 12px 20px;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(111,101,216,0.1);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.nvb-widget-heute {
  font-size: 13px;
  color: var(--tba-white);
}
.nvb-heute-badge {
  font-size: 16px;
  font-weight: 800;
  color: #C4BEFF;
  margin-right: 2px;
}
.nvb-widget-disclaimer {
  font-size: 11px;
  color: #6B7280;
  line-height: 1.5;
}

/* ── Widget-Toggle (kompakter Segmented-Control für dunkle Widget-Header) ── */
.nvb-wtoggle {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.nvb-wtoggle-btn {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(111,101,216,0.28);
  background: transparent;
  color: var(--tba-purple-light);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--tba-font-sans);
  white-space: nowrap;
}
.nvb-wtoggle-btn:hover {
  border-color: var(--tba-purple);
  color: var(--tba-white);
}
.nvb-wtoggle-active {
  background: var(--tba-purple);
  border-color: var(--tba-purple);
  color: var(--tba-white);
  font-weight: 600;
}
.nvb-wtoggle-active:hover {
  background: var(--tba-purple-mid);
  border-color: var(--tba-purple-mid);
}

/* ── Buchmacher Banner ── */
.nvb-bm-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(38,33,92,0.07);
  border: 1px solid rgba(111,101,216,0.18);
  border-radius: var(--tba-radius-md);
  padding: 10px 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.nvb-bm-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tba-purple-mid);
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.nvb-bm-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.nvb-bm-chip {
  background: var(--tba-dark);
  color: var(--tba-purple-light);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(111,101,216,0.35);
}
.nvb-bm-none {
  font-size: 11px;
  color: #9CA3AF;
  font-style: italic;
}
.nvb-bm-manage {
  font-size: 12px;
  font-weight: 500;
  color: var(--tba-purple-mid);
  background: transparent;
  border: 1px solid var(--tba-purple-mid);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.nvb-bm-manage:hover { background: var(--tba-purple-mid); color: #fff; }

/* ── Modal ── */
.nvb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.nvb-modal-inner {
  background: var(--tba-white);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
/* Breitere Modal-Variante (z.B. Onboarding mit Liga-Grid). */
.nvb-modal-inner-wide { max-width: 640px; }

/* ── Info-Icon (?) neben den Tabs + Sterne-Erklärungs-Modal-Header ── */
.nvb-info-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75);
  font-family: var(--tba-font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  margin-left: 0;
}
.nvb-info-icon:hover {
  border-color: var(--tba-purple);
  background: rgba(111,101,216,0.18);
  color: var(--tba-white);
}
.nvb-legend-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem 0;
}
.nvb-legend-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--tba-dark);
}
.nvb-legend-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #6B7280;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  transition: background 0.15s;
}
.nvb-legend-modal-close:hover { background: #F3F4F6; color: var(--tba-dark); }

/* ── Deine Insights — Kennzahlen-Module unter den Spiel-Cards.
   Module sind volle Card-Breite und stehen untereinander, optisch im selben
   dunklen Stil wie die Spiel-Cards (.nvb-row). */
.nvb-insights-header {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin: 32px 0 14px;
}
.nvb-insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 900px) {
  .nvb-insights-grid { grid-template-columns: 1fr; }
}
.nvb-insights-card {
  background: var(--tba-dark);
  border: 1px solid rgba(111,101,216,0.2);
  border-radius: var(--tba-radius-lg);
  padding: 20px 1.5rem;
  display: flex;
  flex-direction: column;
  /* Feste Höhe für beide Insight-Karten, damit das Grid nicht aufgebläht wird.
     Listen-Bereich (`.nvb-insights-list-scroll`) scrollt drinnen. */
  max-height: 420px;
  overflow: hidden;
}
/* Scrollbarer Listen-Bereich innerhalb einer Insights-Card. Wird in
   LeagueStrengthModule um die Liga-Reihen gewickelt, damit Title und Footer
   fix bleiben und nur die Liste scrollt. */
.nvb-insights-list-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
  /* Dezenter Scrollbar — passt zum dunklen Theme. */
  scrollbar-width: thin;
  scrollbar-color: rgba(111,101,216,0.35) transparent;
}
.nvb-insights-list-scroll::-webkit-scrollbar { width: 6px; }
.nvb-insights-list-scroll::-webkit-scrollbar-track { background: transparent; }
.nvb-insights-list-scroll::-webkit-scrollbar-thumb {
  background: rgba(111,101,216,0.35);
  border-radius: 3px;
}
.nvb-insights-list-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(111,101,216,0.55);
}
.nvb-insights-card-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 6px;
}
.nvb-insights-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  margin-bottom: 12px;
}
.nvb-insights-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nvb-insights-row:last-child { border-bottom: none; }
.nvb-insights-row-lbl {
  color: rgba(255,255,255,0.85);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.nvb-insights-row-val {
  font-weight: 700;
  font-size: 17px;
  color: var(--tba-white);
  white-space: nowrap;
}
.nvb-ins-pos { color: #34D399; }
.nvb-ins-neg { color: #F87171; }
.nvb-ins-flag {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.nvb-ins-flag img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.nvb-ins-leaguename {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nvb-ins-sample {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  margin-left: 8px;
}
.nvb-ins-sample-inline {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.4px;
}
/* IqScoreStars im Insights-Modul: größer als Compact-Default (14px),
   damit der 5-Sterne-Vergleich gut lesbar ist. */
.nvb-insights-row-lbl .nvb-card-stars-compact .nvb-card-stars-row { font-size: 18px; gap: 2px; }
.nvb-insights-footer {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  line-height: 1.5;
}
.nvb-insights-empty {
  font-size: 15px;
  color: rgba(255,255,255,0.55);
  padding: 10px 0;
}

/* ── Mein-Filter im Dashboard-Header ──
   Container rechts vom Seiten-Titel: Toggle + nächstes-Update-Label nebeneinander. */
.nvb-page-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
/* Toggle-Button mit Label + visuellem Switch — auf dunklem Page-BG.
   Inaktiv: subtile Pill, leicht heller als BG. Aktiv: Lila-Akzent + Glow. */
.nvb-mf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--tba-font-sans);
  transition: all 0.18s ease-out;
}
.nvb-mf-toggle:hover {
  border-color: rgba(111,101,216,0.55);
  background: rgba(255,255,255,0.08);
  color: var(--tba-white);
}
.nvb-mf-toggle:disabled { opacity: 0.6; cursor: progress; }
.nvb-mf-toggle-on {
  background: rgba(111,101,216,0.22);
  border-color: var(--tba-purple);
  color: var(--tba-white);
  box-shadow: 0 0 0 4px rgba(111,101,216,0.12);
}
.nvb-mf-toggle-on:hover {
  background: rgba(111,101,216,0.28);
  box-shadow: 0 0 0 5px rgba(111,101,216,0.15);
}
.nvb-mf-toggle-lbl { letter-spacing: 0.2px; }
.nvb-mf-switch {
  position: relative;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.20);
  transition: background 0.18s;
}
.nvb-mf-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.18s;
}
.nvb-mf-toggle-on .nvb-mf-switch { background: var(--tba-purple); }
.nvb-mf-toggle-on .nvb-mf-switch-thumb { transform: translateX(14px); }

/* Filter-Status-Hint: schlanke Text-Zeile, kein Container. */
.nvb-mf-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
  margin: -6px 0 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.nvb-mf-status-text { line-height: 1.4; }
.nvb-mf-status-link {
  color: var(--tba-purple-light);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.nvb-mf-status-link:hover { color: var(--tba-white); }

/* ── Filter Bar ── */
.nvb-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.nvb-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.nvb-filter-group-label {
  font-size: 11px;
  color: #9CA3AF;
  font-weight: 500;
  white-space: nowrap;
  margin-right: 2px;
}
.nvb-f-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid #E5E7EB;
  background: transparent;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--tba-font-sans);
  white-space: nowrap;
}
.nvb-f-btn:hover { border-color: var(--tba-purple-light); color: var(--tba-purple-mid); }
.nvb-f-active {
  background: var(--tba-dark);
  border-color: var(--tba-dark);
  color: var(--tba-white);
  font-weight: 600;
}
.nvb-f-active:hover { background: var(--tba-purple-mid); border-color: var(--tba-purple-mid); }
.nvb-filter-sep {
  width: 1px;
  height: 22px;
  background: #E5E7EB;
  flex-shrink: 0;
  margin: 0 2px;
}
.nvb-liga-wrap { flex-wrap: wrap; }
.nvb-stake-wrap {
  display: flex;
  align-items: center;
  background: #1a1a2e;
  border: 1px solid #2d2d4e;
  border-radius: 6px;
  padding: 0 8px;
  gap: 2px;
}
.nvb-stake-prefix { font-size: 12px; color: #9CA3AF; }
.nvb-stake-input {
  background: transparent;
  border: none;
  outline: none;
  color: #E2E8F0;
  font-size: 13px;
  font-weight: 500;
  width: 56px;
  padding: 4px 0;
  -moz-appearance: textfield;
}
.nvb-stake-input::-webkit-outer-spin-button,
.nvb-stake-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.nvb-stake-hint { font-size: 11px; color: #6B7280; white-space: nowrap; }
.nvb-filter-count {
  font-size: 11px;
  color: #9CA3AF;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Sticky Column Header ── */
.nvb-col-header {
  display: grid;
  grid-template-columns: 80px 1fr 105px 160px 72px 88px 20px;
  column-gap: 12px;
  padding: 7px 18px;
  margin-bottom: 6px;
  position: sticky;
  top: 64px;
  z-index: 10;
  background: #fff;
  border-bottom: 2px solid rgba(111,101,216,0.35);
  border-radius: var(--tba-radius-sm) var(--tba-radius-sm) 0 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.nvb-col-h {
  font-size: 10px;
  font-weight: 700;
  color: #6F65D8;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* ── Date separator ── */
.nvb-date-sep {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--tba-purple-mid);
  padding: 18px 0 8px;
}
.nvb-date-sep:first-of-type { padding-top: 4px; }

/* ── Bet Row ── */
.nvb-row {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(111,101,216,0.22);
  border-radius: var(--tba-radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.15s;
  user-select: none;
}
.nvb-row.nvb-expanded { border-color: var(--tba-purple); }
.nvb-row.nvb-row-blurred { opacity: 0.85; }

/* Preview-Variante (Zone 3 Morgen) — gedämpfte Karte ohne Aufklapp. */
.nvb-row.nvb-row-preview { opacity: 0.85; }

/* Featured-Variante: 5★-Picks. Gold-Streifen oben, Gold-Border (30% Opacity), Lila-Shadow (0.22). */
.nvb-row.nvb-row-featured {
  border: 2px solid rgba(251,191,36,0.3);
  box-shadow: 0 8px 24px rgba(76,29,149,0.22);
  position: relative;
}
.nvb-row.nvb-row-featured::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--tba-gold);
}
.nvb-row.nvb-row-featured.nvb-expanded { border-color: rgba(251,191,36,0.75); }
.nvb-row.nvb-row-featured .nvb-card-match { font-size: 18px; }
.nvb-row.nvb-row-featured .conviction-5 {
  color: var(--tba-gold);
  background: rgba(251,191,36,0.2);
}

/* Top-Pick-Header (zwischen Gold-Streifen und Top-Zeile, nur 5★) */
.nvb-card-toppick-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 1.25rem 0;
}
.nvb-card-toppick-label {
  color: var(--tba-gold);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.nvb-card-toppick-sub {
  color: var(--tba-gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Seiten-Kopf (Titel + Update-Info) — auf hellem Page-BG ── */
.nvb-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.nvb-page-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--tba-white);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.5px;
}
.nvb-page-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}
.nvb-page-update {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  text-align: right;
  align-self: center;
}
/* Update-Pill mit pulsierendem grünen Punkt. */
.nvb-update-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(52,211,153,0.10);
  border: 1px solid rgba(52,211,153,0.35);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}
.nvb-update-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 0 rgba(52,211,153,0.6);
  animation: nvb-update-pulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes nvb-update-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(52,211,153,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0);    }
  100% { box-shadow: 0 0 0 0   rgba(52,211,153,0);    }
}
/* Trennlinie zwischen Header und nachfolgendem Inhalt. */
.nvb-page-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 18px 0 22px;
}
/* Mini-Stats-Zeile: 4 Kennzahlen direkt nach dem Header-Divider.
   Expert-Variante (.nvb-mini-stats-expert) erweitert auf 8 Kacheln in 2 Reihen. */
.nvb-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(111,101,216,0.18);
  border-radius: var(--tba-radius-md);
  padding: 14px 4px;
  margin-bottom: 18px;
}
.nvb-mini-stats-expert {
  grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 1100px) {
  .nvb-mini-stats-expert { grid-template-columns: repeat(4, 1fr); }
  /* Bei 4 Spalten verschwindet der Right-Border bei jedem 4. Element. */
  .nvb-mini-stats-expert .nvb-mini-stat:nth-child(4) { border-right: none; }
  .nvb-mini-stats-expert .nvb-mini-stat:nth-child(n+5) { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 10px; margin-top: 6px; }
}
@media (max-width: 600px) {
  .nvb-mini-stats,
  .nvb-mini-stats-expert { grid-template-columns: repeat(2, 1fr); }
  .nvb-mini-stats-expert .nvb-mini-stat:nth-child(4) { border-right: 1px solid rgba(255,255,255,0.08); }
  .nvb-mini-stats-expert .nvb-mini-stat:nth-child(2n) { border-right: none; }
}
.nvb-mini-stat-sub {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.nvb-stat-info { color: #60A5FA; }
.nvb-mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-right: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
.nvb-mini-stat:last-child { border-right: none; }
.nvb-mini-stat-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tba-white);
  white-space: nowrap;
}
.nvb-mini-stat-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
}
.nvb-stat-purple { color: var(--tba-purple-light); }
.nvb-stat-orange { color: #fb923c; }
.nvb-stat-gold   { color: var(--tba-gold); }
.nvb-stat-pos    { color: #34D399; }
.nvb-stat-neg    { color: #F87171; }
@media (max-width: 700px) {
  .nvb-mini-stats { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
  .nvb-mini-stat:nth-child(2) { border-right: none; }
}

/* ── Zone-Header (Heute / Morgen) — auf hellem Page-BG ── */
.nvb-zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  margin-bottom: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(38,33,92,0.12);
  flex-wrap: wrap;
}
.nvb-zone-label {
  font-size: 24px;
  font-weight: 700;
  color: var(--tba-dark);
  letter-spacing: -0.3px;
}
.nvb-zone-label-sub {
  font-size: 14px;
  font-weight: 500;
  color: rgba(38,33,92,0.65);
}
.nvb-zone-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.nvb-zone-more {
  text-align: center;
  font-size: 13px;
  color: rgba(38,33,92,0.65);
  padding: 12px;
  margin-top: 4px;
}
.nvb-zone-empty {
  text-align: center;
  font-size: 14px;
  color: rgba(38,33,92,0.7);
  padding: 28px 1.25rem;
  background: rgba(38,33,92,0.04);
  border-radius: var(--tba-radius-lg);
  border: 1px dashed rgba(38,33,92,0.15);
  line-height: 1.5;
}

/* ── Performance: 5 gleiche Metrik-Kacheln ── */
.nvb-perf-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 18px 1.25rem;
}
.nvb-perf-tile { display: flex; flex-direction: column; gap: 6px; }
.nvb-perf-val {
  font-size: 24px;
  font-weight: 700;
  color: var(--tba-white);
  line-height: 1;
}
.nvb-perf-val.nvb-pos { color: #34D399; }
.nvb-perf-val.nvb-neg { color: #F87171; }
.nvb-perf-lbl {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (max-width: 600px) {
  .nvb-perf-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Page-Disclaimer (Footer) — auf hellem Page-BG ── */
.nvb-page-disclaimer {
  margin-top: 32px;
  padding: 16px 1.25rem;
  text-align: center;
  font-size: 12px;
  color: rgba(38,33,92,0.55);
  line-height: 1.5;
}

/* ── Tab-Sektion mit eigenem Container, auf dunklem Page-BG ── */
.nvb-tab-section {
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 20px;
}
.nvb-tab-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nvb-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--tba-radius-md);
}
.nvb-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nvb-tab:hover { color: var(--tba-white); }
.nvb-tab-active {
  background: rgba(111,101,216,0.22);
  color: var(--tba-white);
  border: 1px solid rgba(111,101,216,0.55);
}
.nvb-tab-count {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
.nvb-tab-active .nvb-tab-count {
  color: var(--tba-white);
  background: var(--tba-purple);
}

/* ── Conviction-Sektionen (Top-Picks / Solide / Weitere) ── */
.nvb-section { margin-top: 28px; }
.nvb-section:first-of-type { margin-top: 4px; }
.nvb-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.nvb-section-title {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--tba-dark);
}
.nvb-section-count {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  background: rgba(38,33,92,0.06);
  border-radius: 10px;
}
.nvb-section-hint {
  font-size: 13px;
  color: rgba(38,33,92,0.6);
  font-weight: 500;
}

/* ── Show-More-Button (max 3 → mehr Picks) ── */
.nvb-showmore {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  background: rgba(111,101,216,0.06);
  border: 1px dashed rgba(111,101,216,0.35);
  border-radius: var(--tba-radius-md);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.nvb-showmore:hover { background: rgba(111,101,216,0.12); }
.nvb-showmore-main {
  font-size: 14px;
  font-weight: 600;
  color: var(--tba-purple-mid);
}
.nvb-showmore-preview {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: rgba(38,33,92,0.6);
  font-weight: 500;
}
.nvb-showless {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  background: transparent;
  border: none;
  text-align: center;
  font-size: 12px;
  color: var(--tba-purple-mid);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}
.nvb-showless:hover { color: var(--tba-purple); }

/* ── "Weitere Picks" — kollabierte Box (3★ und darunter, default zu) ── */
.nvb-others-collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(38,33,92,0.04);
  border: 1px dashed rgba(38,33,92,0.15);
  border-radius: var(--tba-radius-lg);
  cursor: pointer;
  transition: background 0.15s;
}
.nvb-others-collapsed:hover { background: rgba(38,33,92,0.07); }
.nvb-others-left {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tba-dark);
}
.nvb-others-right {
  font-size: 13px;
  color: rgba(38,33,92,0.65);
  font-weight: 500;
}

/* ── Pro-Modus-Link am Seitenende ── */
.nvb-pro-link {
  display: block;
  margin: 32px auto 0;
  padding: 10px;
  text-align: center;
  background: transparent;
  border: none;
  font-size: 14px;
  color: #6B7280;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: color 0.15s;
}
.nvb-pro-link:hover { color: var(--tba-purple-mid); }

/* ── Tabs-Reihe mit Profi-Toggle rechts ── */
.nvb-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.nvb-tabs-row .nvb-tabs,
.nvb-tabs-row .nvb-day-nav {
  margin-top: 0;
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.nvb-pro-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--tba-radius-md);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.70);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}
.nvb-pro-toggle:hover {
  color: var(--tba-white);
  border-color: rgba(111,101,216,0.50);
  background: rgba(255,255,255,0.04);
}
.nvb-pro-toggle-active {
  color: var(--tba-purple-light);
  border-color: var(--tba-purple);
  background: rgba(111,101,216,0.12);
}
.nvb-pro-toggle-active:hover { color: var(--tba-white); }

/* ── Phase 2: Profi-Modus ─────────────────────────────────────────────── */

/* Spieltag-Navigation (horizontal scroll) */
.nvb-day-nav {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: #f3f4f6;
  border-radius: var(--tba-radius-md);
  margin-top: 24px;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.nvb-day-nav::-webkit-scrollbar { height: 6px; }
.nvb-day-nav::-webkit-scrollbar-thumb { background: rgba(38,33,92,0.2); border-radius: 3px; }
.nvb-day {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: none;
  background: transparent;
  color: #6B7280;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.nvb-day:hover { color: var(--tba-dark); }
.nvb-day-active {
  background: var(--tba-white);
  color: var(--tba-dark);
  box-shadow: var(--tba-shadow-sm);
}
.nvb-day-count {
  display: inline-block;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  background: rgba(38,33,92,0.08);
  border-radius: 9px;
}
.nvb-day-active .nvb-day-count {
  color: var(--tba-white);
  background: var(--tba-purple);
}
.nvb-day-edge {
  display: inline-block;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 700;
  color: #1D9E75;
  background: rgba(29,158,117,0.14);
  border: 1px solid rgba(29,158,117,0.3);
  border-radius: 9px;
}

/* Filter-Panel — umschließender Container */
.nvb-filter-panel {
  background: rgba(38,33,92,0.03);
  border: 1px solid rgba(38,33,92,0.08);
  border-radius: var(--tba-radius-lg);
  padding: 16px 20px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Filter-Reihe: Label links, Pills rechts in Grid-Layout */
.nvb-filter-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 600px) {
  .nvb-filter-row { grid-template-columns: 1fr; gap: 6px; }
}
.nvb-filter-row-label {
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-top: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nvb-filter-row-link {
  background: transparent;
  border: none;
  color: var(--tba-purple);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.nvb-filter-row-link:hover { color: var(--tba-purple-mid); text-decoration: underline; }
.nvb-filter-row-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Legacy: einfache Reihe für Stellen ohne Label-Spalte */
.nvb-filter-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.nvb-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
  min-width: 70px;
}
.nvb-f-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.nvb-f-disabled-hint {
  font-size: 11px;
  font-weight: 500;
  color: #9CA3AF;
  margin-left: 4px;
}

/* Sortier-Dropdown */
.nvb-sort {
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tba-dark);
  background: var(--tba-white);
  border: 1px solid rgba(38,33,92,0.15);
  border-radius: var(--tba-radius-md);
  cursor: pointer;
  font-family: inherit;
}
.nvb-sort:focus { outline: 2px solid var(--tba-purple); outline-offset: -1px; }

/* Erweiterte-Filter-Toggle */
.nvb-adv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: transparent;
  border: 1px dashed rgba(38,33,92,0.2);
  border-radius: var(--tba-radius-md);
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  font-family: inherit;
  margin-top: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.nvb-adv-toggle:hover {
  background: rgba(111,101,216,0.04);
  border-color: rgba(111,101,216,0.4);
  color: var(--tba-purple-mid);
}

/* Erweiterte-Filter-Panel (expanded) */
.nvb-adv-section {
  margin-top: 12px;
  padding: 16px;
  background: rgba(111,101,216,0.04);
  border: 1px dashed rgba(111,101,216,0.25);
  border-radius: var(--tba-radius-lg);
}
.nvb-adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.nvb-adv-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 780px) {
  .nvb-adv-grid,
  .nvb-adv-grid-2 { grid-template-columns: 1fr; }
}
.nvb-adv-col { display: flex; flex-direction: column; gap: 8px; }
.nvb-adv-col-label {
  font-size: 13px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Slider (Min Edge) */
.nvb-slider-row { display: flex; align-items: center; gap: 10px; }
.nvb-slider {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(38,33,92,0.15);
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.nvb-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tba-purple);
  cursor: pointer;
  border: 2px solid var(--tba-white);
  box-shadow: var(--tba-shadow-sm);
}
.nvb-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tba-purple);
  cursor: pointer;
  border: 2px solid var(--tba-white);
}
.nvb-slider-val {
  min-width: 44px;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: var(--tba-dark);
}

/* Aktive-Filter-Banner */
.nvb-active-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(111,101,216,0.08);
  border: 1px solid rgba(111,101,216,0.25);
  border-radius: var(--tba-radius-md);
  margin-top: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.nvb-active-banner-text {
  font-size: 13px;
  color: var(--tba-purple-mid);
  font-weight: 500;
}
.nvb-active-banner-reset {
  background: transparent;
  border: none;
  color: var(--tba-purple);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.nvb-active-banner-reset:hover { color: var(--tba-purple-mid); }

/* Zurück-Link am Seitenende (Profi → Hobby) */
.nvb-back-link {
  display: block;
  margin: 32px auto 0;
  padding: 10px;
  text-align: center;
  background: transparent;
  border: none;
  font-size: 13px;
  color: #6B7280;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: color 0.15s;
}
.nvb-back-link:hover { color: var(--tba-purple-mid); }

/* ── Karten-Layout (2 sichtbare Zeilen + Detail) ── */

/* Top-Zeile: Match-Info — klickbar (toggelt Detail) */
.nvb-card-top {
  display: grid;
  grid-template-columns: 110px 1fr 160px;
  align-items: center;
  column-gap: 12px;
  padding: 12px 1.25rem;
  cursor: pointer;
  transition: background 0.15s;
}
.nvb-card-top:hover { background: #2e2878; }

.nvb-card-time { display: flex; flex-direction: column; gap: 2px; }
.nvb-card-time-main { font-size: 16px; font-weight: 600; color: var(--tba-white); }
.nvb-card-time-sub  { font-size: 12px; color: rgba(255,255,255,0.6); }

.nvb-card-match {
  font-size: 17px;
  font-weight: 600;
  color: var(--tba-white);
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}

.nvb-card-league {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  text-align: right;
}

/* Bottom-Zeile: Wett-Daten — NICHT klickbar */
.nvb-card-bottom {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 14px 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.nvb-card-quotes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
}
.nvb-card-stars { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; align-self: start; }
.nvb-card-stars-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.nvb-card-toggle {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.65);
  font-size: 18px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  transition: transform 0.25s ease-out, color 0.15s;
  margin-left: auto;
}
.nvb-card-toggle:hover { color: var(--tba-white); }
.nvb-card-toggle.expanded { transform: rotate(180deg); }

/* ── Single-Value-Karte: 1-Zeilen-Layout (Schwellwert-Variante) ──
   Spalten: Zeit | Match+Liga | Tipp | Quoten (Fair → ab Schwelle) | Edge | Sterne | Toggle
   Klickbar nur Match-Spalte und Toggle-Pfeil. */
.nvb-card-row {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr) auto auto auto auto auto;
  align-items: center;
  column-gap: 14px;
  padding: 12px 1.25rem;
}

/* ── 1/X/2-Raster: alle drei Ausgänge in der zugeklappten Karte ──
   Variante von .nvb-card-row. Statt Tipp/Quoten/Edge/Sterne ein
   Outcomes-Block: Zeit | Match+Liga | Heim/Remis/Auswärts | Toggle.
   Value-Ausgang bekommt den Akzent. Alle Werte 1:1 aus bestehenden
   Klassen entliehen (.nvb-d-bm-inactive / .nvb-d-bm-active / .nvb-thr-lbl
   / .nvb-d-bm-odds) — keine neuen Farben oder Größen. */
/* ── 1/X/2-Karte: Meta-Kopfzeile + Bet-Reihe ──
   Kopfzeile (Flagge / Zeit / Countdown / Match / Liga·Land) in EINER Zeile
   über den Outcomes — so wird nichts abgeschnitten. */
.nvb-card-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 1.25rem 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 4px;
}
/* Links: Flagge + Liga·Land. Rechts: Anstoßzeit + Countdown. */
.nvb-card-meta-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  justify-self: start;
}
.nvb-card-meta-right {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}
.nvb-card-meta-time {
  font-size: 14px;
  font-weight: 700;
  color: var(--tba-white);
}
.nvb-card-meta-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
/* Mitte: Clubnamen — zentriert, prominent als Karten-Überschrift. */
.nvb-card-meta-match {
  font-size: 18px;
  font-weight: 700;
  color: var(--tba-white);
  text-align: center;
  letter-spacing: -0.2px;
}
.nvb-card-meta-league {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Bet-Reihe: Outcomes-Raster. (Toggle-Chevron entfernt — Aufklappen erfolgt
   ausschließlich über Klick auf eine Value-Kachel.) */
.nvb-card-betrow {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-items: center;
  column-gap: 10px;
  padding: 10px 1.25rem 12px;
}
/* Länderflagge als runder Badge. */
.nvb-card-flag {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
}
.nvb-card-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Outcomes-Container als echte Tabelle: border-collapse vermeidet automatisch
   doppelte Borders zwischen den drei Kacheln. table-layout:fixed = drei
   gleich breite Spalten. */
.nvb-card-outcomes {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.nvb-card-oc {
  vertical-align: top;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
/* Vertikaler Abstand zwischen den Innen-Blöcken (ersetzt das frühere flex-gap). */
.nvb-card-oc > * + * { margin-top: 8px; }
/* Value-Kachel UND Top-Pic: Gold-Rahmen + Gold-Streifen oben. */
.nvb-card-oc-value,
.nvb-card-oc-top {
  background: rgba(251,191,36,0.08);
  border: 2px solid rgba(251,191,36,0.30);
  cursor: pointer;
}
.nvb-card-oc-value:hover,
.nvb-card-oc-top:hover { background: rgba(251,191,36,0.12); }
/* Aktiv aufgeklappte Value-Kachel: kräftigere Gold-Füllung, Rahmen unverändert. */
.nvb-card-oc-value.nvb-card-oc-active,
.nvb-card-oc-top.nvb-card-oc-active { background: rgba(251,191,36,0.18); }
/* Kachel ohne Marktquote: leicht transparent + gedimmter „noch keine"-Hinweis. */
.nvb-card-oc-noquote { opacity: 0.7; }
.nvb-card-oc-noquote-text {
  font-size: 11px;
  font-style: italic;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.2px;
}
/* Aufklapp-Chevron rechts unten in der Value-Kachel — signalisiert Klickbarkeit
   und dreht beim Öffnen um 180°. Position absolute, damit der Quoten-Block mittig
   bleibt. */
.nvb-card-oc-chev {
  position: absolute;
  right: 8px;
  bottom: 4px;
  font-size: 13px;
  line-height: 1;
  color: rgba(255,255,255,0.55);
  transition: transform 0.25s ease-out, color 0.15s;
  pointer-events: none;
}
.nvb-card-oc-value:hover .nvb-card-oc-chev,
.nvb-card-oc-top:hover .nvb-card-oc-chev { color: var(--tba-white); }
.nvb-card-oc-active .nvb-card-oc-chev {
  transform: rotate(180deg);
  color: var(--tba-gold);
}
/* Value-Tile (außer Top-Pick): kein Gold-Streifen oben mehr — der Akzent kommt
   über das Outcome-Label in Gold (siehe Regel weiter unten). */
/* Top-Pick: Gold-Banner oben mit klar lesbarem TOP-PICK-Label. */
.nvb-card-oc-top { padding-top: 30px; }
.nvb-card-oc-top::before {
  content: 'TOP-PICK';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 22px;
  background: var(--tba-gold);
  color: var(--tba-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-align: center;
  line-height: 22px;
}
/* Outcome-Label (Heim/Remis/Auswärts) bei Value-Tiles und Top-Picks in Gold —
   konsistenter Akzent über alle markierten Tiles. */
.nvb-card-oc-value .nvb-card-oc-outcome,
.nvb-card-oc-top   .nvb-card-oc-outcome { color: var(--tba-gold); }
/* Kopf-Reihe: Ausgang zentriert, IQ-Score-Sterne rechts.
   Grid 1fr auto 1fr → der Ausgang sitzt mittig in der Kachel. */
.nvb-card-oc-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}
.nvb-card-oc-outcome { grid-column: 2; }
.nvb-card-oc-head .nvb-card-stars { grid-column: 3; justify-self: end; }
.nvb-card-oc-outcome {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
/* Quoten-Reihe: KI-Schwelle → ⌀ Marktquote, dann Edge. Zentriert.
   Beide Quoten neutral in Gold — der Edge ist das farbige Signal. */
.nvb-card-oc .nvb-quotes {
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.nvb-card-oc .nvb-thr-stack,
.nvb-card-oc .nvb-market-stack { align-items: center; }
/* Default-Tile: KI-Schwelle + Marktquote in Weiß. Gold bleibt der Value-Tile
   vorbehalten (Akzent, hebt ValueBets ab). */
.nvb-card-oc .nvb-thr-val,
.nvb-card-oc .nvb-market-val { color: var(--tba-white); }
.nvb-card-oc-value .nvb-thr-val,
.nvb-card-oc-value .nvb-market-val,
.nvb-card-oc-top .nvb-thr-val,
.nvb-card-oc-top .nvb-market-val { color: var(--tba-gold); }
.nvb-card-oc .nvb-quote-arrow { align-self: center; padding-bottom: 0; }
/* Edge größer / besser lesbar, mittig in der Kachel. */
.nvb-card-oc .nvb-edge-arrows {
  align-items: center;
  text-align: center;
}
.nvb-card-oc .nvb-edge-arrows-pct { font-size: 14px; font-weight: 700; }
.nvb-card-oc .nvb-edge-arrows-svg { width: 18px; height: auto; }

.nvb-card-match-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  cursor: pointer;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 6px;
  transition: background 0.15s;
}
.nvb-card-match-stack:hover { background: rgba(255,255,255,0.04); }
.nvb-card-match-line {
  font-size: 16px;
  font-weight: 600;
  color: var(--tba-white);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nvb-card-league-line {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nvb-row-featured .nvb-card-match-line { font-size: 17px; }

/* Quoten-Block: KI-Schwelle + Pfeil + ⌀ Marktquote.
   align-self: start damit das Label auf gleicher Höhe wie das IQ-Score-Label
   in der Sterne-Spalte sitzt (beide oben am Grid-Cell-Rand angedockt). */
.nvb-quotes {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: start;
}
.nvb-quote-arrow {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  align-self: flex-end;
  padding-bottom: 4px;
}
.nvb-thr-stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.nvb-thr-val {
  font-size: 22px;
  font-weight: 800;
  color: #34D399;
  line-height: 1;
  letter-spacing: -0.4px;
}
.nvb-market-stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.nvb-market-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--tba-gold);
  line-height: 1;
  letter-spacing: -0.4px;
}
/* Einheitliche Mini-Labels (KI-Schwelle, ⌀ Marktquote, IQ-Score) — gleiche
   Größe / Tracking / Spacing. Farbe: KI-Schwelle + ⌀ Marktquote neutral weiß,
   IQ-Score in Top-Prediction-Gold (User-Wunsch 2026-05-01). */
.nvb-thr-lbl,
.nvb-market-lbl,
.nvb-card-iqscore-lbl {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.nvb-card-iqscore-lbl { color: var(--tba-gold); }

/* ── Edge-Pfeile (Spalte 5 in der eingeklappten Card) ──
   Ersetzt die "5%+"-Pill durch 1/2/3 gestapelte Pfeile + Prozentwert darunter.
   1 Pfeil = 5–9.9% Edge, 2 = 10–14.9%, 3 = ≥15%. Stroke nutzt die bestehende
   Dark-Variante des Success-Tokens (#34D399), keine neue Farbe. */
.nvb-edge-arrows {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1;
}
.nvb-edge-arrows-svg { display: block; }
.nvb-edge-arrows-pct {
  font-size: 11px;
  font-weight: 600;
  color: #34D399;
  letter-spacing: 0.2px;
}
/* Negativer Edge — Pfeile nach unten, Prozent-Text in Danger-Rot. */
.nvb-edge-arrows-neg .nvb-edge-arrows-pct { color: #F87171; }

/* IQ-Score-Mini-Label-Stil ist gemeinsam mit .nvb-thr-lbl / .nvb-market-lbl
   in der einheitlichen Regel oben definiert. */

/* 5-Sterne-Anzeige: immer 5 Sterne, gefüllte Sterne in einheitlicher Gold-Farbe
   (User-Wunsch 2026-05-01 — Score-bezogene Farbverlauf-Logik bewusst entfernt).
   Ungefüllte Sterne bleiben gedämpft. */
.nvb-card-stars-row {
  display: inline-flex;
  gap: 3px;
  font-size: 20px;
  line-height: 1;
}
.nvb-card-star { line-height: 1; }
.nvb-card-star-off { color: rgba(255,255,255,0.20); }
.nvb-card-star-on,
.nvb-card-star-on-1,
.nvb-card-star-on-2,
.nvb-card-star-on-3,
.nvb-card-star-on-4,
.nvb-card-star-on-5 {
  color: var(--tba-gold);
}

/* ── Multi-Value-Karten (mehrere Tipps pro Spiel) ──
   Aufbau: Match-Header (3 Cols) → "{N} Value-Optionen"-Hinweis → N Tipp-Zeilen
   (jeweils mit eigenem Detail-Aufklapp). */
.nvb-multi-header {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr) auto;
  align-items: center;
  column-gap: 14px;
  padding: 10px 1.25rem 0;
}
.nvb-multi-match {
  font-size: 14px;
  font-weight: 600;
  color: var(--tba-white);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.nvb-multi-league {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  text-align: right;
}
.nvb-multi-hint {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 1.25rem 4px;
}
.nvb-multi-tip-row {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr) auto auto auto auto auto;
  align-items: center;
  column-gap: 14px;
  padding: 10px 1.25rem;
}
.nvb-multi-tip-sep {
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.nvb-row-featured .nvb-multi-match { font-size: 15px; }

/* ── Detail-Sektionen (Schritt 5: 3 Sektionen + Meta) ── */
.nvb-d-section {
  padding: 16px 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.nvb-d-section:first-child { border-top: 0; }
.nvb-d-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.nvb-d-section-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.nvb-d-section-head .nvb-d-section-title { margin-bottom: 0; }
.nvb-d-section-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.nvb-d-explain {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
}
.nvb-d-explain a { color: #C4BEFF; }
.nvb-d-em-prob { color: #34D399; font-weight: 600; }
.nvb-d-em-fair { color: var(--tba-white); font-weight: 600; }
.nvb-d-em-tipp { color: var(--tba-gold); font-weight: 700; }
.nvb-d-em-thr  { color: #34D399; font-weight: 600; }
.nvb-d-hint {
  margin-top: 8px;
  font-size: 13px;
  font-style: italic;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}

/* Sektion 1 — Modell-Wahrscheinlichkeiten (3-Segment-Balken).
   Empfehlungs-Segment grün, andere zwei in zwei Grau-Stufen (heller =
   zweithöchste Prob, dunkler = niedrigste). Nutzt Success-Token #34D399
   und white-rgba-Layer — keine neuen Farben. */
.nvb-d-prob-bar {
  display: flex;
  width: 100%;
  height: 46px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.nvb-d-prob-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  min-width: 0;
  padding: 4px 6px;
  gap: 2px;
}
.nvb-d-prob-seg-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.85;
}
.nvb-d-prob-seg-pct {
  font-size: 14px;
}
.nvb-d-prob-seg-rec {
  background: #34D399;
  color: var(--tba-dark);
}
.nvb-d-prob-seg-mid {
  background: rgba(111,101,216,0.55);
  color: var(--tba-white);
}
.nvb-d-prob-seg-low {
  background: rgba(111,101,216,0.22);
  color: rgba(255,255,255,0.85);
}

/* Sektion 2 — Buchmacher-Liste (vertikal, ein Bookmaker pro Zeile).
   Vorher Grid mit auto-fill; auf User-Wunsch 2026-05-01 zu Listendarstellung. */
.nvb-d-bm-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nvb-d-bm-card {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 60px 130px 120px;
  align-items: center;
  column-gap: 16px;
  padding: 7px 12px;
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.nvb-d-bm-active {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.30);
}
.nvb-d-bm-active:hover {
  background: rgba(34,197,94,0.14);
  border-color: rgba(34,197,94,0.50);
}
.nvb-d-bm-inactive {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0.6;
}
.nvb-d-bm-best {
  border-color: var(--tba-gold) !important;
  box-shadow: 0 0 0 1px var(--tba-gold);
}
.nvb-d-bm-mark {
  font-size: 13px;
  color: var(--tba-gold);
  text-align: center;
  line-height: 1;
}
.nvb-d-bm-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tba-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nvb-d-bm-odds {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--tba-white);
}
.nvb-d-bm-active .nvb-d-bm-odds { color: #34D399; }
.nvb-d-bm-inactive .nvb-d-bm-odds { color: rgba(255,255,255,0.85); font-weight: 500; }
.nvb-d-bm-edge {
  font-size: 12px;
  font-weight: 600;
  color: #34D399;
  white-space: nowrap;
  text-align: right;
}
.nvb-d-bm-edge-off {
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}
/* In der Buchmacher-Listenzeile: Pfeile + Prozent nebeneinander statt
   gestapelt (Default in der eingeklappten Card). Prozent-Wert größer als
   im Default, weil hier mehr Platz vorhanden ist. */
.nvb-d-bm-edge .nvb-edge-arrows {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.nvb-d-bm-edge .nvb-edge-arrows-pct {
  font-size: 14px;
}
.nvb-d-bm-time {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.2px;
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 600px) {
  .nvb-d-bm-card {
    grid-template-columns: 14px minmax(0, 1fr) auto;
    row-gap: 2px;
    column-gap: 8px;
  }
  .nvb-d-bm-edge { grid-column: 2 / 4; text-align: left; }
  .nvb-d-bm-time { grid-column: 2 / 4; text-align: left; }
}
.nvb-d-bm-snap {
  margin-top: 10px;
  font-size: 13px;
  font-style: italic;
  color: rgba(255,255,255,0.55);
}

/* Sektion 3 — Empfehlungs-Box */
.nvb-d-rec-box {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 14px;
}
.nvb-d-rec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.nvb-d-rec-col { display: flex; flex-direction: column; gap: 4px; }
.nvb-d-rec-lbl {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.nvb-d-rec-val {
  font-size: 22px;
  font-weight: 800;
  color: #34D399;
  line-height: 1;
}
@media (max-width: 600px) {
  .nvb-d-rec-grid { grid-template-columns: 1fr; }
}

/* Sektion 3 — Stake-Sektion (3 Modi: Budget / Standard / Default).
   Briefing 2026-05-01. Nutzt --tba-gold als "Empfohlen"-Highlight (Premium-
   Token statt Briefing-Orange) und bestehende rgba-Layer für Karten-BG. */
.nvb-d-stake-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.nvb-d-stake-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.nvb-d-stake-card-rec {
  background: rgba(251,191,36,0.10);
  border-color: rgba(251,191,36,0.4);
}
.nvb-d-stake-card-rec .nvb-d-stake-lbl { color: var(--tba-gold); }
.nvb-d-stake-lbl {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.nvb-d-stake-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--tba-white);
  line-height: 1;
  letter-spacing: -0.3px;
}
.nvb-d-stake-card-rec .nvb-d-stake-val { color: var(--tba-gold); }
.nvb-d-stake-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}
.nvb-d-stake-foot {
  margin-top: 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
.nvb-d-stake-foot a { color: var(--tba-purple-light); }

/* Sektion 4 — KI-Methodik (Pro-Variante).
   Liga-Aussage + 90-Tage-Performance. Highlight-Farbe = --tba-gold (Premium-
   Brand, statt Briefing-Orange). Briefing 2026-05-01. */
.nvb-d-method-lead {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 10px;
  line-height: 1.5;
}
.nvb-d-method-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
}
.nvb-d-method-list li {
  position: relative;
  padding: 4px 0 4px 18px;
  font-size: 14px;
  color: var(--tba-gold);
  font-weight: 600;
  line-height: 1.4;
}
.nvb-d-method-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--tba-gold);
  font-weight: 700;
}
.nvb-d-method-stats-head {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 10px;
}
.nvb-d-method-kpi-grid {
  display: flex;
  gap: 36px;
  align-items: flex-start;
}
.nvb-d-method-kpi { min-width: 0; }
.nvb-d-method-kpi-lbl {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.nvb-d-method-kpi-val {
  font-size: 24px;
  font-weight: 700;
  color: var(--tba-white);
  line-height: 1.1;
}
.nvb-d-method-kpi-val.nvb-pos { color: #34D399; }
.nvb-d-method-kpi-val.nvb-neg { color: #F87171; }
.nvb-d-method-stats {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.nvb-d-method-stats-loading,
.nvb-d-method-stats-empty {
  color: rgba(255,255,255,0.55);
  font-style: italic;
}
.nvb-d-method-hit { color: var(--tba-white); font-weight: 700; margin-left: 4px; }
.nvb-d-method-pos { color: #34D399; font-weight: 700; margin-left: 4px; }
.nvb-d-method-neg { color: #F87171; font-weight: 700; margin-left: 4px; }
.nvb-d-method-sep { color: rgba(255,255,255,0.4); }

/* Sektion 5 — Markt-Bewegung & Liga-Performance (Pro-locked / Expert-soon).
   Briefing 2026-05-01. Aktive Expert-Variante (CLV-Sparkline, Liga-Tiefe)
   ist explizit im Briefing als „Monat 6-9" markiert; aktuell nur Locked-View. */
.nvb-d-perf-locked {
  background: rgba(255,255,255,0.03);
  border: 0.5px dashed rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 14px 16px;
}
.nvb-d-perf-locked-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.nvb-d-perf-locked-title {
  margin-bottom: 0;
  color: rgba(255,255,255,0.75);
}
.nvb-d-perf-expert-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--tba-gold);
  background: rgba(251,191,36,0.18);
  padding: 3px 8px;
  border-radius: 4px;
}
.nvb-d-perf-locked-body {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
}
.nvb-d-perf-locked-cta {
  margin-top: 10px;
}
.nvb-d-perf-locked-cta a {
  color: var(--tba-gold);
  font-weight: 600;
  text-decoration: none;
}
.nvb-d-perf-locked-cta a:hover { text-decoration: underline; }

/* ── Markt-Bewegung (Expert-Variante von PerformanceSection) ────────────
   3-Zellen-Grid: Initial → Aktuell + Veränderung. Gleiche Token-Familie wie
   die übrigen Mini-Labels (.nvb-thr-lbl), Werte in der Detail-Card-Größe.
   Pos = #34D399 (system-success), neg = system-Brand-Lila-light. */
.nvb-d-mm-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: center;
  column-gap: 16px;
  padding: 6px 4px 12px;
}
.nvb-d-mm-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.nvb-d-mm-tag {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
  font-style: italic;
}
.nvb-d-mm-lbl {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.nvb-d-mm-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--tba-white);
  line-height: 1;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.nvb-d-mm-arrow {
  font-size: 22px;
  color: rgba(255,255,255,0.45);
  align-self: center;
  padding-top: 14px;
}
.nvb-d-mm-pos { color: #34D399; }
.nvb-d-mm-neg { color: var(--tba-purple-light); }
.nvb-d-mm-explain {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.nvb-d-mm-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}
.nvb-d-mm-foot-hint {
  color: rgba(255,255,255,0.55);
  margin-left: 4px;
  font-size: 13px;
}

/* CLV-Sparkline (Expert): mini SVG-Linienchart unter dem 3-Zellen-Grid.
   Beschriftung darunter im Mini-Label-Stil — gleiches Token wie Footer-Zeile. */
.nvb-d-mm-spark-head {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-top: 12px;
  margin-bottom: 8px;
}
.nvb-d-mm-spark-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
}
.nvb-d-spark-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nvb-d-spark-leg-arrow {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.nvb-d-spark-leg-sep {
  color: rgba(255,255,255,0.3);
  font-size: 14px;
}
.nvb-d-spark {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nvb-d-spark-svg {
  display: block;
  width: 100%;
  height: 88px;
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  padding: 2px 4px;
}
.nvb-d-spark-foot {
  font-size: 13px;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.2px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.nvb-d-spark-foot strong { color: var(--tba-white); font-weight: 700; }
.nvb-d-spark-sep { color: rgba(255,255,255,0.30); }

@media (max-width: 600px) {
  .nvb-d-mm-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 12px;
  }
  .nvb-d-mm-arrow { display: none; }
  .nvb-d-mm-cell-change { grid-column: 1 / 3; align-items: flex-start; }
}

/* Modus B/C: einzelne breite Karte */
.nvb-d-stake-stdbox {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 16px;
  align-items: center;
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.28);
  border-radius: 8px;
  padding: 14px 16px;
}
.nvb-d-stake-stdbox-default {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.nvb-d-stake-stdcol { display: flex; flex-direction: column; gap: 4px; }
.nvb-d-stake-stdcol-hint {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
}
.nvb-d-stake-stdcol-hint a { color: var(--tba-gold); text-decoration: underline; }
.nvb-d-stake-stdval {
  font-size: 22px;
  font-weight: 800;
  color: var(--tba-white);
  line-height: 1;
  letter-spacing: -0.3px;
}
@media (max-width: 600px) {
  .nvb-d-stake-grid { grid-template-columns: 1fr; }
  .nvb-d-stake-stdbox { grid-template-columns: 1fr; }
}

/* Sektion 4 — Weitere Value-Optionen (Mini-Liste pro alternativem Tipp) */
.nvb-d-other-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nvb-d-other-block {
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.nvb-d-other-block:has(.nvb-d-other-open) { border-color: rgba(111,101,216,0.3); }

.nvb-d-other-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: inherit;
  transition: background 0.15s;
}
.nvb-d-other-row:hover { background: rgba(255,255,255,0.05); }
.nvb-d-other-open { background: rgba(111,101,216,0.06); }
/* Quoten-Container in der Other-Bets-Zeile — gleiches Layout wie .nvb-quotes
   in der eingeklappten Card, nur mit kleineren Werte-Schriften. */
.nvb-d-other-quotes {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.nvb-d-other-quotes .nvb-thr-val,
.nvb-d-other-quotes .nvb-market-val {
  font-size: 18px;
}
.nvb-d-other-quotes .nvb-thr-lbl,
.nvb-d-other-quotes .nvb-market-lbl {
  font-size: 10px;
  letter-spacing: 0.5px;
}
.nvb-d-other-quotes .nvb-quote-arrow {
  align-self: flex-end;
  padding-bottom: 2px;
}
/* Compact-Mode der IqScoreStars-Komponente (Other-Bets-Zeile):
   kleinere Sterne, kein "IQ-Score"-Brand-Label oben. */
.nvb-card-stars-compact .nvb-card-stars-row {
  font-size: 14px;
  gap: 2px;
}
.nvb-d-other-chev {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  width: 18px;
  text-align: center;
}
.nvb-d-other-detail {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(111,101,216,0.18);
}

/* Meta-Zeile */
.nvb-d-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 1.25rem 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  flex-wrap: wrap;
}

/* Detail-Bereich-Wrapper — wird durch .nvb-detail (max-height-Animation) gesteuert */
.nvb-detail-info {
  font-size: 13px;
  color: var(--tba-purple-light);
  background: rgba(255,255,255,0.04);
  border-radius: var(--tba-radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  line-height: 1.7;
}
.nvb-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.nvb-detail-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-align: right;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ── Main row layout (CSS Grid — 7 cols) ── */
.nvb-row-main {
  display: grid;
  grid-template-columns: 80px 1fr 105px 160px 72px 88px 20px;
  align-items: center;
  column-gap: 12px;
  min-height: 44px;
}
.nvb-row-main.nvb-row-main-blurred {
  grid-template-columns: 80px 1fr auto;
}

/* ── Cells ── */
.nvb-cell-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 72px;
  flex-shrink: 0;
}
.nvb-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--tba-white);
  line-height: 1;
}
.nvb-league {
  font-size: 10px;
  color: var(--tba-purple-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}
.nvb-countdown {
  font-size: 10px;
  font-weight: 700;
  color: #FBBF24;
  letter-spacing: 0.2px;
  line-height: 1;
}
.nvb-live-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.nvb-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #34D399;
  border-radius: 50%;
  animation: vb-pulse 1.6s ease-in-out infinite;
  margin-right: 3px;
}
.nvb-live-text { font-size: 12px; font-weight: 700; color: #34D399; }

.nvb-cell-match {
  min-width: 0;
  overflow: hidden;
}
.nvb-match {
  font-size: 14px;
  font-weight: 600;
  color: var(--tba-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.nvb-vs {
  color: var(--tba-purple-mid);
  font-weight: 400;
  margin: 0 3px;
}

.nvb-cell-dir { flex-shrink: 0; }
.nvb-dir {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  min-width: 130px;
  text-align: center;
  box-sizing: border-box;
}
.nvb-dir-sm { font-size: 11px; padding: 2px 9px; min-width: 0; }
/* Tipp-Badges: System-Dark-Varianten (DESIGN_GUIDE §2.3) als Border + farbiger
   Text + Tönung im BG. Hervorgehoben durch klaren Border-Outline, dezent in
   der Sättigung — User-Wunsch 2026-05-01. */
.nvb-dir-h { color: #60A5FA; background: rgba(96,165,250,0.22);  border: 1.5px solid #60A5FA; }
.nvb-dir-d { color: #A78BFA; background: rgba(167,139,250,0.22); border: 1.5px solid #A78BFA; }
.nvb-dir-a { color: #FB923C; background: rgba(251,146,60,0.22);  border: 1.5px solid #FB923C; }

.nvb-cell-odds {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nvb-ki-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
.nvb-ki-quote {
  font-size: 17px;
  font-weight: 700;
  color: #C4BEFF;
  line-height: 1;
}
.nvb-ki-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--tba-purple-mid);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.nvb-ki-arrow {
  font-size: 13px;
  color: rgba(111,101,216,0.5);
  flex-shrink: 0;
}
.nvb-mkt-quote-block,
.nvb-mkt-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nvb-mkt-quote {
  font-size: 24px;
  font-weight: 800;
  color: var(--tba-white);
  line-height: 1;
  letter-spacing: -0.5px;
}
.nvb-mkt-bm {
  font-size: 11px;
  font-weight: 600;
  color: #C4BEFF;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.nvb-bm-mine { color: #34D399; }
.nvb-mkt-time {
  font-size: 11px;
  font-weight: 500;
  color: #9CA3AF;
}

.nvb-cell-edge { }
.nvb-edge {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  white-space: nowrap;
  background: rgba(52,211,153,0.12);
  color: #34D399;
  border: 1px solid rgba(52,211,153,0.28);
}
.nvb-edge-fire {
  background: rgba(16,185,129,0.2);
  color: #10B981;
  border-color: rgba(16,185,129,0.45);
  box-shadow: 0 0 8px rgba(16,185,129,0.18);
}

.nvb-cell-conv { }
.nvb-cell-chev {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nvb-stars { font-size: 12px !important; }

.nvb-chevron {
  font-size: 20px;
  color: var(--tba-purple-mid);
  transition: transform 0.2s;
  display: inline-block;
  line-height: 1;
}
.nvb-chevron-up { transform: rotate(90deg); }

/* ── Blurred bet ── */
.nvb-blurred-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.nvb-blur-icon { font-size: 14px; }
.nvb-blur-text {
  font-size: 13px;
  color: var(--tba-purple-light);
  flex: 1;
}
.nvb-lock-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--tba-purple-light);
  background: rgba(111,101,216,0.2);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ── Detail Panel ── */
.nvb-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
/* Aufgeklappter Detail-Container: einheitlich für single + multi-value.
   Großzügiges max-height, damit komplexer Inhalt (3 Sektionen + Bookmaker-Grid
   + Empfehlungs-Box + ggf. Weitere-Optionen-Liste + Meta) nicht abgeschnitten wird. */
.nvb-row.nvb-expanded .nvb-detail,
.nvb-detail.nvb-detail-open { max-height: 4000px; }

.nvb-detail-inner {
  /* Keine eigene Trennlinie/Padding — die Sektionen bringen ihre eigene Struktur mit. */
}

.nvb-explain {
  font-size: 13px;
  color: var(--tba-purple-light);
  background: rgba(255,255,255,0.04);
  border-radius: var(--tba-radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  line-height: 1.7;
}
.nvb-explain-val { color: var(--tba-white); font-size: 15px; }
.nvb-explain-odds { color: var(--tba-white); font-size: 15px; }
.nvb-explain-edge { color: #34D399; }

/* ── Detail Stats Grid (Pro / Expert) ── */
.nvb-detail-stats {
  display: flex;
  gap: 6px 20px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 12px 0;
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--tba-radius-sm);
}
.nvb-dstat { display: flex; flex-direction: column; gap: 3px; }
.nvb-dstat-lbl {
  font-size: 10px;
  font-weight: 600;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nvb-dstat-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--tba-white);
  line-height: 1;
}
.nvb-dstat-highlight {
  border-left: 2px solid #34D399;
  padding-left: 8px;
}

/* Expert prob pills */
.nvb-expert-probs {
  display: flex;
  gap: 7px;
  margin-bottom: 10px;
}
.nvb-prob-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
}
.nvb-prob-pill.nvb-prob-h { color: #60A5FA; background: rgba(96,165,250,0.15);  border: 1px solid rgba(96,165,250,0.3); }
.nvb-prob-pill.nvb-prob-d { color: #A78BFA; background: rgba(167,139,250,0.15); border: 1px solid rgba(167,139,250,0.3); }
.nvb-prob-pill.nvb-prob-a { color: #FB923C; background: rgba(251,146,60,0.15);  border: 1px solid rgba(251,146,60,0.3); }

/* Buchmacher-Link */
.nvb-bm-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #C4BEFF;
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: var(--tba-radius-sm);
  transition: background 0.15s, color 0.15s;
}
.nvb-bm-link:hover { background: rgba(167,139,250,0.1); color: var(--tba-white); }

/* KI Probabilities (legacy bars — kept for reference) */
.nvb-probs {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.nvb-prob-col { flex: 1; }
.nvb-prob-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--tba-purple-light);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
}
.nvb-prob-track {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.nvb-prob-fill { height: 100%; border-radius: 3px; }
.nvb-prob-h { background: #60A5FA; }
.nvb-prob-d { background: #FBBF24; }
.nvb-prob-a { background: #34D399; }
.nvb-prob-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--tba-white);
}

/* All bets in detail */
.nvb-all-bets-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--tba-purple-mid);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.nvb-all-bets { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.nvb-bet-row {
  display: grid;
  grid-template-columns: 120px 120px 1fr 90px 80px;
  align-items: center;
  column-gap: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--tba-radius-sm);
  padding: 8px 12px;
}
.nvb-br-dir  { }
.nvb-br-quote {
  display: flex;
  align-items: center;
  gap: 5px;
}
.nvb-br-bm   { }
.nvb-br-edge { }
.nvb-br-stars { display: flex; justify-content: flex-end; }
.nvb-bet-ki   { font-size: 13px; color: #C4BEFF; font-weight: 600; }
.nvb-bet-odds { font-size: 17px; font-weight: 800; color: var(--tba-white); line-height: 1; }
.nvb-bet-bm   { font-size: 11px; color: #C4BEFF; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }

.nvb-detail-foot {
  font-size: 10px;
  color: var(--tba-purple-mid);
  margin-top: 10px;
}

/* ── Loading / Error / Empty ── */
.nvb-skeleton {
  height: 66px;
  background: rgba(38,33,92,0.08);
  border-radius: var(--tba-radius-lg);
  margin-bottom: 6px;
  animation: lp-pulse 1.4s ease-in-out infinite;
}
.nvb-error {
  background: rgba(226,75,74,0.1);
  border: 1px solid rgba(226,75,74,0.3);
  color: #E24B4A;
  border-radius: var(--tba-radius-md);
  padding: 14px 18px;
  font-size: 14px;
}
.nvb-empty {
  text-align: center;
  padding: 3rem 1rem;
  background: rgba(38,33,92,0.04);
  border: 1px dashed rgba(111,101,216,0.25);
  border-radius: var(--tba-radius-lg);
}
.nvb-empty-icon { font-size: 40px; margin-bottom: 12px; }
.nvb-empty-title { font-size: 18px; font-weight: 600; color: var(--tba-dark); margin-bottom: 6px; }
.nvb-empty-sub { font-size: 14px; color: #6B7280; line-height: 1.5; }

/* ── Upgrade Banner ── */
.nvb-upgrade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
  border: 2px solid #F59E0B;
  border-radius: var(--tba-radius-lg);
  padding: 18px 22px;
  margin-top: 14px;
}
.nvb-upgrade-left { flex: 1; min-width: 200px; }
.nvb-upgrade-title { font-size: 16px; font-weight: 700; color: var(--tba-dark); }
.nvb-upgrade-sub { font-size: 14px; color: #6B7280; margin-top: 3px; }

/* ── BuchmacherSettings Modal Content ── */
.bms-modal {
  padding: 1.75rem;
  font-family: var(--tba-font-sans);
}
.bms-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--tba-dark);
  margin-bottom: 6px;
}
.bms-sub {
  font-size: 13px;
  color: #6B7280;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.bms-loading, .bms-empty {
  text-align: center;
  padding: 1.5rem;
  color: #9CA3AF;
  font-size: 13px;
}
.bms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 1.25rem;
}
.bms-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--tba-radius-md);
  border: 1.5px solid #E5E7EB;
  background: #F9FAFB;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  font-family: var(--tba-font-sans);
}
.bms-item:hover { border-color: var(--tba-purple-light); background: #F3F4F6; }
.bms-active {
  border-color: var(--tba-purple);
  background: var(--tba-surface);
}
.bms-check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #D1D5DB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--tba-purple-mid);
  flex-shrink: 0;
  background: #fff;
}
.bms-active .bms-check {
  background: var(--tba-purple);
  border-color: var(--tba-purple);
  color: #fff;
}
.bms-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tba-dark);
}
.bms-laender {
  font-size: 10px;
  color: #9CA3AF;
  display: block;
}
.bms-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #F3F4F6;
  padding-top: 1rem;
}
.bms-btn-cancel {
  padding: 9px 20px;
  border-radius: var(--tba-radius-md);
  border: 1.5px solid #E5E7EB;
  background: transparent;
  color: #6B7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  font-family: var(--tba-font-sans);
}
.bms-btn-cancel:hover { background: #F3F4F6; }
.bms-btn-save {
  padding: 9px 22px;
  border-radius: var(--tba-radius-md);
  border: none;
  background: var(--tba-purple);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  font-family: var(--tba-font-sans);
}
.bms-btn-save:hover { background: var(--tba-purple-mid); }
.bms-btn-save:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Onboarding-Modal (Mein-Filter): hell, im bms-Modal-Stil, breiter (640px).
   Wird im `.nvb-modal-inner`-Overlay gerendert (weißer Hintergrund kommt von dort). */
.nvb-ob-modal {
  padding: 1.75rem 2rem;
  font-family: var(--tba-font-sans);
  max-width: 640px;
}
.nvb-ob-header { margin-bottom: 1.5rem; }
.nvb-ob-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--tba-dark);
  margin-bottom: 4px;
}
.nvb-ob-sub {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.5;
}
.nvb-ob-section {
  padding: 1rem 0 1.25rem;
  border-bottom: 1px solid #F3F4F6;
}
.nvb-ob-section:last-of-type { border-bottom: none; }
.nvb-ob-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--tba-dark);
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.nvb-ob-sublabel {
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  margin: 12px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.nvb-ob-optional {
  font-size: 12px;
  font-weight: 400;
  color: #9CA3AF;
}
.nvb-ob-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--tba-radius-md);
  border: 1.5px solid #E5E7EB;
  background: #fff;
  font-size: 14px;
  font-family: var(--tba-font-sans);
  color: var(--tba-dark);
  outline: none;
  transition: border-color 0.15s;
}
.nvb-ob-input:focus { border-color: var(--tba-purple); }
.nvb-ob-input-num { width: 120px; }
.nvb-ob-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.nvb-ob-inline-lbl {
  font-size: 13px;
  color: #6B7280;
  flex-shrink: 0;
}
.nvb-ob-inline-suffix {
  font-size: 14px;
  font-weight: 600;
  color: var(--tba-dark);
}
.nvb-ob-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nvb-ob-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--tba-radius-md);
  border: 1.5px solid #E5E7EB;
  background: #F9FAFB;
  color: var(--tba-dark);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--tba-font-sans);
  transition: all 0.15s;
}
.nvb-ob-pill:hover { border-color: var(--tba-purple-light); background: #F3F4F6; }
.nvb-ob-pill-active {
  border-color: var(--tba-purple);
  background: var(--tba-surface);
  color: var(--tba-dark);
}
.nvb-ob-pill-check {
  width: 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tba-purple);
}
.nvb-ob-pill-name { font-weight: 600; }
.nvb-ob-pill-country { color: #9CA3AF; font-size: 11px; }
.nvb-ob-leagues {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.nvb-ob-leagues .nvb-ob-pill { justify-content: flex-start; }
.nvb-ob-actions-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
}
.nvb-ob-link {
  background: none;
  border: none;
  color: var(--tba-purple);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  font-family: var(--tba-font-sans);
  text-decoration: underline;
}
.nvb-ob-link:hover { color: var(--tba-purple-mid); }
.nvb-ob-sep { color: #D1D5DB; font-size: 12px; }
.nvb-ob-hint {
  font-size: 12px;
  color: #6B7280;
  margin-top: 8px;
  line-height: 1.5;
}
.nvb-ob-error {
  margin: 1rem 0;
  padding: 10px 12px;
  border-radius: var(--tba-radius-md);
  background: #FEF2F2;
  color: #B91C1C;
  font-size: 13px;
}
.nvb-ob-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #F3F4F6;
  padding-top: 1.25rem;
  margin-top: 0.5rem;
}
.nvb-ob-skip {
  background: none;
  border: none;
  color: #6B7280;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 4px;
  font-family: var(--tba-font-sans);
}
.nvb-ob-skip:hover { color: var(--tba-dark); }
.nvb-ob-skip:disabled { opacity: 0.5; cursor: not-allowed; }
.nvb-ob-submit {
  padding: 10px 28px;
  border-radius: var(--tba-radius-md);
  border: none;
  background: var(--tba-purple);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--tba-font-sans);
  transition: background 0.15s;
}
.nvb-ob-submit:hover { background: var(--tba-purple-mid); }
.nvb-ob-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Mobile ── */
@media (max-width: 700px) {
  .nvb-hero { padding: 1.25rem 1.25rem; }
  .nvb-hero-title { font-size: 22px; }
  .nvb-hero-metrics { display: none; }
  .nvb-col-header { display: none; }
  .nvb-row-main { grid-template-columns: 64px 1fr 90px 32px; }
  .nvb-cell-edge, .nvb-cell-conv { display: none; }
  .nvb-cell-time { min-width: 60px; }
  .nvb-cell-odds { min-width: auto; }
  .nvb-match { font-size: 13px; }
  .nvb-bm-banner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .nvb-filter-bar { gap: 6px; }
  .nvb-liga-wrap { display: none; }
  .bms-grid { grid-template-columns: 1fr; }
  .nvb-ob-modal { padding: 1.25rem 1.25rem; }
  .nvb-ob-leagues { grid-template-columns: 1fr; }
  .nvb-probs { gap: 6px; }
  .nvb-cell-conv { display: none; }
}

/* ── MudBlazor-Overrides: Tab-Schrift in der ganzen App größer & lesbarer ── */
.mud-tabs .mud-tab,
.mud-tabs-toolbar .mud-tab {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  padding: 14px 20px !important;
  min-height: 52px !important;
}
.mud-tabs .mud-tab.mud-tab-active {
  color: var(--tba-purple) !important;
}
.mud-tabs .mud-tab-slider {
  background-color: var(--tba-purple) !important;
  height: 3px !important;
}

/* ── Conviction-Legend (kollabierbar, dunkel) ──
   Sitzt zwischen Performance-Widget und Tabs auf der Value-Bets-Seite.
   Erklärt die Sterne-Skala mit echter Hit-Rate / ROI pro Stufe. */
.nvb-conv-legend {
  background: var(--tba-dark);
  border: 1px solid rgba(111,101,216,0.18);
  border-radius: var(--tba-radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
}
.nvb-conv-legend-head {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--tba-white);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: background 0.15s;
}
.nvb-conv-legend-head:hover { background: rgba(255,255,255,0.04); }
.nvb-conv-legend-head-text { display: inline-flex; align-items: baseline; gap: 8px; }
.nvb-conv-legend-head-sub {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
}
.nvb-conv-legend-head-chev {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

.nvb-conv-legend-period {
  display: flex;
  gap: 6px;
  padding: 8px 18px 0;
}
.nvb-conv-legend-period-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: rgba(255,255,255,0.65);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.nvb-conv-legend-period-btn:hover { color: var(--tba-white); border-color: rgba(255,255,255,0.25); }
.nvb-conv-legend-period-active {
  background: var(--tba-purple);
  border-color: var(--tba-purple);
  color: var(--tba-white);
}

.nvb-conv-legend-loading,
.nvb-conv-legend-error {
  padding: 14px 18px 18px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.nvb-conv-legend-error { color: #F87171; }

.nvb-conv-legend-table {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 18px 4px;
}
.nvb-conv-legend-row {
  display: grid;
  grid-template-columns: 130px 1fr 90px 110px 70px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.nvb-conv-legend-row:last-child { border-bottom: 0; }
.nvb-conv-legend-row-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 4px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.nvb-conv-legend-c-stars  { display: flex; align-items: center; }
.nvb-conv-legend-c-label  { font-weight: 500; }
.nvb-conv-legend-c-hit    { font-weight: 600; }
.nvb-conv-legend-c-roi    { font-weight: 700; }
.nvb-conv-legend-c-picks  { color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }

.nvb-conv-legend-pos { color: #34D399; }
.nvb-conv-legend-neg { color: #F87171; }
.nvb-conv-legend-muted { color: rgba(255,255,255,0.40); font-weight: 500; font-size: 11px; }

.nvb-conv-legend-disclaimer {
  padding: 12px 18px 16px;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
}
.nvb-conv-legend-disclaimer strong { color: rgba(255,255,255,0.85); font-weight: 700; }

/* ── 13f. App-Shell-Layout (MainLayout-Rahmen) ───────────────────────────────
   Aus dem Inline-<style> von MainLayout.razor zentralisiert (0c, 2026-06-29).
   Trägt den eingeloggten App-Rahmen: dunkler Vollhöhen-Shell, Content-Container
   und der Nav-Rechtsteil (Plan-Badge / Login / Logout). Die Nav-Leiste selbst
   nutzt das geteilte `.lp-nav` / `.lp-nav-links` / `.lp-nav-btn`. */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--tba-dark);
  color: var(--tba-white);
}
.app-main      { flex: 1; padding: 2.5rem 0 3rem; }
.app-container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }

.app-nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.app-nav-plan {
  font-size: 11px;
  font-weight: 700;
  color: var(--tba-gold);
  background: rgba(251,191,36,0.14);
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 999px;
  padding: 4px 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.app-nav-login {
  font-size: 13px;
  color: var(--tba-purple-light);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.app-nav-login:hover { color: var(--tba-white); }

.app-nav-logout {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}

@media (max-width: 700px) {
  .app-container { padding: 0 1rem; }
  .app-nav-plan  { display: none; }
}

/* ── 13c. MudBlazor-Page-Wrapper ──────────────────────────────────────────
   `.app-shell` ist global dunkel-violett mit weißer Schrift (Dashboard-Look).
   MudBlazor-lastige Seiten (Admin, Statistiken, Modellgenauigkeit, Account)
   würden sonst weiße Schrift auf weißen MudCards rendern. Dieser Wrapper
   wird als äußerstes Element der Page gesetzt und kippt den Look lokal
   zurück auf hell + dunkle Schrift — eine Hell-Insel auf dem dunklen Body. */
.tba-mud-page {
  background: var(--tba-white);
  color: var(--tba-dark);
  border-radius: var(--tba-radius-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
  min-height: calc(100vh - 12rem);
}
.tba-mud-page a { color: var(--tba-purple); }
.tba-mud-page a:hover { color: var(--tba-purple-mid); }

@media (max-width: 600px) {
  .nvb-conv-legend-row {
    grid-template-columns: 90px 1fr 70px 80px;
    font-size: 12px;
  }
  .nvb-conv-legend-c-picks { display: none; }
}

/* ── 14. Expert-Tier-Erweiterungen ──────────────────────────────────────
   Klassen für die Expert-spezifischen Bereiche: Ausblick-Tab, Sparkline,
   Probability-Breakdown, Expert-Metriken-Kacheln, Analytics-Section (Charts).
   Bleiben im Dashboard-Stil — kein eigener Look, nur dichtere Daten. */

/* Ausblick-Tab (gold, Expert-exklusiv). */
.nvb-tab-outlook {
  position: relative;
}
.nvb-tab-badge-gold {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  background: rgba(251,191,36,0.18);
  border: 1px solid rgba(251,191,36,0.55);
  border-radius: 999px;
  color: var(--tba-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* Liga-Sparkline im LeagueStrengthModule. */
.nvb-ins-spark {
  flex-shrink: 0;
  vertical-align: middle;
  opacity: 0.85;
}

/* Expert-Probability-Breakdown-Tabelle (im ValueBetDetail aufgeklappten Bereich). */
.exp-detail-section { margin-bottom: 8px; }
.exp-prob-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
}
.exp-prob-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.exp-prob-table td {
  padding: 8px 10px;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.exp-prob-table tr:last-child td { border-bottom: none; }
.exp-prob-row-active { background: rgba(251,191,36,0.06); }
.exp-prob-row-active td:first-child { box-shadow: inset 3px 0 0 rgba(251,191,36,0.55); }
.exp-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.exp-pos { color: #34D399; }
.exp-neg { color: #F87171; }

/* Expert-Metriken-Kacheln (Kelly / Edge / Drift / Verfügbar seit).
   `padding-inline` schafft einen sichtbaren Rand links/rechts der Kachel-Reihe. */
.exp-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0 6px;
  padding: 0 12px;
}
@media (max-width: 700px) {
  .exp-metrics-row { grid-template-columns: repeat(2, 1fr); padding: 0 8px; }
}
.exp-metric-kpi {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.exp-metric-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.exp-metric-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--tba-white);
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Sub-Zeile unter dem Hauptwert — z.B. „= 15,70 € bei deiner Bankroll" bei Kelly. */
.exp-metric-sub {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
  letter-spacing: 0.2px;
  text-transform: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Hover-Tooltip-Pattern für Expert-Erklärungen.
   Reines CSS, kein JS. `tabindex="0"` macht den Tip per Tastatur erreichbar.
   Das Icon wird als Inline-SVG (`.exp-info-tip-icon`) gerendert — sauberer
   als Unicode (das Unicode-„ⓘ"-Glyph fehlt in manchen System-Fonts). */
.exp-info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: rgba(255,255,255,0.45);
  cursor: help;
  user-select: none;
  transition: color 0.15s;
}
.exp-info-tip:hover,
.exp-info-tip:focus { color: var(--tba-purple-light); outline: none; }
.exp-info-tip-icon {
  display: block;
  flex-shrink: 0;
}
.exp-info-pop {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  width: 240px;
  background: var(--tba-dark);
  border: 1px solid rgba(111,101,216,0.45);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(255,255,255,0.88);
  line-height: 1.5;
  text-align: left;
  z-index: 100;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  white-space: normal;
}
/* Kleiner Pfeil unten am Popup */
.exp-info-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(111,101,216,0.45);
}
.exp-info-tip:hover .exp-info-pop,
.exp-info-tip:focus .exp-info-pop {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Expert-Analytics-Section (Calibration-Plot + CLV-Verteilung).
   Liegt unter „Deine Insights"-Modulen, sichtbar nur für Expert. */
.exp-analytics-section {
  margin-top: 32px;
  margin-bottom: 24px;
}
.exp-analytics-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(251,191,36,0.08) 0%, rgba(111,101,216,0.05) 100%);
  border: 1px solid rgba(251,191,36,0.22);
  border-radius: var(--tba-radius-lg);
  padding: 12px 16px;
  margin-bottom: 14px;
}
.exp-badge-gold {
  display: inline-block;
  padding: 3px 10px;
  background: var(--tba-gold);
  color: var(--tba-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 999px;
}
.exp-banner-text {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}
.exp-analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .exp-analytics-grid { grid-template-columns: 1fr; }
}
.exp-chart-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(111,101,216,0.20);
  border-radius: var(--tba-radius-lg);
  padding: 18px 20px;
}
.exp-chart-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 10px;
}
.exp-chart-empty {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  text-align: center;
  padding: 60px 0;
}
.exp-svg {
  width: 100%;
  height: auto;
  display: block;
}
.exp-chart-legend {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 6px;
}
.exp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
}
.exp-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.exp-chart-foot {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}

/* ============================================================
   CASUAL-ANSICHT (cas-*) — „Was passiert heute?"
   Erwartetes Ergebnis + Modell-Sicherheit + Gründe, ohne Markt.
   Nutzt die --tba-*-Tokens; Werte aus Design-Handoff (Variante A).
   ============================================================ */
.cas-page {
  /* 1040px statt 960 (2026-08-21): die Spaltenliste braucht neben der 250px-Leiste
     Platz für Anpfiff 76 · Tendenz 126 · Prognose 80 · Sicherheit 92 · Chevron 20
     plus 5×12 gap = 460px, sodass der Paarung noch ~250px bleiben. Vorher waren es
     ~170px und lange Paarungen brachen weg. Der Wert stammt aus dem Handoff, das
     für das Dashboard ausdrücklich 1000–1040px vorschlägt. */
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  background:
    radial-gradient(ellipse 620px 320px at 50% -8%, rgba(111,101,216,0.20), transparent 70%);
}

/* Header */
.cas-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.cas-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--tba-white);
  margin: 0;
}
.cas-subtitle {
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}

/* Free-Hinweisleiste */
.cas-free-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.28);
  border-radius: 12px;
  padding: 11px 16px;
  margin-bottom: 16px;
}
.cas-free-text { font-size: 13px; color: rgba(255,255,255,0.82); }
.cas-free-text b { color: var(--tba-gold); font-weight: 700; }
.cas-free-btn {
  background: var(--tba-gold);
  color: var(--tba-dark);
  font-weight: 700;
  font-size: 12.5px;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
}

/* ── Liga-Master-Detail (.cas-lg-*) ──────────────────────────────────────────
   Ersetzt das frühere Liga-Akkordeon (.cas-league / -head / -name / -count /
   -chev). Links eine feste Ligen-Leiste, rechts die Spiele an einer Zeitachse.
   Kein Auf-/Zuklappen der Liga mehr — eine Liga ist immer gewählt.
   Farben ausschließlich aus den vorhandenen Tokens: Auswahl/Achse Brand-Purple,
   Top-Badge Gold, Ausgangsfarben --tba-out-h/-d/-a.
   .cas-league-flag/-globe/-body bleiben bestehen (Flaggen-Primitive + Rückblick). */

/* Seit 29.08.2026 eine SPALTE: oben die Ligen-Leiste, darunter der Detailbereich.
   Vorher stand die Ligenauswahl als 250-px-Sidebar links. Der Gewinn ist Breite —
   die Liste nutzt jetzt die vollen 1240 px statt ~970 px, wovon der Tendenzbalken
   und die dauerhaft sichtbare Hinweis-Spalte leben. */
.cas-lg-panel {
  display: flex; flex-direction: column;
  background: var(--tba-surf-1);
  border: 1px solid rgba(111,101,216,0.18);
  border-radius: 16px;
  overflow: hidden;
  min-height: 460px;
}

/* Ligen-Leiste ueber der Liste (ersetzt .cas-lg-rail*).
   ⚠ Umbruch statt horizontalem Scrollen: Bei sieben bis acht Ligen entstehen zwei
   Zeilen, und keine Liga versteckt sich hinter einem Scrollrand. */
/* Raster statt freiem Umbruch (29.08.2026): Bei `flex-wrap` richtet sich die Breite
   jedes Tabs nach der Laenge des Liganamens — die zweite Zeile beginnt dann irgendwo,
   und nichts steht untereinander. Gleich breite Spalten geben der Leiste eine Ordnung,
   auch wenn „Ligue 1" und „UEFA Europa Conference League" nebeneinander stehen. */
.cas-lg-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.10));
  border-bottom: 1px solid rgba(111,101,216,0.18);
}
/* Das Label steht auf einer eigenen Zeile ueber dem Raster, sonst belegte es eine
   Rasterspalte und die erste Zeile haette einen Tab weniger. */
.cas-lg-tabs-lbl {
  grid-column: 1 / -1;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tba-purple-light);
  margin-bottom: 2px;
}
.cas-lg-tab {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 8px;
  border: 1px solid rgba(111,101,216,0.22); border-radius: 999px;
  background: var(--tba-surf-1);
  cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s;
}
.cas-lg-tab:hover { background: var(--tba-surf-2); }
.cas-lg-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tba-purple); }
.cas-lg-tab.cas-on {
  background: rgba(111,101,216,0.30);
  border-color: var(--tba-purple);
  box-shadow: 0 6px 18px rgba(111,101,216,0.35);
}
/* flex:1 + Ellipse, seit die Leiste ein Raster ist: In gleich breiten Spalten muss
   „UEFA Europa Conference League" gekuerzt werden, statt den Zaehler hinauszuschieben. */
.cas-lg-tab-name {
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,0.68);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cas-lg-tab.cas-on .cas-lg-tab-name { color: var(--tba-white); }
.cas-lg-tab.cas-on .cas-lg-count { color: rgba(255,255,255,0.75); }
.cas-lg-top {
  padding: 2px 6px; border-radius: 9px;
  background: rgba(251,191,36,0.14);
  color: var(--tba-gold);
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  white-space: nowrap;
}
.cas-lg-count {
  min-width: 16px; text-align: right;
  font-size: 10.5px; font-weight: 700;
  color: rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
}
/* Größen-Varianten der vorhandenen runden Flagge */
.cas-lg-disc-sm { width: 26px; height: 26px; box-shadow: 0 0 0 1px rgba(111,101,216,0.35); }
.cas-lg-disc-lg { width: 36px; height: 36px; box-shadow: 0 0 0 2px rgba(111,101,216,0.35); }
.cas-lg-disc-sm .cas-league-globe { font-size: 13px; }
.cas-lg-disc-lg .cas-league-globe { font-size: 20px; }

/* Rechte Spalte — Detail */
.cas-lg-detail {
  flex: 1; min-width: 0;
  padding: 20px 24px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.cas-lg-head { display: flex; align-items: center; gap: 12px; }
.cas-lg-head-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cas-lg-head-name {
  font-size: 18px; font-weight: 800; line-height: 1.1;
  color: var(--tba-white);
}
.cas-lg-head-sub {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.cas-lg-pills { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }
.cas-lg-pill {
  padding: 7px 12px; border-radius: 20px;
  background: var(--tba-surf-2);
  border: 1px solid transparent;
  color: rgba(255,255,255,0.65);
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.cas-lg-pill-hit {
  background: rgba(52,211,153,0.12);
  border-color: rgba(52,211,153,0.3);
  color: #34D399;
}

/* ── Spaltenliste (2026-08-21) ───────────────────────────────────────────────
   Ersetzt die Zeitachse mit aufklappbaren Karten. Gleiches Raster wie die
   öffentliche Spieltagsliste (.seo-list), damit dieselbe Partie an beiden Orten
   gleich aussieht. Der Feed liefert nur ungewertete Spiele (Label == null),
   deshalb ohne „Status"/„Endstand"/Treffer-Zeichen — dafür mit „Sicherheit".
   Zeile bleibt ein <button>: Klick klappt die CasualGameCard darunter auf. */
.cas-lg-list { display: flex; flex-direction: column; }
.cas-lg-listhead {
  display: flex; gap: 14px; padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--tba-purple-light);
}
.cas-lg-hcol-time  { width: 96px;  flex: none; }
.cas-lg-hcol-match { flex: 1; min-width: 0; }
/* ⚠ Die Partie-Spalte hat `flex: 1` und bekommt nur, was die festen Spalten uebrig
   lassen. Am 01.09.2026 waren das rund 290 px fuer ZWEI Namen plus Badge — "Wolfsberger AC"
   wurde zu "Wolfs…". Tendenz, Hinweis und Sicherheit geben deshalb je etwas ab (168→130,
   120→112, 132→120); die 58 px gehen an die Namen. Wer eine dieser Spalten wieder
   verbreitert, nimmt sie den Vereinsnamen weg. */
.cas-lg-hcol-tend  { width: 130px; flex: none; }
/* Nur im Rückblick (ShowResult): dort tragen die beiden Spalten Werte. Im Feed
   liefert der Controller nur ungewertete Spiele, sie blieben immer leer. */
.cas-lg-hcol-score { width: 60px;  flex: none; text-align: right; }
.cas-lg-hcol-hit   { width: 56px;  flex: none; text-align: right; }
.cas-lg-hcol-hint  { width: 112px;  flex: none; padding-left: 8px; }
.cas-lg-hcol-conf  { width: 120px; flex: none; text-align: right; }
.cas-lg-hcol-more  { width: 22px;  flex: none; }

.cas-lg-entry { border-bottom: 1px solid rgba(255,255,255,0.08); }
.cas-lg-item {
  width: 100%; border: none; background: transparent;
  display: flex; gap: 14px; align-items: center;
  padding: 13px 12px; border-radius: 8px;
  cursor: pointer; text-align: left;
  transition: background .15s;
}
.cas-lg-item:hover { background: var(--tba-surf-2); }
.cas-lg-item.cas-on { background: rgba(111,101,216,0.14); }
/* Gesperrte Zeile: kein Schalter, nichts aufzuklappen. Bewusst nur gedämpft und
   nicht ausgeblendet — erst dass die Partien sichtbar sind, macht greifbar, was
   der Saison-Pass zusätzlich freischaltet. */
.cas-lg-item-lock { cursor: default; background: var(--tba-surf-sunk); }
.cas-lg-item-lock:hover { background: var(--tba-surf-sunk); }
.cas-lg-item-lock .cas-lg-c-match { color: rgba(255,255,255,0.6); }

.cas-lg-c-time {
  width: 96px; flex: none;
  display: flex; flex-direction: column; gap: 1px;
  font-variant-numeric: tabular-nums;
}
/* ── Paarung mit dem erwarteten Ergebnis in der Mitte (01.09.2026) ─────────────
   Dieselbe Anordnung wie im Kopf der ausgeklappten Karte (.cas-x-pair): Heim
   rechtsbündig, Ergebnis-Badge, Gast linksbündig. Die eigene Prognose-Spalte ist
   dadurch entfallen — ihre 88 px kommen den Namen zugute.

   ⚠ Der Badge fluchtet über die Liste, weil Heim und Gast beide `flex: 1` tragen und
   damit unabhängig von der Namenslänge gleich viel Raum bekommen. „Red Bull Salzburg –
   Rapid Vienna" und „Lask Linz – WSG Wattens" haben ihr Ergebnis an derselben Stelle.
   Wer einem der beiden Namen `flex: none` gäbe, bräche genau das. */
.cas-lg-c-match {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--tba-white);
}
.cas-lg-m-home,
.cas-lg-m-away {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ⚠ Der Heimname steht RECHTSbündig — er läuft auf den Badge zu, der Gastname von ihm weg.
   Das sieht auf den ersten Blick unsymmetrisch aus, ist aber die einzige Anordnung, die drei
   Anforderungen gleichzeitig erfüllt. Sie hingen am 01.09.2026 in genau dieser Reihenfolge
   zusammen und sind einzeln nicht verhandelbar:

     1. Die Badges fluchten über alle Zeilen  → beide Namen brauchen `flex: 1`,
        also dieselbe halbe Spalte, unabhängig von der Namenslänge.
     2. Der Abstand zum Badge ist links wie rechts gleich  → der Heimname muss AN der
        Badge-Kante enden, also rechtsbündig sein.
     3. Die Namen füllen die Spalte  → dafür sorgt die Verbreiterung der Partie-Spalte.

   Ein linksbündiger Heimname erfüllt (1), bricht aber (2): Er endet dort, wo sein Text
   aufhört, und vor dem Badge klafft bei „Lask Linz" eine Lücke, die bei „Red Bull Salzburg"
   fehlt. Genau das war am 01.09.2026 kurzzeitig eingebaut und wurde zurückgenommen.

   Wer beides zugleich will — linksbündiger Zeilenanfang UND gleicher Abstand — muss (1)
   aufgeben: Dann bekommen die Namen `flex: 0 1 auto`, stehen kompakt beieinander, und die
   Badges stehen in jeder Zeile woanders. */
.cas-lg-m-home { text-align: right; }
.cas-lg-m-away { text-align: left; }
/* Kleine Schwester von .cas-x-score aus der Karte: gleiche Bauform, gleiche Tönungen,
   nur auf Listengröße — 13,5 px statt 26, Radius 8 statt 10. */
.cas-lg-m-score {
  flex: none; padding: 3px 9px; border-radius: 8px;
  font-size: 13.5px; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--tba-surf-2); color: var(--tba-white);
}
.cas-lg-m-score.cas-lg-pred-h { background: rgba(52,211,153,0.14);  color: var(--tba-out-h); }
.cas-lg-m-score.cas-lg-pred-d { background: rgba(127,119,221,0.16); color: var(--tba-out-d); }
.cas-lg-m-score.cas-lg-pred-a { background: rgba(30,168,235,0.14);  color: var(--tba-out-a); }
.cas-lg-item-lock .cas-lg-m-score { background: var(--tba-surf-sunk); }
.cas-lg-c-tend {
  width: 130px; flex: none;
  display: flex; align-items: center; gap: 7px;
}
.cas-lg-pred-h { color: var(--tba-out-h); }
.cas-lg-pred-d { color: var(--tba-out-d); }
.cas-lg-pred-a { color: var(--tba-out-a); }
.cas-lg-pred-none { color: rgba(255,255,255,0.25); }
/* Rückblick-Spalten. Das tatsächliche Ergebnis steht kräftiger als die Prognose —
   es ist die Tatsache, die Prognose war die Vermutung. */
.cas-lg-c-score {
  width: 60px; flex: none; text-align: right;
  font-size: 14px; font-weight: 700; color: var(--tba-white);
  font-variant-numeric: tabular-nums;
}
.cas-lg-c-hit {
  width: 56px; flex: none;
  display: flex; align-items: center; justify-content: flex-end;
  font-size: 12px; font-weight: 700;
}
.cas-lg-hit-ok { color: var(--tba-out-h); white-space: nowrap; }
.cas-lg-hit-no { color: #F87171; }
.cas-lg-c-conf {
  width: 120px; flex: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
/* Hinweis-Spalte: traegt die Remis-Pille. Sie ist der Grund fuer den Umbau vom
   29.08.2026 — in der Sidebar-Variante war fuer sie kein Platz. Deshalb ist sie
   auch die LETZTE Spalte, die beim Verkleinern entfallen darf. */
.cas-lg-c-hint {
  width: 112px; flex: none; padding-left: 8px;
  display: flex; align-items: center;
}
/* Remis-Pille. Die Regel dahinter steht in Core.Services.DrawTendency und wird hier
   NICHT nachgebaut — dieselbe Schwelle faerbt auch das D-Segment im Tendenzbalken. */
.cas-lg-remis {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px; border-radius: 999px; white-space: nowrap;
  background: rgba(127,119,221,0.16);
  border: 1px solid rgba(127,119,221,0.45);
  color: var(--tba-purple-light);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  cursor: help;
}
.cas-lg-remis-gl { font-size: 11px; line-height: 1; }
/* Legende unter der Liste. Sie erklaert die SPALTE, nicht die Zeile, und steht
   deshalb auch dann da, wenn gerade keine Partie eine Remis-Neigung hat. */
.cas-lg-legend {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(127,119,221,0.08);
  border: 1px solid rgba(127,119,221,0.22);
}
.cas-lg-legend .cas-lg-remis { flex: none; cursor: default; }
.cas-lg-legend-txt {
  font-size: 11.5px; line-height: 1.5;
  color: rgba(255,255,255,0.62);
  text-wrap: pretty;
}
.cas-lg-c-more { width: 22px; flex: none; display: flex; justify-content: flex-end; }
.cas-lg-chev {
  font-size: 12px; line-height: 1; color: rgba(255,255,255,0.35);
  transition: transform .15s, color .15s;
}
.cas-lg-item:hover .cas-lg-chev { color: rgba(255,255,255,0.75); }
.cas-lg-chev.cas-on { transform: rotate(180deg); color: var(--tba-purple-light); }

.cas-lg-date {
  font-size: 10px; font-weight: 600; line-height: 1.2;
  color: rgba(255,255,255,0.35); white-space: nowrap;
}
.cas-lg-clock {
  font-size: 12px; font-weight: 700; line-height: 1.2;
  color: rgba(255,255,255,0.5);
}
/* Balkenspur in der Spalte „Tendenz". Segmente tragen ihre Breite als flex-Wert —
   der einzige legitime Inline-Style hier. */
.cas-lg-tend {
  flex: 1; min-width: 0;
  display: flex; gap: 2px; align-items: center;
  height: 6px; border-radius: 3px;
}
.cas-lg-seg { height: 6px; border-radius: 3px; min-width: 0; }
.cas-lg-seg-h { background: var(--tba-out-h); }
.cas-lg-seg-d { background: var(--tba-out-d); }
.cas-lg-seg-a { background: var(--tba-out-a); }
.cas-lg-seg-sub { background: var(--tba-surf-3); }
/* Gesperrt: leere Spur ohne Segmente — identisch zu .seo-tend-track-empty. */
.cas-lg-tend-empty { background: var(--tba-surf-2); }
/* Prozentwert des führenden Ausgangs — gleiche Rolle und Optik wie .seo-tend-pct. */
.cas-lg-tend-pct {
  width: 34px; flex: none; text-align: right;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.62);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 🗑 .cas-lg-vs (der Gedankenstrich zwischen den Vereinsnamen) ist am 01.09.2026 tot
   geworden: Zwischen den Namen steht jetzt der Ergebnis-Badge, kein Trennzeichen mehr.
   Regel entfernt statt stehengelassen — eine Klasse ohne Abnehmer ist eine Falle fuer
   den naechsten, der sie fuer benutzt haelt. */
/* Die Größe MUSS am Stern selbst gesetzt werden, nicht an `.cas-stars`: weiter unten
   steht `.cas-star { font-size: 20px }` für die große Karte, und die Regel am Kind
   schlägt jede Vererbung vom Container. Mit 20px sprengten fünf Sterne (≈108px) die
   Spalte und schoben sich über das Chevron. */
.cas-lg-c-conf .cas-stars { gap: 1.5px; line-height: 1; }
.cas-lg-c-conf .cas-star { font-size: 12px; line-height: 1; }
.cas-lg-conf {
  font-size: 10px; font-weight: 700; line-height: 1.2;
  color: rgba(255,255,255,0.5); white-space: nowrap;
}
.cas-lg-conf-hi  { color: var(--tba-gold); }
.cas-lg-conf-mid { color: var(--tba-purple-light); }
.cas-lg-lock { font-size: 14px; line-height: 1; color: var(--tba-gold); }

/* Genau EIN Sperr-Hinweis unter der Liste — dasselbe Muster wie .seo-gate auf der
   öffentlichen Seite. Vorher trug jede gesperrte Zeile ihren eigenen Gold-CTA; in
   einer Spaltenliste ergäbe das eine Wand aus Wiederholungen. */
.cas-lg-gate {
  margin-top: 4px; padding: 13px 16px; border-radius: 12px;
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.26);
}
.cas-lg-gate-title { font-size: 13px; font-weight: 700; color: var(--tba-white); }
.cas-lg-gate-text {
  margin: 5px 0 0; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.62);
}
.cas-lg-gate-text a { color: var(--tba-gold); font-weight: 600; text-decoration: none; }
.cas-lg-gate-text a:hover { text-decoration: underline; }
/* Aufgeklappte Detailkarte unter der Zeile — CasualGameCard bleibt unverändert. */
.cas-lg-open { padding-top: 12px; }
.cas-lg-empty {
  text-align: center; padding: 40px 12px;
  color: rgba(255,255,255,0.5); font-size: 13px; font-weight: 500;
}

/* Unter ~900 px zuerst das Sicherheits-Label opfern, dann die Anpfiff-Spalte
   schmaler — die Hinweis-Spalte bleibt am laengsten stehen, sie war der Grund
   fuer den Umbau. */
@media (max-width: 899px) {
  .cas-lg-c-conf .cas-lg-conf { display: none; }
  .cas-lg-c-conf { width: 92px; }
  .cas-lg-c-time { width: 76px; }
  .cas-lg-c-tend { width: 150px; }
}
@media (max-width: 767px) {
  .cas-lg-tabs { padding: 10px; gap: 6px; }
  .cas-lg-tabs-lbl { display: none; }
  .cas-lg-detail { padding: 16px 14px 18px; }
  /* Erst hier faellt die Hinweis-Spalte weg. Der Erklaertext bleibt trotzdem
     stehen: die Legende unter der Liste ist nicht an die Spalte gebunden. */
  .cas-lg-c-hint { display: none; }
  /* Die Badges bleiben rechtsbuendig — in derselben Zeile, solange sie passen, sonst
     rechtsbuendig in der naechsten. Drei Zutaten, die nur zusammen funktionieren:

     `flex-wrap` fehlte bis 31.08.2026 ganz. Deshalb blieb alles in EINER Zeile, die
     Pills nahmen mit ihrem `flex-shrink:0` die volle Breite (sie trugen hier frueher
     zusaetzlich `width:100%`), und „Treffer 62 %" lag sichtbar ueber dem „A" von
     „Serie A".

     `margin-left:auto` aus der Basisregel bleibt unangetastet — es haelt die Pills auch
     dann am rechten Rand, wenn sie in einer eigenen Zeile stehen.

     Die Untergrenze am Titel ist der eigentliche Schalter: ohne sie schrumpft
     `.cas-lg-head-txt` dank `min-width:0` bis fast auf null, die Pills braechen NIE um
     und wuerden den Ligennamen wieder zerdruecken. Mit ihr weichen sie aus, sobald der
     Name sonst unlesbar wuerde. 110px traegt „Serie A", „La Liga", „Ligue 1"; laengere
     Namen brechen mehrzeilig um, was hier richtig ist. */
  .cas-lg-head { flex-wrap: wrap; }
  /* ⚠ Nachtrag 01.09.2026: `margin-left: auto` aus der Basisregel wird hier
     AUFGEHOBEN. Die Absicht darueber — Badges rechtsbuendig, notfalls in der naechsten
     Zeile — geht auf, solange sie in dieselbe Zeile passen. Brechen sie um, stehen sie
     rechtsbuendig unter dem Liga-Namen und haben optisch keinen Bezug mehr zu ihm; im
     Feld las sich das als zwei zusammenhanglose Gruppen. Beginnen sie in der neuen
     Zeile links, stehen sie unter dem Namen, zu dem sie gehoeren. */
  .cas-lg-pills { margin-left: 0; }
  .cas-lg-head-txt { min-width: 110px; }
  /* ── Spaltenliste auf dem Handy: vier Zeilen, alles linksbündig ──────────────
     Aus der Tabellenzeile werden vier Zeilen mit klarer Lesefolge:

       Anpfiff                                    Sicherheit (rechts)
       Wolfsberger AC – Lask Linz                 (ganze Breite)
       [Tendenzbalken ........................]        55 %
       PROGNOSE 1:2                                        ▾

     ⚠ Historie, damit die Werte nicht rückgängig gemacht werden: Bis 01.09.2026
     trugen Tendenz und Prognose ein `margin-left: 88px` — gedacht als Einrückung
     unter eine 88 px breite Anpfiff-Spalte. Auf 360 px blieb davon ein Balken übrig,
     der rechts in der Zeile klebte, mit einem Viertel der Breite Leerraum davor; die
     Prognose stand ebenso eingerückt. Beides ist entfallen, alles beginnt links.

     ⚠ Und der Balken ist nicht mehr auf 260 px gedeckelt (`flex: 0 1 260px`), sondern
     nimmt die Zeile: Er darf die volle Breite brauchen, nur der Prozentwert muss in
     derselben Zeile daneben Platz finden — die 34 px von `.cas-lg-tend-pct`. Die
     Spaltenköpfe entfallen, deshalb tragen Prognose und Endstand ein Inline-Label. */
  .cas-lg-listhead { display: none; }
  .cas-lg-item { flex-wrap: wrap; row-gap: 8px; padding: 11px 8px; }

  /* ⚠ Die Reihenfolge steht als `order` und nicht als DOM-Folge. Das Markup ist für die
     Tabelle gebaut (Anpfiff · Partie · Tendenz · Prognose · Endstand · Treffer · Hinweis ·
     Sicherheit · Chevron); auf dem Handy soll die Sicherheit nach oben zur Anpfiffzeit und
     nicht unten neben der Prognose stehen. Ohne `order` hinge die Position allein daran,
     wo ein Element im Markup steht — und das darf sich nicht ändern, nur weil eine
     Ansicht anders lesen soll. */
  .cas-lg-c-time  { order: 1; }
  .cas-lg-c-conf  { order: 2; }
  .cas-lg-c-match { order: 3; }
  .cas-lg-c-tend  { order: 4; }
  .cas-lg-c-score { order: 6; }
  .cas-lg-c-hit   { order: 7; }
  .cas-lg-c-more  { order: 8; }

  /* Anpfiff einzeilig und linksbündig. In der Tabelle stehen Datum und Uhrzeit
     untereinander, weil die Spalte nur 96 px breit ist — hier hat die Zeile Platz, und
     „Di 01.09. 17:30" liest sich in einem Zug. */
  .cas-lg-c-time {
    width: auto; flex: 0 0 auto;
    flex-direction: row; align-items: baseline; gap: 7px;
    text-align: left;
  }

  /* Die Paarung bekommt die ganze Zeile und steht mittig — sie ist die Aussage der Zeile.
     15 px/700 statt 13,5: dieselbe Rolle wie der Karten-Titel, keine neue Größe. */
  .cas-lg-c-match {
    flex: 1 1 100%; white-space: normal;
    text-align: center; font-size: 15px;
  }
  /* Der Ergebnis-Badge waechst auf dem Handy mit: Die Paarung ist hier 15 px statt 13,5,
     ein Badge auf Tabellengroesse saehe daneben verloren aus. Bauform und Toenung bleiben. */
  .cas-lg-m-score { font-size: 15px; padding: 3px 10px; }
  /* Bei sehr langen Paarungen duerfen die Namen umbrechen statt zu kuerzen — auf dem
     Handy ist die Zeile das einzige, was die Partie benennt. Der Badge bleibt dabei
     mittig zwischen ihnen. */
  .cas-lg-m-home, .cas-lg-m-away { white-space: normal; }
  .cas-lg-c-tend { width: auto; flex: 1 1 100%; margin-left: 0; gap: 10px; }
  .cas-lg-tend, .cas-lg-seg { height: 4px; border-radius: 2px; }
  .cas-lg-tend { flex: 1 1 auto; }
  .cas-lg-c-conf, .cas-lg-c-score, .cas-lg-c-hit { width: auto; text-align: left; }
  /* ⚠ Die Prognose-Spalte gibt es seit 01.09.2026 nicht mehr — das erwartete Ergebnis
     sitzt als Badge zwischen den Vereinsnamen, wie im Kopf der ausgeklappten Karte.
     Damit entfaellt hier auch das frühere Inline-Label „PROGNOSE": Ein Badge zwischen
     zwei Mannschaften erklaert sich, eine Zahl am Zeilenende tat das nicht. */
  .cas-lg-c-score::before {
    content: "Endstand ";
    font-size: 9.5px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--tba-purple-light);
  }
  /* Die Sterne stehen jetzt in der OBERSTEN Zeile rechts, auf einer Linie mit dem
     Anpfiff — `margin-left: auto` schiebt sie dorthin. In der Tabelle standen sie weiter
     unten; auf dem Handy gehoert die Sicherheit neben die Zeit, weil beides zusammen
     beantwortet „wann und wie belastbar". */
  .cas-lg-c-conf { flex-direction: row; align-items: baseline; gap: 8px; margin-left: auto; }
  /* Der Chevron schließt die letzte Zeile rechts ab — er ist das einzige Zeichen
     dafür, dass sich die Zeile aufklappen lässt. */
  .cas-lg-c-more { margin-left: auto; }
}

/* ── Kopfbereich und Filterleiste auf dem Handy (01.09.2026) ───────────────────
   Zwei Befunde aus demselben Muster: Ein `justify-content: space-between` bzw. ein
   Spacer schiebt ein Element nach rechts, das dort auf schmalen Geraeten allein
   steht und den Bezug zu allem anderen verliert. */
@media (max-width: 600px) {
  /* Der Pill „Heute aktuell" stand neben dem dreizeiligen Untertitel auf halber
     Hoehe — er schwebte, weil `align-items: flex-end` ihn an die Unterkante des
     Textblocks band. Jetzt bricht der Kopf um: Titel und Untertitel nehmen die
     volle Breite, der Pill steht darunter am rechten Rand. */
  .cas-header { flex-wrap: wrap; align-items: flex-start; }
  .cas-header > :first-child { flex: 1 1 100%; }
  .cas-head-actions, .cas-header .nvb-update-pill { margin-left: auto; }

  /* „Meine Filter" wurde vom Spacer an den rechten Rand geschoben und landete beim
     Umbruch allein in einer Zeile. Ohne Spacer reihen sich alle Filter linksbuendig
     aneinander — dieselbe Kante wie die Zeitraum-Pillen darueber.
     ⚠ Nur ausblenden, nicht entfernen: Auf dem Desktop traegt der Spacer die
     Trennung zwischen Zeitraum-Wahl links und den Schaltern rechts. */
  .cas-filter-spacer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cas-lg-tab, .cas-lg-item, .cas-lg-chev { transition: none; }
}

.cas-league-flag {
  width: 30px; height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(111,101,216,0.35);
  flex-shrink: 0;
}
.cas-league-flag img { width: 100%; height: 100%; object-fit: cover; }
/* Internationale Wettbewerbe (keine Länderflagge) → Weltkugel als Badge. */
.cas-league-globe { font-size: 18px; line-height: 1; }
/* Rückblick/Spieltag-Browser: Karten behalten ihre bisherige Lesebreite, obwohl
   .cas-page für das Liga-Panel auf 960px verbreitert wurde. */
/* 🗑 Seit 2026-08-21 von keiner View mehr referenziert: der Rückblick zeigte hier
   je Partie eine dauerhaft offene CasualGameCard, jetzt die Spaltenliste
   (CasualMatchList). Nicht gelöscht, solange die Kartenbreite nicht anderweitig
   geprüft ist. */
.cas-league-body { padding-top: 12px; max-width: 720px; margin: 0 auto; }

/* Spiel-Karte (v2 Handoff 12: stärker abgesetzt — kräftigere Border + Schatten) */
.cas-card {
  background: var(--tba-surf-1);
  border: 1px solid rgba(111,101,216,0.32);
  border-radius: 16px;
  margin-bottom: 16px;
  padding: 20px 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  transition: border-color .15s, background .15s;
}
.cas-card:hover { border-color: rgba(111,101,216,0.55); background: var(--tba-surf-2); }

.cas-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cas-meta-time { font-size: 12px; color: rgba(255,255,255,0.55); }
/* Herkunftszeile am Kartenfuß: wann die Prognose entstand. Bewusst leise — sie belegt
   etwas, sie wirbt nicht. */
.cas-stamp {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11.5px; color: rgba(255,255,255,0.42);
  font-variant-numeric: tabular-nums;
}
.cas-meta-locked {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--tba-gold);
}

/* Ergebnis-Hero */
.cas-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.cas-hero-team { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.cas-badge {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(111,101,216,0.16);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--tba-white);
}
.cas-team-name { font-size: 13px; font-weight: 600; color: var(--tba-white); }
.cas-score {
  font-size: 46px; font-weight: 700; color: var(--tba-white);
  font-variant-numeric: tabular-nums; letter-spacing: 1px; line-height: 1;
}
.cas-score-lock { color: var(--tba-purple-light); display: flex; align-items: center; justify-content: center; }

/* Gesperrtes Ergebnis: geblurter Platzhalter-Score + Schloss-Overlay (DTO: kein echter Wert im HTML).
   Freischalt-Hinweis (Gold) steht direkt unter dem Schloss — eine geschlossene Einheit im Hero. */
.cas-score-locked { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cas-score-locked-vis { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.cas-score-blur { filter: blur(9px); opacity: 0.45; user-select: none; }
.cas-score-locked-ico { position: absolute; font-size: 22px; line-height: 1; }
.cas-score-locked-cta { font-size: 11px; font-weight: 600; color: var(--tba-gold); text-decoration: none; white-space: nowrap; }
.cas-score-locked-cta:hover { text-decoration: underline; }

/* Modell-Sicherheit-Kachel */
.cas-conf {
  display: flex; align-items: center; gap: 18px;
  padding: 15px 18px; border-radius: 12px; margin-bottom: 16px;
  border: 1px solid rgba(111,101,216,0.22);
  background: rgba(111,101,216,0.07);
}
.cas-conf-hi  { background: rgba(251,191,36,0.09); border-color: rgba(251,191,36,0.30); }
.cas-conf-mid { background: rgba(111,101,216,0.12); border-color: rgba(111,101,216,0.32); }
.cas-conf-left { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cas-conf-stars { display: flex; gap: 2px; }
.cas-star { font-size: 20px; line-height: 1; }
.cas-star-on  { color: var(--tba-gold); }
.cas-star-off { color: rgba(255,255,255,0.18); }
.cas-conf-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--tba-purple-light);
}
.cas-conf-div { width: 1px; height: 44px; background: rgba(111,101,216,0.28); }
.cas-conf-right { display: flex; flex-direction: column; gap: 3px; }
.cas-conf-label { font-size: 16px; font-weight: 700; color: var(--tba-white); }
.cas-conf-text  { font-size: 12.5px; color: rgba(255,255,255,0.62); line-height: 1.45; }

/* Micro-Label (Sektions-Überschrift in der Karte) */
/* 13px statt 10px: die Sektions-Überschrift war kleiner als ihr eigener Fließtext
   (.cas-prose 13.5px / .cas-inf-text 13px) und trat dadurch zu schwach hervor. */
.cas-microlbl {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--tba-purple-light); margin-bottom: 8px;
}
/* Kopfzeile „Wahrscheinlichster Ausgang" (Label links) + Tendenz prominent rechts. */
.cas-outcome-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cas-outcome-head .cas-microlbl { margin-bottom: 0; }
.cas-tendency { font-size: 15.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.15; }

/* Redaktionelle Ausgang-Aussage: Team **betont**, Verb **dezent** (nicht alles fett) +
   kleiner Ausgangsfarb-Punkt als einziger Farbakzent. Löst das farbige Tendenz-Wort ab
   (Farbe/Prozente trägt der Balken). Punktfarbe inline via --tba-out-h/-d/-a. */
.cas-tend-line { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.cas-tend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cas-tend-team { font-weight: 700; color: var(--tba-white); }
.cas-tend-verb { font-weight: 400; color: rgba(255,255,255,0.55); }

/* Tendenz-Balken */
.cas-tend { margin-bottom: 16px; }
.cas-tend-bar { display: flex; height: 34px; border-radius: 8px; gap: 3px; overflow: hidden; }
.cas-tend-seg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; padding: 0 4px;
}
.cas-tend-seg-rec { background: #34D399; color: #1c1847; }
.cas-tend-seg-mid { background: rgba(111,101,216,0.55); color: #fff; }
.cas-tend-seg-low { background: rgba(111,101,216,0.22); color: rgba(255,255,255,0.85); }
.cas-tend-seg-lbl { font-size: 9px; text-transform: uppercase; opacity: 0.85; line-height: 1.2; }
.cas-tend-seg-pct { font-size: 13px; font-weight: 700; line-height: 1.2; }

/* Gründe */
.cas-reasons { margin-bottom: 16px; }
.cas-reason-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(111,101,216,0.12);
}
.cas-reason-cat {
  display: flex; align-items: center; gap: 6px;
  min-width: 108px; flex-shrink: 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
}
.cas-reason-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.cas-reason-text { font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.45; }
.cas-reason-text strong { color: var(--tba-white); font-weight: 700; }
/* Kategorie-Akzentfarben */
.cas-cat-form     { color: #34D399; }
.cas-cat-injury   { color: var(--tba-gold); }
.cas-cat-strength { color: var(--tba-purple-light); }
.cas-cat-info     { color: #60A5FA; }
.cas-cat-neutral  { color: rgba(255,255,255,0.5); }

/* Aufklappen „So denkt das Modell" */
.cas-expand-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--tba-surf-2);
  border: 1px solid rgba(111,101,216,0.2);
  border-radius: 10px;
  padding: 11px;
  font-size: 13px; font-weight: 600; color: var(--tba-purple-light);
  cursor: pointer; transition: background .15s;
}
.cas-expand-btn:hover { background: rgba(111,101,216,0.10); }
.cas-expand-chev { transition: transform .2s; }
.cas-expand-chev.cas-open { transform: rotate(180deg); }

.cas-detail { padding-top: 16px; margin-top: 4px; border-top: 1px solid rgba(111,101,216,0.15); }
.cas-driver-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.cas-driver-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(111,101,216,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--tba-purple-light); flex-shrink: 0;
}
.cas-driver-text { font-size: 13px; color: rgba(255,255,255,0.82); }
.cas-hit-tile {
  margin-top: 12px;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.25);
  border-radius: 12px;
  padding: 14px 16px;
}
.cas-hit-val { font-size: 32px; font-weight: 700; color: #34D399; line-height: 1; }
.cas-hit-text { font-size: 12.5px; color: rgba(255,255,255,0.7); margin-top: 6px; line-height: 1.45; }
.cas-hit-text b { color: var(--tba-white); font-weight: 700; }

/* Gesperrtes Spiel (Free-Teaser) */
.cas-lock-cta {
  width: 100%;
  background: rgba(111,101,216,0.12);
  border: 1px dashed rgba(111,101,216,0.4);
  border-radius: 10px;
  padding: 12px;
  font-size: 12.5px; font-weight: 600; color: var(--tba-purple-light);
  text-align: center; cursor: pointer; transition: background .15s;
  text-decoration: none; display: block;
}
.cas-lock-cta:hover { background: rgba(111,101,216,0.2); }

/* ────────────────────────────────────────────────────────────
   CASUAL v2 (Handoff 12) — KPI-Leiste, Filterleiste, durchgängiger
   Outcome-Balken, Sicherheit als Lesart-Zeile, Einflussfaktoren mit
   Einfluss-%, Verlässlichkeits-Aufklapp. Ersetzt Sicherheit-Kachel
   (.cas-conf*) + Tendenz-Segmente (.cas-tend*) + Kategorie-Gründe.
   ──────────────────────────────────────────────────────────── */

/* Header-Aktionen (FREE-Pill + Freischalten) — Kompromiss: im Seiten-Header,
   da unsere Nav global ist (nicht wie im Handoff in der Nav selbst). */
.cas-head-actions { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cas-free-pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--tba-gold);
  background: rgba(251,191,36,0.14);
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 999px; padding: 4px 12px;
}

/* KPI-Leiste (4 Werte, alle Ligen) */
.cas-kpis {
  display: flex; align-items: stretch; overflow: hidden;
  background: var(--tba-surf-1);
  border: 1px solid rgba(111,101,216,0.20);
  border-radius: 14px;
  margin-bottom: 20px;
}
.cas-kpi { flex: 1; text-align: center; padding: 15px 10px; border-left: 1px solid rgba(111,101,216,0.2); }
.cas-kpi:first-child { border-left: none; }
.cas-kpi-val { font-size: 23px; font-weight: 700; color: var(--tba-white); line-height: 1; }
.cas-kpi-val.cas-kpi-pos { color: #34D399; }
.cas-kpi-sub {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--tba-purple-light); margin-top: 6px; line-height: 1.3;
}

/* Filterleiste */
.cas-filters { margin-bottom: 20px; }
.cas-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cas-filter-row + .cas-filter-row { margin-top: 10px; }
.cas-filter-spacer { flex: 1; }
.cas-seg {
  display: inline-flex; padding: 4px; border-radius: 999px;
  background: var(--tba-surf-1); border: 1px solid rgba(111,101,216,0.25);
}
.cas-seg-btn {
  border: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; padding: 7px 15px; border-radius: 999px;
  background: transparent; color: var(--tba-purple-light); transition: background .15s, color .15s;
}
.cas-seg-btn.cas-on { background: var(--tba-purple); color: #fff; }
/* Zeitraum-Buttons als eigenständige Pills (gleiches Muster wie .cas-sicher-btn,
   das zuverlässig markiert). Aktiv = Purple-Fill. */
.cas-zeit-group { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.cas-zeit-btn {
  display: inline-flex; align-items: center; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  background: var(--tba-surf-1); border: 1px solid rgba(111,101,216,0.22); color: rgba(255,255,255,0.7);
  transition: background .15s, border-color .15s, color .15s;
}
.cas-zeit-btn.cas-on { background: var(--tba-purple); border-color: var(--tba-purple); color: #fff; }
.cas-sicher-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  background: var(--tba-surf-1); border: 1px solid rgba(111,101,216,0.22); color: rgba(255,255,255,0.7);
  transition: background .15s, border-color .15s, color .15s;
}
.cas-sicher-btn.cas-on { background: rgba(251,191,36,0.14); border-color: rgba(251,191,36,0.45); color: var(--tba-gold); }
.cas-sicher-btn > span { font-size: 11px; }
.cas-chip {
  border-radius: 999px; padding: 6px 13px; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600;
  background: var(--tba-surf-1); border: 1px solid rgba(111,101,216,0.18); color: rgba(255,255,255,0.7);
  transition: background .15s, border-color .15s, color .15s;
}
.cas-chip.cas-on { background: rgba(111,101,216,0.22); border-color: rgba(111,101,216,0.5); color: #fff; }
.cas-reset {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit;
  border: none; background: transparent; color: rgba(255,255,255,0.5);
  border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 600; transition: color .15s;
}
.cas-reset:hover { color: #fff; }
.cas-filter-empty { text-align: center; padding: 44px 20px; }
.cas-filter-empty-text { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 14px; }
.cas-filter-empty-btn {
  border: 1px solid rgba(111,101,216,0.35); background: rgba(111,101,216,0.12); color: var(--tba-purple-light);
  border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* Verteilungsbalken: nur das Lead-Segment farbig (H/D/A), die anderen zwei dezent. */
/* H/D/A-Balken als „Podium": alle Segmente an der Unterkante ausgerichtet, das Lead-Segment
   höher als die beiden dezenten (visuelle Hierarchie über Höhe, nicht Rahmen/Shadow). */
.cas-bar { display: flex; align-items: flex-end; gap: 4px; height: 48px; margin-bottom: 11px; }
.cas-bar-seg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; line-height: 1.15; color: #fff; height: 28px; border-radius: 6px; overflow: hidden;
}
.cas-bar-h { background: var(--tba-out-h); }
.cas-bar-d { background: var(--tba-out-d); }
.cas-bar-a { background: var(--tba-out-a); }
.cas-bar-sub { background: var(--tba-surf-3); color: rgba(255,255,255,0.55); }
.cas-bar-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.85; }
.cas-bar-pct { font-size: 13px; font-weight: 700; }
/* Lead-Segment: höher (48px) und trägt den vollen Ausgangs-Namen direkt im Balken. */
.cas-bar-tall { height: 48px; }
.cas-bar-tall .cas-bar-lbl { font-size: 13px; text-transform: none; letter-spacing: -0.1px; font-weight: 700; opacity: 1; white-space: nowrap; }

/* Remis-Neigung (24.08.2026): Hinweiszeile unter dem H/D/A-Balken.
   Das D-Segment traegt dabei seine Ausgangsfarbe (.cas-bar-d), bleibt aber FLACH —
   hoch ist allein das Lead-Segment. Damit konkurriert der Hinweis nicht mit der
   Tendenz, sondern ergaenzt sie. Werte uebernommen: font-size von .cas-conf-desc,
   font-weight von .cas-inf-head-note, Farbe = bestehender Token --tba-out-d,
   margin-bottom = margin-bottom von .cas-bar. Keine neue Farbe. */
.cas-bar-draw-note {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tba-out-d);
  margin-top: -6px;
  margin-bottom: 11px;
}

/* ── Voraussichtliche Aufstellung (24.08.2026) ─────────────────────────────────
   Reihenfolge in der ausgeklappten Karte: Netzdiagramm, Kennzahlen, Elf.
   Die Kennzahlen nutzen bewusst .cas-inf-row/.cas-inf-text — dieselbe Struktur
   wie die Einflussfaktoren, also kein neues Muster. Neu ist nur die Spielerliste
   und das Diagramm. Keine neue Farbe: alles aus --tba-out-h/-a, --tba-purple-light
   und den bereits verwendeten Weiss-Abstufungen. */
.cas-xi        { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.cas-xi-form   { font-size: 11.5px; font-weight: 600; color: var(--tba-purple-light); margin-bottom: 6px; }
.cas-xi-row    { display: flex; align-items: center; gap: 8px; padding: 5px 0;
                 border-top: 1px solid rgba(111,101,216,0.12); }
.cas-xi-pos    { width: 20px; flex: none; font-size: 10px; font-weight: 700;
                 text-align: center; color: rgba(255,255,255,0.45); }
.cas-xi-name   { flex: 1; min-width: 0; font-size: 12.5px; color: rgba(255,255,255,0.85);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cas-xi-lvl    { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.42); }
.cas-xi-basis  { font-size: 10px; color: rgba(255,255,255,0.42); margin-top: 8px; }

/* Netzdiagramm: sechs Achsen, beide Mannschaften uebereinander. Flaeche mit
   niedriger Deckkraft statt Verlauf — der Design-Guide schliesst Gradient-Fills
   ausdruecklich aus. Farben = die Ausgangsfarben Heim/Auswaerts, damit die
   Zuordnung ohne Legende lesbar bleibt. */
.cas-xi-radar  { display: block; width: 100%; max-width: 340px; margin: 4px auto 2px; }
.cas-xi-legend { display: flex; justify-content: center; gap: 16px; font-size: 11px;
                 color: rgba(255,255,255,0.55); margin-bottom: 4px; }
.cas-xi-dot    { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

@media (max-width: 560px) { .cas-xi { grid-template-columns: 1fr; } }

/* Sicherheit als einzeilige Lesart unter dem Balken */
.cas-stars { display: inline-flex; gap: 2px; line-height: 1; font-size: 15px; }
.cas-conf-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 20px; }
.cas-conf-read { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
.cas-conf-name { font-size: 13px; font-weight: 700; color: var(--tba-white); }
.cas-info {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid rgba(175,169,236,0.5); color: var(--tba-purple-light);
  font-size: 9px; font-weight: 700; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center; cursor: help; line-height: 1;
}
.cas-conf-desc { font-size: 11.5px; color: rgba(255,255,255,0.5); line-height: 1.4; }

/* Einflussfaktoren */
/* margin-top trennt die Sektion vom vorherigen Block (Prosa/Value&Edge). Ohne ihn klebte
   die Überschrift am fremden Text darüber und stand weiter von der eigenen Liste entfernt
   — Proximität invertiert. 18px = gleicher Sektions-Abstand wie „Das Wichtigste in Kürze". */
.cas-inf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; margin-bottom: 6px; }
.cas-inf-head-note { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.42); white-space: nowrap; }
.cas-inf-row { display: flex; align-items: center; gap: 16px; padding: 11px 0; border-top: 1px solid rgba(111,101,216,0.12); }
.cas-inf-text { flex: 1; min-width: 0; font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.4; }
.cas-inf-text strong { color: var(--tba-white); font-weight: 700; }
.cas-inf-meta { width: 96px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.cas-inf-pct { font-size: 11.5px; font-weight: 700; color: var(--tba-purple-light); font-variant-numeric: tabular-nums; }
.cas-inf-track { display: block; width: 100%; height: 5px; border-radius: 3px; background: rgba(111,101,216,0.16); overflow: hidden; }
.cas-inf-fill { display: block; height: 100%; background: var(--tba-purple); border-radius: 3px; }
.cas-inf-tail {
  display: flex; align-items: center; gap: 9px; padding: 11px 0 0;
  border-top: 1px solid rgba(111,101,216,0.12); font-size: 11.5px; color: rgba(255,255,255,0.45);
}
.cas-inf-tail-dots { font-size: 14px; letter-spacing: 1px; color: rgba(255,255,255,0.35); }

/* Reason Engine Stufe 3 — warme Prosa-Zusammenfassung der Gründe (Akzent-Block).
   Hervorhebung über Akzent-Rand links (Design-Prinzip), kein Shadow/Gradient. */
.cas-prose {
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--tba-purple);
  font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.82);
  /* Abstand zur Signal-Liste darunter. Ohne ihn klebt die letzte Prosa-Zeile an der
     ersten Signalzeile — die trennt nur eine 1-px-Linie, und bei line-height 1.6
     reicht der Zeilendurchschuss allein nicht als Zaesur. 14 px = derselbe Wert wie
     der gap innerhalb einer Signalzeile. */
  margin-bottom: 14px;
}

/* Verlässlichkeits-Aufklapp */
.cas-rel { margin-top: 16px; padding-top: 18px; border-top: 1px solid rgba(111,101,216,0.15); }
.cas-rel-hit {
  display: flex; align-items: center; gap: 16px;
  background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.25);
  border-radius: 12px; padding: 15px 18px; margin-bottom: 18px;
}
.cas-rel-hit-box { text-align: center; flex-shrink: 0; }
.cas-rel-hit-num { font-size: 32px; font-weight: 700; color: #34D399; line-height: 1; }
.cas-rel-hit-rand { font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.cas-rel-hit-div { width: 1px; height: 46px; background: rgba(52,211,153,0.25); flex-shrink: 0; }
.cas-rel-hit-text { font-size: 12.5px; color: rgba(255,255,255,0.7); line-height: 1.5; }
.cas-rel-hit-text strong { color: var(--tba-white); font-weight: 600; }
.cas-rel-calib { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.cas-rel-crow {
  display: flex; align-items: center; gap: 12px;
  background: var(--tba-surf-sunk); border: 1px solid rgba(111,101,216,0.14);
  border-radius: 9px; padding: 8px 12px;
}
.cas-rel-crow.cas-on { background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.4); }
.cas-rel-cstars { display: inline-flex; gap: 1px; font-size: 11px; flex-shrink: 0; width: 74px; line-height: 1; }
.cas-rel-cbar { flex: 1; height: 6px; border-radius: 3px; background: rgba(111,101,216,0.16); overflow: hidden; min-width: 0; }
.cas-rel-cfill { display: block; height: 100%; border-radius: 3px; background: rgba(111,101,216,0.55); }
.cas-rel-crow.cas-on .cas-rel-cfill { background: #34D399; }
.cas-rel-cpct { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; width: 42px; text-align: right; flex-shrink: 0; }
.cas-rel-crow.cas-on .cas-rel-cpct { color: #34D399; }
.cas-rel-ctag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: #34D399; width: 74px; flex-shrink: 0; }
.cas-rel-rec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.cas-rel-rec-lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tba-purple-light);
}
.cas-rel-rec-lbl .cas-stars { font-size: 16px; }
.cas-rel-rec-count { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.55); }
.cas-rel-rec-count strong { color: #34D399; font-weight: 700; }
.cas-rel-rec { display: flex; gap: 5px; }
.cas-rel-cell {
  flex: 1; height: 22px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.cas-rel-cell-hit { background: #34D399; color: #0f3d2e; }
.cas-rel-cell-miss { background: rgba(248,113,113,0.55); color: #fff; }
.cas-rel-empty { font-size: 12px; color: rgba(255,255,255,0.45); }

@media (max-width: 600px) {
  .cas-conf { flex-wrap: wrap; gap: 12px; }
  .cas-conf-div { display: none; }
  .cas-reason-row { flex-direction: column; gap: 4px; }
  .cas-kpi-val { font-size: 20px; }
  .cas-kpi-sub { font-size: 8.5px; }
  .cas-inf-row { gap: 10px; }
  .cas-inf-meta { width: 70px; }
}

/* ============================================================
   PRO v2 (Handoff 11) — Verwertungs-Schicht auf der Casual-Basis.
   Value-&-Edge-Sektion (pro-*), Value-Badge, CSV-Button, neg-KPI.
   Nur für Pro-Abo gerendert; nutzt die --tba-*-Tokens.
   ============================================================ */
.cas-kpi-val.cas-kpi-neg { color: #F87171; }

/* Statistiken als Admin-Tab: die Seite ist komplett Dark-Mode (helle Schrift),
   das Admin-Dashboard aber eine helle .tba-mud-page-Insel. Dieser Wrapper stellt
   lokal den dunklen Seitenhintergrund wieder her, damit alles lesbar bleibt. */
.adm-stat-embed {
  background: var(--tba-dark);
  color: rgba(255,255,255,0.85);
  border-radius: 16px;
  padding: 24px;
  margin-top: 8px;
}
/* Der Admin-Root ist `.tba-mud-page` (helle Insel) und kippt geteilte Komponenten
   wie die CLV-Tabelle auf DUNKLE Schrift — auf unserem dunklen Wrapper unlesbar.
   Hier die Dark-Mode-Farben (helle Schrift) wieder herstellen. Gleiche Spezifität
   wie `.tba-mud-page .clv-*`, gewinnt durch spätere Position in der Datei. */
.adm-stat-embed .clv-tabelle th {
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.05);
  border-bottom-color: rgba(255,255,255,0.08);
}
.adm-stat-embed .clv-tabelle td {
  color: rgba(255,255,255,0.85);
  border-bottom-color: rgba(255,255,255,0.06);
}
.adm-stat-embed .clv-tabelle tr:hover td { background: rgba(111,101,216,0.08); }
.adm-stat-embed .clv-pos { color: #34D399; }
.adm-stat-embed .clv-neg { color: #F87171; }
.adm-stat-embed .clv-col-extrem  { color: #34D399; }
.adm-stat-embed .clv-col-hoch    { color: var(--tba-purple-light); }
.adm-stat-embed .clv-col-gut     { color: rgba(255,255,255,0.55); }
.adm-stat-embed .clv-col-negativ { color: #F87171; }
.adm-stat-embed .clv-col-sep     { color: rgba(255,255,255,0.4); }

/* CSV-Button in der Filterleiste (nur Pro) */
.cas-csv-btn {
  display: inline-flex; align-items: center; text-decoration: none;
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  background: rgba(111,101,216,0.12); border: 1px solid rgba(111,101,216,0.3); color: var(--tba-purple-light);
  transition: background .15s;
}
.cas-csv-btn:hover { background: rgba(111,101,216,0.2); }

/* Value-Badge in der Meta-Zeile der Karte (nur Pro, wenn Spiel Value hat) */
.pro-value-badge {
  font-size: 11px; font-weight: 700; color: #34D399;
  background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.30);
  border-radius: 999px; padding: 3px 10px;
}

/* ── UPGRADE-LOCK (upl-*) — einheitlicher Freischalt-Hinweis überall ──
   Immer: Schloss + welches Abo + Preis/Monat + Button → /account.
   Gold = einheitliche „Freischalten"-Sprache. Bar- + Centered-Variante. */
.upl {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 20px;
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.30);
}
.upl-lock { color: var(--tba-gold); display: inline-flex; flex-shrink: 0; }
.upl-btn {
  flex-shrink: 0; white-space: nowrap; text-decoration: none;
  background: var(--tba-gold); color: var(--tba-dark);
  font-weight: 700; font-size: 12.5px; border: none; border-radius: 8px;
  padding: 8px 16px; cursor: pointer;
}
.upl-btn:hover { filter: brightness(1.06); }

/* Pro-Teaser für Free/Casual: Value & Edge sichtbar aber gesperrt + Upgrade */
.cas-pro-tag {
  font-size: 9px; font-weight: 700; color: var(--tba-gold);
  background: rgba(251,191,36,0.14); border: 1px solid rgba(251,191,36,0.35);
  border-radius: 999px; padding: 1px 6px; margin-left: 6px; vertical-align: middle;
}
.cas-pro-lock { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.cas-pro-lock-preview { display: flex; gap: 8px; padding: 16px; filter: blur(3px); opacity: 0.45; pointer-events: none; }
.cas-pro-lock-chip {
  flex: 1; text-align: center; padding: 12px 8px; border-radius: 8px;
  background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.25);
  font-size: 12px; font-weight: 600; color: #34D399;
}
.cas-pro-lock-cta {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 8px;
  background: rgba(38,33,92,0.55); color: var(--tba-purple-light);
}
.cas-pro-lock-txt { font-size: 12px; color: rgba(255,255,255,0.78); max-width: 260px; line-height: 1.4; }
.cas-pro-lock-btn {
  background: var(--tba-gold); color: var(--tba-dark); font-weight: 700; font-size: 12.5px;
  border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer; text-decoration: none;
}
.cas-pro-lock-btn:hover { filter: brightness(1.06); }

/* Value & Edge (interaktiv) */
.pro-ve { margin-bottom: 20px; }
.pro-ve-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pro-ve-legend { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.42); display: inline-flex; align-items: center; gap: 6px; }
.pro-ve-legend-dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; }
.pro-ve-empty { font-size: 12px; color: rgba(255,255,255,0.45); padding: 6px 0; }

.pro-ve-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pro-ve-cell {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 12px; border-radius: 12px; font-family: inherit;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(111,101,216,0.16);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.pro-ve-value { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.30); cursor: pointer; }
.pro-ve-value:hover { background: rgba(52,211,153,0.12); }
.pro-ve-sel { background: rgba(52,211,153,0.16); border-color: rgba(52,211,153,0.65); box-shadow: 0 0 0 1px rgba(52,211,153,0.55); }
.pro-ve-none { cursor: default; }
.pro-ve-cell-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pro-ve-cell-lbl { font-size: 12px; font-weight: 700; color: var(--tba-white); }
.pro-ve-cell-stars { display: inline-flex; gap: 1px; font-size: 9px; line-height: 1; }
.pro-ve-cell-odds { font-size: 11px; color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; }
.pro-ve-cell-edge { font-size: 17px; font-weight: 700; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }
.pro-ve-cell-edge.pro-ve-edge-pos { color: #34D399; }
.pro-ve-cell-hint { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: rgba(255,255,255,0.4); }

/* Detail des gewählten Value-Ausgangs */
.pro-ve-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(111,101,216,0.15); }
.pro-ve-books { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.pro-ve-book {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-radius: 9px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(111,101,216,0.14);
}
.pro-ve-book-best { background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.35); }
.pro-ve-book-name { font-size: 12.5px; color: rgba(255,255,255,0.8); }
.pro-ve-book-best .pro-ve-book-name { color: var(--tba-gold); font-weight: 700; }
.pro-ve-book-odds { font-size: 13px; font-weight: 700; color: var(--tba-white); font-variant-numeric: tabular-nums; }
.pro-ve-book-best .pro-ve-book-odds { color: var(--tba-gold); }

.pro-ve-move { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pro-ve-move-text { display: flex; flex-direction: column; gap: 3px; }
.pro-ve-move-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--tba-purple-light); }
.pro-ve-move-val { font-size: 13px; font-weight: 600; color: var(--tba-white); font-variant-numeric: tabular-nums; }
.pro-ve-pos { color: #34D399; }
.pro-ve-neg { color: #F87171; }
.pro-ve-spark { flex-shrink: 0; }

.pro-ve-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pro-ve-tile { padding: 12px 14px; border-radius: 12px; }
.pro-ve-tile-gold { background: rgba(251,191,36,0.09); border: 1px solid rgba(251,191,36,0.30); }
.pro-ve-tile-green { background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.25); }
.pro-ve-tile-val { font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pro-ve-tile-gold .pro-ve-tile-val { color: var(--tba-gold); }
.pro-ve-tile-green .pro-ve-tile-val { color: #34D399; }
.pro-ve-tile-sub { font-size: 10.5px; color: rgba(255,255,255,0.6); margin-top: 5px; line-height: 1.35; }

@media (max-width: 600px) {
  .pro-ve-grid { grid-template-columns: 1fr; }
  .pro-ve-tiles { grid-template-columns: 1fr; }
  .pro-ve-move { flex-wrap: wrap; }
}

/* ============================================================
   ACCOUNT / EINSTELLUNGEN (acc-*) — „Mein Konto"
   Dunkle, durchscrollbare Sektionen (Handoff 3). Custom-Controls
   (Toggle/Radio/Chips/Inputs) auf --tba-*-Tokens, ersetzt die alte
   MudBlazor-Tab-Ansicht. Logik (Bankroll/Profil/Telegram/Stripe) bleibt.
   ============================================================ */
.acc-page { max-width: 760px; margin: 0 auto; padding: 8px 0 64px; }
.acc-head { margin-bottom: 1.75rem; }
.acc-title { font-size: 29px; font-weight: 700; color: var(--tba-white); letter-spacing: -0.5px; margin: 0; }
.acc-subtitle { font-size: 13.5px; color: rgba(255,255,255,0.6); margin-top: 4px; }

.acc-section { margin-bottom: 1.75rem; }
.acc-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--tba-purple-light); margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.acc-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(111,101,216,0.2);
  border-radius: 16px;
  padding: 22px 24px;
}
.acc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.acc-divider { border-top: 1px solid rgba(111,101,216,0.15); margin: 18px 0; }

.acc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.acc-row-title { font-size: 14px; font-weight: 600; color: var(--tba-white); }
.acc-row-desc { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 3px; line-height: 1.45; max-width: 90%; }
.acc-text { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.55; }
.acc-subhead { font-size: 13px; font-weight: 600; color: var(--tba-white); margin-bottom: 8px; }
.acc-counter { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.5); margin-left: 6px; }
.acc-eff { font-size: 13px; font-weight: 600; color: #34D399; }

/* Felder */
.acc-field { display: flex; flex-direction: column; gap: 6px; }
.acc-label { font-size: 12px; font-weight: 600; color: var(--tba-purple-light); }
.acc-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(111,101,216,0.25);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--tba-white);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s;
}
.acc-input:focus { outline: none; border-color: rgba(111,101,216,0.6); }
.acc-input:disabled { opacity: 0.4; cursor: not-allowed; }
.acc-help { font-size: 11.5px; color: rgba(255,255,255,0.5); line-height: 1.45; }

/* Toggle */
.acc-toggle {
  width: 46px; height: 26px; border-radius: 999px;
  background: rgba(255,255,255,0.18); border: none; position: relative;
  cursor: pointer; padding: 0; transition: background 0.15s; flex-shrink: 0;
}
.acc-toggle-on { background: #34D399; }
.acc-toggle:disabled { opacity: 0.4; cursor: not-allowed; }
.acc-toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.acc-toggle-on .acc-toggle-knob { left: 23px; }

/* Radio-Option (Karte) */
.acc-radio {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px; border: 1px solid rgba(111,101,216,0.25);
  border-radius: 10px; background: transparent; cursor: pointer;
  text-align: left; width: 100%; margin-bottom: 8px;
  transition: background 0.15s, border-color 0.15s; font-family: inherit;
}
.acc-radio-on { background: rgba(111,101,216,0.14); border-color: rgba(111,101,216,0.5); }
.acc-radio-mark { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(111,101,216,0.5); flex-shrink: 0; margin-top: 1px; position: relative; }
.acc-radio-on .acc-radio-mark { border-color: var(--tba-purple); }
.acc-radio-on .acc-radio-mark::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--tba-purple); }
.acc-radio-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; text-align: left; }
.acc-radio-title { font-size: 13.5px; font-weight: 700; color: var(--tba-white); }
.acc-radio-desc { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 2px; line-height: 1.4; }

/* Segment (Risikoprofil) */
.acc-seg { display: inline-flex; background: rgba(255,255,255,0.05); border: 1px solid rgba(111,101,216,0.25); border-radius: 10px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.acc-seg-btn { border: none; background: transparent; color: var(--tba-purple-light); font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.acc-seg-on { background: var(--tba-purple); color: #fff; }

/* Chips */
.acc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-chip {
  font-size: 12.5px; font-weight: 600; color: var(--tba-purple-light);
  background: rgba(111,101,216,0.10); border: 1px solid rgba(111,101,216,0.28);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s; font-family: inherit;
}
.acc-chip-on { background: rgba(111,101,216,0.28); border-color: rgba(111,101,216,0.6); color: var(--tba-white); }
.acc-chip-link { font-size: 12px; font-weight: 600; color: var(--tba-purple-light); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }

/* Plan-Pill / Status / Badge */
.acc-plan-pill { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 12px; letter-spacing: 0.3px; }
.acc-plan-free   { color: var(--tba-purple-light); background: rgba(111,101,216,0.18); border: 1px solid rgba(111,101,216,0.3); }
.acc-plan-casual { color: var(--tba-purple-light); background: rgba(111,101,216,0.22); border: 1px solid rgba(111,101,216,0.45); }
.acc-plan-pro    { color: var(--tba-gold); background: rgba(251,191,36,0.14); border: 1px solid rgba(251,191,36,0.35); }
.acc-status-on { color: #34D399; background: rgba(52,211,153,0.14); border: 1px solid rgba(52,211,153,0.3); font-size: 10px; font-weight: 700; border-radius: 999px; padding: 2px 9px; letter-spacing: 0.5px; text-transform: uppercase; }
.acc-badge { font-size: 10px; font-weight: 700; color: var(--tba-gold); background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); border-radius: 999px; padding: 2px 9px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Buttons */
.acc-btn { background: var(--tba-purple); color: #fff; border: none; border-radius: 10px; font-size: 13.5px; font-weight: 600; padding: 11px 22px; cursor: pointer; text-decoration: none; display: inline-block; transition: background 0.15s; font-family: inherit; }
.acc-btn:hover { background: var(--tba-purple-mid); }
.acc-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Plan-Übersicht-Tabelle */
.acc-plan-table { width: 100%; border-collapse: collapse; }
.acc-plan-table td { padding: 9px 0; border-bottom: 1px solid rgba(111,101,216,0.1); font-size: 13px; }
.acc-plan-table tr:last-child td { border-bottom: none; }
.acc-plan-table td:first-child { color: rgba(255,255,255,0.6); }
.acc-plan-table td:last-child { color: var(--tba-white); text-align: right; font-weight: 600; }

/* Upgrade-Box — solide gold-getönt (DESIGN_GUIDE §5: kein Gradient auf Karten) */
.acc-upgrade { background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.3); border-radius: 16px; padding: 22px 24px; }
.acc-upgrade-title { font-size: 16px; font-weight: 700; color: var(--tba-white); margin-bottom: 6px; }
.acc-upgrade-desc { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.5; margin-bottom: 16px; }
.acc-upgrade-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.acc-upgrade-btn { background: var(--tba-gold); color: #26215C; font-size: 13.5px; font-weight: 700; border: none; border-radius: 10px; padding: 11px 22px; cursor: pointer; text-decoration: none; display: inline-block; }
.acc-upgrade-btn-outline { background: transparent; color: var(--tba-gold); border: 1.5px solid rgba(251,191,36,0.5); font-size: 13.5px; font-weight: 700; border-radius: 10px; padding: 11px 22px; cursor: pointer; text-decoration: none; display: inline-block; }

/* Erfolg-/Abbruch-Banner */
.acc-banner { border-radius: 12px; padding: 13px 18px; font-size: 13.5px; margin-bottom: 1.25rem; }
.acc-banner-ok   { background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.35); color: rgba(255,255,255,0.85); }
.acc-banner-warn { background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.32); color: rgba(255,255,255,0.85); }

@media (max-width: 600px) {
  .acc-grid-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   MODELLQUALITÄT (mqv-*) — „Wie gut ist unser Modell?"
   User-facing Vertrauens-Sicht (Handoff 4). Überblick (alle) +
   Details-Tiefe (Pro): CLV, Edge, Kalibrierung. Dunkel, ohne MudBlazor.
   ============================================================ */
.mqv-page { max-width: 760px; margin: 0 auto; padding: 8px 0 64px; }
.mqv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.mqv-title { font-size: 28px; font-weight: 700; color: var(--tba-white); letter-spacing: -0.5px; margin: 0; }
.mqv-subtitle { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 4px; }
.mqv-status { font-size: 11px; font-weight: 600; color: var(--tba-purple-light); background: rgba(111,101,216,0.18); border: 1px solid rgba(111,101,216,0.3); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }

.mqv-toggle { display: inline-flex; background: rgba(255,255,255,0.05); border: 1px solid rgba(111,101,216,0.25); border-radius: 10px; padding: 3px; gap: 3px; margin-bottom: 1.5rem; }
.mqv-toggle-btn { border: none; background: transparent; color: var(--tba-purple-light); font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.mqv-toggle-on { background: var(--tba-purple); color: #fff; }

.mqv-kpis { display: flex; background: rgba(255,255,255,0.04); border: 1px solid rgba(111,101,216,0.2); border-radius: 16px; overflow: hidden; margin-bottom: 1.75rem; }
.mqv-kpi { flex: 1; padding: 16px 12px; text-align: center; border-left: 1px solid rgba(111,101,216,0.2); }
.mqv-kpi:first-child { border-left: none; }
.mqv-kpi-val { font-size: 38px; font-weight: 800; letter-spacing: -1px; color: var(--tba-white); line-height: 1; }
.mqv-kpi-sub { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--tba-purple-light); margin-top: 6px; }

.mqv-section { margin-bottom: 1.75rem; }
.mqv-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(111,101,216,0.2); border-radius: 16px; padding: 24px; }
.mqv-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tba-purple-light); margin-bottom: 8px; }
.mqv-sec-title { font-size: 16px; font-weight: 700; color: var(--tba-white); margin: 0 0 6px; }
.mqv-text { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.55; }
.mqv-foot { font-size: 11.5px; color: rgba(255,255,255,0.5); margin-top: 12px; line-height: 1.5; }
.mqv-pos { color: #34D399; }
.mqv-neg { color: #F87171; }
.mqv-neutral { color: rgba(255,255,255,0.6); }

.mqv-big { font-size: 38px; font-weight: 700; line-height: 1; }
.mqv-big-green { color: #34D399; }

/* Trefferquote-Balken */
.mqv-bar { position: relative; height: 42px; background: rgba(111,101,216,0.14); border-radius: 8px; overflow: hidden; margin: 14px 0 8px; }
.mqv-bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: #34D399; border-radius: 8px 0 0 8px; display: flex; align-items: center; }
.mqv-bar-fill-lbl { font-size: 12px; font-weight: 700; color: #1c1847; padding-left: 12px; white-space: nowrap; }
.mqv-bar-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tba-gold); z-index: 2; }
.mqv-legend { font-size: 11.5px; color: rgba(255,255,255,0.55); }

/* Conviction-Zeilen */
.mqv-conv-row { display: grid; grid-template-columns: 92px 1fr 50px 70px; align-items: center; gap: 12px; padding: 8px 0; }
.mqv-conv-stars { font-size: 15px; letter-spacing: 1px; white-space: nowrap; }
.mqv-star-on { color: var(--tba-gold); }
.mqv-star-off { color: rgba(255,255,255,0.20); }
.mqv-conv-track { height: 14px; background: rgba(111,101,216,0.16); border-radius: 7px; overflow: hidden; }
.mqv-conv-fill { height: 100%; border-radius: 7px; }
.mqv-conv-pct { font-size: 13px; font-weight: 700; color: var(--tba-white); text-align: right; }
.mqv-conv-n { font-size: 11.5px; color: rgba(255,255,255,0.5); text-align: right; }
.mqv-conv-sparse { grid-column: 2 / span 3; font-size: 12px; font-style: italic; color: rgba(255,255,255,0.4); }

/* CLV-/Kalibrierungs-Zeilen */
.mqv-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid rgba(111,101,216,0.12); font-size: 13px; }
.mqv-row-lbl { color: rgba(255,255,255,0.75); }
.mqv-row-val { font-weight: 600; }
.mqv-cal-row { display: grid; grid-template-columns: 1fr auto 70px; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(111,101,216,0.12); font-size: 13px; }
.mqv-cal-lbl { color: rgba(255,255,255,0.75); }
.mqv-cal-mid { color: rgba(255,255,255,0.65); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.mqv-cal-dev { font-weight: 600; text-align: right; }

/* Überblick-Footer / Upsell */
.mqv-upsell { background: rgba(111,101,216,0.10); border: 1px solid rgba(111,101,216,0.3); border-radius: 14px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mqv-upsell-txt { font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.5; flex: 1; min-width: 220px; }
.mqv-btn { background: var(--tba-purple); color: #fff; border: none; border-radius: 10px; font-size: 13px; font-weight: 600; padding: 10px 20px; cursor: pointer; text-decoration: none; display: inline-block; font-family: inherit; white-space: nowrap; }
.mqv-btn:hover { background: var(--tba-purple-mid); }

@media (max-width: 560px) {
  .mqv-kpi-val { font-size: 28px; }
  .mqv-conv-row { grid-template-columns: 80px 1fr 44px 56px; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SEO-Seiten (seo-*) — öffentliche Prognose-Seiten „Spieltag" & „Spiel".
   Dunkles Haupt-Design (wie cas-*/nvb-*). Serverseitig gerendert (Razor
   Pages), keine Inline-Styles mehr in den .cshtml. Sichtbarkeits-Zustände
   post/visible/locked werden per @if in den Views geschaltet.
   ═══════════════════════════════════════════════════════════════════ */

/* Shell */
.seo-page {
  min-height: 100vh;
  background: var(--tba-dark);
  background-image: radial-gradient(ellipse 900px 460px at 50% -6%, rgba(111,101,216,0.20), transparent 70%);
}
.seo-page a { color: var(--tba-purple-light); text-decoration: none; }
.seo-page a:hover { color: #fff; }
.seo-main { max-width: 920px; margin: 0 auto; padding: 26px 24px 56px; }

/* Nav */
.seo-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px; border-bottom: 1px solid rgba(111,101,216,0.18);
}
/* Menüpunkte der SEO-Kopfzeile — mittlere Gruppe. Die Leiste ist `space-between` mit
   drei Kindern (Wortmarke · Menü · Anmelden), also landet diese Gruppe in der Mitte:
   dasselbe Muster und derselbe Abstand wie `.lp-nav-links` in der eingeloggten Welt.
   Bis 2026-08-24 lagen Wortmarke und Menüpunkte zusammen in `.seo-nav-left` und
   klebten dadurch links am Logo. */
.seo-nav-links { display: flex; align-items: center; gap: 28px; }
/* `.seo-nav-left` ist damit entfallen — keine View referenziert sie mehr. */
.seo-nav-link {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.62);
  transition: color .15s;
}
.seo-nav-link:hover { color: var(--tba-white); }
/* Trägt seit 2026-08-21 das Logo statt eines Schriftzugs mit Farbverlauf — dieselbe
   Wortmarke wie die Dashboard-Navbar, damit öffentliche und eingeloggte Welt gleich
   auftreten. Die alten Text-Regeln entfallen; `display:flex` verhindert die
   Grundlinien-Lücke, die ein Inline-SVG sonst unter sich lässt. */
.seo-wordmark { display: flex; align-items: center; text-decoration: none; }
.seo-logo { display: block; width: 150px; line-height: 0; }

/* Gold-CTA (Nav + Sperr-Boxen) — einheitliche „Freischalten"-Sprache */
/* .seo-page-Prefix nötig, sonst überschreibt `.seo-page a` die dunkle Textfarbe. */
.seo-page .seo-cta {
  display: inline-block; white-space: nowrap; text-decoration: none;
  font-size: 12.5px; font-weight: 700; color: var(--tba-dark);
  background: var(--tba-gold); border-radius: 8px; padding: 8px 16px;
}
.seo-page .seo-cta:hover { color: var(--tba-dark); filter: brightness(1.06); }
.seo-cta-lg { font-size: 13px; border-radius: 10px; padding: 12px 24px; }

/* Kopf */
.seo-crumbs { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
.seo-crumbs .seo-crumb-sep { opacity: 0.5; }
.seo-crumbs .seo-crumb-cur { color: rgba(255,255,255,0.75); }
.seo-h1 {
  margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -0.5px;
  background: linear-gradient(135deg, #fff, var(--tba-purple-light));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.seo-sub { margin: 0 0 20px; font-size: 13.5px; color: rgba(255,255,255,0.6); }
.seo-disclaimer { margin: 24px 0 0; font-size: 11px; color: rgba(255,255,255,0.38); line-height: 1.6; }

/* Dev-only Vorschau-Banner (?preview=…) — in Production nie gerendert. */
.seo-preview-banner {
  background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.35);
  color: var(--tba-gold); font-size: 12px; font-weight: 700;
  border-radius: 8px; padding: 8px 14px; margin-bottom: 16px;
}

/* Produkt-Intro („Was ist das hier?") — prominentes Willkommens-Band, einsteigerfreundlich. */
.seo-intro {
  background: rgba(111,101,216,0.12);
  border: 1px solid rgba(111,101,216,0.30);
  border-left: 4px solid var(--tba-purple);
  border-radius: var(--tba-radius-lg);
  padding: 26px 30px; margin-bottom: 24px;
}
.seo-intro-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--tba-purple-light); margin-bottom: 10px;
}
.seo-intro-title {
  font-size: 27px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 12px;
  background: linear-gradient(135deg, #fff, var(--tba-purple-light));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.seo-intro-text { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.85); }
.seo-intro-text strong { font-weight: 700; }

@media (max-width: 600px) {
  .seo-intro { padding: 20px 20px; }
  .seo-intro-title { font-size: 22px; }
}

/* Registrierungs-Hinweis: was Free bringt (alle Prognosen statt nur Vorschau) + Gold-CTA. */
.seo-signup {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: rgba(111,101,216,0.10); border: 1px solid rgba(111,101,216,0.28);
  border-radius: var(--tba-radius-lg); padding: 18px 22px; margin: 24px 0;
}
.seo-signup-text { flex: 1; min-width: 240px; }
.seo-signup-title { font-size: 15px; font-weight: 700; color: var(--tba-white); margin-bottom: 10px; }
.seo-signup-benefits { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.seo-signup-benefits li {
  font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.45;
  padding-left: 22px; position: relative;
}
.seo-signup-benefits li::before { content: "✓"; position: absolute; left: 0; color: #34D399; font-weight: 700; }

/* Track-Record Metric-Tiles (Spieltag-Hero) */
.seo-tiles {
  display: flex; align-items: stretch; overflow: hidden;
  background: var(--tba-surf-1); border: 1px solid rgba(111,101,216,0.20);
  border-radius: 14px; margin-bottom: 24px;
}
.seo-tile { flex: 1; text-align: center; padding: 16px 12px; }
.seo-tile + .seo-tile { border-left: 1px solid rgba(111,101,216,0.2); }
.seo-tile-val { font-size: 24px; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.seo-tile-val-pos { color: #34D399; }
.seo-tile-lbl {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--tba-purple-light); margin-top: 6px;
}

/* Spieltag-Navigation (Segmented) + Bilanz */
.seo-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.seo-seg {
  display: inline-flex; background: var(--tba-surf-1);
  border: 1px solid rgba(111,101,216,0.25); border-radius: 999px; padding: 4px;
}
.seo-seg-link {
  display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600;
  color: var(--tba-purple-light); padding: 7px 15px; border-radius: 999px;
}
.seo-seg-cur {
  display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700;
  color: #fff; padding: 7px 15px; border-radius: 999px; background: var(--tba-purple);
}
.seo-balance { font-size: 12.5px; color: rgba(255,255,255,0.6); }
.seo-balance strong { font-weight: 700; }
.seo-balance .seo-b-pos { color: #34D399; }
.seo-balance .seo-b-white { color: #fff; }

/* Partie-Karte (Spieltag) */
.seo-match {
  background: var(--tba-surf-1); border: 1px solid rgba(111,101,216,0.32);
  border-radius: 16px; margin-bottom: 14px; padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.seo-match-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.seo-teams { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.seo-team { font-size: 17px; font-weight: 700; color: #fff; }
.seo-rank { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.4); font-variant-numeric: tabular-nums; }
.seo-vs { color: rgba(255,255,255,0.35); font-weight: 500; margin: 0 2px; }
.seo-kickoff { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; }

/* Club-Badge (Logo-Ersatz, neutral — keine Team-Farbcodierung lt. DESIGN_GUIDE) */
.seo-badge {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(111,101,216,0.17); box-shadow: inset 0 0 0 1.5px rgba(111,101,216,0.45);
}
.seo-badge-lg { width: 40px; height: 40px; font-size: 12px; }

/* Prognose-Zeile (Ergebnis + Sicherheit) */
.seo-pred { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.seo-pred-post { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 14px; }
.seo-field { display: inline-flex; align-items: baseline; gap: 10px; }
.seo-flabel { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tba-purple-light); }
.seo-fcol .seo-flabel { display: block; margin-bottom: 6px; }
.seo-score { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 1px; line-height: 1; }
.seo-score-lg { font-size: 40px; }
.seo-c-h { color: var(--tba-out-h); }
.seo-c-d { color: var(--tba-out-d); }
.seo-c-a { color: var(--tba-out-a); }
.seo-c-white { color: #fff; }
.seo-spacer { flex: 1; }

/* Abgleich (post-match) */
.seo-hit {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 5px 12px;
}
.seo-hit-ok { color: #34D399; background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.35); }
.seo-hit-no { color: #F87171; background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.35); }
.seo-exact { font-size: 12px; font-weight: 700; color: #34D399; }

/* Modell-Sicherheit (Sterne) — Quelle: ConfidenceHelper.Stars (wie Casual) */
.seo-conf { text-align: right; flex-shrink: 0; }
.seo-conf .seo-flabel { display: block; margin-bottom: 7px; }
.seo-stars { display: inline-flex; gap: 3px; font-size: 15px; line-height: 1; }
.seo-stars-lg { font-size: 18px; }
.seo-star-on { color: var(--tba-gold); }
.seo-star-off { color: rgba(255,255,255,0.18); }

/* 1X2-Balken */
.seo-bar { display: flex; height: 28px; border-radius: 7px; overflow: hidden; margin-bottom: 2px; }
.seo-bar-lg { height: 40px; border-radius: 8px; margin-bottom: 0; }
.seo-bar-seg {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 0; color: #fff; line-height: 1; border-right: 1px solid rgba(28,24,71,0.45);
}
.seo-bar-seg:last-child { border-right: none; }
.seo-bar-lg .seo-bar-seg { flex-direction: column; gap: 0; line-height: 1.1; }
.seo-bar-h { background: var(--tba-out-h); }
.seo-bar-d { background: var(--tba-out-d); }
.seo-bar-a { background: var(--tba-out-a); }
.seo-bar-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.85; }
.seo-bar-lg .seo-bar-lbl { font-size: 9.5px; }
.seo-bar-pct { font-size: 11px; font-weight: 700; }
.seo-bar-lg .seo-bar-pct { font-size: 14px; }

/* Sperr-Box (pre-match, Public) */
.seo-lock {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: rgba(111,101,216,0.10); border: 1px dashed rgba(111,101,216,0.4);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 12px;
}
.seo-lock-text { font-size: 13px; color: rgba(255,255,255,0.78); }
.seo-lock-text strong { color: #fff; font-weight: 600; }
.seo-lock-center { text-align: center; padding: 14px 20px; }
.seo-lock-ico { font-size: 30px; margin-bottom: 10px; }
.seo-lock-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.seo-lock-desc { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.55; max-width: 420px; margin: 0 auto 16px; }
.seo-exp-lock { font-size: 12.5px; color: rgba(255,255,255,0.55); }

/* Karten-Fußzeile (Spieltag) */
.seo-match-foot { border-top: 1px solid rgba(111,101,216,0.14); padding-top: 11px; margin-top: 16px; }
.seo-foot-link { font-size: 12.5px; font-weight: 600; }

/* ── Spielseite ── */
.seo-hero-row { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; }
.seo-section-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--tba-purple-light); margin-bottom: 12px;
}

/* ── SEO-Übersicht /prognosen (Handoff v2, Seite 1) ─────────────────────────
   Eine Frage: „Welche Liga?". Liste mit Trennlinien statt Karten — Karten
   suggerieren je Liga einen eigenen Inhaltsblock, hier ist jede Zeile nur ein Weg.
   Ersetzt die kurzlebigen .seo-idx-* vom selben Tag. */

/* Fließtext-Einstieg unter der H1 und der Hinweissatz am Fuß. */
.seo-lead {
  margin: 0 0 26px; max-width: 540px;
  font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.6);
}
.seo-note {
  margin: 26px 0 0; max-width: 430px;
  font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.5);
}
.seo-note a { color: var(--tba-purple-light); font-weight: 600; }

/* Überschrift, die nur für Screenreader und Suchmaschinen zählt. Die Gliederung
   muss im Markup stehen, auch wo sie visuell überflüssig wäre. */
.seo-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.seo-leagues { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.10); }
.seo-leagues > li { border-bottom: 1px solid rgba(255,255,255,0.10); }
.seo-league {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 4px; text-decoration: none;
  transition: background .15s;
}
.seo-league:hover { background: var(--tba-surf-2); }
.seo-league-flag {
  width: 32px; height: 32px; flex: none;
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.18);
}
.seo-league-flag img { width: 100%; height: 100%; object-fit: cover; }
.seo-league-id { width: 186px; flex: none; display: flex; flex-direction: column; gap: 2px; }
.seo-league-name { font-size: 16px; font-weight: 700; color: var(--tba-white); }
.seo-league-land { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.42); }
.seo-league-state { flex: 1; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); }
.seo-league-arrow { font-size: 16px; font-weight: 700; color: var(--tba-purple-light); }

/* Aktiver Punkt in der SEO-Kopfzeile. */
.seo-nav-on { color: var(--tba-white); }

/* ── SEO-Spieltagsseite (Handoff v2, Seite 2) ───────────────────────────────
   Eine Frage: „Was ist in dieser Runde passiert?". Chronologische Tabelle statt
   Karten; Balken, Sterne und Prozente gehören auf die Spielseite. */

/* Spieltags-Navigation: Vorher · Angezeigt · Danach */
.seo-mdnav { display: flex; gap: 10px; margin-bottom: 18px; }
.seo-mdnav-item {
  flex: none; display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--tba-surf-1);
  border: 1px solid rgba(255,255,255,0.09);
  text-decoration: none; transition: background .15s;
}
a.seo-mdnav-item:hover { background: var(--tba-surf-2); }
.seo-mdnav-next { margin-left: auto; }
.seo-mdnav-cur {
  flex: 1; justify-content: center;
  background: rgba(111,101,216,0.18);
  border-color: rgba(111,101,216,0.45);
}
.seo-mdnav-txt { display: flex; flex-direction: column; gap: 1px; }
.seo-mdnav-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--tba-purple-light);
}
.seo-mdnav-val { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
.seo-mdnav-cur .seo-mdnav-val { font-size: 15px; font-weight: 700; color: var(--tba-white); }
.seo-mdnav-chev { font-size: 14px; font-weight: 700; color: var(--tba-purple-light); }

/* Zustandssatz unter der H1 */
.seo-status {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 26px;
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.72);
}
/* Zentriert unter der Paarungs-H1 der Spielseite. Modifier statt Aenderung an
   .seo-status, weil die Spieltagsseite dieselbe Klasse unter einer LINKSBUENDIGEN H1
   traegt — dort saesse die Zeile sonst allein in der Mitte. */
.seo-status-center { justify-content: center; text-align: center; }
.seo-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--tba-out-h);
  box-shadow: 0 0 0 4px rgba(52,211,153,0.2);
}
/* Grün bleibt „fertig/getroffen" vorbehalten — deshalb trägt „läuft gerade" Gold,
   obwohl der Punkt daneben grün ist (Nutzerentscheidung 2026-08-21). */
.seo-status-live { color: var(--tba-gold); font-weight: 700; }
.seo-status-done { color: var(--tba-out-h); font-weight: 700; }
.seo-status-soon { color: var(--tba-purple-light); font-weight: 700; }

/* Tabelle der Partien */
.seo-list-h2 {
  margin: 0 0 10px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--tba-purple-light);
}
.seo-list { border-top: 1px solid rgba(255,255,255,0.10); }
.seo-list-head {
  display: flex; gap: 12px; padding: 9px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--tba-purple-light);
}
/* Kopfzellen mit eigenen Klassen — sonst erbten „Anpfiff", „Partie" und „Prognose"
   die Zeilen-Inhaltsstile und sahen anders aus als die übrigen Überschriften.
   Breiten müssen mit den Zeilenspalten unten übereinstimmen. */
.seo-hcol-time  { width: 76px; flex: none; }
.seo-hcol-state { width: 116px; flex: none; }
.seo-hcol-match { flex: 1; min-width: 0; }
.seo-hcol-tend  { width: 126px; flex: none; }
.seo-hcol-score { width: 64px; flex: none; text-align: right; }
.seo-hcol-hit   { width: 74px; flex: none; text-align: right; }
.seo-list-row { border-bottom: 1px solid rgba(255,255,255,0.10); }
.seo-list-link {
  display: flex; gap: 12px; align-items: center;
  padding: 13px 4px; text-decoration: none;
  transition: background .15s;
}
.seo-list-link:hover { background: var(--tba-surf-2); }
/* Zeilentönung: Showcase lila, gesperrt gold — dezent, die Badges tragen die Aussage. */
.seo-row-show { background: rgba(111,101,216,0.10); }
.seo-row-lock { background: rgba(251,191,36,0.04); }

.seo-col-time {
  width: 76px; flex: none; display: flex; flex-direction: column; gap: 1px;
  font-variant-numeric: tabular-nums;
}
.seo-time-d { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,0.35); }
.seo-time-t { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.6); }
/* „nachgeholt" / „vorgezogen" unter der Uhrzeit — Partien, die mehr als fuenf Tage vom
   Median ihrer eigenen Runde entfernt liegen (1,18 % der Ligaspiele, gemessen 24.08.2026).
   Bewusst KLEIN und in Gold-Toenung: Es ist ein Hinweis auf den Termin, keine Wertung und
   keine Prognose-Information. Gold, weil es dieselbe Rolle spielt wie die uebrigen
   Zustands-Hinweise der Seite (.seo-status-live). */
.seo-time-moved {
  font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--tba-gold); opacity: 0.85; margin-top: 2px;
}

/* ── Paarung mit dem erwarteten Ergebnis in der Mitte (01.09.2026) ─────────────
   Gleiche Bauform wie in der eingeloggten Liste (.cas-lg-c-match) und im Kopf der
   Spielkarte (.cas-x-pair): Heim rechtsbündig, Ergebnis-Badge, Gast linksbündig.
   Die eigene Prognose-Spalte ist entfallen, ihre 80 px kommen den Namen zugute.

   ⚠ Der Badge fluchtet über die Liste, weil Heim und Gast beide `flex: 1` tragen.
   ⚠ Der Heimname ist RECHTSbündig, damit der Abstand zum Badge links wie rechts gleich
   ist. Linksbündig ergäbe bei kurzen Namen eine Lücke davor — die Ableitung steht
   ausführlich bei .cas-lg-m-home.
   ⚠ Dies ist ein <h3> und die Überschrift, über die die Seite gefunden wird. Der
   Textinhalt muss „Heim Ergebnis Gast" mit Leerzeichen bleiben; siehe die Anmerkung
   im Markup von Spieltag.cshtml. */
.seo-col-match {
  flex: 1; min-width: 0; margin: 0;
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--tba-white);
}
.seo-m-home,
.seo-m-away {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seo-m-home { text-align: right; }
.seo-m-away { text-align: left; }
/* Wie .cas-lg-m-score, nur auf die 14,5 px dieser Liste abgestimmt. */
.seo-m-score {
  flex: none; padding: 3px 9px; border-radius: 8px;
  font-size: 14px; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--tba-surf-2); color: var(--tba-white);
}
.seo-m-score.seo-pred-h { background: rgba(52,211,153,0.14);  color: var(--tba-out-h); }
.seo-m-score.seo-pred-d { background: rgba(127,119,221,0.16); color: var(--tba-out-d); }
.seo-m-score.seo-pred-a { background: rgba(30,168,235,0.14);  color: var(--tba-out-a); }
.seo-row-lock .seo-col-match { color: rgba(255,255,255,0.55); }
/* 🗑 .seo-dash (Gedankenstrich zwischen den Vereinsnamen) ist am 01.09.2026 tot
   geworden — zwischen den Namen steht jetzt der Ergebnis-Badge. Gegenstück zu
   .cas-lg-vs in der eingeloggten Liste, das aus demselben Grund entfiel. */

/* ── Tendenz-Spalte ───────────────────────────────────────────────────────────
   Vorher zeigte die Liste nur „2:1" — ein Ergebnis ohne jede Angabe, wie deutlich
   das Modell ist. Die Spur macht die Deutlichkeit auf einen Blick sichtbar, ohne
   eine zweite Zahlenspalte zu eröffnen.
   Nur der führende Ausgang ist farbig (wie .cas-lg-seg im Dashboard). Die große
   dreifarbige .seo-bar-lg auf der Spielseite bleibt davon unberührt: dort ist die
   Aufteilung selbst das Thema, hier nur die Führung. */
.seo-col-tend {
  width: 126px; flex: none;
  display: flex; align-items: center; gap: 7px;
}
.seo-tend-track {
  flex: 1; min-width: 0;
  display: flex; gap: 2px; align-items: center;
  height: 6px; border-radius: 3px;
}
.seo-tend-seg { height: 6px; border-radius: 3px; min-width: 0; }
.seo-tend-seg-h { background: var(--tba-out-h); }
.seo-tend-seg-d { background: var(--tba-out-d); }
.seo-tend-seg-a { background: var(--tba-out-a); }
/* Neutrales Segment — derselbe Wert wie .cas-lg-seg-sub, damit Liste und Dashboard
   identisch aussehen. */
.seo-tend-seg-sub { background: var(--tba-surf-3); }
/* Gesperrt: leere Spur ohne Segmente. Keine Drittelung (behauptet „völlig offen"),
   keine Farbe (verriete den Ausgang) — die Werte sind serverseitig null. */
.seo-tend-track-empty { background: var(--tba-surf-2); }
.seo-tend-pct {
  width: 34px; flex: none; text-align: right;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.62);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Der Ausgang im Klartext steht nur auf dem Handy, wo die Spaltenköpfe fehlen. */
.seo-tend-word { display: none; }

/* Farbe nach Tendenz — dieselbe Zuordnung wie die Balkensegmente daneben.
   Nur die Ziffern; der Platzhalter „– – –" bleibt neutral. */
.seo-pred-h { color: var(--tba-out-h); }
.seo-pred-d { color: var(--tba-out-d); }
.seo-pred-a { color: var(--tba-out-a); }
.seo-pred-none { color: rgba(255,255,255,0.22); }

/* Endstand und Abgleich sind eigene, IMMER vorhandene Spalten — bei offenen Partien
   stehen dort Platzhalter. Damit stimmen Kopfzeile und Zeilen zusammen, und die Liste
   bleibt rechts auf einer Kante, ohne dass Spalten einander ersetzen müssen. */
.seo-col-score {
  width: 64px; flex: none; text-align: right;
  font-size: 15px; font-weight: 700; color: var(--tba-white);
  font-variant-numeric: tabular-nums;
}
/* Rechte Spalte: Abgleich bei gespielten, Handlungszeichen bei offenen Partien. */
.seo-col-hit {
  width: 74px; flex: none;
  display: flex; align-items: center; justify-content: flex-end;
  font-size: 12px; font-weight: 700;
}
/* Status steht links, zwischen Anpfiff und Partie — der Zustand ist die erste Frage,
   nicht die letzte. Linksbündig, damit die Badges eine gemeinsame Kante bilden. */
.seo-col-state {
  width: 116px; flex: none;
  display: flex; align-items: center; justify-content: flex-start;
}
.seo-badge-done, .seo-badge-open {
  padding: 4px 10px; border-radius: 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  white-space: nowrap;
}
.seo-badge-done { background: rgba(52,211,153,0.14); color: var(--tba-out-h); }
.seo-badge-open { background: rgba(111,101,216,0.18); color: var(--tba-purple-light); }
/* Schloss in der Prognose-Spalte. Ersetzt das frühere zweite Badge je gesperrter Zeile —
   die Erklärung steht einmal unten im .seo-gate, nicht in jeder Zeile. */
.seo-state-lock { font-size: 15px; color: var(--tba-gold); }
/* Showcase-Einstieg am Zeilenende. Als gefüllter Kreis statt bloßem Zeichen: Bei einem
   Showcase sieht Public zwar Tendenz und Wahrscheinlichkeiten, aber nie das exakte
   Ergebnis — ohne deutliches Zeichen wäre die Zeile von einer gesperrten nicht zu
   unterscheiden. Bewusst kräftiger als das Schloss: Es ist der einzige Einstieg,
   der vor Anpfiff offensteht. */
.seo-go {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--tba-purple);
  color: var(--tba-white);
  font-size: 16px; font-weight: 700; line-height: 1;
  transition: transform .15s, box-shadow .15s;
}
.seo-list-link:hover .seo-go {
  transform: translateX(3px);
  box-shadow: 0 0 0 4px rgba(111,101,216,0.25);
}

/* Der einzige Sperr-Hinweis der Seite. */
.seo-gate {
  margin-top: 22px; padding: 15px 18px; border-radius: 12px;
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.26);
}
.seo-gate-title { font-size: 13.5px; font-weight: 600; color: var(--tba-white); }
.seo-gate-text {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.62);
}
.seo-gate-text a { color: var(--tba-gold); font-weight: 600; }

.seo-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 26px; font-size: 12.5px;
}
.seo-foot a { color: var(--tba-purple-light); font-weight: 600; }
.seo-foot-meta { color: rgba(255,255,255,0.45); }

/* ── SEO-Spielseite (Handoff v2, Seite 3) ──────────────────────────────────
   Die einzige Seite mit Detail. Ergebnisblock ohne Kartenrahmen, darunter eine
   Trennlinie; Kontext in drei Spalten mit Trennstrichen statt drei Karten. */
.seo-result {
  display: flex; align-items: flex-end; gap: 44px;
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.seo-result-col { display: flex; flex-direction: column; gap: 4px; }
.seo-result-conf { margin-left: auto; display: flex; flex-direction: column; gap: 4px; }
.seo-result-val {
  font-size: 38px; font-weight: 800; line-height: 1; color: var(--tba-white);
  font-variant-numeric: tabular-nums;
}
.seo-result-pred { color: var(--tba-out-h); }
.seo-result-none { color: rgba(255,255,255,0.22); }
.seo-result-sub { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.6); }
.seo-result-hit { font-size: 12.5px; font-weight: 600; color: var(--tba-out-h); }
.seo-result-miss { font-size: 12.5px; font-weight: 600; color: #F87171; }

/* Neutrale Balkensegmente — nur der führende Ausgang trägt seine Farbe.
   Zwei Stufen, damit die beiden Nebensegmente unterscheidbar bleiben. */
.seo-bar-seg-sub  { background: var(--tba-surf-3); }
.seo-bar-seg-sub2 { background: var(--tba-surf-2); }

.seo-ctx-h2, .seo-why-h2 {
  margin: 26px 0 14px;
  font-size: 19px; font-weight: 700; color: var(--tba-white);
}

/* Begründung: Zusammenfassung + gemessene Einflussfaktoren. Nach Abpfiff für alle offen.
   Bewusst schlicht — der Wert liegt im Text, nicht in der Verpackung. */
.seo-prose {
  margin: 0 0 18px; padding-left: 14px;
  border-left: 2px solid var(--tba-purple);
  font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.82);
}
.seo-why { list-style: none; margin: 8px 0 0; padding: 0; }
.seo-why-row {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.seo-why-row:last-child { border-bottom: none; }
.seo-why-text { flex: 1; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.seo-why-meta { display: flex; align-items: center; gap: 8px; flex: none; width: 108px; }
.seo-why-pct {
  width: 34px; text-align: right; flex: none;
  font-size: 11.5px; font-weight: 700; color: var(--tba-purple-light);
  font-variant-numeric: tabular-nums;
}
.seo-why-track { flex: 1; height: 4px; border-radius: 2px; background: var(--tba-surf-3); }
.seo-why-fill { display: block; height: 100%; border-radius: 2px; background: var(--tba-purple); }
.seo-why-note {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.5);
}

@media (max-width: 600px) {
  .seo-why-row { flex-wrap: wrap; row-gap: 6px; }
  .seo-why-meta { width: 100%; }
}

/* ── Ligatabelle (.seo-tab-*) ─────────────────────────────────────────────────
   Angelegt am 07.09.2026 fuer die Statistik-Seiten, nach Freigabe des Nutzers.

   ⚠ Warum eigene Klassen: Die vorhandenen .seo-col-* sind auf Spieltagslisten
   zugeschnitten (time 76px, state 116px, tend 126px) und tragen kein neunspaltiges
   Raster. Sie umzuwidmen haette bedeutet, dass in einer Spalte namens „time" der
   Tabellenplatz steht — die CSS-Inventur waere damit unbrauchbar geworden.

   ⚠ Keine neuen Farben, keine neuen Abstaende: Trennlinien, Kopfzeilen-Typografie
   und Zeilenhoehe sind aus .seo-list-* uebernommen. Neu ist ausschliesslich das
   Spaltenraster. */
.seo-tab { border-top: 1px solid rgba(255,255,255,0.10); }
.seo-tab-head,
.seo-tab-row {
  display: flex; gap: 12px; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-variant-numeric: tabular-nums;
}
.seo-tab-head {
  padding: 9px 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--tba-purple-light);
}
.seo-tab-row { padding: 11px 4px; font-size: 14px; color: var(--tba-white); }
.seo-tab-row:last-child { border-bottom: none; }

.seo-tab-pos    { width: 34px; flex: none; text-align: right; color: var(--tba-purple-light); }
.seo-tab-team   { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
                  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-tab-logo   { width: 18px; height: 18px; object-fit: contain; flex: none; }
.seo-tab-n      { width: 34px; flex: none; text-align: right; }
.seo-tab-goals  { width: 56px; flex: none; text-align: right; }
.seo-tab-diff   { width: 44px; flex: none; text-align: right; }
.seo-tab-pts    { width: 44px; flex: none; text-align: right; font-weight: 700; }

/* Schmale Fenster: die Detailspalten treten zurueck, Platz/Team/Punkte bleiben.
   Eine Tabelle, die horizontal scrollt, liest auf dem Handy niemand. */
@media (max-width: 620px) {
  .seo-tab-head .seo-tab-n,
  .seo-tab-row .seo-tab-n,
  .seo-tab-head .seo-tab-goals,
  .seo-tab-row .seo-tab-goals { display: none; }
}
/* Die Trennlinie ist am 24.08.2026 von hier an .seo-h2-marked gewandert.
   Sie gehoerte inhaltlich nie der Kontext-Tabelle, sondern der Ueberschrift darueber —
   dadurch hatte auf der Spielseite ausgerechnet „Zahlen zur Partie" als einzige Section
   einen Unterstrich. Jetzt tragen ihn alle drei. */
.seo-ctx {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  padding-top: 4px;
}
.seo-ctx-col { padding: 0 18px; border-left: 1px solid rgba(255,255,255,0.08); }
.seo-ctx-col:first-child { padding-left: 0; border-left: none; }
.seo-ctx-col .seo-form-team { margin-bottom: 10px; }
.seo-ctx-col .seo-form-pills { display: flex; gap: 6px; }
.seo-ctx-col .seo-form-res { font-size: 13px; font-weight: 700; letter-spacing: 2px; }
.seo-ctx-col .seo-h2h-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12.5px; font-weight: 500; padding: 4px 0;
}
/* Heim-/Auswaerts-Merker der betrachteten Mannschaft. Ohne ihn ginge beim Drehen der
   Ergebnisse die Information ueber das Heimrecht verloren — die Drehung soll die
   Mehrdeutigkeit beseitigen, nicht Inhalt schlucken. */
.seo-h2h-venue {
  flex: none; width: 15px; text-align: center;
  font-size: 9.5px; font-weight: 700;
  color: rgba(255,255,255,0.35);
}
/* „aus Sicht von X" ueber der Liste. Pflicht, nicht Zierrat: Ohne den Satz waere die
   Drehung nur eine andere Art von Mehrdeutigkeit. */
.seo-h2h-note {
  font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,0.42);
  margin: -2px 0 6px;
}

@media (max-width: 600px) {
  .seo-result { gap: 22px; flex-wrap: wrap; }
  .seo-result-val { font-size: 30px; }
  .seo-result-conf { margin-left: 0; flex-basis: 100%; }
  .seo-ctx { grid-template-columns: 1fr; }
  .seo-ctx-col {
    padding: 14px 0 0; border-left: none;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .seo-ctx-col:first-child { padding-top: 0; border-top: none; }
}

@media (max-width: 600px) {
  .seo-mdnav { gap: 6px; }
  .seo-mdnav-item { flex: 1; padding: 9px 8px; justify-content: center; }
  .seo-mdnav-next { margin-left: 0; }
  .seo-mdnav-lbl { display: none; }
  .seo-list-head { display: none; }
  /* Zeile bricht auf zwei Ebenen: oben Anpfiff + Partie, darunter die Werte.
     Ohne Kopfzeile brauchen die Zahlen ein Inline-Label, sonst steht dort „2:1 1:3 ✓". */
  .seo-list-link { flex-wrap: wrap; row-gap: 8px; }
  /* Die Paarung bekommt die ganze Zeile — mit dem Ergebnis-Badge in der Mitte ist sie
     die Aussage der Zeile und wurde vorher auf einen Rest gequetscht. */
  .seo-col-match { flex: 1 1 100%; }
  .seo-m-score { font-size: 15px; padding: 3px 10px; }
  .seo-m-home, .seo-m-away { white-space: normal; }
  .seo-col-score, .seo-col-hit { width: auto; text-align: left; }
  /* Die 126-px-Spalte fällt weg; der Balken wird zur eigenen Ebene unter der Paarung.
     Statt des blanken Prozentwerts steht dort der Ausgang im Klartext — ohne
     Spaltenkopf wäre „64 %" nicht zuzuordnen.
     ⚠ Kein `margin-left: 88px` mehr und keine Deckelung auf 300 px: Beides stammte aus
     einer Fassung, in der links eine Anpfiff-Spalte stand. Auf 360 px blieb davon ein
     Balken übrig, der rechts klebte — derselbe Befund wie in der eingeloggten Liste
     am 01.09.2026. Der Balken nimmt jetzt die Zeile, nur der Prozentwert steht daneben. */
  .seo-col-tend {
    width: auto; flex: 1 1 100%; margin-left: 0;
    gap: 10px;
  }
  .seo-tend-track, .seo-tend-seg { height: 4px; border-radius: 2px; }
  .seo-tend-track { flex: 1 1 auto; }
  .seo-tend-pct {
    width: auto; text-align: left;
    font-size: 10.5px; font-weight: 600;
  }
  .seo-tend-word { display: inline; }
  .seo-col-score::before { content: "Endstand "; }
  .seo-col-score::before {
    font-size: 9.5px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--tba-purple-light);
  }
  /* Status wandert auf dem Handy neben die Uhrzeit in die erste Ebene; das
     Handlungszeichen (Pfeil/Schloss) bleibt rechts am Ende der zweiten. */
  .seo-col-state { width: auto; }
  .seo-col-hit { margin-left: auto; }
}

@media (max-width: 600px) {
  .seo-league { flex-wrap: wrap; gap: 12px; padding: 14px 4px; min-height: 44px; }
  .seo-league-flag { width: 28px; height: 28px; }
  .seo-league-id { width: auto; flex: 1; }
  .seo-league-state { flex-basis: 100%; font-size: 13px; }
}
.seo-card {
  background: var(--tba-surf-1); border: 1px solid rgba(111,101,216,0.2);
  border-radius: 16px; margin-bottom: 24px; padding: 20px 24px;
}
.seo-card-tight { padding: 8px 24px; }
.seo-card-prog { background: var(--tba-surf-1); border-color: rgba(111,101,216,0.32); padding: 22px 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.22); }
.seo-card-prog-post { border-color: rgba(52,211,153,0.28); }

/* Prognose-Karte Kopf (Spiel) */
.seo-prog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.seo-prog-post { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.seo-prog-divider { width: 1px; height: 52px; background: rgba(111,101,216,0.25); }
.seo-final-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 5px; }
.seo-prog-note { font-size: 12.5px; color: rgba(255,255,255,0.55); margin-top: 8px; }
.seo-prog-note strong { color: #fff; font-weight: 600; }

/* Tabellenkontext */
.seo-tc { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; }
.seo-tc-cell { padding: 11px 0; border-bottom: 1px solid rgba(111,101,216,0.12); font-size: 14px; }
.seo-tc-row-last .seo-tc-cell { border-bottom: none; }
.seo-tc-home { text-align: right; font-weight: 700; color: #fff; }
.seo-tc-away { text-align: left; font-weight: 700; color: rgba(255,255,255,0.9); }
.seo-tc-mid { text-align: center; padding: 11px 16px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255,255,255,0.45); white-space: nowrap; }
.seo-tc-name { color: var(--tba-purple-light); }

/* Formkurve */
.seo-form-team { padding: 6px 0; }
.seo-form-name { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 11px; }
.seo-form-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.seo-form-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--tba-surf-2); border: 1px solid rgba(111,101,216,0.16);
  border-radius: 9px; padding: 7px 11px;
}
.seo-form-res {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.seo-form-res-w { background: var(--tba-out-h); }
.seo-form-res-d { background: var(--tba-out-d); }
.seo-form-res-l { background: #F87171; }
.seo-form-score { font-size: 12px; color: rgba(255,255,255,0.75); font-variant-numeric: tabular-nums; }
.seo-form-opp { font-size: 11px; color: rgba(255,255,255,0.45); }
.seo-form-empty { font-size: 13px; color: rgba(255,255,255,0.45); }

/* Direkter Vergleich (H2H) */
.seo-h2h-row {
  display: grid; grid-template-columns: 70px 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid rgba(111,101,216,0.12);
}
.seo-h2h-row-last { border-bottom: none; }
.seo-h2h-date { font-size: 11.5px; color: rgba(255,255,255,0.45); font-variant-numeric: tabular-nums; }
.seo-h2h-home { text-align: right; font-size: 13px; font-weight: 600; color: #fff; }
.seo-h2h-score {
  text-align: center; font-size: 13px; font-weight: 700; color: #fff;
  background: rgba(111,101,216,0.16); border-radius: 7px; padding: 3px 10px; font-variant-numeric: tabular-nums;
}
.seo-h2h-away { text-align: left; font-size: 13px; font-weight: 600; color: #fff; }
.seo-back { font-size: 13px; font-weight: 600; }

@media (max-width: 600px) {
  /* Dieselbe Ursache wie in `.lp-nav` (31.08.2026): Wortmarke fest auf 150px, dazu
     „Prognosen · Methodik · Anmelden" ohne Umbruch — zusammen über 400px auf einem
     360px-Display. Ergebnis wäre eine horizontal verschiebbare Seite, und das
     ausgerechnet auf den Seiten, auf denen Google-Besucher landen.
     `flex-wrap` erlaubt der Zeile umzubrechen, statt zu überlaufen. */
  .seo-nav { padding: 14px 18px; flex-wrap: wrap; gap: 10px; }
  .seo-logo { width: 128px; }
  .seo-nav-links { gap: 18px; }
  .seo-main { padding: 22px 16px 48px; }
  .seo-h1 { font-size: 24px; }
  .seo-team { font-size: 15px; }
  .seo-pred, .seo-prog-head, .seo-prog-post { flex-direction: column; align-items: flex-start; gap: 12px; }
  .seo-conf, .seo-conf .seo-flabel { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RECHTSSEITEN (legal-*) — Impressum / Datenschutz / AGB / Widerruf
   Fließtext-Namespace. Es gab bisher keine Prose-Komponente; alle Werte sind
   aus bestehenden Rollen abgeleitet (DESIGN_GUIDE §3: Body 13–15px, Legal 11px).
   Seitenrahmen bleibt .lp-section.lp-section-dark + .lp-container.
   ═══════════════════════════════════════════════════════════════════════════ */
.legal-prose {
  max-width: 760px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,0.72);
}
.legal-prose h3 {
  font-size: 16px; font-weight: 700; color: var(--tba-white);
  margin: 28px 0 10px; line-height: 1.35;
}
.legal-prose h3:first-child { margin-top: 0; }
.legal-prose h4 {
  font-size: 13.5px; font-weight: 700; color: var(--tba-purple-light);
  margin: 18px 0 6px; line-height: 1.4;
}
.legal-prose p { margin: 0 0 12px; }
.legal-prose ul { margin: 0 0 12px; padding: 0; list-style: none; }
.legal-prose li { padding-left: 18px; position: relative; margin-bottom: 6px; }
.legal-prose li::before {
  content: "–"; position: absolute; left: 0; color: var(--tba-purple); font-weight: 700;
}
.legal-prose strong { color: var(--tba-white); font-weight: 700; }

/* Hervorgehobener Kasten (Belehrung, Muster-Formular) — Werte 1:1 aus Pro.razor */
.legal-box {
  border: 1px solid rgba(111,101,216,0.32);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 18px 0;
}

/* "Stand:"-Zeile — Legal/Disclaimer-Rolle wie .seo-disclaimer */
.legal-updated { font-size: 11px; color: rgba(255,255,255,0.38); margin-top: 28px; }

/* Checkbox-Marke (Widerrufs-Zustimmung im Checkout) — abgeleitet von .acc-radio-mark,
   einziger Unterschied: eckig + Häkchen statt Punkt. Container/Body/Titel/Desc bleiben
   die bestehenden .acc-radio* Klassen. Eckig signalisiert "ich stimme zu" statt
   "wähle eine von mehreren Optionen". */
.acc-check {
  width: 18px; height: 18px; border-radius: 5px;
  border: 2px solid rgba(111,101,216,0.5); flex-shrink: 0; margin-top: 1px;
  position: relative;
}
.acc-check-on { border-color: var(--tba-purple); background: var(--tba-purple); }
.acc-check-on::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Spielkarte v3 — vier Ebenen (`.cas-x-*`, 24.08.2026)
   Vorlage: docs/design_handoff_spielkarte (Turn 6, Option 6a).

   Warum: Die Karte trug zwoelf Bloecke mit identischem visuellem Gewicht — jeder
   mit einer Ueberschrift derselben Groesse, also gab es keine Hierarchie. Neu
   beantwortet jede Ebene genau eine Frage: Was sagt das Modell (1) · Warum (2) ·
   Voraussichtliche Aufstellung (3) · Ligastatistik (4). Ebene 1 und 2 sind immer sichtbar,
   3 und 4 klappen auf.

   KEINE NEUE FARBE. Das Handoff nannte #3ee0a0 / #49a8f5 / #c9c0ff / #f2c14e —
   das sind die Nachbarwerte unserer Tokens; verwendet werden --tba-out-h/-a,
   --tba-purple(-light) und --tba-gold. Gleicher Praezedenzfall wie 2026-08-21.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Ebene 1: Kopfzone ─────────────────────────────────────────────────────────
   Die einzige Zone mit eigener Flaeche — das macht sie ohne Ueberschrift zum Kopf.
   Negative Raender ziehen sie ueber das Padding von .cas-card an dessen Kanten. */
.cas-x-head {
  /* Ohne eigene Flaeche: Die Karte ist EINE Flaeche (01.09.2026). Der Kopf war mit
     rgba(0,0,0,0.14) merklich dunkler als der Rest — auf dem neuen, gesaettigten
     Kartengrund las sich das als zweiter Hintergrund statt als Gliederung.
     Die Gliederung leisten Abstand und Linien, nicht ein Farbunterschied. */
  margin: -20px -22px 0;
  padding: 18px 22px 20px;
  border-radius: 16px 16px 0 0;
}
.cas-x-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.3px;
  color: rgba(255,255,255,0.42);
}
.cas-x-meta-r { text-transform: uppercase; letter-spacing: 0.8px; text-align: right; }

/* Paarung: Heim rechtsbuendig, Gast linksbuendig, Ergebnis in der Mitte. */
.cas-x-pair { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
/* 19 px statt 15 (01.09.2026): Die Paarung ist die Ueberschrift der Karte — sie beantwortet
   „um welches Spiel geht es". Bei 15 px neben einem 26-px-Ergebnis las man zuerst die Zahl
   und musste die Namen suchen. 19 px ist die bestehende Rolle „Sektions-H2" (.seo-ctx-h2);
   dieselben Namen stehen auf der oeffentlichen Spielseite sogar bei 30 px (.seo-h1-team).
   Der Umbruch bleibt moeglich (flex:1 + min-width:0 + line-height 1.25) — lange Paarungen
   wie „Borussia Moenchengladbach" gehen dann zweizeilig, statt die Zeile zu sprengen. */
.cas-x-team { flex: 1; min-width: 0; font-size: 19px; font-weight: 700; line-height: 1.25; }
.cas-x-team-h { text-align: right; color: var(--tba-white); }
/* Der Gast stand auf 75 % Weiss und trat damit hinter den Gastgeber zurueck. Fuer die Frage
   „welches Spiel ist das" sind beide Mannschaften gleichwertig; welche zu Hause spielt, sagt
   bereits die Ausrichtung (rechtsbuendig vor dem Ergebnis, linksbuendig dahinter). */
.cas-x-team-a { text-align: left;  color: var(--tba-white); }
.cas-x-score {
  flex: none; padding: 6px 16px; border-radius: 10px;
  font-size: 26px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--tba-surf-2); color: var(--tba-white);
}
.cas-x-score-h { background: rgba(52,211,153,0.14);  color: var(--tba-out-h); }
/* Toenung folgt --tba-out-d (Remis), nicht der Brand-Rampe — sonst stuenden
   Flaeche und Schrift dieser Box auf zwei verschiedenen Purple-Toenen. */
.cas-x-score-d { background: rgba(127,119,221,0.16); color: var(--tba-out-d); }
.cas-x-score-a { background: rgba(30,168,235,0.14);  color: var(--tba-out-a); }

/* Sicherheit als ZEILE in Ebene 1, nicht als eigener Block: "Wie sicher?" ist
   dieselbe Frage wie "Was?", nur praeziser. Ein eigener Block mit eigener
   Ueberschrift verdoppelte die Ebene. Toenung folgt der Stufe. */
.cas-x-conf {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 13px; border-radius: 9px;
  background: var(--tba-surf-2); border: 1px solid rgba(255,255,255,0.10);
}
.cas-x-conf-hi  { background: rgba(251,191,36,0.09);  border-color: rgba(251,191,36,0.26); }
.cas-x-conf-mid { background: rgba(111,101,216,0.10); border-color: rgba(111,101,216,0.30); }
.cas-x-conf-lbl {
  flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.9px;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.cas-x-conf-hi  .cas-x-conf-lbl { color: var(--tba-gold); }
.cas-x-conf-mid .cas-x-conf-lbl { color: var(--tba-purple-light); }
.cas-x-conf-div { flex: none; width: 1px; height: 14px; background: rgba(255,255,255,0.18); }
.cas-x-conf-txt { flex: 1; min-width: 120px; font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.72); }
/* Nur die BEZEICHNUNG der Stufe („Hohe Sicherheit") traegt die Sternfarbe — sie benennt
   dieselbe Stufe, die die Sterne links zeigen. Der Erklaersatz daneben bleibt neutral:
   faerbte man ihn mit, leuchtete die halbe Zeile und die Stufe ginge darin unter.
   Gold auch dann, wenn die Zeile keine Toenung hat — die Sterne sind immer gold. */
.cas-x-conf-name { font-weight: 700; color: var(--tba-gold); }
.cas-x-conf .cas-star { font-size: 12px; }

/* ── Ebenen-Marke: ersetzt vier gleich grosse Ueberschriften ───────────────────
   3x13-px-Balken in der Ebenenfarbe + Titel. Die Zusammenfassung ist bei den
   klappbaren Ebenen PFLICHT — eine Kopfzeile ohne Inhaltsangabe zwingt zum Oeffnen. */
.cas-x-layer {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%;
  padding: 15px 0; margin-top: 4px;
  border-top: 2px solid var(--tba-purple);
  background: transparent; border-left: none; border-right: none; border-bottom: none;
  font-family: inherit; text-align: left;
}
button.cas-x-layer { cursor: pointer; }
button.cas-x-layer:hover { background: var(--tba-surf-2); }
/* Marke 3x16 px -- passt zur 15-px-Titelzeile (vorher 13 px bei 10-px-Titel).
   Seit 29.08.2026 einheitlich Purple: Die vier Section-Farben sind zurueckgenommen,
   weil sie mit der Brand-Rampe konkurrierten. Was sie leisten sollten -- „hier beginnt
   ein anderer Abschnitt" -- traegt jetzt die Nummer in .cas-x-num, und die sagt
   zusaetzlich, der wievielte es ist. */
.cas-x-mark { flex: none; width: 3px; height: 16px; border-radius: 2px; background: var(--tba-purple); }

/* Abschnitts-Nummer. Uebernimmt die Unterscheidung, die vorher ueber vier Farben lief.
   18x18 px: minimal hoeher als die 15-px-Titelzeile, damit der Badge die Zeile fuehrt
   statt in ihr zu verschwinden. Radius aus dem Bestand (--tba-radius-sm).
   ⚠ Nicht mit .cas-x-sig-rank verwechseln -- das sind die Raenge INNERHALB eines
   Abschnitts, bewusst nur 30 % weiss und ohne Flaeche, damit die Hierarchie stimmt. */
.cas-x-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--tba-radius-sm);
  background: var(--tba-purple); color: var(--tba-white);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
/* ⚠ Die Ziffer kommt aus einem CSS-Zaehler, NICHT aus dem Markup — und das ist keine
   Spielerei. Jeder der vier Abschnitte wird nur bedingt gerendert: Bei einer gesperrten
   Partie faellt „Prognose" weg, ohne Aufstellungsdaten faellt „Voraussichtliche
   Aufstellung" weg. Fest verdrahtete Ziffern ergaben deshalb am 29.08.2026 im Feld
   Folgen wie „1, 3" und bei vier von fuenf geprueften Spielen eine einzeln stehende „3".
   Der Zaehler zaehlt, was tatsaechlich im DOM steht, und bleibt dabei unabhaengig davon,
   in welcher Reihenfolge die selbstladenden Komponenten fertig werden. */
.cas-card, .seo-page { counter-reset: tba-absch; }
.cas-x-num::before { counter-increment: tba-absch; content: counter(tba-absch); }
/* Section-Titel: 16 px/700 VERSALIEN, Laufweite 1 px, weiss (01.09.2026).
   Damit traegt er dieselbe Bauform wie .cas-microlbl („Die groessten Einflussfaktoren") --
   die beiden sind Ueberschriften derselben Familie, nur auf zwei Ebenen. Die Ebene sagen
   Groesse und Helligkeit: Abschnitt 16 px weiss, Unterabschnitt 13 px --tba-purple-light.

   ⚠ Historie, damit der Wechsel nicht als Rueckschritt gelesen wird: Bis 24.08.2026 waren
   es 10 px Versalien -- kleiner als der Fliesstext darunter (11-13,5 px), der Titel las
   sich nicht als Abschnitt. Die Korrektur ging damals auf 15 px GEMISCHT, weil
   „VORAUSSICHTLICHE AUFSTELLUNG" in Versalien die Kopfzeile sprengte. Das lag aber nicht
   an den Versalien, sondern an `flex: none`: Der Titel konnte weder schrumpfen noch
   umbrechen. Seit er `flex: 0 1 auto` + `min-width: 0` hat, gibt er nach -- bei Enge
   bricht er innerhalb der Zeile um, statt sie zu sprengen. Damit traegt das alte Argument
   nicht mehr, und beide Ziele sind gleichzeitig erfuellbar.

   ⚠ Farbe --tba-purple-light, wie .cas-microlbl (Entscheidung des Nutzers, 01.09.2026).
   Damit ist die Regel „Abschnitts-Farbe sitzt an Kachel und Balken, nie am Titel"
   (Design-Guide §2.5, Stand 24.08.2026) aufgehoben -- sie ist dort nachgezogen, nicht
   stillschweigend gebrochen. Die Sorge dahinter war, dass ein gefaerbter Titel mit den
   Werten darunter konkurriert, die ihre Farbe aus einer Bedeutung beziehen. Sie traegt
   hier weniger als 2026-08: Ueberschriften sind seither Versalien und damit als Gattung
   erkennbar, und --tba-purple-light ist im Kartenkontext keine Bedeutungsfarbe, sondern
   die Label-Farbe (Design-Guide §2.1: „Label-Text auf dunkel").

   ⚠ Die Hierarchie traegt jetzt allein die GROESSE (16 gegen 13 px) und die Position --
   der Abschnitts-Titel steht in der Kopfzeile neben Nummer und Balken, das Micro-Label
   im Fliesstext. Wer eine der beiden Groessen aendert, nimmt der Karte ihre Gliederung. */
.cas-x-title {
  flex: 0 1 auto; min-width: 0;
  font-size: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--tba-purple-light);
}
.cas-x-summary {
  flex: 1; min-width: 0; font-size: 11.5px; font-weight: 500;
  color: rgba(255,255,255,0.45);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cas-x-toggle {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.45);
}
/* Die vier farbigen Section-Marken (.cas-x-l2..l5 .cas-x-mark) sind am 29.08.2026
   entfallen, zusammen mit den Klassen selbst: Sie trugen nur die Farbe und waren danach
   funktionslos. Abschnitte unterscheiden sich jetzt ueber die Nummer in .cas-x-num. */
.cas-x-body { padding-bottom: 18px; }

/* ── Ebene 2: Signale ─────────────────────────────────────────────────────────
   Rang · Name + Halbsatz · Gewichtsbalken. Die Prosa darueber bekommt den
   meisten Raum, weil sie der eigentliche Wert ist. */
/* Aufbau seit 01.09.2026: Rang · Text · Prozent in EINER Zeile, der Balken darunter
   ueber die volle Breite. Vorher sass der Balken als 96-px-Kasten rechts neben dem
   Text und nahm ihm auf dem Handy zwei Drittel der Zeile -- Begruendungen zerfielen
   dort in Wortsaeulen. Ueber die volle Breite ist er ausserdem ablesbar: 71 % sind
   jetzt ein langer Balken, vorher 68 von 96 px. */
/* `min-height` haelt die drei Zeilen gleich hoch, obwohl sie ungleich viel tragen: mal mit
   Halbsatz, mal ohne, und die letzte oft ganz ohne Gewicht (dann fehlen Zahl UND Balken).
   Ohne sie sprang die Hoehe je Zeile um bis zu 30 px. 70 px ist die hoechste Ausbaustufe
   (Name + Halbsatz + Balken), alle anderen fuellen auf.
   ⚠ `align-content: center` ist dabei Pflicht: In einem umbrechenden Flex-Container mit
   ueberschuessiger Hoehe werden die Zeilen sonst auseinandergezogen, und der Balken
   rutscht vom Text weg an den unteren Rand. */
.cas-x-signal {
  display: flex; align-items: center; align-content: center;
  gap: 14px; flex-wrap: wrap; row-gap: 9px;
  min-height: 70px; padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.cas-x-sig-rank {
  flex: none; width: 14px; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.30);
}
.cas-x-sig-txt { flex: 1; min-width: 0; }
.cas-x-sig-name { font-size: 12.5px; font-weight: 600; color: var(--tba-white); line-height: 1.35; }
.cas-x-sig-name strong { font-weight: 700; }
.cas-x-sig-note { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.45); line-height: 1.4; margin-top: 2px; }
/* `flex-basis: 100%` zwingt den Balken in eine eigene Zeile, unabhaengig davon, wie
   lang der Text darueber ist. Der Kasten .cas-x-sig-w, der Balken und Prozent
   zusammenhielt, ist damit entfallen -- die beiden stehen jetzt an verschiedenen
   Stellen und haben nichts mehr gemeinsam zu tragen. */
/* 5 px statt 4: Ueber die volle Kartenbreite ist ein 4-px-Band zu duenn, um noch als Balken
   gelesen zu werden — es verschwand am 01.09.2026 im Untergrund. 5 px ist die Hoehe von
   .cas-x-tier-bar, also kein neuer Wert. */
/* `flex: 0 0 100%`, nicht nur `flex-basis: 100%`: Mit der Kurzform ist auch
   `flex-shrink: 0` gesetzt. Bliebe der Default `flex-shrink: 1`, koennte der Balken in
   einem Fall, in dem die Zeile wider Erwarten nicht umbricht, auf nahezu null gequetscht
   werden — und waere dann unsichtbar statt untereinander. */
.cas-x-sig-track {
  flex: 0 0 100%; height: 5px; border-radius: 3px;
  background: var(--tba-surf-3); overflow: hidden;
}
.cas-x-sig-fill { display: block; height: 100%; border-radius: 3px; background: var(--tba-purple); }
/* 15 px/700 weiss: die bestehende Rolle „H3 / Karten-Titel", keine neue
   Groesse. Vorher 11,5 px in --tba-purple-light — kleiner als der Name daneben, obwohl es
   die Messung ist, um die es geht. Ein Zwischenstand am 01.09.2026 stand auf 18 px und war
   zu laut: Die Zahl zog die Zeile an sich, obwohl der Halbsatz sie traegt. 15 px bleibt
   deutlich groesser als der Name (12,5 px) und ordnet sich dem Abschnitts-Titel unter.
   ⚠ Bewusst WEISS, nicht das Gruen der Vorlage: Gruen ist in diesem System
   --tba-out-h, die Farbe fuer HEIMSIEG. Eine Zahl in Heimsieg-Gruen direkt unter dem
   H/D/A-Balken behauptete eine Bedeutung, die sie nicht hat. Farbe traegt hier nur,
   was aus Ausgang, Status oder Vorzeichen kommt -- ein Einflussgewicht ist keins davon. */
.cas-x-sig-pct {
  flex: none; font-size: 15px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--tba-white);
}
.cas-x-tail { font-size: 10.5px; color: rgba(255,255,255,0.32); margin-top: 10px; }

/* ── Ebene 3: Netzdiagramm ────────────────────────────────────────────────────
   Zwei Gitter-Sechsecke (100 % / 50 %) statt eines Gitters je Datenpunkt,
   Achsenbeschriftung ausgeschrieben und ausserhalb des Netzes. */
/* 466 statt 368 px: Die viewBox ist am 01.09.2026 von 300 auf 380 verbreitert worden, damit
   die seitlichen Achsenbeschriftungen nicht mehr abgeschnitten werden. Der Rahmen waechst im
   selben Verhaeltnis mit — dadurch bleibt das NETZ gleich gross (gerenderte Hoehe rund 339 px
   wie vorher), es kommt nur Platz fuer die Beschriftung dazu. */
.cas-x-radar { display: block; width: 100%; max-width: 466px; margin: 4px auto 0; }
.cas-x-legend {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  margin: 2px 0 16px; font-size: 11.5px;
}
.cas-x-lg-item { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.62); }
.cas-x-lg-box { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.cas-x-solo { font-size: 11px; color: rgba(255,255,255,0.42); text-align: center; margin: 2px 0 16px; }

/* ── Ebene 3: Kennwert-Kacheln ────────────────────────────────────────────────
   Eine je Radar-Achse — Diagramm und Zahlen sind dieselbe Aussage in zwei Formen.
   ⚠ Getoent in der Farbe der Mannschaft, FUER die der Wert spricht — nicht der,
   deren Wert dort steht. Das Vorzeichen kommt serverseitig mit (HigherIsBetter). */
.cas-x-kw-lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-bottom: 8px;
}
.cas-x-kw-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.cas-x-kw { padding: 9px 11px; border-radius: 8px; border-left: 2px solid rgba(255,255,255,0.2); }
.cas-x-kw-h { border-left-color: var(--tba-out-h); background: rgba(52,211,153,0.09); }
.cas-x-kw-a { border-left-color: var(--tba-out-a); background: rgba(30,168,235,0.09); }
.cas-x-kw-n { background: var(--tba-surf-2); }
.cas-x-kw-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
/* Weiss statt 72 %: Der Name der Kennzahl benennt, worum es geht („Tore der Elf") — er stand
   gedaempfter da als der Wert daneben und war schwerer zu lesen als die Beschreibung darunter. */
.cas-x-kw-name { font-size: 11.5px; font-weight: 700; color: var(--tba-white); }
.cas-x-kw-team {
  flex: none; padding: 1px 5px; border-radius: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
}
.cas-x-kw-h .cas-x-kw-team { background: rgba(52,211,153,0.18); color: var(--tba-out-h); }
.cas-x-kw-a .cas-x-kw-team { background: rgba(30,168,235,0.18); color: var(--tba-out-a); }
.cas-x-kw-val {
  display: flex; align-items: baseline; gap: 6px; margin-top: 3px;
  font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cas-x-kw-h .cas-x-kw-val { color: var(--tba-out-h); }
.cas-x-kw-a .cas-x-kw-val { color: var(--tba-out-a); }
.cas-x-kw-n .cas-x-kw-val { color: rgba(255,255,255,0.7); }
.cas-x-kw-other { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,0.32); }
.cas-x-kw-desc { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.42); margin-top: 4px; line-height: 1.35; }
.cas-x-kw-more {
  display: block; width: 100%; text-align: right; margin-top: 9px;
  font-size: 10.5px; font-weight: 500; font-family: inherit;
  color: var(--tba-out-a); background: none; border: none; cursor: pointer;
}

/* ── Herkunft der Zahlen (04.09.2026) ────────────────────────────────────────
   „Woraus entsteht dieser Wert?" — die Partien bzw. Spieler dahinter. Freigabe des
   Nutzers am 04.09.2026; fuenf Klassen, keine neue Farbe, kein neuer Abstand.

   ⚠ Der Regel-Satz nutzt das vorhandene `.cas-x-sig-note` (11 px, 45 % Weiss) — dafuer
   braucht es nichts Eigenes.

   ⚠ Bei den zwoelf Kennzahl-Kacheln oeffnet die Tafel UNTER dem Raster, nicht in der
   Kachel: Das Raster hat drei Spalten, und elf Spielernamen passen nicht in eine
   Drittel-Kachel, ohne dass die Nachbarn auseinanderspringen. Bei den drei
   Einflussfaktor-Zeilen klappt sie dagegen in der Zeile selbst auf — dort ist die volle
   Breite da. Immer nur eine Tafel offen. */
.cas-x-src-btn {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  font-family: inherit; color: rgba(255,255,255,0.45);
  background: none; border: none; padding: 0; cursor: pointer;
}
/* surf-3 heisst im Token-Kommentar „hervorgehoben, hover, aktives Segment" — genau das
   ist eine aufgeklappte Tafel. Sie liegt damit UEBER ihrem Untergrund, wie es die
   Flaechen-Rampe verlangt (Design-Guide 2.6). */
.cas-x-src {
  background: var(--tba-surf-3); border-radius: var(--tba-radius-md);
  padding: 10px 12px; margin-top: 8px;
}
/* Festes Raster statt Flex: Fehlt einmal die rechte Zelle, verschoebe ein Flex-Layout
   alles Folgende — derselbe Fehler, der in `.cas-x-row` am 01.09.2026 behoben wurde. */
.cas-x-src-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline;
  padding: 3px 0;
}
.cas-x-src-lbl { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.72); }
.cas-x-src-val { font-size: 11.5px; font-weight: 700; color: var(--tba-white); font-variant-numeric: tabular-nums; }

/* ── Ebene 3: die beiden Aufstellungen ────────────────────────────────────────
   Mannschaftsteil-Label statt eines Positions-Kreises an jeder Zeile: die Gruppe
   sagt es einmal statt elfmal, und die Formation wird dadurch sichtbar. */
.cas-x-xi-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08);
}
.cas-x-xi-note { font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.32); text-align: right; }
.cas-x-xi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.cas-x-xi-col {
  border-radius: 11px; padding: 11px 12px 12px;
  background: var(--tba-surf-2);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 2px solid rgba(255,255,255,0.2);
}
.cas-x-xi-h { border-top-color: var(--tba-out-h); }
.cas-x-xi-a { border-top-color: var(--tba-out-a); }
/* Dezente Trennlinie zwischen Mannschaftskopf und Spielerliste (29.08.2026): Der Kopf
   traegt Name, Form und Formation — ohne Linie laufen diese drei Angaben optisch in die
   erste Spielerzeile hinein. Bewusst schwach (8 % Weiss) und nicht purple: Die kraeftige
   Purple-Linie markiert den Beginn eines ABSCHNITTS, hier geht es nur um eine Zeile
   innerhalb eines Abschnitts. Zwei gleich starke Linien machten die Hierarchie flach. */
.cas-x-xi-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* flex:1 seit 29.08.2026: Im Kopf stehen jetzt DREI Elemente (Name · Elf-Form ·
   Formation). Ohne das schoebe `space-between` die Form-Pille in die Mitte statt
   sie rechts an die Formation zu setzen. */
.cas-x-xi-name {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--tba-white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cas-x-xi-pill {
  flex: none; padding: 2px 8px; border-radius: 9px;
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Form und Trend der GANZEN Elf, neben Name und Formation (29.08.2026).
   Bewusst dieselbe neutrale Flaeche wie die Spieler-Pille .cas-x-formc, nur eine
   Stufe groesser (11 px gegen 9 px): So liest sich die Beziehung als „dasselbe fuer
   die Mannschaft" statt als neue Art von Angabe. Die Farbe bleibt neutral — die
   mannschaftsfarbige Pille daneben traegt die Formation, zwei farbige Pillen
   nebeneinander wuerden um dieselbe Aufmerksamkeit konkurrieren.
   ⚠ Der Wert ist ein SCHNITT (2,7 / 4), keine Stufe wie beim Spieler — die
   Nachkommastelle sagt das. Schwellen: Core.Models.PlayerFormLevels. */
.cas-x-xi-form {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.88);
  cursor: help;
}
/* Fuellbalken statt Zahl-Pille (29.08.2026). Eine Pille „2,7 / 4" zwingt zum Rechnen:
   Man muss den Wert erst ins Verhaeltnis setzen, um zu wissen, ob das viel ist. Der
   Balken zeigt Anteil und Skala in einem Blick. Bewusst dasselbe Muster wie die
   Gewichtsbalken der Einflussfaktoren (.cas-x-sig-track/-fill) — dort steht schon ein
   Balken fuer „wie viel von wie viel", zwei Bauweisen fuer dieselbe Frage waeren eine
   zu viel. Die Zahl bleibt daneben stehen, weil der Balken allein nicht sagt, dass die
   Skala bei 4 endet. */
.cas-x-xi-form-track {
  flex: none; width: 44px; height: 5px; border-radius: 3px;
  background: var(--tba-surf-3); overflow: hidden;
}
.cas-x-xi-form-fill { display: block; height: 100%; border-radius: 3px; background: var(--tba-purple-light); }
.cas-x-xi-form-val { line-height: 1; }
/* Der Mannschafts-Pfeil ist am 01.09.2026 aus der Anzeige entfallen (er sass neben dem
   Formwert der Elf und las sich als „Form der Elf steigt"); die Regel dafuer ist mit ihm
   weg. Auch der Platz-Trend je Spieler wird seit demselben Tag nicht mehr gezeigt. */
.cas-x-xi-h .cas-x-xi-pill { background: rgba(52,211,153,0.14); color: var(--tba-out-h); }
.cas-x-xi-a .cas-x-xi-pill { background: rgba(30,168,235,0.14); color: var(--tba-out-a); }
.cas-x-line {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.26); margin: 9px 0 3px;
}
.cas-x-line-first { margin-top: 0; }
/* ⚠ RASTER, nicht Flex (01.09.2026). Die Zeile hat zwei optionale Zellen — das
   Kapitaens-C und die Formzahl. Im Flex-Layout ruecken bei einer fehlenden Zelle alle
   folgenden nach rechts: Ein Spieler ohne Formwert schob seine Prozentzahl an den
   rechten Rand, und die Spalte stand nicht mehr untereinander. Feste Spuren loesen das,
   weil jede Zeile dieselben fuenf Spuren hat, ob sie gefuellt sind oder nicht.
   ⚠ Damit das traegt, muessen ALLE fuenf Zellen immer im Markup stehen — leere Zellen
   statt weggelassener. Siehe CasualExpectedLineup.
   ⚠ Die Prozentspur ist fest (36 px = „100 %"): `auto` waere hier wirkungslos, weil jede
   Zeile ihr eigenes Raster ist und sich Spurbreiten nicht ueber Zeilen hinweg angleichen. */
.cas-x-row {
  display: grid; grid-template-columns: 6px minmax(0,1fr) 11px 36px 17px;
  align-items: center; gap: 6px; padding: 2px 0;
}
.cas-x-row-name {
  min-width: 0; font-size: 12px; font-weight: 600; color: var(--tba-white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cas-x-cap {
  padding: 0 2px; border-radius: 4px; font-size: 9px; font-weight: 700; text-align: center;
  background: var(--tba-surf-3); color: rgba(255,255,255,0.55);
}
/* Rechtsbuendig, damit die Zahlen unter- und nicht nebeneinander stehen. */
.cas-x-pct { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Statuspunkte — ZWEI Stufen, beide gefuellt.
   Das Handoff sah vier vor (gesetzt / wahrscheinlich / angeschlagen / offen-als-Ring).
   Keiner der beiden weggefallenen hat eine Grundlage:
   • `angeschlagen` — ein Ausfall-Status je Spieler existiert im Payload nicht. Die
     Kreis-Glyphen im Ist-Zustand waren der Kapitaens-Marker, keine Verletzung.
   • `offen` — gemessen an 20.603 Spielernennungen gegen die tatsaechliche Startelf
     stand selbst das unterste Zehntel zu 55,0 % wirklich drin. Das Wort behauptete
     eine offene Frage, wo die Daten „etwas schwaecher belegt" sagen. Die Feinabstufung
     traegt die Einsatzquote in Prozent daneben.
   Schwelle und Stufennamen: TheBetAI.Core.Models.ExpectedLineupLevels. */
.cas-x-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; box-sizing: border-box; }
.cas-x-dot-set    { background: var(--tba-out-h); }
.cas-x-dot-likely { background: var(--tba-purple); }
.cas-x-txt-set    { color: var(--tba-out-h); }
.cas-x-txt-likely { color: var(--tba-purple-light); }

/* Form-Niveau (1–4) als Pille am Zeilenende.
   ⚠ UMGEBAUT am 01.09.2026. Vorher trug diese Pille Zahl UND Trendpfeil zusammen
   (`4▲`), hue-frei, Stufe 4 nur ueber Helligkeit hervorgehoben. Rueckmeldung des
   Nutzers: „Wenn ein Spieler in die Formation rueckt, bekommt er ebenfalls einen
   gruenen Pfeil, genauso wie sein Trend." Der Befund stimmt — ein gruener Pfeil
   direkt neben einer Formzahl liest sich zwangslaeufig als „Form steigt", gemeint
   war aber der Platz in der Startelf. Ein Zeichen, zwei Bedeutungen.

   Seitdem: Die Zahl traegt die FARBE der Stufe, der Platz-Trend ist ein eigener
   Chip neben dem NAMEN — und ist am selben Tag ganz entfallen. Die frueheren Klassen .cas-x-formc-hi und
   .cas-x-trend-* sind damit entfallen.

   ⚠ Die Skala hat VIER Stufen und die Palette drei Farben — Stufe 4 bekommt
   deshalb die gefuellte Flaeche statt einer vierten Farbe. Sonst saehen 3 und 4
   gleich aus. Das setzt fort, was .cas-x-formc-hi vorher tat: die 4 hervorheben.
   ⚠ Ohne Grundlage entfaellt die Pille ganz — es gibt bewusst KEINE neutrale Variante.
   In der Karte ist die Zeile schmal und die Pille optional; eine „1" ohne Grundlage
   behauptete „Form schwach", wo „zu wenige bewertete Einsaetze" gilt. Anders in der
   Marketing-Vorlage: Dort ist es eine feste Spalte, und eine leere Zelle in einer
   Tabelle liest sich als Fehler — deshalb steht dort ein neutraler Gedankenstrich.
   ⚠ Dieselbe Zuordnung steckt in MarketingTokens.Formfarbe (Bild-Erzeugung) und in
   der Legende der Aufstellungs-Vorlage. Wer eine aendert, zieht die anderen nach. */
.cas-x-formc {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; padding: 1px 5px; border-radius: 7px;
  background: var(--tba-surf-2);
  font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.72);
}
.cas-x-formc-1    { color: #F87171; }
.cas-x-formc-2    { color: var(--tba-orange); }
.cas-x-formc-3    { color: var(--tba-out-h); }
.cas-x-formc-4    { background: var(--tba-out-h); color: var(--tba-dark); }
/* Ohne Grundlage: neutraler Gedankenstrich, nicht rot — ein rotes „–" laese sich als
   schwache Form, gemeint ist „zu wenige bewertete Einsaetze". Die Zelle bleibt stehen,
   weil `.cas-x-row` feste Spuren hat. */
.cas-x-formc-none { color: rgba(255,255,255,0.38); }

/* ⚠ Der Platz-Trend wird NICHT MEHR ANGEZEIGT (01.09.2026, Entscheidung des Nutzers).
   Die Spielerzeile traegt nur noch Einsatzquote und Form.

   Drei Anlaeufe an einem Tag, damit sie niemand wiederholt: Pfeil an der Formzahl (las
   sich als „Form steigt"), Chip „mehr Einsatz"/„weniger" (benannte die Messgroesse statt
   der Lage), Chip „rueckt rein"/„Wackelkandidat". Danach die Entscheidung: ganz weg.
   Zwei Angaben je Zeile reichen; die dritte hat in jeder Fassung mehr Fragen aufgeworfen
   als beantwortet. Die Klassen .cas-x-move* sind mit ihr entfallen.

   Der Wert selbst (`formTrend`) wird weiter berechnet und steckt noch in den Tooltips. */

/* Pfeil, nur noch in der Legende: Dort steht er IM Chip und ist damit beschriftet. */
.cas-x-xi-legend {
  display: flex; gap: 13px; flex-wrap: wrap; margin-top: 12px;
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.5);
}
.cas-x-xi-legend span { display: inline-flex; align-items: center; gap: 6px; }
/* Ausnahme fuer den Erklaertext: Er ist Fliesstext, kein Chip. Als `inline-flex` wird
   jeder Textabschnitt zwischen den Pfeil-<i> zu einem eigenen anonymen Flex-Item —
   die brechen nicht gemeinsam um, sondern werden einzeln auf ihre Mindestbreite
   gequetscht. Auf dem Handy stand deshalb ein Wort je Zeile („rueckt / in / die / Elf").
   `display: block` gibt den normalen Textfluss zurueck, `flex-basis: 100%` stellt die
   Zeile unter die Chips statt neben sie. Die Pfeile bleiben inline und laufen mit. */
.cas-x-xi-legend .cas-x-xi-legend-note {
  display: block;
  flex-basis: 100%;
  line-height: 1.6;
}
.cas-x-basis { font-size: 10.5px; color: rgba(255,255,255,0.32); margin-top: 10px; }

/* ── Ebene 4 ──────────────────────────────────────────────────────────────────
   Der Kleine-Stichprobe-Hinweis ist Pflicht: Eine 33-%-Quote aus sechs Faellen
   als grosse Kachel zu zeigen, waere die unehrlichste Stelle der Karte.
   Schwelle zentral in TheBetAI.Core.Services.SampleConfidence. */
.cas-x-hit {
  display: flex; align-items: center; gap: 15px; padding: 12px 15px;
  border-radius: 11px; background: var(--tba-surf-2);
}
.cas-x-hit-box { flex: none; text-align: center; }
.cas-x-hit-num {
  font-size: 24px; font-weight: 800; line-height: 1; color: var(--tba-out-h);
  font-variant-numeric: tabular-nums;
}
.cas-x-hit-num-weak { color: rgba(255,255,255,0.72); }
.cas-x-hit-rand {
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.4px;
  color: rgba(255,255,255,0.42); margin-top: 4px;
}
.cas-x-hit-txt { flex: 1; font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,0.7); line-height: 1.5; }
.cas-x-hit-warn { color: var(--tba-gold); font-weight: 600; }

.cas-x-tier { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.cas-x-tier-stars { flex: none; width: 56px; font-size: 11px; line-height: 1; }
.cas-x-tier-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--tba-surf-3); overflow: hidden; }
.cas-x-tier-fill { display: block; height: 100%; border-radius: 3px; background: rgba(255,255,255,0.5); }
.cas-x-tier-pct {
  flex: none; width: 34px; text-align: right; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.5);
}
/* Farbe nach Hoehe — sonst sieht man nicht, dass 5★ traegt und 2★ nicht. */
.cas-x-tier-good .cas-x-tier-fill { background: var(--tba-out-h); }
.cas-x-tier-good .cas-x-tier-pct  { color: var(--tba-out-h); }
.cas-x-tier-mid  .cas-x-tier-fill { background: var(--tba-purple); }
.cas-x-tier-mid  .cas-x-tier-pct  { color: var(--tba-purple-light); }

.cas-x-streak { display: flex; gap: 5px; margin-top: 6px; }
.cas-x-cell {
  flex: 1; height: 22px; border-radius: 5px; display: flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.cas-x-cell-hit  { background: rgba(52,211,153,0.18); color: var(--tba-out-h); }
.cas-x-cell-miss { background: rgba(248,113,113,0.14); color: #F87171; }

/* ── Fusszeile ────────────────────────────────────────────────────────────────
   Der Zeitstempel war eine eigene Zeile mit Trennlinie — er gehoert hierher. */
.cas-x-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 24px -22px -20px; padding: 13px 22px;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-radius: 0 0 16px 16px;
}
.cas-x-stamp { font-size: 10.5px; font-weight: 400; letter-spacing: 0.3px; color: rgba(255,255,255,0.3); }
.cas-x-foot a { font-size: 12px; font-weight: 600; color: var(--tba-purple-light); text-decoration: none; }
.cas-x-foot a:hover { color: var(--tba-white); }

@media (max-width: 600px) {
  .cas-x-head { padding: 15px 16px 17px; }
  /* 16 px statt 13: zieht die Desktop-Anhebung mit. Bei 360 px bleiben neben dem
     22-px-Ergebnis rund 97 px je Name — kurze Namen einzeilig, lange zweizeilig. */
  .cas-x-team { font-size: 16px; }
  .cas-x-score { font-size: 22px; padding: 5px 12px; }
  /* `1fr` heisst `minmax(auto, 1fr)` — die Spalte kann nicht unter ihre Inhaltsbreite
     schrumpfen. Die laengsten Kennwerte („Bewertung der Elf" samt Team-Badge) brauchen
     rund 160 px; zwei Spalten ergaben damit 327 px, verfuegbar sind auf einem 360-px-
     Geraet aber nur 296 px (Viewport minus App-Container- minus Karten-Innenabstand).
     Die rechte Spalte lief deshalb aus der Karte — am 31.08.2026 abgeschnittene Werte
     („LEC 4.6", „Torschuss entstand…"). `minmax(0, …)` erlaubt der Spalte nachzugeben. */
  .cas-x-kw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cas-x-xi { grid-template-columns: 1fr; }
  /* 365 statt 288 (= 288 x 380/300). Auf schmalen Geraeten greift ohnehin `width: 100%`;
     das Netz faellt dort rund ein Fuenftel kleiner aus als vorher, weil ein Teil der Breite
     jetzt an die Beschriftung geht. Lesbare Achsen gehen vor Netzgroesse. */
  .cas-x-radar { max-width: 365px; }
  /* Kopfzeile der Elf-Spalte umbrechen lassen (01.09.2026). Sie traegt drei Dinge:
     Vereinsname, Formwert der Elf und die Formations-Pille. Nebeneinander bleiben dem
     Namen auf einem 360-px-Geraet rund 110 px — „Wolfsberger AC" wurde zu „Wolfsberg…"
     gekuerzt, und die Pille stand hart an der Kartenkante.
     Umbrochen bekommt der Name die volle Spaltenbreite und wird wieder ganz gelesen;
     Formwert und Formation ruecken darunter, die Formation rechtsbuendig ans Ende. */
  .cas-x-xi-top { flex-wrap: wrap; row-gap: 6px; }
  .cas-x-xi-name { flex-basis: 100%; white-space: normal; }
  .cas-x-xi-pill { margin-left: auto; }
  /* „Voraussichtliche Aufstellung" ist als Versalien-Titel rund 215 px breit —
     neben Marke und Schalter bliebe fuer die Zusammenfassung nichts uebrig. Statt
     sie wegzukuerzen (sie ist laut Design-Guide Pflicht) rutscht sie auf eine
     eigene Zeile. */
  .cas-x-layer { padding: 14px 0; min-height: 44px; flex-wrap: wrap; row-gap: 4px; }
  /* Der Titel muss nachgeben duerfen. Mit `flex: none` konnte "Voraussichtliche
     Aufstellung" (15 px/700, rund 215 px) weder schrumpfen noch umbrechen und sprang
     deshalb auf dem Handy in eine eigene Zeile -- Nummer und Balken blieben allein
     darueber stehen. Damit sass der Schalter nicht mehr in derselben Zeile, sein
     `margin-left: auto` fiel weg, das sonst den Freiraum aufbraucht, und die Zeile
     rutschte in die Button-Mittenausrichtung: Die drei Abschnitts-Kopfzeilen brachen
     jede anders um, zwei zentriert, eine linksbuendig (gesehen 01.09.2026, Android).
     `flex: 1 1 auto` + `min-width: 0` haelt Nummer, Balken, Titel und Schalter in
     EINER Zeile; ist der Titel zu lang, bricht er innerhalb dieser Zeile um. */
  /* ⚠ Die Nachgiebigkeit des Titels steht seit 01.09.2026 in der Basisregel
     (`flex: 0 1 auto` + `min-width: 0`) und gilt damit auf jeder Breite. Hier bleibt nur
     das `flex-grow`, damit der Titel auf dem Handy die Zeile fuellt und der Schalter an
     den rechten Rand rutscht statt direkt hinter den Titel. */
  .cas-x-title { flex-grow: 1; }
  .cas-x-summary { flex-basis: 100%; order: 3; white-space: normal; }
  .cas-x-toggle { margin-left: auto; }
  /* ⚠ Hier stand am Vormittag des 01.09.2026 eine Regel, die den Gewichtsbalken auf dem
     Handy ausblendete, weil der 96-px-Kasten dem Text zwei Drittel der Zeile nahm.
     Sie ist entfallen, weil .cas-x-signal seither ohnehin umbricht: Der Balken liegt
     jetzt UNTER dem Text und nimmt ihm keine Breite mehr weg. Die Zeile braucht auf
     dem Handy nichts Eigenes mehr. */
  .cas-x-tier-stars { width: 48px; }
  .cas-x-foot { padding: 12px 16px; }
}

/* Unter 560 px tragen zwei Spalten nicht mehr: Es blieben rund 122 px Textbreite je
   Kachel, und darin zerfallen Beschreibungen wie „Durchschnittliche Spielerbewertung der
   voraussichtlichen Elf in den letzten Partien" in Wortsaeulen — lesbar ist das nicht
   mehr. Eine Spalte macht die Karte laenger, aber die Kennwerte wieder erfassbar.
   560 px ist bereits der Umschaltpunkt von `.cas-xi`; kein neuer Breakpoint. */
@media (max-width: 560px) {
  .cas-x-kw-grid { grid-template-columns: 1fr; }
}

/* Sektions-Ueberschrift der Spielseite mit Ebenen-Marke (24.08.2026).
   Uebernimmt das Erkennungsmerkmal der Karte — den 3x13-px-Balken in der Ebenenfarbe —
   ohne die Ueberschrift auf die 10 px der Karte zu schrumpfen: Auf einer Seite in voller
   Breite waere das keine Ueberschrift mehr, sondern ein Etikett. Groesse und Farbe
   bleiben also .seo-ctx-h2/.seo-why-h2 (19 px/700 weiss), dazu kommt nur die Marke.
   Nummer und Balken kommen wie in der Karte aus .cas-x-num und .cas-x-mark. */
/* Trennlinie unter JEDER Section-Ueberschrift. Sie lag vorher als `border-top` auf
   .seo-ctx und erschien deshalb nur unter „Zahlen zur Partie" — die einzige Section
   mit dieser Tabelle. An der Ueberschrift gilt sie fuer alle. */
.seo-h2-marked {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 12px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Auf der Seite ist die Ueberschrift 19 px hoch — die Marke waechst mit, sonst haengt
   ein 16-px-Balken neben einer 19-px-Zeile. Die Farbe ist wie in der Karte --tba-purple. */
.seo-h2-marked .cas-x-mark { height: 20px; width: 3.5px; }
/* Aus demselben Grund waechst die Abschnitts-Nummer mit: 18 px neben einer 19-px-Zeile
   saehe aus wie verrutscht. */
.seo-h2-marked .cas-x-num { width: 21px; height: 21px; font-size: 12px; }

/* ── Spielseite: H1 als Paarung (24.08.2026) ──────────────────────────────────
   Die H1 traegt Heim · Ergebnis · Gast wie die Paarung in der Spielkarte. Modifier
   statt Aenderung an .seo-h1, weil dieselbe Klasse auch die Spieltags- und Hub-Seite
   ueberschreibt, wo die H1 ein normaler Titel ist.

   ⚠ .seo-h1 faerbt ihren Text ueber `background-clip: text` mit einem Verlauf. Das
   macht JEDEN Kindtext transparent — der Score-Kasten muss sich mit
   `-webkit-text-fill-color: initial` daraus loesen, sonst bleibt die Zahl unsichtbar.
   Der Kasten-HINTERGRUND ist nicht betroffen (background-clip gilt je Element). */
.seo-h1-pair { display: flex; align-items: center; gap: 16px; }
.seo-h1-team { flex: 1; min-width: 0; }
.seo-h1-team-h { text-align: right; }
.seo-h1-team-a { text-align: left; }
.seo-h1-pair .cas-x-score {
  flex: none; font-size: 30px;            /* auf Augenhoehe mit den 30-px-Namen */
  -webkit-text-fill-color: initial;
}

@media (max-width: 600px) {
  /* Zwei Vereinsnamen plus Ergebnis passen bei 30 px nicht nebeneinander. */
  .seo-h1-pair { gap: 10px; }
  .seo-h1-team { font-size: 19px; letter-spacing: -0.2px; }
  .seo-h1-pair .cas-x-score { font-size: 21px; padding: 4px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Schaukasten im Hero der Landing (`LandingShowcase.razor`)

   Auszug aus der aufgeklappten Spielkarte, gestaltet für den **dunklen** Hero.
   Die Dashboard-Karte (`.cas-*`) steht auf hellem Grund und liesse sich hier nicht
   wiederverwenden; das Netzdiagramm dagegen schon — es kommt unveraendert aus
   `ExpectedLineupRadar` und war von Anfang an für dunkle Flaechen gebaut.

   Farben stammen ausnahmslos aus den bestehenden Tokens: Heim `--tba-out-h`,
   Gast `--tba-out-a`, Unentschieden `--tba-out-d`, Gold `--tba-gold` für die
   Sicherheit. Keine neue Farbe, kein neuer Radius.
   ═══════════════════════════════════════════════════════════════════════════ */

.showcase {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(111,101,216,0.32);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  color: #fff;
}

/* ── 1 Kopfzone ──────────────────────────────────────────────────────────
   Eigene Flaeche, die bis an den Kartenrand laeuft: negative Margins heben den
   Innenabstand der Karte auf, damit die dunklere Zone buendig sitzt. */
.sc-head {
  /* wie .cas-x-head: keine eigene Flaeche (01.09.2026) */
  margin: -20px -22px 0;
  padding: 14px 22px 16px;
  border-radius: 16px 16px 0 0;
}

.sc-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.42);
  margin-bottom: 10px;
}

.sc-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.sc-team {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
}
.sc-team-home { text-align: right; }

/* Der Ergebnisblock traegt die Ausgangsfarbe des führenden Ausgangs. Ohne
   Prognose bleibt er neutral — eine Farbe waere dort eine Aussage. */
.sc-score {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 9px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
}
.sc-score-h { background: rgba(52,211,153,0.14);  color: var(--tba-out-h); }
.sc-score-d { background: rgba(127,119,221,0.16); color: var(--tba-out-d); }
.sc-score-a { background: rgba(30,168,235,0.14);  color: var(--tba-out-a); }

/* Ersatzform „Heimsieg 54 %" braucht deutlich weniger Groesse als „2 : 1". */
.sc-score:not(.sc-score-h):not(.sc-score-d):not(.sc-score-a) { font-size: 15px; }

/* Wahrscheinlichkeits-Podium unter dem Ergebnis. Die Komponente bringt ihr eigenes
   Aussehen mit (`CasualOutcomeBar`); hier steht nur der Abstand. */
.sc-bars { margin-top: 13px; }

/* Sicherheits-Badge: bewusst die Klassen der Dashboard-Karte (`cas-x-conf`), damit
   Sterne, Toenung und Erklaersatz nicht in zwei Fassungen auseinanderlaufen. Hier steht
   nur der Abstand in der Kopfzone des Schaukastens. */
.sc-head .cas-x-conf { margin-top: 12px; }

/* ── 2 Prosa ─────────────────────────────────────────────────────────── */
.sc-prose {
  margin: 16px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--tba-purple);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.74);
}

/* ── Abschnitte ──────────────────────────────────────────────────────── */
.sc-sec { margin-top: 18px; }

.sc-sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
}
.sc-sec-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.52);
}
.sc-sec-note { font-size: 10px; color: rgba(255,255,255,0.3); white-space: nowrap; }

.sc-note {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.5);
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 9px;
}

/* ── 3 Einflussfaktoren ──────────────────────────────────────────────── */
.sc-inf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}
.sc-inf-txt {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,0.78);
}
.sc-inf-val { width: 82px; flex-shrink: 0; }
.sc-inf-pct {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--tba-purple-light);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sc-inf-track {
  display: block;
  height: 4px;
  margin-top: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.sc-inf-fill {
  display: block;
  height: 100%;
  background: var(--tba-purple);
  border-radius: 2px;
}

/* ── 4 Netzdiagramm + Kennwerte ──────────────────────────────────────── */
.sc-split {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 20px;
  align-items: center;
}
.sc-radar svg { width: 100%; height: auto; display: block; }

.sc-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 2px;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
}
.sc-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.sc-legend-sq { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.sc-sq-home { background: var(--tba-out-h); }
.sc-sq-away { background: var(--tba-out-a); }

.sc-kws { display: flex; flex-direction: column; gap: 7px; }

/* Linker Rand und Toenung in der Farbe des führenden Teams — dieselbe Sprache
   wie im Netzdiagramm, damit man beide ohne Legende zusammenbringt. */
.sc-kw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 0 7px 7px 0;
  border-left: 2px solid transparent;
}
.sc-kw-home { border-left-color: var(--tba-out-h); background: rgba(52,211,153,0.07); }
.sc-kw-away { border-left-color: var(--tba-out-a); background: rgba(30,168,235,0.07); }

.sc-kw-lbl { font-size: 11px; color: rgba(255,255,255,0.6); }
.sc-kw-vals { text-align: right; flex-shrink: 0; }
.sc-kw-lead {
  display: block;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sc-kw-home .sc-kw-lead { color: var(--tba-out-h); }
.sc-kw-away .sc-kw-lead { color: var(--tba-out-a); }
.sc-kw-sub {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.38);
}

/* ── 5 Startelf-Auszug ───────────────────────────────────────────────── */
.sc-xi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.sc-xi-col { border-top: 2px solid transparent; padding-top: 8px; }
.sc-xi-home { border-top-color: var(--tba-out-h); }
.sc-xi-away { border-top-color: var(--tba-out-a); }

.sc-xi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 7px;
}
.sc-xi-team {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-xi-form {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
}

/* ⚠ Raster wie `.cas-x-row` und aus demselben Grund (01.09.2026): Prozentzahl und
   Formzahl sind beide optional, und im Flex-Layout ruecken bei einer fehlenden Zelle alle
   folgenden nach rechts — die Spalten standen dann nicht mehr untereinander. Alle vier
   Zellen stehen deshalb immer im Markup, auch leer. Siehe LandingShowcase. */
.sc-row {
  display: grid;
  grid-template-columns: 6px minmax(0,1fr) 34px 17px;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.sc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sc-dot-set    { background: var(--tba-out-h); }
.sc-dot-likely { background: var(--tba-purple-light); }

.sc-row-name {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sc-row-pct {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-pct-set    { color: var(--tba-out-h); }
.sc-pct-likely { color: var(--tba-purple-light); }

/* Form-Niveau und Trend nutzen bewusst die Klassen der Dashboard-Karte
   (`cas-x-formc`) — siehe LandingShowcase.razor. Der Schaukasten ist
   ein Auszug aus dieser Karte; zwei Darstellungen derselben Zahl lesen sich als zwei
   Sachen. Deshalb steht hier kein eigenes Form-CSS. */

.sc-xi-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 9px;
  font-size: 9.5px;
  color: rgba(255,255,255,0.34);
}
.sc-xi-legend span { display: inline-flex; align-items: center; gap: 4px; }

/* ── 6 Fusszeile ─────────────────────────────────────────────────────── */
.sc-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px -22px -20px;
  padding: 11px 22px;
  border-top: 1px solid rgba(255,255,255,0.07);  /* statt eigener Flaeche, wie .cas-x-foot */
  border-radius: 0 0 16px 16px;
  font-size: 10.5px;
  color: rgba(255,255,255,0.45);
}
.sc-more strong { color: rgba(255,255,255,0.68); font-weight: 600; }
.sc-more-link {
  color: var(--tba-purple-light);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.sc-more-link:hover { text-decoration: underline; }

/* ── Schmale Fenster ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Das Netzdiagramm braucht Breite, um lesbar zu bleiben; nebeneinander mit den
     Kennwerten wird es unter 900px zu klein. Untereinander bleibt beides lesbar. */
  .sc-split { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 700px) {
  .showcase { padding: 16px 16px; }
  .sc-head  { margin: -16px -16px 0; padding: 12px 16px 14px; }
  .sc-more  { margin: 16px -16px -16px; padding: 10px 16px; }
  .sc-score { font-size: 19px; }
  /* Zwei Elf-Spalten nebeneinander sind auf dem Handy zu eng für Name,
     Prozentwert, Formmeter und Pfeil in einer Zeile. */
  .sc-xi { grid-template-columns: 1fr; gap: 12px; }
}