/* Stil wie MorgenWatt; eigene Akzentfarbe (Blau statt Bernstein) */
:root{--bg:#f6f7f4;--karte:#fff;--text:#1d2420;--leise:#66706a;--linie:#dfe3dc;--akzent:#1f6fbf;--balken:#3b8fd9;--ueber:#eb6834;--ziel:#1baf7a;--luecke:#c9cfc8;--warn:#c0392b}
@media(prefers-color-scheme:dark){:root{--bg:#151917;--karte:#1e2421;--text:#e7ebe6;--leise:#98a39b;--linie:#313a35;--akzent:#4ea8ec;--balken:#3f97dc;--ueber:#d95926;--ziel:#199e70;--luecke:#3a443e;--warn:#e0674f}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,sans-serif}
main{max-width:980px;margin:0 auto;padding:max(24px,calc(env(safe-area-inset-top) + 12px)) max(16px,env(safe-area-inset-right)) max(60px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
h1{font-size:22px;margin:0 0 18px}h2{font-size:16px;margin:0 0 12px}
a{color:var(--akzent)}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:10px;padding:18px;margin-bottom:18px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--linie)}
th{font-size:12px;color:var(--leise);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
td.z,th.z{text-align:right;font-variant-numeric:tabular-nums}
.rollen{overflow-x:auto}
label{display:block;font-size:12px;color:var(--leise);margin-bottom:3px}
input,select,textarea{width:100%;padding:7px 9px;border:1px solid var(--linie);border-radius:6px;background:var(--bg);color:var(--text);font:inherit}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
button,.knopf{display:inline-block;padding:8px 14px;border-radius:6px;border:1px solid var(--akzent);background:var(--akzent);color:#fff;font:inherit;cursor:pointer;text-decoration:none}
button.neben,.knopf.neben{background:transparent;color:var(--text);border-color:var(--linie)}
button.gefahr{background:var(--warn);border-color:var(--warn)}
code,pre{font:13px ui-monospace,Consolas,monospace;background:var(--bg);border:1px solid var(--linie);border-radius:6px}
code{padding:1px 5px}
.leise{color:var(--leise);font-size:13px}.warn{color:var(--warn)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.kachel{border:1px solid var(--linie);border-radius:8px;padding:10px}.kachel b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
.version{font-size:11px;font-weight:600;color:var(--leise);border:1px solid var(--linie);border-radius:999px;padding:1px 7px;align-self:center;font-variant-numeric:tabular-nums}
.kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:22px}
.marke{display:flex;align-items:center;gap:9px;font-size:19px;letter-spacing:-.01em;color:var(--text);text-decoration:none}
.marke b{font-weight:700}.logo{width:30px;height:30px;color:var(--akzent)}
.nav{display:flex;align-items:center;gap:14px;font-size:14px}
.nav a{text-decoration:none}.nav a.aktiv{color:var(--text);font-weight:600}
.nav button{padding:5px 10px;font-size:13px}
.zeile{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.knoepfe{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.legende{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--leise);margin:8px 0 0}
.legende span{display:inline-flex;align-items:center;gap:6px}.legende i{width:14px;height:3px;border-radius:2px;display:inline-block}
.legende i.balken{height:10px;background:var(--balken)}.legende i.ueber{height:10px;background:var(--ueber)}
.legende i.ziel{background:var(--ziel)}.legende i.spitze{background:none;border-top:2px dashed var(--leise);height:0}
.legende i.luecke{background:var(--luecke)}
.viz{overflow-x:auto}.viz svg{width:100%;min-width:600px;height:auto;display:block}
.viz .gitter{stroke:var(--linie);stroke-width:1}.viz .achse{fill:var(--leise);font-size:11px}
.viz .bar{fill:var(--balken)}.viz .bar.ueber{fill:var(--ueber)}
.viz .ziel{fill:none;stroke:var(--ziel);stroke-width:2}
.viz .spitze{stroke:var(--leise);stroke-width:1;stroke-dasharray:4 4}
.viz .luecke{fill:var(--luecke)}
.token{font:14px ui-monospace,Consolas,monospace;word-break:break-all;background:var(--bg);border:1px solid var(--linie);border-radius:6px;padding:10px}
.tabelle-scroll{overflow:auto;max-height:520px}
tr.ueber td{color:var(--ueber)}
td.abgeleitet{color:var(--leise)}
.pille{font-size:12px;border:1px solid var(--linie);border-radius:999px;padding:1px 8px;color:var(--leise)}
.pille.aus{color:var(--warn);border-color:var(--warn)}