/* KickScope NEXT - Designsystem (15.10.2026)
 *
 * Wird NACH v21.css geladen und ersetzt dessen gewachsene Mehrfach-Overrides
 * fuer Seitengeruest, Navigation, Karten und Raster durch ein einheitliches
 * Regelwerk. Farben kommen ausschliesslich aus den bestehenden Tokens
 * (--panel, --border, --gold, --text-*), damit Hell/Dunkel weiter funktionieren.
 * Zurueckrollen: den <link> in v21/layout.php entfernen.
 *
 * Aufbau: 1 Tokens  2 Geruest+Navigation  3 Startseite  4 Karten
 *         5 Spielplan-Builder  6 Live-Center  7 Bedienelemente/Touch
 */

/* ---------- 1 Tokens ---------- */
:root {
  --nx-max: 1560px;
  --nx-pad: 28px;
  --nx-radius: 16px;
  --nx-radius-sm: 11px;
  --nx-card: var(--panel);
  --nx-line: var(--border);
  --nx-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  --nx-live: #f0445e;
  --nx-free: #2ec878;
  /* Gold als SCHRIFT (Flaechen bleiben --gold). v21 kannte das Token nicht,
     der Rueckfall auf --gold ergab im hellen Thema nur ~3,8:1. */
  --gold-text: var(--gold);
}
:root[data-theme="light"] {
  --nx-shadow: 0 8px 24px rgba(28, 43, 60, .10);
  --nx-free: #1f9d5c;
  --nx-live: #d3243f;
  --gold-text: #8a5f0d;   /* ~5,6:1 auf Weiss */
}
body { font-size: 15px; line-height: 1.5; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- 2 Geruest + Navigation ---------- */
.topbar-in, .mainnav-in {
  width: min(100%, var(--nx-max));
  padding-left: var(--nx-pad);
  padding-right: var(--nx-pad);
}
.topbar-in { min-height: 68px; }
.mainnav { background: rgba(255, 255, 255, .02); }
.mainnav-in { display: flex; align-items: center; gap: 2px; }
.mainnav a {
  padding: 14px 11px;
  gap: 6px;
  font-size: 14px;
  font-weight: 650;
  border-bottom-width: 3px;
  border-radius: 10px 10px 0 0;
  transition: background .15s, color .15s;
}
.mainnav a:hover { background: rgba(255, 255, 255, .05); color: var(--text-primary); }
.mainnav a.active { background: rgba(226, 189, 101, .10); }
.mainnav a .ic svg { width: 17px; height: 17px; }
@media (max-width: 1599px) { .mainnav a .ic { display: none; } .mainnav a { padding: 14px 12px; } }
.mainnav-tools { margin-left: auto; padding-left: 8px; display: flex; align-items: center; flex: none; }
.mainnav-tools .theme-toggle { margin: 0; }

/* Startseite: die doppelte Seitennavigation entfaellt, der Inhalt bekommt die Breite. */
.layout.nx-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  width: min(100%, var(--nx-max));
  margin: 0 auto;
  padding: 26px var(--nx-pad) 96px;
  align-items: start;
}
.layout.nx-home .col-center { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.layout.nx-home .col-right { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- 3 Startseite ---------- */
.nx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(226, 189, 101, .22);
  border-radius: 22px;
  background: #0a1220;
  color: #f4f6fa;
  min-height: 280px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 24px;
  padding: 34px 36px;
  box-shadow: var(--nx-shadow);
}
.nx-hero picture, .nx-hero-photo {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
}
.nx-hero-photo { object-fit: cover; object-position: 78% 28%; }
.nx-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 12, 22, .96) 0%, rgba(7, 12, 22, .86) 42%, rgba(7, 12, 22, .35) 100%);
}
.nx-hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; }
.nx-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid rgba(226, 189, 101, .45); background: rgba(226, 189, 101, .1);
  color: #f1d58e; font-size: 12px; font-weight: 800; letter-spacing: .1em;
}
.nx-hero h1 {
  margin: 8px 0 4px;
  font-family: "KS Display", sans-serif;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.02; letter-spacing: -.01em; font-weight: 700;
}
.nx-hero h1 em { font-style: normal; color: var(--gold, #e2bd65); }
.nx-hero p { margin: 0 0 16px; max-width: 520px; font-size: 17px; color: #d3dae6; }
.nx-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.nx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 16px; border-radius: 12px;
  font-size: 15px; font-weight: 800; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .22); color: #fff; background: rgba(255, 255, 255, .08);
  transition: transform .15s, filter .15s, background .15s;
}
.nx-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .14); }
.nx-btn.primary {
  border-color: transparent; color: #1a1408;
  background: linear-gradient(180deg, #f1d58e, #c39a48);
}
.nx-btn.primary:hover { filter: brightness(1.06); }
.nx-stats {
  align-self: end; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.nx-stat {
  padding: 14px 16px; border-radius: 14px;
  background: rgba(8, 14, 26, .62); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
}
.nx-stat b {
  display: block; font-family: "KS Display", sans-serif; font-size: 34px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.nx-stat span { display: block; margin-top: 6px; font-size: 13px; color: #c3cddb; font-weight: 600; }
.nx-stat.live b { color: #ff6d82; }
.nx-stat.free b { color: #5fe0a0; }

.nx-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.nx-sec-head h2 {
  margin: 0; font-family: "KS Display", sans-serif; font-size: 28px; line-height: 1.1; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.nx-kicker { display: block; margin-bottom: 3px; color: var(--gold-text, var(--gold)); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nx-count {
  display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 9px;
  border-radius: 999px; font-size: 14px; font-weight: 800; font-family: inherit;
  background: rgba(226, 189, 101, .16); color: var(--gold-text, var(--gold));
}
.nx-count.live { background: rgba(240, 68, 94, .16); color: var(--nx-live); }
.nx-more { font-weight: 700; font-size: 15px; color: var(--gold-text, var(--gold)); white-space: nowrap; }
.nx-more:hover { text-decoration: underline; }

.nx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.nx-chips .filter-chip {
  min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center;
  font-size: 14.5px; font-weight: 650; border-radius: 999px;
}

/* ---------- 4 Karten ---------- */
.nx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.nx-card {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 18px; border-radius: var(--nx-radius);
  background: var(--nx-card); border: 1px solid var(--nx-line);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.nx-card:hover { transform: translateY(-2px); border-color: rgba(226, 189, 101, .45); box-shadow: var(--nx-shadow); }
.nx-card.is-live { border-color: rgba(240, 68, 94, .45); }
.nx-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nx-league {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 13.5px; font-weight: 600; color: var(--text-secondary);
}
.nx-league span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.3;
}
.nx-league svg { flex: none; color: var(--gold-text, var(--gold)); }
.nx-time {
  flex: none; padding: 4px 11px; border-radius: 10px;
  font-family: "KS Display", sans-serif; font-size: 18px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums;
  background: rgba(226, 189, 101, .14); color: var(--gold-text, var(--gold));
}
.nx-time small { font-family: inherit; font-size: 12.5px; font-weight: 600; opacity: .85; margin-left: 6px; }
.nx-time.live { background: rgba(240, 68, 94, .16); color: var(--nx-live); }
.nx-teams { display: grid; gap: 10px; }
.nx-team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nx-team .crest { width: 34px; height: 34px; flex: none; }
.nx-team-name {
  min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nx-title { font-size: 18px; font-weight: 700; line-height: 1.3; }
.nx-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--nx-line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.nx-sender {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 14px; font-weight: 650; color: var(--text-secondary);
}
.nx-sender span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-sender.free { color: var(--nx-free); }
.nx-sender.keine { font-weight: 500; opacity: .8; }
.nx-plan {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border-radius: 10px; font-size: 13.5px; font-weight: 700; text-decoration: none;
  color: var(--text-primary); border: 1px solid var(--nx-line);
}
.nx-plan:hover { border-color: rgba(226, 189, 101, .6); color: var(--gold-text, var(--gold)); }
.nx-empty { padding: 28px; border-radius: var(--nx-radius); border: 1px dashed var(--nx-line); color: var(--text-secondary); text-align: center; }

/* rechte Spalte */
.layout.nx-home .col-right > section,
.layout.nx-home .col-right > .panel {
  padding: 20px; border-radius: var(--nx-radius); background: var(--nx-card); border: 1px solid var(--nx-line);
}
.layout.nx-home .col-right h2 { margin: 0 0 12px; font-size: 18px; }
.layout.nx-home .top-stories .small-section-heading { margin-bottom: 8px; }
.layout.nx-home .top-story { padding: 12px 0; }
.layout.nx-home .story-text strong { font-size: 15px; line-height: 1.35; }
.layout.nx-home .story-text small { font-size: 13px; }

/* Schlagzeilen */
.layout.nx-home .news-card h3 { font-size: 19px; line-height: 1.3; }
.layout.nx-home .news-card p { font-size: 15px; color: var(--text-secondary); }

/* ---------- 5 Spielplan-Builder ---------- */
@media (min-width: 1100px) {
  .sp-wrap {
    width: min(100%, var(--nx-max));
    max-width: none;
    padding: 24px var(--nx-pad) 90px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    column-gap: 28px;
    align-items: start;
  }
  .sp-wrap > .sp-hero,
  .sp-wrap > .sp-builder,
  .sp-wrap > .sp-hinweis { grid-column: 1 / -1; }
  .sp-wrap > .sp-summary,
  .sp-wrap > .sp-day,
  .sp-wrap > .panel.empty-live { grid-column: 1; }
  .sp-wrap > .sp-plan {
    grid-column: 2; grid-row: 4 / span 60; align-self: start;
    position: sticky; top: 84px; margin-top: 0;
    max-height: calc(100vh - 110px); overflow: auto;
  }
  .sp-leiste { display: none !important; }
}
.sp-hero { padding: 26px 30px; border-radius: 20px; }
.sp-hero h1 { font-size: clamp(30px, 3vw, 42px); }
.sp-builder {
  padding: 18px 20px; border-radius: var(--nx-radius);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; align-items: end;
}
.sp-builder .sp-field.grow { grid-column: span 2; }
.sp-builder select, .sp-builder input[type="text"], .sp-search input, .sp-builder input[name="q"] {
  min-height: 46px; font-size: 15.5px; border-radius: 12px;
}
.sp-builder label:not(.sp-toggle) { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; }
.sp-toggle {
  min-height: 46px; padding: 0 14px; border-radius: 12px; font-size: 15px; font-weight: 650;
  display: inline-flex; align-items: center; gap: 9px;
}
.sp-summary { font-size: 15.5px; padding: 6px 0; }
.sp-day { margin-top: 10px; }
.sp-day .section-head h2 { font-size: 24px; }
.game {
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 18px; padding: 16px 20px; border-radius: 14px;
}
.game.waehlbar { padding-left: 62px; }
.game-pick { left: 20px; }
.game .when .t { font-size: 24px; }
.game .when .day { font-size: 12.5px; }
.game .comp { font-size: 13px; }
.game .side .nm { font-size: 16.5px; font-weight: 700; }
.game .crest { width: 34px; height: 34px; }
.game .vs { font-size: 12px; opacity: .75; }
.plan-pick, .gs-pick { width: 22px; height: 22px; accent-color: var(--gold); cursor: pointer; }
.game-pick { display: grid; place-items: center; min-width: 28px; min-height: 44px; }
.game .sender-line { font-size: 14px; }
.sp-plan { border-radius: var(--nx-radius); padding: 20px; }
.sp-plan-kopf h2 { font-size: 22px; }
.sp-plan-aktionen .auth-link, .sp-plan-aktionen .form-send { min-height: 40px; font-size: 14px; }
.sp-plan-leer { padding: 22px 8px; text-align: center; color: var(--text-secondary); font-size: 14.5px; }

/* ---------- 6 Live-Center ---------- */
.pill-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px; border-radius: var(--nx-radius);
  background: var(--nx-card); border: 1px solid var(--nx-line);
}
.pill {
  min-height: 42px; padding: 0 16px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer;
  color: var(--text-secondary); background: transparent; border: 1px solid var(--nx-line);
  transition: background .15s, color .15s, border-color .15s;
}
.pill:hover { color: var(--text-primary); border-color: rgba(226, 189, 101, .5); }
.pill.active { color: var(--gold-ink, #1a1408); border-color: transparent; background: linear-gradient(180deg, #f1d58e, #c39a48); }
.pill .cnt { font-size: 12.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: rgba(127, 140, 160, .22); }
.pill.lc-pill { border-color: rgba(240, 68, 94, .45); color: var(--nx-live); }
.pill.lc-pill.active { background: var(--nx-live); color: #fff; }
.pill.lc-pill .lc-livecnt { background: rgba(255, 255, 255, .22); color: inherit; }
.lc-sec { margin-bottom: 30px; }
.lc-h { font-family: "KS Display", sans-serif; font-size: 26px; display: flex; align-items: center; gap: 10px; }
.lg-game.lc-card, .lc-card {
  padding: 18px 20px; border-radius: var(--nx-radius);
  background: var(--nx-card); border: 1px solid var(--nx-line);
}
.lc-card .lg-fixture { font-size: 18px; }
.lc-card .lg-time { font-size: 22px; }
.lc-btn { min-height: 42px; padding: 0 16px; border-radius: 11px; font-size: 14.5px; font-weight: 750; }

/* ---------- 7 Bedienelemente / Touch / Responsive ---------- */
@media (max-width: 1100px) {
  .layout.nx-home { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 96px; }
  .layout.nx-home .col-right { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .nx-stats { align-self: stretch; }
}
@media (max-width: 760px) {
  :root { --nx-pad: 16px; }
  .layout.nx-home .col-right { grid-template-columns: minmax(0, 1fr); }
  .nx-hero { padding: 24px 20px; border-radius: 18px; }
  .nx-hero::after { background: linear-gradient(180deg, rgba(7, 12, 22, .9), rgba(7, 12, 22, .72)); }
  .nx-hero p { font-size: 16px; }
  .nx-stat { padding: 12px; }
  .nx-stat b { font-size: 26px; }
  .nx-sec-head h2 { font-size: 23px; }
  .nx-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .game { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .game.waehlbar { padding-left: 50px; }
  .game-pick { left: 12px; }
  .game .when .t { font-size: 20px; }
  .sp-builder { grid-template-columns: minmax(0, 1fr); }
  .sp-builder .sp-field.grow { grid-column: auto; }
}
@media (pointer: coarse) {
  .btn-gold, .auth-link, .nx-btn, .nx-plan, .filter-chip, .sp-toggle, .pill, .lc-btn { min-height: 46px; }
  .mobnav a { min-height: 58px; font-size: 12px; }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .nx-card, .nx-btn, .mainnav a { transition: none; }
  .nx-card:hover { transform: none; }
}

/* Plan-Seitenleiste: Tabelle ohne Mindestbreite, Aktionen umbrechend */
.sp-plan .table-scroll > .league-table { min-width: 0; width: 100%; }
.sp-plan-tabelle th, .sp-plan-tabelle td { padding: 8px 6px; font-size: 13px; white-space: normal; }
.sp-plan-tabelle th { font-size: 11.5px; }
.sp-plan-leer { white-space: normal !important; }
.sp-plan-aktionen { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
#spGespeichert { min-width: 150px; min-height: 40px; border-radius: 10px; }
.game .teams { max-width: 640px; }

/* ---------- Live-Center: Kartenraster ---------- */
.px-wrap:has(.pill-row) { max-width: 1400px; padding-left: var(--nx-pad); padding-right: var(--nx-pad); }
@media (min-width: 1000px) {
  .lc-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .lc-sec > .lc-h { grid-column: 1 / -1; margin-bottom: 0; }
  .lc-sec > .lc-card { margin: 0; }
}
.lc-card { display: flex; flex-direction: column; gap: 14px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.lc-card:hover { transform: translateY(-2px); box-shadow: var(--nx-shadow); }
.lc-sec.live .lc-card { border-color: rgba(240, 68, 94, .45); }
.lc-card .lg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lc-card .lg-time {
  order: 1; padding: 3px 11px; border-radius: 10px; font-size: 20px;
  background: rgba(226, 189, 101, .14); color: var(--gold-text, var(--gold));
  font-variant-numeric: tabular-nums;
}
.lc-card .lg-live { order: 2; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.lc-card .lc-ft { order: 2; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.lc-card .lg-score { order: 3; margin-left: auto; font-family: "KS Display", sans-serif; font-size: 26px; font-weight: 700; }
.lc-card .lg-fixture { order: 4; flex-basis: 100%; font-size: 20px; line-height: 1.3; }
.lc-card .lg-comp { order: 5; flex-basis: 100%; font-size: 14px; color: var(--text-secondary); }
.lc-card .lc-acts { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--nx-line); }

/* Schmale Geraete: Abschnittskopf umbrechen, lange Wettbewerbs-Chips begrenzen */
.nx-sec-head { flex-wrap: wrap; }
.nx-chips .filter-chip { max-width: 100%; min-width: 0; white-space: normal; line-height: 1.3; padding-top: 8px; padding-bottom: 8px; }

/* ---------- 8 Vereine, Wettbewerbe, Tabellen (15.10.2026) ----------
 * Gemeinsame Bausteine fuer /team, /liga, /wettbewerbe, /vereine und /tabellen.
 * Kopf (.nx-head), zweispaltiges Raster (.nx-layout), Panels (.nx-panel),
 * Formkurve (.nx-form), Tabelle (.nx-table), Ergebnisliste (.nx-results).
 */
.nx-page { width: min(100%, 1400px); margin: 0 auto; padding: 24px var(--nx-pad) 96px; }
.nx-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; font-size: 13.5px; color: var(--text-secondary); }
.nx-crumbs a { color: var(--text-secondary); }
.nx-crumbs a:hover { color: var(--gold-text, var(--gold)); }
.nx-crumbs span[aria-hidden] { opacity: .5; }

.nx-head {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center;
  padding: 26px 28px; border-radius: 22px;
  border: 1px solid rgba(226, 189, 101, .22);
  background: linear-gradient(135deg, var(--nx-card), var(--panel-2, var(--nx-card)));
  box-shadow: var(--nx-shadow);
}
.nx-head::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%);
}
.nx-head-badge .crest, .nx-head-badge > .nx-mono {
  width: 88px; height: 88px; font-size: 26px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.nx-head-badge .crest img { padding: 7px; }
.nx-mono {
  display: grid; place-items: center; border-radius: 22px; font-family: "KS Display", sans-serif; font-weight: 700;
  color: var(--gold-ink, #1a1408); background: linear-gradient(160deg, #f1d58e, #c39a48);
}
.nx-head h1 {
  margin: 2px 0 6px; font-family: "KS Display", sans-serif; font-weight: 700;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.01em; overflow-wrap: anywhere;
}
.nx-head p { margin: 0; color: var(--text-secondary); font-size: 16px; max-width: 70ch; }
.nx-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nx-tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: var(--text-secondary);
  border: 1px solid var(--nx-line); background: rgba(127, 140, 160, .06); text-decoration: none;
}
a.nx-tag:hover { border-color: rgba(226, 189, 101, .55); color: var(--gold-text, var(--gold)); }
.nx-head-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.nx-btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 12px; font: inherit; font-size: 14.5px; font-weight: 750; cursor: pointer; text-decoration: none;
  color: var(--text-primary); background: transparent; border: 1px solid var(--nx-line);
  transition: border-color .15s, background .15s, color .15s;
}
.nx-btn-line:hover { border-color: rgba(226, 189, 101, .6); color: var(--gold-text, var(--gold)); }
.nx-btn-line[aria-pressed="true"] {
  color: var(--gold-ink, #1a1408); border-color: transparent; background: linear-gradient(180deg, #f1d58e, #c39a48);
}

/* Kennzahlen-Leiste im Kopf (vom ESPN-Client befuellt) */
.nx-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.nx-kpis[hidden] { display: none; }
.nx-kpi { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--nx-line); background: rgba(127, 140, 160, .06); min-width: 0; }
.nx-kpi b { display: block; font-family: "KS Display", sans-serif; font-size: 28px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.nx-kpi span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 650; color: var(--text-secondary); }
.nx-kpi.gold b { color: var(--gold-text, var(--gold)); }

.nx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; margin-top: 24px; align-items: start; }
.nx-layout > aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 84px; min-width: 0; }
.nx-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.nx-panel { padding: 20px; border-radius: var(--nx-radius); background: var(--nx-card); border: 1px solid var(--nx-line); min-width: 0; }
.nx-panel > h2, .nx-panel-head h2 { margin: 0 0 12px; font-size: 18px; font-weight: 750; display: flex; align-items: center; gap: 8px; }
.nx-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nx-panel-head a { font-size: 14px; font-weight: 700; color: var(--gold-text, var(--gold)); }
.nx-panel p { margin: 0 0 10px; color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }
.nx-panel p:last-child { margin-bottom: 0; }
.nx-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.nx-intro { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text-secondary); max-width: 75ch; }

.nx-linklist { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-linklist a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: 999px; max-width: 100%;
  font-size: 13.5px; font-weight: 650; color: var(--text-primary); text-decoration: none;
  border: 1px solid var(--nx-line); background: rgba(127, 140, 160, .05);
}
.nx-linklist a:hover { border-color: rgba(226, 189, 101, .55); color: var(--gold-text, var(--gold)); }
.nx-linklist a small { color: var(--text-secondary); font-weight: 700; }

/* Naechstes Spiel (Aufmacher) */
.nx-next {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 22px; border-radius: var(--nx-radius); border: 1px solid rgba(226, 189, 101, .35);
  background: linear-gradient(160deg, rgba(226, 189, 101, .09), transparent 60%), var(--nx-card);
}
.nx-next-side { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; min-width: 0; }
.nx-next-side .crest { width: 64px; height: 64px; font-size: 19px; }
.nx-next-side .nm { font-size: 18px; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; color: var(--text-primary); }
.nx-next-side a.nm:hover { color: var(--gold-text, var(--gold)); }
.nx-next-mid { text-align: center; }
.nx-next-mid .k { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text, var(--gold)); }
.nx-next-mid .t { display: block; font-family: "KS Display", sans-serif; font-size: 40px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.nx-next-mid .d { display: block; font-size: 14px; color: var(--text-secondary); font-weight: 650; }
.nx-next-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; padding-top: 14px; border-top: 1px solid var(--nx-line); font-size: 14px; color: var(--text-secondary); text-align: center; }
.nx-next-foot .free { color: var(--nx-free); font-weight: 700; }

/* Formkurve */
.nx-form { display: inline-flex; gap: 4px; vertical-align: middle; }
.nx-form i {
  width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center;
  font-style: normal; font-size: 11.5px; font-weight: 800; color: #fff; cursor: default;
}
.nx-form .f-S { background: #1e8f52; }
.nx-form .f-U { background: #6b7587; }
.nx-form .f-N { background: #c93349; }

/* Ergebnisliste */
.nx-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nx-results li {
  display: grid; grid-template-columns: 52px 26px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--nx-line); font-size: 14.5px;
}
.nx-results li:last-child { border-bottom: 0; }
.nx-results .dt { color: var(--text-secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
.nx-results .op { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.nx-results .op small { color: var(--text-secondary); font-weight: 600; margin-right: 4px; }
.nx-results .sc { font-family: "KS Display", sans-serif; font-size: 18px; font-variant-numeric: tabular-nums; }
.nx-results .nx-form i { width: 24px; height: 24px; }

/* Ladezustand */
.nx-skel { display: grid; gap: 10px; }
.nx-skel i {
  display: block; height: 16px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(127, 140, 160, .10), rgba(127, 140, 160, .22), rgba(127, 140, 160, .10));
  background-size: 200% 100%; animation: nxSkel 1.3s linear infinite;
}
.nx-skel i:nth-child(2n) { width: 82%; }
@keyframes nxSkel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .nx-skel i { animation: none; } }

/* Tabelle */
.nx-tablewrap { overflow-x: auto; position: relative; }
.nx-table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.nx-table th {
  text-align: right; padding: 9px 8px; white-space: nowrap;
  font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-secondary); border-bottom: 1px solid var(--nx-line);
}
.nx-table td { padding: 10px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--nx-line); }
.nx-table tr:last-child td { border-bottom: 0; }
.nx-table th.l, .nx-table td.l { text-align: left; }
.nx-table th.c, .nx-table td.c { text-align: center; }
.nx-table td.rk, .nx-table th.rk { width: 40px; text-align: center; }
.nx-table td.rk { font-weight: 800; }
.nx-table td.pts { font-weight: 800; font-size: 15.5px; }
.nx-table tbody tr { transition: background .12s; }
.nx-table tbody tr:hover { background: rgba(127, 140, 160, .07); }
.nx-table tr.is-me { background: rgba(226, 189, 101, .14); }
.nx-table tr.is-me td { font-weight: 750; }
.nx-tteam { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 300px; }
.nx-tteam img { width: 24px; height: 24px; object-fit: contain; flex: none; background: #fff; border-radius: 6px; padding: 2px; }
.nx-tteam .nm { overflow: hidden; text-overflow: ellipsis; font-weight: 650; color: var(--text-primary); }
.nx-tteam a.nm:hover { color: var(--gold-text, var(--gold)); text-decoration: underline; }
.nx-table tr.z-cl  td.rk { box-shadow: inset 4px 0 0 var(--nx-free); }
.nx-table tr.z-el  td.rk { box-shadow: inset 4px 0 0 var(--gold); }
.nx-table tr.z-rel td.rk { box-shadow: inset 4px 0 0 var(--nx-live); }
.nx-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 0; font-size: 12.5px; color: var(--text-secondary); }
.nx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.nx-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.nx-group-name { margin: 18px 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text, var(--gold)); }
.nx-group-name:first-child { margin-top: 0; }
.nx-table.compact { font-size: 13.5px; }
.nx-table.compact td, .nx-table.compact th { padding: 7px 6px; }
.nx-table.compact .nx-tteam { max-width: 148px; }
.nx-table.compact .nx-tteam .nm { white-space: nowrap; }
.nx-table.compact td.l { width: 100%; }
.nx-table.compact .nx-tteam img { width: 20px; height: 20px; }
.nx-upd { font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Ligawahl /tabellen */
.nx-tabs { display: flex; flex-direction: column; gap: 12px; padding: 16px; margin-top: 22px; border-radius: var(--nx-radius); background: var(--nx-card); border: 1px solid var(--nx-line); }
.nx-tabs-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nx-tabs-row > b { min-width: 104px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }

/* Wettbewerbs-Uebersicht + Vereinsverzeichnis */
.nx-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 16px; }
.nx-search {
  flex: 1 1 260px; min-width: 0; min-height: 46px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 15.5px;
  color: var(--text-primary); background: var(--nx-card); border: 1px solid var(--nx-line);
}
.nx-search:focus { border-color: rgba(226, 189, 101, .6); }
.nx-comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.nx-comp {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 16px; border-radius: var(--nx-radius); text-decoration: none; color: var(--text-primary);
  background: var(--nx-card); border: 1px solid var(--nx-line); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.nx-comp:hover { transform: translateY(-2px); border-color: rgba(226, 189, 101, .5); box-shadow: var(--nx-shadow); }
.nx-comp .nx-mono { width: 52px; height: 52px; border-radius: 14px; font-size: 17px; }
.nx-comp .crest { width: 52px; height: 52px; font-size: 16px; }
.nx-comp b { display: block; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.nx-comp small { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.nx-comp small .tab { color: var(--gold-text, var(--gold)); }
/* ---- Wettbewerbskarten (/wettbewerbe) + Abzeichen (auch Kopf von /liga) ----
 * 16.10.2026, Ueberarbeitung: Logo in fester 52er-Platte mit Innenabstand,
 * proportional per object-fit (hochformatige Logos wie NBA/WNBA bleiben drin),
 * Flagge NICHT mehr am Abzeichen, sondern 16x12 neben dem Landesnamen.
 * Erweitert nur die gemeinsamen .nx-comp-Regeln (die /vereine mitbenutzt). */
.nx-comp-grid--ligen { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px)  { .nx-comp-grid--ligen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .nx-comp-grid--ligen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .nx-comp-grid--ligen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nx-comp--liga { min-height: 92px; padding: 14px 16px; min-width: 0; }
.nx-comp-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nx-comp--liga .nx-comp-title {
  /* bis drei Zeilen (laengster Feed-Name passt so bei 320 px), Sicherung per
     line-clamp + voller Name im title-Attribut. Karten einer Reihe bleiben
     ueber das Grid-Stretching gleich hoch, die Metazeile rutscht nie heraus. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere;
}
.nx-comp-meta {
  display: flex; align-items: center; gap: 4px 10px; min-width: 0; flex-wrap: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary); line-height: 1.2;
}
.nx-comp-meta > * { flex: none; white-space: nowrap; }
.nx-comp-meta .nx-comp-land {
  flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary);
}
.nx-comp-land > span { overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.nx-comp-meta .nx-comp-tab { color: var(--gold-text, var(--gold)); }
.nx-flag {
  flex: none; width: 16px; height: 12px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(127, 140, 160, .35);
}

/* Abzeichen: feste Platte; das Bild sitzt mit Innenabstand darin und wird nur
 * verkleinert (max-*), nie verzerrt. Logo auf Weiss in beiden Themen - die
 * ESPN-Logos sind fuer helle Flaechen gemacht, transparente Logos brauchen
 * einen definierten Grund. Ohne Logo oder bei Ladefehler: Sport-Symbol auf Gold. */
.nx-lbadge {
  /* Flex statt Grid: nur so loesen sich die 100 % des Bildes gegen die feste
     Plattenhoehe auf (im Grid zaehlt die automatisch bemessene Zeile). */
  flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden;
  width: 52px; height: 52px; padding: 8px; border-radius: 14px;
  color: var(--gold-ink, #1a1408); background: linear-gradient(160deg, #f1d58e, #c39a48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.nx-lbadge.has-logo { background: #fff; border: 1px solid rgba(16, 35, 61, .12); box-shadow: 0 2px 8px rgba(0, 0, 0, .16); }
.nx-lbadge-img { display: block; width: 100%; height: 100%; min-width: 0; object-fit: contain; }
.nx-lbadge-fb { width: 52%; height: 52%; opacity: .9; }
.nx-lbadge.has-logo .nx-lbadge-fb { display: none; }
.nx-lbadge.is-broken { background: linear-gradient(160deg, #f1d58e, #c39a48); border: 0; }
.nx-lbadge.is-broken .nx-lbadge-img { display: none; }
.nx-lbadge.is-broken .nx-lbadge-fb { display: block; }
.nx-head-badge .nx-lbadge { width: 88px; height: 88px; padding: 12px; border-radius: 22px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.nx-kicker .nx-flag { display: inline-block; vertical-align: -1px; margin: 0 2px 0 4px; }
.nx-sport-h { margin: 30px 0 12px; font-family: "KS Display", sans-serif; font-size: 26px; display: flex; align-items: center; gap: 10px; }
.nx-hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) { .nx-comp { transition: none; } .nx-comp:hover { transform: none; } }

@media (max-width: 1100px) {
  .nx-layout { grid-template-columns: minmax(0, 1fr); }
  .nx-layout > aside { position: static; }
}
@media (max-width: 760px) {
  .nx-page { padding-top: 16px; }
  .nx-head { grid-template-columns: auto minmax(0, 1fr); padding: 20px 18px; gap: 14px 16px; border-radius: 18px; align-items: start; }
  .nx-head-badge .crest, .nx-head-badge > .nx-mono { width: 60px; height: 60px; font-size: 19px; }
  .nx-head-badge .nx-lbadge { width: 60px; height: 60px; padding: 8px; border-radius: 16px; }
  .nx-head-badge > .nx-mono { border-radius: 16px; }
  .nx-head p { font-size: 15px; }
  .nx-head-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .nx-head-actions > * { flex: 1 1 150px; }
  .nx-kpi b { font-size: 23px; }
  .nx-next { padding: 16px 12px; gap: 8px; }
  .nx-next-side .crest { width: 46px; height: 46px; }
  .nx-next-side .nm { font-size: 15px; }
  .nx-next-mid .t { font-size: 30px; }
  .nx-table { font-size: 13.5px; }
  .nx-table .hide-s { display: none; }
  .nx-tteam { max-width: 170px; }
  .nx-tabs-row > b { min-width: 0; width: 100%; }
  .nx-results li { grid-template-columns: 46px 24px minmax(0, 1fr) auto; gap: 8px; }
  .nx-sport-h { font-size: 22px; }
}

/* ---------- 9 Schlagzeilen (15.10.2026) ---------- */
.nx-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.nx-news {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-decoration: none; color: var(--text-primary);
  border-radius: var(--nx-radius); background: var(--nx-card); border: 1px solid var(--nx-line);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.nx-news:hover { border-color: rgba(226, 189, 101, .5); transform: translateY(-2px); box-shadow: var(--nx-shadow); }
.nx-news:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.nx-news-img {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center;
  background: linear-gradient(160deg, #16273f, #0a1220) center / cover no-repeat;
}
.nx-news-img .ph { font-family: "KS Display", sans-serif; font-size: 22px; color: rgba(255, 255, 255, .55); text-transform: uppercase; }
.nx-news-img .sb {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px;
  background: rgba(5, 10, 20, .72); color: #dbe4f0; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.nx-news-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; min-width: 0; }
.nx-news-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-secondary); }
.nx-news-meta .src { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text, var(--gold)); }
.nx-news h2 { margin: 0; font-size: 17.5px; line-height: 1.32; font-weight: 750; overflow-wrap: anywhere; }
.nx-news p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }
.nx-news-foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; align-items: center; font-size: 13px; }
.nx-news-foot em { font-style: normal; color: var(--text-secondary); }
.nx-news-foot .go { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 750; color: var(--gold-text, var(--gold)); }
.nx-news.lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.nx-news.lead .nx-news-img { aspect-ratio: auto; min-height: 280px; }
.nx-news.lead .nx-news-body { padding: 26px 28px; justify-content: center; }
.nx-news.lead h2 { font-family: "KS Display", sans-serif; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; }
.nx-news.lead p { font-size: 16px; }
.nx-news.lead .nx-news-foot { margin-top: 6px; }
@media (max-width: 760px) {
  .nx-news.lead { display: flex; }
  .nx-news.lead .nx-news-img { aspect-ratio: 16 / 9; min-height: 0; }
  .nx-news.lead .nx-news-body { padding: 16px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) { .nx-news { transition: none; } .nx-news:hover { transform: none; } }

/* Live-Streams (/livestreams): Karte im Stil von .nx-news, Klick-zu-Laden */
.nx-stream { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--nx-radius); background: var(--nx-card); border: 1px solid var(--nx-line); }
.nx-stream.is-live { border-color: rgba(240, 68, 94, .55); }
.nx-stream-face {
  position: relative; aspect-ratio: 16 / 9; width: 100%; padding: 0; border: 0; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #e8eef7;
  background: radial-gradient(420px 200px at 20% 0%, rgba(226, 189, 101, .22), transparent 70%), linear-gradient(150deg, #1b2c49, #0a1220);
}
.nx-stream-face:hover .lucide, .nx-stream-face:focus-visible .lucide { color: #f1d58e; transform: scale(1.06); }
.nx-stream-face .lucide { transition: transform .15s, color .15s; }
.nx-stream-face .cta { font-size: 14px; font-weight: 750; }
.nx-stream-face:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.nx-stream-time { position: absolute; left: 12px; top: 10px; font-family: "KS Display", sans-serif; font-size: 22px; font-variant-numeric: tabular-nums; }
.nx-stream-live { position: absolute; left: 12px; top: 12px; padding: 3px 9px; border-radius: 7px; background: #e72d4e; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.nx-stream iframe { display: block; aspect-ratio: 16 / 9; width: 100%; border: 0; }
.nx-stream h3 { margin: 0; font-size: 17px; line-height: 1.32; font-weight: 750; overflow-wrap: anywhere; }
.nx-stream p { margin: 0; font-size: 14px; color: var(--text-secondary); }
.nx-stream p b { color: var(--text-primary); font-weight: 700; }
.nx-stream .nx-news-meta span:last-child:not(.src) { text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .nx-stream-face .lucide { transition: none; } }
.nx-stream-face.es { background: radial-gradient(420px 200px at 20% 0%, rgba(145, 70, 255, .30), transparent 70%), linear-gradient(150deg, #1d1838, #0a1220); }
.nx-stream .es-kein { font-size: 13px; }

/* ---------- 10 Bestandsseiten an NEXT angleichen (15.10.2026) ----------
 * Rund 25 Seiten (FAQ, Rechtliches, Kontakt, Woche, TV-Guide, Suche, Luna,
 * Highlights, Konto …) nutzen noch das V2.1-Geruest .px-wrap/.px-hero.
 * Statt jede Seite umzubauen, bekommt das Geruest hier die NEXT-Optik.
 * FEHLER BEHOBEN: .px-hero hatte einen FESTEN dunklen Verlauf - im hellen
 * Thema stand dunkle Schrift auf Dunkelblau (praktisch unlesbar).
 */
.px-wrap { width: min(100%, 1160px); max-width: none; margin: 24px auto 0; padding: 0 var(--nx-pad) 72px; gap: 20px; box-sizing: border-box; }
.px-hero {
  position: relative; isolation: isolate; overflow: hidden; flex-wrap: nowrap; gap: 22px;
  padding: 26px 28px; border-radius: 22px; border: 1px solid rgba(226, 189, 101, .22);
  background: linear-gradient(135deg, var(--nx-card), var(--panel-2, var(--nx-card)));
  box-shadow: var(--nx-shadow); color: var(--text-primary);
}
.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 {
  flex: none; 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 > div { min-width: 0; flex: 1; }
.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; color: var(--text-primary);
}
.px-hero p { margin: 0; color: var(--text-secondary); font-size: 16px; line-height: 1.55; max-width: 72ch; }
.px-hero p.muted:first-child {
  margin-bottom: 3px; color: var(--gold-text, var(--gold)); font-size: 12px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.px-hero a { color: var(--gold-text, var(--gold)); font-weight: 700; }
.px-wrap > .panel, .px-wrap .panel.box { border-radius: var(--nx-radius); }
.px-note { color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 760px) {
  .px-wrap { margin-top: 16px; }
  .px-hero { padding: 20px 18px; gap: 14px 16px; border-radius: 18px; align-items: flex-start; }
  .px-hero > svg:first-child { width: 60px; height: 60px; padding: 15px; border-radius: 16px; }
  .px-hero p { font-size: 15px; }
}
@media (max-width: 420px) {
  .px-hero { flex-direction: column; }
}
/* FAQ: in der Flex-Spalte schrumpfte die Liste auf Inhaltsbreite (schmale Kaesten). */
.faq-list { width: 100%; max-width: 860px; }
.faq-list details { padding: 0; }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; list-style: none;
  padding: 18px 20px; font-size: 16.5px; line-height: 1.4; min-height: 44px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px;
  font-size: 20px; font-weight: 700; color: var(--gold-text, var(--gold)); border: 1px solid var(--nx-line);
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin: 0; padding: 0 20px 18px; font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
.faq-list summary:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: var(--nx-radius); }
.faq-foot { width: 100%; max-width: 860px; margin: 0 auto; box-sizing: border-box; }

/* ---------- 11 Programmzeilen: /woche, /tv-guide (15.10.2026) ---------- */
.nx-rows { list-style: none; margin: 0; padding: 0; }
.nx-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 220px); gap: 14px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--nx-line); font-size: 15px;
}
.nx-row:last-child { border-bottom: 0; }
.nx-row .t { font-family: "KS Display", sans-serif; font-size: 19px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.nx-row .t small { display: block; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); letter-spacing: .02em; }
.nx-row .m { min-width: 0; }
.nx-row .m b { display: block; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.nx-row .m b a { color: var(--text-primary); }
.nx-row .m b a:hover { color: var(--gold-text, var(--gold)); text-decoration: underline; }
.nx-row .m .vs { color: var(--text-secondary); font-weight: 500; }
.nx-row .m small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-row .ch { justify-self: end; text-align: right; font-size: 13.5px; font-weight: 650; color: var(--text-primary); overflow-wrap: anywhere; }
.nx-row .ch em { font-style: normal; color: var(--text-secondary); font-weight: 700; }
.nx-row .ch.keine { color: var(--text-secondary); font-weight: 500; }
.nx-row.free .ch { color: var(--nx-free); }
.nx-chan .nx-rows .nx-row, .nx-row:not(:has(.ch)) { grid-template-columns: 74px minmax(0, 1fr); }
.nx-chan .nx-panel-head h3 { margin: 0 0 8px; font-size: 18px; font-weight: 750; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nx-chan { scroll-margin-top: 90px; }
.nx-tag.free { color: var(--nx-free); border-color: currentColor; min-height: 24px; font-size: 12px; }
.nx-more-rows summary { cursor: pointer; padding: 10px 0 2px; font-weight: 750; font-size: 14px; color: var(--gold-text, var(--gold)); min-height: 44px; display: flex; align-items: center; }
.nx-free-chip.selected { background: var(--nx-free); border-color: var(--nx-free); color: #fff; }

/* Tagesleiste /woche */
.nx-daynav { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 4px 0 20px; }
.nx-daynav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 6px;
  border-radius: 12px; border: 1px solid var(--nx-line); background: var(--nx-card); color: var(--text-primary); text-align: center;
}
.nx-daynav a b { font-size: 13px; font-weight: 750; line-height: 1.2; }
.nx-daynav a span { font-family: "KS Display", sans-serif; font-size: 20px; color: var(--gold-text, var(--gold)); }
.nx-daynav a:hover { border-color: rgba(226, 189, 101, .55); }
.nx-daynav a.leer span { color: var(--text-secondary); }
.nx-day { scroll-margin-top: 90px; }

/* TV-Guide: die lange Senderliste darf nicht "kleben" */
.nx-layout > aside:has(#tv-wahl) { position: static; }

@media (max-width: 760px) {
  .nx-row { grid-template-columns: 52px minmax(0, 1fr); gap: 4px 12px; }
  .nx-row .t { font-size: 17px; }
  .nx-row .ch { grid-column: 2; justify-self: start; text-align: left; font-size: 13px; }
  .nx-chan .nx-rows .nx-row { grid-template-columns: 64px minmax(0, 1fr); }
  .nx-daynav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .nx-daynav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 12 Prioritaets-Navigation (15.10.2026) ----------
 * Links in .mainnav-links; was nicht passt, verschiebt das Skript in layout.php
 * in das Panel "Mehr". Ohne JS: Linkzeile bleibt waagerecht scrollbar (wie vorher),
 * der Hell/Dunkel-Schalter steht aber immer sichtbar rechts daneben.
 */
.mainnav-in { overflow: visible; gap: 6px; }
.mainnav-links { flex: 1 1 auto; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.mainnav-links::-webkit-scrollbar { display: none; }
.js-nav .mainnav-links { overflow: hidden; }
.mainnav-links a[hidden] { display: none; }
.mainnav-more { position: relative; flex: none; }
.mainnav-more[hidden] { display: none; }
.mainnav-more > button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
}
.mainnav-more > button:hover, .mainnav-more > button[aria-expanded="true"] { background: rgba(127, 140, 160, .10); color: var(--text-primary); }
.mainnav-more > button.active { color: var(--gold-text, var(--gold)); }
.mainnav-more > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.mainnav-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; padding: 6px;
  display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--nx-line);
  background: var(--panel, #0d1827); box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.mainnav-panel[hidden] { display: none; }
.mainnav .mainnav-panel a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
  color: var(--text-primary); font-size: 14.5px; white-space: nowrap;
}
.mainnav .mainnav-panel a .ic { display: inline-flex; color: var(--text-secondary); }
.mainnav .mainnav-panel a:hover, .mainnav .mainnav-panel a:focus-visible { background: rgba(127, 140, 160, .12); }
.mainnav .mainnav-panel a.active { color: var(--gold-text, var(--gold)); background: rgba(226, 189, 101, .10); }
:root[data-theme="light"] .mainnav-panel { background: #fff; box-shadow: 0 16px 40px rgba(28, 43, 60, .16); }
.mainnav.nav-kompakt #ksNavLinks a .ic { display: none; }
/* Highlights: ganze Karte ist der Link nach YouTube */
a.nx-hl { text-decoration: none; color: var(--text-primary); transition: border-color .15s, transform .15s; }
a.nx-hl:hover { border-color: rgba(226, 189, 101, .5); transform: translateY(-2px); }
a.nx-hl:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
a.nx-hl .nx-news-body, a.nx-hl .nx-news-meta, a.nx-hl .nx-stream-face { display: flex; }
a.nx-hl .nx-news-body { flex-direction: column; }
@media (prefers-reduced-motion: reduce) { a.nx-hl { transition: none; } a.nx-hl:hover { transform: none; } }

/* ---------- 13 Kontoseiten: /mein-kickscope, /favoriten (15.10.2026) ---------- */
/* .px-hero > div { flex: 1 } (Abschnitt 10) zog den Avatar zur Ellipse auseinander. */
.px-hero > .dash-avatar { flex: none; width: 72px; height: 72px; }
/* .text-link bringt aus der V2.1-Kopfzeile margin-left:auto mit - in den Karten
   klebten "Einstellungen ändern" und "Mitteilungen ansehen" so aneinander. */
.dash-karte > .text-link { margin: 4px 18px 0 0; font-size: 14px; min-height: 32px; }
.dash-links a { display: inline-flex; min-height: 32px; align-items: center; color: var(--text-primary); }
.dash-links a:hover { color: var(--gold-text, var(--gold)); text-decoration: underline; }
.dash-status.an { color: var(--nx-free); }
@media (max-width: 760px) { .px-hero > .dash-avatar { width: 56px; height: 56px; font-size: 24px; } }
/* /konto: "Abmelden" stand ohne Abstand direkt ueber dem E-Mail-Feld. */
.ko-abmelden { margin: 14px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--nx-line); }

/* "So entsteht diese Übersicht" (ks_v21_datenhinweis, 17.10.2026): Herkunft,
   Datenstand und Lesart der Senderangaben unter den Listen. Zugeklappt eine Zeile. */
.ks-datenhinweis { margin: 22px 0 8px; padding: 0; }
.ks-datenhinweis summary { cursor: pointer; padding: 14px 18px; font-size: 14px; list-style: none; }
.ks-datenhinweis summary::-webkit-details-marker { display: none; }
.ks-datenhinweis summary::before { content: "ⓘ "; color: var(--gold-text, var(--gold)); }
.ks-datenhinweis p { margin: 0; padding: 0 18px 12px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.ks-datenhinweis p:last-child { padding-bottom: 16px; }

/* Rechteseiten (/<liga>-uebertragung): Beleg je Zeile + Quellenliste (17.10.2026). */
.ue-beleg { font-size: 13px; white-space: normal; }
.ue-beleg a { color: var(--gold-text, var(--gold)); text-decoration: underline; }
.ue-beleg-offen { color: var(--text-secondary); font-style: italic; }
.ue-quellen { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.ue-quellen a { color: var(--gold-text, var(--gold)); }