/* CI4U Live-Demo 3.1 - Corporate Design "Werkbank" (tokens.css): grauer Grund, weisse Blaetter, Linien. Keine festen Farben, keine festen Schriften, keine externen Ressourcen.
   Farben/Masse nur ueber Variablen aus /static/css/tokens.css (Abschnitt 8 = Datenvisualisierung); Hell/Dunkel/Hoher Kontrast/Schriftgroesse/Bewegung kommen aus tokens.css + darstellung.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-bg);color:var(--c-text);font:var(--fw-text) var(--fs-sm)/var(--lh-text) var(--font-text);font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--font-head);font-weight:var(--fw-head);letter-spacing:var(--tracking-head);margin:0;line-height:var(--lh-head);hyphens:auto;overflow-wrap:break-word}
h1{font-size:var(--fs-2xl)}h3{font-size:var(--fs-lg)}
p{margin:0}
a{color:var(--c-link);text-underline-offset:.18em;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}
button,select,textarea,input{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mt{margin-top:var(--s-5)}.mt-s{margin-top:var(--s-3)}

/* Knoepfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--hit);padding:0 var(--s-5);font:var(--fw-strong) var(--fs-sm)/1 var(--font-text);background:var(--c-accent);color:var(--c-on-accent);border:var(--b-regel) solid transparent;border-radius:var(--r-2);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--c-accent-hover)}
.btn.ghost{background:transparent;color:var(--c-text);border-color:var(--c-line-strong)}.btn.ghost:hover{border-color:var(--c-text);background:transparent}
.right .btn{min-height:var(--hit-min);padding:0 var(--s-4)}
/* Kopfleiste kann im Hellmodus dunkel sein (Werkbank, tokens.css): Beschriftungen und Rahmen in Band-Farben */
.bar .brand small,.bar .search,.bar .right{color:var(--c-band-text)}.bar .brand small,.bar .search{border-color:var(--c-band-line)}.bar .btn.ghost{color:var(--c-band-text);border-color:var(--c-band-text)}.bar .btn.ghost:hover{border-color:var(--c-band-akzent)}

/* Hinweisband + Kopfleiste */
.kiband{background:var(--c-hinweis);color:var(--c-hinweis-text);font-size:var(--fs-xs);line-height:var(--lh-ui);padding:var(--s-2) var(--s-4);text-align:center}
.kiband a{color:inherit}
.bar{display:flex;align-items:center;gap:var(--s-3);min-height:4rem;padding:var(--s-2) var(--s-4);border-bottom:var(--b-haar) solid var(--c-band-line);background:var(--c-band);color:var(--c-band-text);position:relative}
.gridbtn{display:grid;place-items:center;width:var(--hit-min);height:var(--hit-min);background:transparent;color:var(--c-band-text);border:var(--b-haar) solid transparent;border-radius:var(--r-2);cursor:pointer;flex:none}
.gridbtn:hover,.gridbtn[aria-expanded=true]{border-color:var(--c-band-text)}
.gridbtn svg{width:1.4rem;height:1.4rem}
.brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;color:var(--c-band-text);flex:none}
.brand img{display:block;height:36px;width:auto}
.logo-h{display:var(--logo-hell)!important}.logo-d{display:var(--logo-dunkel)!important}   /* Logo-Wahl kommt aus tokens.css (Kopfband kann im Hellmodus dunkel sein) */
.brand small{font:var(--fw-medium) var(--fs-sm) var(--font-text);padding-left:var(--s-3);border-left:var(--b-haar) solid var(--c-band-line)}
.search{flex:1;max-width:30rem;margin-inline:auto;min-height:var(--hit-min);display:flex;align-items:center;border:var(--b-haar) solid var(--c-band-line);border-radius:var(--r-2);padding:0 var(--s-4)}
.right{margin-left:auto;display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-xs)}
.who{display:inline-grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:var(--r-rund);border:var(--b-regel) solid var(--c-line-strong);background:var(--c-surface);color:var(--c-text);font:var(--fw-head) var(--fs-xs)/1 var(--font-text);margin-right:var(--s-2);vertical-align:middle}
.right .who{margin:0}
.tiles{position:absolute;top:calc(100% + var(--s-2));left:var(--s-4);z-index:20;width:min(22rem,calc(100vw - 2rem));background:var(--c-surface);color:var(--c-text);border:var(--b-regel) solid var(--c-line-strong);border-radius:var(--r-3);padding:var(--s-3);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-1);box-shadow:var(--shadow-float)}
.tiles[hidden]{display:none}
.tile{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-1);border-radius:var(--r-2);text-decoration:none;color:var(--c-text);font-size:var(--fs-sm);text-align:center;border:var(--b-haar) solid transparent}
.tile:hover{border-color:var(--c-line-strong)}.tile[aria-current=page]{border-color:var(--c-text);font-weight:var(--fw-strong)}
.tile svg{width:1.5rem;height:1.5rem}
.tabs{display:flex;flex-wrap:wrap;gap:0 var(--s-5);padding:0 var(--s-4);border-bottom:var(--b-haar) solid var(--c-line-strong);background:var(--c-surface-2)}
.tabs a{display:inline-flex;align-items:center;min-height:var(--hit-min);color:var(--c-text-muted);text-decoration:none;font-weight:var(--fw-medium);border-bottom:var(--b-fokus) solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--c-text)}.tabs a[aria-current=page]{color:var(--c-text);font-weight:var(--fw-strong);border-bottom-color:var(--c-accent)}
main:focus{outline:none}
.view{max-width:74rem;margin:0 auto;padding:var(--s-6) var(--s-4) var(--s-8)}
.view>h1{margin-bottom:var(--s-2)}.view>.lead{font-size:var(--fs-md);color:var(--c-text-muted);max-width:var(--measure);margin-bottom:var(--s-6)}

/* Bausteine: Blaetter auf dem Grund (Werkbank), Kopfkante in Tinte */
.grid{display:grid;gap:var(--s-5)}.g4{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.card,.vorschlag,.pane,.side{background:var(--c-blatt);border:var(--b-blatt) solid var(--c-blatt-line);border-radius:var(--r-blatt);box-shadow:var(--shadow-blatt)}
.card{border-top:var(--b-fokus) solid var(--c-text);padding:var(--s-4) var(--s-blatt) var(--s-blatt);min-width:0}
.card h3{margin-bottom:var(--s-3)}
.kpi .l{color:var(--c-text-muted);font-size:var(--fs-sm)}
.kpi .v{font:var(--fw-head) var(--fs-2xl)/1.1 var(--font-head);letter-spacing:var(--tracking-head);margin:var(--s-1) 0 var(--s-2);font-variant-numeric:proportional-nums}
.kpi .sub{color:var(--c-text-muted);font-size:var(--fs-xs);margin-top:var(--s-2)}
/* Sparkline: kraeftige Linie in Reihenfarbe, leichte Flaeche, Endpunkt-Marker, letzter Wert beschriftet */
.spark{width:100%;max-width:22rem;height:auto;display:block;margin-top:var(--s-3)}
.spark .ar{fill:var(--c-daten-1);fill-opacity:.14}
.spark .ln{fill:none;stroke:var(--c-daten-1);stroke-width:2.75;stroke-linejoin:round;stroke-linecap:round}
.spark .gl{stroke:var(--c-gitter);stroke-width:1}
.spark .end{fill:var(--c-daten-1);stroke:var(--c-daten-marker-ring);stroke-width:2}
.spark text{fill:var(--c-text);font:var(--fw-strong) 13px var(--font-text);paint-order:stroke;stroke:var(--c-blatt);stroke-width:3px;stroke-linejoin:round}
/* Marken-Reihe (11 Filialen als Formen) */
.marks{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:var(--s-3)}
.marks svg{width:18px;height:18px;background:none;padding:0;border:0}
.marks .t-ok{fill:var(--c-entschieden-line)}.marks .t-warn{fill:var(--c-frist-bald);stroke:var(--c-warnung);stroke-width:1.5}.marks .t-bad{fill:var(--c-fehler)}
.list{list-style:none;margin:0;padding:0}.list li{padding:var(--s-3) 0;border-top:var(--b-haar) solid var(--c-line)}.list li:first-child{border-top:0;padding-top:0}
.list small{display:block;color:var(--c-text-muted);font-size:var(--fs-xs)}
.list.t li{padding:var(--s-2) 0}
.hint{border-left:var(--b-regel) solid var(--c-line-strong);padding-left:var(--s-3);color:var(--c-text-muted);margin-top:var(--s-4);max-width:var(--measure);font-size:var(--fs-xs)}
.l{color:var(--c-text-muted);font-size:var(--fs-sm);margin-bottom:var(--s-2)}.l.sp2{margin-top:var(--s-4)}

/* Abzeichen: Form + Wort, nie nur Farbe. in Ordnung/bestaetigt = Violett (Abgezeichnet-System), Hinweis = Gelb-Dreieck, Stoerung = Rot-Quadrat */
.tag,.ampel{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-1) var(--s-3) var(--s-1) var(--s-2);border-radius:var(--r-1);font-weight:var(--fw-strong);font-size:var(--fs-sm);line-height:1.3;white-space:nowrap;border:var(--b-haar) solid transparent}
.tag{background:var(--c-info-fill);color:var(--c-info-text);border-color:var(--c-line)}
.tag.n{padding-left:var(--s-3)}
.tag svg,.ampel svg{width:16px;height:16px;flex:none}
.t-ok{background:var(--c-entschieden-fill);color:var(--c-entschieden-text);border-color:var(--c-entschieden-line)}.t-ok svg{fill:var(--c-entschieden-line);stroke:none}
.t-warn{background:var(--c-warnung-fill);color:var(--c-warnung-text);border-color:var(--c-warnung)}.t-warn svg{fill:var(--c-frist-bald);stroke:var(--c-warnung);stroke-width:1.5}
.t-bad{background:var(--c-fehler-fill);color:var(--c-fehler-text);border-color:var(--c-fehler)}.t-bad svg{fill:var(--c-fehler)}
.t-vor{background:var(--c-vorschlag-fill);color:var(--c-vorschlag-text);border:var(--b-haar) dashed var(--c-vorschlag-line);padding-left:var(--s-3)}
.a-ok{background:var(--c-frist-ok-fill);color:var(--c-frist-ok-text);border-color:var(--c-frist-ok)}.a-ok svg{fill:var(--c-frist-ok)}
.a-bald{background:var(--c-frist-bald-fill);color:var(--c-frist-bald-text);border-color:var(--c-frist-bald-rand)}.a-bald svg{fill:var(--c-frist-bald);stroke:var(--c-frist-bald-rand);stroke-width:2}
.a-ueber{background:var(--c-frist-ueber-fill);color:var(--c-frist-ueber-text);border-color:var(--c-frist-ueber)}.a-ueber svg{fill:var(--c-frist-ueber)}
/* Veraenderung: Pfeil + Wort */
.delta{display:inline-flex;align-items:center;gap:var(--s-1);padding:var(--s-1) var(--s-3) var(--s-1) var(--s-2);border-radius:var(--r-1);font-weight:var(--fw-strong);font-size:var(--fs-sm);line-height:1.3;background:var(--c-surface-2);color:var(--c-text);border:var(--b-haar) solid var(--c-line)}
.delta b{white-space:nowrap;font-weight:inherit}
.delta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.delta.warn svg:nth-child(2){fill:var(--c-frist-bald);stroke:var(--c-warnung);stroke-width:1.5}
.delta small{font-weight:var(--fw-text);color:var(--c-text-muted);margin-left:var(--s-1)}
.delta.warn{background:var(--c-warnung-fill);color:var(--c-warnung-text);border-color:var(--c-warnung)}

/* Abgezeichnet: KI-Vorschlag = orange gestrichelt + Wort, entschieden = violett durchgezogen */
.vorschlag{border:var(--b-vorschlag);background:var(--c-vorschlag-fill);padding:var(--s-4) var(--s-blatt) var(--s-blatt)}
.status{display:flex;align-items:center;gap:var(--s-2);font-weight:var(--fw-strong);font-size:var(--fs-sm);margin-bottom:var(--s-2);color:var(--c-vorschlag-text)}
.status svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:3 2}
.vorschlag h3{margin-bottom:var(--s-2)}

/* Tabellen */
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);line-height:var(--lh-ui)}
th,td{padding:var(--s-3);text-align:left;border-bottom:var(--b-haar) solid var(--c-line);vertical-align:top}
thead th{font-weight:var(--fw-strong);color:var(--c-text);background:var(--c-surface-2);border-bottom:var(--b-regel) solid var(--c-line-strong);white-space:nowrap}
.vorschlag thead th{background:transparent}
.scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll:focus-visible{outline-offset:-3px}
.toolbar{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-5);align-items:center}
select{min-height:var(--field-h);background:var(--c-surface);color:var(--c-text);border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-2);padding:0 var(--s-3);max-width:100%}
select:focus-visible,textarea:focus-visible{outline:var(--focus-ring);outline-offset:0;border-color:var(--c-focus)}
/* Balken: Reihenfarbe, Spur in Flaeche 3, Bezugsstrich in Tinte */
.bar2{height:.625rem;border-radius:var(--r-1);background:var(--c-surface-3);position:relative;min-width:5rem;margin-top:var(--s-1)}
.bar2 i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--w,0) * 1%);background:var(--c-daten-1);border-radius:var(--r-1) 0 0 var(--r-1)}
.bar2 b{position:absolute;top:-4px;bottom:-4px;width:2px;left:calc(var(--ref,0) * 1%);background:var(--c-text)}
.vorschlag .bar2 i{background:var(--c-vorschlag-line)}
.geaendert{font-weight:var(--fw-strong)}
.toast{position:fixed;left:50%;bottom:calc(var(--hit-min) + var(--s-6));transform:translateX(-50%);background:var(--c-surface);color:var(--c-text);border:var(--b-regel) solid var(--c-line-strong);padding:var(--s-3) var(--s-4);border-radius:var(--r-2);z-index:60;box-shadow:var(--shadow-float);max-width:calc(100vw - 2rem)}
.toast[hidden]{display:none}

/* Chat */
.chat{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:var(--s-5);height:min(40rem,calc(100vh - 10rem));min-height:26rem}
.side{padding:var(--s-3);overflow:auto}
.side h3{font:var(--fw-strong) var(--fs-sm) var(--font-text);color:var(--c-text-muted);padding:0 var(--s-2) var(--s-2);letter-spacing:0;margin:0}
.agent{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:var(--hit);background:transparent;border:var(--b-haar) solid transparent;border-radius:var(--r-2);text-align:left;padding:var(--s-2);cursor:pointer}
.agent:hover{border-color:var(--c-line-strong)}.agent[aria-pressed=true]{border-color:var(--c-entschieden-line);background:var(--c-entschieden-fill)}
.agent b{display:block;font-weight:var(--fw-strong)}.agent small{display:block;color:var(--c-text-muted);font-size:var(--fs-xs);line-height:1.25}
.agent .who{margin:0}
.pane{display:flex;flex-direction:column;min-height:0}
.msgs{flex:1;overflow:auto;padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4)}
.m{max-width:46rem}
.m.u{align-self:flex-end;background:var(--c-surface-2);border:var(--b-haar) solid var(--c-line);border-radius:var(--r-2);padding:var(--s-3) var(--s-4)}
.m.a{border:var(--b-vorschlag);border-radius:var(--r-1);padding:var(--s-3) var(--s-4);background:var(--c-vorschlag-fill)}
.m.a .h{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-1);font-weight:var(--fw-strong);margin-bottom:var(--s-2)}
.m.a .h .wort{margin-left:var(--s-2);color:var(--c-vorschlag-text);font-weight:var(--fw-strong)}
.m.a .b{white-space:pre-wrap}.m.a .f{font-size:var(--fs-xs);color:var(--c-text-muted);margin-top:var(--s-2)}
.sugg{display:flex;flex-wrap:wrap;gap:var(--s-2);padding:0 var(--s-4) var(--s-3)}
.sugg button{min-height:var(--hit-min);background:transparent;border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-2);padding:var(--s-2) var(--s-4);cursor:pointer;text-align:left;font-weight:var(--fw-medium)}
.sugg button:hover{border-color:var(--c-text)}
.compose{display:flex;gap:var(--s-3);padding:var(--s-3);border-top:var(--b-haar) solid var(--c-line)}
.compose textarea{flex:1;resize:none;background:var(--c-surface);border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-2);padding:var(--s-3);height:var(--field-h);min-width:0}
.empty{margin:auto;text-align:center;color:var(--c-text-muted);max-width:26rem}
.empty h2{color:var(--c-text);font-size:var(--fs-lg);margin-bottom:var(--s-2)}
.empty p{margin:0 auto}

/* Diagramme (SVG ueber Klassen, Farben nur aus tokens.css Abschnitt 8) */
.chart,.mapwrap{overflow-x:auto}
.chart svg{display:block;width:100%;height:auto;min-width:34rem}
.chart text{fill:var(--c-achse-text);font:var(--fw-text) 14px var(--font-text)}
.chart .lbl{fill:var(--c-text);font-weight:var(--fw-strong);paint-order:stroke;stroke:var(--c-blatt);stroke-width:4px;stroke-linejoin:round}
.chart .lbl.p{fill:var(--c-vorschlag-text)}
.chart .at{font-weight:var(--fw-medium)}
.gl{stroke:var(--c-gitter);stroke-width:1}
.ax{stroke:var(--c-achse);stroke-width:1.5}
.heute{stroke:var(--c-heute);stroke-width:1.5;stroke-dasharray:2 3}
.ar-ist{fill:var(--c-daten-1);fill-opacity:.14}
.ln-ist{fill:none;stroke:var(--c-daten-1);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.ln-prog{fill:none;stroke:var(--c-vorschlag-line);stroke-width:3;stroke-dasharray:7 6;stroke-linejoin:round;stroke-linecap:round}
.dot{cursor:pointer}
.dot.ist{fill:var(--c-daten-1);stroke:var(--c-daten-marker-ring);stroke-width:2;cursor:default}
.dot.pt{fill:var(--c-vorschlag-fill);stroke:var(--c-vorschlag-line);stroke-width:3}
.dot.pt:hover,.dot.pt.sel{fill:var(--c-vorschlag-line)}
.dot.pt.sel{stroke:var(--c-vorschlag-fill);stroke-width:3;outline:none}
.halo{fill:none;stroke:var(--c-vorschlag-line);stroke-width:2}
.chart .dot:focus-visible,.mapwrap .dot:focus-visible{outline:var(--focus-ring);outline-offset:3px}
.legend{display:flex;gap:var(--s-4) var(--s-5);flex-wrap:wrap;color:var(--c-text-muted);margin-top:var(--s-3);font-size:var(--fs-xs)}
.legend span{display:inline-flex;align-items:center;gap:var(--s-2)}
.legend svg{width:16px;height:16px;flex:none}
.legend .sw{display:inline-block;width:1.6rem;border-top:3px solid var(--c-daten-1)}
.legend .sw.p{border-top:3px dashed var(--c-vorschlag-line)}
.legend .sw.w{border-top:3px solid var(--c-karte-wasser)}
.legend .sw.s{border-top:2px solid var(--c-karte-strasse)}
.legend .sw.ref{border-top:2px solid var(--c-text);width:.9rem}
.legend .sw.ba{border-top:8px solid var(--c-daten-1)}
.legend .sw.bw{border-top:8px solid var(--c-warnung)}
.legend .sw.v{border-top:8px solid var(--c-vorschlag-line)}
.legend .ramp{display:inline-block;width:5rem;height:.75rem;border:var(--b-haar) solid var(--c-line);background:linear-gradient(to right,var(--c-blatt),var(--c-daten-1))}
.legend svg circle{fill:var(--c-entschieden-fill);stroke:var(--c-entschieden-line);stroke-width:1.5}
.legend svg path{fill:var(--c-frist-bald);stroke:var(--c-warnung);stroke-width:1.5}
.legend svg rect{fill:var(--c-fehler-fill);stroke:var(--c-fehler);stroke-width:1.5}
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s-5)}

/* Karte: lokale, vereinfachte Geometrie (assets/karte.json), Flaechen hell, Linien, Wasser in Wasserfarbe */
.mapwrap svg{display:block;width:100%;height:auto;min-width:32rem;border:var(--b-haar) solid var(--c-line);background:var(--c-karte-land)}
.k-land{fill:var(--c-karte-land);stroke:var(--c-karte-grenze);stroke-width:1;stroke-linejoin:round}
.k-wasser{fill:none;stroke:var(--c-karte-wasser);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.k-wasser.gross{stroke-width:5}
.k-strasse{fill:none;stroke:var(--c-karte-strasse);stroke-width:1.25;stroke-linejoin:round}
.mapwrap text{font:var(--fw-text) 12px var(--font-text);paint-order:stroke;stroke:var(--c-karte-land);stroke-width:3px;stroke-linejoin:round}
.k-ort{fill:var(--c-karte-ort);font-style:italic}
.k-ort.g{font-weight:var(--fw-strong);font-size:13px;font-style:normal;letter-spacing:.04em;text-transform:uppercase}
.k-ab{fill:var(--c-karte-strasse);font-size:10px;font-weight:var(--fw-medium)}
.k-name{fill:var(--c-text);font-weight:var(--fw-strong);font-size:13px}
.dot.s-ok{fill:var(--c-entschieden-fill);stroke:var(--c-entschieden-line);stroke-width:2.5}
.dot.s-warn{fill:var(--c-frist-bald);stroke:var(--c-warnung);stroke-width:2.5}
.dot.s-bad{fill:var(--c-fehler-fill);stroke:var(--c-fehler);stroke-width:2.5}
.dot.s-ok:hover,.dot.s-ok.sel{fill:var(--c-entschieden-line)}
.dot.s-warn:hover,.dot.s-warn.sel{fill:var(--c-warnung)}
.dot.s-bad:hover,.dot.s-bad.sel{fill:var(--c-fehler)}
.sel-ring{fill:none;stroke:var(--c-text);stroke-width:2;pointer-events:none}
.mapfoot{font-size:var(--fs-xs);color:var(--c-text-muted);margin-top:var(--s-2)}

/* Analyse */
.subtabs{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-5)}
.subtabs button{min-height:var(--hit-min);padding:0 var(--s-4);background:var(--c-blatt);color:var(--c-text);border:var(--b-haar) solid var(--c-line-strong);border-radius:var(--r-2);cursor:pointer;font-weight:var(--fw-medium)}
.subtabs button[aria-pressed=true]{background:var(--c-text);color:var(--c-bg);border-color:var(--c-text)}
.heatwrap{overflow-x:auto}
.heat{display:grid;grid-template-columns:2.4rem repeat(var(--cols,12),minmax(1.6rem,1fr));gap:3px;align-items:center;min-width:30rem}
.heat .hh,.heat .hd{font-size:var(--fs-xs);color:var(--c-achse-text);text-align:center;font-weight:var(--fw-medium)}
.heat .hd{text-align:left}
.heat .hc{height:1.9rem;border-radius:3px;background:color-mix(in oklab,var(--c-daten-1) calc(var(--p,0) * 1%),var(--c-blatt));display:grid;place-items:center;font-size:var(--fs-xs);font-weight:var(--fw-strong);color:var(--c-text)}
.heat .hc.hi{color:var(--c-on-accent)}
.heat .ht{grid-column:2/-1;font-size:var(--fs-xs);color:var(--c-text-muted);text-align:center}
.hb{display:grid;gap:var(--s-3)}
.hbr{display:grid;grid-template-columns:9rem minmax(4rem,1fr) 4rem;gap:var(--s-1) var(--s-3);align-items:center}
.hbr .bar2{margin:0}
.hbr small{grid-column:2/4;color:var(--c-text-muted);font-size:var(--fs-xs)}
.hbr small svg{width:12px;height:12px;vertical-align:-1px;margin-right:2px;fill:var(--c-frist-bald);stroke:var(--c-warnung);stroke-width:1.5}
.hbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb .up{background:var(--c-warnung)}

.cta{display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-7)}
.cta h3{margin:0 0 var(--s-1)}.cta p{color:var(--c-text-muted);max-width:32rem}
.ctabtns{display:flex;gap:var(--s-3);flex-wrap:wrap}

@media(max-width:52rem){
  .chat{grid-template-columns:minmax(0,1fr);height:auto}.side{max-height:12rem}.pane{height:32rem}
  .search,.right .ver{display:none}.split{grid-template-columns:1fr}
}
@media(max-width:40rem){
  .brand small{display:none}.bar{gap:var(--s-2);padding-inline:var(--s-3)}.right{gap:var(--s-2)}.right .who{display:none}
  .right .btn{padding:0 var(--s-3)}.tabs{gap:0 var(--s-4);padding-inline:var(--s-3)}.view{padding-inline:var(--s-3)}
  .card{padding-inline:var(--s-4)}.vorschlag{padding-inline:var(--s-4)}
  .hbr{grid-template-columns:7rem minmax(3rem,1fr) 3.6rem}
  /* Karte ohne Querscrollen: SVG schrumpft, Schrift/Marken/Linien werden im Gegenzug vergroessert (viewBox 600 auf ca. 340 px) */
  .mapwrap svg{min-width:0}
  .mapwrap text{font-size:19px;stroke-width:4px}.k-ort.g{font-size:20px}.k-name{font-size:21px}.k-ab{font-size:15px}
  .mapwrap .dot,.mapwrap .sel-ring{transform-box:fill-box;transform-origin:center;transform:scale(1.6)}
  .k-land{stroke-width:1.6}.k-wasser{stroke-width:4}.k-wasser.gross{stroke-width:7}.k-strasse{stroke-width:2}
}
/* Grosse Schrift (data-schrift aus darstellung.css): Medienabfragen in rem folgen der Wurzelgroesse nicht, daher frueher einspaltig */
:root[data-schrift="sehr-gross"] .split,:root[data-schrift="sehr-gross"] .chat{grid-template-columns:minmax(0,1fr)}
:root[data-schrift="sehr-gross"] .chat{height:auto}:root[data-schrift="sehr-gross"] .side{max-height:12rem}:root[data-schrift="sehr-gross"] .pane{height:32rem}
:root[data-schrift] .brand small{display:none}
/* Hoher Kontrast: kraeftigere Raender und Marken */
:root[data-kontrast=hoch] .btn,:root[data-kontrast=hoch] .subtabs button,:root[data-kontrast=hoch] .tag,:root[data-kontrast=hoch] .ampel,:root[data-kontrast=hoch] .delta{border-width:var(--b-regel)}
:root[data-kontrast=hoch] .card,:root[data-kontrast=hoch] .pane,:root[data-kontrast=hoch] .side{border-width:var(--b-regel)}
:root[data-kontrast=hoch] .card{border-top-width:4px}
:root[data-kontrast=hoch] .ar-ist,:root[data-kontrast=hoch] .spark .ar{fill-opacity:.2}
:root[data-kontrast=hoch] .k-land{stroke-width:1.5}