:root{--bg:#f4f5f7;--card:#fff;--text:#1c2330;--muted:#6b7686;--line:#e2e6ec;--badge-text:#5a6473;--accent:#f7931a;--on-accent:#1a1200;--focus:#ca7207;--ok:#137241;--warn:#8c5b00;--bad:#ba2929;--c1:#f7931a;--c2:#2f7de1;--c3:#1a9d5a;--c4:#8a5cf6;--card-2:var(--card);--c-house:var(--text);--c-wallbox:var(--c2);--c-cost:var(--text);--glow:0;--card-shadow:none;--card-edge:transparent;--page-glow:none;--hero-bg:none;--ok-tint:rgba(26,157,90,.15);--warn-tint:rgba(217,138,0,.16);--bad-tint:rgba(214,69,69,.15);--info-tint:rgba(47,125,225,.13);--accent-tint:rgba(247,147,26,.14);--overlay:rgba(0,0,0,.55);--shadow-tip:0 4px 14px rgba(0,0,0,.28);--font-sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#12161c;--card:#1b212b;--text:#e8ecf2;--muted:#8f9bad;--line:#2a3240;--badge-text:#8f9bad;--focus:#f7931a;--ok:#1daf64;--warn:#e0a020;--bad:#e07373}}
:root[data-theme="dark"]{--bg:#12161c;--card:#1b212b;--text:#e8ecf2;--muted:#8f9bad;--line:#2a3240;--badge-text:#8f9bad;--focus:#f7931a;--ok:#1daf64;--warn:#e0a020;--bad:#e07373}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;font:15px/1.4 var(--font-sans);background:var(--bg);color:var(--text);min-height:100vh}
/* Farbschimmer der Seite auf eigener, fester Ebene: wird beim Scrollen nicht neu gemalt */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--page-glow)}
main{max-width:1100px;margin:0 auto;padding:16px}
header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
h1{font-size:20px;margin:0}
h1 img,h1 svg{width:26px;height:26px;vertical-align:-5px;border-radius:6px}
/* App-Symbol mit Seitenname führt auf jeder Seite zur Übersicht */
h1 a.home{color:inherit;text-decoration:none;border-radius:6px}
h1 a.home:hover{opacity:.8}
h1 a.home:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h2{font-size:15px;margin:0 0 10px}
a{color:var(--muted)}
.clock{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badges-inline{display:contents}
.badge{padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;background:var(--line);color:var(--badge-text)}
.badge.ok{background:var(--ok-tint);color:var(--ok)}
.badge.warn{background:var(--warn-tint);color:var(--warn)}
.badge.bad{background:var(--bad-tint);color:var(--bad)}
a.badge{text-decoration:none}
a.badge.nav:hover{background:var(--accent);color:var(--on-accent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.grid .card{margin-bottom:0}
.stat .l{color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.stat .v{font-size:26px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.stat .u{font-size:14px;font-weight:500;color:var(--muted);margin-left:3px}
.stat .v.t{font-size:20px;margin-top:6px}
/* Umgerechnete Werte (z. B. MWh): Originaleinheit beim Überfahren der Kachel */
.sc-f{display:none;white-space:nowrap}
.stat:hover .sc-s{display:none}
.stat:hover .sc-f{display:inline;font-size:.82em}
.stat .s{font-size:12px;color:var(--muted);margin-top:2px;min-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.click{cursor:pointer;user-select:none}
.click:hover{border-color:var(--accent)}
.click.busy{opacity:.6}
.statebar{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--muted);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.statebar .sb-t{font-weight:700}
.statebar .sb-d{color:var(--muted)}
.statebar.ok{border-left-color:var(--ok)}.statebar.st{border-left-color:var(--c4)}.statebar.warn{border-left-color:var(--warn)}.statebar.bad{border-left-color:var(--bad)}
button{font:inherit;cursor:pointer;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
a.btn{display:inline-block;text-decoration:none;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px}a.btn:hover{border-color:var(--accent)}a.btn[hidden]{display:none}
button:hover:not(:disabled){border-color:var(--accent)}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
button.mini{padding:1px 8px;font-size:12px;border-radius:6px}
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
button.stage{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px}
button.stage.active{border-color:var(--accent);background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent)}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tabs button{padding:4px 10px;font-size:13px}
.tabs button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
input[type=text],input[type=email],input[type=number],input[type=password],input[type=date],input[type=month],input[type=time],select,textarea{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
input[type=number]{width:96px}
button:focus-visible,a.badge:focus-visible,.click:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus);outline-offset:-1px}
.hint{color:var(--muted);font-size:12.5px;margin-top:8px}
.note{padding:9px 12px;border-radius:8px;margin-bottom:10px;font-size:14px;background:var(--line)}
.note.ok{background:var(--ok-tint)}.note.warn{background:var(--warn-tint);color:var(--warn)}.note.bad{background:var(--bad-tint);color:var(--bad)}.note.info{background:var(--info-tint)}
.charthead{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;margin-bottom:10px}
.charthead h2{margin:0}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.overlay{position:fixed;inset:0;z-index:20;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:16px}

/* Seitenspezifisch, nur mit Tokens */
.sec{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;margin:22px 0 10px}
.sec .ip{color:var(--muted);font-size:12.5px;font-weight:400;font-family:var(--font-mono)}
.chartbox{position:relative;height:210px}
.chartbox canvas{display:block}
.zoom-reset{position:absolute;top:0;right:0;z-index:1;opacity:.92}
.zoom-reset[hidden]{display:none}
.empty{color:var(--muted);font-size:13px;padding:6px 2px}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chips label{display:inline-flex;align-items:center;gap:2px;font-size:13px;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 11px 4px 9px;cursor:pointer;user-select:none}
.chips label:hover{border-color:var(--accent)}
.chips label.checked{border-color:var(--accent);background:var(--accent-tint)}
.chips label:focus-within{outline:2px solid var(--focus);outline-offset:1px}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips .chip{display:inline-flex;align-items:center;gap:2px;font-size:13px;color:var(--text);background:var(--accent-tint);border:1px solid var(--accent);border-radius:999px;padding:4px 6px 4px 9px}
.chips .chip button{border:0;background:none;padding:0 4px;margin-left:2px;font-size:14px;line-height:1;color:var(--muted);border-radius:6px}
.chips .chip button:hover{color:var(--text)}

/* Eigene Grafik: Auswahl-Pop-up (Werte + Farben) */
.picker{position:relative}
.picker-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:15;width:min(360px,calc(100vw - 32px));max-height:60vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-tip);padding:8px}
.picker-pop[hidden]{display:none}
.pick-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px}
.pick-row:hover{background:var(--accent-tint)}
.pick-row label{flex:1;display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;min-width:0}
.pick-row label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-row input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;margin:0;flex:0 0 auto}
.pick-row input[type=color]{width:30px;height:24px;padding:0 2px;border:1px solid var(--line);border-radius:6px;background:var(--card);cursor:pointer;flex:0 0 auto}
.pick-row .reset{padding:0 6px;font-size:12px;border:0;background:none;color:var(--muted)}
.pick-row .reset:hover{color:var(--text)}
.pick-row .reset[disabled]{visibility:hidden}
.picker-foot{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);margin-top:6px;padding:8px 4px 2px}

.rangecard .row{margin-top:0}
.rangecard .rl{color:var(--muted);font-size:12.5px}
.rangecard .row + .row{margin-top:10px}
.rangecard .exp{margin-left:auto;font-size:13px}

/* Energiefluss */
.flow-wrap{display:flex;justify-content:center}
#flow-svg{width:100%;max-width:480px;height:auto}
#flow-svg.flow-float{position:relative;z-index:20;background:var(--card-2,var(--card));border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.22)}
.flow-path{fill:none;stroke:var(--line);stroke-width:2.5;stroke-linecap:round;transition:opacity .35s,stroke .35s}
.flow-path.active{opacity:.45}
.flow-dot{pointer-events:none}
.flow-node{color:var(--muted)}
.flow-node.n-pv{color:var(--c1)}
.flow-node.n-haus{color:var(--c-house)}
.flow-node.n-batt{color:var(--c4)}
.flow-node.n-netz{color:var(--c2)}
.flow-node.n-wallbox{color:var(--c-wallbox)}
.node-circle{fill:color-mix(in srgb,currentColor 10%,var(--card));stroke:currentColor;stroke-width:2.5}
/* Symbole wie in den Kacheln: Linien in der Knotenfarbe (Strichstärke skaliert mit, wie dort 1,9 auf 24) */
.node-svg-ico{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.node-label{text-anchor:middle;font-size:12px;fill:var(--muted);font-weight:600}
.node-value{text-anchor:middle;font-size:13px;fill:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.node-sub{text-anchor:middle;font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.node-label,.node-value,.node-sub{paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
.batt-fill{fill:currentColor;opacity:.35;transition:height .6s ease,y .6s ease}
.flow-node.pv-active .node-circle{stroke-width:3.5}
.batt-charge{fill:currentColor;pointer-events:none}

/* Einstellungen */
.modal{background:var(--card);border:1px solid var(--line);border-radius:12px;width:100%;max-width:680px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.modal-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px;border-bottom:1px solid var(--line)}
.modal-h h2{margin:0}
.modal-t{padding:10px 14px;border-bottom:1px solid var(--line)}
.modal-b{padding:14px;overflow-y:auto}
.modal-b h3{font-size:14px;margin:18px 0 8px}
.form-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.form-row label{width:140px;color:var(--muted);font-size:13px;flex-shrink:0}
.form-row input,.form-row select{flex:1;min-width:120px}
.form-row input[type=number]{flex:0 0 auto}
.save-status{font-size:13px;margin-top:8px;color:var(--muted);min-height:1em}
.dev{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.dev-h{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
.dev-h .ip{color:var(--muted);font-weight:400;font-family:var(--font-mono);font-size:12.5px}
.dev-h .acts{display:flex;gap:6px}
.dev .regs{color:var(--muted);font-size:12.5px;margin-top:4px}
button.danger{color:var(--bad)}
.reg-labels,.register-row{display:grid;grid-template-columns:1.3fr .8fr .7fr .8fr .6fr .6fr auto;gap:6px;align-items:center}
.reg-labels{font-size:12px;color:var(--muted);margin-bottom:4px}
.register-row{margin-bottom:6px}
.register-row input,.register-row select{width:100%;min-width:0;padding:5px 6px;font-size:13px}
.register-row .reg-states{grid-column:1/-1;font-size:12.5px}
.register-row .reg-states[hidden]{display:none}
@media (max-width:620px){.reg-labels{display:none}.register-row{grid-template-columns:1fr 1fr 1fr;padding-bottom:6px;border-bottom:1px solid var(--line)}}

/* Tageswerte */
.dayhead{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;margin:22px 0 10px}
.dayhead h2{margin:0}

/* Geräteseite */
.devtabs{margin-bottom:14px}
.devtabs button{display:inline-flex;align-items:center;gap:6px}
.devtabs .st{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.devtabs .st.ok{background:var(--ok)}.devtabs .st.bad{background:var(--bad)}

/* Tages-Energiefluss (Sankey) */
.sankey-wrap{position:relative}
#sankey-svg{display:block;width:100%;max-width:640px;height:auto;margin:0 auto}
.sk-link{opacity:.32;transition:opacity .15s;cursor:default}
.sk-link:hover,.sk-link.hl{opacity:.62}
.sankey-wrap.hovering .sk-link:not(.hl){opacity:.12}
.sk-node{rx:2}
.sk-name{font-size:12px;font-weight:600;fill:var(--muted)}
.sk-val{font-size:12.5px;font-weight:700;fill:var(--text);font-variant-numeric:tabular-nums}
.sankey-tip{position:absolute;pointer-events:none;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:13px;box-shadow:var(--shadow-tip);white-space:nowrap;z-index:2}
.sankey-tip b{font-variant-numeric:tabular-nums}
.daynav{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.daynav button{padding:4px 10px;font-size:13px}
.daynav input[type=date]{padding:3px 8px;font-size:13px}
.daynav .exp{font-size:13px}

/* Anlagendaten im Kopf */
.brand{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.inst-name{font-size:14px;font-weight:600;padding:4px 12px;border-radius:999px;background:var(--accent-tint);border:1px solid var(--accent);color:var(--text);max-width:100%;overflow-wrap:anywhere}
.syschips{display:flex;gap:6px;flex-wrap:wrap}
.syschip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 7px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.syschip b{color:var(--text);font-weight:700}
.sys-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.sys-ico .fill{fill:currentColor;stroke:none}
.syschip.pv .sys-ico{color:var(--c1)}
.syschip.batt .sys-ico{color:var(--c4)}

/* PV-Flächen (Einstellungen > Anlage) */
.surf-labels,.surface-row{display:grid;grid-template-columns:1.3fr 1.2fr 1fr .7fr 1fr .7fr auto;gap:6px;align-items:center}
.inv-block{border:1px solid var(--line);border-radius:10px;padding:12px 12px 6px 20px;margin-bottom:12px}
.inv-block .form-row .check{margin-right:10px}
.inv-model-hint{margin:-2px 0 8px 150px}
@media (max-width:600px){.inv-model-hint{margin-left:0}.inv-block .form-row>label:not(.check),#invctl-choice-row>label{width:100%}.inv-block .form-row select,#invctl-choice-row select{flex:1 1 100%}}
.surf-labels{font-size:12px;color:var(--muted);margin-bottom:4px}
.setup-str{display:grid;grid-template-columns:62px minmax(0,1.8fr) minmax(0,.7fr) minmax(0,1fr) minmax(0,.7fr);gap:6px;align-items:center;margin-bottom:6px}
.setup-str input,.setup-str select{width:100%;min-width:0;padding:5px 6px;font-size:13px}
.setup-str-n{font-size:13px;color:var(--muted)}
.setup-str-head{font-size:12px;color:var(--muted);margin-bottom:4px}
@media (max-width:620px){.setup-str-head{display:none}.setup-str{grid-template-columns:1fr 1fr;padding-bottom:6px;border-bottom:1px solid var(--line)}.setup-str-n{grid-column:1/-1}.setup-str .st-name{grid-column:1/-1}}
.surface-row{margin-bottom:6px}
.surface-row input,.surface-row select{width:100%;min-width:0;padding:5px 6px;font-size:13px}
.sf-az{display:flex;align-items:center;gap:4px}
.sf-dir{font-size:12px;color:var(--muted);min-width:20px}
@media (max-width:620px){.surf-labels{display:none}.surface-row{grid-template-columns:1fr 1fr 1fr;padding-bottom:6px;border-bottom:1px solid var(--line)}}

/* Zusatzgeräte: HTTP-Werte (Name, JSON-Pfad, Faktor, Einheit) */
.reg-labels.http,.register-row.http{grid-template-columns:1.2fr 2fr .6fr .6fr auto}
label.check{width:auto;display:inline-flex;align-items:center;gap:6px;color:var(--text);font-size:13.5px;cursor:pointer}
label.check input{width:auto;flex:0 0 auto;min-width:0}
.form-row label.check{flex-shrink:1;min-width:0}
@media (max-width:620px){.register-row.http{grid-template-columns:1fr 1fr}}

/* Energiefluss: Haus anklickbar, Verbraucher darunter */
#node-haus,.flow-click{cursor:pointer}
#node-haus:hover .node-circle,#node-haus:focus-visible .node-circle,.flow-click:hover .node-circle,.flow-click:focus-visible .node-circle{stroke-width:3.5}
#node-haus:focus,.flow-click:focus{outline:none}
.house-toggle{fill:var(--accent);font-weight:600}
.flow-node.n-consumer{color:var(--muted)}

/* Zusatzgeräte: Reihenfolge per Ziehen */
.dev[draggable="true"]{cursor:grab}
.dev.dragging{opacity:.45}
.dev.drop-before{box-shadow:0 -3px 0 var(--accent)}
.dev.drop-after{box-shadow:0 3px 0 var(--accent)}
.dev-grip{color:var(--muted);margin-right:2px;user-select:none}
.dev .acts button:disabled{opacity:.3}

/* Ereignisprotokoll (Einstellungen > Protokoll) */
.event-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.event{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--card)}
.event-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--muted)}
.event-t{font-family:var(--font-mono)}
.event-src{font-weight:600;color:var(--text)}
.event-lvl{font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--info-tint);color:var(--text)}
.event-lvl.lvl-error{background:var(--bad-tint);color:var(--bad)}
.event-lvl.lvl-warning{background:var(--warn-tint);color:var(--warn)}
.event-lvl.lvl-push{background:var(--accent-tint);color:var(--text)}
.event-title{margin-top:3px;font-size:14px;overflow-wrap:anywhere}
.event-msg{margin-top:2px;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.event-msg.event-fail{color:var(--bad)}
/* Protokoll: Filter, Tagesüberschriften, ungelesene Einträge */
.ev-fields{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
@media (max-width:760px){.ev-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ev-q{grid-column:1/-1}}
.ev-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.ev-field>span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.ev-field input,.ev-field select{width:100%;min-width:0}
input[type=search]{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
input[type=search]:focus{outline:2px solid var(--focus);outline-offset:-1px}
.ev-range{margin-top:10px}
.ev-filter .row{justify-content:space-between}
.ev-actions{display:flex;flex-wrap:wrap;gap:8px}
.event-day{font-size:13px;color:var(--muted);font-weight:600;margin:10px 2px 0}
.event-day:first-child{margin-top:0}
.event.unread{border-left:3px solid var(--accent)}
.event-new{font-size:11.5px;font-weight:600;color:var(--text);margin-left:auto}
.event mark{background:var(--accent-tint);color:inherit;border-radius:3px;padding:0 1px}
button.linklike{border:0;background:none;padding:0;color:var(--text);text-decoration:underline;font-size:inherit}
button.linklike:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* Loxone (Einstellungen > Loxone) */
.lox-code{font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere}
.lox-list{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.lox-group{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--card)}
.lox-group-h{margin-bottom:4px}
.lox-row{display:grid;grid-template-columns:minmax(0,1.4fr) auto minmax(0,1.6fr) auto;gap:4px 10px;align-items:center;padding:4px 0;border-top:1px solid var(--line);font-size:13px}
.lox-val{font-family:var(--font-mono);font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.lox-key{color:var(--muted)}
.lox-copy{padding:2px 8px;font-size:12px}
@media (max-width:640px){.lox-row{grid-template-columns:minmax(0,1fr) auto}.lox-key{grid-column:1}.lox-copy{grid-column:2}}

/* ---------- Einstellungen und Protokoll als eigene Seiten (Designsystem: main.form, .mtabs, .bar) ---------- */
[hidden]{display:none !important}
main.form{max-width:1100px}
.mtabs{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 14px}
.mtab{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);text-decoration:none;font-weight:600;font-size:14px}
.mtab:hover{border-color:var(--accent)}
.mtab.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mtab:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
/* Bereich mit ungespeicherten Änderungen: Punkt am Reiter */
.mtab.dirty::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.mtab.dirty.on::after{background:var(--on-accent)}
.tab-panel h2{margin-bottom:12px}
/* Geänderte Zeile: orange Kante links (wie .f.chg im Designsystem) */
.form-row,.surface-row{border-left:3px solid transparent;padding-left:7px;margin-left:-10px}
.form-row.chg,.surface-row.chg{border-left-color:var(--accent)}
.bar{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;background:var(--bg);border-top:1px solid var(--line);padding:12px 0;margin-top:4px}
.bar-count{font-weight:600}
.bar-status{color:var(--muted);font-size:13.5px;flex:1;min-width:0}
.bar .primary{margin-left:auto}
#settings-root .note{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
dialog.modal{padding:0;color:var(--text)}
dialog.modal:not([open]){display:none}
dialog.modal::backdrop{background:var(--overlay)}
.modal-f{justify-content:flex-end;padding:12px 14px;border-top:1px solid var(--line);margin-top:0}
#settings-root [hidden]{display:none !important}
.flow-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.flow-edit-bar{display:flex;align-items:center;gap:6px}
.flow-edit-status{font-size:12px;color:var(--muted)}
.flow-editable{cursor:grab;touch-action:none}
.flow-editable.dragging{cursor:grabbing;opacity:.85}
.flow-editable .node-circle{stroke-dasharray:4 3}
.flow-edit-arrow{cursor:pointer;color:var(--accent)}
.flow-edit-arrow circle{fill:var(--card);stroke:currentColor;stroke-width:1.5}
.flow-edit-arrow path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow-edit-arrow:hover circle,.flow-edit-arrow:focus-visible circle{fill:var(--accent-tint);stroke-width:2.5}
.flow-edit-arrow:focus{outline:none}
.flow-editing #node-haus{cursor:default}
.app-footer{max-width:1100px;margin:8px auto 24px;padding:12px 16px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;color:var(--muted);font-size:12.5px}
.app-footer code{font-size:12px}
.md{line-height:1.55;font-size:14.5px;overflow-wrap:anywhere;max-width:1100px}
.md h1{font-size:22px;margin:4px 0 12px}.md h2{font-size:18px;margin:26px 0 10px;padding-top:14px;border-top:1px solid var(--line)}.md h3{font-size:15.5px;margin:18px 0 8px}
.md p,.md ul,.md blockquote{margin:0 0 10px}.md ul{padding-left:22px}.md li{margin:2px 0}
.md code{font-size:13px;background:var(--line);padding:1px 5px;border-radius:5px}
.md pre{background:var(--line);padding:10px 12px;border-radius:8px;overflow-x:auto;margin:0 0 12px}.md pre code{background:none;padding:0;overflow-wrap:normal}
.md-table{overflow-x:auto;margin:0 0 12px}.md table{border-collapse:collapse;font-size:13.5px;width:100%}
.md th,.md td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}.md th{background:var(--line);white-space:nowrap}
.md blockquote{border-left:3px solid var(--line);padding-left:12px;color:var(--muted)}
.md a,.md-toc a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:2px}
.md-toc{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;margin-bottom:12px}.md-toc:empty{display:none}.md-toc b{width:100%}
/* Inhaltsverzeichnis der Anleitung als Schaltflaechen statt unterstrichener Links */
.md-toc a{display:inline-block;text-decoration:none;color:var(--text);background:var(--accent-tint);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-weight:500;line-height:1.3}
.md-toc a:hover{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.md-toc a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Umschalter Anleitung / Neuigkeiten */
button.mini[data-doc]{padding:5px 14px;font-size:13.5px;border-radius:999px}
button.mini[data-doc].on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
/* Anmeldung und Benutzer */
main.login{max-width:480px}
.badge.user{background:var(--card);border:1px solid var(--line);font-weight:500}
.user-table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:6px}
.user-table th{text-align:left;color:var(--muted);font-weight:500;font-size:12.5px;padding:4px 8px 6px 0;border-bottom:1px solid var(--line)}
.user-table td{padding:7px 8px 7px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.user-table td.act{text-align:right;white-space:nowrap}
.mtab[hidden]{display:none}
.remote-log{max-height:320px;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;font:12px/1.45 var(--font-mono);white-space:pre-wrap;margin:0 0 12px}
@media (max-width:640px){.remote-table thead{display:none}.remote-table td{display:block;border:0;padding:3px 0}.remote-table tr{display:block;border-bottom:1px solid var(--line);padding:6px 0}.remote-table td.act{text-align:left}}
.user-table select{min-width:0}
.user-table .user-dn,.user-table .user-email{width:100%;min-width:110px;padding:5px 7px}
.user-table .me{color:var(--muted);font-size:12.5px;margin-left:6px}
@media (max-width:600px){.user-table thead{display:none}.user-table .user-dn{min-width:0}.user-table td{display:block;border:0;padding:3px 0}.user-table tr{display:block;border-bottom:1px solid var(--line);padding:6px 0}.user-table td.act{text-align:left}}
body:not(.is-admin) .admin-only{display:none !important}
body.is-admin .not-admin{display:none !important}

/* ===================== Dashboard im Neon-Look (nur Fluxa) ===================== */
main.wide{max-width:1520px}
/* Einstellungen: Seite so breit wie das Dashboard, Eingabefelder aber nicht ueber die ganze Breite dehnen */
main.form.wide .form-row input:not([type=number]):not([type=time]):not([type=date]):not([type=month]):not([type=checkbox]):not([type=radio]),main.form.wide .form-row select,main.form.wide .form-row textarea{max-width:820px}
.hero{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:14px}
.hero-main{flex:1 1 520px;min-width:0}
.hero-kicker{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.hero-title{font-size:clamp(22px,2.6vw,28px);font-weight:700;margin:4px 0 10px}
.hero-status{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14.5px;margin-bottom:14px}
.hero-status span{display:inline-flex;align-items:center;gap:7px}
.hs-dot{width:9px;height:9px;border-radius:50%;background:var(--k,var(--muted))}
.hero-today{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hero-today .ht-l{font-size:12px;letter-spacing:.04em;color:var(--muted);margin-right:4px}
.tchip{display:inline-flex;align-items:baseline;gap:5px;padding:4px 10px;border-radius:999px;font-size:13px;background:var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.tchip b{font-weight:700;color:var(--text)}
.tchip i{font-style:normal;font-size:11.5px;color:var(--muted)}
.rings{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.ring{display:flex;flex-direction:column;align-items:center;gap:8px;--k:var(--c4)}
.ring svg{width:104px;height:104px;transform:rotate(-90deg);overflow:visible}
.ring .r-track{fill:none;stroke:var(--line);stroke-width:8}
.ring .r-val{fill:none;stroke:var(--k);stroke-width:8;stroke-linecap:round;transition:stroke-dasharray .8s ease}
.ring .r-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.ring .r-num small{font-size:13px;font-weight:600;color:var(--muted);margin:6px 0 0 2px}
.ring .r-box{position:relative;width:104px;height:104px}
.ring .r-l{font-size:12px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.kpi{position:relative;overflow:hidden;--k:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 14px 12px}
.kpi-h{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.kpi-ico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--k);
  background:color-mix(in srgb,var(--k) 12%,transparent)}
.kpi-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kpi-l{font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;min-width:0;margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-v{font-size:26px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.15}
.kpi-v .u{font-size:14px;font-weight:500;color:var(--muted);margin-left:3px}
.kpi-s{font-size:13px;color:var(--muted);margin-top:4px;min-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-bar{height:6px;border-radius:3px;background:var(--line);margin-top:10px;overflow:hidden}
.kpi-bar i{display:block;height:100%;width:0;background:var(--k);transition:width .8s ease}
.k-solar{--k:var(--c1)}.k-house{--k:var(--c-house)}.k-batt{--k:var(--c4)}.k-grid{--k:var(--c2)}.k-wallbox{--k:var(--c-wallbox)}.k-ok{--k:var(--ok)}.k-muted{--k:var(--muted)}

.dash{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
/* Spalten enden unten gleich: je Spalte füllt eine Karte (.grow) die Resthöhe */
.dash .card.grow{flex:1 1 auto;display:flex;flex-direction:column}
.dash .card.grow .flow-wrap{flex:1;align-items:center}
.dash .card.grow .chart24{flex:1 1 240px;height:auto;min-height:240px}
.dash>.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.dash .card{margin-bottom:0}
@media (max-width:1180px){.dash{grid-template-columns:repeat(2,minmax(0,1fr))}.dash>.col-c{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.dash>.col-c>.card:last-child{grid-column:1/-1}}
@media (max-width:760px){.dash,.dash>.col-c{grid-template-columns:minmax(0,1fr)}.hero{padding:20px}.rings{gap:10px;width:100%;justify-content:space-around}.ring svg,.ring .r-box{width:80px;height:80px}.ring .r-num{font-size:19px}.ring .r-num small{font-size:11px}.ring .r-l{letter-spacing:.06em;font-size:10px}.fc-curve{width:100%;height:auto;flex-basis:100%}.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpi{padding:13px 13px 11px}.kpi-ico{width:34px;height:34px}.kpi-v{font-size:23px}.kpi-s{font-size:12px}}
.kicker{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.below{margin-top:26px}

/* PV-Prognose */
.fc-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:flex-start}
.fc-big{white-space:nowrap;font-size:26px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.fc-sub{font-size:13px;color:var(--muted);margin-top:2px}
.fc-sub b{color:var(--text)}
.fc-curve{width:170px;height:70px;flex:0 0 auto;overflow:visible}
.fc-curve .area{fill:url(#fcGrad)}
.fc-curve .line{fill:none;stroke:var(--c1);stroke-width:2}
.fc-curve .now{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.fc-curve text{font-size:9px;fill:var(--muted)}

/* Wetter */
.wx-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.wx-now{display:flex;gap:12px;align-items:center}
.wx-ico{width:50px;height:50px;color:var(--muted)}
.wx-ico svg,.wx-day svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wx-temp{font-size:38px;font-weight:300;font-variant-numeric:tabular-nums;line-height:1}
.wx-desc{font-size:13px;color:var(--muted);margin-top:3px}
.wx-side{text-align:right;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.wx-side .wx-clock{font-size:28px;font-weight:300;color:var(--text);line-height:1;margin-bottom:6px}
.wx-days{display:flex;flex-direction:column;gap:7px}
.wx-row{display:grid;grid-template-columns:44px 22px 32px 1fr 32px;gap:8px;align-items:center;font-size:13.5px;font-variant-numeric:tabular-nums}
.wx-row .d{font-weight:700}
.wx-row .lo{color:var(--muted);text-align:right}
.wx-row .hi{font-weight:700}
.wx-day{width:20px;height:20px;color:var(--muted)}
.wx-track{position:relative;height:6px;border-radius:3px;background:var(--line)}
.wx-track i{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--c1)}

/* Geräte und Kosten als kleine Kacheln */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.tile{--k:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 11px;min-width:0}
.tile .t-l{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .t-v{font-size:20px;font-weight:700;color:var(--text);margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tile .t-v .u{font-size:12px;font-weight:500;color:var(--muted);margin-left:2px}
.tile .t-s{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.off{opacity:.55}
.k-cost{--k:var(--muted)}.k-earn{--k:var(--ok)}

/* Statuszeile */
.sysline{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12.5px;color:var(--muted)}
.sysline .sl{display:inline-flex;align-items:center;gap:6px}
.sysline .sl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--k,var(--muted))}
.sysline .sl.ok{--k:var(--ok)}.sysline .sl.bad{--k:var(--bad)}.sysline .sl.warn{--k:var(--warn)}
.sysline button{margin-left:auto}
.chart24{height:240px}
main.wide + .app-footer{max-width:1520px}
/* Energiesteuerung */
.ctl-order{display:flex;flex-direction:column;gap:6px;max-width:420px;margin-top:8px}
.ctl-row{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.ctl-row .ctl-n{color:var(--muted);width:20px;font-variant-numeric:tabular-nums}
.ctl-row .ctl-name{flex:1}
#ctl-mode .stage b{font-size:14px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:14px}
.mcard{display:block;color:var(--text);text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;--k:var(--muted)}
.mcard .mh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.mcard .mn{font-weight:700;font-size:16px}
.mcard .mm,.mcard .ms{color:var(--muted);font-size:12.5px}
.mcard .mk{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.mcard .mk b{display:block;font-size:18px;font-variant-numeric:tabular-nums}
.mcard .mk span{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.ctl-title{display:flex;align-items:center;gap:10px}
.ctl-days{display:flex;flex-wrap:wrap;gap:4px 12px}
.form-row input[type=time]{flex:0 0 auto;width:auto}
/* Großansicht einer Grafik (z. B. 24 Stunden) */
dialog.chart-modal{max-width:min(1400px,96vw);width:96vw;max-height:92vh}
.chart-modal .chartbox.chart-big{height:min(68vh,640px)}
.chart-modal .modal-h .row{gap:6px}
.kicker-hint{float:right;text-transform:none;letter-spacing:0;font-size:12px;opacity:0}
.card.click:hover .kicker-hint,.card.click:focus-visible .kicker-hint{opacity:1}
/* Schaltbare Shellys in der Kachel Geräte */
.tile.dev-switch{position:relative}
.tile .t-sw{position:absolute;top:8px;right:8px;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--line);color:var(--badge-text)}
.tile .t-sw.on{background:var(--ok-tint);color:var(--ok)}
.tile.dev-switch .t-l{padding-right:34px}
/* Wallbox lädt: Ladebalken in der Zapfsäule (Animation in flow.js) */
.node-svg-ico .wb-charge{fill:currentColor;stroke:none}
/* Großansicht von Energiefluss, PV-Prognose und Wetter */
.card.click{position:relative}
.big-hint{position:absolute;top:12px;right:14px;float:none}
.inline-hint{float:none;margin-left:8px;font-weight:400;font-size:12px;color:var(--muted)}
.big-tiles{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
#dlg-big.flow-big #flow-viz-section{border:0;margin:0;padding:0;cursor:default}
#dlg-big #flow-svg.flow-float{transform:none!important;border:0;box-shadow:none;background:none}
#dlg-big.flow-big #flow-svg{display:block;margin:0 auto;width:auto;max-width:100%;height:calc(92vh - 120px);min-height:320px}
#dlg-big.flow-big .flow-head{justify-content:flex-end;margin:0}
#dlg-big.flow-big .flow-head h2{display:none}
#dlg-big.flow-big .inline-hint{display:none}
.wx-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px;font-variant-numeric:tabular-nums}
.wx-table th{text-align:left;color:var(--muted);font-weight:500;font-size:12.5px;padding:4px 8px;border-bottom:1px solid var(--line)}
.wx-table td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.wx-table .num{text-align:right;white-space:nowrap}
.wx-table td.wx-day{width:28px}
.wx-table td.wx-day svg{width:22px;height:22px}
@media (max-width:600px){.wx-table th:nth-child(3),.wx-table td:nth-child(3),.wx-table th:nth-child(7),.wx-table td:nth-child(7){display:none}}
.acc-table th:nth-child(3),.acc-table td:nth-child(3){display:table-cell}
/* Einrichtung */
a.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
button.mtab{font:inherit;font-weight:600;font-size:14px;cursor:pointer}
button.mtab:disabled{opacity:.55;cursor:default}
button.mtab:disabled:hover{border-color:var(--line)}

/* KNX (Einstellungen > KNX) */
.knx-send-grid,.knx-recv-grid{display:grid;gap:6px;align-items:center}
.surface-row.knx-send-grid,.knx-labels.knx-send-grid{grid-template-columns:minmax(0,2fr) minmax(70px,.8fr) minmax(0,1.5fr) minmax(60px,.6fr) minmax(60px,.6fr) minmax(0,1fr) auto}
.surface-row.knx-recv-grid,.knx-labels.knx-recv-grid{grid-template-columns:minmax(0,1.4fr) minmax(70px,.8fr) minmax(0,1.5fr) minmax(50px,.5fr) minmax(0,1.6fr) minmax(0,.9fr) auto}
.knx-labels{font-size:12px;color:var(--muted);margin-bottom:4px}
.knx-val{font-family:var(--font-mono);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.knx-mon-wrap{overflow-x:auto;max-height:340px;overflow-y:auto;border:1px solid var(--line);border-radius:8px}
.knx-mon{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.knx-mon th{position:sticky;top:0;background:var(--card);text-align:left;font-weight:500;color:var(--muted);padding:5px 8px;border-bottom:1px solid var(--line)}
.knx-mon td{padding:4px 8px;border-top:1px solid var(--line);white-space:nowrap}
.knx-mon tr.out td{color:var(--muted)}
.knx-mon code{font-family:var(--font-mono);font-size:12px}
#knx-state{margin:6px 0 0}
@media (max-width:760px){.knx-labels{display:none}.surface-row.knx-send-grid,.surface-row.knx-recv-grid{grid-template-columns:1fr 1fr;padding-bottom:8px;border-bottom:1px solid var(--line)}}
/* KNX-Seite (/knx): Busmonitor und Gruppenadressen */
.kx-project{display:flex;flex-direction:column;gap:6px;font-size:14px}
.kx-project details summary{cursor:pointer;color:var(--accent);font-weight:600;margin-top:4px}
.kx-tools{margin-top:0}
.kx-tools input[type=search]{flex:1 1 260px;min-width:0}
.kx-table-wrap{overflow:auto;max-height:65vh;border:1px solid var(--line);border-radius:8px;margin-top:6px}
.kx-table-wrap.kx-tall{max-height:75vh}
.kx-table{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.kx-table th{position:sticky;top:0;z-index:1;background:var(--card);text-align:left;font-weight:500;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.kx-table td{padding:4px 8px;border-top:1px solid var(--line);white-space:nowrap;vertical-align:top}
.kx-table td:nth-child(2){white-space:normal;min-width:180px}
#kx-mon td:nth-child(2){white-space:nowrap;min-width:0}
#kx-mon td:nth-child(5){white-space:normal;min-width:160px}
.kx-table tr.out td{color:var(--muted)}
.kx-table tr.kx-group td{background:var(--bg);font-weight:600;color:var(--text);padding-top:8px}
.kx-table code{font-family:var(--font-mono);font-size:12px}
.kx-table a.kx-ga{color:inherit;text-decoration:none;border-bottom:1px dotted var(--muted)}
.kx-v{font-family:var(--font-mono);font-size:12px;font-weight:600}
.kx-objs{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:normal}
.kx-table .badge{font-size:11px;padding:1px 7px;margin-left:4px}
.kx-write input{flex:1 1 160px;min-width:0}
.kx-write #kx-w-val{flex:2 1 200px}
#kx-hist-tools{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.kx-btns{white-space:nowrap}

/* Einstellungen > KNX > Senden: Liste aller Werte mit Adressfeld */
.knx-send-tools{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:4px 0 10px}
.knx-send-tools input[type=search]{flex:1 1 240px;max-width:360px}
.knx-sgroup{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;padding:0 10px}
.knx-sgroup>summary{cursor:pointer;padding:9px 0;font-weight:600}
.knx-sgroup[open]>summary{border-bottom:1px solid var(--line);margin-bottom:4px}
.knx-sv{display:grid;grid-template-columns:minmax(0,1fr) 110px 150px;gap:6px 10px;align-items:center;padding:5px 0 5px 7px;margin-left:-10px;border-left:3px solid transparent}
.knx-sv+.knx-sv{border-top:1px dashed var(--line)}
.knx-sv.chg{border-left-color:var(--accent)}
.knx-sv[hidden]{display:none}
.knx-sv .ks-cur{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.knx-sv .ks-ga{width:100%;min-width:0;padding:5px 6px;font-size:13px}
.knx-sv .ks-more{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12.5px;color:var(--muted);padding-bottom:3px}
.knx-sv .ks-more[hidden]{display:none}
.knx-sv .ks-more select,.knx-sv .ks-more input{padding:4px 6px;font-size:12.5px}
.knx-sv .ks-more input{width:80px}
@media (max-width:560px){.knx-sv{grid-template-columns:minmax(0,1fr) 120px}.knx-sv .ks-cur{display:none}}

/* Einstellungen > System */
.sys-tiles{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.sys-tiles .v .u{font-size:14px;color:var(--muted);font-weight:400}
.sys-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin:6px 0 4px}
.sys-bar i{display:block;height:100%;background:var(--ok)}
.sys-bar.warn i{background:var(--warn)}.sys-bar.bad i{background:var(--bad)}
.sys-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:4px 22px}
.sys-table{width:100%;border-collapse:collapse;font-size:13.5px}
.sys-table th{text-align:left;color:var(--muted);font-weight:500;padding:5px 10px 5px 0;vertical-align:top;white-space:nowrap;width:1%}
.sys-table td{padding:5px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.sys-table th{border-bottom:1px solid var(--line)}

/* ---------- Kopfzeile: ab 900 px die Seiten als Leiste, darunter alles im Burger-Menü ---------- */
.topnav{display:none;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex:1 1 auto}
.topnav a[hidden]{display:none}
.topnav a[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
@media (min-width:900px){.topnav{display:flex}.navmenu{margin-left:0}.navmenu .badges a.badge.nav.page{display:none}}
/* ---------- Burger-Menü der Kopfzeile: Seiten und Bereiche der Einstellungen in einem Menü ---------- */
.navmenu{position:relative}
/* Burger immer rechts; auf schmalen Bildschirmen in der ersten Zeile neben dem Titel, Uhr darunter */
.navmenu{margin-left:auto}
@media (max-width:600px){header .brand{order:1;min-width:0}header .navmenu{order:2}header .clock{order:3;flex-basis:100%}}
.burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:36px;padding:0;border-radius:10px;position:relative}
.burger svg,.navsub-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.burger:hover{border-color:var(--accent)}
.burger:focus-visible,.navsub-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.navmenu.open .burger{border-color:var(--accent)}
.burger-dot{position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--warn)}
.burger-dot.dirty{background:var(--accent)}
.navmenu .badges{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:60;flex-direction:column;flex-wrap:nowrap;gap:2px;
  width:max-content;min-width:230px;max-width:calc(100vw - 32px);max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--shadow-tip)}
.navmenu.open .badges{display:flex}
.navmenu .badges .badge{display:block;border-radius:8px;background:none;color:var(--text);padding:9px 12px;font-size:14px;font-weight:600;white-space:nowrap}
.navmenu .badges a.badge.nav:hover,.navmenu .badges a.badge.nav:focus-visible{background:var(--accent-tint);color:var(--text);outline:none}
.navmenu .badges a.badge.nav[aria-current="page"]{color:var(--text);box-shadow:inset 3px 0 0 var(--accent)}
.navmenu .badges .badge.user{color:var(--muted);font-weight:500;border-top:1px solid var(--line);border-radius:0;margin-top:4px;padding-top:10px}
.navmenu .badges .badge.warn{color:var(--warn)}
/* Einstellungen mit Untermenü: Kopf (Link + Auf/Zu) und Bereiche in Gruppen */
.navgroup{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:4px 0;padding:4px 0}
.navgroup-head{display:flex;align-items:center;gap:4px}
.navgroup-head .badge{flex:1}
.navsub-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:34px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted)}
.navsub-toggle:hover{background:var(--accent-tint);color:var(--text)}
.navsub-toggle svg{transition:transform .15s}
.navgroup.open .navsub-toggle svg{transform:rotate(180deg)}
.navsub{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 6px;padding:2px 0 4px}
.navgroup.open .navsub{display:grid}
@media (max-width:420px){.navsub{grid-template-columns:minmax(0,1fr)}}
.navsub-group{display:flex;flex-direction:column;gap:1px;min-width:0}
.navsub-title{color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:8px 12px 3px}
.navmenu .badges .navsub a.badge{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;font-size:13.5px;font-weight:500}
.navmenu .badges .navsub a.badge[hidden]{display:none}
.navmenu .badges .navsub a.badge.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.navsub a.dirty::after{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.navsub a.dirty.on::after{background:var(--on-accent)}
/* Einstellungen: aktueller Bereich neben dem Titel */
.crumb{color:var(--muted);font-weight:500}
.crumb:not(:empty)::before{content:"·";margin:0 7px}
@media (prefers-reduced-motion:reduce){.navsub-toggle svg{transition:none}}
/* Steuerung: Zielladen der Wallbox in der Karte, Dialog „Akku ins Netz entladen“ */
.ctl-target{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13.5px}
.ctl-target input[type=number]{width:72px;padding:4px 6px}
.ctl-target input[type=time]{padding:4px 6px}
.ctl-target-f{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.ctl-target-f.off{opacity:.55}
.ctl-target-h{flex-basis:100%}
#dis-dialog{max-width:520px}
#dis-dialog .note{margin:10px 0 0}
.dis-confirm{margin-top:12px;font-weight:600}
.pv-list{list-style:none;margin:12px 0 4px;padding:0;font-size:14px}
.pv-list li{padding:6px 0;border-bottom:1px solid var(--line)}
.pv-list li:last-child{border-bottom:0}
.ctl-hl{list-style:none;margin:6px 0 10px;padding:0}
.ctl-hl li{display:grid;grid-template-columns:minmax(150px,max-content) 1fr;gap:4px 12px;align-items:start;padding:7px 0;border-bottom:1px solid var(--line)}
.ctl-hl li:last-child{border-bottom:0}
.ctl-hl-tag{grid-row:1/3;align-self:start;justify-self:start;font-size:12px;line-height:1.3;padding:2px 8px;border-radius:999px;background:var(--accent-tint);color:var(--text);white-space:nowrap}
.ctl-hl b{grid-column:2}
@media (max-width:600px){.ctl-hl li{grid-template-columns:1fr}.ctl-hl-tag{grid-row:auto}.ctl-hl b{grid-column:auto}}

/* Einstellungen: Startseite mit Kacheln je Bereich */
.start-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:6px 0 14px}
.start-tile{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--text);background:var(--bg)}
.start-tile:hover{border-color:var(--accent)}
.start-tile b{display:block;font-size:14.5px;margin-bottom:3px}
.start-tile .st-s{display:block;font-size:12.5px;color:var(--muted);line-height:1.35}
.start-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;background:var(--muted)}
.start-dot.ok{background:var(--ok)}.start-dot.warn{background:var(--warn)}.start-dot.off{background:var(--line)}
#start-tiles h3{margin:14px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
/* Suche und ausgeblendete Eintraege im Einstellungsmenue */
.navsub-group[hidden]{display:none}
.navsub a.nomatch,.navsub-group.nomatch{display:none}
.navsearch{grid-column:1/-1}
.navsearch input{width:100%;font:inherit;font-size:13.5px;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.navsearch input::placeholder{color:var(--muted)}
/* Hilfeknopf je Einstellungsbereich (springt in die Anleitung) */
.help-btn{margin-left:8px;vertical-align:middle;font-weight:600}
/* Untere Leiste auf dem Handy: die wichtigsten Seiten in Daumenreichweite (oben bleibt das ganze Menue) */
.tabbar{display:none}
@media (max-width:700px){
  body.has-tabbar{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--card);border-top:1px solid var(--line);padding:0 max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .tabbar a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;height:48px;padding:2px 1px 0;font-size:clamp(9.5px,2.5vw,12.5px);line-height:1.5;white-space:nowrap;overflow:hidden;font-weight:600;color:var(--muted);text-decoration:none}
  .tabbar a:hover{color:var(--text)}
  .tabbar a{border-radius:10px}
  .tabbar a[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
  .tabbar a:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
  .tabbar a[hidden]{display:none}
  body.has-tabbar .bar{bottom:calc(54px + env(safe-area-inset-bottom))}
}
/* Knopf unten rechts: erscheint beim Nach-unten-Scrollen und bringt ganz nach oben */
.to-top{position:fixed;right:16px;bottom:16px;z-index:14;width:44px;height:44px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--accent);color:var(--on-accent)}
.to-top:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:700px){body.has-tabbar .to-top{bottom:calc(70px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}

/* Wallbox manuell laden */
.wb-kw{font-variant-numeric:tabular-nums;font-weight:700}
#dlg-wb .statebar{margin-bottom:12px}

/* Gerätesuche (Einstellungen > Zusatzgeräte): je Treffer eine Zeile, die umbricht statt über die Karte hinauszuragen */
.scan-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:9px 0;border-bottom:1px solid var(--line)}
.scan-info{flex:1 1 240px;min-width:0;overflow-wrap:anywhere}
.scan-row select{flex:1 1 240px;min-width:0;max-width:100%}
.scan-row button{flex:0 0 auto}
.scan-known{margin-top:8px}.scan-known summary{cursor:pointer;color:var(--muted);font-size:13px;padding:4px 0}

/* Geräte-Karte der Übersicht: bei mehr als 5 Kachelreihen scrollt sie (siehe limitDeviceTiles in dashboard.html) */
.dev-kicker{display:flex;align-items:center;justify-content:space-between;gap:8px}
#dev-tiles.dev-scroll{overflow-y:auto;overscroll-behavior:contain;padding:2px 6px 2px 2px;margin-right:-4px}
#dev-card.click .dev-kicker{cursor:pointer}
#dlg-dev .tiles{max-height:none;overflow:visible}
#dev-card.click .tile:not(.click){cursor:default}
/* Einstellungen > Zusatzgeraete: Erreichbarkeit */
.dev-summary{margin:0 0 8px}
.dev .dev-h .badge{margin-left:6px;vertical-align:middle}
.dev-err{color:var(--bad)}