/* KickScope 3.0 - Designsystem (29.10.2026)
 *
 * Wird als LETZTES Stylesheet geladen (v21/layout.php -> ks3_kopf_assets()) und
 * vereinheitlicht, was ueber die Jahre in v21.css, v21-next.css, v21-home3.css und
 * Inline-Stilen auseinandergelaufen ist. Es fuehrt KEIN drittes Farbsystem ein:
 * alle Farben kommen aus den bestehenden Tokens (--panel, --border, --gold ...),
 * damit Hell/Dunkel und die Saison-Editionen weiter funktionieren.
 *
 * Aufbau:  1 Tokens  2 Geruest (Breiten, Fusszeile)  3 Seitenkopf  4 Navigation
 *          5 Karten/Bedienelemente  6 Leerzustand + Skeleton  7 Bewegung
 *          8 Seiten (Topspiel, Tippspiel, Abos, Premium, Statistiken, Live ...)
 * Zurueckrollen: ks3_kopf_assets() in v21/ks3.php leer zurueckgeben.
 */

/* ---------- 1 Tokens ---------- */
:root {
  --ks-orange: #ff8a3d;          /* Akzent fuer "jetzt/bald": Countdown, Topspiel */
  --ks-orange-2: #f26a2a;
  --ks-orange-text: #ffa266;
  --ks-anthrazit: #121821;
  --ks-w-weit: 1400px;            /* Uebersichten, Listen, Dashboards */
  --ks-w-schmal: 1040px;          /* Formulare, Texte, Einstellungen */
  --ks-gutter: clamp(16px, 3vw, 28px);
  --ks-r-lg: 20px;
  --ks-r: 14px;
  --ks-r-sm: 10px;
  --ks-ease: cubic-bezier(.2, .7, .2, 1);
  --ks-t: .18s;
  --ks-flaeche: rgba(127, 140, 160, .06);
  --ks-flaeche-2: rgba(127, 140, 160, .10);
}
:root[data-theme="light"] {
  --ks-orange: #e2620f;
  --ks-orange-2: #c9520a;
  --ks-orange-text: #b04c08;     /* ~5:1 auf Weiss */
  --ks-anthrazit: #eef2f6;
}

/* ---------- 2 Geruest ---------- */
/* Fusszeile bleibt unten, auch wenn eine Seite kurz ist (vorher schwebte sie mittig). */
#inhalt { min-height: calc(100vh - 230px); min-height: calc(100svh - 230px); }

/* Zwei Breiten fuer alle Seiten: .nx-page = weit, .px-wrap = schmal - beide zentriert,
   gleicher Seitenrand. */
.nx-page { width: min(100%, var(--ks-w-weit)); padding-left: var(--ks-gutter); padding-right: var(--ks-gutter); }
.px-wrap {
  width: min(100%, var(--ks-w-schmal)); max-width: none; margin: 24px auto 0;
  padding: 0 var(--ks-gutter) 72px; box-sizing: border-box;
}
.ks3-weit { width: min(100%, var(--ks-w-weit)); margin: 0 auto; padding: 24px var(--ks-gutter) 72px; box-sizing: border-box; }
.ks3-schmal { width: min(100%, var(--ks-w-schmal)); margin: 0 auto; padding: 24px var(--ks-gutter) 72px; box-sizing: border-box; }
.ks3-stapel { display: flex; flex-direction: column; gap: 22px; }

/* ---------- 3 Seitenkopf ----------
 * .nx-head ist der Referenzkopf (Tabellen, Vereine, Wettbewerbe). Die aeltere Form
 * .px-hero (Favoriten, FAQ, Kontakt, Rechtliches ...) bekommt dieselbe Gestalt:
 * Goldkachel mit Symbol, grosse Display-Schrift, gleicher Rahmen und Verlauf. */
.px-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center;
  padding: 26px 28px; border-radius: 22px; margin: 0 0 4px;
  border: 1px solid rgba(226, 189, 101, .22);
  background: linear-gradient(135deg, var(--panel), var(--panel-2, var(--panel)));
  box-shadow: var(--nx-shadow, 0 10px 30px rgba(0, 0, 0, .22));
}
.px-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(600px 220px at 0% 0%, rgba(226, 189, 101, .13), transparent 70%);
}
.px-hero > svg:first-child {
  width: 88px; height: 88px; padding: 22px; box-sizing: border-box; border-radius: 22px;
  color: var(--gold-ink, #1a1408); background: linear-gradient(160deg, #f1d58e, #c39a48);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.px-hero h1, .px-hero h1.disp {
  margin: 2px 0 6px; font-family: "KS Display", sans-serif; font-weight: 700; text-transform: none;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.01em; overflow-wrap: anywhere;
}
.px-hero p { margin: 0; color: var(--text-secondary); font-size: 16px; max-width: 70ch; }
.px-hero .muted:first-child { color: var(--gold-text, var(--gold)); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 3px; }
@media (max-width: 760px) {
  .px-hero { grid-template-columns: auto minmax(0, 1fr); padding: 20px 18px; gap: 14px 16px; border-radius: 18px; }
  .px-hero > svg:first-child { width: 60px; height: 60px; padding: 15px; border-radius: 16px; }
  .px-hero p { font-size: 15px; }
}
/* Kennzahlen mit echtem Wert 0: bleiben sichtbar (0 ist eine Information), treten aber zurueck. */
.nx-kpi.is-null b, .k3-kpi.is-null .k3-kpi-num { color: var(--text-muted); }
.nx-kpi.is-null { background: transparent; border-style: dashed; }
.nx-kpi small.ks3-kpi-hinweis { display: block; margin-top: 4px; font-size: 12px; color: var(--text-muted); }

/* ---------- 4 Navigation ---------- */
.mainnav-tools { gap: 10px; }
.mainnav-hervor { display: flex; align-items: center; gap: 8px; }
.mainnav-hervor:empty { display: none; }
.mainnav .mainnav-hervor a {
  border: 1px solid rgba(226, 189, 101, .35); border-radius: 999px; padding: 7px 14px; min-height: 0;
  border-bottom-width: 1px; color: var(--gold-text, var(--gold)); background: rgba(226, 189, 101, .06);
}
.mainnav .mainnav-hervor a:hover { background: rgba(226, 189, 101, .14); color: var(--gold-text, var(--gold)); }
.mainnav .mainnav-hervor a.active { color: var(--gold-ink, #1a1408); background: linear-gradient(180deg, #f1d58e, #c39a48); border-color: transparent; }
.mainnav .mainnav-hervor a.nav-hervor[href="/luna"] { border-color: rgba(154, 124, 245, .45); color: #c9b8ff; background: rgba(154, 124, 245, .08); }
.mainnav .mainnav-hervor a.nav-hervor[href="/luna"]:hover { background: rgba(154, 124, 245, .16); }
:root[data-theme="light"] .mainnav .mainnav-hervor a.nav-hervor[href="/luna"] { color: #5b3fc4; }
.mainnav .mainnav-hervor a .ic { display: inline-flex; }
/* eSport: eigener, dezenter Akzent - bleibt sichtbar getrennt vom Sport. */
.mainnav a.nav-esports { position: relative; }
.mainnav a.nav-esports::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; margin-left: 6px;
  background: #8f7bff; box-shadow: 0 0 0 3px rgba(143, 123, 255, .18); align-self: center;
}
/* Aktiver Punkt deutlicher: Unterstrich + Goldton */
.mainnav-links a.active { color: var(--gold-text, var(--gold)); }
@media (max-width: 1180px) { .mainnav .mainnav-hervor a { padding: 6px 10px; } .mainnav .mainnav-hervor a .ic { display: none; } }
/* Mobilleiste: 6 Punkte, lesbare Beschriftung, aktiver Punkt mit Markierung. */
@media (max-width: 820px) {
  .mobnav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mobnav a { font-size: 10.5px; gap: 3px; position: relative; }
  .mobnav a.active::before {
    content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px;
    background: var(--gold);
  }
}

/* ---------- 5 Karten + Bedienelemente ---------- */
.btn-gold, .nx-btn-line, .k3-btn { transition: transform var(--ks-t) var(--ks-ease), filter var(--ks-t), border-color var(--ks-t), background var(--ks-t), color var(--ks-t); }
.btn-gold:active, .nx-btn-line:active, .k3-btn:active { transform: translateY(1px); }
.btn-gold:disabled, .btn-gold[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
/* Kleine Aktionsknoepfe (z. B. Spielplan-Werkzeuge) statt unterstrichener Textlinks */
.ks3-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.ks3-aktion {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--ks-flaeche); color: var(--text-primary);
  font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: border-color var(--ks-t), background var(--ks-t), color var(--ks-t);
}
.ks3-aktion:hover { border-color: rgba(226, 189, 101, .55); color: var(--gold-text, var(--gold)); }
.ks3-aktion.gefahr:hover { border-color: rgba(240, 68, 94, .6); color: #ff8295; }
.ks3-aktion svg { flex: none; }
/* Karten heben sich beim Zeigen leicht an (nur mit Maus) */
@media (hover: hover) {
  .nx-card, .nx-comp, .ks3-karte-link { transition: transform var(--ks-t) var(--ks-ease), border-color var(--ks-t), box-shadow var(--ks-t); }
  .nx-card:hover, .nx-comp:hover, .ks3-karte-link:hover { transform: translateY(-2px); border-color: rgba(226, 189, 101, .35); }
}
/* Sendername prominenter auf den Spielplan-Karten */
.game .sender-line .sl-name {
  background: rgba(226, 189, 101, .09); border: 1px solid rgba(226, 189, 101, .22); color: var(--text-primary);
}
.game .sender-line .sl-name:first-child { border-color: rgba(226, 189, 101, .45); }

/* ---------- 6 Leerzustand + Skeleton ---------- */
.ks3-leer {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 34px 22px; border-radius: var(--ks-r); border: 1px dashed rgba(226, 189, 101, .28);
  background: radial-gradient(420px 160px at 50% 0%, rgba(226, 189, 101, .07), transparent 70%), var(--panel);
}
.ks3-leer-ic {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; margin-bottom: 4px;
  color: var(--gold-text, var(--gold)); background: rgba(226, 189, 101, .1); border: 1px solid rgba(226, 189, 101, .25);
}
.ks3-leer strong { font-size: 17px; }
.ks3-leer p { margin: 0; max-width: 56ch; color: var(--text-secondary); font-size: 14.5px; line-height: 1.55; }
.ks3-leer-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.ks3-leer.kompakt { padding: 22px 18px; }

.ks3-skel, .nx-skel i {
  background: linear-gradient(90deg, var(--ks-flaeche) 0%, var(--ks-flaeche-2) 40%, var(--ks-flaeche) 80%);
  background-size: 300% 100%; animation: ks3-schimmer 1.4s linear infinite;
}
.ks3-skel { display: block; border-radius: 10px; min-height: 16px; }
@keyframes ks3-schimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* ---------- 7 Bewegung ---------- */
/* Spielstand geaendert (nur bei bestaetigter Aenderung, siehe v21-ks3.js) */
.ks3-flash { animation: ks3-flash 1.6s var(--ks-ease) 1; }
@keyframes ks3-flash {
  0% { box-shadow: 0 0 0 0 rgba(255, 138, 61, .0); background-color: rgba(255, 138, 61, .0); }
  15% { box-shadow: 0 0 0 4px rgba(255, 138, 61, .35); background-color: rgba(255, 138, 61, .16); }
  100% { box-shadow: 0 0 0 0 rgba(255, 138, 61, 0); background-color: transparent; }
}
.ks3-einblenden { animation: ks3-ein .35s var(--ks-ease) both; }
@keyframes ks3-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ks3-flash, .ks3-einblenden, .ks3-skel, .nx-skel i { animation: none !important; }
  .nx-card:hover, .nx-comp:hover, .ks3-karte-link:hover { transform: none; }
}

/* ---------- 8 Seiten ---------- */

/* 8.1 Startseite: Topspiel im Kopf */
.k3-hero.mit-topspiel { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px) auto; }
.ks3-top {
  position: relative; z-index: 1; align-self: center; display: flex; flex-direction: column; gap: 14px;
  padding: 18px 20px 16px; border-radius: 18px; color: #f3f5f8;
  background: linear-gradient(160deg, rgba(10, 18, 30, .82), rgba(10, 18, 30, .62));
  border: 1px solid rgba(255, 138, 61, .35); box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ks3-top-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ks3-top-label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #ffb27d;
}
.ks3-top-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ks-orange); box-shadow: 0 0 0 4px rgba(255, 138, 61, .2); }
.ks3-top.live .ks3-top-label { color: #ff8a9a; }
.ks3-top.live .ks3-top-label::before { background: #f0445e; box-shadow: 0 0 0 4px rgba(240, 68, 94, .22); animation: ks3-puls 1.6s ease-in-out infinite; }
@keyframes ks3-puls { 50% { box-shadow: 0 0 0 7px rgba(240, 68, 94, .05); } }
.ks3-top-wb { font-size: 12.5px; color: #c4cedb; font-weight: 650; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.ks3-top-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.ks3-top-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; color: inherit; text-decoration: none; }
.ks3-top-team .crest { width: 58px; height: 58px; font-size: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.ks3-top-team .crest img { padding: 6px; }
.ks3-top-team b { font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.ks3-top-mitte { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ks3-top-zeit { font-family: "KS Display", sans-serif; font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ks3-top-tag { font-size: 12px; color: #c4cedb; font-weight: 700; }
.ks3-countdown { display: flex; justify-content: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ks3-countdown span {
  min-width: 52px; padding: 6px 4px; border-radius: 10px; text-align: center;
  background: rgba(255, 138, 61, .12); border: 1px solid rgba(255, 138, 61, .3);
}
.ks3-countdown b { display: block; font-family: "KS Display", sans-serif; font-size: 22px; line-height: 1.05; color: #ffd2b3; }
.ks3-countdown small { font-size: 10.5px; color: #c4cedb; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ks3-top-sender { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: #c4cedb; }
.ks3-top-sender .ch {
  padding: 4px 9px; border-radius: 8px; font-weight: 750; color: #f3f5f8;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
}
.ks3-top-sender .ch.frei { border-color: rgba(46, 200, 120, .5); background: rgba(46, 200, 120, .12); }
.ks3-top-aktionen { display: flex; gap: 8px; }
.ks3-top-aktionen > * { flex: 1 1 0; justify-content: center; min-height: 40px; font-size: 13.5px; }
.ks3-top .ks3-top-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 10px; font-weight: 750; cursor: pointer;
  color: #f3f5f8; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .2); font-family: inherit; text-decoration: none;
}
.ks3-top .ks3-top-btn:hover { border-color: rgba(255, 138, 61, .6); color: #ffd2b3; }
.ks3-top .ks3-top-btn.primaer { color: #1b0f05; border-color: transparent; background: linear-gradient(180deg, #ffad6e, var(--ks-orange-2)); }
.ks3-top .ks3-top-btn.primaer:hover { filter: brightness(1.06); color: #1b0f05; }
.ks3-top .ks3-top-btn[aria-pressed="true"] { background: rgba(226, 189, 101, .2); border-color: rgba(226, 189, 101, .6); color: #f1d58e; }
@media (max-width: 1240px) {
  .k3-hero.mit-topspiel { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
  .k3-hero.mit-topspiel .k3-hero-sports { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .k3-hero.mit-topspiel .k3-script { display: none; }
}
@media (max-width: 900px) {
  .k3-hero.mit-topspiel { grid-template-columns: minmax(0, 1fr); }
  .ks3-top { width: 100%; }
}

/* 8.2 Tippspiel: gleiche Breite wie alle Uebersichtsseiten, ein Kopf */
body.ks3-tipp .tp-hero { margin-top: 0; }

/* 8.3 Abos: Anbieter-Karten */
.ks3-abo-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.ks3-abo {
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 14px 14px; border-radius: var(--ks-r); border: 1px solid var(--border); background: var(--panel);
  cursor: pointer; transition: border-color var(--ks-t), background var(--ks-t), transform var(--ks-t) var(--ks-ease);
}
.ks3-abo:hover { border-color: rgba(226, 189, 101, .4); }
.ks3-abo input { position: absolute; opacity: 0; pointer-events: none; }
.ks3-abo-mono {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  font-family: "KS Display", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .02em;
  color: var(--text-primary); background: var(--ks-flaeche-2); border: 1px solid var(--border);
}
.ks3-abo b { display: block; font-size: 15px; }
.ks3-abo small { display: block; color: var(--text-secondary); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.ks3-abo-haken {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center;
  color: transparent; transition: background var(--ks-t), border-color var(--ks-t), color var(--ks-t);
}
.ks3-abo:has(input:checked) { border-color: rgba(226, 189, 101, .7); background: linear-gradient(135deg, rgba(226, 189, 101, .10), var(--panel)); }
.ks3-abo:has(input:checked) .ks3-abo-mono { color: var(--gold-ink, #1a1408); background: linear-gradient(160deg, #f1d58e, #c39a48); border-color: transparent; }
.ks3-abo:has(input:checked) .ks3-abo-haken { background: var(--gold); border-color: var(--gold); color: var(--gold-ink, #1a1408); }
.ks3-abo:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.ks3-abo-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.ks3-abo-leiste .ks3-zaehler { margin-left: auto; color: var(--text-secondary); font-size: 14px; font-weight: 650; }

/* 8.4 Premium-Verkaufsseite */
.ks3-pm-hero {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 28px; align-items: center; padding: 36px 34px; border-radius: 24px;
  border: 1px solid rgba(226, 189, 101, .35);
  background: radial-gradient(700px 320px at 0% 0%, rgba(226, 189, 101, .18), transparent 65%),
              radial-gradient(500px 300px at 100% 100%, rgba(255, 138, 61, .10), transparent 70%),
              linear-gradient(135deg, var(--panel), var(--panel-2, var(--panel)));
}
.ks3-pm-hero h1 { margin: 6px 0 12px; font-family: "KS Display", sans-serif; font-size: clamp(32px, 4vw, 54px); line-height: 1.02; text-transform: uppercase; }
.ks3-pm-hero h1 em { font-style: normal; color: var(--gold-text, var(--gold)); }
.ks3-pm-hero > div > p { color: var(--text-secondary); font-size: 17px; line-height: 1.55; margin: 0 0 18px; max-width: 58ch; }
.ks3-pm-punkte { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ks3-pm-punkte li {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  border: 1px solid rgba(226, 189, 101, .3); background: rgba(226, 189, 101, .07);
}
.ks3-pm-kauf { padding: 20px; border-radius: 18px; background: rgba(5, 11, 20, .35); border: 1px solid var(--border); }
:root[data-theme="light"] .ks3-pm-kauf { background: rgba(255, 255, 255, .7); }
.ks3-pm-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; margin-bottom: 12px; background: rgba(46, 200, 120, .1); border: 1px solid rgba(46, 200, 120, .35); }
.ks3-vergleich { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.ks3-vergleich th, .ks3-vergleich td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.ks3-vergleich thead th { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.ks3-vergleich thead th:last-child { color: var(--gold-text, var(--gold)); }
.ks3-vergleich td:nth-child(2), .ks3-vergleich td:nth-child(3), .ks3-vergleich th:nth-child(2), .ks3-vergleich th:nth-child(3) { text-align: center; width: 120px; }
.ks3-vergleich td:nth-child(3) { background: rgba(226, 189, 101, .05); }
.ks3-vergleich small { display: block; color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.ks3-ja { color: var(--success, #43ca85); font-weight: 800; }
.ks3-nein { color: var(--text-muted); }
.ks3-teil { color: var(--gold-text, var(--gold)); font-weight: 700; font-size: 13px; }
.ks3-fkt-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ks3-fkt {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--ks-r);
  border: 1px solid var(--border); background: var(--panel); color: inherit; text-decoration: none;
}
.ks3-fkt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ks3-fkt b { font-size: 15.5px; }
.ks3-fkt p { margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; }
.ks3-fkt .ks3-ort { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--ks-flaeche-2); color: var(--text-secondary); white-space: nowrap; }
.ks3-fkt .ks3-ort.neu { background: rgba(110, 174, 255, .14); color: #9cc6ff; }
:root[data-theme="light"] .ks3-fkt .ks3-ort.neu { color: #1c5fb8; }
.ks3-kleingedruckt { color: var(--text-muted); font-size: 12.5px; line-height: 1.6; }
.ks3-kleingedruckt a { color: var(--text-secondary); text-decoration: underline; }
@media (max-width: 900px) {
  .ks3-pm-hero { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; }
  .ks3-vergleich td:nth-child(2), .ks3-vergleich td:nth-child(3), .ks3-vergleich th:nth-child(2), .ks3-vergleich th:nth-child(3) { width: 72px; padding-left: 6px; padding-right: 6px; }
}

/* 8.5 Statistiken: Ring- und Saeulendiagramme (SVG, serverseitig) */
.ks3-diagramme { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.ks3-ring { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.ks3-ring svg { width: 150px; height: 150px; }
.ks3-ring-mitte b { font-family: "KS Display", sans-serif; font-size: 30px; }
.ks3-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ks3-legende li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.ks3-legende i { width: 12px; height: 12px; border-radius: 4px; }
.ks3-legende b { font-variant-numeric: tabular-nums; }
.ks3-saeulen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: end; height: 190px; padding-top: 10px; }
.ks3-saeule { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.ks3-saeule i { display: block; width: 100%; max-width: 44px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #f1d58e, #c39a48); min-height: 3px; }
.ks3-saeule.heute i { background: linear-gradient(180deg, #ffb27d, var(--ks-orange-2)); }
.ks3-saeule b { font-size: 13px; font-variant-numeric: tabular-nums; }
.ks3-saeule small { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
/* Gleiche Reihenfolge wie ks3_ring() in statistiken.php: Free-TV, Pay-TV, Ausland, ohne Angabe */
.ks3-farbe-1 { background: #2ec878; } .ks3-farbe-2 { background: #e2bd65; } .ks3-farbe-3 { background: #6eaeff; } .ks3-farbe-4 { background: #8592a6; }

/* 8.6 Livecenter-Kopf + Karten */
.lc-kopf { margin-bottom: 18px; }
.lc-team-crest { width: 26px; height: 26px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; vertical-align: middle; margin-right: 8px; font-size: 10px; font-weight: 800; color: #fff; }
.lc-team-crest.logo { background: #fff; }
.lc-team-crest img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }

/* 8.7 Sportarten-Landingpage: Symbol statt "FUSS" */
.nx-head-badge .nx-mono svg { width: 44px; height: 44px; }

/* 8.8 Suche / Favoriten: Vorschlaege */
.ks3-vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ks3-vorschlag {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 5px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--ks-flaeche); color: var(--text-primary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.ks3-vorschlag:hover { border-color: rgba(226, 189, 101, .55); }
.ks3-vorschlag .crest { width: 30px; height: 30px; }
.ks3-vorschlag.ohne-crest { padding-left: 14px; }

/* Topspiel: Plan-Knopf mit Beschriftung (gleiches Skript wie die "+"-Knoepfe der Startseite) */
.ks3-top .k3-plus-top .k3-p-ok { display: none; }
.ks3-top .k3-plus-top.on .k3-p-ok { display: inline; }
.ks3-top .k3-plus-top.on .k3-p-plus { display: none; }
.ks3-top .k3-plus-top::after { content: "Zum Spielplan"; }
.ks3-top .k3-plus-top.on::after { content: "Im Spielplan"; }
.ks3-top .k3-plus-top.on { border-color: rgba(226, 189, 101, .6); color: #f1d58e; }
.k3-hero.mit-topspiel .k3-hero-copy h1 { font-size: clamp(36px, 3.5vw, 60px); }
.k3-hero.mit-topspiel .k3-hero-copy > p { font-size: 17px; }
.ks3-countdown-ende b { font-family: "KS Display", sans-serif; font-size: 20px; color: #ffd2b3; }

/* 8.9 Tippspiel (KickScope 3.0) */
.tp3-layout { margin-top: 0; }
.tp3-panel { padding: 20px 20px 16px; }
.tp3-filter .ks3-aktion { min-height: 32px; padding: 0 11px; font-size: 13px; }
.ks3-aktion.an, .ks3-aktion[aria-pressed="true"] { border-color: rgba(226, 189, 101, .7); color: var(--gold-text, var(--gold)); background: rgba(226, 189, 101, .1); }
.ks3-aktion small { color: var(--text-muted); font-weight: 700; }
.tp3-tag { margin: 18px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.tp3-tag:first-child { margin-top: 4px; }
.tp3-spiel {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 118px; gap: 14px; align-items: center;
  padding: 12px 14px; margin-bottom: 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface, var(--panel));
  transition: border-color var(--ks-t);
}
.tp3-spiel:focus-within { border-color: rgba(226, 189, 101, .6); }
.tp3-spiel.getippt { border-left: 3px solid var(--gold); }
.tp3-spiel.fertig { opacity: .85; }
.tp3-zeit { display: flex; flex-direction: column; align-items: center; }
.tp3-zeit b { font-family: "KS Display", sans-serif; font-size: 20px; font-variant-numeric: tabular-nums; }
.tp3-zeit small { font-size: 11px; color: var(--text-muted); }
.tp3-wb { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp3-paar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.tp3-team { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tp3-team.gast { justify-content: flex-end; text-align: right; }
.tp3-team .nm { font-weight: 750; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp3-team .crest { width: 32px; height: 32px; flex: none; }
.tp3-eingabe { display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--text-muted); }
.tp3-eingabe input {
  width: 48px; height: 44px; text-align: center; font-family: "KS Display", sans-serif; font-size: 20px; font-weight: 700;
  border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text-primary);
  -moz-appearance: textfield; appearance: textfield;
}
.tp3-eingabe input::-webkit-outer-spin-button, .tp3-eingabe input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tp3-eingabe input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226, 189, 101, .2); }
.tp3-eingabe input:disabled { opacity: .55; }
.tp3-rechts { text-align: right; }
.tp3-st { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1px solid var(--border); color: var(--text-secondary); }
.tp3-st.ok { color: var(--success, #43ca85); border-color: rgba(67, 202, 133, .4); }
.tp3-st.neu { color: var(--ks-orange-text); border-color: rgba(255, 138, 61, .45); }
.tp3-st.gesperrt { color: #ff8295; border-color: rgba(240, 68, 94, .4); }
.tp3-st.ergebnis { font-family: "KS Display", sans-serif; font-size: 15px; color: var(--text-primary); }
.tp3-leiste {
  position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(226, 189, 101, .35);
  background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(10px);
}
.tp3-leiste[hidden] { display: none; }
.tp3-status { color: var(--text-secondary); font-size: 14px; font-weight: 650; }
.tp3-login { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 12px;
  border-radius: 12px; border: 1px solid rgba(226, 189, 101, .35); background: rgba(226, 189, 101, .07); }
.tp3-login p { margin: 2px 0 0; font-size: 14px; color: var(--text-secondary); }
.tp3-regeln { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.tp3-regeln b { display: inline-grid; place-items: center; min-width: 30px; height: 26px; margin-right: 8px; border-radius: 8px; background: rgba(226, 189, 101, .14); color: var(--gold-text, var(--gold)); font-family: "KS Display", sans-serif; }
.tp3-board { width: 100%; border-collapse: collapse; font-size: 14px; }
.tp3-board th { text-align: left; font-size: 12px; color: var(--text-muted); font-weight: 700; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.tp3-board td { padding: 8px 4px; border-bottom: 1px solid var(--border); }
.tp3-board td:nth-child(3), .tp3-board td:nth-child(4), .tp3-board th:nth-child(3), .tp3-board th:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.tp3-board tr.ich td { background: rgba(226, 189, 101, .1); }
.ks3-tipp .pw-card { margin: 0; }
@media (max-width: 1100px) { .tp3-layout { grid-template-columns: minmax(0, 1fr); } .tp3-layout > aside { position: static; } }
@media (max-width: 640px) {
  .tp3-spiel { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 12px; }
  .tp3-zeit { flex-direction: row; gap: 8px; align-items: baseline; grid-column: 1; }
  .tp3-zeit b { font-size: 16px; }
  .tp3-rechts { grid-column: 2; grid-row: 1; }
  .tp3-mitte { grid-column: 1 / -1; }
  .tp3-team .nm { font-size: 13.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .tp3-team .crest { width: 26px; height: 26px; }
  .tp3-eingabe input { width: 42px; height: 42px; font-size: 18px; }
}
.ks3-abo small.ks3-abo-zahl { margin-top: 5px; color: var(--gold-text, var(--gold)); font-weight: 700; font-size: 12px; }

.ks3-abschnitt { margin: 6px 0 0; font-size: 22px; font-family: "KS Display", sans-serif; }
.ks3-eng { gap: 12px; }
.ks3-tabelle-scroll { overflow-x: auto; }
.ks3-pm-kauf-t { margin: 0 0 12px; font-size: 20px; }
.ks3-pm-kauf .pw-card { margin: 0 0 12px; }
.ks3-premium .ks3-kleingedruckt { margin: -6px 4px 0; }

/* 8.10 Livecenter */
.px-wrap.ks3-live-wrap { width: min(100%, 1240px); }
.ks3-live-wrap .nx-head { margin-bottom: 16px; }
.lg-fixture { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lg-fixture .lc-seite { display: inline-flex; align-items: center; }
.lg-fixture .lc-gegen { color: var(--text-muted); font-weight: 600; }
.lg-fixture .lc-offen { font-style: normal; font-weight: 600; color: var(--text-muted); }
.lg-score { padding: 2px 10px; border-radius: 8px; background: rgba(226, 189, 101, .1); font-family: "KS Display", sans-serif; font-size: 1.25rem !important; }
.lg-game.lc-card { transition: border-color var(--ks-t); }
.lg-game.lc-card:hover { border-color: rgba(226, 189, 101, .35); }

/* 8.11 Spielplan-Baukasten (/spiele): Kopf wie .nx-head, Werkzeuge als Knoepfe */
.sp-wrap { width: min(100%, var(--ks-w-weit)); padding-left: var(--ks-gutter); padding-right: var(--ks-gutter); }
.sp-hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 22px; align-items: center; padding: 26px 28px; border-radius: 22px;
  border: 1px solid rgba(226, 189, 101, .22); background: linear-gradient(135deg, var(--panel), var(--panel-2, var(--panel)));
  box-shadow: var(--nx-shadow, 0 10px 30px rgba(0, 0, 0, .22));
}
.sp-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(600px 220px at 0% 0%, rgba(226, 189, 101, .13), transparent 70%); }
.sp-hero .sp-ic {
  width: 88px; height: 88px; display: grid; place-items: center; border-radius: 22px;
  color: var(--gold-ink, #1a1408); background: linear-gradient(160deg, #f1d58e, #c39a48); box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.sp-hero h1, .sp-hero h1.disp { margin: 2px 0 6px; font-family: "KS Display", sans-serif; text-transform: none; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; }
.sp-hero p { font-size: 16px; color: var(--text-secondary); }
.sp-plan-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-plan-aktionen .auth-link {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; border-radius: 10px; text-decoration: none;
  border: 1px solid var(--border); background: var(--ks-flaeche); color: var(--text-primary); font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.sp-plan-aktionen .auth-link:hover { border-color: rgba(226, 189, 101, .55); color: var(--gold-text, var(--gold)); }
.sp-plan-aktionen #spLeeren:hover, .sp-plan-aktionen #spLoeschen:hover { border-color: rgba(240, 68, 94, .6); color: #ff8295; }
.sp-plan-aktionen select { min-height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text-primary); padding: 0 10px; }
@media (max-width: 760px) {
  .sp-hero { padding: 20px 18px; gap: 14px; border-radius: 18px; }
  .sp-hero .sp-ic { width: 60px; height: 60px; border-radius: 16px; }
  .sp-hero .sp-ic svg { width: 28px; height: 28px; }
}

/* 8.12 Suche */
.suche-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: end; padding: 18px; }
.suche-form label { grid-column: 1 / -1; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.suche-form input { width: 100%; min-height: 50px; font-size: 17px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface, var(--panel)); color: var(--text-primary); box-sizing: border-box; }
.suche-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226, 189, 101, .2); }
.suche-form .btn-gold { min-height: 50px; }
.ks3-leer kbd { padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border); font-size: 12px; background: var(--ks-flaeche); }
.sr-item { transition: border-color var(--ks-t), transform var(--ks-t) var(--ks-ease); }

/* 8.13 Live-Streams: Vorschauflaeche je Sportart (bewusst ohne Bild von YouTube - Klick-zu-Laden) */
.nx-stream-face { background: radial-gradient(260px 160px at 80% 0%, rgba(226, 189, 101, .16), transparent 70%), linear-gradient(160deg, #13233a, #0a1322); }
.nx-stream[data-sport="Basketball"] .nx-stream-face { background: radial-gradient(260px 160px at 80% 0%, rgba(255, 138, 61, .28), transparent 70%), linear-gradient(160deg, #2a1a10, #120c08); }
.nx-stream[data-sport="Volleyball"] .nx-stream-face { background: radial-gradient(260px 160px at 80% 0%, rgba(110, 174, 255, .28), transparent 70%), linear-gradient(160deg, #10203a, #08101c); }
.nx-stream[data-sport="Fußball"] .nx-stream-face { background: radial-gradient(260px 160px at 80% 0%, rgba(46, 200, 120, .26), transparent 70%), linear-gradient(160deg, #0f2a1d, #07140e); }
.nx-stream-face svg { transition: transform var(--ks-t) var(--ks-ease); }
.nx-stream-face:hover svg { transform: scale(1.08); }

/* 8.14 Premium-Werkzeuge (.pw-page: Abo-Berater, Sporttag, Wochenplaner, Scout, Replay ...)
   gleiche Breiten und Ueberschrift wie alle Seiten. Nur Bildschirm - die Druckansicht bleibt unveraendert. */
@media screen {
  .pw-page { max-width: var(--ks-w-schmal); padding: 24px var(--ks-gutter) 72px; box-sizing: border-box; }
  .pw-page.pw-wide { max-width: var(--ks-w-weit); }
  .pw-page > .pw-eyebrow:first-child { margin: 0 0 4px; }
  .pw-page > .pw-eyebrow:first-child + h1.disp, .pw-page > h1.disp:first-child {
    margin: 0 0 18px; font-family: "KS Display", sans-serif; text-transform: none;
    font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.01em;
  }
}
/* Anmelden + Konto: Ueberschrift ohne Versalien wie im Rest der Seite */
.px-wrap > section > h1.disp, .px-wrap > h1.disp { text-transform: none; font-family: "KS Display", sans-serif; }

/* 8.15 Logo im hellen Thema: der weisse Schriftzug "KICK" war auf hellem Grund kaum lesbar.
   ks-logo-gold-hell.png = gleiches Logo, nur der Schriftzug dunkel (Ball und Gold unveraendert). */
:root[data-theme="light"] .topbar .brand-logo {
  content: image-set(url("/img/ks-logo-gold-hell.png") 1x, url("/img/ks-logo-gold-hell@2x.png") 2x);
}

/* 8.16 Startseite: kleine Nachrichtenkarten - Vorschaubild im festen Seitenverhaeltnis statt
   schmalem Hochkant-Streifen ueber die ganze Kartenhoehe. */
.k3-news-small { grid-template-columns: 132px minmax(0, 1fr); align-items: start; }
.k3-news-small .k3-news-thumb { min-height: 0; aspect-ratio: 4 / 3; align-self: start; }
@media (max-width: 700px) { .k3-news-small { grid-template-columns: 104px minmax(0, 1fr); } }
@media (max-width: 560px) {
  .ks3-ring { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ks3-legende { width: 100%; }
  .ks3-legende li { grid-template-columns: 12px minmax(0, 1fr) auto; }
}