/* ============================================================
   Regiokick Frontend – app.css
   Designsystem: Pitch-Blau (#1f6ae8) + Rasen-Grün (#2f9e44)
   Hell / Dunkel / Auto über [data-theme] am :root
   ============================================================ */
:root{
  --bg:#eaedf2; --ground:#ffffff; --ink:#101519; --muted:#5c6673; --line:#e5e8ef;
  --pitch:#1f6ae8; --pitch-deep:#1553c2; --glow:#4d90ff; --grass:#2f9e44; --grass-deep:#227a30;
  --energy:#ff4b2b; --gold:#f2a900; --chip:#eef2f8;
  --shadow:0 18px 44px -22px rgba(14,30,60,.42); --shadow-sm:0 6px 16px -14px rgba(0,0,0,.5);
  --r:18px; --r-sm:12px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#090d12; --ground:#111820; --ink:#e8eef6; --muted:#8b98a8; --line:#212b36;
    --pitch:#5b9bff; --pitch-deep:#3d84f0; --glow:#8bbcff; --grass:#3fb85a; --grass-deep:#2b8f3f;
    --energy:#ff6a4c; --gold:#ffc233; --chip:#18212c;
    --shadow:0 20px 50px -20px rgba(0,0,0,.7); --shadow-sm:0 6px 16px -14px rgba(0,0,0,.7); }
}
:root[data-theme="light"]{ --bg:#eaedf2; --ground:#ffffff; --ink:#101519; --muted:#5c6673; --line:#e5e8ef; --pitch:#1f6ae8; --pitch-deep:#1553c2; --glow:#4d90ff; --grass:#2f9e44; --grass-deep:#227a30; --energy:#ff4b2b; --gold:#f2a900; --chip:#eef2f8; --shadow:0 18px 44px -22px rgba(14,30,60,.42); --shadow-sm:0 6px 16px -14px rgba(0,0,0,.5); }
:root[data-theme="dark"]{ --bg:#090d12; --ground:#111820; --ink:#e8eef6; --muted:#8b98a8; --line:#212b36; --pitch:#5b9bff; --pitch-deep:#3d84f0; --glow:#8bbcff; --grass:#3fb85a; --grass-deep:#2b8f3f; --energy:#ff6a4c; --gold:#ffc233; --chip:#18212c; --shadow:0 20px 50px -20px rgba(0,0,0,.7); --shadow-sm:0 6px 16px -14px rgba(0,0,0,.7); }

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:
    radial-gradient(1200px 600px at 82% -12%, color-mix(in srgb, var(--pitch) 15%, transparent), transparent 60%),
    radial-gradient(900px 520px at -12% 112%, color-mix(in srgb, var(--energy) 9%, transparent), transparent 55%),
    var(--bg);
  color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
img{ max-width:100%; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- Kopfzeile / App-Bar ---------- */
.topbar{ position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg, color-mix(in srgb,var(--ground) 94%,transparent), color-mix(in srgb,var(--ground) 86%,transparent));
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.topbar .inner{ max-width:1160px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:10px 18px; }
.brand{ display:flex; align-items:center; gap:10px; cursor:pointer; min-width:0; }
.brand img{ height:30px; width:auto; display:block; }
.brand .fallback{ font-weight:900; font-size:1.25rem; letter-spacing:-.02em; }
.brand .fallback b{ color:var(--pitch-deep); }
:root[data-theme="dark"] .brand .fallback b{ color:var(--glow); }
.topbar .spacer{ flex:1; }
.iconbtn{ width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--chip);
  display:grid; place-items:center; color:var(--ink); cursor:pointer; flex:0 0 auto; transition:transform .12s, background .2s; }
.iconbtn:hover{ transform:translateY(-1px); }
.iconbtn svg{ width:18px; height:18px; }
.iconbtn:focus-visible{ outline:2px solid var(--pitch); outline-offset:2px; }

/* Suchfeld in der Topbar */
.searchbox{ position:relative; flex:1 1 260px; max-width:380px; }
.searchbox input{ width:100%; padding:9px 14px 9px 38px; border-radius:999px; border:1px solid var(--line);
  background:var(--ground); color:var(--ink); font-size:.9rem; }
.searchbox input:focus{ outline:2px solid var(--pitch); outline-offset:1px; border-color:transparent; }
.searchbox svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted); }
.searchbox .drop{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--ground); border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:var(--shadow); max-height:60vh; overflow:auto; z-index:40; display:none; }
.searchbox .drop.on{ display:block; }
.searchbox .sgrp{ padding:8px 6px 4px; }
.searchbox .slbl{ font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; color:var(--muted); padding:0 10px 4px; }
.searchbox .sitem{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; cursor:pointer; }
.searchbox .sitem:hover{ background:var(--chip); }
.searchbox .sitem .nm{ font-weight:650; font-size:.9rem; }
.searchbox .sitem .mt{ margin-left:auto; font-size:.72rem; color:var(--muted); }
.searchbox .empty{ padding:16px; text-align:center; color:var(--muted); font-size:.85rem; }

/* ---------- Layout ---------- */
.wrap{ max-width:1160px; margin:0 auto; padding:20px 18px 90px; }
.eyebrow{ text-transform:uppercase; letter-spacing:.15em; font-size:.68rem; font-weight:800; color:var(--pitch-deep); }
:root[data-theme="dark"] .eyebrow{ color:var(--glow); }
h1.page{ font-size:clamp(1.5rem,4vw,2.2rem); font-weight:900; letter-spacing:-.025em; margin:6px 0 2px; text-wrap:balance; }
.crumbs{ display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--muted); margin-bottom:12px; flex-wrap:wrap; }
.crumbs a:hover{ color:var(--pitch-deep); }
.crumbs .sep{ opacity:.5; }

/* ---------- Hero (Startseite) ---------- */
.hero{ border-radius:24px; overflow:hidden; position:relative; box-shadow:var(--shadow); margin-bottom:8px;
  background:linear-gradient(155deg,var(--grass),var(--grass-deep)); padding:34px 22px 26px; text-align:center; }
.hero::after{ content:""; position:absolute; inset:0; opacity:.13; pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 2px,transparent 2px 48px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.3) 0 2px,transparent 2px 62px); }
.hero img.herologo{ position:relative; width:min(360px,74%); height:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.28)); }
.hero .slogan{ position:relative; margin-top:12px; color:#fff; font-weight:800; letter-spacing:.02em; font-size:clamp(1rem,2.6vw,1.3rem); text-shadow:0 2px 10px rgba(0,0,0,.32); }
.hero .rubs{ position:relative; margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.hero .rub{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; font-weight:700; font-size:.72rem; padding:5px 11px; border-radius:999px; letter-spacing:.04em; }

/* ---------- Section-Titel ---------- */
.sectt{ display:flex; align-items:baseline; gap:10px; margin:26px 2px 12px; }
.sectt h2{ margin:0; font-size:1.2rem; font-weight:900; letter-spacing:-.02em; }
.sectt .more{ margin-left:auto; font-size:.82rem; font-weight:700; color:var(--pitch-deep); cursor:pointer; }
:root[data-theme="dark"] .sectt .more{ color:var(--glow); }

/* ---------- Grid der Ligen / Vereine ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.card{ background:var(--ground); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow-sm);
  cursor:pointer; transition:transform .14s, box-shadow .2s, border-color .2s; display:flex; flex-direction:column; gap:8px; }
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--pitch) 40%,var(--line)); }
.card .kick{ font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; color:var(--muted); }
.card .ttl{ font-weight:850; font-size:1.02rem; letter-spacing:-.01em; }
.card .meta{ font-size:.8rem; color:var(--muted); margin-top:auto; display:flex; gap:12px; flex-wrap:wrap; }
.card .meta b{ color:var(--ink); font-weight:750; }
.card .lgtag{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; background:color-mix(in srgb,var(--pitch) 12%,transparent);
  color:var(--pitch-deep); font-weight:800; font-size:.7rem; padding:3px 9px; border-radius:999px; }
:root[data-theme="dark"] .card .lgtag{ color:var(--glow); }

/* Verein/Team-Karte mit Logo */
.card.wlogo{ flex-direction:row; align-items:center; gap:12px; }
.card.wlogo .badge{ width:44px; height:44px; flex:0 0 auto; }
.card.wlogo .col{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.card.wlogo .ttl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Logo-Badge */
.badge{ border-radius:10px; object-fit:contain; background:var(--chip); border:1px solid var(--line); padding:3px; }
.badge.ph{ display:grid; place-items:center; color:var(--muted); font-weight:800; font-size:.8rem; }

/* ---------- Tabs / Segmente ---------- */
.tabs{ display:flex; gap:4px; background:var(--ground); border:1px solid var(--line); border-radius:999px; padding:4px;
  box-shadow:var(--shadow-sm); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tabs button{ border:0; background:transparent; color:var(--muted); font-size:.84rem; font-weight:750; padding:8px 15px;
  border-radius:999px; cursor:pointer; white-space:nowrap; transition:color .15s; }
.tabs button.on{ background:var(--ink); color:var(--ground); }
.tabs button:hover:not(.on){ color:var(--ink); }

/* Matchday-Stepper */
.mdbar{ display:flex; align-items:center; gap:8px; margin:14px 0 4px; }
.mdbar .lbl{ font-weight:850; font-size:1rem; }
.mdbar .nav{ margin-left:auto; display:flex; gap:6px; }
.mdbar .nav button{ width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--ground);
  color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.mdbar .nav button:disabled{ opacity:.4; cursor:default; }
.mdbar .nav svg{ width:16px; height:16px; }
.mdselect{ display:flex; gap:6px; overflow-x:auto; padding:6px 0 2px; scrollbar-width:thin; }
.mdselect button{ flex:0 0 auto; border:1px solid var(--line); background:var(--ground); color:var(--muted); font-weight:750;
  font-size:.8rem; padding:6px 12px; border-radius:999px; cursor:pointer; }
.mdselect button.on{ background:color-mix(in srgb,var(--pitch) 14%,transparent); color:var(--pitch-deep); border-color:transparent; }
:root[data-theme="dark"] .mdselect button.on{ color:var(--glow); }

/* ---------- Spiel-Zeile ---------- */
.matchlist{ display:flex; flex-direction:column; gap:9px; margin-top:10px; }
.matchlist.compact{ padding:4px 6px; }
.match{ background:var(--ground); border:1px solid var(--line); border-radius:14px; padding:10px 12px;
  box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .12s, border-color .2s; }
.match:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--pitch) 35%,var(--line)); }
.match .mcomp{ font-size:.66rem; font-weight:800; letter-spacing:.04em; color:var(--pitch-deep); text-transform:uppercase;
  margin-bottom:7px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:root[data-theme="dark"] .match .mcomp{ color:var(--glow); }
.match .mbody{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:9px; }
.match .side1{ display:flex; align-items:center; gap:9px; justify-content:flex-end; text-align:right; min-width:0; }
.match .side2{ display:flex; align-items:center; gap:9px; min-width:0; }
.match .nm{ font-weight:700; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.match .badge{ width:28px; height:28px; flex:0 0 auto; }
.match .mid{ text-align:center; min-width:62px; }
.match .score{ font-size:1.4rem; font-weight:900; letter-spacing:-.02em; }
.match .kick{ font-size:1rem; font-weight:800; color:var(--muted); }
.match .st{ display:block; font-size:.58rem; text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }
.match .st.f{ color:var(--grass-deep); } :root[data-theme="dark"] .match .st.f{ color:var(--grass); }
.match .st.l{ color:#fff; background:var(--energy); border-radius:5px; padding:1px 6px; display:inline-block; }
.match .st.n{ color:var(--muted); }
.match.lose .side1 .nm, .match.lose .side2 .nm{ }
.match .rep{ display:inline-block; margin-top:3px; font-size:.56rem; font-weight:800; letter-spacing:.06em;
  color:var(--pitch-deep); text-transform:uppercase; }
:root[data-theme="dark"] .match .rep{ color:var(--glow); }
.daygroup{ margin-top:16px; }
.daygroup .dlabel{ font-size:.76rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin:0 2px 7px; display:flex; align-items:center; gap:8px; position:sticky; top:56px; z-index:5; background:linear-gradient(180deg,var(--bg) 70%,transparent); padding:4px 2px; }
.daygroup .dcount{ font-size:.66rem; font-weight:800; color:var(--muted); background:var(--chip); border:1px solid var(--line); border-radius:999px; padding:1px 8px; }
/* Kompakter Mehrspalten-Kalender */
.matchgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:8px; }
.matchgrid .match{ padding:8px 12px; }
.matchgrid .match .mcomp{ margin-bottom:5px; font-size:.6rem; }
.matchgrid .match .mbody{ gap:8px; }
.matchgrid .match .nm{ font-size:.86rem; }
.matchgrid .match .badge{ width:24px; height:24px; }
.matchgrid .match .mid{ min-width:56px; }
.matchgrid .match .score{ font-size:1.15rem; }
.matchgrid .match .kick{ font-size:.9rem; }
.matchgrid .match .st{ font-size:.54rem; margin-top:1px; }
.matchgrid .match .rep{ display:none; }

/* ---------- Tabelle ---------- */
.tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--ground); box-shadow:var(--shadow-sm); }
table.standings{ width:100%; border-collapse:collapse; min-width:520px; font-size:.88rem; }
table.standings th, table.standings td{ padding:9px 8px; text-align:center; border-bottom:1px solid var(--line); }
table.standings th{ font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; background:color-mix(in srgb,var(--ground) 92%,var(--chip)); position:sticky; top:0; }
table.standings td.tm, table.standings th.tm{ text-align:left; }
table.standings td.tm{ font-weight:700; }
table.standings .tmcell{ display:flex; align-items:center; gap:9px; cursor:pointer; min-width:0; }
table.standings .tmcell .badge{ width:24px; height:24px; flex:0 0 auto; }
table.standings .tmcell span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.standings td.pos{ font-weight:800; color:var(--muted); width:34px; }
table.standings td.pts{ font-weight:900; }
table.standings tr:hover td{ background:color-mix(in srgb,var(--pitch) 6%,transparent); }
table.standings .pform{ display:inline-flex; gap:3px; }
.zone-champ{ box-shadow:inset 3px 0 0 var(--grass); }
.zone-rel{ box-shadow:inset 3px 0 0 var(--energy); }

/* ---------- Scorer-Liste ---------- */
.rank{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-bottom:1px solid var(--line); }
.rank:last-child{ border-bottom:0; }
.rank .no{ width:22px; text-align:center; font-weight:800; color:var(--muted); }
.rank .av{ width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--chip); border:1px solid var(--line); flex:0 0 auto; }
.rank .nm{ font-weight:700; font-size:.9rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank .tm{ font-size:.76rem; color:var(--muted); }
.rank .g{ margin-left:auto; font-weight:900; font-size:1.05rem; }
.rank .g small{ font-weight:600; color:var(--muted); font-size:.7rem; }

/* ---------- Panels ---------- */
.grid2{ display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
@media (max-width:900px){ .grid2{ grid-template-columns:1fr; } }
.panel{ background:var(--ground); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden; }
.panel .ph{ padding:13px 16px 10px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; }
.panel .ph h3{ margin:0; font-size:.98rem; font-weight:850; }
.panel .ph .cnt{ margin-left:auto; font-size:.76rem; color:var(--muted); }
.panel .pb{ padding:6px 4px; }
.panel.pad .pb{ padding:14px 16px; }

/* ---------- Team-/Verein-Kopf ---------- */
.entity{ display:flex; align-items:center; gap:16px; background:var(--ground); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow-sm); margin-bottom:6px; }
.entity .badge{ width:64px; height:64px; flex:0 0 auto; }
.entity .col{ min-width:0; }
.entity h1{ margin:0; font-size:clamp(1.3rem,3.5vw,1.8rem); font-weight:900; letter-spacing:-.02em; }
.entity .subline{ color:var(--muted); font-size:.9rem; margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sgtag{ display:inline-flex; align-items:center; gap:5px; background:color-mix(in srgb,var(--gold) 20%,transparent);
  color:var(--gold); font-weight:800; font-size:.68rem; padding:3px 9px; border-radius:999px; }
.clublinks{ display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.clublinks a{ display:inline-flex; align-items:center; gap:6px; background:var(--chip); border:1px solid var(--line);
  border-radius:999px; padding:4px 10px 4px 5px; font-size:.8rem; font-weight:700; cursor:pointer; }
.clublinks a img{ width:20px; height:20px; border-radius:5px; object-fit:contain; }

/* Kader */
.squad{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.pl{ display:flex; align-items:center; gap:10px; background:var(--ground); border:1px solid var(--line); border-radius:12px; padding:8px 10px; }
.pl .no{ width:26px; height:26px; border-radius:7px; background:var(--chip); display:grid; place-items:center; font-weight:800; font-size:.78rem; color:var(--pitch-deep); flex:0 0 auto; }
:root[data-theme="dark"] .pl .no{ color:var(--glow); }
.pl .nm{ font-weight:700; font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl .st{ font-size:.72rem; color:var(--muted); }

/* Spielorte */
.venue{ display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); }
.venue:last-child{ border-bottom:0; }
.venue .pin{ width:34px; height:34px; border-radius:9px; background:color-mix(in srgb,var(--grass) 16%,transparent); color:var(--grass-deep); display:grid; place-items:center; flex:0 0 auto; }
:root[data-theme="dark"] .venue .pin{ color:var(--grass); }
.venue .nm{ font-weight:750; font-size:.92rem; }
.venue .ad{ font-size:.8rem; color:var(--muted); }
.venue .map{ margin-left:auto; font-size:.78rem; font-weight:750; color:var(--pitch-deep); white-space:nowrap; }
:root[data-theme="dark"] .venue .map{ color:var(--glow); }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; z-index:60; display:none; align-items:flex-end; justify-content:center; }
.modal.on{ display:flex; }
.modal .ov{ position:absolute; inset:0; background:rgba(6,12,22,.55); backdrop-filter:blur(2px); }
.modal .box{ position:relative; width:100%; max-width:560px; max-height:92vh; overflow:auto; background:var(--ground);
  border:1px solid var(--line); border-radius:22px 22px 0 0; box-shadow:var(--shadow); animation:sheet .28s cubic-bezier(.2,.8,.2,1); }
@media (min-width:640px){ .modal{ align-items:center; } .modal .box{ border-radius:22px; animation:pop .2s ease; } }
@keyframes sheet{ from{ transform:translateY(30px); opacity:.6; } to{ transform:none; opacity:1; } }
@keyframes pop{ from{ transform:scale(.97); opacity:.4; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .modal .box{ animation:none; } }
.modal .close{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  background:var(--chip); color:var(--ink); cursor:pointer; display:grid; place-items:center; z-index:2; }
.mhero{ background:linear-gradient(150deg,var(--pitch),var(--pitch-deep)); color:#fff; padding:18px 18px 16px; }
.mhero .comp{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; opacity:.85; font-weight:800; }
.mhero .teams{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-top:8px; }
.mhero .t{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; min-width:0; }
.mhero .t .badge{ width:46px; height:46px; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.25); }
.mhero .t .nm{ font-weight:800; font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.mhero .sc{ font-size:2rem; font-weight:900; letter-spacing:-.02em; }
.mhero .sc small{ display:block; font-size:.62rem; font-weight:700; opacity:.85; letter-spacing:.06em; margin-top:2px; }
.mmeta{ display:flex; gap:14px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid var(--line); font-size:.82rem; color:var(--muted); }
.mmeta b{ color:var(--ink); font-weight:750; }
.mmeta span{ display:inline-flex; align-items:center; gap:5px; }
.mmeta svg{ width:15px; height:15px; flex:0 0 auto; color:var(--pitch); }
:root[data-theme="dark"] .mmeta svg{ color:var(--glow); }
.msec{ padding:14px 18px; border-bottom:1px solid var(--line); }
.msec:last-child{ border-bottom:0; }
.msec h4{ margin:0 0 9px; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:800; }
.goal{ display:flex; align-items:center; gap:8px; font-size:.88rem; padding:3px 0; }
.goal .mn{ font-weight:800; color:var(--pitch-deep); min-width:34px; }
:root[data-theme="dark"] .goal .mn{ color:var(--glow); }
.goal.away{ flex-direction:row-reverse; text-align:right; }
.goal .k{ font-size:.68rem; color:var(--muted); }
.lu{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lu .col h5{ margin:0 0 6px; font-size:.78rem; font-weight:800; }
.lu .p{ font-size:.82rem; padding:2px 0; display:flex; gap:7px; }
.lu .p .n{ color:var(--muted); min-width:20px; font-weight:700; }
.lu .bench{ margin-top:8px; opacity:.75; }
.report{ font-size:.92rem; line-height:1.65; }
.report h4.rt{ font-size:1rem; text-transform:none; letter-spacing:0; color:var(--ink); margin-bottom:6px; }
.report p{ margin:0 0 10px; }

/* ---------- Zustände ---------- */
.empty-state{ text-align:center; padding:44px 20px; color:var(--muted); }
.empty-state .ic{ font-size:2rem; margin-bottom:8px; }
.skel{ background:linear-gradient(90deg,var(--chip),color-mix(in srgb,var(--chip) 55%,var(--ground)),var(--chip));
  background-size:200% 100%; animation:sh 1.2s infinite linear; border-radius:12px; }
@keyframes sh{ to{ background-position:-200% 0; } }
.skel.line{ height:56px; margin-bottom:9px; }
@media (prefers-reduced-motion:reduce){ .skel{ animation:none; } }
.loadwrap{ padding:8px 0; }

/* ---------- Footer ---------- */
.foot{ max-width:1160px; margin:0 auto; padding:30px 18px; color:var(--muted); font-size:.8rem; text-align:center; border-top:1px solid var(--line); }
.foot a{ color:var(--pitch-deep); font-weight:700; }
:root[data-theme="dark"] .foot a{ color:var(--glow); }

/* Bottom-Nav (mobil) */
.botnav{ position:fixed; left:0; right:0; bottom:0; z-index:25; display:none; background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:blur(10px); border-top:1px solid var(--line); padding:6px max(8px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)); }
.botnav .inner{ max-width:560px; margin:0 auto; display:flex; }
.botnav button{ flex:1; border:0; background:transparent; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 4px; font-size:.64rem; font-weight:700; cursor:pointer; }
.botnav button svg{ width:20px; height:20px; }
.botnav button.on{ color:var(--pitch-deep); }
:root[data-theme="dark"] .botnav button.on{ color:var(--glow); }
@media (max-width:680px){ .botnav{ display:block; } .wrap{ padding-bottom:80px; } .searchbox{ display:none; } }

/* ---------- Desktop-Topnav ---------- */
.topnav{ display:none; align-items:center; gap:2px; margin-left:14px; }
.topnav button{ border:0; background:transparent; color:var(--muted); font-weight:750; font-size:.9rem; padding:8px 12px; border-radius:10px; cursor:pointer; white-space:nowrap; }
.topnav button:hover{ color:var(--ink); background:var(--chip); }
.topnav button.on{ color:var(--pitch-deep); background:color-mix(in srgb,var(--pitch) 12%,transparent); }
:root[data-theme="dark"] .topnav button.on{ color:var(--glow); }
@media (min-width:820px){ .topnav{ display:flex; } }

/* ---------- Schnellzugriff-Kacheln ---------- */
.quick, .dirtiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:16px 0 4px; }
.qtile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px 10px;
  background:var(--ground); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); cursor:pointer;
  font-weight:750; font-size:.86rem; color:var(--ink); transition:transform .14s, border-color .2s; }
.qtile:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--pitch) 40%,var(--line)); }
.qtile svg{ width:24px; height:24px; color:var(--pitch); }
:root[data-theme="dark"] .qtile svg{ color:var(--glow); }

/* ---------- News-Karten ---------- */
.sectt h2 svg{ width:20px; height:20px; vertical-align:-4px; color:var(--pitch); margin-right:2px; }
:root[data-theme="dark"] .sectt h2 svg{ color:var(--glow); }
#rk-news{ display:flex; flex-direction:column; gap:12px; }
.newscard{ background:var(--ground); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .12s, border-color .2s; }
.newscard:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--pitch) 35%,var(--line)); }
.nc-top{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.nc-comp{ font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--pitch-deep); cursor:pointer; }
:root[data-theme="dark"] .nc-comp{ color:var(--glow); }
.nc-date{ margin-left:auto; font-size:.74rem; color:var(--muted); font-weight:600; }
.nc-match{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.nc-match .nc-tm{ font-weight:750; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.nc-match .nc-tm.r{ text-align:right; }
.nc-res{ font-weight:900; font-size:1.05rem; padding:1px 8px; background:var(--chip); border-radius:8px; }
.badge.sm{ width:26px; height:26px; flex:0 0 auto; }
.nc-title{ margin:0 0 4px; font-size:1.02rem; font-weight:850; letter-spacing:-.01em; text-wrap:balance; }
.nc-ex{ margin:0 0 8px; color:var(--muted); font-size:.88rem; line-height:1.5; }
.nc-more{ font-size:.8rem; font-weight:800; color:var(--pitch-deep); }
:root[data-theme="dark"] .nc-more{ color:var(--glow); }

.match .side1.lose .nm, .match .side2.lose .nm{ color:var(--muted); }
.goalrow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.panel .more{ margin-left:auto; font-size:.8rem; font-weight:700; color:var(--pitch-deep); cursor:pointer; }
:root[data-theme="dark"] .panel .more{ color:var(--glow); }

/* ---------- Verzeichnis-Listen (Spieler/Schiris) ---------- */
.bigsearch{ position:relative; margin:6px 0 16px; }
.bigsearch input{ width:100%; padding:14px 16px 14px 46px; border-radius:14px; border:1px solid var(--line); background:var(--ground); color:var(--ink); font-size:1rem; box-shadow:var(--shadow-sm); }
.bigsearch input:focus{ outline:2px solid var(--pitch); outline-offset:1px; border-color:transparent; }
.bigsearch span{ position:absolute; left:16px; top:50%; transform:translateY(-50%); }
.bigsearch svg{ width:20px; height:20px; color:var(--muted); }
.dirlist{ display:flex; flex-direction:column; gap:8px; }
.dirrow{ display:flex; align-items:center; gap:12px; background:var(--ground); border:1px solid var(--line); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .1s, border-color .2s; }
.dirrow:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--pitch) 35%,var(--line)); }
.dirrow .av{ width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--chip); border:1px solid var(--line); flex:0 0 auto; display:grid; place-items:center; color:var(--muted); }
.dirrow .av svg{ width:20px; height:20px; }
.dirrow .col{ min-width:0; flex:1; }
.dirrow .nm{ font-weight:750; font-size:.94rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dirrow .sub{ font-size:.78rem; color:var(--muted); }
.dirrow .chev{ color:var(--muted); } .dirrow .chev svg{ width:16px; height:16px; }
.cntpill{ font-size:.78rem; font-weight:800; color:var(--pitch-deep); background:color-mix(in srgb,var(--pitch) 12%,transparent); padding:4px 10px; border-radius:999px; white-space:nowrap; }
:root[data-theme="dark"] .cntpill{ color:var(--glow); }

/* ---------- Spieler-Profil ---------- */
.statgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:6px 0 4px; }
.statbox{ background:var(--ground); border:1px solid var(--line); border-radius:var(--r); padding:16px 12px; text-align:center; box-shadow:var(--shadow-sm); }
.statbox .v{ font-size:1.7rem; font-weight:900; letter-spacing:-.02em; }
.statbox .l{ font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-top:2px; }
.subline .dot{ opacity:.5; }

/* ---------- Tabellen-Legende ---------- */
.legend{ display:flex; gap:16px; margin:10px 2px; font-size:.76rem; color:var(--muted); }
.legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:0; }
.legend .zc{ background:var(--grass); } .legend .zr{ background:var(--energy); }

/* ---------- Suchseite ---------- */
.searchpage .sgrp{ background:var(--ground); border:1px solid var(--line); border-radius:var(--r); padding:8px 6px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
.searchpage .slbl{ font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; color:var(--muted); padding:6px 12px 4px; }
.searchpage .sitem{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; cursor:pointer; }
.searchpage .sitem:hover{ background:var(--chip); }
.searchpage .sitem .nm{ font-weight:700; font-size:.92rem; }
.searchpage .sitem .mt{ margin-left:auto; font-size:.76rem; color:var(--muted); }
.searchpage .badge{ width:32px; height:32px; }

/* ---------- Saison-Umschalter ---------- */
.seasonsel{ display:inline-flex; align-items:center; gap:6px; background:var(--ground); border:1px solid var(--line);
  border-radius:999px; padding:3px 6px 3px 11px; box-shadow:var(--shadow-sm); flex:0 0 auto; }
.seasonsel .slbl2{ font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; color:var(--muted); }
.seasonsel select{ border:0; background:transparent; color:var(--ink); font:inherit; font-size:.82rem; font-weight:800;
  padding:3px 4px; border-radius:8px; cursor:pointer; -webkit-appearance:menulist; }
.seasonsel select:focus{ outline:2px solid var(--pitch); outline-offset:1px; }
@media (max-width:680px){ .seasonsel .slbl2{ display:none; } .seasonsel{ padding:3px 6px; } }
.seasonhint{ color:var(--muted); font-size:.85rem; margin:2px 2px 12px; }
.seasonhint b{ color:var(--ink); }

/* Ligazugehörigkeit (Team-Seite) */
.lgrow{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px; cursor:pointer; }
.lgrow:hover{ background:var(--chip); }
.lgrow .lgseason{ font-weight:800; font-size:.78rem; color:var(--pitch-deep); background:color-mix(in srgb,var(--pitch) 12%,transparent); padding:2px 8px; border-radius:999px; flex:0 0 auto; }
:root[data-theme="dark"] .lgrow .lgseason{ color:var(--glow); }
.lgrow .lgname{ font-weight:700; font-size:.9rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lgrow .chev{ color:var(--muted); } .lgrow .chev svg{ width:15px; height:15px; }

/* ---------- Spielkalender (neu: Datum -> Liga -> Zeile) ---------- */
.caldate{ margin-top:18px; }
.caldate-h{ font-size:.9rem; font-weight:900; letter-spacing:-.01em; color:var(--ink); margin:0 2px 8px;
  display:flex; align-items:center; gap:8px; position:sticky; top:54px; z-index:6;
  background:linear-gradient(180deg,var(--bg) 72%,transparent); padding:5px 2px; text-transform:capitalize; }
.caldate-h .dcount{ font-size:.64rem; font-weight:800; color:var(--muted); background:var(--chip); border:1px solid var(--line); border-radius:999px; padding:1px 8px; }
.calliga{ background:var(--ground); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:10px; }
.calliga-h{ font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--pitch-deep);
  padding:9px 14px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--ground) 92%,var(--chip)); cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:root[data-theme="dark"] .calliga-h{ color:var(--glow); }
.calliga-h:hover{ background:color-mix(in srgb,var(--pitch) 8%,var(--ground)); }
.crow{ display:grid; grid-template-columns:44px 1fr auto 1fr 58px; align-items:center; gap:8px; padding:8px 14px;
  border-bottom:1px solid var(--line); cursor:pointer; }
.crow:last-child{ border-bottom:0; }
.crow:hover{ background:color-mix(in srgb,var(--pitch) 6%,transparent); }
.crow .ctime{ font-size:.82rem; font-weight:700; color:var(--muted); }
.crow .cteam{ display:flex; align-items:center; gap:8px; min-width:0; }
.crow .cteam.home{ justify-content:flex-end; text-align:right; }
.crow .cteam.away{ justify-content:flex-start; }
.crow .cnm{ font-weight:700; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crow .cbadge{ width:24px; height:24px; border-radius:6px; object-fit:contain; background:var(--chip); border:1px solid var(--line); padding:2px; flex:0 0 auto; }
.crow .cbadge.ph{ display:grid; place-items:center; color:var(--muted); font-weight:800; font-size:.62rem; }
.crow .cmid{ color:var(--muted); font-size:.8rem; opacity:.5; }
.crow .cres{ text-align:right; font-weight:900; font-size:1.02rem; }
.crow .cres.none{ color:var(--muted); font-weight:600; }
.crow .cres.live{ color:#fff; background:var(--energy); border-radius:6px; font-size:.66rem; font-weight:800; padding:2px 6px; letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:520px){ .crow{ grid-template-columns:38px 1fr auto 1fr 46px; gap:6px; padding:8px 10px; } .crow .cnm{ font-size:.84rem; } .crow .cbadge{ width:22px; height:22px; } .crow .cres{ font-size:.92rem; } }

/* Spieler: Vereins-Stationen (Transfers) */
.stations{ display:flex; flex-direction:column; gap:2px; }
.station{ display:flex; align-items:center; gap:12px; background:var(--ground); border:1px solid var(--line); border-radius:12px; padding:11px 14px; box-shadow:var(--shadow-sm); }
.station .stseason{ font-weight:800; font-size:.8rem; color:var(--pitch-deep); background:color-mix(in srgb,var(--pitch) 12%,transparent); padding:3px 10px; border-radius:999px; flex:0 0 auto; }
:root[data-theme="dark"] .station .stseason{ color:var(--glow); }
.station .stclub{ font-weight:750; font-size:.98rem; flex:1; min-width:0; }
.station .stclub a{ color:inherit; }
.station .stnow{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--grass-deep); background:color-mix(in srgb,var(--grass) 16%,transparent); padding:3px 9px; border-radius:999px; }
:root[data-theme="dark"] .station .stnow{ color:var(--grass); }
.stxfer{ display:flex; align-items:center; gap:5px; font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:4px 0 4px 16px; }
.stxfer svg{ width:14px; height:14px; transform:rotate(90deg); }

/* Spieler: Saison-Tabelle */
.seasontab td.tm{ text-align:left; }
.seasontab .sumrow td{ border-top:2px solid var(--line); font-weight:800; background:color-mix(in srgb,var(--ground) 92%,var(--chip)); }
.seasontab a{ color:var(--pitch-deep); font-weight:700; }
:root[data-theme="dark"] .seasontab a{ color:var(--glow); }

/* ---------- Platzierungsverlauf (SVG) ---------- */
.poschart{ width:100%; height:auto; display:block; }
.poschart .pcline{ fill:none; stroke:var(--pitch); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
:root[data-theme="dark"] .poschart .pcline{ stroke:var(--glow); }
.poschart .pcdot{ fill:var(--pitch); }
:root[data-theme="dark"] .poschart .pcdot{ fill:var(--glow); }
.poschart .pcnow{ fill:var(--energy); stroke:var(--ground); stroke-width:2; }
.poschart .pcgrid{ stroke:var(--line); stroke-width:1; stroke-dasharray:3 4; }
.poschart .pclbl{ fill:var(--muted); font-size:15px; font-weight:700; }

/* ---------- H2H (direkte Duelle) im Modal ---------- */
.h2hlist{ display:flex; flex-direction:column; gap:6px; }
.h2hrow{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.h2hrow:hover{ background:var(--chip); }
.h2hrow .h2hd{ font-size:.7rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.h2hrow .h2hm{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.h2hrow .hn{ font-weight:700; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.h2hrow .hn.r{ text-align:right; }
.h2hrow .hs{ font-weight:900; font-size:1rem; background:var(--chip); border-radius:7px; padding:1px 9px; }

/* ---------- Bericht-Editor im Modal (nur eingeloggt) ---------- */
.editbar{ background:color-mix(in srgb,var(--pitch) 7%,transparent); }
.editbar h4{ color:var(--pitch-deep); }
:root[data-theme="dark"] .editbar h4{ color:var(--glow); }
.editbar .ebtns{ display:flex; gap:8px; flex-wrap:wrap; }
.ebtn{ border:1px solid var(--line); background:var(--ground); color:var(--ink); font:inherit; font-size:.85rem; font-weight:700;
  padding:8px 14px; border-radius:10px; cursor:pointer; }
.ebtn:hover{ border-color:var(--pitch); }
.ebtn.save{ background:var(--grass); color:#fff; border-color:transparent; }
.editbar .einp, .editbar .etxt{ width:100%; margin-top:10px; padding:10px 12px; border:1px solid var(--line);
  border-radius:10px; background:var(--ground); color:var(--ink); font:inherit; }
.editbar .etxt{ resize:vertical; line-height:1.5; font-size:.92rem; }
.editbar .eact{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.editbar .emsg{ font-size:.82rem; color:var(--muted); }

/* Utilities */
.hide{ display:none !important; }
.center{ text-align:center; }