/* Bento: Kacheln aus satten Farbflächen, große Ziffern, Pillennavigation.
   Farbe gliedert die Flächen; Zustände stehen zusätzlich immer als Wort da. */
:root{
  --grund:#eceef1; --flaeche:#fff; --band:#f1f3f6;
  --tinte:#151a24; --tinte2:#5a6474; --tinte3:#8a93a3; --linie:#e1e5ea;
  --ink:#16233f; --koralle:#ff5a3c; --amber:#ffc247; --teal:#0fae9c; --lila:#6f5cf0;
  --gut:#0c7c5a; --gut-flaeche:#e0f3ec;
  --warn:#8a5d00; --warn-flaeche:#fdf1d8;
  --stop:#b3311f; --stop-flaeche:#ffeae6;
  --ui:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --zier:"Bricolage Grotesque",var(--ui);
  --zahl:"Roboto Mono",ui-monospace,Menlo,monospace;
  --r-gross:22px; --r-klein:13px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--grund); color:var(--tinte); font-family:var(--ui);
  font-size:14.5px; line-height:1.55; -webkit-font-smoothing:antialiased}
a{color:inherit; text-underline-offset:2px}

header.balken{background:transparent; padding:14px 20px 0}
header.balken .innen{max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:8px;
  flex-wrap:wrap; background:var(--flaeche); border-radius:99px; padding:6px 8px 6px 18px}
header.balken .marke{font-family:var(--zier); font-weight:800; font-size:16px; letter-spacing:-.02em;
  margin-right:8px; text-decoration:none}
header.balken a{padding:8px 15px; border-radius:99px; font-size:13.5px; font-weight:700;
  color:var(--tinte2); text-decoration:none}
header.balken a:hover{color:var(--tinte)}
header.balken a.aktiv{background:var(--ink); color:#fff}
header.balken .rechts{margin-left:auto; display:flex; gap:6px; align-items:center; font-size:12.5px;
  color:var(--tinte2); padding-right:8px}

main{max-width:1180px; margin:0 auto; padding:18px 20px 70px}
h1{font-family:var(--zier); font-size:clamp(23px,3vw,30px); font-weight:800; letter-spacing:-.03em;
  margin:14px 0 0}
h2{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--tinte2);
  margin:26px 0 10px}
h3{font-size:14px; font-weight:700; margin:0 0 8px}
.unterzeile{color:var(--tinte2); margin:6px 0 16px; font-size:13.5px; max-width:70ch}

.karte{background:var(--flaeche); border-radius:var(--r-gross); padding:20px; margin-bottom:14px}
.karte.eng{padding:15px 18px}
.reihe{display:flex; gap:14px; flex-wrap:wrap}
.reihe > *{flex:1 1 300px; min-width:0}
.gitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:14px}
.gitter > div{background:var(--flaeche); border-radius:var(--r-gross); padding:18px 20px}
.gitter > div:first-child{background:var(--ink); color:#fff}
.gitter > div:first-child .klein{color:#aab6cc}
.wert{font-family:var(--zier); font-size:34px; font-weight:800; letter-spacing:-.04em; line-height:1.05;
  margin-top:4px}
.klein{font-size:12.5px; color:var(--tinte2)}
.gitter .klein:first-child, .etikett{font-size:10.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tinte3)}

.scroll{overflow-x:auto; background:var(--flaeche); border-radius:var(--r-gross); padding:6px}
table{width:100%; border-collapse:separate; border-spacing:0 7px; font-size:13.5px}
th{text-align:left; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--tinte3);
  font-weight:800; padding:6px 14px; white-space:nowrap}
td{padding:13px 14px; background:var(--band); font-weight:600; vertical-align:middle}
td:first-child{border-radius:var(--r-klein) 0 0 var(--r-klein)}
td:last-child{border-radius:0 var(--r-klein) var(--r-klein) 0}
td.zahl, th.zahl{text-align:right; font-family:var(--zahl); font-variant-numeric:tabular-nums;
  font-weight:500; white-space:nowrap}
tr.summe td{background:var(--ink); color:#fff; font-weight:800}

label{display:block; font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--tinte3); margin:0 0 5px}
input,select,textarea{font:inherit; font-size:14px; color:var(--tinte); background:var(--band);
  width:100%; border:1px solid transparent; border-radius:11px; padding:9px 12px}
td input, td select{background:var(--flaeche)}
input.zahl{font-family:var(--zahl); font-size:13.5px; text-align:right}
input[type=checkbox]{width:auto}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--lila); outline-offset:2px}
.feld{margin-bottom:13px}

.knopf{display:inline-block; background:var(--ink); color:#fff; border:0; border-radius:99px;
  padding:11px 20px; font:inherit; font-size:13.5px; font-weight:800; cursor:pointer;
  text-decoration:none; white-space:nowrap}
.knopf:hover{opacity:.9}
.knopf.leise{background:var(--band); color:var(--tinte)}
.knopf.gefahr{background:var(--stop-flaeche); color:var(--stop)}
.knopf.klein{padding:7px 14px; font-size:12.5px}

.meldung{padding:14px 18px; margin:14px 0; font-size:13.5px; border-radius:var(--r-klein);
  background:var(--band)}
.meldung.gut{background:var(--gut-flaeche); color:var(--gut); font-weight:600}
.meldung.schlecht{background:var(--stop-flaeche); color:var(--stop); font-weight:600}

.schild{display:inline-flex; align-items:center; font-size:10.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 10px; border-radius:99px; background:var(--band);
  color:var(--tinte2)}
.schild.offen{background:var(--gut-flaeche); color:var(--gut)}
.schild.zu{background:var(--band); color:var(--tinte2)}
.schild.warn{background:var(--warn-flaeche); color:var(--warn)}
.schild.rot{background:var(--stop-flaeche); color:var(--stop)}

.stufe{background:var(--band); border-radius:var(--r-klein); padding:13px 16px; margin-bottom:8px}
.stufe.erreicht{background:var(--gut-flaeche)}
.stufe.aktiv{background:var(--lila); color:#fff}
.stufe.aktiv .klein{color:#e2ddff}
.stufe.aktiv .schild{background:rgba(255,255,255,.2); color:#fff}
.stufe.aktiv .balken-fortschritt{background:rgba(255,255,255,.25)}
.stufe.aktiv .balken-fortschritt div{background:#fff}
.bedingung{display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:13px}
.balken-fortschritt{height:6px; border-radius:99px; background:#dfe3ea; overflow:hidden; margin-top:4px}
.balken-fortschritt div{height:100%; border-radius:99px; background:var(--tinte2)}
.stufe.erreicht .balken-fortschritt div{background:var(--gut)}

details > summary{cursor:pointer; font-weight:700; font-size:13.5px; padding:6px 0}
hr{border:0; border-top:1px solid var(--linie); margin:16px 0}
@media (max-width:640px){ .reihe > *{flex-basis:100%} main{padding:14px 14px 56px}
  header.balken{padding:10px 14px 0} .wert{font-size:29px} }