/* =============================================================================
 *  theme-cl.css  —  Champions-League-Farbwelt (dunkelblau + hellblau)
 *
 *  Wird NUR bei aktivem CL-Turnier geladen (siehe Theme-Hook in
 *  tournament-config.js) und ist zusätzlich strikt auf CL-Turniere
 *  gescoped: alle Regeln hängen an `:root[data-tournament^="cl"]` bzw.
 *  `[data-tournament^="cl"] …`. Die WM 2026 (`data-tournament="wm2026"`)
 *  wird dadurch NIE getroffen und bleibt grün/gold – unabhängig davon, ob
 *  diese Datei geladen ist.
 *
 *  Die konkreten Farben kommen bevorzugt aus CSS-Variablen (`--cl-*`), die
 *  der Theme-Hook aus den `theme`-Tokens (CL_THEME) injiziert; die Werte
 *  hier sind Fallbacks. Farben also am besten zentral über CL_THEME in
 *  tournament-config.js anpassen.
 *
 *  Umfang: Dies ist die Basis-Farbwelt (Rahmen: Navigation, Hintergrund,
 *  Akzente, Palette-Variablen). Der vollständige club-zentrierte Umbau der
 *  einzelnen Ansichten kommt mit den CL-eigenen View-Dateien; diese
 *  konsumieren dieselbe Palette.
 * ============================================================================= */

:root[data-tournament^="cl"] {
  --cl-primary: #3d8bff;
  --cl-accent: #7db4ff;
  --cl-background: #0a1633;
  --cl-surface: #132347;
  --cl-surface-alt: #0f1c3d;
  --cl-text: #dce8ff;
  --cl-text-muted: #9db6e8;
  --cl-nav-gradient: linear-gradient(135deg, #081029 0%, #10265a 45%, #16346f 100%);

  /* Geteilte styles.css-Variablen auf die CL-Palette umlenken (nur CL). */
  --primary: var(--cl-primary);
  --dark: var(--cl-surface);
  --light: var(--cl-background);

  /* ── Grün/Gold → Blau ────────────────────────────────────────────────
   * Die Views definieren ihr Grün/Gold als Variablen (Originalwerte = WM).
   * Hier werden GENAU diese Variablen im CL-Scope auf die Blau-Palette
   * umgelenkt – dadurch werden alle grün/gold gefärbten Texte, Ränder,
   * Verläufe, Schatten und Flächen blau, ohne die (eingefrorene) WM zu
   * berühren. Zwei Text-Blautöne wie in der Navbar: Hellblau (--cl-accent)
   * und etwas dunkleres Blau (--cl-primary). */
  --green-light: var(--cl-accent);     /* hellblau  (war Haupt-Grünton) */
  --green-main: var(--cl-primary);     /* dunkleres Blau */
  --green-deep: var(--cl-primary);
  --green-accent: var(--cl-primary);
  --green-glow: rgba(61, 139, 255, 0.35);
  --gold: var(--cl-accent);            /* Gold → Hellblau */
  --gold-light: #a9cbff;
  --gold-dark: var(--cl-primary);
  --gold-amber: var(--cl-primary);
  --gold-amber2: #2f6fd0;
  /* RGB-Tripel (für rgba(var(--…), α)-Verläufe/Schatten) → Blau-Tripel. */
  --rgb-green-1: 61, 139, 255;         /* = --cl-primary */
  --rgb-green-2: 61, 139, 255;
  --rgb-green-3: 125, 180, 255;        /* = --cl-accent */
  --rgb-gold: 125, 180, 255;
  --rgb-amber: 61, 139, 255;

  /* Weitere Grün-/Gold-/Gelb-Töne (2. Durchgang) → Blau. */
  --rgb-green-light: 125, 180, 255;    /* helles Grün (#4ade80) → Hellblau */
  --rgb-gold-light: 125, 180, 255;
  --rgb-yellow: 125, 180, 255;
  --rgb-orange: 61, 139, 255;
  --rgb-green-dark: 15, 28, 61;        /* dunkles Grün → dunkles Blau */
  --rgb-green-darker: 8, 15, 27;
  --rgb-amber-d1: 15, 28, 61;
  --rgb-amber-d2: 18, 32, 66;
  --rgb-amber-d3: 14, 24, 48;
  --gold-cream: #a9cbff;
  --yellow-pale: #a9cbff;
  --yellow-paler: #cfe0ff;
  --green-dark: var(--cl-primary);

  /* Auth-Modal-Töne (auth-modal.css nutzt var(--…, Original) mit Fallback). */
  --green-bright: var(--cl-primary);
  --green-mint: var(--cl-accent);
  --green-pale: #cfe0ff;
  --green-navdark: #10265a;
  --gold-warm: var(--cl-accent);
  --rgb-gold-amber: 125, 180, 255;

  /* Fussball-„Rasen" (grüne Streifen) → blaues Spielfeld, Streifen-Tiefe bleibt. */
  --pitch-a: #16346f;
  --pitch-b: #1a3f82;
  --pitch-c: #1f4d96;
  --pitch-d: #10265a;
  --pitch-e: #14356f;

  /* Dunkelgrüne Basis-Verläufe (Hero-/Dashboard-Atmosphäre) → dunkelblau. */
  --green-bg-1: #0a1633;
  --green-bg-2: #081029;
  --green-bg-3: #0a1633;
}

/* ── Seite ──────────────────────────────────────────────────────────── */
[data-tournament^="cl"] body {
  background-color: var(--cl-background, #0a1633);
  color: var(--cl-text, #dce8ff);
}

[data-tournament^="cl"] a {
  color: var(--cl-accent, #7db4ff);
}

/* ── Obere Navigation ───────────────────────────────────────────────── */
[data-tournament^="cl"] .navbar {
  background: var(--cl-nav-gradient, linear-gradient(135deg, #081029 0%, #10265a 45%, #16346f 100%));
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

[data-tournament^="cl"] .navbar-brand .brand-gold {
  color: var(--cl-accent, #7db4ff);
}

[data-tournament^="cl"] .navbar-brand .brand-green {
  color: var(--cl-primary, #3d8bff);
}

[data-tournament^="cl"] .nav-links a {
  background: rgba(255, 255, 255, 0.08);
}

[data-tournament^="cl"] .nav-links a:hover,
[data-tournament^="cl"] .nav-links a.active {
  background: var(--cl-primary, #3d8bff);
}

/* ── Untere Mobile-Navigation ───────────────────────────────────────── */
[data-tournament^="cl"] .bottom-nav {
  background: var(--cl-surface, #132347);
  border-top-color: rgba(125, 180, 255, 0.14);
}

[data-tournament^="cl"] .bottom-nav a {
  color: var(--cl-text-muted, #9db6e8);
}

[data-tournament^="cl"] .bottom-nav a.active {
  color: var(--cl-accent, #7db4ff);
}

[data-tournament^="cl"] .bottom-nav a.active .icon {
  filter: none;
  opacity: 1;
}

[data-tournament^="cl"] .bottom-nav a:focus-visible {
  outline-color: var(--cl-accent, #7db4ff);
}

/* ── Dark-Page-Varianten (index.html / team-builder.html) ───────────── */
[data-tournament^="cl"] body.dark-page {
  background: var(--cl-background, #0a1633);
  color: var(--cl-text, #dce8ff);
}

[data-tournament^="cl"] body.dark-page > nav.navbar {
  background: rgba(8, 16, 41, 0.95);
  border-bottom: 1px solid rgba(125, 180, 255, 0.14);
}

[data-tournament^="cl"] body.dark-page .bottom-nav {
  background: var(--cl-surface, #132347);
  border-top-color: rgba(125, 180, 255, 0.14);
}

[data-tournament^="cl"] body.dark-page .bottom-nav a {
  color: var(--cl-text-muted, #9db6e8);
}

[data-tournament^="cl"] body.dark-page .bottom-nav a.active {
  color: var(--cl-accent, #7db4ff);
}

/* ── Blaue Navbar durchgängig auf ALLEN CL-Seiten erzwingen ──────────────
 * Problem: mehrere Seiten-Stylesheets (teams.css, spieleranalyse.css,
 * rangliste.css, team-builder.css, punktesystem) überschreiben die
 * Navigation mit einem dunkelgrauen „dark-page"-Balken per `!important`.
 * Das schlug die (nicht-wichtige) CL-Blau-Regel weiter oben und ließ die
 * Navbar je nach Register anders aussehen als auf der Ligatabelle (die ihre
 * eigene Blau-Farbwelt hatte). Hier wird die CL-Blau-Palette mit höherer
 * Spezifität + `!important` überall durchgesetzt – EINE einheitliche blaue
 * Navbar über alle Register.
 *
 * Ausnahme: die Startseite (index.html) trägt `data-nav-style="hero"` und
 * hält ihre Navbar bewusst transparent über dem Hero. Diese wird per
 * `:not([data-nav-style="hero"])` ausgespart, damit der Dashboard-Hero
 * unverändert bleibt. Die untere Mobile-Leiste wird überall blau. */
[data-tournament^="cl"] body:not([data-nav-style="hero"]) > nav.navbar {
  background: var(--cl-nav-gradient, linear-gradient(135deg, #081029 0%, #10265a 45%, #16346f 100%)) !important;
  background-image: var(--cl-nav-gradient, linear-gradient(135deg, #081029 0%, #10265a 45%, #16346f 100%)) !important;
  border-bottom: 1px solid rgba(125, 180, 255, 0.14) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-tournament^="cl"] body:not([data-nav-style="hero"]) > nav.navbar .navbar-brand,
[data-tournament^="cl"] body:not([data-nav-style="hero"]) > nav.navbar .nav-links a {
  color: var(--cl-text, #dce8ff) !important;
}

[data-tournament^="cl"] body:not([data-nav-style="hero"]) > nav.navbar .navbar-brand .brand-gold {
  color: var(--cl-accent, #7db4ff) !important;
}

[data-tournament^="cl"] body:not([data-nav-style="hero"]) > nav.navbar .navbar-brand .brand-green {
  color: var(--cl-primary, #3d8bff) !important;
}

[data-tournament^="cl"] body:not([data-nav-style="hero"]) > nav.navbar .nav-links a {
  background: rgba(255, 255, 255, 0.08) !important;
}

[data-tournament^="cl"] body:not([data-nav-style="hero"]) > nav.navbar .nav-links a:hover,
[data-tournament^="cl"] body:not([data-nav-style="hero"]) > nav.navbar .nav-links a.active {
  background: var(--cl-primary, #3d8bff) !important;
  color: #ffffff !important;
}

/* Untere Mobile-Leiste überall in CL-Blau (schlägt die grauen Seiten-Regeln). */
[data-tournament^="cl"] body > .bottom-nav {
  background: var(--cl-surface, #132347) !important;
  border-top-color: rgba(125, 180, 255, 0.14) !important;
}

[data-tournament^="cl"] body > .bottom-nav a {
  color: var(--cl-text-muted, #9db6e8) !important;
}

[data-tournament^="cl"] body > .bottom-nav a.active {
  color: var(--cl-accent, #7db4ff) !important;
}

[data-tournament^="cl"] body > .bottom-nav a.active .icon {
  filter: none !important;
  opacity: 1 !important;
}

/* ── Klub-Logos in den (ursprünglich flaggen-förmigen) Slots ────────────
 * Bei der CL steht der Klub im Fokus: die Views zeigen in den „Flaggen"-
 * Elementen jetzt Klub-Wappen (quadratisch) statt Länderflaggen
 * (rechteckig). `object-fit: contain` verhindert Verzerrung; ein dezenter
 * Hintergrund/Radius lässt die Wappen sauber sitzen. Greift breit über
 * alle img-Elemente, deren Klasse „flag" enthält – nur im CL-Scope. */
[data-tournament^="cl"] img[class*="flag"] {
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}

/* ── Startseite (index.html): Seiten-Atmosphäre / Hintergrund ───────────
 * Die Startseite malt ihre „Stadion"-Atmosphäre bewusst NICHT über die
 * body-Hintergrundfarbe, sondern über ein absolut positioniertes
 * Pseudo-Element (`.hero::before`, Pre-Start) bzw. den Post-Start-Wrapper
 * (`#indexHomePostStart`). Beide sind in index.html hart auf Grün
 * (rgba(40,167,69,…) / rgba(34,197,94,…)) verdrahtet. Die reine
 * body-Umfärbung aus theme-cl.css greift dort also nicht – deshalb blieb
 * die CL-Vorschau grün.
 *
 * Diese Regeln überschreiben die grünen Verläufe im CL-Scope mit der
 * blauen CL-Farbwelt. Sie haben höhere Spezifität als die Inline-Regeln
 * in index.html (Attribut-Selektor + Klasse/ID) und gewinnen daher
 * unabhängig von der Ladereihenfolge. Die WM (`data-tournament="wm2026"`)
 * wird nie getroffen und bleibt grün. */

/* Pre-Start-Hero (`.hero::before`) */
[data-tournament^="cl"] .hero::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(61, 139, 255, 0.42) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 50% 80%, rgba(61, 139, 255, 0.24) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(125, 180, 255, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(61, 139, 255, 0.18) 0%, transparent 50%),
    linear-gradient(180deg, #050a14 0%, #0a1428 30%, #0a1633 100%);
}

/* Post-Start-Dashboard (`#indexHomePostStart`) – der Stand im Screenshot */
[data-tournament^="cl"] #indexHomePostStart {
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(125, 180, 255, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 50% 50%, rgba(61, 139, 255, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 50% 30% at 15% 35%, rgba(61, 139, 255, 0.26) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 85% 35%, rgba(61, 139, 255, 0.26) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(61, 139, 255, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 50% 30% at 15% 85%, rgba(61, 139, 255, 0.26) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 85% 85%, rgba(61, 139, 255, 0.26) 0%, transparent 60%),
    linear-gradient(180deg, #050a14 0%, #08142a 40%, #0a1633 100%);
}

/* ── Zweifarbige Titel „entzweifarben" (nur CL) ──────────────────────────
 * Die Views setzen Titel-Wörter über Verlaufs-Text (`background: linear-
 * gradient(...)` + `background-clip: text` + `-webkit-text-fill-color:
 * transparent`) – dadurch schimmert ein Wort mehrfarbig. Gewünscht ist EINE
 * Farbe pro Wort. Hier wird der Verlauf entfernt und pro Span eine solide
 * Blau-Farbe gesetzt:
 *   • `.gold-text`  → Hellblau  (--cl-accent)  – wie „Champions League" in der Navbar
 *   • `.accent`     → dunkleres Blau (--cl-primary) – wie „DreamTeam" in der Navbar
 * Ausnahme Punktesystem: „Punkte"+„system" ist EIN Wort (zwei Spans) → beide
 * bekommen dieselbe Farbe, damit das Wort nicht zweifarbig ist. */
[data-tournament^="cl"] .hero-title .gold-text,
[data-tournament^="cl"] .champ-title .gold-text,
[data-tournament^="cl"] .builder-hero-title .gold-text,
[data-tournament^="cl"] .teams-hero-title .gold-text,
[data-tournament^="cl"] .rl-hero-title .gold-text {
  background: none;
  color: var(--cl-accent);
  -webkit-text-fill-color: var(--cl-accent);
}

[data-tournament^="cl"] .hero-title .accent,
[data-tournament^="cl"] .champ-title .accent,
[data-tournament^="cl"] .builder-hero-title .accent,
[data-tournament^="cl"] .teams-hero-title .accent,
[data-tournament^="cl"] .rl-hero-title .accent {
  background: none;
  color: var(--cl-primary);
  -webkit-text-fill-color: var(--cl-primary);
}

/* Punktesystem: „Punktesystem" = ein Wort → beide Spans gleiche Farbe. */
[data-tournament^="cl"] .ps-hero-title .accent,
[data-tournament^="cl"] .ps-hero-title .gold-text {
  background: none;
  color: var(--cl-accent);
  -webkit-text-fill-color: var(--cl-accent);
}

/* Weitere einzelne Verlaufs-Text-Elemente → eine solide Farbe. */
[data-tournament^="cl"] .tcc-section-title {
  background: none;
  color: var(--cl-accent);
  -webkit-text-fill-color: var(--cl-accent);
}

[data-tournament^="cl"] .total-points-display {
  background: none;
  color: var(--cl-primary);
  -webkit-text-fill-color: var(--cl-primary);
}

/* Kein Titel („Stars der …") über dem Spieler-Karussell in der CL. */
[data-tournament^="cl"] #indexTestCarouselTitle { display: none; }

/* ── Startseite NACH Start (CL): Champ-Stage (Podest) komplett aus ───────
 * Die CL nutzt statt des animierten Podests die kompakte Top-10-Liste
 * (#clTopManagers, siehe index.js → renderClTopManagers). index.js entfernt
 * die Champ-Stage beim Boot aus dem DOM; diese Regel verhindert zusätzlich
 * jeden Pre-Boot-Flash (z. B. den „Top Manager"-Titel des Podests). Die WM
 * behält ihr Podest unverändert. */
[data-tournament^="cl"] .champ-stage { display: none; }

/* ── Startseite NACH Start (CL): kein Hero-Titel ─────────────────────────
 * „Champions League / DreamTeam / Saison …" steht bereits in der
 * Navigationsleiste – der Hero der Nach-Start-Ansicht entfällt in der CL
 * ersatzlos (index.js entfernt ihn beim Boot, diese Regel verhindert den
 * Pre-Boot-Flash). „Top Manager" rückt an die Spitze und bekommt dafür
 * den Atem-Abstand, den vorher der Hero mitbrachte. Die WM behält ihren
 * Post-Start-Hero unverändert. */
[data-tournament^="cl"] #hero-post { display: none; }
[data-tournament^="cl"] #clTopManagers.cltm-stage { padding-top: 34px; }

/* ── Scrollbar-Platz permanent reservieren (nur CL) ──────────────────────
 * Beim Öffnen einer Detailkarte (Top Manager / Aktuelle Spiele) wird der
 * Body eingefroren (body.clpop-lock, position: fixed) – dabei verschwindet auf Desktops mit
 * klassischer Scrollleiste (Windows) die Browser-Scrollbar, die Seite wird
 * ~15px breiter und beim Schliessen ruckt alles wieder nach links.
 * `scrollbar-gutter: stable` reserviert die Scrollbar-Spur dauerhaft, die
 * Layout-Breite bleibt in beiden Zuständen identisch → kein Shift mehr.
 * Auf Overlay-Scrollbar-Systemen (macOS/iOS/Android) ist die Regel ein
 * No-op; ältere Browser ohne Support ignorieren sie schadlos. */
html[data-tournament^="cl"] { scrollbar-gutter: stable; }

/* ── Startseite VOR Start (CL): Hero aufgeräumt / kompakter ──────────────
 * In der CL-Version soll die Pre-Start-Startseite ohne Scrollen auf Mobile
 * passen. Deshalb entfallen im Hero der Claim-Text („15 Spieler. … Drafte
 * jetzt dein perfektes Fantasy-Team.") und die Live-Zähler („Teams erstellt"
 * / „Spieler gedraftet"). Der Scroll-Hinweis (Pfeil unter dem Karussell)
 * entfällt ebenfalls. Alle drei Elemente existieren nur im Pre-Start-Hero;
 * die WM bleibt unberührt (Scope + eingefrorene Views). */
[data-tournament^="cl"] .hero-claim,
[data-tournament^="cl"] .hero-stats,
[data-tournament^="cl"] .scroll-hint {
  display: none;
}

/* CTA-Button („Team erstellen" / „Team bearbeiten"): dunkle Schrift auf dem
 * hellblauen Button für bessere Lesbarkeit (statt Weiss auf Hellblau). */
[data-tournament^="cl"] .btn-primary-hero {
  color: var(--cl-background, #0a1633);
}

/* ── Startseiten-Karussell (CL): Profilbild + Klublogo grösser ───────────
 * Auf Wunsch dürfen Spielerfoto und Klublogo präsenter sein. Die Karte
 * behält ihre Grösse (--card-w/--card-h); nur die Innenelemente wachsen,
 * sodass weiterhin alles sauber in die Karte passt. Werte per Test so
 * gewählt, dass auch auf schmalen Handys nichts abgeschnitten wird. */
[data-tournament^="cl"] .tcc-player-photo-wrap {
  width: 72%;
}
[data-tournament^="cl"] .tcc-badge-img {
  width: clamp(48px, 14vw, 76px);
  height: clamp(48px, 14vw, 76px);
}
@media (max-width: 560px) {
  [data-tournament^="cl"] .tcc-badge-img {
    width: clamp(42px, 14vw, 54px);
    height: clamp(42px, 14vw, 54px);
  }
}

/* ── Ränge/Podium: klassische Medaillenfarben statt Blau ─────────────────
 * Rang 1 soll auch in der CL GOLD sein (Silber/Bronze sind ohnehin fest
 * verdrahtet). Statt jede Regel einzeln zu überschreiben, werden die
 * Gold-Variablen NUR auf den Rang-1-/Podium-Containern wieder auf echtes
 * Gold gesetzt – ihre Nachfahren (Badges, Glows, Kronen) erben das. */
[data-tournament^="cl"] .champ-card,
[data-tournament^="cl"] .podium-slot-1,
[data-tournament^="cl"] .tm-row.rank-1,
[data-tournament^="cl"] .tp-card.rank-1,
[data-tournament^="cl"] .rp-rank.rank-1,
[data-tournament^="cl"] .cc-rank-badge.rank-1,
[data-tournament^="cl"] .mc-rank-badge.rank-1,
[data-tournament^="cl"] .pi-rank-1,
[data-tournament^="cl"] .mir-rank-1 {
  --gold: #ffd700;
  --gold-light: #fde68a;
  --gold-dark: #e5a800;
  --rgb-gold: 255, 215, 0;
}