:root{--bg:#f6f7f9;--card:#fff;--ink:#1c2430;--mute:#5d6878;--line:#e2e6ec;--acc:#1f3864;--acc-ink:#fff;
--kA:#c0392b;--kB:#e08e0b;--kC:#7f8c9d;--ok:#2e8b57;--warn:#b9770e;--bad:#c0392b;--chip:#eef1f5;--hover:#f1f4f9;
--amt-bg:#eaf1fb;--amt:#3b6fb6;--ger-bg:#fff7da;--ger:#c9a00c;--re-bg:#ecf6f2;--re:#2f8f74}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#12161c;--card:#1b2129;--ink:#e6e9ee;--mute:#9aa4b2;--line:#2c3440;--acc:#8fb0ea;--acc-ink:#0f1520;--chip:#262e39;--hover:#222a35;
--amt-bg:#1a2638;--amt:#6f9be0;--ger-bg:#2e2a17;--ger:#d9b437;--re-bg:#16302a;--re:#4fbf9c}}
:root[data-theme="dark"]{--bg:#12161c;--card:#1b2129;--ink:#e6e9ee;--mute:#9aa4b2;--line:#2c3440;--acc:#8fb0ea;--acc-ink:#0f1520;--chip:#262e39;--hover:#222a35;
--amt-bg:#1a2638;--amt:#6f9be0;--ger-bg:#2e2a17;--ger:#d9b437;--re-bg:#16302a;--re:#4fbf9c}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acc)}
.view{display:none}.view.on{display:block}
.mute{color:var(--mute)}.klein{font-size:12.5px}.nw{white-space:nowrap}.num{text-align:right;font-variant-numeric:tabular-nums}
.fehler{color:var(--bad);min-height:1.2em;margin:8px 0 0}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
.btn{border:1px solid var(--acc);background:var(--acc);color:var(--acc-ink);border-radius:6px;padding:7px 14px;font:inherit;font-weight:600;cursor:pointer}
.btn.leicht{background:transparent;color:var(--acc)}
.btn:disabled{opacity:.6;cursor:wait}
input,select{font:inherit;padding:6px 9px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
label{display:block;margin:12px 0 0;font-weight:600;font-size:13px}
label input{display:block;width:100%;margin-top:4px;font-weight:400}

/* Login, Sperre, Laden */
.mitte{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.karte{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px 28px;width:100%;max-width:400px}
.marke{font-weight:700;letter-spacing:.02em;color:var(--acc);font-size:13px;text-transform:lowercase}
.karte h1{font-size:22px;margin:4px 0 2px}
.karte .btn{width:100%;margin-top:18px}

/* App-Rahmen */
header.kopf{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:16px 24px 10px;border-bottom:1px solid var(--line);background:var(--card)}
header.kopf h1{font-size:20px;margin:2px 0}
.sub{color:var(--mute);font-size:12.5px}
.konto{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.konto .btn{padding:4px 10px;font-weight:500}
nav{display:flex;gap:4px;flex-wrap:wrap;padding:6px 24px 0;background:var(--card);border-bottom:1px solid var(--line)}
nav button{border:0;background:none;color:var(--mute);padding:8px 12px;font:inherit;cursor:pointer;border-bottom:2px solid transparent}
nav button.on{color:var(--ink);border-bottom-color:var(--acc);font-weight:600}
.filter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 24px}
.filter label{display:inline-flex;gap:5px;align-items:center;margin:0;font-weight:400;font-size:13px}
.filter label input{display:inline;width:auto;margin:0}
.chip{border:1px solid var(--line);background:var(--chip);color:var(--ink);border-radius:14px;padding:4px 11px;cursor:pointer;font:inherit;font-size:13px}
.chip.on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
main{padding:0 24px 30px;max-width:1500px}
section.tab{display:none}section.tab.on{display:block}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.g2{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0}
.mt{margin-top:14px}
.kpi .v{font-size:28px;font-weight:650;font-variant-numeric:tabular-nums}.kpi .l{color:var(--mute);font-size:12.5px}
h2{font-size:15px;margin:0 0 4px}.q{color:var(--mute);font-size:12.5px;margin:0 0 10px}
footer{color:var(--mute);font-size:12px;padding:10px 24px 30px;max-width:1100px}

/* Tabellen */
.tw{max-height:620px;overflow:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{position:sticky;top:0;background:var(--card);cursor:pointer;font-weight:600;white-space:nowrap;z-index:1}
tr.klick{cursor:pointer}tr.klick:hover td{background:var(--hover)}
.kl{display:inline-block;width:20px;text-align:center;border-radius:4px;color:#fff;font-weight:700;font-size:12px}
.kA{background:var(--kA)}.kB{background:var(--kB)}.kC{background:var(--kC)}
.tag{display:inline-block;font-size:11.5px;padding:0 7px;border-radius:8px;background:var(--chip);white-space:nowrap}
.t-run{background:#d9efe2;color:#14532d}.t-anm{background:#e6f4ea;color:#2f6b45}.t-end{background:#e5e7eb;color:#374151}
.t-off{background:#fde2cf;color:#7c2d12}.t-komp{background:#efe3f6;color:#5b2a72}.t-3c{background:#e0e7ff;color:#1e3a8a}.t-sam{background:#f1ead7;color:#5c4a1c}
.re-badge{display:inline-block;font-size:11px;font-weight:700;padding:0 6px;border-radius:8px;background:var(--re-bg);color:var(--re);border:1px solid var(--re)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:0}
.amp-g{background:#2e8b57}.amp-r{background:#c0392b}.amp-s{background:repeating-linear-gradient(45deg,#e0a800 0 2px,#fff3c4 2px 4px);border:1px solid #c9a00c}
.gerechnet{font-style:italic;color:var(--mute)}
.vergangen{color:var(--mute)}

/* Diagramme */
svg text{fill:var(--ink);font-size:11px}
.leg{display:flex;gap:14px;font-size:12px;color:var(--mute);margin-top:6px;flex-wrap:wrap}
.leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}

/* Hinweisbalken Fachrecherche */
.hinweis{border-left:4px solid var(--re);background:var(--re-bg);padding:10px 14px;border-radius:6px;margin:0 0 14px;font-size:13px}

/* Detail-Dialog */
dialog{border:1px solid var(--line);border-radius:12px;padding:0;background:var(--card);color:var(--ink);width:min(980px,calc(100vw - 24px));max-height:calc(100vh - 32px)}
dialog::backdrop{background:rgba(10,15,25,.45)}
.dkopf{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:2}
.dkopf h2{font-size:19px;margin:0}
.dinhalt{padding:14px 20px 20px;display:grid;gap:14px}
.zu{border:0;background:none;color:var(--mute);font-size:22px;line-height:1;cursor:pointer;padding:2px 6px}
.block{border-left:4px solid var(--line);border-radius:6px;padding:10px 14px}
.block h3{margin:0 0 2px;font-size:14px}
.block.amtlich{border-color:var(--amt);background:var(--amt-bg)}
.block.abgeleitet{border-color:var(--ger);background:var(--ger-bg)}
.block.recherche{border-color:var(--re);background:var(--re-bg)}
dl{display:grid;grid-template-columns:minmax(150px,260px) 1fr;gap:4px 14px;margin:8px 0 0;font-size:13px}
dt{color:var(--mute)}dd{margin:0;min-width:0;overflow-wrap:anywhere}
.leer{color:var(--mute)}
.lang{white-space:pre-wrap}
.links{margin:6px 0 0;padding-left:18px;font-size:13px}
.links a{overflow-wrap:anywhere}
.pwform{padding:18px 20px 20px}

/* Erlaeuterungen */
.erl h2{margin-top:6px}
.erl table td:first-child{width:32%;font-weight:600}
.erl p{max-width:900px}

@media (max-width:640px){
  header.kopf,nav,.filter,main,footer{padding-left:16px;padding-right:16px}
  dl{grid-template-columns:1fr}dt{margin-top:6px}
  .karte{padding:22px 18px}
}