/* BWG Fantasy – App v1. Farben als Tokens auf :root, Dunkel über prefers-color-scheme oder data-theme. */
:root{--bg:#f3f5f8;--sf:#fff;--sf2:#e9edf2;--tx:#14181e;--mu:#56606c;--bd:#d3d9e1;--ac:#0b5aa6;--ac2:#dde9f8;--on:#fff;
--w:#17783a;--l:#b3261e;--wa:#7a4b00;--ln:#aab2bc;
--f3:#8cb8e8;--f2:#b5d2f2;--f1:#d9e7f7;--f0:#eceff2;--g1:#fbe0c8;--g2:#f5c292;--g3:#ee9f58;
--s1:#0b5aa6;--s2:#2f78c3;--s3:#5c97d4;--s4:#8bb5e3;--s5:#b5cfee;--s6:#d6e4f5;--s0:#cfd5dd;
--o1:#e69f00;--o2:#56b4e9;--o3:#009e73;--o4:#0072b2;--o5:#d55e00;--o6:#cc79a7;--o7:#8c7a00;--o8:#8d949c;
color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0e1116;--sf:#161a20;--sf2:#1f252d;--tx:#e6e9ed;--mu:#a1abb7;--bd:#2d343d;--ac:#72b3ff;--ac2:#1b2c42;--on:#0e1116;
--w:#55c474;--l:#ff8077;--wa:#e6b54d;--ln:#4a525c;
--f3:#23599a;--f2:#1d4474;--f1:#1a3152;--f0:#232931;--g1:#43301b;--g2:#61401b;--g3:#86541c;
--s1:#72b3ff;--s2:#5796de;--s3:#4179b8;--s4:#315e91;--s5:#26466a;--s6:#1e344d;--s0:#353c46;color-scheme:dark}}
:root[data-theme=dark]{--bg:#0e1116;--sf:#161a20;--sf2:#1f252d;--tx:#e6e9ed;--mu:#a1abb7;--bd:#2d343d;--ac:#72b3ff;--ac2:#1b2c42;--on:#0e1116;
--w:#55c474;--l:#ff8077;--wa:#e6b54d;--ln:#4a525c;
--f3:#23599a;--f2:#1d4474;--f1:#1a3152;--f0:#232931;--g1:#43301b;--g2:#61401b;--g3:#86541c;
--s1:#72b3ff;--s2:#5796de;--s3:#4179b8;--s4:#315e91;--s5:#26466a;--s6:#1e344d;--s0:#353c46;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
a{color:var(--ac)}
button,input,select{font:inherit;color:inherit}
h1{font-size:1.45rem;margin:.25rem 0 .75rem;line-height:1.2}
h1:focus{outline:none}
h2{font-size:1.1rem;margin:0 0 .5rem}
h3{font-size:1rem;margin:1rem 0 .4rem}
p{margin:.4rem 0}
:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ac);color:var(--on);padding:.75rem 1rem;z-index:50}
.skip:focus{left:8px}
/* Kopf und Navigation */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;padding:4px max(8px,env(safe-area-inset-right)) 4px max(16px,env(safe-area-inset-left));background:var(--sf);border-bottom:1px solid var(--bd);min-height:52px}
/* Marke: Im Kopf stehen sechs Elemente (Marke, Lupe, Mein Team, Datenstand, Erklärungen, Hell/Dunkel; Mein Team ersetzt seit
   Paket P2 den Chip „Live“), seit P4 heißt der Datenstand „W14 gewertet“. Das Jahr erscheint erst ab 530 px, „Fantasy“ ab
   490 px (gemessen in Chromium mit dem längsten Chip „W14 gewertet“, unter 420 px „W14 ✓“, und dem breitesten Kürzel: bei
   320–489 px passt „BWG“ ganz, ab 490 „BWG Fantasy“, ab 530 das Jahr); reicht der Platz trotzdem nicht (breitere
   Systemschrift), kürzt die Marke mit „…“, statt Knöpfe aus dem Bild zu schieben */
.brand{font-weight:700;text-decoration:none;color:var(--tx);margin-right:auto;line-height:44px;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top>:not(.brand){flex:none}
@media (max-width:529px){.brand span{display:none}}
@media (max-width:489px){.brand b{display:none}}
/* Lupe und Mein Team im Kopf; hervorgehoben, solange ihr Fenster offen ist */
#such[aria-expanded=true],#mt[aria-expanded=true]{background:var(--ac2);border-color:var(--ac)}
/* Mein Team: Kürzel als Chip (Datenstand-Optik mit Akzentrand), ohne Wahl ein Trikot-Symbol im Rundknopf */
.stand.mt{border-color:var(--ac);background:var(--sf);display:inline-flex;align-items:center}
.brand b{font-weight:inherit}
.brand span{color:var(--mu);font-weight:500;margin-left:.3em}
.ico{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--bd);border-radius:22px;background:var(--sf);color:var(--tx);text-decoration:none;font-weight:700;cursor:pointer}
.stand{min-height:44px;border:1px solid var(--bd);border-radius:22px;background:var(--ac2);padding:0 .8rem;cursor:pointer;font-size:.9rem;font-weight:600;white-space:nowrap}
.stand.alt{background:var(--g1);border-color:var(--wa)}
/* Datenstand „W4 gewertet“; unter 420 px „W4 ✓“ (aria-label und Datenstand-Fenster nennen den ganzen Text) */
.stand .stk{display:none}
@media (max-width:419px){.stand .stw{display:none}.stand .stk{display:inline}}
/* Tab „Woche“ in der offenen Live-Ansicht: ein Tipp lädt neu (v_spieltag), währenddessen blasser */
.tabs a[aria-busy]{opacity:.55}
/* bis 399 px (iPhone 375–393): schmalere Chips, engere Abstände und 40 px breite Rundknöpfe (Höhe bleibt 44 px), damit
   „BWG“ neben Lupe, Mein Team, Datenstand, ? und Hell/Dunkel passt – gemessen in Chromium (Segoe UI) mit dem längsten Chip
   „W14 ✓“ und dem breitesten Kürzel */
@media (max-width:399px){.top{gap:4px}.ico{min-width:40px}.stand{padding:0 .6rem}.stand.mt{padding:0 .5rem}}
/* 360–374 px (viele Android-Geräte): dazu kleinere Schrift in Marke und Chips, schmalerer linker Rand */
@media (max-width:374px){.top{padding-left:max(12px,env(safe-area-inset-left))}.brand{font-size:.95rem}.stand{padding:0 .5rem;font-size:.85rem}}
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;background:var(--sf);border-top:1px solid var(--bd);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.tabs a{flex:1;min-height:56px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--mu);font-size:.8rem;font-weight:600;border-top:3px solid transparent}
.tabs a[aria-current]{color:var(--ac);border-top-color:var(--ac)}
/* fünf Bereiche (App-Konzept 04.10.2026): gleich breit, die längsten Namen („Keeper“, „Stärke“) passen auch bei 320 px */
@media (max-width:359px){.tabs a{font-size:.75rem}}
.banner{background:var(--g1);color:var(--tx);border-bottom:1px solid var(--wa);padding:.5rem max(16px,env(safe-area-inset-right)) .5rem max(16px,env(safe-area-inset-left));display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
main{display:block;padding:12px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left));max-width:1240px;margin:0 auto}
main:focus{outline:none}
.foot{max-width:1240px;margin:0 auto;padding:8px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left));color:var(--mu);font-size:.85rem}
/* Bausteine */
.card{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:12px;margin:0 0 16px;min-width:0}
.note{color:var(--mu);font-size:.9rem}
.warn{background:var(--g1);border-left:4px solid var(--wa);padding:.5rem .75rem;border-radius:6px;font-size:.92rem}
.badge{display:inline-block;font-size:.75rem;font-weight:700;border:1px solid var(--wa);color:var(--wa);border-radius:4px;padding:0 .35rem;margin-left:.35rem;vertical-align:middle}
.loading{color:var(--mu)}
html:not(.js) main .loading,html:not(.js) .tabs{display:none}
.err{border-left:4px solid var(--l);padding:.5rem .75rem;background:var(--sf)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:.5rem 0}
.row.gap .sep{width:1px;align-self:stretch;background:var(--bd);margin:0 6px}
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px 8px;scrollbar-width:thin}
.chips a,.seg button,.btn{flex:none;min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center;gap:.35rem;padding:0 .9rem;border:1px solid var(--bd);border-radius:22px;background:var(--sf);color:var(--tx);text-decoration:none;font-weight:600;font-size:.92rem;cursor:pointer;white-space:nowrap}
.chips a[aria-current],.seg button[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:var(--on)}
/* gesperrter Knopf (z. B. „Aktualisieren“ während des Ladens): blasser, gestrichelter Rand, kein Zeiger */
.btn:disabled{opacity:.5;border-style:dashed;cursor:default}
.seg{display:inline-flex;flex-wrap:nowrap;gap:6px;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:2px}
.seg::-webkit-scrollbar{display:none}
@media (max-width:599px){.seg button,.chips a{padding:0 .75rem}.seg,.chips:not(.wk){flex-wrap:wrap;overflow:visible}
  .seg.tight{flex-wrap:nowrap;gap:4px;overflow-x:auto}.seg.tight button{padding:0 .45rem;min-width:44px}
  .srch{flex-wrap:nowrap}.srch label{flex:1;min-width:0}.srch input{width:100%}.srch .seg{flex-wrap:nowrap;flex:none}.srch .seg button{padding:0 .6rem}}
.cnt2{margin-left:auto}
.chips+.chips{margin-top:-4px}
/* Bereichs-Zeile unter der Überschrift (U.kopf): Name und Frage des Bereichs, darunter seine Ansichten als Chips */
.bereich{margin:-.45rem 0 .6rem;color:var(--mu);font-size:.92rem}
.bereich strong{color:var(--tx)}
/* zweite Ebene innerhalb einer Ansicht (Rekorde, Matchups je Position, Wetter): leichter als die Ansichten des Bereichs */
.chips.l2 a{background:transparent;font-weight:500;font-size:.88rem}
.chips.l2 a[aria-current]{background:var(--ac2);border-color:var(--ac);color:var(--tx);font-weight:700}
/* Suche im Kopf: Treffer als Liste im Fenster (Teams, dann Spieler) */
.such{list-style:none;margin:0;padding:0;max-height:min(55vh,420px);overflow-y:auto}
.such li+li{border-top:1px solid var(--bd)}
.such a{display:flex;flex-direction:column;justify-content:center;min-height:44px;padding:4px 2px;text-decoration:none;color:var(--tx);font-weight:600}
.such .sub{color:var(--mu);font-weight:400;font-size:.85rem}
.wk a:first-child{min-width:5.4rem}
/* Scroll-Hinweis (ui.js scrollHint): rechte Kante ausblenden, solange dort Spalten oder Chips verborgen sind; nach dem
   ersten Wischen ein Schatten an der festen Team-Spalte */
.sc-more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
.tw.sc-scrolled .rk tr>:nth-child(2),.tw.sc-scrolled .nr tr>:first-child{box-shadow:2px 0 0 var(--bd),8px 0 8px -6px rgba(0,0,0,.2)}
.wk a{flex-direction:column;justify-content:center;gap:0;line-height:1.1;padding:0 .7rem}
.wk small{font-weight:400;font-size:.72rem}
.wk .po{border-style:dashed}
select,input[type=search]{min-height:44px;font-size:16px;border:1px solid var(--bd);border-radius:8px;background:var(--sf);padding:0 .6rem;max-width:100%}
label.chk{min-height:44px;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
label.chk input{width:22px;height:22px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0 0 16px}
.tile{background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:8px 10px;min-width:0;position:relative}
/* i-Knopf in die Ecke der Kachel (44 px Tippfläche, 20 px Kreis), damit lange Beschriftungen (seit P4 ausgeschrieben) neben
   dem Kreis Platz haben; lange Wörter trennt der Browser nach Silben (lang="de", iPhone und Android), sonst bricht er sie um */
.tile.hi .tl{padding-right:24px}
.tile .tl>span{min-width:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.tile .tl button.i{position:absolute;top:-10px;right:-10px;margin:0}
.tile .tl{min-height:2.3em;align-items:flex-start}
.tl{font-size:.8rem;color:var(--mu);display:flex;align-items:center;justify-content:space-between;gap:4px}
.tv{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.ts{font-size:.82rem;color:var(--mu)}
@media (max-width:599px){.tiles{grid-template-columns:repeat(3,1fr);gap:6px}.tile{padding:6px 8px}.tv{font-size:1.1rem}.tl{font-size:.75rem}.ts{font-size:.75rem}}
/* i-Knöpfe und Erklärfenster */
.i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;font:italic 700 .75rem/1 Georgia,serif;flex:none}
button.i,.tl button.i{width:44px;height:44px;border:0;background:none;color:var(--mu);cursor:pointer;margin:-12px -10px -12px 0;position:relative}
button.i::before{content:"i";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor}
button.i{font-size:0}
button.i::before{font:italic 700 .75rem/1 Georgia,serif}
.lg{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:.85rem;color:var(--mu);margin:.5rem 0 0}
@media (max-width:599px){.lg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px}.lg::-webkit-scrollbar{display:none}.lg>*{flex:none;white-space:nowrap}}
.it{min-height:44px;display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--bd);border-radius:22px;background:var(--sf);padding:0 .6rem;font-size:.82rem;cursor:pointer;color:var(--tx)}
/* nie höher als das sichtbare Fenster: ein langes Fenster (Datenstand auf kleinen Handys) scrollt dann in sich */
.pop{position:absolute;z-index:40;background:var(--sf);color:var(--tx);border:1px solid var(--bd);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.25);padding:6px 12px 12px;font-size:.93rem;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
.pop .ph{display:flex;align-items:center;gap:8px}
.pop .ph strong{flex:1}
.pop .x{width:44px;height:44px;border:0;background:none;font-size:1.4rem;cursor:pointer;color:var(--mu);margin-right:-8px}
/* zwei gleich breite Spalten: Mit „auto 1fr“ nahm der längste Begriff der Werte-Spalte den Platz, die Werte brachen
   dreizeilig um und das Datenstand-Fenster wurde am Handy rund 150 px höher */
.pop dl{margin:.25rem 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px}
.pop dt{color:var(--mu)}
.pop dd{margin:0;font-weight:600}
/* Knopfzeile über beide Spalten (Datenstand: „Tageslauf starten“ direkt unter „Nächster Tageslauf“) */
.pop dd.full{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-weight:400;margin:2px 0 6px}
/* Schalter „Einfach · Ausführlich“ an Tabellen (Paket P5, ui.js table): in der Filterleiste rechtsbündig, ohne Filter eigene Leiste */
.tsw{display:inline-flex;align-items:center;gap:2px;margin-left:auto}
.fbar .cnt2 + .tsw{margin-left:0}
/* Fenster „Mein Team“: zehn Teams in zwei Spalten, das gewählte gefüllt */
.mtg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;margin:.5rem 0}
.mtg .btn{justify-content:flex-start;white-space:normal;text-align:left;line-height:1.15;padding:4px .6rem;font-weight:500;font-size:.88rem}
.mtg .btn b{flex:none;min-width:2.3rem}
/* lange Teamnamen ohne Leerzeichen („SaureGurken“) brechen bei 320 px innerhalb des Knopfs um, statt über den Rand zu ragen */
.mtg .btn span{min-width:0;overflow-wrap:anywhere}
.mtg .btn[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:var(--on)}
/* Team-Seite des eigenen Teams: gesperrter Knopf „Mein Team ✓“ als Kennzeichen, nicht blass wie ein ausgegrauter Knopf */
.btn.mtb:disabled{opacity:1;border-style:solid;border-color:var(--ac);color:var(--ac)}
/* Startseite (#start, Paket P2): Mein-Team-Karte mit Akzentrand, darunter die fünf Bereiche als Karten; die ganze Karte ist
   über den Link der Überschrift klickbar (Fläche per ::after, der Linktext bleibt kurz für Screenreader) */
.mtz{border-left:4px solid var(--ac)}
.mtz .mth{justify-content:space-between;margin:0}
.mtz h2{margin:0}
.mtz p{margin:.3rem 0}
.sks{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:0 0 16px}
.sk{position:relative;background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:10px 12px;min-width:0}
.sk:hover,.sk:focus-within{border-color:var(--ac)}
.sk h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .5rem;margin:0}
.sk h2 a{text-decoration:none;min-height:0;display:inline}
.sk h2 a::after{content:"";position:absolute;inset:0;border-radius:12px}
.sk h2 a:focus-visible{outline:none}
.sk:has(h2 a:focus-visible){outline:3px solid var(--ac);outline-offset:2px}
.sk h2>span{color:var(--mu);font-size:.92rem;font-weight:600}
.sk p{margin:.2rem 0 0;font-size:.92rem}
.skz{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .5rem}
.skz b{font-size:1.5rem;font-variant-numeric:tabular-nums;line-height:1.2}
.skz span{color:var(--mu);font-size:.85rem}
.sk .i,.sk button{position:relative;z-index:1}
/* Team-Seite (Paket P6): die fünf Bereiche als aufklappbare Abschnitte mit der Frage des Bereichs; PF je Woche und Positionen ab
   900 px nebeneinander */
details.tsec{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:0 12px}
details.tsec>summary{gap:0 .6rem;flex-wrap:wrap}
details.tsec>summary>h2{margin:0;font-size:inherit}
.tsq{color:var(--mu);font-size:.9rem;font-weight:600}
.tsb{padding:0 0 12px;min-width:0}
.tsb h3{margin:.8rem 0 .3rem}
.tli{margin:.2rem 0 .6rem;padding-left:1.2rem}
.tli li{margin:.25rem 0}
.tg2{display:grid;gap:16px;margin:0 0 16px}
.tg2>*{min-width:0}
/* Tabellen */
.tw{overflow-x:auto;border:1px solid var(--bd);border-radius:10px;background:var(--sf);max-width:100%}
/* Scroll-Container als Bezugsrahmen: sonst ragen .vh-Texte weit rechts stehender Zellen aus der Seite (waagerechter Seiten-Scroll) */
.tw,.chips,.strip,.seg{position:relative}
.tw:focus-visible{outline-offset:-3px}
.tw.stick{max-height:calc(100dvh - 160px);overflow:auto;overscroll-behavior-y:auto}
.tw.stick thead th{position:sticky;top:0;z-index:2}.tw.stick thead tr>:first-child{z-index:3}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:.92rem}
caption{text-align:left;font-weight:700;padding:10px 10px 6px;caption-side:top}
.tw caption{position:sticky;left:0;white-space:normal;max-width:calc(100vw - 34px);text-align:left}
th,td{padding:0 .55rem;height:44px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--bd);background:var(--sf)}
tbody tr:last-child>*{border-bottom:0}
thead th{font-size:.8rem;color:var(--mu);font-weight:600;background:var(--sf2);height:44px}
/* lange Spaltennamen (App-Konzept Abschnitt 7: ausgeschrieben statt Kürzel, ab 13 Zeichen, Klasse wr aus ui.js table) brechen
   in eine zweite Zeile um, statt die Tabelle zu verbreitern; die Mindestbreite verhindert Umbrüche Wort für Wort */
thead th.wr{white-space:normal;min-width:5.5rem;max-width:7.5rem;line-height:1.15}
thead th:has(>button){padding:0}
thead th button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:2px;width:100%;min-width:44px;min-height:44px;padding:0 .55rem}
thead th button:focus-visible{outline:3px solid var(--ac)}
thead th[aria-sort] button{color:var(--tx)}
.si::after{content:"↕";opacity:.5;font-size:.75rem}
[aria-sort=ascending] .si::after{content:"↑";opacity:1}
[aria-sort=descending] .si::after{content:"↓";opacity:1}
th[scope=row]{font-weight:600}
.n{text-align:right;font-variant-numeric:tabular-nums}
thead th.n button{flex-direction:row-reverse;justify-content:flex-start}
/* Filter: Leiste mit Knopf und Chips, Blatt mit Dropdowns (Handy von unten, Desktop als Karte) */
.fbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:.25rem 0 .5rem}
.fb .cnt:not(:empty){background:var(--ac);color:var(--on);border-radius:10px;padding:0 .45rem;font-size:.8rem;margin-left:.2rem}
.fb.on{border-color:var(--ac);color:var(--ac)}
.fcs{display:contents}
.fc{min-height:44px;display:inline-flex;align-items:center;gap:.2rem;padding:0 .7rem;border:1px solid var(--ac);border-radius:18px;background:var(--ac2);color:var(--tx);font-size:.85rem;font-weight:600;cursor:pointer}
.fc.all{background:none;border-color:var(--bd);color:var(--mu)}
.fp{background:var(--sf);color:var(--tx);border:1px solid var(--bd);border-radius:12px;padding:6px 12px 12px;margin:0 0 .6rem}
.fp .ph{display:flex;align-items:center;gap:8px}
.fp .ph strong{flex:1;font-size:1.05rem}
.fp .x{width:44px;height:44px;border:0;background:none;font-size:1.4rem;cursor:pointer;color:var(--mu);margin-right:-8px}
.fg{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:8px 16px;margin:.25rem 0 .5rem}
.fr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:center;gap:8px;min-height:44px}
.fr>span{font-size:.9rem;color:var(--mu);font-weight:600}
.fr select{width:100%;min-width:0}
.fa{justify-content:flex-end}
.btn.pri{background:var(--ac);border-color:var(--ac);color:var(--on)}
.fbd{display:none}
@media (max-width:599px){
  .fp{position:fixed;left:0;right:0;bottom:0;z-index:35;max-height:78vh;overflow-y:auto;border-radius:16px 16px 0 0;border-width:1px 0 0;box-shadow:0 -8px 28px rgba(0,0,0,.25);padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .fbd{display:block;position:fixed;inset:0;z-index:34;background:rgba(0,0,0,.35)}
  .fg{grid-template-columns:1fr;gap:4px}
  .fr{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .fa{position:sticky;bottom:0;background:var(--sf);padding:8px 0 0;margin:0}
  body.fp-open{overflow:hidden}
}
.rk tr>:first-child{position:sticky;left:0;z-index:1;width:2.75rem;min-width:2.75rem;max-width:2.75rem;padding:0 .4rem 0 .3rem;text-align:right}
.rk thead tr>:first-child{padding:0}
.rk thead tr>:first-child button{padding:0 .4rem 0 .2rem;justify-content:flex-end}
.rk tr>:nth-child(2),.nr tr>:first-child{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--bd)}
.rk tr>:nth-child(2){left:2.75rem}
tr.me>*{background:var(--ac2)}
/* eigene Zeile (Mein Team, U.meRc) bzw. gewählte Zeile: dazu ein Strich links, damit sie nicht nur an der Farbe hängt */
tr.me>:first-child{box-shadow:inset 3px 0 0 var(--ac)}
.nr tr.me>:first-child{box-shadow:inset 3px 0 0 var(--ac),1px 0 0 var(--bd)}
.tw.sc-scrolled .nr tr.me>:first-child{box-shadow:inset 3px 0 0 var(--ac),2px 0 0 var(--bd),8px 0 8px -6px rgba(0,0,0,.2)}
tr.gsp>*{color:var(--mu)}
.tl2{font-weight:600;text-decoration:none;color:var(--tx);display:inline-flex;min-height:44px;align-items:center}
.tl2:hover{text-decoration:underline}
/* Links in Tabellen, Überschriften und Absätzen: Tap-Ziel ≥ 44 px */
td a,th a,caption a,h2>a{display:inline-flex;align-items:center;min-height:44px}
main p>a,.pop p>a,.foot a,.fn a{display:inline-block;padding:.7em .15em;margin:-.7em -.15em}
td a,th a{min-width:44px}
.pl{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:44px;text-decoration:none;color:var(--tx);font-weight:600;line-height:1.2}
.pl:hover>span:first-child{text-decoration:underline}
@media (max-width:599px){.nr .pl{max-width:9.5rem}.nr .pl>span:first-child{white-space:normal;line-height:1.15}}
.tk{display:none}
@media (max-width:599px){th,td{padding:0 .38rem;height:40px}thead th{height:44px}thead th button{padding:0 .38rem}.pb{min-width:2.9rem}}
.chips{scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
@media (max-width:599px){.rk .tn,.kurz .tn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.rk .tk,.kurz .tk{display:inline}}
.sub{display:block;font-size:.78rem;color:var(--mu);font-weight:400;white-space:nowrap}
.lab tbody tr>:first-child{white-space:normal;max-width:14rem;line-height:1.2;padding-top:4px;padding-bottom:4px}.lab .sub{white-space:normal}
@media (max-width:599px){.lab tbody tr>:first-child{min-width:6.5rem;max-width:8.5rem}}
.ks{white-space:normal;font-size:.85rem;color:var(--mu);font-weight:400;max-width:34rem;margin:0 0 6px}
.sc thead th{white-space:normal;min-width:3.6rem;line-height:1.15}
.ksl{margin:0;padding-left:1.4rem}.ksl li{margin:.2rem 0 .5rem}
td.wrap,th.wrap{white-space:normal;min-width:12rem}
.na{color:var(--mu)}
.fn{font-size:.82rem;color:var(--mu);margin:.4rem .2rem 0}
.more{margin:.6rem 0}
.btn.more{white-space:normal;max-width:100%;text-align:center;line-height:1.25}
.tbox+.fig,.tbox+.card,.tbox+.tbox,.lg+.tbox,.blk+.blk,.blk>.tbox+.lg+*{margin-top:16px}
.blk{margin:0 0 16px}
.sw{margin-top:16px}
@media (max-width:899px){.sw>*+*{margin-top:16px;display:block}}
.up{color:var(--w);font-weight:700}.dn{color:var(--l);font-weight:700}.eq{color:var(--mu)}
.W{color:var(--w);font-weight:700}.L{color:var(--l);font-weight:700}.T{color:var(--mu);font-weight:700}
.pb{display:inline-block;min-width:3.6rem;padding-bottom:5px;background:linear-gradient(var(--ac),var(--ac)) left bottom/var(--p) 3px no-repeat,linear-gradient(var(--bd),var(--bd)) left bottom/100% 3px no-repeat}
.kp{display:inline-block;font-size:.7rem;font-weight:700;color:var(--ac);border:1px solid var(--ac);border-radius:3px;padding:0 .25rem;margin-left:.35rem;vertical-align:1px}
.inj{display:inline-block;font-size:.7rem;font-weight:700;color:var(--l);border:1px solid var(--l);border-radius:3px;padding:0 .25rem;margin-left:.35rem;vertical-align:1px}
.sp{font-family:ui-monospace,Consolas,monospace;letter-spacing:1px;color:var(--ac)}
.mini{vertical-align:middle;margin-left:6px}
/* D/ST-Farbzellen: blau günstig, orange ungünstig, Zahl immer sichtbar */
.fz{text-align:center;min-width:4.2rem;font-variant-numeric:tabular-nums;line-height:1.1}
.fz small{display:block;font-size:.72rem;font-weight:600}
.rg small{display:block;font-size:.72rem;font-weight:400;color:var(--mu)}  /* Rang: „Gesamt n“ unter dem Positionsrang */
.f3{background:var(--f3)}.f2{background:var(--f2)}.f1{background:var(--f1)}.f0{background:var(--f0)}.g1{background:var(--g1)}.g2{background:var(--g2)}.g3{background:var(--g3)}
.fz.bye{background:var(--sf2);color:var(--mu)}
.flag{color:var(--wa);font-weight:700}
/* Farbfeld in der Legende (Positions-Matchup) und Farbzelle als Kachelwert (Spielerseite) */
.fz.fzs{display:inline-block;min-width:1.4rem;height:.9rem;border-radius:3px;vertical-align:-2px;margin-right:4px}
.tv .fz{display:inline-block;min-width:3.4rem;padding:.1rem .4rem;border-radius:6px}
/* Waiver: Wetter-Fähnchen als eigener Link neben dem Spielerlink (Tap-Ziel 44 px), der Name bricht dafür früher um */
.plw{display:flex;align-items:center}
.plw .wf{justify-content:center;text-decoration:none;flex:none}
@media (max-width:599px){.nr .plw .pl{max-width:7rem}}
/* Spielplan */
.games{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.game{background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:6px 12px}
.gl{display:flex;align-items:center;gap:8px;min-height:40px}
.gl .tl2{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gl .pts{font-variant-numeric:tabular-nums;font-weight:600;min-width:4.5rem;text-align:right}
.gl.win .pts{font-weight:800}
.gl .res{width:1.5rem;text-align:center}
.gm{font-size:.82rem;color:var(--mu);border-top:1px dashed var(--bd);padding-top:4px;margin-top:2px}
.gm a{display:inline-block;padding:.9em .15em;margin:-.9em -.15em}
.strip{display:flex;gap:8px;overflow-x:auto;list-style:none;padding:0 0 6px;margin:0 0 12px}
.strip .game{flex:none;min-width:12.5rem}
/* Spieltag live (#spieltag): NFL-Spiele als Liste, Matchups mit Unterzeile je Team, Aufstellung mit umbrechender Unterzeile */
.lvn{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:.25rem 0 0;font-size:.92rem}
.lvn dt{color:var(--mu);white-space:nowrap}
.lvn dd{margin:0}
.lvt{flex:1;min-width:0;padding:2px 0 6px}
.lvt .tl2{display:flex}
.lvt .sub{white-space:normal;margin-top:-8px}
.lvt .lvi{margin-top:0;color:var(--ac);font-weight:700}
.game.mine{border-color:var(--ac);box-shadow:inset 4px 0 0 var(--ac)}
.lva>*{min-width:0}
.lvz .pl{padding:4px 0}
.lvz .sub{white-space:normal}
.lvk{margin:.25rem 0;padding-left:1.2rem}
.lvk li{margin:.2rem 0}
/* Bewegungen: Zugang (+) und Abgang (−) in einer Zelle – nebeneinander, wenn Platz ist, auf dem Handy untereinander */
td.lvc,.lvw thead th:last-child{white-space:normal;line-height:1.2}
.lvs{display:flex;flex-wrap:wrap;gap:0 .9rem}
.lvb{display:inline-flex;align-items:center;min-height:40px}
/* Diagramme */
.fig{margin:0 0 16px;background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:10px}
.fig figcaption{font-weight:700;margin-bottom:6px}
.cv{min-height:120px;width:100%}
svg.ch{display:block;max-width:100%;height:auto;overflow:visible}
.ch text{fill:var(--mu);font-size:11px}
.ch .lb{fill:var(--tx);font-weight:700;font-size:12px}
.ch .lb.me{fill:var(--ac);font-weight:800;text-decoration:underline}
.ch .gr{stroke:var(--bd);stroke-width:1}
.ch .z0{stroke:var(--mu);stroke-width:1}
.ch .lo{fill:none;stroke:var(--ln);stroke-width:1.25}
.ch .av{fill:none;stroke:var(--tx);stroke-width:1.5;stroke-dasharray:5 4}
.ch .hl{fill:none;stroke:var(--ac);stroke-width:3}
.ch .dt{fill:var(--ac)}
.ch .dl{fill:var(--ln)}
.ch .bW{fill:var(--w)}.ch .bL{fill:var(--l)}.ch .bT,.ch .bN{fill:var(--mu)}.ch .bA{fill:var(--ac)}
.ch .tick{stroke:var(--o5);stroke-width:3}
.ch .pos{fill:var(--ac)}.ch .neg{fill:var(--o5)}
.ch .wh{stroke:var(--mu);stroke-width:2}
.ch .band{fill:var(--ac2)}
.ch .bd{fill:var(--sf2);stroke:var(--ln)}
.ch .din{fill:var(--mu)}.ch .dout{fill:var(--ac)}
.ch .inv{fill:var(--on);font-weight:700}
.ch .sg{stroke:var(--sf);stroke-width:1}
.s1{fill:var(--s1)}.s2{fill:var(--s2)}.s3{fill:var(--s3)}.s4{fill:var(--s4)}.s5{fill:var(--s5)}.s6{fill:var(--s6)}.s0{fill:var(--s0)}
.o1{fill:var(--o1)}.o2{fill:var(--o2)}.o3{fill:var(--o3)}.o4{fill:var(--o4)}.o5{fill:var(--o5)}.o6{fill:var(--o6)}.o7{fill:var(--o7)}.o8{fill:var(--o8)}
.leg{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.82rem;color:var(--mu);margin:6px 0 0;padding:0;list-style:none}
.leg svg{vertical-align:-2px;margin-right:4px}
details.dt{margin-top:6px}
details.dt summary,details.gw summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--ac)}
details.dt .tw{margin-top:4px}
details.sec{margin:0 0 16px}
details.sec>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;font-size:1.1rem}
/* Aufklapper: eigener Pfeil (display:flex am summary blendet den Browser-Marker aus) */
details.dt>summary,details.gw>summary,details.sec>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
details.dt>summary::before,details.gw>summary::before,details.sec>summary::before{content:"▸";display:inline-block;width:1.1em;flex:none;color:var(--mu);font-size:.9em}
details[open].dt>summary::before,details[open].gw>summary::before,details[open].sec>summary::before{content:"▾"}
/* Regler */
@media (max-width:899px){.gw .live{position:sticky;bottom:calc(57px + env(safe-area-inset-bottom));background:var(--sf);border-top:1px solid var(--bd);margin:0 -12px;padding:8px 12px;z-index:5}}
.gw{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:0 12px;margin:8px 0 16px}
.sl{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 8px;padding:4px 0;border-top:1px solid var(--bd)}
.sl label{font-weight:600;font-size:.92rem;display:flex;align-items:center}
.sl output{font-variant-numeric:tabular-nums;color:var(--mu);font-size:.9rem;min-width:5.5rem;text-align:right}
.sl input{grid-column:1/-1;width:100%;min-height:44px;accent-color:var(--ac);margin:0}
@media (max-width:599px){.sl{grid-template-columns:7rem minmax(0,1fr) 4.4rem;padding:2px 0}.sl>.row{flex-wrap:nowrap;gap:0}.sl label{font-size:.85rem;line-height:1.15;min-width:0}.sl button.i{margin-right:0}.sl input{grid-column:auto;order:2}.sl output{order:3;min-width:0;font-size:.8rem}}
/* H2H-Matrix */
.mx td{text-align:center;min-width:3.2rem}
@media (max-width:599px){.mx td{min-width:2.4rem;padding:0 .2rem;font-size:.85rem}.mx th{padding:0 .3rem}}
.mx tr>:first-child{position:sticky;left:0;z-index:1;background:var(--sf);box-shadow:1px 0 0 var(--bd)}
.mx thead tr>:first-child{background:var(--sf2)}
.tw.sc-scrolled .mx tr>:first-child{box-shadow:2px 0 0 var(--bd),8px 0 8px -6px rgba(0,0,0,.2)}
.mx .h0{background:var(--sf)}
.mx tr.me>th{background:var(--ac2)}
.mx .hw{background:var(--f2)}.mx .hl{background:var(--g2)}.mx .he{background:var(--f0)}.mx .hx{background:var(--sf2);color:var(--mu)}
.wide{display:none}
@media (min-width:640px){.wide{display:block}}
/* Erklärungen (Glossar, bis P4 „Lesart“) */
.js #erklaerungen{display:none}
[data-route=erklaerungen] #erklaerungen{display:block}
.lesart{max-width:1240px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left))}
.js .lesart>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.js .lesart>p{display:none}
#glossar{margin:0;background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:4px 14px}
#glossar>div{padding:8px 0;border-top:1px solid var(--bd);scroll-margin-top:64px}
#glossar>div:first-child,#glossar>div.erst{border-top:0}
#glossar>div[data-b]::before{content:attr(data-b);display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mu);margin:10px 0 6px}
#glossar dt{font-weight:700;scroll-margin-top:72px}
#glossar dd{margin:2px 0 0}
#glossar .hit{background:var(--ac2);border-radius:8px;margin:0 -8px;padding:8px}
/* ab 900 px: Navigation oben, zwei Spalten */
@media (min-width:900px){
body{padding-bottom:0}
.tabs{position:sticky;top:52px;bottom:auto;justify-content:center;border-top:0;border-bottom:1px solid var(--bd);gap:4px;padding:0 16px}
.tabs a{flex:none;min-height:48px;padding:0 1.2rem;font-size:.95rem;border-top:0;border-bottom:3px solid transparent}
.tabs a[aria-current]{border-bottom-color:var(--ac)}
.top{padding-left:24px}
main{padding:16px 24px 32px}
.two{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start}
.two>.side{grid-column:2;grid-row:1}.two>.m1{grid-column:1;grid-row:1}
.two .strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));overflow:visible}
.two .strip .game{min-width:0}
.two2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.lva>.blk+.blk{margin-top:0}
.two>.side .seg{flex-wrap:wrap;overflow:visible}
.two.sc2{grid-template-columns:minmax(0,1fr) 21rem}
.ksl{columns:2;column-gap:24px}.ksl li{break-inside:avoid}
.tg2{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}
.tw caption{max-width:none}
h1{font-size:1.7rem}
#glossar>div{scroll-margin-top:112px}
#glossar dt{scroll-margin-top:118px}
}
@media (min-width:900px) and (max-width:1199px){.two.g{display:block}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media print{.tabs,.top,.foot{display:none}body{padding:0}}