:root{
  --flaeche:#fcfcfb; --ebene:#f9f9f7; --karte:#ffffff; --tinte:#0b0b0b; --tinte2:#52514e; --leise:#6f6e69;
  --gitter:#e1e0d9; --achse:#c3c2b7; --rand:#e4e3dc; --akzent:#2a78d6; --akzent-text:#1c5cab;
  --gut:#006300; --schlecht:#b42323; --warn-flaeche:#fff4dc; --warn-rand:#f0c35a;
  --ok-flaeche:#e8f5e8; --fehler-flaeche:#fdeaea; --info-flaeche:#e8f1fc;
  --radius:12px; --schatten:0 1px 2px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.04);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --flaeche:#1a1a19; --ebene:#0d0d0d; --karte:#1a1a19; --tinte:#f0efec; --tinte2:#c3c2b7; --leise:#9a9890;
    --gitter:#2c2c2a; --achse:#383835; --rand:#2e2e2b; --akzent:#3987e5; --akzent-text:#86b6ef;
    --gut:#3fbf3f; --schlecht:#f08080; --warn-flaeche:#3a2f12; --warn-rand:#8a6a1a;
    --ok-flaeche:#142a14; --fehler-flaeche:#3a1818; --info-flaeche:#132338;
    --schatten:none; color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ebene);color:var(--tinte);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--akzent-text)}
kopf,header.kopf{display:block}
.kopf{background:var(--karte);border-bottom:1px solid var(--rand);position:sticky;top:0;z-index:10}
.kopf-innen{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.marke{font-weight:700;font-size:17px;text-decoration:none;color:var(--tinte);display:flex;align-items:center;gap:8px}
.marke svg{width:26px;height:26px}
nav.haupt{display:flex;gap:4px;flex-wrap:wrap;flex:1}
nav.haupt a{padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--tinte2)}
nav.haupt a.aktiv,nav.haupt a:hover{background:var(--ebene);color:var(--tinte)}
main{max-width:1180px;margin:0 auto;padding:20px 16px 60px}
h1{font-size:24px;margin:4px 0 16px;letter-spacing:-.01em}
h2{font-size:18px;margin:0 0 12px}
h3{font-size:15px;margin:0 0 8px}
.karte{background:var(--karte);border:1px solid var(--rand);border-radius:var(--radius);padding:18px;box-shadow:var(--schatten);margin-bottom:16px;min-width:0}
.raster{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.raster2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.leise{color:var(--leise)} .klein{font-size:13px}
.zahl{font-variant-numeric:tabular-nums}
.gross{font-size:26px;font-weight:650;letter-spacing:-.01em}
.plus{color:var(--gut)} .minus{color:var(--schlecht)}
.hinweis{background:var(--warn-flaeche);border:1px solid var(--warn-rand);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:14px}
.flash{border-radius:10px;padding:10px 14px;margin-bottom:12px;border:1px solid var(--rand)}
.flash.ok{background:var(--ok-flaeche)} .flash.fehler{background:var(--fehler-flaeche)} .flash.info{background:var(--info-flaeche)}
.knopf,button{font:inherit;cursor:pointer;border-radius:9px;border:1px solid var(--rand);background:var(--karte);color:var(--tinte);padding:8px 14px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:38px}
.knopf.haupt,button.haupt{background:var(--akzent);border-color:var(--akzent);color:#fff}
.knopf:hover,button:hover{filter:brightness(.97)}
button:disabled{opacity:.6;cursor:default}
.knopfreihe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
form.zeile{display:inline}
label{display:block;font-size:13px;color:var(--tinte2);margin-bottom:4px}
input,select{font:inherit;color:var(--tinte);background:var(--flaeche);border:1px solid var(--achse);border-radius:8px;padding:7px 10px;width:100%;min-height:38px}
input[type=checkbox]{width:auto;min-height:0}
.felder{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin-bottom:12px}
.check{display:flex;gap:8px;align-items:center;font-size:15px;color:var(--tinte);margin-bottom:8px}
.tabelle-huelle{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--gitter);white-space:nowrap}
th{font-weight:600;color:var(--tinte2);font-size:13px}
td.r,th.r{text-align:right}
tbody tr:hover{background:var(--ebene)}
.punkt{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:baseline}
.chip{display:inline-block;font-size:12px;padding:2px 8px;border-radius:99px;background:var(--ebene);border:1px solid var(--rand);color:var(--tinte2)}
.chip.signal{background:var(--warn-flaeche);border-color:var(--warn-rand);color:var(--tinte)}
.balken{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;background:var(--gitter);margin:8px 0 4px}
.balken span{display:block;height:100%}
.legende{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--tinte2);margin:4px 0 8px}
.diagramm{position:relative;height:340px}
.diagramm.klein{height:200px}
.umschalter{display:flex;gap:6px;margin-bottom:8px}
.umschalter button{min-height:30px;padding:4px 10px;font-size:13px}
.umschalter button[aria-pressed=true]{background:var(--ebene);border-color:var(--achse);font-weight:600}
details summary{cursor:pointer;color:var(--akzent-text)}
.anmelden{max-width:380px;margin:10vh auto}
.fuss{max-width:1180px;margin:0 auto;padding:0 16px 30px;font-size:12px;color:var(--leise)}
@media (max-width:640px){
  .kopf-innen{gap:8px;padding:8px 12px;flex-wrap:nowrap}
  .marke span.name{display:none}
  nav.haupt{flex-wrap:nowrap;overflow-x:auto;gap:0}
  nav.haupt a{padding:6px 8px;white-space:nowrap}
  .kopf .abmelden{display:none}
.gross{font-size:22px} .diagramm{height:280px} h1{font-size:21px}}
.legende-eintrag{min-height:30px;padding:3px 9px;font-size:13px;color:var(--tinte2);border-radius:99px}
.legende-eintrag[aria-pressed=false]{opacity:.45;text-decoration:line-through}
.umschalter a.knopf{min-height:32px;padding:5px 12px;font-size:14px}
.umschalter a[aria-current=page]{background:var(--ebene);border-color:var(--achse);font-weight:600}
[hidden]{display:none!important}