:root{color-scheme:dark;--tiefe:#0A1219;--flaeche:#101A24;--flaeche2:#16222E;
--linie:#1E2C3A;--linie2:#2B3E51;--txt:#E9F1F8;--muted:#8EA1B5;--muted2:#64798F;
--pruef:#1FB47F;--warn:#E0A52A;--rot:#E5484D;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--tiefe);color:var(--txt);
font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--pruef);outline-offset:2px}
.mitte{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.karte{width:400px;max-width:94vw;background:var(--flaeche);border:1px solid var(--linie);
border-radius:12px;padding:28px 26px}
.marke{display:flex;align-items:center;gap:10px;margin-bottom:20px;color:var(--pruef)}
.marke svg{width:26px;height:26px}
.marke b{color:var(--txt);letter-spacing:.13em;font-size:16px;text-transform:uppercase}
.marke span{color:var(--muted2);font-size:11px;margin-left:auto;letter-spacing:.1em;text-transform:uppercase}
h1{font-size:17px;margin:0 0 16px;font-weight:600}
label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--muted2);margin:14px 0 6px}
input{width:100%;background:var(--flaeche2);border:1px solid var(--linie2);border-radius:8px;
padding:11px 12px;color:var(--txt);font:inherit}
input.code{font:600 22px var(--mono);letter-spacing:.35em;text-align:center}
button{width:100%;margin-top:18px;background:var(--pruef);color:#03130d;border:0;
border-radius:8px;padding:12px;font:600 14.5px var(--sans);cursor:pointer}
button:hover{filter:brightness(1.1)}
.fehler{color:var(--rot);font-size:13px;margin:12px 0 0;min-height:16px}
.hinweis{color:var(--muted);font-size:13px;margin-top:14px}
.qr{background:#fff;border-radius:10px;padding:12px;width:220px;margin:14px auto}
.qr svg{display:block;width:100%;height:auto}
.geheim{display:block;text-align:center;font:600 13px var(--mono);letter-spacing:.12em;
color:var(--pruef);background:var(--flaeche2);border:1px solid var(--linie2);
border-radius:8px;padding:9px;margin-top:10px;word-break:break-all}
/* Dashboard */
.kopf{display:flex;align-items:center;gap:14px;padding:14px 22px;background:var(--flaeche);
border-bottom:1px solid var(--linie)}
.kopf .marke{margin:0}
.kopf form{margin-left:auto}
.kopf button{width:auto;margin:0;background:var(--flaeche2);color:var(--muted);
border:1px solid var(--linie2);padding:8px 14px;font-size:13px}
.inhalt{max-width:1240px;margin:0 auto;padding:22px}
h2{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted2);margin:26px 0 12px}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kachel{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:14px 16px}
.kachel .l{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2)}
.kachel .w{font-size:26px;font-weight:650;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.kachel .u{font-size:.55em;color:var(--muted);font-weight:500;margin-left:2px}
.kachel .s{font-size:12px;color:var(--muted);margin-top:4px}
.balken{height:4px;background:var(--flaeche2);border-radius:2px;margin-top:9px;overflow:hidden}
.balken i{display:block;height:100%;background:var(--pruef);border-radius:2px}
.balken i.warn{background:var(--warn)} .balken i.rot{background:var(--rot)}
.gut{color:var(--pruef)} .warn{color:var(--warn)} .rot{color:var(--rot)}
.bereiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
a.bereich{display:block;background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;
padding:15px 16px;text-decoration:none}
a.bereich:hover{border-color:var(--pruef)}
a.bereich b{display:block;font-size:14.5px}
a.bereich span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
a.bereich .mono{font-size:11px;color:var(--pruef);margin-top:7px}
a.bereich.aus{opacity:.45;pointer-events:none}
.breit{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.diagramm{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:16px}
.diagramm h3{margin:0 0 4px;font-size:14px;font-weight:600}
.diagramm .s{font-size:12px;color:var(--muted)}
svg.chart{width:100%;height:auto;display:block;margin-top:10px}
table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
td{padding:5px 8px 5px 0;border-bottom:1px solid var(--linie);color:var(--muted)}
td.z{text-align:right;font-variant-numeric:tabular-nums;color:var(--txt)}
td .mono{color:var(--txt);font-size:11.5px}
.fuss{color:var(--muted2);font-size:11.5px;padding:18px 22px;text-align:center}
@media(max-width:900px){.breit{grid-template-columns:1fr}}