:root{
  --void:#05070E;--ground:#080E1A;--panel:#141E38;--panel-2:#19233F;--glass:rgba(28,40,66,.5);
  --line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.07);--grid:rgba(255,255,255,.022);
  --ink:#E6EBF2;--muted:#7C8AA5;--faint:#7683A6;
  --cyan:#22D3BE;--cyan-deep:#14B8A6;--cyan-glow:rgba(34,211,190,.5);
  --amber:#FBBF24;--amber-deep:#EAB308;--win:#34D399;--loss:#F87171;--liveclr:#F87171;--violet:#A78BFA;--violet-2:#C4B5FD;
  --disp:"Archivo",system-ui,sans-serif;--sans:"IBM Plex Sans",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --r:13px;--r-s:9px;--maxw:1560px;
}
*{box-sizing:border-box}
/* 2026-09-19: html braucht denselben Grund wie body. Sonst zeigt das Handy links und
   rechts weisse Flaechen, sobald das Dokument breiter als der Bildschirm ist: body
   und der fixierte .hud-bg decken nur den Sichtbereich ab, alles darueber hinaus
   bleibt der Standard-Hintergrund des Browsers. */
html{scroll-behavior:smooth;background:var(--void);overflow-x:hidden;max-width:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink);-webkit-font-smoothing:antialiased;background:var(--void);overflow-x:hidden}
.hud-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(1200px 680px at 10% -6%,color-mix(in srgb,var(--violet) 15%,transparent),transparent 58%),radial-gradient(1300px 720px at 92% -10%,color-mix(in srgb,var(--cyan) 16%,transparent),transparent 60%),radial-gradient(1600px 1100px at 50% 40%,color-mix(in srgb,var(--cyan) 8%,transparent),transparent 62%),linear-gradient(180deg,var(--ground),var(--void) 78%)}
.hud-bg::before{content:"";position:absolute;inset:0;opacity:.5;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:60px 60px;-webkit-mask-image:radial-gradient(120% 60% at 50% -10%,#000 18%,transparent 60%);mask-image:radial-gradient(120% 60% at 50% -10%,#000 18%,transparent 60%)}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.72}
main,nav,.ticker,footer{position:relative;z-index:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(16px,3.5vw,32px)}
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.06;margin:0;text-wrap:balance}
p{margin:0}a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

.brand{display:flex;align-items:center;gap:11px}
.brand .glyph{width:40px;height:24px;filter:drop-shadow(0 0 9px var(--cyan-glow))}
.brand .wm{font-family:var(--disp);font-weight:900;font-size:19px;letter-spacing:-.03em;line-height:1;background:linear-gradient(120deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .wm i{font-style:normal}
.brand .tag{display:block;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:3px}

nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--void) 80%,transparent);border-bottom:1px solid var(--line-2)}
.nav-in{display:flex;align-items:center;gap:20px;height:66px}
.nav-links{margin-left:auto;display:flex;gap:26px;font-size:14px;font-weight:500;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--cyan)}
@media (max-width:820px){.nav-links{display:none}}
/* Handy-Navigation (2026-09-19). Der Schalter erscheint genau dort, wo die Linkzeile
   verschwindet. Das Panel zeigt denselben .nav-links-Block, nur untereinander. */
.navburger{display:none;margin-left:auto;width:40px;height:40px;padding:0;border:1px solid var(--line);
  border-radius:10px;background:var(--glass);cursor:pointer;flex-direction:column;
  align-items:center;justify-content:center;gap:4px}
.navburger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .18s,opacity .18s}
nav.navopen .navburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
nav.navopen .navburger span:nth-child(2){opacity:0}
nav.navopen .navburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:820px){
  nav{position:sticky}
  .navburger{display:flex}
  nav.navopen .nav-links{display:flex;flex-direction:column;gap:0;position:absolute;
    left:0;right:0;top:100%;background:color-mix(in srgb,var(--void) 97%,transparent);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);margin:0;font-size:15px;
    box-shadow:0 24px 40px -28px rgba(0,0,0,.9);max-height:calc(100vh - 66px);overflow-y:auto}
  nav.navopen .nav-links a{padding:13px 20px;border-top:1px solid var(--line-2);color:var(--ink)}
  nav.navopen .nav-links a.on{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,transparent)}
}
/* 2026-09-19: Handy-Breite. Ohne das lief die Kopfzeile auf JEDER Seite
   ueber den rechten Rand (gemessen 423px bei 390px Fenster). */
@media (max-width:560px){
  .nav-in{gap:10px;height:58px}
  .brand .tag{display:none}          /* "Precision Football Data" - Zierde, keine Info */
  .brand .glyph{width:32px;height:20px}
  .nav-in .btn{padding:8px 12px;font-size:13px}
}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:14px;padding:10px 18px;border-radius:11px;border:1px solid transparent;cursor:pointer;transition:.16s;white-space:nowrap}
.btn-amber{background:linear-gradient(135deg,var(--amber),var(--amber-deep));color:#241503}
.btn-amber:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-cyan{background:linear-gradient(135deg,var(--cyan),var(--cyan-deep));color:#03201d}
.btn-cyan:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-ghost{background:var(--glass);border-color:var(--line);color:var(--ink)}.btn-ghost:hover{border-color:var(--cyan)}

.ticker{border-bottom:1px solid var(--line-2);background:color-mix(in srgb,var(--panel) 55%,transparent);overflow:hidden}
.ticker-in{display:flex;align-items:center;height:40px;max-width:100vw}
.tk-label{flex:none;display:flex;align-items:center;gap:8px;padding:0 15px;height:100%;background:color-mix(in srgb,var(--cyan) 11%,transparent);border-right:1px solid var(--line);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.livedot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 var(--cyan);animation:pl 1.8s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 var(--cyan-glow)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tk-track{display:flex;gap:32px;white-space:nowrap;padding-left:22px;animation:scroll 36s linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tk-track{animation:none}}
.tk-item{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.tk-item b{font-family:var(--disp);color:var(--ink);font-weight:700}
.tk-item .q{font-family:var(--mono);color:var(--muted);font-weight:600}
.tk-item .res{font-family:var(--mono);font-size:11px;font-weight:600;padding:1px 7px;border-radius:5px}
.res.w{color:var(--win);background:color-mix(in srgb,var(--win) 15%,transparent)}
.res.l{color:var(--loss);background:color-mix(in srgb,var(--loss) 15%,transparent)}
.tk-item .mk{font-family:var(--mono);font-size:9.5px;color:var(--faint)}
.tk-item .odds{font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.tkar{font-size:14px;font-weight:900;line-height:1;flex:none;filter:drop-shadow(0 0 4px currentColor)}
.tkar.down{color:var(--win)}.tkar.up{color:var(--loss)}

.panel{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 70%,transparent),color-mix(in srgb,var(--panel-2) 70%,transparent));-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:inset 0 1px 0 rgba(94,234,212,.05)}

.hero{padding-block:clamp(28px,3.6vw,48px) clamp(14px,2vw,22px);max-width:70ch}
.hero h1{font-size:clamp(30px,4.4vw,48px);font-weight:900;letter-spacing:-.03em;margin-top:12px}
.hero h1 .c{color:var(--cyan)}
.hero p{margin-top:14px;color:var(--muted);font-size:clamp(15px,1.5vw,17px);max-width:54ch}

.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolbar h2{font-size:22px}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;padding:3px}
.seg button{border:0;background:transparent;color:var(--muted);font-family:var(--sans);font-weight:600;font-size:12.5px;padding:6px 12px;border-radius:7px;cursor:pointer}
.seg button.on{background:var(--cyan);color:#03201d}
.count-chip{font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--line-2);padding:6px 11px;border-radius:9px}
.count-chip b{color:var(--cyan)}
.seg.right{margin-left:auto}

.matchapp{display:grid;grid-template-columns:minmax(400px,31%) minmax(0,1fr);gap:0;align-items:stretch;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 66%,transparent),color-mix(in srgb,var(--panel-2) 66%,transparent));-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);border:1px solid color-mix(in srgb,var(--cyan) 10%,var(--line));border-radius:var(--r);overflow:clip;box-shadow:inset 0 1px 0 rgba(94,234,212,.05),0 30px 70px -40px color-mix(in srgb,var(--cyan) 22%,#000)}
.matchapp>.panel{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
/* 2026-09-24: Unter dem Prognose-Kasten stand ein grosses dunkles Nichts, waehrend
   links die Liste weiterlief. Statt die Flaeche zu schliessen, wird sie nuetzlich:
   der Detailbereich bleibt beim Scrollen stehen. Wer durch dreissig Partien blaettert,
   behaelt die geoeffnete im Blick, statt nach jedem Klick wieder hochzuscrollen. */
.matchapp>.term{border-left:1px solid var(--line);position:sticky;top:10px;
  align-self:start;max-height:calc(100vh - 20px);overflow:auto;
  scrollbar-width:thin}
@media (max-width:940px){.matchapp>.term{position:static;max-height:none;overflow:visible}}
@media (max-width:940px){.matchapp{grid-template-columns:minmax(0,1fr)}.matchapp>.term{border-left:0;border-top:1px solid var(--line)}.matchapp>*{min-width:0}}
.mrow{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;padding:11px 14px;border-top:1px solid var(--line-2);cursor:pointer;transition:background .12s}
.mrow:first-child{border-top:0}
.mrow:hover{background:color-mix(in srgb,var(--cyan) 5%,transparent)}
.mrow.sel{background:color-mix(in srgb,var(--cyan) 9%,transparent);box-shadow:inset 3px 0 0 var(--cyan)}
.mrow .mt{font-family:var(--mono);font-size:11px;text-align:center;color:var(--muted);line-height:1.25}
.mrow .mt .lv{color:var(--liveclr);font-weight:700;font-size:10px}
.mrow .mt .ft{color:var(--faint);font-weight:600;font-size:10px}
.mrow .mi{min-width:0}
/* 2026-09-24: Die Zeile hatte drei Flex-Kinder mit space-between. Das dritte, die
   Live-Spalte, ist bei kommenden Spielen leer - dadurch landeten ELO und xG in der
   MITTE der Zeile statt rechts, und ihre Position wanderte mit der Laenge des
   Teamnamens. Feste Spalten statt Verteilung: jetzt stehen sie untereinander. */
.mrow .tm{display:grid;grid-template-columns:minmax(0,1fr) 46px 54px 62px;gap:9px;
  align-items:baseline;font-size:13px;font-weight:600}
.mrow .tm .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .tm .ms{display:contents}
.mrow .tm .ms b{font-family:var(--mono);font-weight:700;font-size:11.5px;text-align:right;color:var(--ink)}
.mrow .tm .ms em{font-family:var(--mono);font-style:normal;font-size:11.5px;text-align:right;color:var(--muted)}
.mrow .tm .lvcol{display:grid;grid-template-columns:20px 1fr;gap:7px;justify-items:end;
  font-family:var(--mono);font-size:11.5px;color:var(--liveclr)}
.mrow .tm .lvcol .lvg{font-weight:800}
.mrow .tm .lvcol .lvx{font-style:normal;color:color-mix(in srgb,var(--liveclr) 62%,var(--muted))}
.mrow .tm span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .tm .sc{font-family:var(--mono);font-weight:700;flex:none}
.mrow .lg{font-family:var(--mono);font-size:9px;color:var(--faint);margin-top:3px;text-transform:uppercase;letter-spacing:.05em}
.mrow .mx{text-align:right;font-family:var(--mono);font-size:10px;color:var(--faint);line-height:1.5;white-space:nowrap}
.mrow .mx b{color:var(--cyan);font-weight:600}

.term{overflow:hidden}
.term-sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--line-2);background:color-mix(in srgb,var(--void) 32%,transparent)}
.term-sub .ms{font-family:var(--disp);font-weight:800;font-size:16px}
.term-sub .msl{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted)}
.term-sub .msl.live{color:var(--liveclr)}.term-sub .msl.up{color:var(--amber)}
.term-sub .elo-tag{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.term-sub .elo-tag b{color:var(--ink);font-weight:600}
.term-sub .elo-tag em{font-style:normal;color:var(--cyan);font-weight:700}

.note-banner{display:flex;gap:10px;align-items:flex-start;margin:14px 16px 0;padding:11px 13px;border-radius:var(--r-s);font-size:12.5px;line-height:1.45;color:var(--muted);background:color-mix(in srgb,var(--amber) 9%,transparent);border:1px solid color-mix(in srgb,var(--amber) 30%,var(--line))}
.note-banner b{color:var(--amber)}

.mon-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2)}
@media (max-width:520px){.mon-grid{grid-template-columns:1fr}}
.mon-duo{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 13px;margin-top:9px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.mon-duo .md{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.mon-duo .md b{font-family:var(--disp);font-weight:900;font-size:19px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.mon-duo .md .dot{width:8px;height:8px;border-radius:50%;flex:none}
.mon-duo .md.h .dot{background:var(--cyan)}.mon-duo .md.h b{color:var(--cyan)}
.mon-duo .md.a .dot{background:var(--violet)}.mon-duo .md.a b{color:var(--violet)}
.mon-duo .md.tot{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
.mon-duo .md.tot b{font-size:14px;color:var(--muted)}
.mon .mc .ln.la{stroke:var(--violet);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--violet) 45%,transparent))}
.mon .mc .dot.da{fill:var(--violet)}
.mon-plot{display:flex;flex:1;gap:7px;min-height:72px;margin-top:10px}
.mon-yax{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;width:24px;flex:none;padding:1px 0 2px;font-family:var(--mono);font-size:8.5px;color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}
.mon-plot .mc{flex:1;min-height:0;margin-top:0}
.mon{background:var(--panel-2);padding:15px 17px;display:flex;flex-direction:column;min-height:168px}
.mon.ph{opacity:.55}
.mon.flash-up{animation:monfu .6s}.mon.flash-down{animation:monfd .6s}
@keyframes monfu{0%{background:color-mix(in srgb,var(--win) 12%,var(--panel-2))}100%{background:var(--panel-2)}}
@keyframes monfd{0%{background:color-mix(in srgb,var(--loss) 12%,var(--panel-2))}100%{background:var(--panel-2)}}
@media (prefers-reduced-motion:reduce){.mon.flash-up,.mon.flash-down{animation:none}}
.mon-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mon-h .t{font-family:var(--disp);font-weight:700;font-size:13.5px}
.mon-h .src{font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:.04em;padding:2px 5px;border-radius:5px;border:1px solid var(--line-2);color:var(--faint)}
.mon-val{display:flex;align-items:baseline;gap:9px;margin-top:9px}
.mon-val .big{font-family:var(--disp);font-weight:900;font-size:27px;color:var(--cyan);font-variant-numeric:tabular-nums;line-height:1}
.mon-val .dd{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--muted)}
.mon-val .dd.up{color:var(--win)}.mon-val .dd.down{color:var(--loss)}
.mon-val .lbl{font-family:var(--mono);font-size:9px;color:var(--faint);margin-left:auto;text-transform:uppercase;letter-spacing:.05em}
.mon .mc{flex:1;width:100%;min-height:72px;margin-top:10px;display:block}
.mon .mc .ln{fill:none;stroke:var(--cyan);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--cyan-glow))}
.mon .mc .area{fill:url(#tg)}.mon .mc .dot{fill:var(--cyan)}
.mon .mc .hz{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.mon-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--faint);margin:5px 0 0 31px;letter-spacing:.03em}
.mon-axis .mid{color:var(--muted)}
.datepick{position:relative}
.dp-trigger{display:inline-flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;padding:9px 14px;cursor:pointer;font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.dp-trigger:hover{border-color:color-mix(in srgb,var(--cyan) 45%,var(--line))}
.dp-trigger .cal{font-size:14px;filter:grayscale(.2)}
.dp-trigger .ar{color:var(--faint);font-size:11px;transition:.15s;margin-left:2px}
.datepick.open .dp-trigger{border-color:var(--cyan)}
.datepick.open .dp-trigger .ar{transform:rotate(180deg)}
.dp-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:25;min-width:240px;max-height:300px;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 55px -22px #000d;padding:6px;display:none;scrollbar-width:thin}
.datepick.open .dp-menu{display:block}
.dp-opt{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 12px;border-radius:8px;cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted)}
.dp-opt:hover{background:color-mix(in srgb,var(--cyan) 8%,transparent);color:var(--ink)}
.dp-opt.on{background:color-mix(in srgb,var(--cyan) 12%,transparent);color:var(--cyan)}
.dp-opt .d{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--faint)}
.dp-opt.on .d{color:var(--cyan)}

.ftcmp{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2)}
.ftcmp .ftc{background:var(--panel-2);padding:16px 17px}
.ftc .k{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
.ftc .v{font-family:var(--disp);font-weight:800;font-size:22px;margin-top:7px}
.ftc .v b{color:var(--cyan)}

.dtabs{display:flex;gap:2px;padding:0 8px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:color-mix(in srgb,var(--void) 40%,transparent)}
.dtabs button{border:0;background:transparent;color:var(--muted);font-family:var(--sans);font-weight:600;font-size:13px;padding:11px 15px;cursor:pointer;border-bottom:2px solid transparent}
.dtabs button.on{color:var(--cyan);border-bottom-color:var(--cyan)}
.cat-h{display:flex;justify-content:space-between;padding:15px 16px 3px;font-family:var(--mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.11em}
.cat-h span:first-child{color:var(--cyan)}.cat-h span:last-child{color:var(--faint)}
.cmp-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:9px 16px 4px;font-family:var(--mono);font-size:13.5px;font-weight:600}
.cmp-row .ca{color:var(--cyan)}.cmp-row .cb{color:var(--violet);text-align:right}
.cmp-row .cl{text-align:center;font-family:var(--sans);font-size:12px;font-weight:400;color:var(--muted)}
.cmp-bar{display:flex;height:6px;margin:0 16px 6px;border-radius:4px;overflow:hidden;background:var(--panel);gap:2px}
.cmp-bar i{background:linear-gradient(90deg,var(--cyan-deep),var(--cyan));border-radius:4px 0 0 4px}
.cmp-bar u{background:linear-gradient(90deg,var(--violet-2),var(--violet));border-radius:0 4px 4px 0}
.stat-basis{padding:13px 16px;text-align:center;font-family:var(--mono);font-size:10px;color:var(--faint);border-top:1px solid var(--line-2);margin-top:6px}
/* Prognose / Spiel-Verdikt */
.verdict-card{padding:16px 16px 18px}
.vc-h{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}
.gauge{width:230px;max-width:100%;margin:8px auto 0;display:block}
.gauge .track{fill:none;stroke:var(--panel);stroke-width:15;stroke-linecap:round}
.gauge .val{fill:none;stroke-width:15;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--cyan-glow))}
.g-center{margin-top:-64px;text-align:center;position:relative}
.g-center .lab{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.g-center .pct{font-family:var(--disp);font-weight:900;font-size:40px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.g-center .side{font-family:var(--disp);font-weight:800;font-size:16px;color:var(--cyan);margin-top:2px}
.g-split{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.g-split .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}
.vtiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.vtiles div{background:var(--panel-2);padding:14px 10px;text-align:center}
.vtiles .k{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
.vtiles .v{font-family:var(--disp);font-weight:900;font-size:22px;margin-top:5px;color:var(--cyan)}
.vtiles .s{font-family:var(--mono);font-size:9px;color:var(--faint);margin-top:2px}
.formline{display:flex;align-items:center;gap:10px;padding:9px 16px}
.formline .fn{font-family:var(--sans);font-size:12.5px;font-weight:600;min-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.formbadges{display:flex;gap:4px}
.fb{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font-family:var(--mono);font-size:9px;font-weight:700}
.fb.W{background:color-mix(in srgb,var(--win) 22%,transparent);color:var(--win)}
.fb.D{background:color-mix(in srgb,var(--muted) 22%,transparent);color:var(--muted)}
.fb.L{background:color-mix(in srgb,var(--loss) 22%,transparent);color:var(--loss)}
.formline .fspark{margin-left:auto;width:56px;height:20px;flex:none}
/* Prognose Desktop-Layout */
.prog{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:1px;background:var(--line-2)}
@media (max-width:680px){.prog{grid-template-columns:1fr}}
.prog>div{background:var(--panel-2)}
.prog-left{padding:16px 16px 20px;display:flex;flex-direction:column;justify-content:center}
.prog-right{padding:0 0 12px}
.probrow{padding:10px 16px 2px}
.probrow .top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.probrow .top .l{color:var(--muted)}
.probrow .top .v{font-family:var(--mono);font-weight:700;color:var(--cyan)}
.probrow .bar{height:6px;border-radius:4px;background:var(--panel);margin-top:6px;overflow:hidden}
.probrow .bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--cyan-deep),var(--cyan))}
.egrow{padding:9px 16px 2px}
.egrow .top{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px}
.egrow .top .n{font-weight:600}
.egrow .top .v{font-family:var(--mono);font-weight:700}
.egrow .bar{height:7px;border-radius:4px;background:var(--panel);margin-top:5px;overflow:hidden}
.egrow .bar i{display:block;height:100%;border-radius:4px}
.egrow.h .bar i{background:linear-gradient(90deg,var(--cyan-deep),var(--cyan))}.egrow.a .bar i{background:linear-gradient(90deg,var(--violet-2),var(--violet))}
.egrow.h .top .v{color:var(--cyan)}.egrow.a .top .v{color:var(--violet)}
.prog-form{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);border-top:1px solid var(--line-2)}
@media (max-width:520px){.prog-form{grid-template-columns:1fr}}
.prog-form .ff{background:var(--panel-2);padding:12px 16px;display:flex;align-items:center;gap:10px}
.prog-form .ff .fn{font-family:var(--sans);font-size:12.5px;font-weight:600;min-width:88px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog-form .ff .fspark{margin-left:auto}
/* H2H */
.h2h-rec{padding:16px 16px 8px}
.h2h-rec .hr-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-bottom:9px}
.h2h-bar{display:flex;height:9px;border-radius:5px;overflow:hidden;gap:2px}
.h2h-bar span{display:block}
.h2h-bar .wh{background:var(--cyan)}.h2h-bar .dr{background:color-mix(in srgb,var(--muted) 45%,var(--panel))}.h2h-bar .wa{background:var(--violet)}
.h2h-leg{display:flex;justify-content:space-between;margin-top:9px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.h2h-leg b{color:var(--ink);font-weight:700}
.h2h-pills{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 8px}
.h2h-pill{font-family:var(--mono);font-size:11.5px;color:var(--muted);background:var(--panel);border:1px solid var(--line-2);padding:6px 10px;border-radius:8px}
.h2h-pill b{color:var(--cyan);font-weight:700}
.meet{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;padding:9px 16px;border-top:1px solid var(--line-2)}
.meet .dt{font-family:var(--mono);color:var(--faint);font-size:10.5px}
.meet .mt{font-family:var(--sans);font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meet .sc{font-family:var(--mono);font-weight:700;color:var(--ink)}
.l5{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);border-top:1px solid var(--line-2)}
@media (max-width:600px){.l5{grid-template-columns:1fr}}
.l5 .col{background:var(--panel-2)}
.l5 .ch2{padding:12px 16px 7px;font-family:var(--disp);font-weight:700;font-size:13px}
.l5 .lr{display:grid;grid-template-columns:17px 1fr;gap:9px;align-items:center;padding:8px 16px;border-top:1px solid var(--line-2);font-size:12.5px}
.l5 .lr .rb{width:17px;height:17px;border-radius:5px;display:grid;place-items:center;font-family:var(--mono);font-size:8px;font-weight:700}
.rb.W{background:color-mix(in srgb,var(--win) 22%,transparent);color:var(--win)}
.rb.D{background:color-mix(in srgb,var(--muted) 22%,transparent);color:var(--muted)}
.rb.L{background:color-mix(in srgb,var(--loss) 22%,transparent);color:var(--loss)}
.l5 .lr .mup{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.l5 .lr .mup em{font-style:normal;font-family:var(--mono);font-weight:700;color:var(--ink);margin:0 5px}
.l5 .lr .mup .me{color:var(--ink);font-weight:700}
.ltable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
.ltable th{text-align:left;padding:11px 12px;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:600}
.ltable td{padding:9px 12px;border-top:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.ltable td.tm{color:var(--ink);font-family:var(--sans);font-weight:600;width:100%}
.ltable td.r{text-align:right;font-variant-numeric:tabular-nums}
.ltable td.pk{color:var(--ink);font-weight:700}
.ltable tr.hl td{background:color-mix(in srgb,var(--cyan) 9%,transparent)}
.ltable tr.hl td.tm{color:var(--cyan)}
.ltable tr.hlb td{background:color-mix(in srgb,var(--violet) 10%,transparent)}
.ltable tr.hlb td.tm{color:var(--violet)}
.squad-tog{display:flex;gap:6px;padding:14px 16px}
.squad-tog button{flex:1;border:1px solid var(--line-2);background:var(--panel);color:var(--muted);font-family:var(--sans);font-weight:600;font-size:13px;padding:9px;border-radius:9px;cursor:pointer}
.squad-tog button.on{background:var(--cyan);color:#03201d;border-color:transparent}
.sq-cat{padding:13px 16px 5px;font-family:var(--mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}
.sq-row{display:grid;grid-template-columns:26px 1fr 40px 40px;gap:10px;align-items:center;padding:9px 16px;border-top:1px solid var(--line-2);font-size:13px}
.sq-row .no{font-family:var(--mono);color:var(--faint);text-align:center;font-size:11px}
.sq-row .nm{font-weight:600}
.sq-row .sx{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right}
.sq-head{display:grid;grid-template-columns:26px 1fr 40px 40px;gap:10px;padding:4px 16px 8px;font-family:var(--mono);font-size:9px;text-transform:uppercase;color:var(--faint)}
.sq-head span:nth-child(n+3){text-align:right}

section{padding-block:clamp(30px,4vw,52px)}
.sec-head{max-width:58ch}.sec-head h2{font-size:clamp(24px,3.4vw,36px)}.sec-head p{margin-top:13px;color:var(--muted);font-size:16px}
.kgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
@media (max-width:900px){.kgrid{grid-template-columns:1fr}}
.kcard{padding:22px;transition:.16s}.kcard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--cyan) 38%,var(--line))}
.kcard .kk{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.kcard h3{font-family:var(--disp);font-size:18px;font-weight:800;margin-top:10px}
.kcard p{font-size:13.5px;color:var(--muted);margin-top:8px}
.kcard ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:7px}
.kcard li{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line-2);padding:5px 9px;border-radius:7px}
.kcard .go{margin-top:16px;font-size:13px;font-weight:600;color:var(--cyan);display:inline-flex;gap:6px}
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
@media (max-width:860px){.picks{grid-template-columns:1fr}}
.pcard{overflow:hidden;display:flex;flex-direction:column}
.pc-h{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pc-h .cf{color:var(--win);font-weight:600}
.pc-m{padding:15px 16px 6px}
.pc-t{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:15px;padding:3px 0}
.pc-t .tl{width:24px;height:24px;border-radius:7px;background:var(--panel);border:1px solid var(--line);flex:none;display:grid;place-items:center;font-family:var(--mono);font-size:9px;color:var(--muted)}
.pc-lock{position:relative;margin:12px 16px 14px;border:1px dashed color-mix(in srgb,var(--cyan) 30%,var(--line));border-radius:11px;overflow:hidden;flex:1;min-height:74px}
.pc-lock .blur{filter:blur(7px);opacity:.65;padding:22px 16px;text-align:center;font-family:var(--disp);font-weight:800;font-size:21px;color:var(--cyan);user-select:none}
.pc-lock .ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:color-mix(in srgb,var(--void) 28%,transparent)}
.pc-lock .ov .ico{font-size:15px}
.pc-lock .ov .tx{font-family:var(--mono);font-size:11px;color:var(--muted)}
.pc-cta{padding:0 16px 16px}.pc-cta .btn{width:100%;justify-content:center}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
@media (max-width:720px){.plans{grid-template-columns:1fr}}
.plan{padding:28px;position:relative}
.plan.feat{border-color:color-mix(in srgb,var(--cyan) 42%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 18%,transparent),0 30px 60px -30px var(--cyan-glow)}
.plan .pt{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.plan .pp{font-family:var(--disp);font-weight:900;font-size:42px;margin-top:10px;display:flex;align-items:baseline;gap:6px;letter-spacing:-.03em}
.plan .pp .per{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--muted)}
.plan ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:11px}
.plan li{display:flex;gap:10px;font-size:14.5px;color:var(--muted)}.plan li::before{content:"▸";color:var(--cyan)}
.plan .btn{width:100%;justify-content:center;margin-top:22px}
.feat-tag{position:absolute;top:-11px;left:28px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#03201d;background:var(--cyan);padding:4px 11px;border-radius:20px}
.ext{margin-top:16px;font-size:12.5px;color:var(--faint);text-align:center;font-family:var(--mono)}

.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:2px 0 10px}
@media (max-width:820px){.statband{grid-template-columns:repeat(2,1fr)}}
.stile{padding:18px 20px}
.stile .n{font-family:var(--disp);font-weight:900;font-size:30px;letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:4px}
.stile .n u{text-decoration:none;color:var(--cyan);font-size:16px}
.stile .l{font-size:12px;color:var(--muted);margin-top:8px}
.stile svg{margin-top:12px;display:block;width:100%;height:26px}
.leagues{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.lchip{font-family:var(--mono);font-size:12.5px;color:var(--muted);background:var(--panel);border:1px solid var(--line-2);padding:8px 13px;border-radius:9px}
.lchip.more{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 34%,var(--line))}
.ctaband{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:26px 28px;margin-top:10px}
.ctaband .ct{flex:1;min-width:260px}
.ctaband h3{font-family:var(--disp);font-size:22px;font-weight:800}
.ctaband p{color:var(--muted);margin-top:6px;font-size:14.5px}
.ctaband .acts{display:flex;gap:10px;flex-wrap:wrap}

/* Trends / Ranglisten */
.lbgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
@media (max-width:820px){.lbgrid{grid-template-columns:1fr}}
.lbcard{overflow:hidden}
.lb-h{display:flex;align-items:baseline;justify-content:space-between;padding:15px 16px 12px;border-bottom:1px solid var(--line-2)}
.lb-h .lb-t{font-family:var(--disp);font-weight:800;font-size:16px}
.lb-h .lb-s{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.lb-row{display:grid;grid-template-columns:24px 1fr auto;gap:11px;align-items:center;padding:9px 16px;border-top:1px solid var(--line-2);font-size:13.5px}
.lb-row:first-of-type{border-top:0}
.lb-row .rk{font-family:var(--mono);font-size:12px;color:var(--faint);text-align:center}
.lb-row.top .rk{color:var(--cyan);font-weight:700}
.lb-row .nm{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0}
.lb-row .nm .fl{flex:none}
.lb-row .nm .tm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-row .nm .sub{font-family:var(--mono);font-size:10px;color:var(--faint);margin-left:1px}
.lb-row .vl{font-family:var(--mono);font-weight:700;color:var(--cyan)}
.lb-split{display:inline-flex;gap:3px;padding:3px;margin-top:18px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--void) 40%,transparent)}
.lb-split button{border:0;background:transparent;color:var(--muted);font-family:var(--sans);font-weight:600;font-size:13px;padding:8px 17px;border-radius:8px;cursor:pointer;transition:color .15s,background .15s}
.lb-split button.on{color:var(--void);background:var(--cyan)}
.lb-split button:not(.on):hover{color:var(--ink)}
.lb-note{font-family:var(--mono);font-size:11px;color:var(--faint);margin:10px 0 0}

/* ELO Power-Ranking (ClubElo-Stil, aufgewertet) */
.er-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:18px 0 12px}
.er-tools label{font-family:var(--mono);font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:9px}
.er-tools select{font-family:var(--sans);font-weight:600;font-size:13px;color:var(--ink);background:var(--panel);border:1px solid var(--line-2);border-radius:9px;padding:8px 12px;cursor:pointer}
.er-leg{font-family:var(--mono);font-size:11px;color:var(--faint);margin-left:auto}
.er-leg b{color:var(--muted);font-weight:600}
.er-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:0;align-items:stretch;margin-top:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 66%,transparent),color-mix(in srgb,var(--panel-2) 66%,transparent));-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);border:1px solid color-mix(in srgb,var(--cyan) 10%,var(--line));border-radius:var(--r);overflow:hidden;box-shadow:inset 0 1px 0 rgba(94,234,212,.05),0 30px 70px -40px color-mix(in srgb,var(--cyan) 22%,#000)}
.er-side{padding:8px;border-right:1px solid var(--line)}
.er-side-h{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);padding:8px 10px 9px}
.er-nav{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--muted);font-family:var(--sans);padding:9px 10px;border-radius:9px;cursor:pointer;transition:background .12s,color .12s}
.er-nav:hover{background:color-mix(in srgb,var(--cyan) 6%,transparent);color:var(--ink)}
.er-nav.on{background:color-mix(in srgb,var(--cyan) 13%,transparent);color:var(--ink)}
.er-nav .ec-nm{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;font-weight:600;font-size:13.5px}
.er-nav .ec-nm small{font-family:var(--mono);font-size:10px;color:var(--faint);font-weight:400}
.er-nav.on .ec-nm small{color:var(--muted)}
.er-nav em{font-family:var(--mono);font-size:11px;color:var(--faint);font-style:normal;font-variant-numeric:tabular-nums}
.er-nav.on em{color:var(--cyan)}
.er-legbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:11px}
.er-cur{font-family:var(--disp);font-weight:800;font-size:18px}
.erank{overflow:hidden;padding:0}
.er-head,.er-row{display:grid;grid-template-columns:54px minmax(150px,1.5fr) 2.2fr 78px 58px;align-items:center;gap:14px}
.er-head{padding:11px 18px;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);border-bottom:1px solid var(--line-2)}
.er-head .r{text-align:right}
.er-band{display:flex;align-items:center;gap:11px;padding:10px 18px;border-top:1px solid var(--line-2);background:color-mix(in srgb,var(--void) 45%,transparent);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.09em}
.er-band b{color:var(--cyan);font-weight:700}
.er-band .ct{color:var(--faint);font-weight:500}
.er-band .ln2{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.er-row{position:relative;padding:12px 18px;border-top:1px solid var(--line-2);font-size:14px;transition:background .12s}
.er-row:hover{background:color-mix(in srgb,var(--cyan) 6%,transparent)}
.er-row.top3::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#22D3BE,#A78BFA)}
.er-rk{display:flex;align-items:center;gap:7px}
.er-rk .n{font-family:var(--disp);font-weight:800;font-size:16px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:22px;text-align:right}
.er-row.top3 .er-rk .n{color:var(--ink)}
.er-rk .mv{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9.5px;font-weight:700;line-height:1}
.er-rk .mv.up{color:var(--win)}.er-rk .mv.down{color:var(--loss)}
.er-nm{min-width:0;display:flex;flex-direction:column;gap:3px}
.er-nm b{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.er-lg{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.01em}
.er-meter{position:relative;height:8px;border-radius:6px;background:color-mix(in srgb,var(--void) 75%,var(--line));overflow:hidden}
.er-meter i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,#22D3BE,#5EEAD4 45%,#A78BFA);box-shadow:0 0 10px color-mix(in srgb,#22D3BE 45%,transparent)}
.er-elo{font-family:var(--mono);font-weight:700;font-size:16px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.er-tr{justify-self:end;font-family:var(--mono);font-size:11px;font-weight:700;padding:3px 7px;border-radius:6px;font-variant-numeric:tabular-nums}
.er-tr.up{color:var(--win);background:color-mix(in srgb,var(--win) 13%,transparent)}
.er-tr.down{color:var(--loss);background:color-mix(in srgb,var(--loss) 13%,transparent)}
.er-tr.flat{color:var(--faint);background:color-mix(in srgb,var(--faint) 12%,transparent)}
@media (max-width:860px){
  .er-layout{grid-template-columns:1fr}
  .er-side{position:static;max-height:none;display:flex;gap:6px;overflow-x:auto;padding:7px;border-right:0;border-bottom:1px solid var(--line)}
  .er-side-h{display:none}
  .er-nav{width:auto;flex:none;white-space:nowrap;padding:8px 12px}
  .er-nav .ec-nm small,.er-nav em{display:none}
}
@media (max-width:660px){.er-head,.er-row{grid-template-columns:44px 1fr 66px 52px;gap:10px;padding:11px 14px}.er-meter{display:none}.er-band{padding:9px 14px}}

/* PPP-Länder-Switcher */
.ppp{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.ppp select{font-family:var(--sans);font-weight:600;font-size:13px;color:var(--ink);background:var(--panel);border:1px solid var(--line-2);border-radius:9px;padding:8px 12px;cursor:pointer}

/* Wissens-Artikel */
.wnav{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px}
.wnav a{font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--line-2);padding:7px 12px;border-radius:9px}
.wnav a:hover{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 40%,var(--line))}
.art{max-width:780px}
.art h2{font-size:clamp(21px,2.6vw,27px);margin-top:38px;scroll-margin-top:80px}
.art h3{font-size:18px;margin-top:24px;color:var(--ink)}
.art p{color:var(--muted);margin-top:11px;font-size:15.5px;line-height:1.72}
.art .ex{margin-top:13px;padding:13px 16px;border-left:2px solid var(--cyan);background:color-mix(in srgb,var(--cyan) 6%,transparent);border-radius:0 10px 10px 0;font-size:14px;color:var(--muted)}
.art .ex b{color:var(--cyan)}
.art .warn{border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 7%,transparent)}
.art .warn b{color:var(--amber)}

footer{border-top:1px solid var(--line-2);margin-top:36px;background:color-mix(in srgb,var(--void) 55%,transparent)}
.foot{display:flex;flex-wrap:wrap;gap:24px;align-items:center;padding-block:30px 48px}
.foot .rp{font-size:12.5px;color:var(--faint);max-width:52ch;line-height:1.5}.foot .rp b{color:var(--muted)}.foot .brand{margin-right:auto}
.dummy-note{text-align:center;font-family:var(--mono);font-size:11px;color:var(--faint);padding:8px;border-bottom:1px solid var(--line-2);background:color-mix(in srgb,var(--void) 50%,transparent);position:relative;z-index:2}

/* 2026-09-24: Kopfbereich der Startseite. Dort steht jetzt eine Tabelle darunter,
   kein Verkaufstext mehr. Die Ueberschrift darf klein bleiben, und die Zeile
   darunter laeuft ueber die volle Breite statt in einem schmalen Block. */
.hero-kurz{max-width:none;padding-block:14px 8px}
/* 2026-09-24: Dieselbe Groesse wie .pagetitle auf der Spieltag-Seite. Ueber einem
   Datenblock ist die Ueberschrift eine Beschriftung, kein Plakat. */
/* 2026-09-24 (Enrico): "der fokus sollte immer auf den daten liegen, nie auf dem
   text". Die Ueberschrift ist jetzt so gross wie ein Menuepunkt: 14 Pixel, gleiche
   Schriftstaerke wie die Navigation. Sie sagt, wo man ist, und nimmt sonst keinen
   Platz weg. */
.hero-kurz h1{font-size:14px;margin-top:0;letter-spacing:0;font-weight:600;
  line-height:1.35;color:var(--ink)}
.hero-kurz p{max-width:none;margin-top:4px;font-size:12px;opacity:.72;line-height:1.5}

/* 2026-09-24: Die Kopfzeile der Spielliste war im Markup vorhanden, hatte aber kein
   einziges CSS. Vier Spans ohne Raster stehen nackt nebeneinander, und auf dem
   Bildschirm stand "AnpfiffBegegnungELO · xGLive". Sie folgt jetzt demselben Raster
   wie eine Datenzeile, damit die Spaltentitel ueber ihren Spalten stehen. */
.mlist-head{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--line-2);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.mlist-head .mt{text-align:center}
/* Die Spaltentitel folgen exakt dem Raster der Datenzeile, sonst steht "ELO · xG"
   irgendwo ueber dem Nichts. */
.mlist-head .mi-h{display:grid;grid-template-columns:minmax(0,1fr) 46px 54px 62px;gap:9px;min-width:0}
.mlist-head .elo-h,.mlist-head .xg-h,.mlist-head .lv-h{text-align:right}
.mlist-head .ms-h{white-space:nowrap}

/* 2026-09-24: Die Liste hatte feste 412 Pixel, egal wie breit der Bildschirm war.
   Auf einem grossen Monitor stand links eine schmale Spalte und rechts viel Luft,
   obwohl die Liste das ist, wonach jemand sucht. Sie waechst jetzt mit, bis 38
   Prozent der Breite, und bleibt nie unter 440 Pixel. */

/* 2026-09-24: Liga-Gruppen in der Spielliste. Die Zeitordnung bleibt die Grundordnung,
   die Gruppen stehen in der Reihenfolge ihres ersten Spiels. Zugeklappte Ligen merkt
   sich der Browser, sonst waere Zuklappen eine Geste ohne Wirkung. */
.lgrp{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;
  background:color-mix(in srgb,var(--cyan) 4%,transparent);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  font-size:12px;font-weight:700;color:var(--ink);user-select:none}
.lgrp:hover{background:color-mix(in srgb,var(--cyan) 8%,transparent)}
.lgrp-pfeil{color:var(--cyan);font-size:10px;transition:transform .12s}
.lgrp.zu .lgrp-pfeil{transform:rotate(-90deg)}
.lgrp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgrp-zahl{font-family:var(--mono);font-size:10.5px;color:var(--muted);
  background:var(--card2);border:1px solid var(--hair2);border-radius:999px;padding:1px 7px}
/* 2026-09-24: Die aufgeklappte Liste eines select nimmt sonst die Farben des
   Betriebssystems, also helles Grau auf Weiss mitten in einer dunklen Seite.
   color-scheme sagt dem Browser, dass hier dunkel gilt; die option-Regeln setzen
   Hintergrund und Schrift auch dort, wo er es nicht von selbst tut. */
.ligasel{background:var(--card2);color:var(--ink);border:1px solid var(--hair2);
  border-radius:9px;padding:6px 10px;font-family:inherit;font-size:12.5px;max-width:230px;
  color-scheme:dark;cursor:pointer}
.ligasel:hover{border-color:color-mix(in srgb,var(--cyan) 45%,var(--hair2))}
.ligasel:focus-visible{outline:2px solid color-mix(in srgb,var(--cyan) 55%,transparent);outline-offset:1px}
.ligasel option{background:var(--panel-2,#0f1523);color:var(--ink)}
.ligasel option:checked{background:color-mix(in srgb,var(--cyan) 22%,var(--panel-2,#0f1523));color:#fff}

/* 2026-09-24: Der H2H-Block war im Skript vollstaendig gebaut, hatte aber keine
   einzige Regel. Ohne Raster stapelt der Browser Zahl, Anteil und Beschriftung
   untereinander, und auf dem Bildschirm stand "00% Andorra 250% Remis 250% Malta"
   sowie "1,25in 4 DuellenØ Tore pro Spiel". Die Absicht stand im Code-Kommentar:
   drei gleich breite Zellen, in jeder Zahl, Balken und Label untereinander. */
.h2grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 4px}
.h2cell{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  background:var(--card2);border:1px solid var(--hair2);border-radius:12px;padding:12px 10px}
.h2cell b{font-family:var(--disp,var(--sans));font-size:22px;font-weight:800;line-height:1;color:var(--ink)}
.h2cell .pc{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.h2cell .lb{font-size:11.5px;color:var(--muted);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.h2cell .mb{width:100%;height:4px;border-radius:999px;background:var(--hair2);overflow:hidden;margin:2px 0}
.h2cell .mb i{display:block;height:100%;border-radius:999px;background:var(--muted)}
.h2cell.ca b{color:var(--cyan)}
.h2cell.ca .mb i{background:var(--cyan)}
.h2cell.cb b{color:var(--violet,#a78bfa)}
.h2cell.cb .mb i{background:var(--violet,#a78bfa)}
.h2cell.dr b{color:var(--ink)}
.h2grid.kpis{margin-top:10px}
.h2grid.kpis .h2cell b{font-size:18px}

/* ==========================================================================
   2026-09-24: Nachgereichte Stile fuer den Detailbereich.

   Eine Pruefung aller Klassen, die spieltag.js erzeugt, gegen alle CSS-Dateien
   ergab 48 Klassen ohne eine einzige Regel. Das Markup war vollstaendig gebaut,
   nur nie gestaltet - deshalb stapelte der Browser Zahl, Label und Wert
   untereinander, und auf dem Bildschirm standen Dinge wie "Andorra33 Spieler"
   oder "1,25in 4 DuellenØ Tore pro Spiel".

   Die Absicht liess sich jeweils aus dem Markup ablesen: zwei Spalten fuer Heim
   und Auswaerts, darin Tabellen oder Zeilen mit Name links und Werten rechts.
   Farben folgen der bestehenden Zuordnung: Heim tuerkis, Auswaerts violett.
   ========================================================================== */

/* --- Zwei-Spalten-Blöcke: letzte Spiele, Torschützen, Kader, Top-Werte --- */
.lastgrid,.scgrid,.sqgrid,.tvgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;margin:12px 0 4px}
@media (max-width:760px){.lastgrid,.scgrid,.sqgrid,.tvgrid{grid-template-columns:minmax(0,1fr)}}

.lastcol,.sccol,.sqcol,.tvcol{background:var(--card2);border:1px solid var(--hair2);
  border-radius:12px;padding:10px 12px;min-width:0}
.lc-h{font-size:12.5px;font-weight:700;color:var(--ink);padding-bottom:8px;margin-bottom:8px;
  border-bottom:1px solid var(--hair2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-h.ca{color:var(--cyan)}
.lc-h.cb{color:var(--violet,#a78bfa)}

/* --- Letzte Spiele: Ergebnis, Gegner, Heim/Auswärts, Stand, Datum --- */
.lc-row{display:grid;grid-template-columns:20px minmax(0,1fr) 16px 42px 52px;gap:8px;
  align-items:center;padding:5px 0;font-size:12px;border-top:1px solid var(--line-2)}
.lc-row:first-of-type{border-top:0}
.lc-opp{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.lc-loc{font-family:var(--mono);font-size:10px;color:var(--faint);text-align:center}
.lc-sc{font-family:var(--mono);font-weight:700;text-align:right;color:var(--ink)}
.lc-dt{font-family:var(--mono);font-size:10px;color:var(--faint);text-align:right}

/* --- Torschützen --- */
.sc-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;
  padding:5px 0;font-size:12.5px;border-top:1px solid var(--line-2)}
.sc-row:first-of-type{border-top:0}
.sc-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:600}
.sc-n{font-family:var(--mono);font-size:11px;color:var(--cyan)}
.sc-min{font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap}

/* --- Kader und Top-Werte als Tabelle --- */
.sqtab,.tvtab{width:100%;border-collapse:collapse;font-size:12.5px}
.sqtab th,.tvtab th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);font-weight:600;padding:5px 6px;
  border-bottom:1px solid var(--hair2)}
.sqtab td,.tvtab td{padding:5px 6px;border-top:1px solid var(--line-2);color:var(--ink)}
.sqtab th.n,.sqtab td.n{width:26px;text-align:right;font-family:var(--mono);color:var(--faint)}
.sqtab td:not(.n),.tvtab td:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:0}
.tvtab th:not(:first-child),.tvtab td:not(:first-child),
.sqtab th:last-child,.sqtab td:last-child{text-align:right;font-family:var(--mono);width:38px}
.sqtab td.a,.sqtab td.ap,.tvtab td.ap{font-family:var(--mono);color:var(--muted);text-align:right}
/* Positionszeile im Kader: keine Daten, nur Trennung */
.sqtab tr.pos td{color:var(--cyan);font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;padding-top:9px;border-top:0}
.sq-note{margin-top:8px;font-size:11px;color:var(--faint);line-height:1.45}

/* --- Live-Kasten --- */
.lb-head{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.lb-score{display:grid;grid-template-columns:1fr auto auto auto 1fr;gap:8px;align-items:center;
  justify-items:center;font-size:15px;margin-bottom:10px}
.lb-score .t{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.lb-score b{font-family:var(--disp,var(--sans));font-size:24px;font-weight:800;color:var(--ink)}
.lb-stats{display:grid;gap:7px}
.lb-statwrap{display:grid;gap:3px}
.lb-stat{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center;
  font-family:var(--mono);font-size:11px}
.lb-stat.dim{opacity:.45}
.lb-stat .hv{text-align:right;color:var(--cyan);font-weight:700}
.lb-stat .av{text-align:left;color:var(--violet,#a78bfa);font-weight:700}
.lb-stat .lbl{text-align:center;color:var(--muted);font-family:var(--sans);font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-sbar{display:flex;height:3px;border-radius:999px;overflow:hidden;background:var(--hair2)}
.lb-sbar i{display:block;height:100%}
.lb-sbar i:first-child{background:var(--cyan)}
.lb-sbar i:last-child{background:var(--violet,#a78bfa)}

/* --- Aufstellung --- */
.ts-pos{display:inline-block;min-width:22px;padding:1px 5px;border-radius:5px;
  font-family:var(--mono);font-size:9px;text-align:center;color:var(--muted);
  background:var(--card2);border:1px solid var(--hair2);margin-right:6px}
.ts-coach{font-size:12.5px;color:var(--ink);margin-top:2px}
.pspot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--hair2)}
.pspot.l{left:8px}
.pspot.r{right:8px}
.ev,.gl{font-size:11px;margin-left:5px;white-space:nowrap}
.gl{color:var(--cyan)}
.sub-in,.dn+.sub-in{color:var(--cyan)}
.sub-out,.dn{color:var(--loss,#f87171)}
.sub-in,.sub-out,.dn{font-family:var(--mono);font-size:10px;font-style:normal;margin-left:4px}

/* --- Vergleichslegende --- */
.cmp-leg{display:flex;gap:14px;align-items:center;font-size:11.5px;color:var(--muted);
  margin:6px 0 10px}
.cmp-leg .ca{color:var(--cyan)}
.cmp-leg .cb{color:var(--violet,#a78bfa)}

/* --- Kleinkram, der bisher gar nichts hatte --- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dim{color:var(--faint)}
.livemin{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--liveclr)}
.ftmin{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--faint)}
.bg-h{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.analyse,.kianl{display:grid;gap:8px;margin-top:10px}
/* Schloss-Zeile vor Premium-Inhalten: zwei Balken als angedeutete, verdeckte Werte */
.lk{display:inline-flex;gap:3px;align-items:center;margin-left:8px;vertical-align:middle}
.lk i{display:block;width:16px;height:6px;border-radius:3px;background:var(--hair2)}

/* 2026-09-24: Der Inhalt der Reiter klebte am Rand des Kastens. Der Rahmen war da,
   nur hatte der Bereich darin keine Innenabstaende, und Tabellen sowie die
   Live-Balken liefen bis an die Kante. */
.dtab-body{padding:14px 16px 16px}
.dtab-body>.tscroll{margin-inline:-16px;padding-inline:16px}
.term-sub{padding:12px 16px}
.lb-box{padding:12px 16px}
@media (max-width:760px){
  .dtab-body{padding:12px 12px 14px}
  .dtab-body>.tscroll{margin-inline:-12px;padding-inline:12px}
  .term-sub,.lb-box{padding:10px 12px}
}

/* 2026-09-24: Wettbewerbs-Uebersicht als Datentabelle. Vorher standen dort nur Namen
   in Laenderspalten; wer wissen wollte, wo viele Tore fallen, musste 60 Ligen einzeln
   oeffnen. Das Land bleibt eine Spalte und wird keine Gruppierung mehr - sortiert man
   nach Toren, waere eine Gruppierung nach Land im Weg. */
.cw-wrap{overflow-x:auto;padding:0}
.cwtab{width:100%;border-collapse:collapse;font-size:12.5px}
.cwtab th{position:sticky;top:0;z-index:1;background:var(--panel-2,#0f1523);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);font-weight:600;padding:9px 10px;white-space:nowrap;cursor:pointer;
  border-bottom:1px solid var(--hair2);user-select:none}
.cwtab th:hover{color:var(--muted)}
.cwtab th.on{color:var(--cyan)}
.cwtab th i{font-style:normal;margin-left:4px;font-size:8px}
.cwtab th.l,.cwtab td.l{text-align:left}
.cwtab th.r,.cwtab td.r{text-align:right}
.cwtab td{padding:8px 10px;border-top:1px solid var(--line-2);color:var(--ink);
  font-family:var(--mono);white-space:nowrap}
.cwtab td.l{font-family:var(--sans)}
.cwtab td .n{font-weight:600}
.cwtab td .tag{margin-left:7px;font-family:var(--mono);font-size:9px;padding:1px 6px;
  border-radius:999px;color:var(--amber,#f0b429);border:1px solid var(--hair2)}
.cwtab tbody tr{cursor:pointer;transition:background .12s}
.cwtab tbody tr:hover{background:color-mix(in srgb,var(--cyan) 6%,transparent)}
.cwtab tbody tr.leer td{opacity:.55}
.cwtab td.dim{color:var(--faint)}
/* Saisonfortschritt: schmaler Balken vor der Zahl, damit "36 Spiele" einordbar wird */
.fbar{display:inline-block;width:38px;height:3px;border-radius:999px;background:var(--hair2);
  margin-right:7px;vertical-align:middle;overflow:hidden}
.fbar i{display:block;height:100%;background:var(--cyan);border-radius:999px}
@media (max-width:760px){
  .cwtab th:nth-child(6),.cwtab td:nth-child(6),
  .cwtab th:nth-child(7),.cwtab td:nth-child(7),
  .cwtab th:nth-child(9),.cwtab td:nth-child(9){display:none}
}

/* 2026-09-24: Wettbewerbs-Detailansicht. Sieben Klassen ohne eine einzige Regel,
   gefunden beim Abgleich aller Klassen gegen alle Stilvorlagen. Dieselbe Sorte Loch
   wie im Detailbereich der Spieltag-Seite: das Markup war da, nur nie gestaltet. */

/* Kennzahlen-Band ueber der Tabelle: Tore, Beide treffen, Ueber 2,5, Ausgaenge */
.lg-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;margin:0 0 14px;
  background:var(--hair2);border:1px solid var(--hair2);border-radius:12px;overflow:hidden}
.lg-kpi{display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--card2);padding:12px 8px;text-align:center}
.lg-kpi b{font-family:var(--disp,var(--sans));font-size:19px;font-weight:800;color:var(--ink);line-height:1}
.lg-kpi span{font-size:10.5px;color:var(--muted);line-height:1.3}
@media (max-width:760px){.lg-stats{grid-template-columns:repeat(3,1fr)}}

/* Tabelle und Ergebnisse nebeneinander */
.cw-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:900px){.cw-cols{grid-template-columns:minmax(0,1fr)}}

/* Liga-Tabelle */
.ctab{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px}
.ctab th{text-align:right;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-weight:600;padding:7px 6px;border-bottom:1px solid var(--hair2);white-space:nowrap}
.ctab th:nth-child(2){text-align:left}
.ctab td{text-align:right;padding:6px;border-top:1px solid var(--line-2);color:var(--ink);white-space:nowrap}
.ctab td:nth-child(2){text-align:left;font-family:var(--sans);font-weight:600;
  max-width:0;overflow:hidden;text-overflow:ellipsis}
.ctab td:first-child,.ctab th:first-child{width:26px;color:var(--faint)}
.ctab tbody tr:hover{background:color-mix(in srgb,var(--cyan) 5%,transparent)}

/* Datums- und Gruppentrenner in den Ergebnislisten */
.cw-day{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);padding:11px 2px 5px;border-bottom:1px solid var(--line-2);margin-bottom:2px}

/* Eine Partie in der Ergebnisliste: Heim, Stand, Auswaerts */
.cw-m{display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);gap:8px;
  align-items:center;padding:7px 2px;border-top:1px solid var(--line-2);font-size:12.5px}
.cw-m:first-of-type{border-top:0}
.cw-m .h{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-m .a{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-m .sc{text-align:center;font-family:var(--mono);font-weight:700;color:var(--ink)}
.cw-m .sc.up{font-weight:500;color:var(--muted)}

/* Blaettern durch die Spieltage */
.rdnav{display:flex;align-items:center;gap:6px;margin:8px 0 10px}
.rdnav button{width:28px;height:28px;border-radius:8px;border:1px solid var(--hair2);
  background:var(--card2);color:var(--muted);font-size:14px;line-height:1;cursor:pointer}
.rdnav button:hover:not(:disabled){color:var(--ink);border-color:color-mix(in srgb,var(--cyan) 45%,var(--hair2))}
.rdnav button:disabled{opacity:.35;cursor:default}
.rdnav select{flex:1;min-width:0;background:var(--card2);color:var(--ink);color-scheme:dark;
  border:1px solid var(--hair2);border-radius:8px;padding:5px 9px;font-family:inherit;font-size:12.5px}
.rdnav select option{background:var(--panel-2,#0f1523);color:var(--ink)}

/* Zwei Kleinigkeiten aus anderen Dateien */
.meta{color:var(--faint);font-size:12.5px}
.lb-dot.off,.off{opacity:.45}

/* 2026-09-24: Bilanz-Streifen auf der Startseite. Das Alleinstellungsmerkmal stand
   bisher als Nebensatz im Vorspann; jetzt steht es als Zahl ueber den Daten. Bewusst
   flach und schmal, es soll die Tabelle darunter nicht verdraengen. */
.bilanz{display:flex;align-items:center;gap:26px;flex-wrap:wrap;text-decoration:none;
  background:var(--card2);border:1px solid var(--hair2);border-radius:12px;
  padding:10px 16px;margin:0 0 14px}
.bilanz:hover{border-color:color-mix(in srgb,var(--cyan) 40%,var(--hair2))}
.bz{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.bz b{font-family:var(--mono);font-size:15px;font-weight:800;color:var(--ink)}
.bz.gut b{color:var(--cyan)}
.bz i{font-style:normal;font-size:11.5px;color:var(--muted)}
.bz-mehr{margin-left:auto;font-size:11.5px;color:var(--cyan);white-space:nowrap}
@media (max-width:640px){
  .bilanz{gap:14px;padding:9px 12px}
  .bz b{font-size:13.5px}
  .bz i{font-size:10.5px}
  .bz-mehr{display:none}
}

/* 2026-09-24: Spielliste auf Handybreite.
   Das Raster der Zeile war fuer den Schreibtisch gebaut: 52px Anpfiff plus vier
   Spalten mit 46+54+62px und dreimal 9px Abstand. Auf einem 360er Bildschirm blieben
   dem Mannschaftsnamen davon 45 Pixel, also drei Buchstaben und Ellipse. Links unten
   steht das Wichtigste der Seite, deshalb bekommt der Name hier Vorrang vor den
   Zahlen: erst schrumpfen die festen Spalten, dann faellt xG ganz raus. */
@media (max-width:520px){
  .mrow{padding:10px 11px;gap:9px;grid-template-columns:44px minmax(0,1fr)}
  .mlist-head{padding:8px 11px;gap:9px;grid-template-columns:44px minmax(0,1fr)}
  .mrow .tm,.mlist-head .mi-h{grid-template-columns:minmax(0,1fr) 36px 46px 54px;gap:7px}
  .lgrp{padding:7px 11px}
  .lgrp-zahl{padding:1px 6px}
  /* Die Liga-Auswahl bekommt eine eigene Zeile. Zwischen Datum, Zaehler und den vier
     Filterknoepfen blieben ihr sonst ein paar Pixel, und ein Auswahlfeld mit zehn
     Zeichen Platz ist auf dem Handy nicht bedienbar. */
  .ligasel{max-width:none;flex:1 1 100%;width:100%;padding:8px 10px}
  .toolbar .seg.right{margin-left:0}
}
@media (max-width:400px){
  /* xG faellt weg, nicht ELO: ELO ist eine Zahl, die man in einer Zeile lesen kann,
     xG braucht zum Verstehen ohnehin die Detailansicht. Die Live-Spalte bleibt, sonst
     sieht man auf dem Handy nicht, welches Spiel gerade laeuft. */
  .mrow .tm,.mlist-head .mi-h{grid-template-columns:minmax(0,1fr) 36px 54px;gap:7px}
  .mrow .tm .ms em,.mlist-head .xg-h{display:none}
  .mrow .tm .lvcol{grid-template-columns:18px 1fr;gap:5px}
}

/* 2026-09-24: Das Fach am Fuss des Burger-Menues. Dort sitzen auf schmalen Schirmen
   Sprachwahl und Anmeldeknopf, damit der Balken oben Platz fuer den CTA behaelt.
   Es erbt die Sichtbarkeit von .nav-links: zugeklapptes Menue, zugeklapptes Fach. */
.nav-extra{display:flex;align-items:center;gap:10px;padding:12px 20px;
  border-top:1px solid var(--line-2)}
.nav-extra .prembtn{flex:1;justify-content:center;text-align:center;padding:10px 12px}
.nav-extra .langsw{margin-right:0;margin-left:auto}
@media (max-width:560px){
  /* Ohne die Sprachwahl im Balken wird es eng genug, dass der CTA wieder passt. */
  .nav-in{gap:8px}
  .brand .wm{font-size:17px}
  .brand{gap:8px}
}
@media (max-width:430px){
  .nav-in .btn{padding:8px 11px;font-size:12.5px}
  .navburger{width:36px;height:36px}
}

/* 2026-09-24: Seite zur Kontoloeschung. Google verlangt sie fuer jede App, in der
   sich Konten anlegen lassen, und zwar zusaetzlich zum Weg in der App selbst.
   Bewusst nuechtern gehalten: wer hierher kommt, will eine Sache erledigen. */
.del-liste{margin:0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.7}
.del-liste li{margin:2px 0}
.del-p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 9px}
.del-p b{color:var(--ink)}
.del-check{display:flex;gap:9px;align-items:flex-start;margin:12px 0 14px;
  font-size:13px;color:var(--muted);line-height:1.5;cursor:pointer}
.del-check input{margin-top:2px;flex:none;accent-color:var(--cyan)}
.del-msg{margin-top:10px;font-size:12.5px;color:var(--loss,#f87171);min-height:1em}
.del-fertig{font-size:14px;font-weight:700;color:var(--cyan);margin:0 0 10px}
/* Rot und nicht gefuellt: der Knopf soll erkennbar sein, aber nicht einladen. */
.btn-loesch{background:transparent;border-color:var(--loss,#f87171);color:var(--loss,#f87171)}
.btn-loesch:hover:not(:disabled){background:color-mix(in srgb,var(--loss,#f87171) 12%,transparent)}
.btn-loesch:disabled{opacity:.4;cursor:default}
/* Warnung auf der Loeschseite. Bernstein statt Rot: es ist eine Folge, die man
   kennen muss, keine Fehlermeldung. */
.del-warn{margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:12.5px;
  line-height:1.55;color:var(--amber,#f0b429);
  background:color-mix(in srgb,var(--amber,#f0b429) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--amber,#f0b429) 28%,transparent)}

/* 2026-09-25: Sperrschicht ueber dem Google-Anmeldeknopf. Der Knopf stammt von
   Google und laesst sich nicht abfangen, deshalb liegt eine unsichtbare Flaeche
   darueber, solange die Altersbestaetigung fehlt. Ein Klick darauf erklaert, was
   fehlt, statt die Anmeldung zu starten und sie hinterher abzulehnen. */
.pm-goog-wrap{position:relative}
.pm-goog-wrap:has(.pm-goog-sperre:not([style*="none"])) .pm-goog{opacity:.45}
.pm-goog-sperre{position:absolute;inset:0;cursor:not-allowed;background:transparent}