/* Gameday – an afcv-mv.de angelehnt: dunkler Header, Rot-Akzent, weißer Body, fette Headlines. Light + Dark. */
:root{
  --ground:#ffffff;
  --panel:#f6f7f9;
  --panel2:#eef0f3;
  --panel3:#e4e7ec;
  --line:#e6e8ec;
  --line2:#d6dae0;
  --chalk:#15181e;
  --muted:#59606b;
  --muted2:#89909b;
  --accent:#e01f26;      /* AFCV-Rot */
  color-scheme: light;
  --accent-h:#c31a20;
  --accent-ink:#ffffff;
  --ok:#15181e;
  --warn:#b0771c;
  --bad:#e01f26;
  --header-bg:#0f151d;   /* Navy-Header wie afcv-mv.de – in beiden Modi dunkel */
  --header-fg:#f3f4f6;
  --header-muted:#a4acb8;
  --header-line:#232a34;
  --shadow:0 1px 2px rgba(15,20,30,.05),0 3px 10px rgba(15,20,30,.04);
  --r:12px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#13161c; --panel:#191d24; --panel2:#20242d; --panel3:#282e38;
  --line:#252b34; --line2:#333a45; --chalk:#e9ebf0; --muted:#9aa2ae; --muted2:#6c7480;
  --accent:#f24c52; --accent-h:#f56b70; --accent-ink:#ffffff; --ok:#e9ebf0; --bad:#f24c52;
  --warn:#d6a53f; --shadow:0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}}
:root[data-theme="dark"]{
  --ground:#13161c; --panel:#191d24; --panel2:#20242d; --panel3:#282e38;
  --line:#252b34; --line2:#333a45; --chalk:#e9ebf0; --muted:#9aa2ae; --muted2:#6c7480;
  --accent:#f24c52; --accent-h:#f56b70; --accent-ink:#ffffff; --ok:#e9ebf0; --bad:#f24c52;
  --warn:#d6a53f; --shadow:0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--chalk);font-family:var(--font);line-height:1.55;
  -webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
.tabnum{font-variant-numeric:tabular-nums}

.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 20px;background:var(--header-bg);border-bottom:1px solid var(--header-line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;font-weight:750;font-size:16px;letter-spacing:-.3px;color:var(--header-fg)}
.brand .logo{height:38px;width:auto;display:block;background:transparent}
.brand small{display:block;font-size:10px;font-weight:600;color:var(--header-muted);letter-spacing:.6px;text-transform:uppercase}
.mainnav{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
.mainnav a{padding:8px 13px;border-radius:7px;font-weight:600;font-size:14px;color:var(--header-muted);transition:.14s}
.mainnav a:hover{color:var(--header-fg)}
.mainnav a.on{color:#fff;position:relative}
.mainnav a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:1px;height:2px;background:var(--accent);border-radius:2px}
.themebtn{border:1px solid var(--header-line);background:transparent;color:var(--header-muted);border-radius:8px;width:34px;height:34px;
  cursor:pointer;font-size:15px;display:grid;place-items:center;font-family:inherit}
.themebtn:hover{color:var(--header-fg);border-color:var(--header-muted)}

.wrap{max-width:1000px;margin:0 auto;padding:30px 20px 66px}
h1.page{font-size:28px;margin:0 0 5px;letter-spacing:-.8px;font-weight:800;text-wrap:balance}
.sub{color:var(--muted);margin:0 0 22px;font-size:14.5px}
h2.sec{font-size:11.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--muted2);margin:30px 0 12px;font-weight:700}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.grid{display:grid;gap:12px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:720px){.grid.g3{grid-template-columns:1fr 1fr}.grid.g2{grid-template-columns:1fr}}
@media (max-width:480px){.grid.g3{grid-template-columns:1fr}}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:3px;flex-wrap:wrap}
.seg a{padding:7px 13px;border-radius:6px;color:var(--muted);font-weight:600;font-size:13px}
.seg a:hover{color:var(--chalk)}
.seg a.on{background:var(--ground);color:var(--chalk);box-shadow:var(--shadow)}

table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th,table.data td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line)}
table.data th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2);font-weight:700}
table.data th a{color:var(--muted2)}
table.data th.on,table.data th.on a{color:var(--accent)}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data tbody tr:hover{background:var(--panel)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--ground)}
.rank{font-weight:750;color:var(--muted);width:34px}
.rank.top{color:var(--accent)}
.dot{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:8px}
.tlogo{height:22px;width:auto;max-width:30px;object-fit:contain;vertical-align:-6px;margin-right:8px}
.tlogo.lg{height:44px;max-width:60px;margin:0}
.tlogo.sm{height:18px;max-width:24px;margin-right:6px}

.pill{font-size:10.5px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;padding:3px 9px;border-radius:6px}
.pill.live{color:#fff;background:var(--bad)}
.pill.final{color:var(--muted);background:var(--panel2)}
.pill.sched{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent)}
.pill.age{color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent)}

.gamecard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;transition:.14s}
.gamecard:hover{border-color:var(--line2);box-shadow:var(--shadow)}
.gamecard .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gamecard .tm{display:flex;align-items:center;gap:9px;font-weight:650;min-width:0}
.gamecard .sc{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.gamecard .meta{color:var(--muted);font-size:12px;margin-top:9px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.teamchip{display:flex;align-items:center;gap:9px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-weight:650}
.teamchip small{color:var(--muted);font-weight:400;display:block;font-size:12px}
/* lange Namen sauber umbrechen statt Layout sprengen (Handy) */
.gamecard .tm,.teamchip,.scorebar .t,table.data td,.frow .tx{overflow-wrap:anywhere;min-width:0}

.empty{color:var(--muted2);font-size:14px;padding:18px;text-align:center}
.foot{text-align:center;color:var(--muted2);font-size:12px;padding:30px 20px;border-top:1px solid var(--line);margin-top:24px}
.foot .footlinks{margin-top:8px;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.foot .footlinks a{color:var(--muted);font-weight:600}
.foot .footlinks a:hover{color:var(--accent)}

/* ticker */
.scorebar{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 18px;
  display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;text-align:center}
.scorebar .t{font-weight:650;font-size:15px;display:flex;flex-direction:column;align-items:center;gap:9px}
.scorebar .big{font-size:54px;font-weight:800;line-height:.9;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.scorebar .mid{color:var(--muted);font-size:12.5px}
.feed{margin-top:16px;display:flex;flex-direction:column}
.frow{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:13px 6px;border-bottom:1px solid var(--line)}
.frow:first-child{background:var(--panel);border-radius:10px;border-bottom:0}
.frow .ic{font-size:17px;text-align:center}
.frow .tx{font-size:14px}
.frow .tx.sc{font-weight:700}
.livedot{width:8px;height:8px;border-radius:50%;background:var(--bad);display:inline-block;animation:bl 1.4s infinite}
@keyframes bl{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Netz-Hinweis fuer Passcheck und Erfassung: bleibt stehen, solange offline
   gearbeitet wird oder noch etwas nachzutragen ist (im Gegensatz zum Toast). */
.netz{position:fixed;left:50%;top:8px;transform:translateX(-50%) translateY(-120px);background:#7a3803;color:#fff;border-radius:11px;padding:8px 14px;z-index:70;transition:transform .3s cubic-bezier(.2,1.2,.4,1);font-size:13px;font-weight:750;max-width:92vw;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.netz.on{transform:translateX(-50%) translateY(0)}


/* ---------------------------------------------------------------------------
   Formularelemente im dunklen Design
   ---------------------------------------------------------------------------
   Ein aufgeklapptes <select> wird vom Betriebssystem gezeichnet, nicht von der
   Seite. Es erbt deshalb weder Hintergrund noch Schriftfarbe vom Element — im
   dunklen Design stand die Liste weiss mit schwarzer Schrift da, waehrend das
   zugeklappte Feld dunkel war.

   Zwei Dinge sind noetig, und beide braucht es wirklich:

   1. `color-scheme` (oben in allen drei Themenbloecken gesetzt) sagt dem Browser,
      welches Design seine eigenen Bedienelemente haben sollen. Das ist der
      eigentliche Schalter und wirkt auch auf Bildlaufleisten und Datumsfelder.
   2. Ausdrueckliche Farben auf <option>, weil einige Browser unter Linux und
      Windows sich um color-scheme allein nicht kuemmern.
--------------------------------------------------------------------------- */
select, input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], input[type=url], input[type=date], input[type=time],
textarea{
  background: var(--panel);
  color: var(--chalk);
  border: 1px solid var(--line2);
  border-radius: 9px;
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
}
select{
  /* Der Pfeil wird sonst in der Systemfarbe gezeichnet und verschwindet im Dunkeln. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
select option, select optgroup{
  background: var(--panel);
  color: var(--chalk);
}
select:focus, input:focus, textarea:focus{
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
input::placeholder, textarea::placeholder{ color: var(--muted2); }