:root{
  --paper:#eceef2; --card:#f7f8fa; --ink:#172039; --muted:#5b6276;
  --line:#d3d6dd; --pitch:#16794a; --pitch-tint:#e2efe8; --pitch-bar:#28a06a;
  --amber:#a96f17; --amber-tint:#f3ead8; --bronze:#7c8190;
  --blue:#2b5fb3; --blue-tint:#e4ecf8;
  --danger:#9d2f2f; --danger-tint:#f6e6e4;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.5; -webkit-font-smoothing:antialiased}
.wrap{max-width:1120px; margin:0 auto; padding:clamp(20px,4vw,56px) clamp(16px,4vw,40px) 80px}

/* ---- header ---- */
header{margin-bottom:30px}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--pitch); margin:0 0 10px}
h1{font-family:var(--font-display); font-weight:800; font-size:clamp(34px,6vw,60px); line-height:.98; letter-spacing:-.02em; margin:0 0 14px; max-width:16ch}
.lede{font-size:clamp(15px,2.2vw,18px); color:var(--muted); margin:0; max-width:62ch}
.lede b{color:var(--ink); font-weight:600}

/* ---- control slip ---- */
.slip{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:clamp(18px,3vw,28px); margin:30px 0 0;
  box-shadow:0 1px 0 rgba(23,32,57,.04), 0 18px 40px -34px rgba(23,32,57,.5)}
.steps{display:grid; gap:22px 28px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field > label{font-family:var(--font-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); display:flex; gap:8px; align-items:baseline}
.field .num{color:var(--pitch); font-weight:700}
input,select{font-family:var(--font-body); font-size:15px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:3px; padding:11px 12px; width:100%}
input::placeholder{color:#9aa0b0}
input:focus-visible,select:focus-visible{outline:2px solid var(--pitch); outline-offset:1px; border-color:var(--pitch)}
.hint{font-size:12.5px; color:var(--muted)}
.hint a{color:var(--pitch); text-decoration:underline; text-underline-offset:2px}
.privacy{display:flex; gap:7px; align-items:flex-start; line-height:1.45}
.privacy svg{flex:0 0 auto; width:13px; height:13px; margin-top:2px; color:var(--pitch)}
.warn{font-family:var(--font-mono); font-size:11.5px; color:var(--amber); background:var(--amber-tint); border-radius:3px; padding:7px 10px; line-height:1.45}

.weights{display:none; grid-column:1/-1; gap:14px; grid-template-columns:repeat(4,1fr); border-top:1px dashed var(--line); padding-top:20px; margin-top:2px}
.weights.show{display:grid}
.weights .field > label{text-transform:none; letter-spacing:.02em; font-family:var(--font-body); font-size:12.5px; color:var(--ink)}

.actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:24px; border-top:1px solid var(--line); padding-top:22px}
button.go{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.01em; background:var(--pitch); color:#fff; border:none; border-radius:3px; padding:13px 26px; cursor:pointer; transition:transform .12s ease, background .12s ease}
button.go:hover:not(:disabled){background:#13633d}
button.go:active:not(:disabled){transform:translateY(1px)}
button.go:disabled{opacity:.5; cursor:not-allowed}
button.go:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.status{font-family:var(--font-mono); font-size:13px; color:var(--muted); min-height:1.4em}

/* ---- disclaimer strip ---- */
.disclaimer{display:flex; gap:10px; align-items:flex-start; margin:16px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5}
.disclaimer svg{flex:0 0 auto; width:15px; height:15px; margin-top:2px; color:var(--bronze)}
.disclaimer a{color:var(--pitch); text-decoration:underline; text-underline-offset:2px}

/* ---- messages ---- */
.msg{margin-top:26px; padding:16px 18px; border-radius:4px; font-size:14.5px; display:none}
.msg.show{display:block}
.msg.err{background:var(--danger-tint); border:1px solid #e3c4c0; color:var(--danger)}
.msg.err b{font-family:var(--font-mono)}
.msg.err code{font-family:var(--font-mono); font-size:12.5px; background:#fff; border:1px solid #e3c4c0; border-radius:3px; padding:1px 5px}
.msg.empty{background:var(--card); border:1px dashed var(--line); color:var(--muted)}

/* ---- results ---- */
.results{margin-top:38px}
.results-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px}
.results-head h2{font-family:var(--font-display); font-weight:700; font-size:22px; margin:0; letter-spacing:-.01em}
.meta{font-family:var(--font-mono); font-size:12px; color:var(--muted)}
.results-side{display:flex; align-items:baseline; gap:14px}
button.csv{font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--pitch); background:none; border:1px solid var(--pitch); border-radius:3px; padding:5px 11px; cursor:pointer; transition:background .12s ease, color .12s ease}
button.csv:hover{background:var(--pitch); color:#fff}
button.csv:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

.tablewrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; min-width:680px}
thead th{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:left; font-weight:400; padding:0 14px 10px; border-bottom:1px solid var(--ink)}
thead th.rank{text-align:center}
tbody td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:hover{background:#fff}
.when{white-space:nowrap}
.when .d{font-weight:600; font-size:13.5px}
.when .t{font-family:var(--font-mono); font-size:12px; color:var(--muted)}
.fixture{font-weight:600; font-size:15px}
.fixture .vs{color:var(--muted); font-weight:400; padding:0 6px}
.fixture .lg{display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--bronze); margin-top:3px}

td.pick{text-align:center; width:108px}
.tip{font-family:var(--font-mono); font-weight:700; font-size:20px; letter-spacing:.02em}
.ev{font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin-top:1px}
.bar{height:3px; border-radius:2px; background:var(--line); margin:6px auto 0; max-width:64px; overflow:hidden}
.bar > i{display:block; height:100%; background:var(--bronze)}
td.pick.r1{background:var(--pitch-tint)}
td.pick.r1 .tip{color:var(--pitch)}
td.pick.r1 .bar > i{background:var(--pitch-bar)}
td.pick.r2 .bar > i{background:var(--amber)}
td.nodata{color:var(--bronze); font-family:var(--font-mono); font-size:12px; text-align:center}

.footnote{margin-top:22px; font-size:12.5px; color:var(--muted); max-width:70ch}

tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:#fff}
tbody tr.clickable:focus-visible{outline:2px solid var(--pitch); outline-offset:-2px}
tbody tr.clickable .fixture::after{content:"›"; color:var(--bronze); font-weight:700; margin-left:8px; opacity:.5; transition:opacity .12s ease, transform .12s ease; display:inline-block}
tbody tr.clickable:hover .fixture::after{opacity:1; transform:translateX(2px)}

/* ---- detail lightbox ---- */
body.modal-open{overflow:hidden}
.modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vw,40px)}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(23,32,57,.45); backdrop-filter:blur(2px)}
.modal-card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:6px; width:min(820px,100%); max-height:100%; overflow:auto;
  padding:clamp(20px,3vw,30px); box-shadow:0 30px 70px -30px rgba(23,32,57,.6); animation:modal-in .16s ease}
@keyframes modal-in{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.modal-x{position:absolute; top:12px; right:14px; width:34px; height:34px; border:1px solid var(--line); background:#fff; border-radius:4px; font-size:22px; line-height:1; color:var(--muted); cursor:pointer; transition:color .12s, border-color .12s}
.modal-x:hover{color:var(--ink); border-color:var(--ink)}
.modal-x:focus-visible{outline:2px solid var(--pitch); outline-offset:2px}

.m-head{margin:0 36px 14px 0}
.m-title{font-family:var(--font-display); font-weight:800; font-size:clamp(22px,4vw,30px); line-height:1.05; letter-spacing:-.01em}
.m-title span{color:var(--muted); font-weight:400; padding:0 4px}
.m-sub{font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-top:4px}

.m-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.m-chip{font-family:var(--font-mono); font-size:12.5px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 12px}
.m-chip b{color:var(--pitch); margin-right:3px}
.m-chip.ghost{color:var(--muted); background:none}
.m-chip.ghost b{color:var(--ink)}
.m-chip.xg{color:var(--blue); background:var(--blue-tint); border-color:var(--blue-tint)}
.m-chip.xg b{color:var(--blue)}

/* align-items:stretch -> beide Spalten gleich hoch; die linke Spalte ist ein
   Flex-Stapel, damit der Tordifferenz-Streifen unten andocken kann. */
.m-body{display:grid; grid-template-columns:1fr 250px; gap:24px; align-items:stretch}
.m-matrix{display:flex; flex-direction:column}
.m-cap{font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; line-height:1.4}
.m-gridwrap{overflow-x:auto}
.m-grid{border-collapse:collapse; font-family:var(--font-mono); width:100%; min-width:0}
.m-grid th,.m-grid td{border:1px solid var(--line); text-align:center; padding:0; width:38px; height:33px; font-size:12.5px}
.m-grid thead th,.m-grid .m-rowh{color:var(--muted); font-weight:700; background:#fff; font-size:12px}
.m-grid .m-corner{position:relative; width:46px; background:#fff}
.m-grid .m-corner span{position:absolute; font-size:8.5px; letter-spacing:.04em; color:var(--bronze); max-width:44px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.m-grid .m-corner span:first-child{top:3px; left:4px}
.m-grid .m-corner span:last-child{bottom:3px; right:4px}
.m-grid .m-corner i{position:absolute; font-style:normal; color:var(--line); font-size:10px}
.m-grid .m-corner i:nth-of-type(1){bottom:3px; left:4px}
.m-grid .m-corner i:nth-of-type(2){top:3px; right:4px}
.m-cell{color:var(--ink); font-weight:700; transition:transform .08s ease}
.m-cell.m-best{outline:2px solid #fff; outline-offset:-2px}
.m-sum{background:#eef0f4; color:var(--muted); font-weight:700; font-size:11.5px}
.m-legend{font-size:11px; color:var(--muted); margin-top:10px; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.m-best-key{display:inline-block; width:14px; height:14px; background:var(--pitch); box-shadow:inset 0 0 0 2px #fff; border-radius:2px; vertical-align:middle}

/* Tordifferenz-Streifen unter der Matrix: 2-Zeilen-Tabelle, gleiche grüne Heatmap.
   margin-top:auto schiebt ihn ans untere Ende der linken Spalte (bündig mit der EV-Liste). */
.m-diff{margin-top:auto; padding-top:18px}
/* volle Spaltenbreite wie die Matrix darüber -> sauberer linker Spaltenrand */
.m-diffgrid{width:100%; min-width:0; table-layout:fixed}

.m-evbox h4{font-family:var(--font-display); font-weight:700; font-size:14px; margin:0 0 10px; letter-spacing:.01em}
.m-evlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
.m-evlist li{display:grid; grid-template-columns:18px 42px 1fr 44px; align-items:center; gap:8px; padding:4px 8px; border-radius:4px; background:#fff; border:1px solid var(--line)}
.m-evlist li.ev-best{background:var(--pitch-tint); border-color:var(--pitch-bar)}
.ev-rank{font-family:var(--font-mono); font-size:11px; color:var(--muted)}
.ev-score{font-family:var(--font-mono); font-weight:700; font-size:15px}
.m-evlist li.ev-best .ev-score{color:var(--pitch)}
.ev-bar{height:4px; border-radius:2px; background:var(--line); overflow:hidden}
.ev-bar > i{display:block; height:100%; background:var(--bronze)}
.m-evlist li.ev-best .ev-bar > i{background:var(--pitch-bar)}
.ev-val{font-family:var(--font-mono); font-size:12px; text-align:right; color:var(--muted)}
.m-evnote{font-size:11px; color:var(--muted); margin:12px 0 0; line-height:1.45}

/* ---- responsive: stack table into cards ---- */
@media (max-width:680px){
  table,thead,tbody,tr,td{display:block; min-width:0}
  table{min-width:0}
  thead{display:none}
  tbody tr{border:1px solid var(--line); border-radius:4px; background:var(--card); margin-bottom:14px; padding:6px 4px}
  tbody td{border-bottom:1px dashed var(--line); display:flex; justify-content:space-between; align-items:center; gap:14px}
  tbody td:last-child{border-bottom:none}
  td.pick{width:auto; text-align:right}
  td.pick::before{content:attr(data-label); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
  td.pick.r1{border-radius:3px}
  .bar{margin:0; max-width:80px}

  /* Lightbox geht auf dem Handy randlos in den Vollbildmodus. */
  .modal{padding:0}
  .modal-card{width:100%; max-height:100%; height:100%; border-radius:0; border:none; padding:18px 16px 28px}
  .m-body{grid-template-columns:1fr; gap:22px}
  .m-evbox{order:2}
  .m-grid th,.m-grid td{width:auto; min-width:34px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}