/* ===================================================================
   SRZSTATS - srz-ui.css
   Ablegen unter static/css/srz-ui.css, Schriften unter static/fonts/.
   Kein externer Abruf - funktioniert auch ohne Internetverbindung.

   Sechs Regeln:
     1. Eine Schrift. Messwerte tragen .val (tabellarische Ziffern).
     2. Eine Farbe bedeutet eine Sache. Bedienoberflaeche bleibt neutral.
     3. Kleinste Schriftgroesse 10,5 px, nur fuer Etiketten.
     4. Alles Antippbare mobil mindestens 44 x 44 px.
     5. Panels verschachteln maximal eine Ebene.
     6. Dunkelmodus ist ein Tokentausch. Kein !important ausser
        im prefers-reduced-motion-Block.

   Wichtig: button { padding: 0 } steht im Reset. Ohne das gibt Chrome
   jedem Button Innenabstand und quetscht z. B. Schalter zusammen.
   =================================================================== */

@font-face{
  font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/poppins-500.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/poppins-700.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/poppins-800.woff2') format('woff2');
}

/* -------------------------------------------------------------------
   SRZSTATS · srz-ui.css · v2.0 · Juli 2026
   -------------------------------------------------------------------
   Gestaltungssprache „Werkbank“:
   · Randlos. Kein zentrierter Kasten mit Schatten drumherum.
   · Konsolenband oben – der Live-Zustand der Seite, vollflächig,
     abgeschlossen durch eine Messskala. Darunter die Arbeitsfläche.
   · Flächen werden durch Haarlinien getrennt, nicht durch Schatten.
     Schatten gibt es nur für Dinge, die wirklich schweben.
   · Messskalen-Motiv wiederholt sich: Konsolenkante, Panelkopf,
     Füllstände, Tagesband. Das Haus ist ein Messgerät.
   · Zahlen bekommen Platz. Der Leitwert einer Seite ist 46 px Mono.
   ------------------------------------------------------------------- */

:root {
  /* -- Flächen ----------------------------------------------- */
  --canvas:     #F7F8FA;
  --console:    #FFFFFF;
  --surface:    #FFFFFF;
  --surface-2:  #F4F6F8;
  --inset:      #EDF0F4;
  --hairline:   #E3E7ED;
  --hairline-2: #CBD2DC;
  --tick:       #C2CAD6;

  --ink:        #0B0F14;
  --ink-2:      #57616E;
  --ink-3:      #8A94A2;

  /* -- Marke ------------------------------------------------- */
  --brand:        #0284C7;   /* interaktiv, kontrastsicher auf Weiß */
  --brand-hover:  #0369A1;
  --brand-bright: #38BDF8;   /* Logo-Blitz und Akzente, wie gehabt */
  --brand-deep:   #075985;
  --brand-wash:   #E6F5FE;
  --brand-line:   #A5DDF7;

  /* -- Domänen. Eine Farbe = eine Bedeutung. ---------------- */
  --pv:    #D98200;  --pv-wash:    #FDF3E4;
  --heat:  #D14E12;  --heat-wash:  #FCEEE7;
  --batt:  #08877A;  --batt-wash:  #E3F4F2;
  --grid:  #CE2444;  --grid-wash:  #FCE9ED;
  --feed:  #12843F;  --feed-wash:  #E5F3EA;
  --clima: #0E7490;  --clima-wash: #E2F3F6;
  --water: #4F53D0;  --water-wash: #EAEBFB;
  --proj:  #6F30CB;  --proj-wash:  #F0E9FB;

  --ok:   #12843F;  --ok-wash:   #E5F3EA;
  --warn: #A66A00;  --warn-wash: #FCF2DF;
  --crit: #BC1B39;  --crit-wash: #FCE9ED;

  /* -- Geometrie --------------------------------------------- */
  --r-xs: 4px; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --sh-pop: 0 12px 32px -8px rgba(11,15,20,.18), 0 0 0 1px rgba(11,15,20,.07);
  --sh-lift: 0 4px 14px -4px rgba(11,15,20,.12);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  --font-ui:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-data: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --tap: 44px;
  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t-med:  240ms cubic-bezier(.32,.72,0,1);

  --rail-w: 68px;
  --rail-open: 216px;
  --topbar-h: 56px;
  --tabbar-h: 40px;
}

[data-theme="dark"] {
  --canvas:     #080A0E;
  --console:    #0F1319;
  --surface:    #12171E;
  --surface-2:  #161C25;
  --inset:      #1B222C;
  --hairline:   #212936;
  --hairline-2: #333D4D;
  --tick:       #3A4553;

  --ink:        #EEF2F7;
  --ink-2:      #97A2B1;
  --ink-3:      #66717F;

  --brand:        #38BDF8;
  --brand-hover:  #7DD3FC;
  --brand-bright: #38BDF8;
  --brand-deep:   #0EA5E9;
  --brand-wash:   #0B2534;
  --brand-line:   #17455E;

  --pv:    #F5A623;  --pv-wash:    #291F0E;
  --heat:  #F97B45;  --heat-wash:  #2A1810;
  --batt:  #21C7B4;  --batt-wash:  #0C2725;
  --grid:  #F76A85;  --grid-wash:  #2B141B;
  --feed:  #3ED47A;  --feed-wash:  #0F2618;
  --clima: #35B4F0;  --clima-wash: #0B2231;
  --water: #9DA0F7;  --water-wash: #191B34;
  --proj:  #B98BF6;  --proj-wash:  #201431;

  --ok:   #3ED47A;  --ok-wash:   #0F2618;
  --warn: #F5A623;  --warn-wash: #291F0E;
  --crit: #F76A85;  --crit-wash: #2B141B;

  --sh-pop: 0 16px 40px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07);
  --sh-lift: 0 6px 18px -6px rgba(0,0,0,.55);
}

/* --- RESET --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.5;
  color: var(--ink); background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,p,figure { margin: 0; }
button {
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
  padding: 0;                 /* Chrome gibt Buttons sonst 1px 6px - das quetscht Schalter */
  -webkit-appearance: none; appearance: none;
}
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
::selection { background: var(--brand-wash); color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 5px; border: 3px solid var(--canvas); }

/* --- TYPOGRAFIE ---------------------------------------------- */
.t-h1  { overflow-wrap: anywhere; font-size: 21px; line-height: 1.22; font-weight: 600; letter-spacing: -.018em; }
.t-h2  { font-size: 16px; line-height: 1.3;  font-weight: 600; letter-spacing: -.012em; }
.t-h3  { font-size: 14px; line-height: 1.35; font-weight: 600; letter-spacing: -.008em; }
.t-body{ font-size: 14px; line-height: 1.55; }
.t-sm  { font-size: 13px; line-height: 1.45; }
.t-cap { font-size: 12px; line-height: 1.4; }
.t-eyebrow {
  font-size: 10.5px; line-height: 1.2; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3);
}
.dim { color: var(--ink-2); } .dim2 { color: var(--ink-3); }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Messwerte: immer Mono, immer Tabellenziffern. */
.val {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -.03em;
}
.val-hero { font-size: 42px; font-weight: 600; line-height: .95; letter-spacing: -.045em; }
.val-xl   { font-size: 26px; font-weight: 600; line-height: 1.05; }
.val-lg   { font-size: 21px; font-weight: 600; line-height: 1.1; }
.val-md   { font-size: 16px; font-weight: 600; line-height: 1.2; }
.val-sm   { font-size: 13px; font-weight: 500; line-height: 1.3; }
.unit { font-family: var(--font-ui); font-weight: 500; color: var(--ink-3); letter-spacing: -.01em; }
.val-hero .unit { font-size: 17px; margin-left: 5px; }
.val-xl .unit { font-size: 13px; margin-left: 4px; }
.val-lg .unit { font-size: 12px; margin-left: 3px; }
.val-md .unit { font-size: 11.5px; margin-left: 3px; }
.val-sm .unit { font-size: 11px; margin-left: 2px; }

/* ---------------------------------------------------------------
   MESSSKALA · das wiederkehrende Motiv
   Jede fünfte Marke ist länger, wie an einem Messschieber.
   --------------------------------------------------------------- */
.tickrule {
  height: 9px; flex-shrink: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px 8px);
  background-size: 100% 9px, 100% 4px;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
  opacity: .55;
}
.tickrule--sm { height: 6px; background-size: 100% 6px, 100% 3px; width: 44px; opacity: .5; }
.tickrule--top { transform: scaleY(-1); }

/* --- APP-SHELL -----------------------------------------------
   WICHTIG: Ein Container-Query kann seinen eigenen Container nicht
   abfragen. Deshalb ist .app ein Flex-Container und die Schiene
   liegt absolut darüber – die Hauptspalte braucht dann nur noch
   ihren margin-left zu verlieren, und das ist ein Nachfahre.
   -------------------------------------------------------------- */
.app {
  container-type: inline-size; container-name: app;
  position: relative;
  display: flex;
  height: 100%; background: var(--canvas); overflow: hidden;
}

/* -- Schiene -------------------------------------------------- */
.rail {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 45;
  width: var(--rail-w);
  background: var(--surface); border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; align-items: stretch;
  padding: var(--s3) 0;
  transition: width var(--t-med);
}
.rail:hover, .rail:focus-within { width: var(--rail-open); box-shadow: var(--sh-pop); }
.rail__brand {
  display: flex; align-items: center; gap: 11px;
  padding: 0 17px var(--s5); overflow: hidden;
}
.rail__mark {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  color: var(--brand-deep);
}
[data-theme="dark"] .rail__mark { color: var(--brand-bright); }
.rail__word b { color: var(--ink); }
.rail__word span { color: var(--brand); }
.rail__word { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; opacity: 0; transition: opacity 140ms; }
.rail:hover .rail__word, .rail:focus-within .rail__word { opacity: 1; }
.rail__word b { font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.rail__word span { font-family: var(--font-data); font-size: 8.5px; letter-spacing: .24em; color: var(--ink-3); margin-top: 3px; }

.rail__nav { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.rail__sep { height: 1px; background: var(--hairline); margin: var(--s3) 18px; }
.rnav {
  position: relative; display: flex; align-items: center; gap: 15px;
  height: 42px; padding: 0 22px; white-space: nowrap;
  color: var(--ink-2); font-size: 13.5px; font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
}
.rnav::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 2px 2px 0; background: transparent; transition: background var(--t-fast);
}
.rnav .ic { width: 20px; height: 20px; flex-shrink: 0; }
.rnav__t { opacity: 0; transition: opacity 140ms; }
.rail:hover .rnav__t, .rail:focus-within .rnav__t { opacity: 1; }
.rnav:hover { background: var(--surface-2); color: var(--ink); }
.rnav[aria-current="page"] { color: var(--ink); background: var(--brand-wash); font-weight: 600; }
.rnav[aria-current="page"]::before { background: var(--brand); }
.rnav[aria-current="page"] .ic { color: var(--brand); }
.rnav__dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.rail__foot { margin-top: auto; }
.rnav__av {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-wash); color: var(--brand); border: 1px solid var(--brand-line);
  display: grid; place-items: center; font-size: 9px; font-weight: 700; font-family: var(--font-ui);
}

/* -- Hauptspalte ---------------------------------------------- */
.main {
  flex: 1; min-width: 0; margin-left: var(--rail-w);
  display: flex; flex-direction: column; overflow: hidden; background: var(--canvas);
}

.topbar {
  height: var(--topbar-h); flex-shrink: 0;
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s8);
  background: var(--console); border-bottom: 1px solid var(--hairline);
}
.topbar__burger { display: none; }
.topbar h1 { font-size: 15.5px; font-weight: 600; letter-spacing: -.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__meta {
  display: flex; align-items: center; gap: 7px; padding-left: var(--s3);
  margin-left: var(--s1); border-left: 1px solid var(--hairline);
  font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden;
}
.topbar__act { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------
   KONSOLENBAND · der Live-Zustand der Seite, randlos.
   Das ist der strukturelle Kern: oben Instrument, unten Werkbank.
   --------------------------------------------------------------- */
.console {
  position: relative; max-width: 100%; background: var(--console);
  border-bottom: 1px solid var(--hairline);
  padding: var(--s7) var(--s8) 0;
}
.console__end { margin: var(--s5) calc(var(--s8) * -1) 0; }
.console--tight { padding-bottom: 0; }
.console__row { display: flex; align-items: flex-start; gap: var(--s8); flex-wrap: wrap; }
.console__lead { min-width: 220px; max-width: 100%; }
.console__hero { display: flex; align-items: baseline; gap: var(--s3); margin-top: 10px; flex-wrap: wrap; max-width: 100%; }
.console__side { margin-left: auto; display: flex; gap: var(--s8); flex-wrap: wrap; }
.readout { min-width: 92px; }
.readout__k { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.readout__v { margin-top: 5px; white-space: nowrap; }
.readout--tint .readout__k { color: var(--tint); }

/* Arbeitsfläche */
.work { padding: var(--s7) var(--s8) var(--s10); display: flex; flex-direction: column; gap: var(--s5); max-width: 100%; }
.work--flush { padding-top: var(--s5); }

/* --- SEGMENTE ------------------------------------------------ */
.segs {
  display: flex; align-items: stretch; gap: 0; overflow-x: auto;
  scrollbar-width: none; margin: 0 calc(var(--s8) * -1); padding: 0 var(--s8);
}
.segs::-webkit-scrollbar { display: none; }
.segt {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 2px; margin-right: var(--s6); flex-shrink: 0;
  font-size: 13.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap;
  transition: color var(--t-fast);
}
.segt::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: transparent; transition: background var(--t-fast);
}
.segt:hover { color: var(--ink-2); }
.segt[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.segt[aria-selected="true"]::after { background: var(--brand); }
.segt__n { font-family: var(--font-data); font-size: 11px; color: var(--ink-3); }

/* Kompakte Pillen-Segmente (Zeiträume) */
.seg {
  display: inline-flex; padding: 2px; gap: 1px; flex-shrink: 0;
  background: var(--inset); border-radius: var(--r-sm);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg__btn {
  height: 27px; padding: 0 11px; border-radius: 5px; flex-shrink: 0;
  font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  transition: all var(--t-fast);
}
.seg__btn[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--sh-lift); }

/* --- SCHALTFLÄCHEN ------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 13px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; letter-spacing: -.004em;
  border: 1px solid transparent; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform 70ms;
  -webkit-tap-highlight-color: transparent; flex-shrink: 0;
}
.btn:active { transform: scale(.97); }
.btn .ic { width: 15px; height: 15px; flex-shrink: 0; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); }
[data-theme="dark"] .btn--primary { color: #05080F; }
.btn--soft { background: var(--brand-wash); color: var(--brand); border-color: var(--brand-line); }
.btn--soft:hover { background: color-mix(in srgb, var(--brand-wash) 80%, var(--brand) 10%); }
.btn--line { background: var(--surface); color: var(--ink); border-color: var(--hairline-2); }
.btn--line:hover { background: var(--surface-2); }
.btn--ghost { color: var(--ink-2); }
.btn--ghost:hover { background: var(--inset); color: var(--ink); }
.btn--danger { background: var(--crit-wash); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 22%, transparent); }
.btn--icon { width: 34px; padding: 0; }
.btn--sm { height: 28px; padding: 0 9px; font-size: 12px; }
.btn--sm.btn--icon { width: 28px; }
.btn--lg { height: var(--tap); padding: 0 20px; font-size: 14.5px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .42; pointer-events: none; }

/* --- PANEL · ersetzt „Card“. Haarlinie statt Schatten. ------ */
.panel {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md); display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
}
.panel__head {
  display: flex; align-items: center; gap: 10px;
  padding: 0 var(--s5); height: 44px; flex-shrink: 0;
  border-bottom: 1px solid var(--hairline);
}
.panel__head h3 { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel__head .tickrule--sm { margin-left: 2px; }
.panel__act { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.panel__body { padding: var(--s5); flex: 1; min-width: 0; }
.panel__body--flush { padding: 0; }
.panel__foot {
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s5); min-height: 42px; flex-shrink: 0;
  border-top: 1px solid var(--hairline); background: var(--surface-2);
  font-size: 12px; color: var(--ink-2);
}
a.panel, button.panel { text-align: left; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform 90ms; }
a.panel:hover, button.panel:hover { border-color: var(--hairline-2); box-shadow: var(--sh-lift); }
a.panel:active, button.panel:active { transform: translateY(1px); }
.panel--edge { position: relative; }
.panel--edge::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--tint, var(--brand)); }
/* Fusszeile eines Panels: sichtbarer, zentrierter Knopf */
.panel__foot--btn { padding: 0; background: transparent; border-top: 1px solid var(--hairline); }
.panel__link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 0 var(--s4);
  color: var(--brand); font-weight: 600; font-size: 13px;
  background: var(--surface-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.panel__link:hover { background: var(--brand-wash); color: var(--brand-hover); }
.panel__link .ic { width: 15px; height: 15px; transition: transform var(--t-fast); }
.panel__link:hover .ic { transform: translateX(3px); }

.tint-pv{--tint:var(--pv);--tw:var(--pv-wash)} .tint-heat{--tint:var(--heat);--tw:var(--heat-wash)}
.tint-batt{--tint:var(--batt);--tw:var(--batt-wash)} .tint-grid{--tint:var(--grid);--tw:var(--grid-wash)}
.tint-feed{--tint:var(--feed);--tw:var(--feed-wash)} .tint-clima{--tint:var(--clima);--tw:var(--clima-wash)}
.tint-water{--tint:var(--water);--tw:var(--water-wash)} .tint-proj{--tint:var(--proj);--tw:var(--proj-wash)}
.tint-warn{--tint:var(--warn);--tw:var(--warn-wash)} .tint-ok{--tint:var(--ok);--tw:var(--ok-wash)}
.tint-crit{--tint:var(--crit);--tw:var(--crit-wash)} .tint-brand{--tint:var(--brand);--tw:var(--brand-wash)}

.bic {
  width: 28px; height: 28px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center; background: var(--tw, var(--inset)); color: var(--tint, var(--ink-2));
}
.bic .ic { width: 15px; height: 15px; }

/* --- KENNZAHLEN ---------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.stat { padding: var(--s4) var(--s5); border-right: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.stats > .stat:last-child { border-right: 0; }
.stat__k { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.stat__k .ic { width: 12px; height: 12px; color: var(--tint, var(--ink-3)); }
.stat__d { font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.stat__d .ic { width: 12px; height: 12px; }
.up { color: var(--feed); } .down { color: var(--grid); } .flat { color: var(--ink-3); }

/* --- SPARKLINE ----------------------------------------------- */
.spark { width: 100%; height: 28px; overflow: visible; }
.spark .line { fill: none; stroke: var(--tint, var(--brand)); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark .area { fill: var(--tint, var(--brand)); opacity: .12; stroke: none; }

/* --- CHIPS --------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px;
  border-radius: var(--r-xs); font-size: 11px; font-weight: 600; letter-spacing: .015em;
  background: var(--inset); color: var(--ink-2); white-space: nowrap; flex-shrink: 0;
}
.chip--ok{background:var(--ok-wash);color:var(--ok)} .chip--warn{background:var(--warn-wash);color:var(--warn)}
.chip--crit{background:var(--crit-wash);color:var(--crit)} .chip--feed{background:var(--feed-wash);color:var(--feed)}
.chip--grid{background:var(--grid-wash);color:var(--grid)} .chip--batt{background:var(--batt-wash);color:var(--batt)}
.chip--pv{background:var(--pv-wash);color:var(--pv)} .chip--brand{background:var(--brand-wash);color:var(--brand)}
.chip--heat{background:var(--heat-wash);color:var(--heat)} .chip--proj{background:var(--proj-wash);color:var(--proj)}
.chip__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pulse { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.pulse::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--ok); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.55); opacity: .9 } 100% { transform: scale(1.8); opacity: 0 } }

/* --- ZEILEN -------------------------------------------------- */
.rows { display: flex; flex-direction: column; }
.lrow {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s5); min-height: var(--tap);
  border-bottom: 1px solid var(--hairline); transition: background var(--t-fast); text-align: left; width: 100%;
}
.rows > .lrow:last-child { border-bottom: 0; }
a.row:hover, button.row:hover { background: var(--surface-2); }
.lrow__lead { min-width: 0; flex: 1; }
.lrow__t { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.lrow__s { font-size: 12px; color: var(--ink-3); margin-top: 1px; overflow-wrap: anywhere; }
.lrow__trail { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.lrow__chev { width: 15px; height: 15px; color: var(--ink-3); flex-shrink: 0; }

/* --- TABELLE ------------------------------------------------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tbl { font-size: 13px; }
.tbl th {
  text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); padding: 9px var(--s4); background: var(--surface-2);
  border-bottom: 1px solid var(--hairline); white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.tbl td { padding: 10px var(--s4); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num, .tbl th.num { text-align: right; }
.tbl .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.tbl .stick { position: sticky; left: 0; background: var(--surface); font-weight: 600; z-index: 1; }
.tbl tbody tr:hover .stick { background: var(--surface-2); }
.tbl th.stick { background: var(--surface-2); z-index: 3; }
.tbl tfoot td { padding: 10px var(--s4); background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--hairline-2); }

/* --- FÜLLSTAND & RING ---------------------------------------- */
.meter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.meter__track { height: 6px; border-radius: 3px; background: var(--inset); overflow: hidden; }
.meter__fill { height: 100%; border-radius: 3px; background: var(--tint, var(--brand)); transition: width 700ms cubic-bezier(.32,.72,0,1); }
.meter__scale { display: flex; justify-content: space-between; font-family: var(--font-data); font-size: 9.5px; color: var(--ink-3); }
.ring { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); }
.ring__bg { fill: none; stroke: var(--inset); stroke-width: 8; }
.ring__fg { fill: none; stroke: var(--tint, var(--brand)); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 800ms cubic-bezier(.32,.72,0,1); }
.ring__mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* --- FORMULARE ----------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field__lbl { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.field__req { color: var(--grid); }
.field__hint { font-size: 11.5px; color: var(--ink-3); }
.field__err { font-size: 11.5px; color: var(--crit); font-weight: 600; display: flex; gap: 5px; align-items: flex-start; }
.field__err .ic { width: 12px; height: 12px; flex-shrink: 0; margin-top: 2px; }
.inp {
  display: flex; align-items: center; background: var(--surface);
  border: 1px solid var(--hairline-2); border-radius: var(--r-sm);
  min-height: var(--tap); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.inp:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.inp input, .inp select, .inp textarea {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  padding: 10px 12px; font-size: 15px;  /* 15 px = kein iOS-Autozoom */
}
.inp .val-in { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.inp__unit { font-size: 12px; font-weight: 600; color: var(--ink-3); padding-right: 12px; flex-shrink: 0; }
.inp__pre { padding-left: 12px; color: var(--ink-3); display: grid; place-items: center; flex-shrink: 0; }
.inp__pre .ic { width: 15px; height: 15px; }
.inp--err { border-color: var(--crit); } .inp--err:focus-within { box-shadow: 0 0 0 3px var(--crit-wash); }
.inp--ok { border-color: color-mix(in srgb, var(--ok) 42%, var(--hairline-2)); }
.inp--ro { background: var(--inset); }
.inp textarea { resize: vertical; min-height: 76px; font-family: var(--font-ui); }
.inp select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 32px; }
.inp--sel { position: relative; }
.inp--sel::after { content: ''; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.check { display: flex; align-items: center; gap: 9px; min-height: var(--tap); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--brand); flex-shrink: 0; }
.drop {
  border: 1.5px dashed var(--hairline-2); border-radius: var(--r-md); background: var(--surface-2);
  padding: var(--s6); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.drop:hover { border-color: var(--brand); background: var(--brand-wash); }

.fgrid  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.fgrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.span2  { grid-column: span 2; }
.fset { display: flex; flex-direction: column; gap: var(--s4); }
.fset__cap { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--hairline); }
.fset__n { width: 19px; height: 19px; border-radius: var(--r-xs); flex-shrink: 0; background: var(--inset); color: var(--ink-2); font-family: var(--font-data); font-size: 10px; font-weight: 600; display: grid; place-items: center; }

.steps { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; }
.steps::-webkit-scrollbar { display: none; }
.step { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.step__n { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-data); font-size: 10.5px; font-weight: 600; border: 1.5px solid var(--hairline-2); color: var(--ink-3); background: var(--surface); }
.step__t { font-size: 12.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.step__bar { width: 26px; height: 1.5px; background: var(--hairline); flex-shrink: 0; margin: 0 10px; }
.step[data-state="done"] .step__n { background: var(--brand); border-color: var(--brand); color: #fff; }
.step[data-state="done"] .step__t { color: var(--ink-2); }
.step[data-state="now"] .step__n { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.step[data-state="now"] .step__t { color: var(--ink); font-weight: 600; }

.formbar {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s6); padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--hairline);
  font-size: 12px; color: var(--ink-3);
}
.formbar__act { margin-left: auto; display: flex; gap: var(--s2); flex-shrink: 0; }

/* --- SCHALTER ------------------------------------------------ */
.sw {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: var(--tap); flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.sw__track {
  position: relative; width: 50px; height: 30px; border-radius: var(--r-pill);
  background: var(--hairline-2); transition: background var(--t-med);
  box-shadow: inset 0 1px 2px rgba(11,15,20,.10);
}
.sw__thumb {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(11,15,20,.16), 0 2px 6px rgba(11,15,20,.14);
  transition: transform var(--t-med);
}
.sw[aria-pressed="true"] .sw__track { background: var(--ok); }
.sw[aria-pressed="true"] .sw__thumb { transform: translateX(20px); }
.sw[data-busy="true"] .sw__track { background: var(--brand); }
.sw[data-busy="true"] .sw__thumb { animation: swp .8s ease-in-out infinite; }
@keyframes swp { 50% { transform: translateX(10px) scale(.86) } }
.sw:focus-visible { outline: none; }
.sw:focus-visible .sw__track { outline: 2px solid var(--brand); outline-offset: 3px; }

/* --- HINWEISE / LEER / SKELETT ------------------------------- */
.note { display: flex; gap: 10px; padding: 13px var(--s4); border-radius: var(--r-sm); border: 1px solid var(--hairline); background: var(--surface-2); font-size: 13px; line-height: 1.5; }
.note__ic { flex-shrink: 0; margin-top: 1px; } .note__ic .ic { width: 16px; height: 16px; }
.note strong { display: block; font-weight: 600; margin-bottom: 2px; }
.note--warn { background: var(--warn-wash); border-color: color-mix(in srgb, var(--warn) 20%, transparent) } .note--warn .note__ic { color: var(--warn) }
.note--crit { background: var(--crit-wash); border-color: color-mix(in srgb, var(--crit) 20%, transparent) } .note--crit .note__ic { color: var(--crit) }
.note--info { background: var(--brand-wash); border-color: var(--brand-line) } .note--info .note__ic { color: var(--brand) }
.note--ok   { background: var(--ok-wash);   border-color: color-mix(in srgb, var(--ok) 20%, transparent) } .note--ok .note__ic { color: var(--ok) }
.blank { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; padding: var(--s12) var(--s5); }
.blank__ic { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--inset); color: var(--ink-3); display: grid; place-items: center; }
.blank__ic .ic { width: 20px; height: 20px; }
.blank h3 { font-size: 14.5px; font-weight: 600; }
.blank p { font-size: 13px; color: var(--ink-2); max-width: 36ch; }
.sk { border-radius: var(--r-xs); background: linear-gradient(90deg, var(--inset) 25%, var(--surface-2) 37%, var(--inset) 63%); background-size: 400% 100%; animation: shim 1.3s ease-in-out infinite; }
@keyframes shim { to { background-position: -135% 0 } }

/* --- TAGESBAND ----------------------------------------------- */
.ribbon__grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 64px; align-items: end; }
.ribbon__col { display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; height: 100%; border-radius: 2px; overflow: hidden; position: relative; }
.ribbon__seg { border-radius: 1px; min-height: 1px; }
.ribbon__now::after { content: ''; position: absolute; top: -6px; bottom: 0; left: 50%; width: 1px; background: var(--brand); }
.ribbon__axis { display: grid; grid-template-columns: repeat(24, 1fr); font-family: var(--font-data); font-size: 9px; color: var(--ink-3); margin-top: 4px; }
.ribbon__axis span { text-align: center; }
.ribbon__axis span:not(:nth-child(4n+1)) { visibility: hidden; }
.legend { display: flex; flex-wrap: wrap; gap: 6px var(--s4); }
.legend__i { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.legend__sw { width: 8px; height: 8px; border-radius: 2px; background: var(--tint); flex-shrink: 0; }

/* --- FLUSS-DIAGRAMM ------------------------------------------ */
.flow__svg { width: 100%; height: auto; max-height: 210px; }
.flow-path { fill: none; stroke-width: 1.8; opacity: .18; stroke-linecap: round; }
.flow-dash { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 4 12; animation: drift 1.3s linear infinite; }
.flow-dash.rev { animation-direction: reverse; }
@keyframes drift { to { stroke-dashoffset: -32 } }
.fn-lbl { font-family: var(--font-ui); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.fn-val { font-family: var(--font-data); font-size: 15px; font-weight: 600; letter-spacing: -.03em; }
.fn-sub { font-family: var(--font-ui); font-size: 9.5px; font-weight: 500; fill: var(--ink-3); }
.flow-mobile { display: none; }
.fleg { display: flex; align-items: center; gap: 11px; padding: 10px 0; min-height: var(--tap); border-top: 1px solid var(--hairline); }
.fleg__bar { width: 3px; height: 24px; border-radius: 2px; background: var(--tint); flex-shrink: 0; }

/* --- TAB-BAR & SHEET (mobil) --------------------------------- */
.tabbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--hairline);
  /* Der Home-Indikator braucht Freiraum, aber nicht die vollen 34 Pixel.
     Geraete ohne Indikator melden 0 und bekommen nur 2 Pixel. */
  /* Solange iOS die Ansicht beschneidet, meldet env() 0 und hier
     passiert nichts. Nach dem Neuanlegen der Web-App liefert es 34
     und wir halten davon rund ein Drittel frei. */
  padding-bottom: max(0px, calc(env(safe-area-inset-bottom) - 22px));
}
.tabbar__in { display: grid; grid-template-columns: repeat(5, 1fr); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px;
  min-height: var(--tabbar-h); padding: 5px 2px 0; color: var(--ink-3); transition: color var(--t-fast);
  -webkit-tap-highlight-color: transparent; }
.tab .ic { width: 20px; height: 20px; }
.tab__t { font-size: 10px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.tab[aria-current="page"] { color: var(--brand); }
.tab:active { opacity: .5; }
.sheet-bg { position: fixed; inset: 0; z-index: 70; display: none; background: rgba(11,15,20,.42); }
.sheet-bg[data-open="true"] { display: block; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface);
  border-radius: 18px 18px 0 0; padding: var(--s3) var(--s5) max(var(--s5), env(safe-area-inset-bottom));
  box-shadow: 0 -14px 44px rgba(0,0,0,.22); animation: rise var(--t-med) both; max-height: 82%; overflow-y: auto; }
@keyframes rise { from { transform: translateY(100%) } }
.sheet__grab { width: 36px; height: 4px; border-radius: 2px; background: var(--hairline-2); margin: 0 auto var(--s4); }

/* --- HILFSKLASSEN -------------------------------------------- */
.sect { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.sect__h { display: flex; align-items: center; gap: 10px; }
.sect__h .push { margin-left: auto; }
.hs { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.vs { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.btw { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-width: 0; }
.wrap { flex-wrap: wrap; }
.push { margin-left: auto; }
.g2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s4); }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s4); }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s4); }
.gA { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--s4); }   /* asymmetrisch */
.gB { display: grid; grid-template-columns: 1fr 1.7fr; gap: var(--s4); }
.gC { display: grid; grid-template-columns: 2.4fr 1fr; gap: var(--s4); }
.hr { height: 1px; background: var(--hairline); }
.ic { width: 16px; height: 16px; stroke-width: 1.85; flex-shrink: 0; }
.chart { position: relative; height: 250px; min-width: 0; }
.chart--sm { height: 148px; }
.chart--xs { height: 104px; }
.screen { display: none; }
.screen[data-active="true"] { display: block; }

/* ---------------------------------------------------------------
   RESPONSIVE · Container-Queries auf .app
   --------------------------------------------------------------- */
@container app (max-width: 1240px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats > .stat:nth-child(2n) { border-right: 0; }
  .stats > .stat:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
}
@container app (max-width: 1080px) {
  .gA, .gB, .gC { grid-template-columns: 1fr; }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .console__side { margin-left: 0; width: 100%; gap: var(--s6); }
  .console__row { gap: var(--s5); }
}
@container app (max-width: 860px) {
  .rail { display: none; }
  .main { margin-left: 0; }
  .topbar__burger { display: inline-flex; }
  .scroll { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .g2, .g3 { grid-template-columns: 1fr; }
}
@container app (max-width: 620px) {
  .console { padding: var(--s4) var(--s4) 0; }
  .console__end { margin: var(--s4) calc(var(--s4) * -1) 0; }
  .console__row { gap: var(--s4); }
  .console__side {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: var(--s4) var(--s3); width: 100%;
  }
  .readout { min-width: 0; }
  .readout__k { font-size: 9.5px; letter-spacing: .07em; }
  .readout__v .val-xl { font-size: 18px; }
  .readout__v .unit { font-size: 10.5px; }
  .console__lead { min-width: 0; }
  .segs { margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4); }
  .segt { margin-right: var(--s5); font-size: 13px; }
  .work { padding: var(--s4) var(--s4) var(--s8); gap: var(--s4); }
  .topbar { padding: 0 var(--s4) 0 var(--s2); }
  .topbar__meta { display: none; }
  .g4, .stats { grid-template-columns: 1fr; }
  .stats > .stat { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .stats > .stat:last-child { border-bottom: 0; }
  .val-hero { font-size: 38px; }
  .val-xl { font-size: 25px; }
  .fgrid, .fgrid3 { grid-template-columns: 1fr; gap: var(--s3); }
  .span2 { grid-column: span 1; }
  .panel__body, .panel__head, .panel__foot, .lrow { padding-left: var(--s4); padding-right: var(--s4); }
  .formbar { padding-left: var(--s4); padding-right: var(--s4); }
  .isowrap { margin: var(--s2) calc(var(--s4) * -1) 0; }
  .isoscene { height: 190px; }
  .isolbl__k { font-size: 13px; }
  .isolbl__v { font-size: 19px; }
  .isolbl__v--big { font-size: 25px; }
  .flow-mobile { display: block; margin-top: var(--s2); }
  .chart { height: 190px; }
  .btn { height: 38px; } .btn--icon { width: 38px; } .btn--lg { height: var(--tap); }
  .step__t { display: none; } .step__bar { width: 16px; margin: 0 7px; }
  .hide-sm { display: none !important; }

  /* Kopf-, Fuß- und Aktionsleisten brechen um statt überzustehen */
  .panel__head {
    height: auto; min-height: 44px; flex-wrap: wrap;
    padding-top: 9px; padding-bottom: 9px; row-gap: 8px;
  }
  .panel__head .tickrule--sm { display: none; }
  .panel__act { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .panel__act .inp { width: 100% !important; }
  .panel__foot { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; }
  .panel__foot .push { margin-left: 0; }
  .formbar { flex-wrap: wrap; row-gap: 10px; }
  .formbar__act { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .formbar__act .btn { flex: 1 1 auto; min-width: 46%; }
  .console__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lrow { flex-wrap: wrap; row-gap: 8px; }
  .lrow__trail { margin-left: auto; }
  .stat { padding-left: var(--s4); padding-right: var(--s4); }
}

/* ===============================================================
   RAUMKLIMA-UEBERSICHT auf dem Dashboard
   Alle Werte beschriftet, Lueftung schaltbar, jeder Raum einzeln
   aktualisierbar. Aussenluft steht als Bezugsgroesse voran.
   =============================================================== */
.klima { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: var(--s3); }
.kl {
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface); display: flex; flex-direction: column; overflow: hidden;
}
.kl__h { display: flex; align-items: center; gap: 8px; padding: 11px var(--s4) 0; }
.kl__n { font-size: 13px; font-weight: 700; letter-spacing: -.008em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl__g { font-size: 10.5px; color: var(--ink-3); padding: 1px var(--s4) 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl__v { display: flex; gap: var(--s4); padding: 10px var(--s4) 11px; flex: 1; }
.kl__c { min-width: 0; }
.kl__k { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; white-space: nowrap; }
.kl__f {
  display: flex; align-items: center; gap: 6px; min-height: 46px;
  padding: 5px 8px 5px var(--s4); border-top: 1px solid var(--hairline); background: var(--surface-2);
}
.kl__t { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kl__sw { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.kl__st { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.kl[data-fan="on"] .kl__st { color: var(--ok); }
.kl--ref { border-color: var(--brand-line); background: var(--brand-wash); }
.kl--ref .kl__f { background: color-mix(in srgb, var(--brand-wash) 60%, var(--surface)); border-top-color: var(--brand-line); }
.kl--warn { border-color: color-mix(in srgb, var(--warn) 34%, var(--hairline)); }
.kl--crit { border-color: color-mix(in srgb, var(--crit) 34%, var(--hairline)); }
.kl--off .kl__v { opacity: .45; }
@container app (max-width: 620px) {
  /* Einspaltig wie in deiner jetzigen App: drei Werte nebeneinander bleiben lesbar */
  .klima { grid-template-columns: 1fr; gap: var(--s2); }
  .kl__v { gap: var(--s3); padding-left: var(--s3); padding-right: var(--s3); }
  .kl__h, .kl__g { padding-left: var(--s3); padding-right: var(--s3); }
  .kl__f { padding-left: var(--s3); }
  .kl__k { font-size: 9px; }
}

/* ===============================================================
   ENERGIESZENE - frontale Objekte, weite Abstaende
   =============================================================== */
/* Ohne Obergrenze zieht sich die Szene ueber die volle Breite des
   Arbeitsbereichs - auf einem breiten Monitor bleiben die Objekte
   dann klein in der Mitte und links/rechts nur Leerraum (gemessen:
   45 % Leerraum bei 1920px Fensterbreite). Deckel bei 1100px,
   zentriert. */
.isowrap { margin: var(--s4) auto 0; max-width: 1100px; }
.isoscene { width: 100%; height: clamp(210px, 22vw, 330px); display: block; }
.isoscene .obj { cursor: pointer; transition: filter 180ms ease, opacity 180ms ease; }
/* Kein transform beim Hover! Die Objekte tragen ein transform-Attribut,
   und CSS wuerde es ersetzen statt ergaenzen - dann springen sie weg. */
.isoscene .obj:hover { filter: drop-shadow(0 8px 16px rgba(11,15,20,.22)) brightness(1.04); }
[data-theme="dark"] .isoscene .obj:hover { filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)) brightness(1.12); }
/* Leuchtender Leitungseffekt nach dem Vorbild eines KI-Renderings mit
   glimmenden Kabeln entlang des Hauses. Erreicht ohne neue Bilder: ein
   weicher Glanzsaum (drop-shadow) um eine helle, dünne Kernlinie,
   plus eine tiefere, breitere Leuchtspur darunter. */
.isoscene .fb {
  fill: none; stroke-width: 6; stroke-linecap: round; opacity: .16;
  filter: blur(2.5px);
}
.isoscene .fr {
  fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 4 14;
  animation: isoflow 1.1s linear infinite;
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 7px currentColor);
}
.isoscene .fr.rev { animation-direction: reverse; }
@keyframes isoflow { to { stroke-dashoffset: -36 } }
.lk { fill: var(--ink-3); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; font-family: var(--font-ui); }
.lv { fill: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: -.02em; font-family: var(--font-ui); }
.lv--b { font-size: 18px; font-weight: 600; }

/* Baukoerper-Farben, kippen mit dem Modus */
:root {
  --wand:#FFFFFF; --wand2:#EBEFF5; --wand-l:#D5DCE6;
  --dach:#3B4A5C; --dach2:#2A3644; --dachkante:#1F2833;
  --fenster:#BFE3F7; --fenster2:#7FBEDF; --rahmen:#FFFFFF;
  --tuer:#0F5E86; --sockel:#C9D2DD;
  --metall:#DCE3EB; --metall2:#A9B7C6; --metall3:#77879A;
  --glas:#1B4C7A; --glas2:#0A2137;
}
[data-theme="dark"] {
  --wand:#39424F; --wand2:#2A323D; --wand-l:#1E2530;
  --dach:#232C38; --dach2:#161D26; --dachkante:#0E141B;
  --fenster:#FFD79B; --fenster2:#D89B3C; --rahmen:#4A5462;
  --tuer:#0B3F5C; --sockel:#2A323D;
  --metall:#4A5666; --metall2:#333D4B; --metall3:#232B36;
  --glas:#12406B; --glas2:#071B2E;
}

/* Aussenluft-Kachel mit zwei Fuehlern */
.klima { grid-template-columns: 2fr 1fr 1fr; }
.kl--wide { grid-column: span 1; }
.kl__two { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; flex: 1; }
.kl__src { padding: 8px 0 4px; }
.kl__src + .kl__src { border-left: 1px solid var(--hairline); }
.kl__src--heat { background: color-mix(in srgb, var(--heat-wash) 55%, transparent); }
.kl__q { display: flex; align-items: center; gap: 6px; padding: 0 var(--s4);
  font-size: 10.5px; font-weight: 700; color: var(--ink-2); }
.kl__q .ic { width: 13px; height: 13px; flex-shrink: 0; }
.kl__q span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl__src--heat .kl__q { color: var(--heat); }
.kl__two .kl__v { padding-top: 7px; padding-bottom: 8px; }
@container app (max-width: 1080px) {
  .klima { grid-template-columns: 1fr 1fr; }
  .kl--wide { grid-column: span 2; }
}
@container app (max-width: 620px) {
  .klima { grid-template-columns: 1fr; }
  .kl--wide { grid-column: span 1; }
  .kl__two { grid-template-columns: 1fr; }
  .kl__src + .kl__src { border-left: 0; border-top: 1px solid var(--hairline); }
}

/* --- Energie-live-Kacheln ------------------------------------- */
.tile__t { text-transform: none; font-size: 13px; letter-spacing: -.006em; color: var(--ink); font-weight: 700; }
.tile__mid { text-align: center; padding-top: var(--s6); padding-bottom: var(--s4); }
.tile__gauge { display: grid; place-items: center; padding-bottom: var(--s2); }
.tile__gauge svg { max-width: 100%; height: auto; }
.tile__rows { padding-top: 0; display: flex; flex-direction: column; gap: 9px; }
.tile__k { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; min-width: 0; }
.tile__i { display: flex; flex-shrink: 0; }
.tile__i .ic { width: 13px; height: 13px; }
.g-big  { fill: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -.02em; font-family: var(--font-ui); }
.g-sub  { fill: var(--ink-3); font-size: 10px; font-weight: 600; font-family: var(--font-ui); }
.g-tick { fill: var(--ink-3); font-size: 10px; font-weight: 700; font-family: var(--font-ui); }
.ringtxt { fill: var(--batt); font-size: 12px; font-weight: 600; font-family: var(--font-ui); }
.autbar { height: 8px; border-radius: 4px; background: var(--grid); overflow: hidden; }
.autbar span { display: block; height: 100%; border-radius: 4px; background: var(--ok); }

/* Beschriftung in Wertzeilen kuerzen statt ueberstehen */
.btw > .t-sm, .btw > .t-cap, .btw > .tile__k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btw { flex-wrap: wrap; row-gap: 4px; }
.btw > .val, .btw > .chip { flex-shrink: 0; }

/* Leitwerte in den schmalen Bereichskacheln kleiner setzen */
@container app (max-width: 1640px) {
  .g4 .panel__body .val-xl { font-size: 23px; }
  .g4 .panel__body .btw > .t-cap { font-size: 11.5px; }
}
.panel__foot { flex-wrap: wrap; row-gap: 6px; }
.panel__link { min-width: 0; white-space: nowrap; overflow: hidden; }
.panel__link .ic { flex-shrink: 0; margin-left: 8px; }

/* Messwerte duerfen nie schrumpfen */
.hs > .val, .btw > .val, .kl__c > .val { flex-shrink: 0; }

.panel__body .hs { flex-wrap: wrap; row-gap: 6px; }
.btw > span:not(.val):not(.chip) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse { flex-shrink: 0; }

@container app (min-width: 1441px) { .g4 .panel__body .val-xl { font-size: 23px; } }

/* Mobil: eigene, groessere Szene in zwei Reihen. Keine Werte in der
   Grafik - die stehen schon gross im Konsolenband darueber. */
.isoscene--m { display: none; }
@container app (max-width: 620px) {
  .isoscene { display: none; }
  .isoscene--m { display: block; height: auto; max-height: 400px; }
  .isowrap { margin: var(--s3) 0 0; }
  .isoscene--m .lk { font-size: 13px; }
}

/* ===============================================================
   APP-HOEHE UND SICHERE BEREICHE
   Ohne feste Hoehe waechst .app mit dem Inhalt. Die Tab-Leiste
   haengt dann am Dokumentende statt am Bildschirmrand.
   Wichtig: container-type auf .app macht .app zum Bezugsrahmen
   fuer position:fixed - deshalb loesen wir es ueber die Hoehe,
   nicht ueber fixed.
   =============================================================== */
html, body { height: 100%; }
body { overflow: hidden; background: var(--surface); }
.app { height: 100dvh; }
@supports not (height: 100dvh) { .app { height: 100vh; } }

/* Kopfzeile unter Notch und Statusleiste herausholen */
.topbar {
  height: auto;
  min-height: var(--topbar-h);
  padding-top: env(safe-area-inset-top);
}
.rail { padding-top: calc(var(--s3) + env(safe-area-inset-top)); }


/* ===============================================================
   UEBERGANGSBRUECKE ZU BOOTSTRAP
   Solange nicht alle Templates umgestellt sind, laeuft Bootstrap
   parallel. Diese Zuordnung gibt seinen Bausteinen unsere Farben,
   damit Karten und Tabellen im Dunkelmodus nicht weiss bleiben.
   Zusaetzlich setzt base.html data-bs-theme passend zum Modus.

   NACH STUFE 5 ERSATZLOS LOESCHEN - dann ist Bootstrap raus.
   Nur hier ist !important erlaubt, weil Bootstrap-Hilfsklassen
   selbst mit !important arbeiten.
   =============================================================== */
[data-bs-theme] {
  --bs-body-bg: var(--canvas);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-ui);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-2);
  --bs-tertiary-color: var(--ink-3);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--inset);
  --bs-border-color: var(--hairline);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-hover);
  --bs-primary: var(--brand);
  --bs-heading-color: var(--ink);
}
.card, .list-group-item, .modal-content, .dropdown-menu, .offcanvas, .accordion-item {
  background-color: var(--surface); border-color: var(--hairline); color: var(--ink);
}
.card-header, .card-footer { background-color: var(--surface-2); border-color: var(--hairline); }
.table {
  --bs-table-color: var(--ink); --bs-table-bg: transparent;
  --bs-table-border-color: var(--hairline);
  --bs-table-striped-bg: var(--surface-2); --bs-table-striped-color: var(--ink);
  --bs-table-hover-bg: var(--surface-2);   --bs-table-hover-color: var(--ink);
  --bs-table-accent-bg: transparent;
}
.table > thead { color: var(--ink-3); }
.form-control, .form-select, .input-group-text {
  background-color: var(--surface); border-color: var(--hairline-2); color: var(--ink);
}
.form-control::placeholder { color: var(--ink-3); }
.bg-white, .bg-light, .bg-body, .bg-body-tertiary { background-color: var(--surface) !important; }
.bg-dark { background-color: var(--inset) !important; color: var(--ink) !important; }
.text-muted, .text-secondary { color: var(--ink-2) !important; }
.text-dark, .text-body { color: var(--ink) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--hairline) !important; }
.badge.bg-secondary { background-color: var(--inset) !important; color: var(--ink-2) !important; }

/* Kleine Veraenderungsangabe unter einem Messwert */
.kl__d { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px;
         font-weight: 700; margin-top: 3px; }
.kl__d .ic { width: 11px; height: 11px; }
.kl__d.flat { color: var(--ink-3); font-weight: 600; }
.kl .chip .ic { width: 11px; height: 11px; margin-right: 1px; }


/* Alte Templates liegen ohne eigenes Raster im Inhaltsbereich.
   Damit sie nicht am linken Rand kleben, bekommen direkte Kinder
   des Scrollbereichs Aussenabstand - ausser unseren eigenen Baendern. */
.scroll > :not(.console):not(.work):not(.tickrule) {
  padding-left: var(--s8); padding-right: var(--s8);
}
.scroll > :first-child:not(.console) { padding-top: var(--s5); }
@container app (max-width: 620px) {
  .scroll > :not(.console):not(.work):not(.tickrule) {
    padding-left: var(--s4); padding-right: var(--s4);
  }
}


/* Tab-Leiste und Sheet liegen ausserhalb von .app, weil
   container-type dort jedes position:fixed einfangen wuerde.
   Deshalb steuert sie eine normale Media-Query. */
@media (max-width: 860px) {
  .tabbar { display: block; }
}



/* Flussgruppen starten unsichtbar, bis die erste Live-Antwort da ist -
   sonst blitzen sie kurz auf und verschwinden gleich wieder. */
#flPvGrp, #flBattGrp, #flNetzGrp, #flPvGrpM, #flBattGrpM, #flNetzGrpM {
  opacity: 0; transition: opacity 400ms ease;
}

/* ===============================================================
   KLIMA-MINIKACHELN
   Ersetzt die dreispaltige Werteliste durch vier kleine Karten:
   Temperatur farbig hervorgehoben, daneben rel./abs. Feuchte und
   der Taupunkt (clientseitig aus Temp+rel.LF berechnet). Alles auf
   einen Blick, ohne zu scrollen.
   =============================================================== */
.kmini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 9px var(--s4) 5px; }
.kmini {
  border-radius: 11px; padding: 9px 11px 8px; display: flex; flex-direction: column;
  gap: 3px; min-width: 0; background: var(--surface-2);
}
.kmini__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kmini__k { font-size: 10.5px; font-weight: 700; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmini__ic { width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-3); }
.kmini__v { font-size: 16.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; color: var(--ink); }
.kmini__v .unit { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }

/* Temperatur - farbig hervorgehoben, wie die blaue Karte im Vorbild */
.kmini--hero { background: var(--clima-wash); }
.kmini--hero .kmini__k { color: var(--clima); }
.kmini--hero .kmini__ic { color: var(--clima); }
.kmini--hero .kmini__v { color: var(--clima); }
[data-theme="dark"] .kmini--hero .kmini__v { color: var(--ink); }

/* Zustandsfarben fuer abs. Feuchte, wenn kritisch/erhoeht/trocken */
.kmini--crit .kmini__v { color: var(--crit); }
.kmini--warn .kmini__v { color: var(--warn); }
.kmini--dry  .kmini__v { color: var(--water); }

/* Szenenbeschriftung - Bezeichnung und Wert jetzt in einer Zeile,
   kleiner und nicht fett, damit sie unter den Objekten kompakt bleibt
   und nicht mehr wie eine zweite, separate Kennzahl wirkt. */
.lk2 { fill: var(--ink-3); font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; font-family: var(--font-ui); }
.lv2 { fill: var(--ink); font-size: 12.5px; font-weight: 500; font-family: var(--font-ui); }
.lv2b { fill: var(--ink); font-size: 14px; font-weight: 600; font-family: var(--font-ui); }