:root{
  --red:#c8111b; --red2:#a30d16; --red3:#5c060b; --gap:#000000; --on-red:#ffffff;
  --page:#ffffff; --sheet:#ffffff; --ink:#1b1b1b; --muted:#6b6b6b; --rule:#e1e1e1; --rule-strong:#bcbcbc;
  --score:#111111; --score-sub:#5d5d5d; --tab:#ffffff; --tab-ink:#1b1b1b; --tab-on:#2f6fb0; --crest-halo:none;
  --up:#2e9b4c; --down:#d4323c; --rel:#e39b2d; --pts:#d01e29; --yellow:#f3c100;
  --land:#e4e2dc; --land-edge:#c9c7bf; --k-p2:#1c5cab; --k-p1:#5598e7; --k-0:#f4f3ef; --k-0-ring:#85847e; --k-m1:#e0625a; --k-m2:#a8141c;
  --display:"Barlow Condensed","Arial Narrow",sans-serif; --body:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --page:#1d1d1d; --sheet:#242424; --ink:#f1f1f1; --muted:#a9a9a9; --rule:#3a3a3a; --rule-strong:#565656;
  --score:#000000; --score-sub:#4a4a4a; --tab:#242424; --tab-ink:#f1f1f1; --tab-on:#4a90d0; --crest-halo:drop-shadow(0 0 1px rgba(255,255,255,.55));
  --land:#333331; --land-edge:#4f4f4c; --k-p2:#86b6ef; --k-p1:#3f7fcf; --k-0:#4a4a47; --k-0-ring:#a3a29c; --k-m1:#c0433f; --k-m2:#ff8a84;
  --up:#4cc06a; --down:#ff5b63; --pts:#ff4b55; color-scheme:dark }}
:root[data-theme="dark"]{
  --page:#1d1d1d; --sheet:#242424; --ink:#f1f1f1; --muted:#a9a9a9; --rule:#3a3a3a; --rule-strong:#565656;
  --score:#000000; --score-sub:#4a4a4a; --tab:#242424; --tab-ink:#f1f1f1; --tab-on:#4a90d0; --crest-halo:drop-shadow(0 0 1px rgba(255,255,255,.55));
  --land:#333331; --land-edge:#4f4f4c; --k-p2:#86b6ef; --k-p1:#3f7fcf; --k-0:#4a4a47; --k-0-ring:#a3a29c; --k-m1:#c0433f; --k-m2:#ff8a84;
  --up:#4cc06a; --down:#ff5b63; --pts:#ff4b55; color-scheme:dark }
*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
body{background:var(--page);color:var(--ink);font:400 15px/1.4 var(--body);-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--red)}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .press{transition-property:scale,background-color,color;transition-duration:150ms;transition-timing-function:ease-out}
  .press:not(:disabled):active{scale:.96}
}
/* Three bars */
.bar1{background:var(--red);color:var(--on-red)}
.bar1 .wrap{display:flex;align-items:center;gap:24px;height:54px}
.mark{color:inherit;text-decoration:none;font:italic 800 28px/1 var(--display);letter-spacing:-.02em;text-transform:uppercase;display:flex;align-items:center;gap:8px;white-space:nowrap}
.mark i{font-style:normal;display:inline-block;width:9px;height:23px;background:repeating-linear-gradient(var(--on-red) 0 4px,transparent 4px 8px);transform:skewX(-12deg)}
.top{margin-left:12px;display:flex;gap:20px;font:600 16px var(--display);text-transform:uppercase;letter-spacing:.01em}
.top a{color:inherit;text-decoration:none;opacity:.78;padding-bottom:3px;border-bottom:3px solid transparent}
.top a[aria-current="page"]{opacity:1;border-bottom-color:var(--on-red)}
/* Light/dark switch: shows the moon in light mode and the sun in dark mode. */
.farbe{margin-left:auto;flex:none;width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--on-red);opacity:.78;cursor:pointer}
.farbe svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.farbe .mond{fill:currentColor;stroke:none}
.farbe .sonne,.farbe[aria-pressed="true"] .mond{display:none}
.farbe[aria-pressed="true"] .sonne{display:inline}
/* One bar under the main sections: the leagues, then behind a thin line the parts of the current page. */
.bar2{background:var(--red2);color:var(--on-red);border-bottom:3px solid #00000055}
.bar2 .wrap{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none}
#ligen,#unter{display:flex;align-items:stretch}
#ligen a{border:0;background:none;padding:8px 12px;font:500 16px var(--display);text-transform:uppercase;cursor:pointer;white-space:nowrap;color:var(--on-red)}
#ligen a[aria-current="page"]{background:var(--red3)}
#unter{padding-left:6px} #unter:not(:empty){border-left:1px solid #ffffff40;margin-left:8px}
#unter a,#unter button{font:500 16px var(--display);color:var(--on-red);text-decoration:none;padding:8px 12px 5px;border-bottom:3px solid transparent;white-space:nowrap;opacity:.85}
#unter a[aria-current="page"]{border-bottom-color:var(--on-red);opacity:1}
@media (hover:hover){ .farbe:hover,.top a:hover,#unter a:hover,#unter button:hover{opacity:1} #ligen a:hover{background:var(--red3)} }
.band{height:10px;background:var(--gap)}
/* Title row */
.titlerow{border-bottom:1px solid var(--rule-strong);background:var(--sheet)}
.titlerow .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-block:14px}
.titlerow h1{font:600 clamp(23px,2.6vw,28px)/1.1 var(--display);margin:0;text-wrap:balance}
.pick{position:relative;display:inline-flex;align-items:center}
.pick select,.pick .measure{font:500 clamp(20px,2.2vw,24px)/1.1 var(--display)}
.pick select{appearance:none;border:0;background:transparent;color:var(--ink);padding:2px 24px 2px 0;cursor:pointer;field-sizing:content}
.pick .measure{position:absolute;visibility:hidden;white-space:pre}
.pick select option{font:16px var(--body);color:#111}
.pick::after{content:"";position:absolute;right:5px;top:50%;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.badge{width:36px;height:36px;flex:none}
/* Sections */
main{background:var(--sheet)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,.62fr);gap:0 40px}
.cols > .vr{background:var(--rule-strong)}
@media (max-width:980px){.cols{grid-template-columns:minmax(0,1fr)} .cols > .vr{display:none} .cols > .minisec{border-top:1px solid var(--rule-strong)}}
section{padding-block:22px;min-width:0}
h2{font:700 19px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0 0 14px}
.pager{display:flex;justify-content:space-between;margin:0 0 14px}
.pager a{text-decoration:none;border:0;background:none;color:var(--muted);font:500 15px var(--body);cursor:pointer;display:inline-flex;gap:8px;align-items:center;padding:4px}
@media (hover:hover){ .pager a:hover{color:var(--ink)} }
/* Begegnungen */
.when{font:500 14px var(--body);text-transform:uppercase;color:var(--ink);margin:18px 0 6px}
.game{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) 100px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule)}
.team{color:inherit;text-decoration:none;display:flex;align-items:center;gap:9px;min-width:0;font:600 17px/1.15 var(--display)}
.team.h{justify-content:flex-end;text-align:right}
.team span{overflow-wrap:anywhere}
.sbox{display:grid;width:104px;text-align:center;font-variant-numeric:tabular-nums}
.sbox > b{background:var(--score);color:#fff;font:600 21px/1 var(--display);padding:5px 0 4px;letter-spacing:.06em}
.sbox small{background:var(--score-sub);color:#e6e6e6;font:500 13px/1 var(--display);padding:3px 0 4px;letter-spacing:.06em}
.sbox.off > b{font-size:13px;letter-spacing:0;padding:7px 0}
/* The score is both quotes: the winner's red, the loser's grey, a draw both dark */
.qq{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.qq b{background:var(--score);color:#fff;font:600 20px/1 var(--display);padding:5px 0 4px}
.qq b.win{background:var(--red)}
.qq b.lose{background:var(--score-sub);color:#d4d4d4}
.more{text-align:right;color:var(--muted);font:500 14px var(--body)}
.more .gr{display:block;font-size:12px}
.note{margin:12px 0 0;color:var(--muted);font-size:13px}
.derby{display:block;font:600 12px var(--display);text-transform:uppercase;color:var(--pts);letter-spacing:.03em}
/* Tables */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
thead th{font:600 14px var(--display);text-transform:uppercase;letter-spacing:.02em;text-align:right;padding:6px 8px 7px;border-bottom:3px solid var(--red);white-space:nowrap}
thead th.p{color:var(--pts)}
th.l,td.l{text-align:left}
tbody td{padding:8px 8px;text-align:right;border-bottom:1px solid var(--rule);font:400 15px var(--body);white-space:nowrap}
tbody tr.cut td{border-bottom:2px solid var(--ink)}
td.pos{width:44px;font-weight:500}
td.tr{width:26px;text-align:center;padding-inline:0}
.chev{display:inline-block;width:9px;height:9px;border-left:2px solid;border-top:2px solid}
.chev.up{color:var(--up);transform:translateY(2px) rotate(45deg)} .chev.dn{color:var(--down);transform:translateY(-3px) rotate(225deg)}
.dash{display:inline-block;width:12px;border-top:2px solid var(--muted);vertical-align:middle}
td.cr{width:40px;padding-inline:4px} td.cr svg,td.cr img{display:block} img.crest{object-fit:contain;flex:none;max-width:none;filter:var(--crest-halo)}
td.nm a{border:0;background:none;padding:0;cursor:pointer;font:500 16px var(--display);text-align:left}
@media (hover:hover){ td.nm a:hover{color:var(--pts)} }
td.p{color:var(--pts);font-weight:500}
.compact tbody td{padding:7px 6px;font-size:14.5px}
.compact td.nm a{font-size:15.5px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px}
.tabs h2{margin:0 10px 0 0}
.tabs button{border:2px solid var(--rule-strong);background:var(--tab);color:var(--tab-ink);font:500 14px var(--display);text-transform:uppercase;letter-spacing:.03em;padding:5px 12px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--tab-on);border-color:var(--tab-on);color:#fff}
.zones{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:13px}
.zones b{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px}
/* Club */
.club{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px}
.clubpic{margin:0 0 28px;max-width:420px}
.clubpic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--score)}
@media (max-width:820px){.club{grid-template-columns:minmax(0,1fr)}}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:3px solid var(--red);border-bottom:1px solid var(--rule)}
.kpis.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 12px}
.kpis div{padding:10px 0}
.kpis b{display:block;font:600 24px/1.1 var(--display);font-variant-numeric:tabular-nums}
.kpis span{color:var(--muted);font-size:13px}
.curve svg{display:block;width:100%;height:auto;margin-top:10px}
.curve text{fill:var(--muted);font:12px var(--body)}
.rule{border:0;border-top:1px solid var(--rule-strong);margin:0}
footer{background:#111;color:#bdbdbd;font-size:13.5px}
footer .wrap{padding-block:22px 34px;display:grid;gap:8px}
footer p{margin:0;max-width:85ch}
footer b{color:#fff}
footer a{color:inherit}
footer .kofi{color:#fff}
footer .kofi a{font-weight:600}
@media (max-width:640px){
  /* The main sections move under the name and scroll sideways if the screen is too narrow. */
  .bar1 .wrap{height:auto;flex-wrap:wrap;gap:6px 0;padding-block:10px 0} .mark{color:inherit;text-decoration:none;font-size:24px}
  .farbe{width:32px;height:32px} .top{order:1;margin-left:0;width:100%;overflow-x:auto;scrollbar-width:none;gap:18px;font-size:15px} .top a{white-space:nowrap;padding-bottom:6px}
  #ligen a{padding-inline:7px;font-size:15px}
  #unter{padding-left:4px} #unter:not(:empty){margin-left:4px}
  #unter a,#unter button{padding-inline:7px;font-size:15px}
  .game{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);row-gap:4px} .more{grid-column:1/-1;text-align:center;font-size:13px}
  .more .derby,.more .why,.more .rep-t{display:inline;margin:0 4px}
  .fc{order:1} .more{order:2} .report{order:3}
  .team{font-size:15px;gap:6px} .team .crest{display:none} .sbox{width:90px} .sbox > b{font-size:18px} .qq b{font-size:17px}
  .curve text{font-size:16px}
  .tabs h2{flex-basis:100%;margin-bottom:4px} td.pos{width:30px} td.cr{width:30px;padding-inline:2px}
  .hide-s{display:none} tbody td{font-size:14.5px;padding:7px 5px} td.nm a{font-size:15.5px} thead th{font-size:13px;padding-inline:5px}
}

/* Site additions */
#ligen a{display:block;text-decoration:none}
#unter button{background:none;border:0;cursor:pointer}
.loading{padding-block:40px;color:var(--muted)}
.muted{color:var(--muted)}
td.nm a{color:inherit;text-decoration:none}
.sbox.plan b{background:var(--score-sub)}
.sbox.plan small{background:var(--rule-strong);color:var(--ink)}
.why{display:block;font-size:12px}
.flag{background:color-mix(in srgb,var(--yellow) 30%,transparent);border-left:4px solid var(--yellow);padding:6px 10px;margin:8px 0;font-size:14px}
.verdict{font:600 17px/1.3 var(--display);margin:16px 0 0}
.lead{max-width:75ch;margin:0 0 18px}
tbody tr[class*="z-"] td.pos{box-shadow:inset 4px 0 0 var(--zone)}
.z-meister,.z-aufstieg{--zone:var(--up)} .z-relegation{--zone:var(--rel)} .z-abstieg{--zone:var(--down)}
.zones b{background:var(--zone)}
.form{display:inline-flex;gap:3px}
.form i{font:600 12px/20px var(--display);font-style:normal;width:20px;text-align:center;color:#fff}
.f-S,.r-S{background:var(--up)} .f-U,.r-U{background:var(--muted)} .f-N,.r-N{background:var(--down)}
.res{display:inline-block;min-width:22px;text-align:center;color:#fff;padding:2px 5px;font-weight:600;margin-right:4px}
.games td{vertical-align:middle} .games td.nm .crest{vertical-align:middle;margin-right:4px}
.games td a{color:inherit} .ha{color:var(--muted);width:24px}
small.sub{display:block;color:var(--muted);font:400 12px var(--body);white-space:normal}
td.reason{white-space:normal;min-width:150px;max-width:220px;line-height:1.3}
td.reason small{color:var(--muted);font-size:12px;white-space:nowrap}
td.defect{min-width:120px}
.games td.nm{white-space:normal} .games small.derby{color:var(--pts);font:600 11px var(--display);margin-top:2px}
td.qc{color:var(--muted)}
.second{max-width:760px}
.clubs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 24px}
.clubs a{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none;font:600 17px var(--display)}
@media (hover:hover){ .clubs a:hover span{color:var(--pts)} }
.clubtitle{flex-wrap:nowrap!important}
.clubtitle h1{font-size:clamp(24px,3vw,30px)} .clubtitle p{margin:4px 0 0}
.clubtitle .pick{margin-left:auto}
@media (max-width:640px){ .clubtitle{flex-wrap:wrap!important} .clubtitle .pick{margin-left:0} }
.recs td{white-space:normal;vertical-align:top}
.recs td:first-child{color:var(--muted);width:40%}
.recs small{display:block;color:var(--muted);font-size:13px}
h2.next{margin-top:28px}
.prose{max-width:none}
.prose section{max-width:72ch}
.prose h2{margin-top:26px}
.prose p,.prose li{line-height:1.55}
table.narrow{width:auto;min-width:260px;margin:4px 0 10px}
footer .wrap{max-width:1280px}
main a{color:inherit}
.note a,.recs a,.lead a,.prose a{color:var(--pts)}
@media (max-width:480px){ .curve text{font-size:19px} .kpis.four{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Weekly place, data tables */
.wk{display:block;font:400 12px var(--body);color:var(--muted);margin-top:2px}
.linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--pts);cursor:pointer;text-decoration:underline}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]::after{content:"";display:inline-block;width:0;margin-left:3px}
th[aria-sort="ascending"]::after{content:"▲";font-size:9px;width:auto} th[aria-sort="descending"]::after{content:"▼";font-size:9px;width:auto}
@media (hover:hover){ th[data-sort]:hover{color:var(--pts)} }
tr.closed td{color:var(--muted)}
.zones a{color:var(--pts)}
@media (max-width:480px){ .weekdata .cr{display:none} .weekdata td,.weekdata th{padding-inline:4px} }
/* Phase 6: reports, cards, Elf */
.report{grid-column:1/-1;margin-top:2px}
.rep-t{display:block;margin:2px 0 0 auto;padding:4px 0;border:0;background:none;cursor:pointer;color:var(--pts);font:600 13px var(--display);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.rep-t::after{content:" ▾"} .rep-t[aria-expanded="true"]::after{content:" ▴"}
.report h3{font:700 18px/1.2 var(--display);margin:10px 0 4px;text-wrap:balance}
.report p{margin:0;max-width:70ch;line-height:1.5;font-size:14.5px}
.report p.joke{margin-top:6px;color:var(--muted);font-size:12.5px}
.card{display:inline-block;width:8px;height:11px;margin-right:4px;vertical-align:-1px;border-radius:1px}
.card.y{background:var(--yellow)} .card.r{background:var(--down)}
.pitch{--grass:#1f7a3a;--grass2:#1b6e34;background:repeating-linear-gradient(var(--grass) 0 44px,var(--grass2) 44px 88px);border:3px solid #ffffffcc;max-width:760px;padding:18px 10px;display:grid;gap:16px;position:relative}
.pitch::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid #ffffff99}
.pitch .line{display:flex;justify-content:space-evenly;gap:8px;position:relative}
.shirt{background:var(--sheet);color:var(--ink);border-top:4px solid var(--red);padding:6px 8px;min-width:0;flex:0 1 150px;text-align:center;box-shadow:0 1px 3px #0005}
.shirt b{display:block;font:700 16px/1.1 var(--display);white-space:nowrap}
.shirt small{display:block;color:var(--muted);font-size:12px}
@media (max-width:480px){ .shirt{padding:4px 3px} .shirt b{font-size:13px} .shirt small{font-size:10.5px} .pitch{padding:12px 4px} }

/* Rule banner */
.explain{background:var(--score);color:var(--on-red);border-bottom:3px solid var(--red)}
.explain .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 28px;align-items:center;padding-block:14px}
.explain h2{font:700 17px/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em;margin:0;color:var(--on-red);border-left:4px solid var(--red);padding-left:10px}
.explain ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;counter-reset:r}
.explain li{counter-increment:r;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;font-size:14px;line-height:1.35;color:#d6d6d6}
.explain li::before{content:counter(r);grid-row:span 2;font:800 30px/1 var(--display);color:var(--red)}
.explain li b{display:block;font:600 16px/1.2 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--on-red);margin-bottom:2px}
.explain-end{display:flex;flex-direction:column;align-items:flex-end;gap:8px;white-space:nowrap}
.explain-end a{color:var(--on-red);font:500 14px var(--body)}
.explain-end button{border:2px solid var(--on-red);background:transparent;color:var(--on-red);font:600 14px var(--display);text-transform:uppercase;letter-spacing:.03em;padding:4px 12px;cursor:pointer}
@media (hover:hover){ .explain-end button:hover{background:var(--on-red);color:var(--score)} }
@media (max-width:980px){ .explain .wrap{grid-template-columns:minmax(0,1fr)} .explain ol{grid-template-columns:minmax(0,1fr)} .explain-end{flex-direction:row;align-items:center;justify-content:space-between} }
/* Highlights on the start page */
.highlights{background:var(--sheet);border-bottom:1px solid var(--rule-strong)}
.hlgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-block:20px}
.hl{display:flex;flex-direction:column;min-width:0;border-top:3px solid var(--red)}
.hl.big{grid-column:span 2;grid-row:span 2}
.hl .ph{aspect-ratio:16/9;background:var(--score);overflow:hidden}
.hl.big .ph{aspect-ratio:3/2}
.hl .ph img{width:100%;height:100%;object-fit:cover;display:block}
.hl .nophoto{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(-45deg,var(--red2) 0 14px,var(--red) 14px 28px)}
.hl .nophoto .crest{width:auto;height:60%;min-height:0}
.hltext{padding-top:8px;min-width:0}
.hltext > a{display:block;color:inherit;text-decoration:none}
.kick{display:block;color:var(--pts);font:600 13px var(--display);text-transform:uppercase;letter-spacing:.03em}
.hl h3{font:700 19px/1.15 var(--display);margin:2px 0 0;text-wrap:balance}
.hl.big h3{font-size:clamp(24px,2.6vw,32px)}
.hl p{margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.4}
.hl:not(.big) p{display:none}
.credit{display:block;margin-top:6px;color:var(--muted);font:400 11px/1.3 var(--body)}
.credit a{color:inherit}
@media (hover:hover){ .hltext > a:hover h3{color:var(--pts)} }
@media (max-width:980px){ .hlgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .hl.big{grid-row:auto} }
@media (max-width:640px){
  .hlgrid{grid-template-columns:minmax(0,1fr);gap:14px;padding-block:14px}
  .hl.big{grid-column:auto}
  .hl:not(.big){display:grid;grid-template-columns:120px minmax(0,1fr);align-items:start;gap:10px;border-top:1px solid var(--rule);padding-top:12px}
  .hl:not(.big) .ph{aspect-ratio:4/3}
  .hl:not(.big) .hltext{padding-top:0}
  .hl:not(.big) h3{font-size:17px}
}
/* Statistics */
.stats .pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px}
@media (max-width:900px){ .stats .pair{grid-template-columns:minmax(0,1fr)} }
.stats .pair > div{min-width:0}
.stats section + section{border-top:1px solid var(--rule-strong)}
.stats .kpis{margin-bottom:4px}
.chart svg{display:block;width:100%;height:auto}
.chart text{fill:var(--muted);font:11px var(--body)}
.chart text.v{fill:var(--ink);font:600 12px var(--display)}
.chart.narrow{display:none}
.chart .hit circle{fill:var(--sheet);stroke:var(--red);stroke-width:2;opacity:0}
@media (hover:hover){ .chart .hit:hover circle{opacity:1} .chart .hit:hover path{fill:var(--red2)} }
@media (max-width:640px){ .chart text{font-size:16px} .chart text.v{font-size:17px} .chart.wide{display:none} .chart.narrow{display:block} .chart.narrow text{font-size:18px} .chart.narrow text.v{font-size:19px} }
.hbars{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.hbars li{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr) 5.5em;align-items:center;gap:10px}
.hbars .lab{font-size:14px;line-height:1.25;display:flex;align-items:center;gap:6px;min-width:0}
.hbars .lab a{text-decoration:none}
.hbars .bar{height:12px}
.hbars .bar i{display:block;height:100%;background:var(--red);border-radius:0 3px 3px 0;min-width:2px}
.hbars .val{text-align:right;font-variant-numeric:tabular-nums;font-size:14px}
@media (max-width:640px){ .hbars li{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px} .hbars .lab{grid-column:1/-1} .hbars .bar{grid-column:1} }
.odds{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.odd{border-top:3px solid var(--red);padding-top:8px;min-width:0}
.odd > b{display:block;font:600 30px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--pts)}
.odd h3{font:700 19px/1.15 var(--display);margin:4px 0 6px;text-wrap:balance}
.odd p{margin:0 0 6px;font-size:14px;line-height:1.4}
.odd p.who{color:var(--muted);font-size:13px}
.odd a{text-decoration:none}
.kpis.records{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.kpis.records span{display:block;max-width:60ch}
@media (max-width:640px){ .kpis.records{grid-template-columns:minmax(0,1fr)} }
td.st{white-space:normal;min-width:160px;line-height:1.3}
td.st a{text-decoration:none}
/* Forecast under a match */
.fc{grid-column:1/-1;margin:0;text-align:center;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.fc b{color:var(--ink);font-weight:600}
.fc a{color:inherit}
.fc .hit{color:var(--up);font-weight:600;white-space:nowrap} .fc .miss{color:var(--muted);white-space:nowrap}
.chart.calib{max-width:380px}
.chart.calib svg{max-width:100%}
@media (max-width:640px){ .chart.calib text{font-size:14px} }

/* Deutschlandkarte der Woche */
.kgrid{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:24px 48px;align-items:start}
@media (max-width:860px){ .kgrid{grid-template-columns:minmax(0,1fr)} .kmap{max-width:520px;margin:0 auto;width:100%} }
.kmap{position:relative;min-width:0}
.kmap svg{display:block;width:100%;height:auto;overflow:visible}
.kmap .land{fill:var(--land);stroke:var(--land-edge);stroke-width:1.5;stroke-linejoin:round}
.kmap .lead line{stroke:var(--muted);stroke-width:1.2}
.kmap .lead circle{fill:var(--muted)}
.dot{stroke:var(--sheet);stroke-width:2}
.k-p2{fill:var(--k-p2)} .k-p1{fill:var(--k-p1)} .k-m1{fill:var(--k-m1)} .k-m2{fill:var(--k-m2)}
.dot.k-0{fill:var(--k-0);stroke:var(--k-0-ring);stroke-width:2.5}
.dot.k-x{fill:none;stroke:var(--muted);stroke-width:2;stroke-dasharray:3 2.5}
.kmap .hit{fill:transparent}
.kmap a{cursor:pointer;outline:none}
.kmap a:focus-visible .dot,.kmap a:hover .dot{stroke:var(--ink);stroke-width:3}
.klab text{fill:var(--muted);font:500 15px var(--body);paint-order:stroke;stroke:var(--sheet);stroke-width:4px;stroke-linejoin:round}
.klab .kn{fill:var(--ink);font:600 18px var(--display)}
.ktip{position:absolute;z-index:2;max-width:250px;background:var(--score);color:#fff;padding:8px 10px;font-size:13px;line-height:1.35;box-shadow:0 2px 8px #0006;border-top:3px solid var(--red);pointer-events:none}
.ktip b{display:block;font:600 17px/1.15 var(--display)}
.ktip span{display:block;color:#d6d6d6}
.ktip small{display:block;margin-top:4px;color:#b3b3b3;font-size:12px}
.kside{min-width:0;max-width:520px}
.kside h3{font:700 17px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:26px 0 10px}
.kavg{grid-template-columns:minmax(0,1fr)}
.kavg b{font-size:34px;color:var(--pts)}
.klegend{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;font-size:14px}
.klegend li{display:flex;align-items:center;gap:8px}
.klegend svg{width:22px;height:22px;flex:none;overflow:visible}
.derbykarte{display:flex;align-items:center;gap:10px}
.derbykarte .team{font-size:18px}
@media (max-width:640px){ .klab text{font-size:19px} .klab .kn{font-size:22px} }