/* =====================================================================
   KMLS Tippspiel WM 2026  ::  app.css
   Ein Stylesheet, zwei Themes. Nur die Tokenwerte unterscheiden sich,
   die Komponentenregeln sind fuer beide Modi identisch.
   ===================================================================== */

/* --- Token-Ebene: hell (Standard) --------------------------------- */
:root {
  --brand:#191e5c; --brand-700:#232a78;
  --brand-solid:#191e5c; --brand-solid-700:#232a78;
  --brand-50:#ebedf6;
  --ink:#2b2f37; --anthra:#3a3f4a;
  --bg:#eef0f3; --surface:#ffffff; --surface-2:#f6f7f9;
  --border:#dfe1e8; --border-strong:#cfd2dc;
  --muted:#646a78; --muted-2:#8a8f9c;
  --live:#b4472f; --live-bg:#f7ece8;
  --on-brand:#ffffff;
  --logo:#191e5c;
  --input-bg:#ffffff;
  --fav-border:var(--brand-50);

  --r:10px; --r-sm:8px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:1100px;
}

/* --- Token-Ebene: dunkel ------------------------------------------ */
/* Manuelle Wahl per data-theme="dark" ... */
:root[data-theme="dark"] {
  --brand:#8e97ee; --brand-700:#a9b0f4;
  --brand-solid:#4c54c6; --brand-solid-700:#5a62d6;
  --brand-50:#22264a;
  --ink:#e6e8ec; --anthra:#c2c6cf;
  --bg:#181b21; --surface:#21252d; --surface-2:#272c35;
  --border:#333945; --border-strong:#414855;
  --muted:#9298a4; --muted-2:#6e7480;
  --live:#e0876d; --live-bg:#352420;
  --on-brand:#ffffff;
  --logo:#e6e8ec;
  --input-bg:var(--surface-2);
  --fav-border:var(--brand-solid);
}
/* ... oder automatisch nach Systemeinstellung, solange nicht manuell hell gewaehlt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:#8e97ee; --brand-700:#a9b0f4;
    --brand-solid:#4c54c6; --brand-solid-700:#5a62d6;
    --brand-50:#22264a;
    --ink:#e6e8ec; --anthra:#c2c6cf;
    --bg:#181b21; --surface:#21252d; --surface-2:#272c35;
    --border:#333945; --border-strong:#414855;
    --muted:#9298a4; --muted-2:#6e7480;
    --live:#e0876d; --live-bg:#352420;
    --on-brand:#ffffff;
    --logo:#e6e8ec;
    --input-bg:var(--surface-2);
    --fav-border:var(--brand-solid);
  }
}

/* --- Basis -------------------------------------------------------- */
* { box-sizing:border-box; }
html, body { margin:0; }
body {
  font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.num { font-variant-numeric:tabular-nums; }
a { color:var(--brand); text-decoration:none; }
a:hover { color:var(--brand-700); }
.muted { color:var(--muted); }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:3px; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:28px 24px 60px; }

/* --- Topbar ------------------------------------------------------- */
.topbar {
  background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:24px; padding:0 24px; height:60px;
}
.logo { color:var(--logo); display:flex; align-items:center; }
.logo:hover { color:var(--logo); }
.logo svg { height:26px; width:auto; display:block; }
.nav { display:flex; gap:4px; margin-left:8px; }
.nav a { color:var(--anthra); padding:8px 12px; border-radius:var(--r-sm); font-weight:500; font-size:14px; }
.nav a:hover { background:var(--surface-2); }
.nav a.active { color:var(--brand); background:var(--brand-50); }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.themetoggle {
  display:grid; place-items:center; width:34px; height:34px; padding:0;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--anthra); cursor:pointer;
}
.themetoggle:hover { background:var(--surface-2); }
.themetoggle .icon-sun { display:none; }
.themetoggle .icon-moon { display:block; }
:root[data-theme="dark"] .themetoggle .icon-sun { display:block; }
:root[data-theme="dark"] .themetoggle .icon-moon { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetoggle .icon-sun { display:block; }
  :root:not([data-theme="light"]) .themetoggle .icon-moon { display:none; }
}
.userchip { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
.avatar {
  width:30px; height:30px; border-radius:50%; background:var(--brand-solid);
  color:var(--on-brand); display:grid; place-items:center; font-size:13px; font-weight:600;
}
@media (max-width:560px) { .nav, .username { display:none; } }

/* --- Seitenkopf --------------------------------------------------- */
.pagehead { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.pagehead h1 { font-size:22px; font-weight:600; letter-spacing:-0.01em; margin:0; }
.pagehead .sub { color:var(--muted); font-size:14px; }
.summary { display:flex; gap:10px; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:12px 14px; min-width:96px; }
.stat .n { font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--brand); line-height:1.1; }
.stat .l { font-size:12px; color:var(--muted); margin-top:2px; }

/* --- Reiter ------------------------------------------------------- */
.tabs { display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid var(--border); margin-bottom:24px; scrollbar-width:thin; }
.tab {
  flex:0 0 auto; padding:10px 14px; font-size:14px; font-weight:500;
  color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap;
}
.tab:hover { color:var(--ink); }
.tab.active { color:var(--brand); border-bottom-color:var(--brand); }
.tab.ko { color:var(--anthra); }
.tab.ko.active { color:var(--brand); }

/* --- Layout ------------------------------------------------------- */
.grid { display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start; }
@media (max-width:840px) { .grid { grid-template-columns:1fr; } }

/* --- Karten ------------------------------------------------------- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); }
.matches { display:flex; flex-direction:column; gap:12px; }
.match { padding:14px 16px; }
.meta { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:12px; color:var(--muted); }
.gbadge {
  font-size:11px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--anthra); background:var(--surface-2); border:1px solid var(--border);
  padding:2px 7px; border-radius:6px;
}
.meta .dot { width:3px; height:3px; border-radius:50%; background:var(--border-strong); }
.meta-status { margin-left:auto; font-size:11px; color:var(--muted-2); }
.pill-live {
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  color:var(--live); background:var(--live-bg); font-size:11px; font-weight:600;
  padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:0.03em;
}
.pill-live .blink { width:6px; height:6px; border-radius:50%; background:var(--live); }
@media (prefers-reduced-motion: no-preference) {
  .pill-live .blink { animation:pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
}

.row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; }
.team { display:flex; align-items:center; gap:10px; min-width:0; }
.team.away { flex-direction:row-reverse; text-align:right; }
.flag {
  width:26px; height:18px; border-radius:3px; flex:0 0 auto;
  border:1px solid var(--border); background:var(--surface-2);
  font-size:11px; display:grid; place-items:center; color:var(--muted); font-weight:600;
}
.team .name { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.score { display:flex; align-items:center; gap:8px; margin:0; }
.score input {
  width:46px; height:44px; text-align:center; font-size:18px; font-weight:600;
  border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--input-bg);
  color:var(--ink); font-family:inherit; font-variant-numeric:tabular-nums;
}
.score input:hover { border-color:var(--muted-2); }
.score input:focus { border-color:var(--brand); outline:none; }
.score .colon { color:var(--muted-2); font-weight:600; }
.result { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); min-width:54px; text-align:center; }

.foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.odds { display:flex; gap:6px; }
.odd { display:flex; flex-direction:column; align-items:center; gap:1px; border:1px solid var(--border); border-radius:6px; padding:4px 9px; min-width:42px; background:var(--surface); }
.odd .k { font-size:10px; color:var(--muted-2); letter-spacing:0.04em; }
.odd .v { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--anthra); }
.odd.fav { border-color:var(--fav-border); background:var(--brand-50); }
.odd.fav .v { color:var(--brand); }

.deadline { font-size:12px; color:var(--muted); }
.deadline.locked { color:var(--muted-2); }

.btn { font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; padding:9px 16px; border-radius:var(--r-sm); border:1px solid transparent; }
.btn-primary { background:var(--brand-solid); color:var(--on-brand); }
.btn-primary:hover { background:var(--brand-solid-700); }
.btn-ghost { background:var(--surface); color:var(--anthra); border-color:var(--border-strong); }
.btn-ghost:hover { background:var(--surface-2); }

.pts { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.pts .b { font-variant-numeric:tabular-nums; padding:3px 9px; border-radius:6px; font-size:13px; }
.pts.exact .b { background:var(--brand-solid); color:var(--on-brand); }
.pts.partial .b { background:var(--brand-50); color:var(--brand); }
.pts.miss .b { background:var(--surface-2); color:var(--muted); border:1px solid var(--border); }
.pts .lbl { color:var(--muted); font-weight:500; }

.yourtip { font-size:12px; color:var(--muted); }
.yourtip b { color:var(--anthra); font-weight:600; font-variant-numeric:tabular-nums; }

/* --- Rangliste ---------------------------------------------------- */
.ranking-card { padding:16px; }
.ranking-card h2 { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); margin:0 0 12px; }
.ranking { list-style:none; margin:0; padding:0; }
.ranking li { display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--border); font-size:14px; }
.ranking li:last-child { border-bottom:none; }
.ranking li.me { background:var(--brand-50); margin:0 -10px; padding-left:12px; padding-right:12px; border-radius:6px; border-bottom-color:transparent; }
.rank { width:20px; text-align:center; font-variant-numeric:tabular-nums; font-weight:600; color:var(--muted); font-size:13px; }
.rank.top { color:var(--brand); }
.ranking .who { flex:1; font-weight:500; }
.ranking .pp { font-variant-numeric:tabular-nums; font-weight:600; color:var(--anthra); }
.ranking-foot { margin-top:14px; text-align:center; font-size:13px; font-weight:500; }

/* --- Footer ------------------------------------------------------- */
.sitefooter { border-top:1px solid var(--border); margin-top:20px; }
.sitefooter .wrap { display:flex; justify-content:space-between; gap:12px; padding-top:18px; padding-bottom:24px; font-size:13px; color:var(--muted); }

/* --- Fehler- und Platzhalterseite --------------------------------- */
.errorpage { text-align:center; padding:60px 20px; }
.error-code { font-size:48px; font-weight:700; color:var(--brand); line-height:1; margin-bottom:8px; }
.errorpage p { color:var(--muted); margin:0 0 20px; }