/* Cybersoccer — gemeinsame Designsprache für tipprunde/, managerspiel/ und
   die Root-Seite. Leitidee: die Bundesliga-Konferenz-Ticker-Tradition
   (Radio-/Videotext-Ticker) statt generischer Sport-App-Optik.
   Eigentümer: Codex_leitstand (siehe project_cybersoccer_design_ownership
   in dessen Memory) - Änderungen hier wirken sich auf alle drei Bereiche
   aus, bitte vor größeren Anpassungen abstimmen. */

/* ============ TOKENS ============ */
:root{
  --pitch-ink:#0F2B1E;
  --pitch-ink-2:#16382A;
  --chalk:#F7F4EC;
  --chalk-2:#EDE8DA;
  --floodlight:#FFC64B;
  --floodlight-ink:#4A3200;
  --slate:#566259;
  --slate-soft:#8B968D;
  --confirmed:#2F7A4C;
  --confirmed-bg:#E4F1E7;
  --alert:#B23A2E;
  --alert-bg:#F7E3DF;
  --line:#D9D2BE;

  --bg:var(--chalk);
  --bg-raised:#FFFFFF;
  --ink:var(--pitch-ink);
  --ink-muted:var(--slate);
  --accent:var(--floodlight);
  --accent-ink:var(--floodlight-ink);
  --border:var(--line);
  --shadow:0 1px 0 rgba(15,43,30,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--pitch-ink);
    --bg-raised:var(--pitch-ink-2);
    --ink:var(--chalk);
    --ink-muted:#9FB0A5;
    --accent:var(--floodlight);
    --accent-ink:#241800;
    --border:#2A4A38;
    --confirmed-bg:#173425;
    --confirmed:#6FCB93;
    --alert-bg:#3B1E19;
    --alert:#F09184;
    --shadow:0 1px 0 rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --bg:var(--pitch-ink);
  --bg-raised:var(--pitch-ink-2);
  --ink:var(--chalk);
  --ink-muted:#9FB0A5;
  --accent:var(--floodlight);
  --accent-ink:#241800;
  --border:#2A4A38;
  --confirmed-bg:#173425;
  --confirmed:#6FCB93;
  --alert-bg:#3B1E19;
  --alert:#F09184;
  --shadow:0 1px 0 rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Work Sans",system-ui,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent); color:var(--accent-ink)}
a{color:inherit}
.num{font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}

h1,h2,h3,.display{
  font-family:"Anton",system-ui,sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.01em; text-wrap:balance;
  color:var(--ink);
}

.wrap{max-width:1180px; margin:0 auto; padding:0 20px}

/* ============ TICKER NAV — gemeinsame Klammer über alle Bereiche ============ */
.ticker{
  background:var(--pitch-ink); border-bottom:3px solid var(--accent);
  color:var(--chalk); position:sticky; top:0; z-index:40;
}
.ticker-row{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:0; height:52px; overflow-x:auto;
  scrollbar-width:none;
}
.ticker-row::-webkit-scrollbar{display:none}
.ticker-brand{
  font-family:"Anton",sans-serif; font-size:1.05rem; letter-spacing:.04em;
  color:var(--floodlight); white-space:nowrap; padding-right:18px; margin-right:18px;
  border-right:1px solid rgba(247,244,236,.18); flex:none; text-decoration:none;
}
.ticker-brand small{display:block; font-family:"Work Sans",sans-serif; font-size:.58rem;
  font-weight:600; letter-spacing:.14em; color:#9FB0A5; margin-top:-2px}
.ticker-links{display:flex; align-items:center; gap:4px; white-space:nowrap}
.ticker-links a{
  font-size:.82rem; font-weight:600; text-decoration:none; color:#C9D3CB;
  padding:8px 13px; border-radius:2px; letter-spacing:.01em;
  border-bottom:2px solid transparent;
}
.ticker-links a:hover{color:var(--chalk)}
.ticker-links a.aktiv{color:var(--floodlight); border-bottom-color:var(--floodlight)}
.ticker-links .sep{width:1px; height:16px; background:rgba(247,244,236,.15); margin:0 6px; flex:none}

/* ============ HERO ============ */
.hero{padding:40px 0 28px; border-bottom:1px solid var(--border)}
.hero-eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-muted); display:flex; align-items:center; gap:8px; margin:0 0 10px;
}
.hero-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--confirmed); flex:none;
  box-shadow:0 0 0 3px var(--confirmed-bg)}
h1.hero-title{font-size:clamp(2.1rem,5vw,3.4rem); margin:0 0 8px; line-height:.98}
.hero-sub{color:var(--ink-muted); max-width:64ch; margin:0; font-size:1.02rem}

/* ============ LAYOUT ============ */
.stack{display:flex; flex-direction:column; gap:22px; padding:28px 0 64px}
.grid-2{display:grid; grid-template-columns:1.3fr 1fr; gap:22px}
@media(max-width:860px){.grid-2{grid-template-columns:1fr}}

.controls{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}
select{
  padding:9px 12px;border:1px solid var(--border);border-radius:3px;background:var(--bg-raised);
  font:inherit;color:var(--ink);min-width:220px;
}

.panel{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:3px;
  box-shadow:var(--shadow); overflow:hidden;
}
.panel-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.panel-head h2{font-size:1.15rem; margin:0}
.panel-head .meta{font-size:.72rem; color:var(--ink-muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.panel-body{padding:0}
.panel-body.pad{padding:16px 18px}

/* ============ TABELLE ============ */
table.standings{width:100%; border-collapse:collapse; font-size:.9rem}
table.standings th{
  text-align:left; font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-muted); padding:8px 10px; border-bottom:1px solid var(--border);
}
table.standings td{padding:8px 10px; border-bottom:1px solid var(--border)}
table.standings tr:last-child td{border-bottom:none}
table.standings .r{text-align:right}
table.standings td.rank{font-family:"JetBrains Mono"; font-weight:700; color:var(--ink-muted); width:1.6em}
table.standings tr.leader td.rank{color:var(--accent-ink); background:var(--accent)}
table.standings tr.leader{background:color-mix(in srgb, var(--accent) 14%, transparent)}
table.standings td.team{font-weight:600}
table.standings td.pts{font-family:"JetBrains Mono"; font-weight:700}
.table-scroll{overflow-x:auto}

/* ============ BADGES / STATUS ============ */
.pill{
  display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700;
  letter-spacing:.03em; padding:3px 9px; border-radius:20px; white-space:nowrap;
}
.pill.confirmed{background:var(--confirmed-bg); color:var(--confirmed)}
.pill.alert{background:var(--alert-bg); color:var(--alert)}
.pill.muted{background:var(--chalk-2); color:var(--ink-muted)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pill.muted{background:rgba(247,244,236,.08)}}
:root[data-theme="dark"] .pill.muted{background:rgba(247,244,236,.08)}
.pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}

/* ============ SPIELPLAN LISTE ============ */
.fixture{
  display:flex; align-items:center; gap:12px; padding:11px 18px; border-bottom:1px solid var(--border);
}
.fixture:last-child{border-bottom:none}
.fixture .side{flex:1; font-weight:600; font-size:.88rem}
.fixture .side.away{text-align:right}
.fixture .score{
  font-family:"JetBrains Mono"; font-weight:700; font-size:1.05rem; flex:none; min-width:64px;
  text-align:center; padding:3px 0;
}
.fixture .score.pred{color:var(--ink-muted); font-size:.92rem}

/* ============ KADER / EINSATZSTATUS ============ */
.squad-row{
  display:grid; grid-template-columns:26px 1fr auto auto; align-items:center; gap:12px;
  padding:10px 18px; border-bottom:1px solid var(--border); font-size:.88rem;
}
.squad-row:last-child{border-bottom:none}
.status-dot{width:11px; height:11px; border-radius:50%; flex:none}
.status-dot.start{background:var(--confirmed)}
.status-dot.sub{background:var(--floodlight)}
.status-dot.bench{background:#6C8CBF}
.status-dot.out{background:var(--alert)}
.squad-name{font-weight:600}
.squad-pos{font-size:.72rem; color:var(--ink-muted); font-weight:600; letter-spacing:.03em}
.squad-pts{font-family:"JetBrains Mono"; font-weight:700; text-align:right; min-width:44px}

/* ============ UTILITY ============ */
.legend{display:flex; flex-wrap:wrap; gap:14px; padding:14px 18px; font-size:.76rem; color:var(--ink-muted)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.leer{color:var(--ink-muted); padding:24px 18px; text-align:center}