/* ═══════════════════════════════════════════════════════════════════════════
   KickScope — Gestaltungsrichtung „Schrägpass"  (ab 17.08.2026, 23:59)

   Wird NACH style.css geladen und stellt nur die Bildsprache um. Alles, was
   hier nicht steht, funktioniert unveraendert weiter — bewusst so, damit ein
   Design-Wechsel keine 2000 Zeilen Layout-Logik anfasst.

   Vier Motive, alle aus dem Logo abgeleitet:
     1 SCHRAEGE      der diagonale Schnitt des K -> abgeschnittene Ecken
                     (clip-path) statt runder Radien
     2 SPEED-LINES   die drei Striche am Ball -> Marker fuer alles Laufende
     3 RING/BOGEN    das runde Emblem -> Zeit- und Zustandsanzeigen
     4 FARBFOLGE     Nachtblau -> Elektroblau -> Cyan; Rot und Gruen bleiben
                     ausschliesslich „live" und „frei empfangbar"

   Zurueckschalten: data/design.json auf {"aktiv":"alt"} setzen (Admin) —
   siehe ks_stil() in wartungscheck.php.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) Farbfolge ─────────────────────────────────────────────────────────
   Nur Token werden ueberschrieben; jede Regel der Seite liest daraus. */
:root{
  --bg:#050a17;
  --panel:#0f1a30;
  --panel-2:#152442;
  --line:#1d2c4d;
  --line-soft:#16223c;
  --text:#eef4ff;
  --muted:#a9bbdc;
  --muted-2:#6c80a8;
  --accent:#2b7bff;
  --accent-2:#5de1ff;
  --accent-text:#5de1ff;          /* Akzent als SCHRIFT – hier gleich der Flaeche */
  --accent-ink:#03101f;
  --accent-soft:#122444;
  --free:#25e39a;
  --pay:#ffb648;
  --stream:#b18bff;
  --live:#ff3b5c;
  --chip-free-fg:#5cf0b8;
  --chip-pay-fg:#ffc978;
  --chip-stream-fg:#c9b0ff;
  --selected-bg:#12294f;
  --header-bg:rgba(5,10,23,.78);
  --tagline:#7f93bb;
  --tagline-rule:#2b3f6b;
  --glass:rgba(255,255,255,.035);
  --ks-verlauf:linear-gradient(100deg,#2b7bff,#5de1ff);
  --ks-schnitt:16px;              /* Kantenlaenge der Schraege */
  --gold:#efe2be;                 /* Signatur-Warmton (aus der App) – FLAECHEN */
  --gold-deep:#e0cd98;            /* leicht abgedunkelt, fuer Verlaeufe */
  --gold-text:#efe2be;            /* Gold als SCHRIFT (dunkles Thema: wie --gold) */
  --gold-ink:#0a1120;             /* Schrift AUF Gold */
  --nh-glow:#ff9a3d;              /* warmer Orange-Schimmer im Countdown-Aufmacher (statt Blau) */
}
:root[data-theme="light"]{
  --bg:#eef2f9;
  --panel:#ffffff;
  --panel-2:#eff3fb;
  --line:#dbe3f1;
  --line-soft:#e8edf6;
  --text:#08111f;
  --muted:#3f4f6d;
  --muted-2:#6c7c9a;
  --accent:#1257db;
  --accent-2:#0aa6cf;
  /* Wie beim Gold: das helle Cyan ist eine FLAECHEN-/Grafikfarbe (Speed-Lines,
     Verlauf, Rahmen). Als Schriftfarbe erreicht #0aa6cf auf dem hellen Grund
     nur 2,54:1. --accent-text ist der Schrift-Ton und liegt bei ~5,9:1. */
  --accent-text:#0a6d8a;
  --accent-ink:#ffffff;
  --accent-soft:#e3ecfd;
  --free:#068a5c;
  --pay:#8f5a10;
  --stream:#6845c9;
  --live:#d81b3c;
  --chip-free-fg:#046b47;
  --chip-pay-fg:#7a4c0b;
  --chip-stream-fg:#553aa8;
  --header-bg:rgba(238,242,249,.82);
  --ks-verlauf:linear-gradient(100deg,#1257db,#0aa6cf);
  /* Im hellen Thema taugt Gold NUR als Flaeche (dunkle Schrift darauf).
     Als Schriftfarbe braucht es einen deutlich tieferen Ton: #e7c86a auf dem
     hellen Grund ergibt nur 1,45:1 – praktisch unlesbar. --gold-text ist
     messbar auf ~5:1 gebracht (WCAG AA fuer normalen Text). */
  --gold:#e7c86a;                 /* Flaechen: Pillen, Knoepfe */
  --gold-deep:#d8ae4a;            /* zweite Stufe fuer Verlaeufe */
  --gold-text:#8a5f0d;            /* Gold als SCHRIFT */
  --gold-ink:#241a00;
  --nh-glow:#ff8a1e;              /* warmer Orange-Schimmer im Countdown-Aufmacher (statt Blau) */
}

/* ── 2) Werkzeuge: Schraege und Speed-Lines ─────────────────────────────── */
/* Ecke oben rechts geschnitten – die Grundform der Marke. */
.ks-cut,
.kpi,
.top-hero,
.sender-banner,
.th-card{
  border-radius:0 !important;
  clip-path:polygon(0 0, calc(100% - var(--ks-schnitt)) 0,
                    100% var(--ks-schnitt), 100% 100%, 0 100%);
}
/* Kleinteile bekommen eine kleinere Schraege, sonst frisst sie die Schrift. */
.pill,
.chip,
.fav-toggle,
.btn,
button.btn,
.dp-act{
  border-radius:0 !important;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

/* Speed-Lines als reines CSS: drei sich verjuengende, geneigte Striche. */
.sport-title::before,
.live-head .txt::before,
.page-lead .page-sub::before{
  content:"";
  display:inline-block; vertical-align:middle; flex:none;
  width:22px; height:12px; margin-right:10px;
  background:
    linear-gradient(var(--accent-2),var(--accent-2)) left 0 top 1px / 22px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent))     left 0 top 5px / 15px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent))     left 0 top 9px / 9px  2px no-repeat;
  transform:skewX(-28deg);
  opacity:.9;
}
/* Beim Live-Band laufen die Striche in der Signalfarbe. */
.live-head .txt::before{
  background:
    linear-gradient(var(--live),var(--live)) left 0 top 1px / 22px 2px no-repeat,
    linear-gradient(var(--live),var(--live)) left 0 top 5px / 15px 2px no-repeat,
    linear-gradient(var(--live),var(--live)) left 0 top 9px / 9px  2px no-repeat;
}

/* ── 3) Kopfbereich ─────────────────────────────────────────────────────── */
.site-header{
  position:relative;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
/* Diagonaler Lichtschleier statt harter Kante – gibt Tiefe, ohne die Seite
   quer zu zerschneiden (bewusste Entscheidung des Betreibers). */
.site-header::after{
  content:""; position:absolute; right:-160px; top:-220px;
  width:640px; height:460px; pointer-events:none; z-index:0;
  background:var(--ks-verlauf); opacity:.14;
  transform:skewX(-28deg); filter:blur(70px);
}
.site-header .header-inner{position:relative; z-index:1}

/* ── 4) Aufmacher mit den Kennzahlen ────────────────────────────────────── */
.page-title{
  font-size:clamp(1.9rem,4.4vw,3.1rem);
  letter-spacing:-.045em; font-weight:850; line-height:1;
}
.page-sub{display:flex; align-items:center; margin-top:10px}
.kpi{
  background:var(--panel); border:1px solid var(--line);
}
.kpi b{font-weight:850; letter-spacing:-.045em}
.kpi.live::before{display:none}     /* Punkt entfaellt – die Farbe reicht */

/* ── 5) Abschnitte ──────────────────────────────────────────────────────── */
.sport-title{
  display:flex; align-items:center;
  font-size:.86rem; font-weight:850; letter-spacing:.19em; text-transform:uppercase;
}
.sport-title::after{background:var(--line) !important}
.sport-title .sport-ic{margin-right:2px}

.live-head .txt{display:inline-flex; align-items:center}
.live-head .dot{display:none}       /* die Speed-Lines uebernehmen das Signal */

/* ── 6) Spielzeilen ─────────────────────────────────────────────────────── */
/* Die Zeilen bilden einen Block; deshalb traegt der BLOCK die Schraege,
   nicht jede einzelne Zeile – sonst wirkt die Liste zerfranst. */
.game{border-radius:0}
.game:first-of-type{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - var(--ks-schnitt)) 0,
                    100% var(--ks-schnitt), 100% 100%, 0 100%);
}
.game:last-of-type{
  border-radius:0;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--ks-schnitt)),
                    calc(100% - var(--ks-schnitt)) 100%, 0 100%);
}
.game:hover{
  background:color-mix(in srgb, var(--panel) 84%, var(--accent));
}
.game-time .t{font-weight:800; letter-spacing:-.03em}
.game-time .d{letter-spacing:.1em}

/* Laufendes Spiel: Signalkante plus Speed-Lines an der Uhrzeit. */
.game.live-now{box-shadow:inset 3px 0 0 var(--live)}
.game.live-now .game-time{position:relative}
.game.live-now .game-time::after{
  content:""; position:absolute; left:0; bottom:-7px;
  width:20px; height:8px;
  background:
    linear-gradient(var(--live),var(--live)) left 0 top 0 / 20px 2px no-repeat,
    linear-gradient(var(--live),var(--live)) left 0 top 4px / 13px 2px no-repeat;
  transform:skewX(-28deg); opacity:.85;
}

/* ── 7) Sender-Marken ───────────────────────────────────────────────────── */
.chip{font-weight:700; letter-spacing:.01em}
.chip.free  { background:color-mix(in srgb, var(--free) 16%, transparent);
              border-color:color-mix(in srgb, var(--free) 42%, transparent); }
.chip.pay   { background:color-mix(in srgb, var(--pay) 15%, transparent);
              border-color:color-mix(in srgb, var(--pay) 40%, transparent); }
.chip.stream{ background:color-mix(in srgb, var(--stream) 16%, transparent);
              border-color:color-mix(in srgb, var(--stream) 38%, transparent); }

/* ── 8) Bedienelemente ──────────────────────────────────────────────────── */
.pill.active{
  background:var(--ks-verlauf); border-color:transparent; color:var(--accent-ink);
  font-weight:750;
}
.pill:hover{border-color:var(--accent-2)}

/* ── 9) Top-Spiele ──────────────────────────────────────────────────────── */
.top-hero{position:relative; overflow:hidden; border:1px solid var(--line)}
.top-hero::before{
  content:""; position:absolute; right:-90px; top:-90px; width:320px; height:300px;
  background:var(--ks-verlauf); opacity:.13; transform:skewX(-28deg);
  filter:blur(40px); pointer-events:none;
}
.top-hero-head{
  position:relative; z-index:1;
  font-size:.72rem; font-weight:850; letter-spacing:.2em; text-transform:uppercase;
}
.th-row{position:relative; z-index:1}

/* ── 10) Bewegung sparsam ───────────────────────────────────────────────── */
.game{transition:background .16s, transform .16s}
.game:hover{transform:translateX(2px)}
@media (prefers-reduced-motion: reduce){
  .game{transition:none}
  .game:hover{transform:none}
}

/* ── 11) Handschrift: Creme-Gold + verdichtete Versal-Typo ────────────────
   App-DNA (der warme Gold-Ton, die „Scoreboard"-Schrift) trifft Schrägpass.
   Barlow Semi Condensed liegt schon als self-hosted Asset vor (Manager nutzt
   es); hier als „KS Display" auch für die Startseite eingebunden. Gold ist die
   Signatur – bewusst nur auf wenige Marken-Stellen, sonst verliert es Wirkung. */
@font-face{font-family:"KS Display";src:url("/barlow-sc-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"KS Display";src:url("/barlow-sc-600.woff2") format("woff2");font-weight:600;font-display:swap}

/* Verdichtete Display-Schrift auf die Titel-/Zahlen-Ebene. */
.page-title,.sport-title,.top-hero-head,.kpi b,.game-time .t,.live-head .txt{
  font-family:"KS Display","Barlow Semi Condensed","Segoe UI",system-ui,sans-serif;
}
.page-title{font-weight:700;letter-spacing:-.01em}
.kpi b,.game-time .t{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* Creme-Gold als Signatur:
   – die „Top-Spiele"-Marke,
   – die Haupt-Aktion „Spielplan erstellen" (Pendant zum goldenen „Erinnern"),
   – die Uhrzeit-Kante des nächsten/laufenden Spiels. */
.top-hero-head{color:var(--gold-text)}
/* .th-rank steht in style.css auf var(--gold) – als SCHRIFT im hellen Thema
   unlesbar (1,45:1). Hier auf den Textton ziehen. */
.th-rank{color:var(--gold-text)}
.ad-link.cta{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:var(--gold-ink);
  box-shadow:0 8px 22px -10px color-mix(in srgb,var(--gold) 70%,transparent);
}
.ad-link.cta:hover{filter:brightness(1.05)}
/* Anstoss-Uhrzeit der Top-Spiele als goldene Marke (verdichtete Ziffern). */
.th-ko{color:var(--gold-text);font-variant-numeric:tabular-nums;
  font-family:"KS Display","Barlow Semi Condensed","Segoe UI",system-ui,sans-serif;font-weight:700}

/* Kopf-Aufmacher im App-Stil: Eyebrow-Datum + große Split-Headline + Statistik-Zeile.
   Ersetzt die drei KPI-Kästen durch eine ruhige Zeile (wie in der App). */
.lead-hero{display:block;margin:26px 0 20px}
.lead-eyebrow{display:flex;align-items:center;gap:11px;margin:0 0 8px;
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:.8rem;color:var(--accent-text)}
.lead-speed{display:inline-block;width:24px;height:13px;flex:none;transform:skewX(-28deg);
  background:
    linear-gradient(var(--accent-2),var(--accent-2)) left 0 top 1px /24px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent))     left 0 top 5px /16px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent))     left 0 top 9px /9px  2px no-repeat;}
.lead-hero .page-title{
  font-size:clamp(2.5rem,7vw,4.7rem);line-height:.9;letter-spacing:-.015em;
  text-transform:uppercase;font-weight:700;margin:0}
.pt-gold{color:var(--gold-text);white-space:nowrap}
.lead-stats{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px;
  color:var(--muted);font-size:1.02rem;font-weight:500}
.lead-stats b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;
  font-family:"KS Display","Barlow Semi Condensed",system-ui,sans-serif}
.lead-stats b.free{color:var(--free)}
.lead-stats .lead-live b{color:var(--live)}
.lead-dot{color:var(--muted-2)}

/* Aufmacher-Raster: Countdown links, laufende Spiele rechts – wie im Entwurf.
   Erst ab 1000 px, darunter bleibt alles gestapelt (eine Spalte). */
@media (min-width:1000px){
  /* stretch statt start: laeuft rechts gerade nichts live, zeigt das Band drei
     KOMMENDE Spiele untereinander und wird dadurch deutlich hoeher als die
     Countdown-Kachel – daneben klaffte ein Loch von ~260 px. Die Kachel fuellt
     die Hoehe jetzt selbst aus, die Knopfzeile sitzt dabei am unteren Rand. */
  .hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:stretch}
  .hero-grid .next-hero{margin:0;display:flex;flex-direction:column}
  .hero-grid .next-hero .nh-acts{margin-top:auto}
  /* In der schmalen rechten Spalte passen keine drei Kacheln nebeneinander. */
  .hero-grid .live-rail{grid-template-columns:1fr !important;display:grid;gap:12px}
  .hero-grid .live-wrap{margin:0}
  /* Ist eine der beiden Kacheln leer (nachts kein kommendes Spiel, oder gerade
     nichts live), soll die andere die volle Breite nehmen statt eine halbe
     Spalte leer stehen zu lassen. Ohne :has()-Unterstuetzung bleibt es beim
     Zweispalter – dann ist rechts eben Platz, kaputt geht nichts. */
  .hero-grid:has(> #liveWrap[hidden]),
  .hero-grid:has(> #nextHero[hidden]){grid-template-columns:1fr}
  /* Dann duerfen die Live-Kacheln wieder nebeneinander stehen. */
  .hero-grid:has(> #nextHero[hidden]) .live-rail{grid-template-columns:repeat(3,1fr) !important}
}

/* Countdown-Aufmacher „Als Nächstes" – die Signatur-Kachel aus der App:
   riesige goldene Uhr bis zum Anpfiff, Team-Wappen, Sender, zwei Aktionen. */
.next-hero{position:relative;overflow:hidden;margin:0 0 22px;padding:22px 24px 24px;
  border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - var(--ks-schnitt)) 0,100% var(--ks-schnitt),100% 100%,0 100%);
  background:
    radial-gradient(130% 130% at 88% -20%, color-mix(in srgb,var(--nh-glow) 32%, transparent), transparent 55%),
    linear-gradient(155deg, var(--panel-2) 0%, var(--panel) 62%);}
.next-hero[hidden]{display:none}
.nh-timepill{position:absolute;top:0;right:0;background:var(--gold);color:var(--gold-ink);
  font-family:"KS Display","Barlow Semi Condensed",system-ui,sans-serif;font-weight:700;
  letter-spacing:.03em;font-size:.92rem;padding:9px 18px 9px 24px;
  clip-path:polygon(16px 0,100% 0,100% 100%,0 100%);font-variant-numeric:tabular-nums}
.nh-eyebrow{font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:.76rem;color:var(--accent-text)}
.nh-count{display:flex;align-items:flex-end;gap:14px;margin:6px 0 2px}
.nh-big{font-family:"KS Display","Barlow Semi Condensed",system-ui,sans-serif;font-weight:700;
  font-size:clamp(3rem,9vw,5.2rem);line-height:.85;color:var(--gold-text);letter-spacing:.01em;
  font-variant-numeric:tabular-nums}
.nh-cap{color:var(--muted);font-weight:600;padding-bottom:10px}
.nh-match{display:flex;align-items:center;gap:14px;margin-top:12px}
.nh-crests{display:inline-flex;align-items:center;gap:10px}
.nh-crests .crest{width:56px;height:56px;font-size:1.05rem;flex:none}
.nh-vs{font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;color:var(--muted);font-size:.95rem}
.nh-teams{display:flex;flex-direction:column;line-height:1.16}
.nh-teams b{font-family:"KS Display","Barlow Semi Condensed",system-ui,sans-serif;font-weight:700;font-size:1.12rem}
.nh-league{margin-top:14px;font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;font-size:.76rem;color:var(--muted)}
.nh-chan,.nh-all{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.nh-all[hidden]{display:none}   /* [hidden] wuerde sonst von display:flex ueberstimmt */
.nh-nochan{color:var(--muted);font-size:.9rem}
.nh-acts{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.nh-btn{flex:1;min-width:150px;padding:14px 16px;border:0;cursor:pointer;
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;font-size:1rem;letter-spacing:.02em;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.nh-btn.gold{background:var(--gold);color:var(--gold-ink)}
.nh-btn.gold:hover{filter:brightness(1.04)}
.nh-btn.ghost{background:var(--glass);border:1px solid var(--line);color:var(--text)}
.nh-btn.ghost:hover{border-color:var(--accent-2)}

/* ── 12) Handy ──────────────────────────────────────────────────────────── */
@media (max-width:560px){
  :root{--ks-schnitt:12px}
  .page-title{font-size:1.75rem}
  .lead-hero .page-title{font-size:2.5rem}
  .nh-btn{flex-basis:100%}
}