/* PV-Portal: Kacheloberflaeche, Standard hell, dunkel waehlbar. Akzentfarbe kommt aus theme.js (--accent, --accent-text, --on-accent). */
:root{
  --bg:#eef1f5;--tile:#ffffff;--kopf:#ffffff;--unterkopf:#e4e9ef;--text:#1b2430;--mut:#5b6879;--line:#d3dae3;--line2:#e5e9ee;
  --accent:#0e7490;--accent-text:#0e7490;--on-accent:#ffffff;
  --gruen:#1f9d55;--rot:#d64545;--blau:#2b7de9;--orange:#d97706;--grau:#8b95a1;
  --btn:#f4f6f9;--btn-hover:#e8ecf2;--btn-line:#b9c2cd;--input:#ffffff;--mini:#f1f4f8;--zeile-hover:#f1f5f9;--schatten:0 1px 3px #1b243020;--tip:#ffffff;
  --c-erz:#f2a50d;--c-ged:#2f9e5a;--c-unged:#d64545;--c-netz:#2b7de9;--c-akku:#8b5cf6;--c-soc:#0b7285;--c-soll:#d6336c;
  --c-t1:#e8590c;--c-t2:#1c7ed6;--c-t3:#2f9e44;--c-verbrauch:#1971c2;--c-summe:#862e9c;
  --gitter:#dde2e9;--achse0:#8e99a6;--ax:#5b6879;--icon:#4b5868;--fluss-basis:#c9d1db;--ring-bg:#e3e8ee;--griff:none;
  color-scheme:light}
:root[data-theme=dark]{
  --bg:#1b2027;--tile:#252b34;--kopf:#151a20;--unterkopf:#1f252d;--text:#e8ecf1;--mut:#9aa6b4;--line:#3a434f;--line2:#313944;
  --gruen:#3ecf7a;--rot:#f26a6a;--blau:#5aa2ff;--orange:#f0a030;--grau:#7d8895;
  --btn:#2f3742;--btn-hover:#3a4350;--btn-line:#4a5461;--input:#1c2128;--mini:#2d343e;--zeile-hover:#2d343e;--schatten:0 1px 3px #0007;--tip:#1c2128;
  --c-erz:#ffc531;--c-ged:#3ecf7a;--c-unged:#f26a6a;--c-netz:#5aa2ff;--c-akku:#a98bff;--c-soc:#66d9e8;--c-soll:#ff6fa3;
  --c-t1:#ff8a4c;--c-t2:#5aa8ff;--c-t3:#51cf66;--c-verbrauch:#5aa2ff;--c-summe:#d28bff;
  --gitter:#36404b;--achse0:#7d8895;--ax:#a7b2bf;--icon:#cfd7e0;--fluss-basis:#434d5a;--ring-bg:#3a434f;--griff:invert(.85);
  color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
button,select,input,textarea{font:inherit;color:inherit}
button{padding:6px 14px;border:1px solid var(--btn-line);background:var(--btn);border-radius:6px;cursor:pointer}button:hover{background:var(--btn-hover)}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}button.primary:hover{filter:brightness(1.08)}
button.danger{background:#c8322b;border-color:#c8322b;color:#fff;font-weight:700}
button:disabled{opacity:.45;cursor:not-allowed}button.mini{padding:1px 8px;font-size:12px;border-radius:5px}
button.an{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
input,select,textarea{padding:5px 8px;border:1px solid var(--btn-line);border-radius:6px;background:var(--input);color:var(--text)}
input:disabled,select:disabled,textarea:disabled{opacity:.7;cursor:not-allowed}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:15px;height:15px;padding:0}
input[type=color]{padding:0;width:42px;height:30px;cursor:pointer}
a{color:var(--accent-text)}

/* Kopf: helle Leiste mit Reitern, darunter die Pfadzeile */
.kopf{display:flex;align-items:center;gap:18px;padding:0 16px;height:46px;background:var(--kopf);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.logo{white-space:nowrap;font-weight:700;letter-spacing:.2px;cursor:pointer;color:var(--text);display:flex;align-items:center;gap:8px}
.logo:before{content:"";width:10px;height:10px;border-radius:3px;background:var(--accent);display:inline-block}
nav{display:flex;height:100%}nav a{color:var(--mut);text-decoration:none;padding:0 16px;display:flex;align-items:center;height:100%;border-bottom:3px solid transparent}
nav a:hover{color:var(--text)}nav a.aktiv{color:var(--accent-text);font-weight:600;border-bottom-color:var(--accent)}
.rechts{margin-left:auto;display:flex;align-items:center;gap:14px}.datenstand{color:var(--mut);font-size:12.5px}.who{color:var(--mut);font-size:12.5px}
.unterkopf{display:flex;align-items:center;gap:10px;padding:2px 16px;min-height:38px;background:var(--unterkopf);color:var(--accent-text);font-size:13px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.unterkopf a{color:var(--accent-text);text-decoration:none}.unterkopf .sep{color:var(--mut)}.unterkopf .platz{flex:1}.unterkopf .anlname{font-weight:600}
.unterkopf button,.unterkopf summary{padding:3px 12px;border:1px solid var(--btn-line);background:var(--btn);border-radius:6px;color:var(--text);cursor:pointer;list-style:none;font-size:13px}
.unterkopf .extras{display:flex;gap:8px;align-items:center}
.hinweis{color:var(--gruen);font-size:12.5px}
.kachelmenu{position:relative}.kachelmenu .menu{position:absolute;right:0;top:30px;background:var(--tile);border:1px solid var(--btn-line);border-radius:6px;padding:8px 10px;z-index:30;min-width:270px;display:grid;gap:5px;box-shadow:var(--schatten)}
.kachelmenu .menu label{display:flex;gap:8px;color:var(--text);font-size:13px;align-items:center}

.seite{padding:10px 12px;max-width:1500px;margin:0 auto}.seite.breit{max-width:none}.seite.schmal{max-width:1000px}
.panel{background:var(--tile);border-radius:8px;padding:14px 16px;box-shadow:var(--schatten);margin-bottom:12px}
.kopfzeile{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}.kopfzeile h2,.panel h2{font-size:15px;color:var(--accent-text);margin:0 0 6px;font-weight:600}.kopfzeile h2{margin:0}
.panel h3{font-size:13.5px;margin:14px 0 6px;color:var(--text)}
.login{max-width:340px;margin:12vh auto}.login input{width:100%;margin-bottom:10px}
.err{color:var(--rot);margin:6px 0}.mut{color:var(--mut);font-size:12.5px}.klein{font-size:11.5px;margin-top:6px}.gut{color:var(--gruen)}
table{width:100%;border-collapse:collapse}th{color:var(--mut);font-weight:600;text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);font-size:12.5px}td{padding:6px 8px;border-bottom:1px solid var(--line2)}
tr.klick{cursor:pointer}tr.klick:hover{background:var(--zeile-hover)}.r{text-align:right}th.r{text-align:right}
.chip{display:inline-block;padding:1px 10px;border-radius:99px;font-size:11.5px;font-weight:700;color:#fff}.chip.on{background:#1f8a4a}.chip.off{background:#b03030}.chip.warn{background:#b3790a}

/* Kacheln (GridStack) */
.grid-stack-item-content{background:var(--tile);border-radius:8px;display:flex;flex-direction:column;overflow:hidden !important;box-shadow:var(--schatten)}
.tile-head{display:flex;align-items:center;gap:8px;padding:7px 12px 3px;color:var(--accent-text);font-size:13.5px;min-height:34px;flex:none;user-select:none}
.tile-titel{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-aktion{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text)}
.tile-aktion input[type=date],.tile-aktion select{padding:1px 6px;font-size:12px}
.zaehler{background:#c8322b;color:#fff;border-radius:99px;font-size:11px;font-weight:700;padding:0 7px}.zaehler:empty{display:none}.navtext{min-width:110px;text-align:center}
.tile-body{flex:1;min-height:0;overflow:auto;padding:2px 12px 10px;position:relative}
.tile-body.col{display:flex;flex-direction:column;overflow:hidden}.viewbar{flex:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.viewbar:empty{display:none}.viewbar.platz{margin-bottom:4px}.viewbox{flex:1;min-height:0;position:relative;overflow:hidden}
.seg{display:inline-flex;gap:0}.seg button{border-radius:0;margin-left:-1px}.seg button:first-child{border-radius:5px 0 0 5px;margin-left:0}.seg button:last-child{border-radius:0 5px 5px 0}
.edit .grid-stack-item-content{outline:2px dashed var(--accent);outline-offset:-2px}.edit .tile-head{cursor:move}
.grid-stack>.grid-stack-item>.ui-resizable-handle{filter:var(--griff)}
.leer{color:var(--mut);padding:18px 4px;text-align:center}.platzhalter{display:grid;place-items:center;gap:6px;height:100%;text-align:center;color:var(--mut)}

/* Diagramme */
.chartwrap{position:relative}svg text.ax{fill:var(--ax);font-size:11px}svg text.hinweistext{fill:var(--mut);font-size:11px}.gitter{stroke:var(--gitter);stroke-width:1}.achse0{stroke:var(--achse0);stroke-width:1.2}.marke{stroke:var(--mut);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.tip{position:absolute;pointer-events:none;background:var(--tip);border:1px solid var(--btn-line);border-radius:6px;padding:6px 10px;font-size:12px;box-shadow:0 2px 8px #0003;display:none;z-index:5;white-space:nowrap;color:var(--text)}.tip .tt{color:var(--accent-text);font-weight:600}
.legende{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12px;margin-top:6px;color:var(--text)}.leg i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px;vertical-align:-1px}.leg i.linie{height:3px;vertical-align:3px}
.leg.schalter{cursor:pointer;opacity:.5}.leg.schalter.an{opacity:1}.balken:hover{filter:brightness(1.12)}.sollinie{fill:none;stroke:var(--c-soll);stroke-width:2.2;stroke-dasharray:6 4}

/* Energiefluss */
.fluss-body{display:flex;flex-direction:column;padding-bottom:6px}.fluss-svg{flex:1;min-height:0}.fluss{width:100%;height:100%;display:block}
.fw{fill:var(--text);font-size:27px;font-weight:600;paint-order:stroke;stroke:var(--tile);stroke-width:5px}.fu{fill:var(--mut);font-size:14px;paint-order:stroke;stroke:var(--tile);stroke-width:4px}.soc{fill:var(--text);font-size:13px;font-weight:600}
.fl{fill:none;stroke-linecap:round}.fl.basis{stroke:var(--fluss-basis);stroke-width:2}.fl.aktiv{stroke-width:5;stroke-dasharray:0.1 14;animation:fluss 1s linear infinite}.fl.aktiv.rev{animation-direction:reverse}
@keyframes fluss{to{stroke-dashoffset:-14.1}}
@media (prefers-reduced-motion:reduce){.fl.aktiv{animation:none;stroke-dasharray:none;stroke-width:3}}
.fluss-liste{flex:none;display:grid;gap:3px;margin-top:6px}.fz.sub{padding-left:10px;font-size:11.5px;text-transform:none}.fz-hinweis{margin-top:4px;font-size:11px;line-height:1.35}.fz{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line2);padding:3px 0;font-size:12.5px;text-transform:uppercase;letter-spacing:.3px}
.badge{padding:1px 12px;border-radius:99px;font-size:11px;font-weight:700;color:#fff;min-width:118px;text-align:center}.badge.gelb{background:#d6900a}.badge.gruen{background:#2f9e44}.badge.rot{background:#c8322b}.badge.blau{background:#2f7fd0}.badge.orange{background:#d98412}.badge.grau{background:#7b8591}

/* Tabellen- und Wertekacheln */
.kv{font-size:13px}.kv td{padding:5px 6px}.fehler-tab td,.fehler-tab th{white-space:nowrap;font-size:12px;padding:5px 5px}.fehler-tab td:last-child{white-space:normal;min-width:150px}.erledigt{opacity:.55}
.alarm{font-size:16px}.alarm.kritisch{color:var(--rot)}.alarm.wichtig{color:var(--orange)}.alarm.warnung{color:#b78103}.alarm.info{color:var(--blau)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:8px}.mini-kachel{background:var(--mini);border-radius:6px;padding:7px 10px}.mini-kachel .l{font-size:11.5px;color:var(--mut)}.mini-kachel .w{font-size:20px;font-weight:600}.mini-kachel .u{font-size:12px;color:var(--mut);font-weight:400}
.ringe{display:flex;gap:26px;justify-content:center;margin-top:12px}.ring{text-align:center}.ringzahl{fill:var(--text);font-size:14px;font-weight:600}
.eegzeile{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;word-break:break-all}

/* Formulare (Einstellungen, Export, Teststeuerung) */
.card{background:transparent;border:0;padding:0;margin:0}.card>h2{display:none}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:8px}.row label,.fld{font-size:12px;color:var(--mut);display:flex;flex-direction:column;gap:2px}
.fld input,.fld select,.fld textarea{font-size:13.5px;color:var(--text)}.fld.breit{flex:1;min-width:220px}.fld input.zahl{width:110px}.fld input.kurz{width:84px}
.warnbox{border:1px solid var(--orange);background:#f59e0b1c;border-radius:6px;padding:9px 11px;font-size:12.5px;margin-bottom:10px}.status{font-weight:600}
details summary{cursor:pointer;color:var(--accent-text)}.bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden}.bar>i{display:block;height:100%;background:var(--gruen)}
.tab-eingabe td{padding:4px 6px;vertical-align:middle}.tab-eingabe input{width:100%}.tab-eingabe input.kurz{width:84px}
.monate-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:8px 0}
.swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;padding:0;box-shadow:0 0 0 1px var(--btn-line)}.swatch.an{border-color:var(--text)}
.vorschau{border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-top:10px;background:var(--tile);max-width:380px}.vorschau .t{color:var(--accent-text);font-weight:600}

@media (max-width:820px){.bearbeiten,.extras,.datenstand{display:none !important}.kopf{gap:8px;padding:0 10px}.who{display:none}.tile-body{padding:2px 8px 8px}.monate-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tab-eingabe{display:block;overflow-x:auto}}
.tab-eingabe th{font-size:11.5px;color:var(--mut);font-weight:500;text-align:left;padding:2px 6px}.tab-eingabe td.mitte{text-align:center}.tab-eingabe select{width:100%;font-size:13px}
.regel{border-top:1px solid var(--line);margin-top:10px;padding-top:2px}.chk{flex-direction:row !important;align-items:center;gap:6px !important;font-size:13px !important;color:var(--text) !important}

.foto-box{flex:1;min-height:0;display:grid;place-items:center;overflow:hidden}.foto-bild{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}.foto-leiste{flex:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:6px}