@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Bauteile. Farben stehen ausschliesslich in tokens.css - hier nie ein Hexwert,
   sonst bricht der Themenwechsel. Aufbau wie exiServer: Topbar, Navigations-
   schiene, Inhalt. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Barlow', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--gold) 25%, transparent); border-radius: 8px; }

.num { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }
.label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }

@keyframes flicker { 0%, 97%, 100% { opacity: 1; } 98% { opacity: .4; } }
@keyframes blink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: .12; } }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* ---------- Grund ---------- */
.atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--atmosphere-bg); }

.haus { position: relative; height: 100dvh; width: 100vw; display: flex; flex-direction: column; }
.haus > * { position: relative; z-index: 1; }

/* ---------- Topbar ---------- */
.topbar {
  flex: none;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--panel-gold);
  background: var(--topbar-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; flex: none; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  display: grid; place-items: center; flex: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 18%, transparent), color-mix(in srgb, var(--gold) 2%, transparent));
}
.brand-mark svg { width: 20px; height: 20px; color: var(--gold); }
.brand-name { font-family: 'Barlow Semi Condensed'; font-weight: 700; font-size: 19px; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.brand-model { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-top: 2px; white-space: nowrap; }

.topbar-center {
  flex: 1 1 0; min-width: 0;
  display: flex; justify-content: center; align-items: center; gap: 18px;
  overflow: hidden;
}
/* Lange Beschriftungen wie "Wasserwerte im Sollbereich" sprengen sonst die
   Zeile und die erste Kennzahl wird abgeschnitten. */
.topbar-stat { flex: 0 1 auto; min-width: 0; max-width: 130px; }
.topbar-stat { text-align: center; white-space: nowrap; }
.topbar-stat .num { font-size: 25px; line-height: .95; letter-spacing: .03em; }
.topbar-stat .sub {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-sep { width: 1px; height: 30px; background: var(--panel-gold); flex: none; }

.topbar-right { display: flex; align-items: center; gap: 8px; }
.conn-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--surface-border);
}
.conn-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.conn-chip .name { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); font-weight: 600; white-space: nowrap; }
.conn-chip.online .dot { background: var(--green); box-shadow: 0 0 7px var(--green); animation: flicker 4s infinite; }
.conn-chip.online .name { color: var(--green); }
.conn-chip.warn .dot { background: var(--amber); box-shadow: 0 0 7px var(--amber); }
.conn-chip.warn .name { color: var(--amber); }
.conn-chip.fehler .dot { background: var(--red); box-shadow: 0 0 8px var(--red); animation: blink 1s step-end infinite; }
.conn-chip.fehler .name { color: var(--red); }

.theme-btn {
  cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--surface-border);
  background: var(--surface); color: var(--ink-mid);
  font-family: 'Barlow'; font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.theme-btn svg { width: 14px; height: 14px; }

/* ---------- Schiene und Inhalt ---------- */
.shell { flex: 1; display: flex; min-height: 0; }

.rail {
  flex: none; width: 84px;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding: 10px 8px;
  border-right: 1px solid var(--panel-gold);
  background: var(--rail-bg);
  overflow-y: auto;
}
.rail-group-label {
  display: flex; align-items: center;
  margin: 18px -8px 8px; padding: 12px 8px 0;
  border-top: 1px solid var(--panel-gold-strong);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--text);
}
.rail-group-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.rail-group-label span { flex: 1; min-width: 0; text-align: center; line-height: 1.15; overflow-wrap: break-word; }
.rail-btn {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 4px 8px; border-radius: 11px;
  border: 1px solid transparent; background: transparent; color: var(--ink-faint);
  transition: all .18s ease; touch-action: manipulation;
  font-family: inherit;
}
.rail-btn::before {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 3px; background: var(--gold); transition: height .2s ease;
}
.rail-btn svg { width: 21px; height: 21px; }
.rail-btn .rail-label { font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; text-align: center; line-height: 1.1; }
.rail-btn.active { border-color: var(--panel-gold-strong); background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); }
.rail-btn.active::before { height: 18px; }
.rail-spacer { flex: 1; }

.content { flex: 1; min-width: 0; overflow: auto; padding: 18px 20px 22px; }
.view { display: none; }
.view.active { display: block; }

/* ---------- Karten ---------- */
.panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-0);
  transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
  position: relative;
  opacity: 0; transform: translateY(10px);
  animation: rise .5s cubic-bezier(.2, .8, .2, 1) forwards;
}
.panel:hover { box-shadow: var(--shadow-1); }
/* Karten, die bei jedem Poll neu erzeugt werden, duerfen nicht staendig
   neu einblenden - das flackert. */
.panel.ruhig { animation: none; opacity: 1; transform: none; }
.panel.status-danger { border-color: var(--danger); }
.panel.status-warning { border-color: var(--warning); }

.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.panel-head h2 { margin: 0; font-family: 'Barlow Semi Condensed'; font-size: 16px; font-weight: 700; letter-spacing: .03em; }
.panel-head .value { font-size: 10px; letter-spacing: .12em; color: var(--blue); font-weight: 600; text-transform: uppercase; }
.panel-head .value.gold { color: var(--gold); }
.panel-head .value.dim { color: var(--ink-dim); }

.big-num { font-family: 'Barlow Semi Condensed'; font-weight: 700; line-height: .9; color: var(--ink); font-size: 34px; font-variant-numeric: tabular-nums; }
.big-num-unit { font-size: 15px; color: var(--ink-faint); font-weight: 600; margin-left: 3px; }
.mini-label { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-top: 3px; }

/* ---------- Raster ---------- */
.grid-deck { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; max-width: 1500px; margin: 0 auto; }
.col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }
.stack { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Kennzahlen ---------- */
.kpi .big-num.vl    { color: var(--gly-vl); }
.kpi .big-num.rl    { color: var(--hz-rl); }
.kpi .big-num.pv    { color: var(--copper); }
.kpi .big-num.raum  { color: var(--raum); }
.kpi .big-num.sole  { color: var(--sole); }

/* ---------- Datenpunktzeilen ---------- */
.punkt {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--surface-border);
}
.punkt:first-of-type { border-top: none; }
.punkt .name { font-size: 12.5px; color: var(--ink-mid); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.punkt .wert { font-family: 'Barlow Semi Condensed'; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.punkt .wert .u { font-size: 11px; font-weight: 600; color: var(--ink-faint); margin-left: 2px; font-family: 'Barlow'; }
.punkt.gestoert .wert, .punkt.unbekannt .wert { color: var(--ink-faint); }
.punkt.veraltet .wert { color: var(--warning); }

.qpill {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
}
.qpill.veraltet  { background: var(--warning-soft); color: var(--warning); }
.qpill.gestoert  { background: var(--danger-soft); color: var(--danger); }
.qpill.unbekannt { background: var(--surface); color: var(--ink-faint); }

/* ---------- Stellglieder ---------- */
.stell { display: flex; align-items: center; gap: 6px; }
.stell input[type=number] {
  width: 68px; text-align: right;
  font-family: 'Barlow Semi Condensed'; font-size: 14px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--surface-border); color: var(--ink);
  border-radius: var(--r-1); padding: 5px 8px; outline: none;
}
.stell input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
.btn-klein {
  font-family: 'Barlow'; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: var(--r-1); cursor: pointer;
  border: 1px solid var(--panel-gold-strong);
  background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold);
  transition: all var(--duration) var(--ease);
}
.btn-klein:hover { background: color-mix(in srgb, var(--gold) 20%, transparent); }
.btn-klein:active { transform: scale(.95); }
.btn-klein.aus { background: var(--surface); border-color: var(--surface-border); color: var(--ink-faint); }

/* ---------- Balken ---------- */
.bar-track { height: 8px; border-radius: 5px; background: var(--surface-border); margin-top: 10px; overflow: hidden; }
.bar-fill { height: 100%; width: 0%; transition: width .8s ease; background: linear-gradient(90deg, var(--gold-deep), var(--solar)); }
.bar-scale { display: flex; justify-content: space-between; font-size: 9px; color: var(--ink-faint); font-weight: 600; margin-top: 4px; }

/* ---------- Geräteherkunft ---------- */
.modulzeile {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin: -4px 0 10px;
}
.hinweis {
  font-size: 11.5px; line-height: 1.5; color: var(--warning);
  background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius: var(--r-1); padding: 8px 10px; margin-bottom: 10px;
}

/* ---------- Verlauf ---------- */
.presets { display: flex; gap: 5px; }
.preset-btn {
  padding: 4px 11px; border-radius: var(--r-pill);
  font-family: 'Barlow'; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--surface-border); background: var(--surface); color: var(--ink-faint);
  cursor: pointer; transition: all var(--duration) var(--ease);
}
.preset-btn:hover { color: var(--ink); }
.preset-btn.active { background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: var(--panel-gold-strong); color: var(--gold); }

.pgruppe { margin-bottom: 10px; }
.pgruppe-kopf { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.pgruppe-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pwahl {
  padding: 4px 10px; border-radius: var(--r-pill);
  font-family: 'Barlow'; font-size: 11px; font-weight: 600;
  border: 1px solid var(--surface-border); background: var(--surface); color: var(--ink-mid);
  cursor: pointer; transition: all var(--duration) var(--ease);
}
.pwahl:hover { color: var(--ink); border-color: var(--border-strong); }
.pwahl.aktiv { color: #fff; }

.chart-wrap { position: relative; margin-top: 4px; }
#chart { width: 100%; height: 340px; display: block; overflow: visible; }
.legende { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--ink-mid); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 12px; height: 3px; border-radius: 99px; flex: none; }

/* ---------- Ereignisse und Tabellen ---------- */
.log-zeile { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--surface-border); font-size: 12px; align-items: baseline; }
.log-zeile:first-child { border-top: none; }
.log-zeile .zt { color: var(--ink-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-zeile .art {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
  background: var(--surface); color: var(--ink-faint);
}
.log-zeile .art.fehler, .log-zeile .art.notaus { background: var(--danger-soft); color: var(--danger); }
.log-zeile .art.stellbefehl { background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); }
.log-zeile .art.start, .log-zeile .art.stop { background: var(--success-soft); color: var(--success); }
.log-zeile .txt { color: var(--ink); }

.tabelle .zeile { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--surface-border); font-size: 12.5px; }
.tabelle .zeile:first-child { border-top: none; }
.tabelle .k { color: var(--ink-mid); }
.tabelle .v { font-family: 'Barlow Semi Condensed'; font-weight: 700; font-variant-numeric: tabular-nums; }

.leer { color: var(--ink-faint); font-size: 12px; padding: 16px 0; text-align: center; }

/* ---------- schmale Schirme ---------- */
@media (max-width: 1080px) {
  .topbar-center { display: none; }
}

@media (max-width: 860px) {
  .rail { width: 64px; padding: 8px 6px; }
  .rail-btn .rail-label { font-size: 7.5px; }
  .content { padding: 14px 12px 20px; }
  .col-2, .col-3, .col-4 { grid-column: span 6; }
  .col-6, .col-8 { grid-column: span 12; }
}

/* ── Darstellung nach Art von Home Assistant ──────────────────────────────
   Zeigerinstrument für Werte mit Sollwert, kleine Verlaufskurve je Zeile,
   Altersangabe statt blosser Zahl. */

.kpi-gauge { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kpi-gauge svg { width: 100%; max-width: 168px; height: auto; display: block; }

/* Verlaufskurve in der Datenpunktzeile */
.spark { width: 68px; height: 22px; flex: none; opacity: .85; }
.spark path { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

/* Zeile anklickbar: führt in den Verlauf */
.punkt.klickbar { cursor: pointer; }
.punkt.klickbar:hover { background: var(--surface); }
.punkt.klickbar:hover .name { color: var(--ink); }

.alter { font-size: 10px; color: var(--ink-faint); font-weight: 600; white-space: nowrap; }
.alter.frisch { color: var(--success); }
.alter.alt { color: var(--warning); }

.karte-fuss {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--surface-border);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}

/* Ja/Nein-Wert: Ampel statt Zeigerinstrument */
.zustandskachel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 96px;
}
.zustandspunkt { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 16px currentColor; }
.zustandstext {
  font-family: 'Barlow Semi Condensed'; font-weight: 700; font-size: 22px;
  letter-spacing: .02em;
}

/* Farbbänder und Grenzwerttext im Zeigerinstrument */

/* ── Moduleinstellungen ─────────────────────────────────────────────────── */
.hinweis-ruhig {
  font-size: 12px; line-height: 1.55; color: var(--ink-mid);
  margin: -4px 0 16px; max-width: 70ch;
}
.hinweis-ruhig code {
  font-family: ui-monospace, monospace; font-size: 11.5px;
  background: var(--surface); padding: 1px 5px; border-radius: 4px;
}

.modul-gruppe { font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin: 18px 0 8px; }
.modul-gruppe:first-child { margin-top: 0; }

.modul-zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--surface-border);
}
.modul-zeile:first-of-type { border-top: none; }
.modul-haupt { flex: 1; min-width: 0; }
.modul-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.modul-unter { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.modul-zeile.ruht .modul-name { color: var(--ink-faint); font-weight: 500; }

/* Schalter */
.schalter {
  position: relative; width: 44px; height: 24px; flex: none;
  border-radius: 999px; border: 1px solid var(--surface-border);
  background: var(--surface); cursor: pointer;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.schalter::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink-faint);
  transition: transform var(--duration) var(--ease), background var(--duration) var(--ease);
}
.schalter.an { background: color-mix(in srgb, var(--success) 25%, transparent); border-color: var(--success); }
.schalter.an::after { transform: translateX(20px); background: var(--success); }
.schalter[disabled] { opacity: .45; cursor: not-allowed; }

.modul-zustand { font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap; min-width: 92px; text-align: right; }
.modul-zustand.verbunden { color: var(--success); }
.modul-zustand.getrennt  { color: var(--danger); }
.modul-zustand.ruht      { color: var(--ink-faint); }


/* ── Zeigerinstrument (Vorbild: Gauge-Karte in Home Assistant) ──────────── */
.kpi-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: -2px 0 2px;
}
.kpi-titel {
  font-family: 'Barlow Semi Condensed'; font-size: 17px; font-weight: 700;
  letter-spacing: .01em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kpi-punkt { width: 11px; height: 11px; border-radius: 50%; flex: none; opacity: .55; }

.kpi-gauge svg { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }

/* Nadel: dunkel auf hell, hell auf dunkel - sie muss auf jeder Bogenfarbe
   stehen, deshalb nicht in einer der Verlaufsfarben. */

/* Wertmarke: heller Strich quer durch den Bogen, dunkel unterlegt, damit er
   auf jeder Verlaufsfarbe steht - auf Gelb wäre Weiss allein unsichtbar. */
.gauge-marke-aussen { stroke: rgba(0, 0, 0, .55); stroke-width: 7; stroke-linecap: round; }
.gauge-marke        { stroke: #fff; stroke-width: 3.4; stroke-linecap: round; }

/* Grenzwerte liegen auf dem Bogen - dort ist der Grund immer kräftig
   eingefärbt, also feste dunkle Schrift statt einer Themenfarbe. */
.gauge-grenze {
  font-family: 'Barlow Semi Condensed'; font-size: 12px; font-weight: 700;
  fill: rgba(0, 0, 0, .72); letter-spacing: .02em;
}

.gauge-blase { fill: var(--surface3, #21262d); stroke: var(--border); stroke-width: 1; }
html[data-theme="light"] .gauge-blase { fill: #2b2b2b; stroke: none; }
.gauge-blase-text { font-family: 'Barlow Semi Condensed'; font-size: 12px; font-weight: 700; fill: #fff; }
.gauge-sollpunkt { fill: #fff; stroke: rgba(0, 0, 0, .35); stroke-width: .8; }

.gauge-zahl {
  font-family: 'Barlow Semi Condensed'; font-weight: 700; font-size: 34px;
  fill: var(--ink); font-variant-numeric: tabular-nums;
}
.gauge-einheit { font-size: 17px; font-weight: 600; fill: var(--ink-mid); }

/* Messwerte ohne Grenzen und ohne Temperaturbezug: schlichter Füllbogen.
   Ein Farbverlauf würde hier eine Bewertung behaupten, die es nicht gibt. */
.gauge-leer { fill: none; stroke: var(--surface-border); stroke-width: 30; stroke-linecap: round; }
.gauge-voll { fill: none; stroke: var(--gold); stroke-width: 30; stroke-linecap: round; }

/* Gruppenüberschrift in der Übersicht: trennt Gewerke voneinander.
   Ohne sie stehen Wetter- und Poolinstrumente ununterscheidbar nebeneinander. */
.gruppen-kopf {
  display: flex; align-items: center; gap: 12px;
  margin: 6px 0 -4px;
}
.gruppen-kopf:first-child { margin-top: 0; }
.gruppen-name {
  font-family: 'Barlow Semi Condensed'; font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  white-space: nowrap;
}
.gruppen-linie { flex: 1; height: 1px; background: var(--panel-gold); min-width: 20px; }
.gruppen-quelle {
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}
.gruppen-quelle.weg { color: var(--danger); }

/* Das Instrument fuellt die Kachel; die Karte darum zeichnet schon Rand und
   Flaeche, deshalb sitzt es ohne eigenen Abstand darin. */
.panel > hs-gauge { display: block; margin: -4px -4px 0; }
.panel > hs-status { display: block; margin: -4px -4px 0; }

/* ── KNX-Verzeichnis ─────────────────────────────────────────────────────── */
.knx-filter { display: flex; gap: var(--s-4); align-items: center; margin: var(--s-4) 0 var(--s-3); }
.knx-filter input[type="search"] {
  flex: 1; height: 38px; padding: 0 var(--s-4); border-radius: var(--r-1);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px;
}
.knx-filter input[type="search"]:focus { outline: none; box-shadow: var(--shadow-focus); }
.knx-nurbus { display: flex; align-items: center; gap: var(--s-2); color: var(--text-muted); font-size: 13px; white-space: nowrap; }

.knx-geraet { border: 1px solid var(--border); border-radius: var(--r-1); margin-bottom: var(--s-2); overflow: hidden; }
.knx-kopf {
  display: grid; grid-template-columns: 62px minmax(110px, 1.2fr) minmax(90px, .8fr) minmax(0, 1fr) auto auto;
  gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-4);
  cursor: pointer; background: var(--surface);
}
.knx-kopf:hover { background: var(--surface-strong); }
.knx-pa { color: var(--gold); font-weight: 600; }
.knx-titel { font-weight: 600; }
.knx-produkt, .knx-meta { font-size: 12px; }
.knx-zahl { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Zugeklappt, weil 76 Geräte mit je bis zu 123 Verknüpfungen sonst eine
   Seite ergeben, durch die niemand scrollt. */
.knx-inhalt { display: none; padding: var(--s-3) var(--s-4) var(--s-4); }
.knx-geraet.offen .knx-inhalt { display: block; }

.knx-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.knx-tabelle th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-subtle); padding: var(--s-2) var(--s-3); }
.knx-tabelle td { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--border); }
.knx-tabelle tr.nurbus td { background: var(--warning-soft); }
.knx-serie { font-size: 12px; margin-top: var(--s-3); }

.knx-abgleich-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.knx-abgleich-spalten h3 { margin: 0 0 var(--s-2); font-size: 14px; }
.knx-diff { display: flex; gap: var(--s-3); padding: var(--s-1) 0; font-size: 13px; }
.knx-diff.nurbus .mono { color: var(--warning); }
@media (max-width: 860px) {
  .knx-abgleich-spalten { grid-template-columns: 1fr; gap: var(--s-5); }
  .knx-kopf { grid-template-columns: 62px 1fr; grid-auto-rows: auto; row-gap: var(--s-1); }
  .knx-produkt, .knx-meta { grid-column: 2; }
}
/* Adressen und Objektnummern nebeneinander lesbar halten - proportional
   springen die Spalten. */
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: .01em; }

/* Trennlinie je Geschoss - dieselbe Sprache wie die Gerätegruppen auf der
   Startseite, damit die Oberfläche eine Handschrift behält. */
.knx-ebene { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-5) 0 var(--s-2); }
.knx-ebene:first-child { margin-top: var(--s-2); }
.knx-ebene-name { font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.knx-ebene-linie { flex: 1; height: 1px; background: var(--border); }
.knx-ebene-zahl { font-size: 12px; color: var(--text-subtle); }
.knx-raum { font-size: 12px; }
@media (max-width: 860px) { .knx-raum { grid-column: 2; } }

/* ── Regenradar ────────────────────────────────────────────────────────────
   Kein Kartenwerkzeug. Der Rahmen IST der Ausschnitt: ein fester
   geografischer Kasten (Muenchen-Wien), auf die Rahmenbreite gerechnet.

   Frueher war es ein 768x768-Raster, das ueber die Mitte zur Deckung
   gebracht wurde - mit margin-top: calc(50% - 384px). Das ist falsch:
   Prozentwerte beziehen sich bei margin-top auf die BREITE des
   Elternelements, nicht auf die Hoehe. Bei 700 px Breite und 420 px Hoehe
   verschob das die Karte um 140 px, und der Hauspunkt lag 200 km daneben.
   Die Hoehe des Rahmens wird jetzt aus dem Kasten gerechnet; es gibt keine
   zwei Groessen mehr, die zusammenpassen muessen. */
.radar {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2, var(--surface));
}
.radar-karte, .radar-bild, .radar-orte {
  position: absolute;
  inset: 0;
}
.radar-orte { pointer-events: none; }
.radar-karte img, .radar-bild img { position: absolute; }

/* Orte im Korridor. Sie tragen die Orientierung - ohne sie ist eine
   entsaettigte Karte bei dieser Groesse nur ein Muster. */
.radar-ort { position: absolute; transform: translate(-50%, -50%); }
.radar-ort i {
  display: block; width: 6px; height: 6px; margin: 0 auto;
  border-radius: 50%; background: var(--ink-dim);
  box-shadow: 0 0 0 1.5px var(--surface);
}
.radar-ort span {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .04em; white-space: nowrap;
  color: var(--ink-dim); text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface);
}
.radar-ort.haus i { width: 10px; height: 10px; background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface), 0 0 10px 2px var(--accent); }
.radar-ort.haus span { color: var(--accent); font-weight: 600; }
/* Die Karte ist Hintergrund, nicht Inhalt: gedämpft, damit das Radar liest.
   Im dunklen Thema wird sie invertiert - eine helle Karte unter blauen
   Radarflächen blendet. */
.radar-karte { opacity: .55; filter: grayscale(.7); }
html[data-theme="dark"] .radar-karte { filter: grayscale(.9) invert(1) brightness(.85); opacity: .35; }
.radar-bild { opacity: .85; pointer-events: none; }

.radar-leiste { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.radar-leiste input[type="range"] { flex: 1; accent-color: var(--accent); }
#radar-lauf { min-width: 42px; }

/* Ein Wort in der Kopfzeile steht an der Stelle einer Zahl - es braucht
   weniger Groesse, sonst sprengt "trocken" die Spalte. */
.num .wort { font-size: .62em; letter-spacing: .05em; text-transform: uppercase; }

/* ── Automatik ─────────────────────────────────────────────────────────────
   Eine Szene ist eine Achse mit Stationen. Farbe ist hier Betonung und bleibt
   knapp: im Ruhezustand traegt genau ein Element den Akzent - der Istwert.
   Alles andere spricht ueber Helligkeit, nicht ueber Buntheit. */
.auto-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.auto-name { font-weight: 600; font-size: 15px; }
.auto-jetzt { font-size: 13px; color: var(--ink-dim); }
.auto-jetzt b { color: var(--ink); font-variant-numeric: tabular-nums; }

.auto-achse { width: 100%; height: 185px; display: block; overflow: visible; }
.auto-achse text { font-family: inherit; text-anchor: middle; }
.auto-achse .ax-dek      { font-size: 12px; fill: var(--ink-faint); font-variant-numeric: tabular-nums; }
.auto-achse .ax-einheit  { font-size: 12px; fill: var(--ink-faint); text-anchor: start; }
.auto-achse .ax-tat      { font-size: 14px; fill: var(--ink-dim); }
.auto-achse .ax-tat.stark{ font-weight: 600; }
.auto-achse .ax-ist      { font-size: 14px; font-weight: 600; fill: var(--accent); font-variant-numeric: tabular-nums; }

.auto-stationen { margin-top: 2px; border-top: 1px solid var(--line); }
.auto-station {
  display: grid;
  grid-template-columns: 96px 138px 176px 1fr 148px;
  gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.auto-station:last-child { border-bottom: 0; }
.auto-st-name { font-weight: 600; }
.auto-st-bed, .auto-st-ziel { color: var(--ink-dim); }
.auto-st-letzte { color: var(--ink-faint); text-align: right; font-size: 12px; }

/* Lage als Punkt und Wort, ohne Rahmen. Der Punkt traegt die Farbe. */
.auto-lage {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-faint);
}
.auto-lage i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.lage-scharf     i { background: var(--ink-dim); }
.lage-ausgeloest i { background: transparent; border: 1px solid var(--ink-faint); }
.lage-wartet       { color: var(--warning); }
.lage-wartet     i { background: var(--warning); }
.lage-gesperrt     { color: var(--danger); }
.lage-gesperrt   i { background: var(--danger); }
.lage-unbekannt    { color: var(--warning); }
.lage-unbekannt  i { background: transparent; border: 1px solid var(--warning); }

.auto-satz { font-size: 13px; line-height: 1.6; color: var(--ink-dim); }
.auto-satz b { color: var(--ink); font-weight: 600; }
.auto-ziele { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.auto-zeile { font-size: 13px; line-height: 1.7; display: flex; gap: 8px; align-items: baseline; }
.auto-wert { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); }
.auto-letzte { margin-top: 8px; font-size: 12px; color: var(--ink-faint); }

@media (max-width: 900px) {
  .auto-station { grid-template-columns: 96px 1fr; }
  .auto-st-bed, .auto-st-ziel, .auto-st-letzte { grid-column: 2; text-align: left; }
}

/* Jalousien als Bild: Pakethöhe = Position, Strichstärke = Lamellenstellung. */
.jalousien {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding: 10px 0 14px; border-top: 1px solid var(--line);
}
.jalousie { width: 92px; text-align: center; }
.jalousie-bild { width: 68px; height: 72px; display: block; margin: 0 auto 6px; }
.jalousie-name { font-size: 12px; font-weight: 600; }
.jalousie-wert { font-size: 11px; color: var(--ink-faint); margin-top: 1px; }


/* ── Vorhersage und Warnungen ──────────────────────────────────────────────
   Drei Tage nebeneinander, nicht untereinander: der Vergleich ist die
   Auskunft. "Morgen waermer als heute" liest man aus zwei Zahlen auf einer
   Hoehe, nicht aus zwei Zeilen. */
.vh { display: flex; gap: 10px; }
.vh-tag {
  flex: 1; min-width: 0; padding: 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2, var(--surface));
}
.vh-tag.heute { border-color: var(--accent); }
.vh-name { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-dim); }
.vh-wort { font-size: 14px; margin: 6px 0 10px; }
.vh-regen { margin-top: 8px; font-size: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.vh-regen.nass { color: var(--ink); }

/* Warnungen. Die Farbe kommt aus der europaeischen Warnskala und ist hier
   die Ausnahme von der Hausregel, dass Farbe sparsam bleibt: eine
   Gewitterwarnung DARF ins Auge springen. */
.warn { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.warn:first-child { border-top: 0; padding-top: 0; }
.warn-balken { width: 4px; border-radius: 2px; background: var(--warning); flex: none; }
.warn.stufe-2 .warn-balken { background: var(--danger); opacity: .75; }
.warn.stufe-3 .warn-balken { background: var(--danger); }
.warn-text { font-size: 14px; }
.warn-zeit { font-size: 12px; color: var(--ink-dim); margin-top: 3px; font-variant-numeric: tabular-nums; }
.warn-jetzt { color: var(--danger); font-weight: 600; }

/* ── Pool ──────────────────────────────────────────────────────────────────
   Meldebits sind keine Messwerte. Ein Zeigerinstrument fuer "Dosier-Alarm
   pH: in Ordnung" waere viel Aufwand fuer nichts - und wuerde die drei
   Werte erschlagen, auf die es ankommt. Sie stehen deshalb als Zeile. */
.meldung { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 0; }
.meldung-name { font-size: 12px; color: var(--ink-dim); }
.meldung-wert { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.meldung-wert.schlecht { color: var(--danger); }
/* Eine Warnung ist keine Störung. Das Gerät unterscheidet gelb und rot -
   die Anzeige muss es auch, sonst wird aus "nachfüllen, wenn du Zeit hast"
   ein "sofort", und beim nächsten Mal sieht man über das Rot hinweg. */
.meldung-wert.warnung { color: var(--warning); }

/* ── Messwert ohne Aussagekraft ────────────────────────────────────────────
   Nicht verstecken, ausgrauen. Der Wert ist gemessen - er beantwortet nur
   gerade eine andere Frage. Am Pool: pH, Redox und Wassertemperatur
   entstehen in der Messzelle. Steht die Filterpumpe, steht dort dasselbe
   Wasser seit Stunden; die Zahl gehoert dann zu einem Rohrstueck, nicht zum
   Becken. Wer sie versteckt, laesst den Betrachter raten, warum sie fehlt -
   und wer sie normal anzeigt, laesst ihn danach dosieren. */
.panel.ungueltig > * { opacity: .38; filter: grayscale(1); }
.panel.ungueltig { position: relative; }
.ungueltig-grund {
  position: absolute; left: 0; right: 0; bottom: 8px;
  text-align: center; font-size: 11px; letter-spacing: .04em;
  color: var(--ink-dim); opacity: 1 !important; filter: none !important;
}
.topbar-stat.ungueltig { opacity: .4; filter: grayscale(1); }

/* ── Vorhersage: Höchst und Tiefst gleich gut lesbar ───────────────────────
   Vorher stand der Tiefstwert als kleine graue Zahl neben dem Höchstwert.
   Er ist aber die Hälfte der Auskunft - im September entscheidet er, ob man
   die Fenster offen lässt. */
.vh-werte { margin-top: 2px; }
.vh-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 1px 0; }
.vh-k { font-size: 11px; color: var(--ink-dim); letter-spacing: .03em; }
.vh-v { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vh-v.tief { font-size: 16px; color: var(--ink-dim); }

.qpill.gesperrt { opacity: .7; }

/* ── Jalousien: Fenster mit Behang ──────────────────────────────────────── */
.jf-raster {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.jf, .jf-gruppe {
  position: relative; border-radius: 18px; padding: 16px;
  background: linear-gradient(160deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--surface-border);
  box-shadow: var(--hs-card-shadow);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.jf:hover { border-color: color-mix(in srgb, var(--gold) 35%, var(--surface-border)); transform: translateY(-2px); }

.jf-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; min-height: 16px; }
.jf-name { font-size: 12px; font-weight: 700; letter-spacing: .1em; min-width: 0; text-transform: uppercase; color: var(--ink-mid);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jf-prozent { font-family: 'Barlow Semi Condensed'; font-size: 30px; font-weight: 700; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.jf-prozent small { font-size: 13px; color: var(--ink-faint); margin-left: 2px; font-weight: 600; }

.jf-koerper { display: flex; gap: 12px; align-items: stretch; }

/* Das Fenster: Himmel, Fensterkreuz, darüber der Behang. */
.jf-fenster {
  position: relative; flex: 1; height: 160px; border-radius: 10px; overflow: hidden;
  border: 3px solid var(--surface-strong);
  box-shadow: inset 0 0 0 1px var(--line), 0 6px 18px color-mix(in srgb, var(--bg) 60%, transparent);
}
.jf-himmel { position: absolute; inset: 0; transition: background 2s var(--ease); }
[data-himmel="tag"] .jf-himmel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 70%, var(--bg)) 0%, color-mix(in srgb, var(--blue) 30%, var(--ink)) 100%); }
[data-himmel="daemmerung"] .jf-himmel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 35%, var(--bg)) 0%, color-mix(in srgb, var(--amber) 55%, var(--bg)) 100%); }
[data-himmel="nacht"] .jf-himmel {
  background:
    radial-gradient(1px 1px at 22% 30%, var(--ink) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 18%, var(--ink-mid) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 80% 55%, var(--ink-mid) 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 70%, var(--ink-dim) 50%, transparent 51%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--blue) 22%, var(--bg)) 100%); }
[data-himmel="grau"] .jf-himmel { background: var(--surface); }
.jf-kreuz { position: absolute; inset: 0; pointer-events: none; }
.jf-kreuz::before, .jf-kreuz::after { content: ''; position: absolute; background: var(--surface-strong); }
.jf-kreuz::before { left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); }
.jf-kreuz::after { top: 45%; left: 0; right: 0; height: 3px; }

/* Der Behang: Höhe = Position, Dichte der Lamellen = Lamellenstellung. */
.jf-paket {
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--pos) * 1%);
  background: repeating-linear-gradient(180deg,
    color-mix(in srgb, var(--ink-mid) 75%, var(--surface-strong)) 0,
    color-mix(in srgb, var(--ink-dim) 80%, var(--surface-strong)) var(--dicke),
    transparent var(--dicke), transparent 9px);
  transition: height 1.4s var(--ease);
  filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--bg) 70%, transparent));
}
/* Endleiste: die goldene Kante zeigt, wo der Behang steht. */
.jf-paket::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 4px; border-radius: 2px;
  background: var(--gold); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 70%, transparent);
}
.jf.unbekannt .jf-paket { display: none; }
.jf-frage { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
  background: color-mix(in srgb, var(--bg) 55%, transparent); }

.jf-wort { margin-top: 12px; font-size: 13px; color: var(--ink-dim); }

/* Tasten: groß genug für den Daumen. */
.jf-knoepfe { display: flex; flex-direction: column; gap: 8px; justify-content: space-between; }
.jf-knopf {
  width: 48px; flex: 1; min-height: 42px; border-radius: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--gold); font: 700 13px 'Barlow'; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, transparent), color-mix(in srgb, var(--gold) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  transition: background .2s, box-shadow .2s, transform .1s;
}
.jf-knopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.jf-knopf svg rect { fill: currentColor; stroke: none; }
.jf-knopf:hover { background: color-mix(in srgb, var(--gold) 26%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 35%, transparent); }
.jf-knopf:active { transform: scale(.94); }
.jf-knopf.gedrueckt { animation: jf-puls .7s var(--ease); }
@keyframes jf-puls {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 70%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

.jf-fuss { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 12px; }
.jf-fuss .jf-wort { margin-top: 0; font-size: 12.5px; line-height: 1.3; min-width: 0; }
.jf-schloss { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.jf-schloss svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* Sammelbefehl: ein breiter Balken über allen. */
.jf-gruppe { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-color: color-mix(in srgb, var(--gold) 30%, var(--surface-border)); }
.jf-gruppe-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jf-gruppe-titel { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.jf-gruppe-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.jf-gruppe .jf-knoepfe { flex-direction: row; gap: 10px; }
.jf-knopf.breit { width: auto; min-width: 104px; height: 48px; padding: 0 18px; }

@media (max-width: 600px) {
  .jf-gruppe .jf-knoepfe { width: 100%; }
  .jf-knopf.breit { flex: 1; min-width: 0; padding: 0 8px; }
}

/* HomeKit-Kopplung */
.hk { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 6px 0; }
.hk-code { font-family: 'Barlow Semi Condensed'; font-size: 34px; font-weight: 700; letter-spacing: .08em;
  color: var(--gold); padding: 8px 16px; border: 1px dashed color-mix(in srgb, var(--gold) 50%, transparent); border-radius: 12px; }
.hk-text { flex: 1; min-width: 220px; font-size: 13px; color: var(--ink-mid); line-height: 1.5; }
.hk-zahlen { display: flex; gap: 16px; font-size: 13px; color: var(--ink-dim); }
.hk-zahlen b { color: var(--ink); font-size: 16px; }

/* Während der Fahrt: das Paket gleitet linear mit der Schätzung, die
   Endleiste pulsiert. */
.jf.faehrt .jf-paket { transition: height 1s linear; }
.jf.faehrt .jf-paket::after { animation: jf-leiste 1.2s ease-in-out infinite; }
.jf.faehrt .jf-wort { color: var(--gold); }
.jf.faehrt { border-color: color-mix(in srgb, var(--gold) 45%, var(--surface-border)); }
@keyframes jf-leiste {
  0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--gold) 50%, transparent); }
  50% { box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 95%, transparent); }
}


/* ── Wärmepumpe (seit 15.10.2026) ───────────────────────────────────────── */
.wp-schema-panel { padding: 18px 18px 12px; }
.wp-schema { width: 100%; height: auto; display: block; }
.wp-kasten { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; }
.wp-tauscher { fill: var(--bg-elevated); }
.wp-beschr { font-family: 'Barlow Semi Condensed'; font-size: 13px; letter-spacing: .06em; fill: var(--ink-dim); }
.wp-wert { font-size: 22px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.wp-klein { font-size: 13px; fill: var(--ink-mid); }
.wp-zustand { font-size: 15px; font-weight: 700; fill: var(--ink-mid); }
.kaelte-an .wp-zustand { fill: var(--success); }
.wp-rohr { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .35; }
.wp-sole-kreis .wp-rohr { stroke: var(--sole); }
.wp-kaelte-kreis .wp-rohr { stroke: var(--copper); }
.wp-heiz-kreis .wp-vl { stroke: var(--red); }
.wp-heiz-kreis .wp-rl { stroke: var(--blue); }
.wp-strom { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 2 14; opacity: 0; }
.sole-an .wp-sole-kreis .wp-rohr, .kaelte-an .wp-kaelte-kreis .wp-rohr, .heiz-an .wp-heiz-kreis .wp-rohr { opacity: 1; }
.sole-an .wp-sole-kreis .wp-strom, .kaelte-an .wp-kaelte-kreis .wp-strom, .heiz-an .wp-heiz-kreis .wp-strom {
  opacity: .7; animation: wp-fliessen 1.2s linear infinite; }
@keyframes wp-fliessen { to { stroke-dashoffset: -32; } }
.wp-rotor { fill: var(--ink-faint); transform-origin: 515px 100px; transform-box: view-box; }
.kaelte-an .wp-rotor { fill: var(--success); animation: wp-drehen 1.6s linear infinite; }
@keyframes wp-drehen { to { transform: rotate(360deg); } }
.wp-ventil { fill: var(--copper); opacity: .6; }
.stoerung .wp-kasten { stroke: var(--danger); }
.wp-fuss { margin-top: 10px; font-size: 12px; color: var(--ink-dim); }
.wp-gruppe { font-family: 'Barlow Semi Condensed'; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; }
.meldung.klickbar { cursor: pointer; }
.meldung.klickbar:hover .meldung-name { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .wp-strom, .wp-rotor { animation: none !important; }
}
@media (max-width: 900px) {
  #wp .panel.col-3 { grid-column: span 6; }
}
@media (max-width: 560px) {
  #wp .panel.col-3 { grid-column: span 12; }
}

.wp-arten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.wp-art { padding: 10px 6px; border-radius: var(--r-2); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink-mid); font: inherit; font-weight: 600; cursor: pointer; }
.wp-art:hover { color: var(--ink); border-color: var(--accent-border); }
.wp-art.aktiv { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.wp-stell { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 5px 0;
  border-bottom: 1px solid var(--border); }
.wp-stell:last-child { border-bottom: 0; }
.wp-stell small { color: var(--ink-faint); font-size: 11px; }
.wp-stell-bedien { display: flex; gap: 6px; align-items: center; }
.wp-eingabe { width: 76px; padding: 6px 8px; border-radius: var(--r-1); border: 1px solid var(--border-strong);
  background: var(--bg-elevated); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }
.wp-setzen { padding: 7px 12px; border-radius: var(--r-1); border: 1px solid var(--accent-border);
  background: var(--accent-soft); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.wp-setzen:hover { background: var(--accent-mid); }
.wp-gesperrt { font-size: 12px; color: var(--ink-faint); }
.wp-hinweis { font-size: 12px; color: var(--warning); margin: 4px 0 12px; }
@media (max-width: 900px) { #wp .panel.col-6 { grid-column: span 12; } .wp-arten { grid-template-columns: repeat(2, 1fr); } }

.wp-hinweis-ruhig { color: var(--ink-dim); }
.wp-leistung { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
@media (max-width: 900px) { .wp-leistung { grid-template-columns: 1fr; } }
.wp-art small { display: block; font-size: 10.5px; font-weight: 400; color: var(--ink-faint); margin-top: 2px; }
.wp-art.aktiv small { color: var(--ink-mid); }

/* ── Verbindung und Güte (seit 15.10.2026) ─────────────────────────────── */
.alt { opacity: .38; }
text.alt { opacity: .35; }
.gruppen-quelle.weg { color: var(--danger); font-weight: 700; }
.wp-offline { margin-bottom: 12px; padding: 10px 14px; border-radius: var(--r-2);
  background: var(--danger-soft); color: var(--danger); font-weight: 600; font-size: 13px; }
.wp-schema.offline { filter: grayscale(1); opacity: .55; }
.wp-bedienung { display: contents; }
.wp-bedienung.offline .panel { opacity: .5; }
.wp-bedienung button:disabled, .wp-bedienung input:disabled { cursor: not-allowed; }

/* ── Detailansicht (seit 19.10.2026) ───────────────────────────────────── */
[data-kachel], #kopfwerte .topbar-stat { cursor: pointer; }
.detail { width: min(1040px, 94vw); max-height: 92vh; padding: 22px 24px 18px; border: 1px solid var(--border-strong);
  border-radius: var(--r-3); background: var(--bg-elevated); color: var(--ink); overflow: auto; }
.detail::backdrop { background: rgba(0, 0, 0, .55); }
.detail-kopf { display: flex; align-items: flex-start; gap: 18px; }
.detail-kopf > div:first-child { flex: 1; min-width: 0; }
.detail-geraet { font-family: 'Barlow Semi Condensed'; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.detail h2 { margin: 2px 0 0; font-size: 22px; }
.detail-jetzt { text-align: right; }
#detail-wert { display: block; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.detail-guete { font-size: 11.5px; color: var(--ink-dim); }
.detail-guete.schlecht { color: var(--danger); }
.detail-zu { background: none; border: 0; color: var(--ink-dim); font-size: 20px; cursor: pointer; padding: 2px 6px; }
.detail-zu:hover { color: var(--ink); }
.detail-zeitraum { margin: 14px 0 12px; }
.detail-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.detail-kz { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); }
.detail-kz-name { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.detail-kz-wert { display: block; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.detail-kz-zeit { display: block; font-size: 11.5px; color: var(--ink-faint); }
.detail-kurve { position: relative; }
.dg { width: 100%; height: auto; display: block; touch-action: none; }
.dg-gitter { stroke: var(--border); stroke-width: 1; }
.dg-achse { font-size: 11px; fill: var(--ink-dim); font-variant-numeric: tabular-nums; }
.dg-band { fill: var(--gold); opacity: .16; }
.dg-linie { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.dg-sollband { fill: var(--success); opacity: .08; }
.dg-soll { stroke: var(--success); stroke-dasharray: 5 4; stroke-width: 1.2; }
.dg-max { fill: var(--danger); } .dg-min { fill: var(--blue); }
.dg-ein { fill: var(--gold); opacity: .75; }
.dg-cursor { stroke: var(--ink-mid); stroke-width: 1; stroke-dasharray: 3 3; }
.dg-cursorpunkt { fill: var(--ink); }
.dg-fang { fill: transparent; cursor: crosshair; }
.dg-tip { position: absolute; top: 8px; min-width: 120px; padding: 7px 10px; border-radius: var(--r-2);
  background: var(--surface-strong); border: 1px solid var(--border-strong); font-size: 12.5px; pointer-events: none; }
.dg-tip span { color: var(--ink-dim); }
.detail-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px;
  font-size: 12px; color: var(--ink-dim); flex-wrap: wrap; }
.detail-aktionen { display: flex; gap: 8px; }
@media (max-width: 600px) { .detail { padding: 16px; } #detail-wert { font-size: 22px; } }

/* ── Ebenen (KG / EG / OG), seit 19.10.2026 ────────────────────────────── */
.ebene-kopf { display: flex; align-items: center; gap: 10px; margin: 4px 0 -6px; }
.ebene-name { font-family: 'Barlow Semi Condensed'; font-size: 13px; font-weight: 700; letter-spacing: .14em;
  color: var(--ink-mid); padding: 2px 9px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); }
.ebene-linie { flex: 1; height: 1px; background: var(--border); }
.ebene-zahl { font-size: 11px; color: var(--ink-faint); }
.jalousien-ebene { display: grid; grid-template-columns: 54px 1fr; align-items: start; gap: 10px;
  border-top: 1px solid var(--line); padding-top: 10px; }
.jalousien-ebene .ebene-name { justify-self: start; margin-top: 26px; }
.jalousien-ebene .jalousien { border-top: 0; padding-top: 0; }

/* ── Web-App (Vollbild am Handy) ───────────────────────────────────────── */
/* Ohne Browserleiste laeuft die Seite unter Uhr und Kamera-Aussparung -
   die Kopfzeile ruckt um den sicheren Bereich nach unten. */
@media (display-mode: standalone) {
  .topbar { padding-top: max(env(safe-area-inset-top), 8px); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Abläufe je Jalousiegruppe (seit 19.10.2026) ──────────────────────── */
.ablaeufe { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 6px; }
.ab-gruppe { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 18px; align-items: start;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-3); background: var(--surface); }
.ab-kopf { display: flex; flex-direction: column; gap: 10px; }
.ab-kopf .ebene-name { align-self: flex-start; }
.ab-bilder { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.ab-jal { width: 74px; text-align: center; }
.ab-jal .jalousie-bild { width: 40px; height: 42px; margin: 0 auto 3px; }
.ab-jal span { display: block; font-size: 10.5px; line-height: 1.25; color: var(--ink-mid); }
.ab-spuren { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ab-spur-titel { display: flex; align-items: center; gap: 6px; font-family: 'Barlow Semi Condensed'; font-size: 12px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; }
.ab-sym { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-schritte { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.ab-pfeil { align-self: center; color: var(--ink-faint); font-size: 20px; padding: 0 2px; }
.ab-schritt { min-width: 150px; padding: 9px 12px; border-radius: var(--r-2); border: 1px solid var(--border);
  background: var(--bg-elevated); display: flex; flex-direction: column; gap: 4px; }
.ab-schwelle { font-size: 11px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.ab-tat { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink); }
.ab-tat small { font-weight: 400; font-size: 11.5px; color: var(--ink-dim); }
.ab-ic { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-zustand { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-dim); }
.ab-zustand i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.ab-schritt.erledigt { opacity: .62; }
.ab-schritt.erledigt .ab-zustand i { background: var(--success); }
.ab-schritt.naechste { border-color: var(--accent); background: var(--accent-soft); }
.ab-schritt.naechste .ab-zustand { color: var(--accent); font-weight: 600; }
.ab-schritt.naechste .ab-zustand i { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.ab-schritt.aktiv { border-color: var(--warning); }
.ab-schritt.aktiv .ab-zustand { color: var(--warning); font-weight: 600; }
.ab-schritt.aktiv .ab-zustand i { background: var(--warning); animation: blink 1.2s step-end infinite; }
.ab-schritt.gesperrt { border-color: var(--danger); }
.ab-schritt.gesperrt .ab-zustand { color: var(--danger); }
.auto-details { margin-top: 8px; }
.auto-details summary { cursor: pointer; font-size: 12px; color: var(--ink-dim); padding: 6px 0; }
@media (max-width: 860px) { .ab-gruppe { grid-template-columns: 1fr; } }
#auto-regeln { width: 100%; justify-self: stretch; }
#auto-regeln > .panel { grid-column: 1 / -1; }
@media (min-width: 1180px) { .ab-spuren { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } }

/* ── Tablets / Fingerbedienung (seit 19.10.2026) ───────────────────────── */
/* Nur bei grobem Zeiger (Finger) - am PC mit Maus bleibt alles, wie es ist.
   44 px ist die Tippflaeche, die Apple und Google als Untergrenze nennen. */
@media (pointer: coarse) {
  .preset-btn { min-height: 40px; padding: 0 16px; font-size: 13px; }
  .detail-zu { min-width: 44px; min-height: 44px; font-size: 22px; }
  .wp-setzen, .wp-eingabe { min-height: 44px; }
  .wp-art { min-height: 52px; }
  .auto-details summary { padding: 12px 0; font-size: 14px; }
  /* Langes Druecken markiert sonst Text oder oeffnet das Kontextmenue -
     an einem Wand-Tablet passiert das bei jedem zweiten Antippen. */
  .rail, .topbar, .panel, .jf, .jf-gruppe, button, [data-kachel], .ab-schritt, .meldung, .punkt {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  button, [data-kachel], [data-verlauf], .rail-btn { touch-action: manipulation; }
}

/* ── Wärmepumpen: Umschalter, Boiler, geplante Geräte (seit 19.10.2026) ── */
.wp-umschalter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wp-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px; min-height: 60px;
  border-radius: var(--r-3); border: 1px solid var(--border); background: var(--surface); color: var(--ink-mid);
  font: inherit; cursor: pointer; text-align: left; }
.wp-tab:hover { border-color: var(--border-strong); color: var(--ink); }
.wp-tab.aktiv { border-color: var(--gold); background: var(--panel-gold); color: var(--ink); }
.wp-tab-name { font-size: 16px; font-weight: 700; }
.wp-tab-zust { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-dim); }
.wp-tab-zust i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.wp-tab.online .wp-tab-zust i { background: var(--success); box-shadow: 0 0 6px var(--success); }
.wp-tab.getrennt .wp-tab-zust i { background: var(--danger); }
.wp-tab.getrennt .wp-tab-zust { color: var(--danger); }
.wp-tab.geplant .wp-tab-zust i { background: transparent; border: 1px dashed var(--ink-faint); }
.wp-geplant { margin-bottom: 12px; padding: 10px 14px; border-radius: var(--r-2); border: 1px dashed var(--border-strong);
  color: var(--ink-mid); font-size: 13px; }
.wp-ist-geplant .wp-schema { opacity: .5; filter: grayscale(1); }
.wp-bedienung.offline button, .wp-bedienung.offline input { pointer-events: none; }
.wp-tank { fill: var(--surface); }
.wp-tank-heiss { fill: var(--red); opacity: .16; }
.wp-tank-kalt { fill: var(--blue); opacity: .14; }
.wp-tank-rahmen { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.wp-heizstab { stroke: var(--copper) !important; }
.heiz-an .wp-heizstab { stroke: var(--red) !important; opacity: 1; }
.kaelte-an .wp-rotor-luft, .sole-an .wp-rotor-luft { fill: var(--success); animation: wp-drehen 1.2s linear infinite; }
.wp-rotor-luft { transform-origin: 175px 84px; transform-box: view-box; }
@media (max-width: 700px) { .wp-umschalter { grid-template-columns: 1fr; } }
.wp-tab.ruhend .wp-tab-zust i { background: var(--ink-faint); }

/* ── Schiene ohne Scrollen (seit 19.10.2026) ───────────────────────────── */
/* Betreiber: "das menü links zu scrollen ist nicht optimal". Die Schiene
   muss auf einen Tablet-Bildschirm passen. Wird die Höhe knapp, rücken die
   Knöpfe zusammen und die Gruppenüberschriften verschwinden; unter 700 px
   Höhe wird aus der Schiene eine Leiste am unteren Rand, wie bei Apps. */
.rail { overflow: hidden; }
.rail-btn { flex: none; }

@media (max-height: 900px) {
  .rail { gap: 0; padding: 6px 8px; }
  .rail-btn { padding: 6px 4px 5px; gap: 3px; }
  .rail-btn svg { width: 19px; height: 19px; }
  .rail-group-label { margin: 8px -8px 4px; padding-top: 6px; font-size: 9.5px; }
}
@media (max-height: 760px) {
  .rail-group-label { display: none; }
  .rail-btn { padding: 5px 4px 4px; }
}

/* ── App-Navigation (seit 19.10.2026) ──────────────────────────────────── */
/* Betreiber: "als webapp braucht es eine klassische app navigation ..
   genauso am tablet". Auf jedem Touch-Gerät - Finger statt Maus - wird aus
   der Schiene eine Tableiste am unteren Rand: Symbol über Beschriftung, der
   aktive Reiter in Gold, wie bei iOS und Android. Am PC mit Maus bleibt die
   Schiene links; dort ist sie mit Gruppen und Platz die bessere Übersicht. */
@media (pointer: coarse), (max-height: 700px), (max-width: 600px) {
  .shell { flex-direction: column-reverse; }
  .rail {
    width: auto; flex-direction: row; justify-content: space-around; align-items: stretch; gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--panel-gold);
    background: var(--topbar-bg); backdrop-filter: blur(8px);
    overflow: hidden;
  }
  .rail-group-label, .rail-spacer { display: none; }
  .rail-btn {
    flex: 1 1 0; min-width: 0; min-height: 54px; padding: 6px 2px 4px; gap: 4px;
    border-radius: 10px; border-color: transparent; background: transparent;
  }
  .rail-btn::before { display: none; }
  .rail-btn svg { width: 24px; height: 24px; }
  .rail-btn .rail-label {
    font-size: 9px; letter-spacing: .03em; line-height: 1.05;
    white-space: normal; hyphens: manual; overflow-wrap: normal; max-width: 100%;
  }
  .rail-btn.active { border-color: transparent; background: transparent; color: var(--gold); }
  .rail-btn.active svg { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--gold) 55%, transparent)); }
  .content { padding-bottom: 14px; }
}

/* ── Telefon (seit 19.10.2026) ──────────────────────────────────────────── */
/* Betreiber: "am telefon sehr eng .. zb wettervorhersage". Unter 600 px
   Breite: alles in einer Spalte, die Vorhersagetage untereinander als
   Zeilen, und die Leiste unten nur mit den Reitern zum Bedienen - Module,
   KNX und System sind Inbetriebnahme und bleiben am grossen Schirm. */
@media (max-width: 600px) {
  .grid-deck { gap: 10px; }
  .col-2, .col-3, .col-4, .col-6, .col-8 { grid-column: span 12; }
  .content { padding: 10px 10px 16px; }
  .panel { padding: 14px; }
  .rail-btn.technisch, .rail-btn.mehr { display: none; }
  .rail .rail-btn.nur-handy { display: flex; }
  .rail-btn { min-width: 0; }
  .topbar { padding: 8px 10px; }
  .brand-model { display: none; }
  .conn-chip .name { display: none; }           /* nur der Punkt - die Farbe sagt es */
  .theme-btn span { display: none; }

  /* Vorhersage: ein Tag je Zeile, Werte nebeneinander statt untereinander */
  .vh { flex-direction: column; gap: 8px; }
  /* Feste Spaltenbreiten: nur "heute" hat die Nacht-Spalte - mit auto-Breiten
     stand "Höchst" in jeder Zeile woanders. */
  .vh-tag { display: grid; grid-template-columns: 1fr 58px 58px 72px; grid-template-areas:
      "name hoch tief nacht" "wort hoch tief nacht" "regen regen regen regen"; align-items: center; column-gap: 8px; row-gap: 2px; }
  .vh-zeile { align-items: center; text-align: center; }
  .vh-name { grid-area: name; }
  .vh-wort { grid-area: wort; margin: 0; }
  .vh-werte { display: contents; }
  .vh-zeile { flex-direction: column; align-items: flex-end; gap: 0; }
  .vh-zeile:nth-child(1) { grid-area: hoch; }
  .vh-zeile:nth-child(2) { grid-area: tief; }
  .vh-zeile:nth-child(3) { grid-area: nacht; }
  .vh-zeile:nth-child(3) .vh-k { white-space: nowrap; }
  .vh-v { font-size: 22px; }
  .vh-v.tief { font-size: 17px; }
  .vh-regen { grid-area: regen; margin-top: 4px; }

  /* Jalousienleiste: zwei Fenster je Zeile, Knoepfe voll breit */
  /* Eine Jalousie je Zeile: Fenster links, Knoepfe rechts - 180 px
     Mindestbreite zweimal nebeneinander gingen ueber den Rand hinaus. */
  .jf-raster { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .jf { padding: 10px; min-width: 0; }
  .jf-koerper { flex-direction: column; gap: 8px; }
  .jf-fenster { height: 104px; flex: none; }
  .jf-knoepfe { flex-direction: row; gap: 6px; }
  .jf-knopf { width: auto; flex: 1; min-height: 40px; border-radius: 10px; }
  .jf-prozent { font-size: 22px; }
  .jf-kopf { margin-bottom: 8px; }
  .jf-gruppe { padding: 12px; gap: 10px; }
  .jf-knopf.breit { min-width: 0; height: 44px; }
  .ab-gruppe { padding: 12px; }
  .ab-schritt { min-width: 0; flex: 1 1 100%; }
  .detail { width: 100vw; max-height: 100vh; border-radius: 0; padding: 14px 12px; }
  .detail-kennzahlen { grid-template-columns: 1fr 1fr; }
}

/* Reiter nur fuers Telefon: Jalousien und Mehr. */
.rail-btn.nur-handy { display: none; }
.mehr-liste { display: flex; flex-direction: column; }
.mehr-zeile {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 4px;
  border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--ink);
  font: inherit; font-size: 16px; text-align: left; cursor: pointer;
}
.mehr-zeile:last-child { border-bottom: 0; }
.mehr-zeile svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.mehr-zeile span { flex: 1; }
.mehr-zeile i { font-style: normal; font-size: 22px; color: var(--ink-faint); }

/* Kompakte Kacheln am Telefon: Zahl statt Zifferblatt, zu zweit je Zeile. */
@media (max-width: 600px) {
  .panel.kompakt { padding: 0; min-width: 0; }
  .panel.kompakt hs-gauge, .panel.kompakt hs-status { display: block; }
  #wetter-jetzt-panel { order: -1; }          /* das Jetzt zuerst, wie in jeder Wetter-App */
  #view-wetter .hinweis-ruhig { display: none; } /* der Erklaertext zum Radar - am PC lesbar, am Telefon nur Laenge */
}
@media (max-width: 600px) { .panel.kompakt .ungueltig-grund { position: static; padding: 0 14px 10px; margin-top: -4px; } }

/* Kompaktanzeige "Jetzt" am Telefon: Wetter und Energie nebeneinander. */
@media (max-width: 600px) {
  .ku-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
  .ku-karte { min-width: 0; padding: 10px 10px 4px; border-radius: 14px; background: var(--surface);
    border: 1px solid var(--border); display: flex; flex-direction: column; }
  .ku-titel { display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
    font-family: 'Barlow Semi Condensed'; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
  .ku-titel .gruppen-quelle { font-size: 8.5px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ku-hero { margin: 2px 0 4px; }
  .ku-hero hs-gauge, .ku-hero hs-status { display: block; }
  .ku-hero hs-gauge::part(card), .ku-hero hs-status::part(card) { border: 0; background: transparent; box-shadow: none; padding: 6px 0 2px; }
  .ku-zeile { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 7px;
    padding: 7px 2px; border-top: 1px solid var(--border); font-size: 12px; }
  .ku-punkt { width: 7px; height: 7px; border-radius: 50%; }
  .ku-name { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ku-wert { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
  .ku-wert .u { font-weight: 400; color: var(--ink-faint); margin-left: 2px; font-size: 10px; }
  .ku-zeile.status-danger .ku-wert { color: var(--danger); }
  .ku-zeile.status-warning .ku-wert { color: var(--warning); }
}

@media (max-width: 600px) {
  .ku-mini { border-top: 1px solid var(--border); }
  .ku-mini:first-of-type { border-top: 0; }
  .ku-mini hs-gauge, .ku-mini hs-status { display: block; }
  .ku-mini hs-gauge::part(card), .ku-mini hs-status::part(card) { border: 0; background: transparent; box-shadow: none; }
}

/* Kompaktanzeige als Ringe: eine Kachel je Geraet, volle Breite. */
@media (max-width: 600px) {
  .ku-ringe { grid-template-columns: 1fr; }
  .ku-kachel { position: relative; min-width: 0; }
  .ku-kachel hs-ringe { display: block; }
  .ku-quelle { position: absolute; top: 11px; right: 34px; font-size: 8.5px; }
}

/* Zahlenreihe am Telefon (seit 19.10.2026): grosse Zahl, Bewertung, Name. */
@media (max-width: 600px) {
  .ku-ringe { grid-template-columns: 1fr; }
  .zr-kachel { padding: 12px 14px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
  .zr-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
  .zr-titel { font-family: 'Barlow Semi Condensed'; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
  .zr-kopf .gruppen-quelle { font-size: 8.5px; }
  .zr-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 10px 6px; }
  .zr-feld { min-width: 0; text-align: center; }
  .zr-zahl { font-family: 'Barlow Semi Condensed'; font-size: 30px; font-weight: 700; line-height: 1; color: var(--ink);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
  .zr-zahl small { font-size: 12px; font-weight: 500; color: var(--ink-dim); margin-left: 3px; }
  .zr-wort { margin-top: 4px; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; min-height: 11px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zr-name { margin-top: 2px; font-size: 10px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zr-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .zr-marke { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 11px;
    background: var(--bg-elevated); color: var(--ink-mid); }
  .zr-marke i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
  .zr-marke.ok i { background: var(--success); }
  .zr-marke.warn { color: var(--warning); } .zr-marke.warn i { background: var(--warning); }
  .zr-marke.bad { color: var(--danger); } .zr-marke.bad i { background: var(--danger); }
}

/* Vorhersage: am Telefon "Nacht" statt "kommende Nacht" - sonst stoesst es an "Tiefst". */
.vh-kurz { display: none; }
@media (max-width: 600px) {
  .vh-lang { display: none; } .vh-kurz { display: inline; }
  /* Bewertung zweizeilig statt abgeschnitten: "BFT 2 · LEICHTE BRISE" ist die Information. */
  .zr-wort { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }
  .zr-reihe { align-items: start; }
}

@media (max-width: 600px) {
  .zr-feld.ungueltig .zr-zahl { color: var(--ink-faint); }
  .zr-liste { padding: 6px 14px; }
  .zr-liste .meldung { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .zr-liste .meldung:last-child { border-bottom: 0; }
  .zr-liste .meldung-name { font-size: 13px; }
  .zr-liste .meldung-wert { font-size: 13px; }
}
@media (max-width: 600px) { .zr-marke.ungueltig { opacity: .45; } .zr-marke.ungueltig i { background: var(--ink-faint); } }

/* ── Schmale Fenster / Safari-Zoom (seit 19.10.2026) ───────────────────── */
/* Beim Seitenzoom am iPhone wird der Bildschirm in CSS-Pixeln schmaler
   (bei 150 % nur noch 260 px). Die Kopfzeile hatte rechts 135 px feste
   Breite und sprengte die Seite - alles rutschte nach rechts, die
   Reiterleiste verschwand. Sie darf nie breiter sein als die Seite. */
@media (max-width: 600px) {
  html, body { overflow-x: hidden; }
  .topbar { flex-wrap: nowrap; min-width: 0; gap: 8px; overflow: hidden; }
  .brand { min-width: 0; flex: 1 1 auto; }
  .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { flex: none; gap: 6px; }
  .theme-btn { padding: 6px 8px; }
}
@media (max-width: 330px) {
  .brand-name { display: none; }
  .theme-btn { display: none; }
  .zr-reihe { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
  .zr-zahl { font-size: 24px; }
}

/* ── Heizung (seit 19.10.2026) ─────────────────────────────────────────── */
.hz-modi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.hz-modus { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; min-height: 58px;
  border: 1px solid var(--surface-border); border-radius: var(--r-1); background: var(--surface); color: var(--ink-mid);
  cursor: pointer; text-align: left; font: inherit; }
.hz-modus:hover { border-color: var(--surface-strong); color: var(--ink); }
.hz-modus.aktiv { border-color: var(--gold); background: var(--panel-gold); color: var(--ink); }
.hz-modus-id { font-family: 'Barlow Semi Condensed'; font-weight: 700; font-size: 18px; color: var(--gold); line-height: 1; }
.hz-modus-name { font-size: 12px; line-height: 1.25; }
.hz-kopf { display: flex; flex-direction: column; gap: 8px; }
.hz-art b { display: block; font-family: 'Barlow Semi Condensed'; font-size: 18px; }
.hz-art span { color: var(--ink-mid); font-size: 13px; }
.hz-zeile { display: flex; gap: 12px; align-items: baseline; font-size: 13px; color: var(--ink-mid); }
.hz-k { flex: 0 0 76px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.hz-erzliste { display: flex; gap: 6px; flex-wrap: wrap; }
.hz-erz { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--surface-border); font-size: 12px; }
.hz-erz i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.hz-erz.ok i { background: var(--green); }
.hz-hinweis { margin: 0; font-size: 12px; color: var(--ink-dim); }
.hz-lage { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: 2px 8px;
  border-radius: var(--r-pill); border: 1px solid currentColor; white-space: nowrap; }
.hz-lage.ok { color: var(--green); }
.hz-lage.ruhig { color: var(--ink-dim); }
.hz-lage.warn { color: var(--amber); }
.hz-lage.bad { color: var(--red); }
.hz-grund { margin: -4px 0 10px; font-size: 13px; color: var(--ink-mid); }
.hz-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.hz-zahl { display: flex; flex-direction: column; gap: 2px; }
.hz-zahl b { font-family: 'Barlow Semi Condensed'; font-size: 30px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.hz-zahl b small { font-size: 13px; color: var(--ink-dim); margin-left: 3px; font-weight: 500; }
.hz-zahl span { font-size: 11px; color: var(--ink-dim); }
.hz-zahl.klickbar { cursor: pointer; }
.hz-stell { display: grid; grid-template-columns: 76px 1fr auto; gap: 6px 10px; align-items: center; font-size: 13px; margin-bottom: 8px; }
.hz-balken { height: 8px; border-radius: 4px; background: var(--surface-strong); overflow: hidden; }
.hz-balken i { display: block; height: 100%; background: var(--gold); transition: width .6s var(--ease); }
.hz-v { color: var(--ink-mid); font-variant-numeric: tabular-nums; text-align: right; }
.hz-befehl { font-size: 12px; color: var(--ink-mid); padding: 6px 10px; border-radius: var(--r-1); background: var(--surface); margin-bottom: 8px; }
.hz-befehl span { color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-right: 6px; }
.hz-befehl.gesperrt em { color: var(--amber); font-style: normal; }
.hz-kurve { width: 100%; height: auto; max-height: 230px; display: block; margin: 8px 0; }
.hz-gitter { stroke: var(--surface-border); stroke-width: 1; }
.hz-grenze { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.hz-achse { fill: var(--ink-faint); font-size: 11px; }
.hz-linie { fill: none; stroke: var(--gold); stroke-width: 2; }
.hz-hier { fill: var(--gold); }
.hz-ist { fill: none; stroke: var(--blue); stroke-width: 2; }
.hz-raeume { margin-bottom: 8px; }
.hz-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--ink-dim); }
.hz-knopf { font: inherit; font-size: 12px; padding: 6px 12px; border-radius: var(--r-1); border: 1px solid var(--surface-strong);
  background: var(--surface); color: var(--ink); cursor: pointer; }
.hz-knopf:hover:not([disabled]) { border-color: var(--gold); }
.hz-knopf[disabled] { opacity: .45; cursor: default; }
@media (max-width: 900px) { .hz-modi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .hz-modi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hz-zahl b { font-size: 26px; }
  .hz-zeile { flex-direction: column; gap: 4px; }
  .hz-zeile .hz-k { flex: none; }
}
@media (max-width: 900px) { #heizung .panel.col-6 { grid-column: span 12; } }

.hz-sonne { font-size: 12px; color: var(--ink-mid); margin: 4px 0 4px; }
.hz-sonne b { color: var(--ink); }
.hz-sonnenreihe { width: 100%; height: 34px; display: block; margin-bottom: 4px; }
.hz-sbalken { fill: var(--solar); opacity: .45; }
.hz-sbalken.vorbei { opacity: .18; }
.hz-sbalken.vorschau { opacity: 1; }
.hz-sonne-achse { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--ink-faint); margin-bottom: 6px; }

/* ---------- KNX-Test ---------- */
.kt-betrieb { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; }
.kt-an { font-weight: 700; color: var(--amber); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.kt-rest { font-family: 'Barlow Semi Condensed'; font-weight: 700; font-size: 16px; color: var(--ink); }
.panel-head .value.rot { color: var(--red); }
.kt-filter { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.kt-filter input[type="search"] { flex: 1 1 220px; background: var(--surface); border: 1px solid var(--surface-border);
  color: var(--ink); border-radius: var(--r-1); padding: 7px 10px; font: inherit; }
.kt-bereiche { display: flex; gap: 6px; flex-wrap: wrap; }
.kt-bereich { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--surface-border); background: var(--surface); color: var(--ink-mid); }
.kt-bereich i { font-style: normal; color: var(--ink-faint); margin-left: 4px; }
.kt-bereich.aktiv { border-color: var(--gold); color: var(--ink); background: var(--panel-gold); }
.kt-kanal { border: 1px solid var(--border); border-radius: var(--r-1); margin-bottom: 8px; padding: 8px 12px; }
.kt-kanal-kopf { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.kt-kanal-kopf b { font-family: 'Barlow Semi Condensed'; font-size: 15px; }
.kt-pa { font-size: 11px; margin-left: auto; }
/* Feste Breite fuer die Knoepfe: jede Zeile ist ein eigenes Raster, sonst
   stuenden die Werte bei Rueckmeldungen (nur Lesen) woanders als beim Stellwert. */
.kt-zeile { display: grid; grid-template-columns: 70px minmax(140px, 1fr) minmax(150px, 1fr) 300px; gap: 10px;
  align-items: center; padding: 5px 0; border-top: 1px solid var(--border); font-size: 13px; }
.kt-kanal-kopf + .kt-zeile { border-top: 0; }
.kt-ga { color: var(--ink-mid); }
.kt-name i { font-style: normal; font-size: 11px; }
.kt-wert { display: flex; flex-direction: column; line-height: 1.25; border-radius: var(--r-1); padding: 2px 4px; }
.kt-wert small { font-size: 11px; }
.kt-wert.neu { animation: kt-neu 1.2s var(--ease); }
@keyframes kt-neu { from { background: color-mix(in srgb, var(--gold) 30%, transparent); } to { background: transparent; } }
.kt-stell { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.kt-stell input[type=number] { width: 58px; }
.kt-gesperrt [data-kt-senden], .kt-gesperrt [data-kt-feld] { opacity: .35; pointer-events: none; }
@media (max-width: 600px) {
  .kt-zeile { grid-template-columns: 1fr auto; }
  .kt-name { grid-column: 1 / -1; order: -1; }
  .kt-stell { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Technikdatei ---------- */
.technik-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; font-size: 13px; }
.technik-kopf a { color: var(--gold); text-decoration: none; }
.technik-rahmen { display: block; width: 100%; height: calc(100dvh - 150px); min-height: 480px;
  border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); }

/* Zeitplan Waermepumpe */
.hz-zp-zeiten > span:last-child { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.hz-zp-zeiten label { display: inline-flex; gap: 6px; align-items: center; }
.hz-zp-zeiten input[type=time] { font: inherit; font-size: 13px; padding: 4px 6px; border-radius: var(--r-1);
  border: 1px solid var(--surface-strong); background: var(--panel); color: var(--ink); }
.hz-zp-prog { display: flex; flex-wrap: wrap; gap: 8px; }
.hz-knopf.aktiv { border-color: var(--gold); background: var(--panel-gold); color: var(--ink); }

/* Anmeldung im Reiter System (sitzung.js) */
.anm-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--surface-border); font-size: 14px; }
.anm-zeile small { color: var(--ink-dim); font-size: 12px; }
.anm-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin: 16px 0 6px; }
.anm-formen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.anm-formen form { display: flex; flex-direction: column; gap: 8px; }
.anm-formen input { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: var(--r-1); border: 1px solid var(--surface-strong); background: var(--surface); color: var(--ink); }

/* ── Reiter Heizung, neu 07.11.2026 ── nur Tokens, kein Hexwert */
#heizung .klickbar { cursor: pointer; }
.hz2-kopf { display: flex; flex-direction: column; gap: 14px; }
.hz2-satz { font-size: 20px; }
.hz2-satz b { font-weight: 600; }
.hz2-satz span { color: var(--ink-mid); }
.hz2-zahlen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.hz2-z { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-left: 1px solid var(--surface-strong); border-radius: 0; min-width: 0; }
.hz2-z:first-child { border-left: 0; padding-left: 0; }
.hz2-z.klickbar:hover { background: var(--surface); }
.hz2-z small { font-size: 11px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz2-z b { font-family: 'Barlow Semi Condensed'; font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.t-ok { color: var(--green); fill: var(--green); }
.t-bad { color: var(--red); fill: var(--red); }
.t-warn { color: var(--amber); fill: var(--amber); }
.t-ruhig, .t-dim, .t-grau { color: var(--ink-dim); fill: var(--ink-dim); }
.t-kuehl { color: var(--hz-rl); fill: var(--hz-rl); }
.t-warm { color: var(--amber); fill: var(--amber); }
.t-gut { color: var(--ink); fill: var(--ink); }

/* Anlagenbild */
.hz2-bild { padding: 8px 6px 4px; }
.hz2-bildrahmen { overflow-x: auto; }
.hz2-svg { display: block; width: 100%; height: auto; }
.hz2-svg text { fill: var(--ink); font-family: Barlow, sans-serif; }
.hz2-svg .t-k { font-size: 12px; letter-spacing: 2px; fill: var(--ink-mid); }
.hz2-svg .t-gross { font-size: 28px; font-weight: 700; }
.hz2-svg .t-gross2 { font-size: 22px; font-weight: 700; }
.hz2-svg .t-mittel { font-size: 16px; font-weight: 600; }
.hz2-svg .t-klein { font-size: 13px; }
.hz2-svg .t-vl { fill: var(--gly-vl); }
.hz2-svg .t-rl { fill: var(--hz-rl); }
.hz2-svg .t-ok { fill: var(--green); }
.hz2-svg .t-bad { fill: var(--red); }
.hz2-svg .t-warn { fill: var(--amber); }
.hz2-svg .t-dim, .hz2-svg .t-ruhig, .hz2-svg .t-grau { fill: var(--ink-dim); }
.hz2-svg .t-kuehl { fill: var(--hz-rl); }
.hz2-svg .t-warm { fill: var(--amber); }
.hz2-svg .t-gut { fill: var(--ink); }
.hz2-svg .t-fett { font-weight: 600; }
.hz2-svg .klickbar:hover text { text-decoration: underline; }
.hz2-box { fill: var(--surface); stroke: var(--surface-strong); stroke-width: 2; }
.hz2-box.ok { stroke: var(--green); }
.hz2-box.bad { stroke: var(--red); }
.hz2-box.kuehl { stroke: var(--hz-rl); }
.hz2-trenn { stroke: var(--surface-strong); }
.hz2-klick, .hz2-svg .klickbar { cursor: pointer; }
.hz2-klick:hover .hz2-box, .hz2-klick:hover .hz2-pumpe, .hz2-klick:hover .hz2-mischer { stroke: var(--gold); }
.r-vl, .r-rl { fill: none; }
.r-vl { stroke: var(--gly-vl); stroke-width: 5; }
.r-rl { stroke: var(--hz-rl); stroke-width: 4; }
.r-aus { opacity: .3; }
.r-fluss { fill: none; stroke: var(--ink); stroke-opacity: .45; stroke-width: 2; stroke-dasharray: 10 12; animation: hz2-fluss 1.2s linear infinite; }
@keyframes hz2-fluss { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .r-fluss { animation: none; } }
.hz2-pumpe { fill: var(--surface); stroke: var(--ink-faint); stroke-width: 3; }
.hz2-pumpe.an { stroke: var(--green); }
.hz2-pumpe.hand { stroke: var(--amber); }
.hz2-mischer { fill: var(--surface); stroke: var(--ink-faint); stroke-width: 2; }

/* Heute */
.hz2-heute { display: flex; flex-direction: column; gap: 10px; }
.hz2-heute.zp-aus .hz2-band { opacity: .45; }
.hz2-heute-kopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hz2-heute-kopf .hz2-wahl { flex: 1; }
.hz2-wahl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hz2-band { position: relative; height: 54px; border-radius: var(--r-1); overflow: hidden; background: var(--surface); }
.hz2-ab { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 12px; overflow: hidden; white-space: nowrap; }
.hz2-ab b { font-size: 13px; }
.hz2-ab small { font-size: 11px; opacity: .85; }
.hz2-ab.tag { background: var(--panel-gold); color: var(--gold); }
.hz2-ab.nacht { background: var(--surface-strong); color: var(--ink-mid); }
.hz2-ab:hover { outline: 1px solid var(--gold); outline-offset: -1px; }
.hz2-jetzt { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--ink); pointer-events: none; }
.hz2-jetzt i { position: absolute; top: 3px; left: 7px; font-size: 11px; font-style: normal; color: var(--ink); white-space: nowrap; }
.hz2-bandaus { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink); }
.hz2-achse { position: relative; height: 26px; font-size: 11px; color: var(--ink-faint); }
.hz2-achse > span { position: absolute; top: 4px; transform: translateX(-50%); }
.hz2-punkt { position: absolute; top: 0; transform: translateX(-50%); font: inherit; font-size: 12px; font-weight: 600; color: var(--gold);
  background: none; border: 1px solid transparent; border-radius: var(--r-1); padding: 2px 6px; cursor: pointer; white-space: nowrap; }
.hz2-punkt:hover { border-color: var(--gold); }
.hz-knopf.aktiv { border-color: var(--gold); background: var(--panel-gold); color: var(--ink); }

/* Räume */
.hz2-raum { display: grid; grid-template-columns: minmax(110px, 160px) 1fr 56px 84px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--surface-border); font-size: 14px; }
.hz2-raum:last-child { border-bottom: 0; }
.hz2-raum:hover > span:first-child { color: var(--ink); }
.hz2-raum > span:first-child { color: var(--ink-mid); }
.hz2-raum b { text-align: right; font-family: 'Barlow Semi Condensed'; font-size: 17px; font-variant-numeric: tabular-nums; }
.hz2-skala { position: relative; height: 8px; border-radius: 4px; background: var(--surface); }
.hz2-zone { position: absolute; top: 0; bottom: 0; opacity: .35; }
.hz2-zone.kuehl { background: var(--hz-rl); border-radius: 4px 0 0 4px; }
.hz2-zone.gut { background: var(--green); }
.hz2-zone.warm { background: var(--amber); border-radius: 0 4px 4px 0; }
.hz2-skala i { position: absolute; top: -4px; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%); border: 3px solid var(--bg); background: var(--ink); }
.hz2-skala i.kuehl { background: var(--hz-rl); }
.hz2-skala i.gut { background: var(--green); }
.hz2-skala i.warm { background: var(--amber); }

/* Mehr */
.hz2-mehr summary { display: flex; gap: 12px; align-items: baseline; cursor: pointer; list-style: none; }
.hz2-mehr summary::-webkit-details-marker { display: none; }
.hz2-mehr summary::before { content: '▸'; color: var(--gold); }
.hz2-mehr[open] summary::before { content: '▾'; }
.hz2-mehr summary span { color: var(--ink-dim); font-size: 13px; }
.hz2-mehr-inhalt { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.hz2-mehr-inhalt h3 { margin: 10px 0 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.hz2-kurven { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hz2-kurve-kopf { display: flex; justify-content: space-between; align-items: center; }
.hz2-service { margin-top: 12px; }
.hz2-stell { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; font-size: 13px; padding: 4px 0; }
.hz2-stell > span:first-child { color: var(--ink-mid); }
.hz2-stell b { font-variant-numeric: tabular-nums; }
.hz2-stell-bed { display: flex; gap: 6px; align-items: center; }

/* Stellfenster */
.hz2-pop { position: fixed; z-index: 60; width: min(420px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto;
  background: var(--card-bg); background-color: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.hz2-pop[hidden] { display: none; }
.hz2-pop-kopf { display: flex; justify-content: space-between; align-items: center; }
.hz2-pop-kopf b { font-size: 15px; }
.hz2-pop-zu { background: none; border: 0; color: var(--ink-dim); font-size: 16px; cursor: pointer; padding: 4px 8px; }
.hz2-pop-lage { margin: 0; color: var(--ink-mid); }
.hz2-pop-teil { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--surface-border); }
.hz2-pop .hz-k { flex: none; }
.hz2-pop input[type=time] { font: inherit; padding: 6px 8px; border-radius: var(--r-1); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); }
.hz2-pop a { color: var(--gold); }

@media (max-width: 900px) {
  .hz2-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hz2-z:nth-child(4) { border-left: 0; padding-left: 0; }
  .hz2-kurven { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hz2-satz { font-size: 17px; }
  .hz2-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hz2-z { border-left: 0; padding-left: 0; }
  .hz2-svg { min-width: 900px; }
  .hz2-raum { grid-template-columns: 1fr 64px 46px 76px; gap: 8px; }
  .hz2-pop { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; max-height: 75vh; border-radius: var(--r-2) var(--r-2) 0 0; }
}
@media (pointer: coarse) {
  .hz2-pop { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .hz2-pop .hz-knopf, .hz2-punkt { min-height: 40px; }
}

/* ── Haus (Startseite), neu 07.11.2026 ── nur Tokens */
#haus { align-content: start; }
.haus-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.haus-kopf b { font-size: 24px; font-weight: 600; }
.haus-kopf span { color: var(--ink-mid); font-size: 15px; }
.haus-uhr { font-family: 'Barlow Semi Condensed'; font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.haus-meld { display: flex; gap: 10px; flex-wrap: wrap; }
.haus-m { font: inherit; font-size: 14px; display: inline-flex; gap: 8px; align-items: baseline; padding: 9px 14px; border-radius: var(--r-1);
  border: 1px solid var(--surface-strong); background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; }
.haus-m.bad { border-color: color-mix(in srgb, var(--red) 55%, transparent); background: var(--danger-soft); }
.haus-m.bad b { color: var(--red); }
.haus-m.warn { border-color: color-mix(in srgb, var(--amber) 55%, transparent); background: var(--warning-soft); }
.haus-m.warn b { color: var(--amber); }
.haus-m.ok { cursor: default; border-color: color-mix(in srgb, var(--green) 40%, transparent); background: var(--success-soft); }
.haus-m.ok b { color: var(--green); }
.haus-kacheln { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; }
/* Jalousien in drei Ebenen, Licht "alles aus" (10.11.2026) */
.jw-haus { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.jw-haus b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 18px; }
.jw-haus small { color: var(--ink-dim); }
.jw-haus-knoepfe, .jw-eb-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.jw-eb-knoepfe { margin-left: 8px; }
.jf { position: relative; }
.jf-pos { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px; z-index: 5; padding: 6px; background: var(--panel-a); border: 1px solid var(--gold); border-radius: inherit; }
.jf-pos[hidden] { display: none; }
.jf-pos button { flex: 1; min-height: 0; border: 1px solid var(--surface-border); border-radius: 6px; background: var(--panel-a); color: var(--ink);
  font: 600 12px 'Barlow', sans-serif; cursor: pointer; }
.jf-pos button:hover { border-color: var(--gold); color: var(--gold); }
.jf-pos .jf-pos-zu { background: transparent; border-color: transparent; color: var(--ink-dim); font-weight: 500; }
.gruppen-kopf .haus-btn.klein { margin-left: 10px; }
@media (pointer: coarse) { .jf-pos button { font-size: 14px; } }
/* Deck "Homeserver Redesign" (10.11.2026): grosse Zahlen in Space Grotesk,
   Aufteilung als Balken, Geschosse auf einer Skala. */
.haus-gross { font-family: 'Space Grotesk', 'Barlow Semi Condensed', sans-serif !important; letter-spacing: -.02em; }
.haus-k h3 { font-family: 'Space Grotesk', 'Barlow', sans-serif; }
.haus-energie { grid-column: span 2; }
.en-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.en-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.en-titel { font-size: 13px; color: var(--ink-dim); }
.en-zahl { font-size: 52px; }
.en-balken { display: flex; gap: 3px; height: 12px; }
.en-balken i { border-radius: 0; min-width: 2px; }
.en-balken i:first-child { border-radius: 6px 0 0 6px; } .en-balken i:last-child { border-radius: 0 6px 6px 0; } .en-balken i:only-child { border-radius: 6px; }
.en-balken.leer { background: var(--e-schiene); border-radius: 6px; }
.en-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-mid); align-items: baseline; }
.en-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.en-legende b { color: var(--ink); font-weight: 600; }
.en-legende small { color: var(--ink-faint); }
.f-wp { background: var(--e-wp); } .f-ww { background: var(--e-ww); } .f-rest { background: var(--e-rest); }
.gs-raster { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px 10px; align-items: center; font-size: 13px; }
.gs-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--ink); }
.gs-schiene { position: relative; height: 10px; background: var(--e-schiene); border-radius: 5px; }
.gs-schiene i { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.gs-og { background: var(--gs-og); } .gs-eg { background: var(--gs-eg); } .gs-kg { background: var(--gs-kg); }
.gs-raster b { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.gs-achse { display: flex; justify-content: space-between; color: var(--ink-faint); margin-top: -4px; }
.gs-achse small { font-size: 11px; }
@media (max-width: 900px) { .haus-energie, .haus-breit { grid-column: 1 / -1; } }
@media (max-width: 600px) { .en-zwei { gap: 14px; } .en-zahl { font-size: 36px; } }
.haus-k { background: var(--card-bg); border: 1px solid var(--surface-border); border-radius: var(--r-4); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px; cursor: pointer; min-width: 0; transition: border-color var(--duration) var(--ease); }
.haus-k:hover, .haus-k:focus-visible { border-color: var(--gold); outline: none; }
.haus-k[data-haus-verlauf] { cursor: pointer; }
.haus-k.gross { grid-row: span 2; }
.haus-k h3 { margin: 0; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.haus-k h3 span { color: var(--ink-dim); letter-spacing: 0; text-transform: none; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.haus-gross { font-family: 'Barlow Semi Condensed'; font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.haus-gross small { font-size: 16px; color: var(--ink-mid); font-weight: 500; margin-left: 6px; }
.haus-zeilen { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; color: var(--ink-mid); }
.haus-zeilen b { color: var(--ink); font-weight: 600; text-align: right; }
.haus-ebene { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; display: flex; justify-content: space-between; }
.haus-ebene span { letter-spacing: 0; text-transform: none; }
.haus-jal { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.haus-jal i { height: 38px; border-radius: 5px; background: var(--surface-strong); position: relative; overflow: hidden; border: 1px solid var(--surface-border); }
.haus-jal i.unbek { opacity: .4; }
.haus-jal u { position: absolute; left: 0; right: 0; top: 0; background: repeating-linear-gradient(180deg, var(--ink-dim) 0 3px, transparent 3px 5px); }
.haus-knoepfe { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.haus-btn { flex: 1; font: inherit; font-size: 13px; font-weight: 600; padding: 10px 8px; border-radius: var(--r-1); border: 1px solid var(--surface-strong);
  background: var(--surface); color: var(--ink); cursor: pointer; min-height: 44px; }
.haus-btn:hover { border-color: var(--gold); }
.haus-btn.an { border-color: var(--gold); background: var(--panel-gold); color: var(--gold); }
.haus-k .ok, .haus-k .t-ok { color: var(--green); }
.haus-k .warn { color: var(--amber); }
.haus-k .bad, .haus-k .t-bad { color: var(--red); }
.haus-k .kuehl { color: var(--hz-rl); }
.haus-k .dim, .haus-k .t-ruhig, .haus-dim { color: var(--ink-dim); }
@media (max-width: 900px) { .haus-kacheln { grid-template-columns: 1fr 1fr; } .haus-k.gross { grid-row: auto; grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .haus-kopf b { font-size: 19px; } .haus-kopf span { display: none; } .haus-uhr { font-size: 22px; }
  .haus-kacheln { gap: 10px; } .haus-k { padding: 12px 14px; } .haus-gross { font-size: 32px; }
  .haus-k:not(.gross) .haus-zeilen span:nth-of-type(n+3), .haus-k:not(.gross) .haus-zeilen b:nth-of-type(n+3) { display: none; }
}
/* Nachtrag Haus: alte Übersichtskacheln wirklich verbergen, Behänge in einer Reihe. */
.grid-deck[hidden] { display: none !important; }
.haus-jal { display: flex !important; gap: 5px; }
.haus-jal i { flex: 1 1 0; min-width: 0; max-width: 46px; }
.haus-zeilen b { justify-self: end; }
.haus-zeilen > * { margin: 0; padding: 0; background: none; border: 0; line-height: 1.45; }
/* Anlagenbild lesbarer (07.11.2026, Betreiber: "schlecht lesbar .. linien gehen durch zeichen"):
   Symbole und Kästen deckend, damit keine Leitung durchscheint; Schrift größer. */
.hz2-pumpe, .hz2-mischer { fill: var(--bg); }
.hz2-box { fill: color-mix(in srgb, var(--surface-strong) 35%, var(--bg)); }
.hz2-svg .t-klein { font-size: 14.5px; }
.hz2-svg .t-mittel { font-size: 18px; }
.hz2-svg .t-k { font-size: 13px; }
.hz2-svg text { paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.hz2-svg .hz2-klick text, .hz2-svg g.klickbar text { stroke-width: 0; }

/* ── Anlagenbild als Raster (07.11.2026) ── nur Tokens */
.hz3 { display: grid; grid-template-columns: 230px 100px 96px minmax(290px, 1fr) minmax(320px, 410px);
  grid-template-rows: repeat(var(--zeilen), minmax(150px, auto)); row-gap: 18px; align-items: stretch; padding: 6px 4px; }
.hz3 .klickbar { cursor: pointer; }
.hz3-k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mid); }
.hz3-klein { font-size: 13px; color: var(--ink-dim); }
.hz3 b { font-weight: 600; font-variant-numeric: tabular-nums; }
.t-vl { color: var(--gly-vl); }
.t-rl { color: var(--hz-rl); }

/* Wärmepumpe und Weiche über alle Zeilen, mittig */
.hz3-wp { grid-column: 1; grid-row: 1 / -1; align-self: center; border: 2px solid var(--surface-strong); border-radius: var(--r-4);
  background: color-mix(in srgb, var(--surface-strong) 35%, var(--bg)); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.hz3-wp.ok { border-color: var(--green); }
.hz3-wp.bad { border-color: var(--red); }
.hz3-wp:hover, .hz3-weiche:hover, .hz3-kreis-kopf:hover { border-color: var(--gold); }
.hz3-zustand { font-family: 'Barlow Semi Condensed'; font-size: 32px; font-weight: 700; line-height: 1.05; }
.hz3-leistung { font-size: 16px; font-weight: 600; }
.hz3-liste { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--surface-strong); font-size: 14px; }
.hz3-liste dt { color: var(--ink-dim); }
.hz3-liste dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.hz3-weiche { grid-column: 3; grid-row: 1 / -1; align-self: center; height: 190px; border: 2px solid var(--surface-strong); border-radius: var(--r-3);
  background: color-mix(in srgb, var(--surface-strong) 35%, var(--bg)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.hz3-weiche-wert { font-family: 'Barlow Semi Condensed'; font-size: 30px; font-weight: 700; }

/* Leitungen: zwei Balken, Vorlauf oben, Rücklauf unten */
.hz3-zu, .hz3-leitung { position: relative; min-height: 150px; }
.hz3-zu { grid-column: 2; grid-row: 1 / -1; align-self: center; height: 150px; }
.hz3-leitung { grid-column: 4; }
.hz3-rohr { position: absolute; left: 0; right: 0; height: 5px; border-radius: 3px; }
.hz3-rohr.vl { top: 38%; background: var(--gly-vl); }
.hz3-rohr.rl { top: 68%; height: 4px; background: var(--hz-rl); }
.hz3-rohr:not(.fliesst) { opacity: .3; }
.hz3-rohr.fliesst { background-image: repeating-linear-gradient(90deg, transparent 0 12px, color-mix(in srgb, var(--ink) 45%, transparent) 12px 20px);
  background-size: 40px 100%; animation: hz3-fluss 1.4s linear infinite; }
.hz3-rohr.rl.fliesst { animation-direction: reverse; }
@keyframes hz3-fluss { to { background-position: 40px 0; } }
@media (prefers-reduced-motion: reduce) { .hz3-rohr.fliesst { animation: none; } }
.hz3-t { position: absolute; font-size: 14px; white-space: nowrap; line-height: 1.2; }
.hz3-t b { font-size: 18px; }
.hz3-t small { font-size: 13px; color: var(--ink-dim); margin-left: 4px; }
.hz3-zu .hz3-t { left: 50%; transform: translateX(-50%); }
.hz3-zu .oben { top: calc(38% - 30px); }
.hz3-zu .mitte { top: calc(53% - 9px); font-size: 13px; color: var(--ink-dim); }
.hz3-zu .unten { top: calc(68% + 12px); }
.hz3-pumpe, .hz3-mischer { position: absolute; top: calc(38% + 2.5px); transform: translate(-50%, -50%); cursor: pointer; font: inherit; }
.hz3-pumpe { left: 14%; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink-faint); background: var(--bg); color: var(--ink-dim); font-weight: 700; font-size: 16px; }
.hz3-pumpe.an { border-color: var(--green); color: var(--green); }
.hz3-pumpe.hand { border-color: var(--amber); color: var(--amber); }
.hz3-mischer { left: 40%; width: 48px; height: 30px; padding: 3px; border: 0; background: var(--bg); border-radius: 6px; }
.hz3-mischer svg { width: 100%; height: 100%; display: block; }
.hz3-mischer path { fill: var(--bg); stroke: var(--ink-faint); stroke-width: 2.5; stroke-linejoin: round; }
.hz3-pumpe:hover, .hz3-mischer:hover path { border-color: var(--gold); stroke: var(--gold); }
.pumpe-t { left: 14%; transform: translateX(-50%); top: calc(38% - 46px); }
.mischer-t { left: 40%; transform: translateX(-50%); top: calc(38% - 46px); }
.vl-t { right: 12px; top: calc(38% + 11px); }
.rl-t { right: 14px; top: calc(68% + 12px); }

/* Kreiskarten: gleich groß, gleiche Zeilen */
.hz3-kreis { grid-column: 5; border: 2px solid var(--surface-strong); border-radius: var(--r-4); background: color-mix(in srgb, var(--surface-strong) 35%, var(--bg));
  padding: 12px 16px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hz3-kreis.kuehl { border-color: var(--hz-rl); }
.hz3-kreis-kopf { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline; padding-bottom: 8px;
  border-bottom: 1px solid var(--surface-strong); border-radius: 0; }
.hz3-kreis-kopf b { font-size: 20px; }
.hz3-kreis-kopf span:last-child { font-size: 13px; }
.hz3-raeume { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; align-content: start; }
.hz3-raum { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; padding: 3px 0; min-width: 0; }
.hz3-raum span { color: var(--ink-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz3-raum:hover span { color: var(--ink); }
.hz3-raum b { flex: none; }
.hz3 .t-kuehl { color: var(--hz-rl); }
.hz3 .t-warm { color: var(--amber); }

/* schmaler: Wärmepumpe und Weiche oben, darunter je Kreis Leitung über Karte */
@media (max-width: 1150px) {
  .hz3 { grid-template-columns: 1fr 110px 120px; grid-template-rows: auto; row-gap: 12px; }
  .hz3-wp { grid-column: 1; grid-row: 1; }
  .hz3-zu { grid-column: 2; grid-row: 1; }
  .hz3-weiche { grid-column: 3; grid-row: 1; height: 160px; }
  .hz3-leitung { grid-column: 1 / -1; grid-row: auto !important; min-height: 120px; }
  .hz3-kreis { grid-column: 1 / -1; grid-row: auto !important; }
}
@media (max-width: 600px) {
  .hz3 { grid-template-columns: 1fr 76px 92px; }
  .hz3-wp { padding: 12px; }
  .hz3-zustand { font-size: 26px; }
  .hz3-liste { font-size: 13px; }
  .hz3-weiche-wert { font-size: 24px; }
  .hz3-raeume { grid-template-columns: 1fr; }
  .vl-t, .rl-t { right: 4px; }
}
/* Beide Kreise gleich hoch - EG und KG + OG sehen gleich aus. */
.hz3 { grid-template-rows: repeat(var(--zeilen), minmax(150px, 1fr)); }
@media (max-width: 1150px) { .hz3 { grid-template-rows: none; } }
@media (max-width: 600px) {
  .hz3 { grid-template-columns: 1fr 110px; }
  .hz3-wp { grid-column: 1 / -1; grid-row: 1; }
  .hz3-zu { grid-column: 1; grid-row: 2; height: 130px; }
  .hz3-weiche { grid-column: 2; grid-row: 2; height: 130px; }
}

/* ── Anlage als Raster (07.11.2026, Entwurf heizung-entwurf2.html) ── nur Tokens */
.hz2-bild { padding: 6px 0; }
.hz4 { display: grid; grid-template-columns: 22px 170px 130px 120px 170px 130px 150px minmax(0, 1fr); align-items: stretch; }
.hz4-kopf, .hz4-zeile { display: contents; }
.hz4-kopf > div { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 10px 10px; }
.hz4-z { padding: 14px 10px; border-top: 1px solid var(--surface-border); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hz4-z.klickbar { cursor: pointer; }
.hz4-z.klickbar:hover { background: var(--surface); }
.hz4-stufe b { font-size: 17px; font-weight: 600; }
.hz4-stufe small { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.hz4-w { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hz4-w small { font-size: 12px; font-weight: 400; color: var(--ink-dim); margin-left: 5px; }
.hz4-n { font-size: 12px; color: var(--ink-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.hz4 .t-ok { color: var(--green); } .hz4 .t-bad { color: var(--red); } .hz4 .t-warn { color: var(--amber); }
.hz4 .t-dim, .hz4 .t-ruhig { color: var(--ink-dim); } .hz4 .t-vl { color: var(--gly-vl); } .hz4 .t-rl, .hz4 .t-kuehl { color: var(--hz-rl); }
/* ruhiger Fluss-Hinweis: durchgehender dünner Balken mit einem Punkt je Stufe */
.hz4-fluss { position: relative; border-top: 1px solid transparent; }
.hz4-fluss i { position: absolute; left: 9px; width: 4px; top: 0; bottom: 0; background: var(--gly-vl); opacity: .5; }
.hz4-zeile:nth-child(2) .hz4-fluss i { top: 50%; border-radius: 3px 3px 0 0; }
.hz4-zeile:last-child .hz4-fluss i { bottom: 50%; border-radius: 0 0 3px 3px; }
.hz4-fluss u { position: absolute; left: 5px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gly-vl); }

@media (max-width: 1100px) {
  .hz4 { grid-template-columns: 22px 140px 110px 100px 140px 120px 120px minmax(0, 1fr); }
}
/* Telefon und schmale Tablets: jede Stufe eine Karte, Werte als Paare */
@media (max-width: 900px) {
  .hz4 { display: block; }
  .hz4-kopf { display: none; }
  .hz4-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 14px 16px; border-top: 1px solid var(--surface-border); }
  .hz4-zeile:nth-child(2) { border-top: 0; }
  .hz4-z { padding: 0; border: 0; display: block; }
  .hz4-z.leer, .hz4-fluss { display: none; }
  .hz4-stufe, .hz4-z[data-k="Räume"] { grid-column: 1 / -1; }
  .hz4-z[data-k]::before { content: attr(data-k); display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
  .hz4-n, .hz4-stufe small { display: block; }
}

/* ── Einrichtung: Geräte, System, Mehr, KNX-Unterreiter (07.11.2026, Entwurf einstellungen-entwurf.html) ── nur Tokens */
#view-einstellungen .t-ok, #view-system .t-ok, .mehr-liste .t-ok { color: var(--green); }
#view-einstellungen .t-bad, #view-system .t-bad, .mehr-liste .t-bad { color: var(--red); }
#view-einstellungen .t-warn, #view-system .t-warn, .mehr-liste .t-warn { color: var(--amber); }
#view-einstellungen .t-dim, #view-system .t-dim { color: var(--ink-dim); }
.ger-kopf { padding: 0 2px 4px; }
.ger-titel { font-family: 'Barlow Semi Condensed'; font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.ger-summe { color: var(--ink-dim); margin: 0 0 14px; font-size: 14px; }
.ger-karte { margin-bottom: 12px; padding: 0 !important; overflow: hidden; }
.ger-gw { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 18px; }
.ger-gw b, .ger-plan b { font-size: 16px; font-weight: 600; }
.ger-n { font-size: 12px; color: var(--ink-dim); margin-top: 2px; overflow-wrap: anywhere; }
.ger-chip { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.ger-z { display: grid; grid-template-columns: minmax(0, 1fr) 120px 80px 46px; gap: 12px; align-items: center;
  padding: 10px 18px 10px 26px; border-top: 1px solid var(--surface-border); font-size: 14px; }
.ger-z.klickbar { cursor: pointer; }
.ger-z.klickbar:hover, .ger-z.offen { background: var(--surface); }
.ger-unter { padding-left: 50px; }
.ger-r { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.ger-pfeil { color: var(--gold); display: inline-block; width: 16px; }
.ger-punkte { padding: 4px 18px 12px 50px; background: var(--surface); }
.ger-z.ruht { color: var(--ink-mid); }
.ger-plan:first-child > .ger-z:first-child { border-top: 0; }
.ger-plan + .ger-plan > .ger-z:first-child { border-top: 1px solid var(--surface-strong); }
.ger-abschnitt { font-family: 'Barlow Semi Condensed'; font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin: 22px 0 10px; }
.ger-katalog { padding: 14px 18px !important; }
.ger-katalog summary { cursor: pointer; color: var(--ink-mid); list-style: none; }
.ger-katalog summary::-webkit-details-marker { display: none; }
.ger-katalog summary::before { content: '▸ '; color: var(--gold); }
.ger-katalog[open] summary::before { content: '▾ '; }
.ger-katalog[open] summary { margin-bottom: 10px; }
.gu-zahlen { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 8px; }
.gu-zahlen b { display: block; font-family: 'Barlow Semi Condensed'; font-size: 28px; font-weight: 700; }
.gu-zahlen span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.gu-zeile { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid var(--surface-border); font-size: 14px; }
.gu-zeile span:last-child { color: var(--ink-dim); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.mehr-gruppe { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 18px 4px 2px; }
.mehr-gruppe:first-child { margin-top: 0; }
.mehr-zeile b { font-weight: 500; }
.mehr-zeile small { display: block; font-size: 12px; color: var(--ink-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mehr-zeile span { min-width: 0; }
.unterreiter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.unterreiter button { padding: 7px 16px; border: 1px solid var(--surface-strong); border-radius: var(--r-pill); background: transparent;
  color: var(--ink-mid); font: inherit; font-size: 14px; cursor: pointer; }
.unterreiter button.an { border-color: var(--gold); color: var(--gold); }
#view-knx[data-tab="abgleich"] #knx-teilnehmer-panel, #view-knx:not([data-tab="abgleich"]) #knx-abgleich-panel { display: none; }
.rail-btn[hidden] { display: none !important; }
@media (max-width: 700px) {
  .ger-gw { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; row-gap: 4px; }
  .ger-gw .ger-chip { grid-column: 1; grid-row: 2; }
  .ger-gw .schalter { grid-column: 2; grid-row: 1; }
  .ger-z { grid-template-columns: minmax(0, 1fr) auto 46px; padding: 10px 14px; gap: 8px; }
  .ger-z > span:nth-child(3) { display: none; }
  .ger-unter { padding-left: 28px; }
  .ger-punkte { padding: 4px 12px 10px 14px; }
  .gu-zeile { flex-direction: column; gap: 2px; }
  .gu-zeile span:last-child { text-align: left; }
}

/* ── Verlauf (07.11.2026, Entwurf verlauf-entwurf.html) ── nur Tokens; Reihenfarben siehe app.js */
.vl-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.vl-kopf .ger-titel { flex: 1; margin: 0; }
.vl-kopf .unterreiter, .vl-ansichten { margin: 0; }
.vl-ansichten { margin-bottom: 14px; }
.vl-seite { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.vl-karte { margin-bottom: 12px; }
.vl-ptitel { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.vl-ptitel b { font-family: 'Barlow Semi Condensed'; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.vl-ptitel span { font-size: 12px; color: var(--ink-faint); }
.vl-svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; }
.vl-gitter { stroke: var(--surface-border); }
.vl-gitter.senk { opacity: .6; }
.vl-achse { fill: var(--ink-faint); font-size: 11px; }
.vl-bandgrund { fill: var(--surface); }
.vl-fang { fill: transparent; cursor: crosshair; }
.vl-faden { stroke: var(--ink-mid); stroke-width: 1; opacity: .6; pointer-events: none; }
.vl-hover { pointer-events: none; }
.vl-tip { fill: var(--bg); stroke: var(--surface-strong); }
.vl-tip-zeit { fill: var(--ink-mid); font-size: 12px; }
.vl-tip-wert { fill: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.vl-leg { display: grid; grid-template-columns: 18px minmax(0, 1fr) 90px 64px 64px; gap: 3px 10px; font-size: 13px; margin-top: 8px; align-items: center; }
.vl-leg .k { color: var(--ink-faint); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-align: right; }
.vl-leg .r { text-align: right; font-variant-numeric: tabular-nums; }
.vl-leg .jetzt { font-weight: 600; }
.vl-leg .jetzt .u { margin-left: 3px; font-weight: 400; color: var(--ink-dim); }
.vl-leg .vl-anteil { grid-column: span 2; color: var(--ink-dim); }
.vl-leg small { color: var(--ink-faint); margin-left: 4px; }
.vl-leg i { display: block; width: 16px; height: 0; border-top: 3px solid; }
.vl-leg i.str { border-top-style: dashed; }
.vl-leg i.band { height: 10px; border-top: 0; border-left: 16px solid; border-radius: 2px; }
.vl-wahl { position: sticky; top: 10px; max-height: calc(100vh - 120px); overflow-y: auto; }
.vl-wahl-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.vl-wahl-kopf b { font-family: 'Barlow Semi Condensed'; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.vl-fertig { display: none; }
.vl-suche { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: var(--r-1); border: 1px solid var(--surface-strong);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; margin-bottom: 6px; }
.vl-gr, .vl-wz { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink-mid);
  font: inherit; text-align: left; cursor: pointer; }
.vl-gr { padding: 9px 2px; border-top: 1px solid var(--surface-border); font-size: 14px; }
.vl-gr::before { content: '▸'; color: var(--gold); width: 12px; }
.vl-gr.offen::before { content: '▾'; }
.vl-gr span:first-of-type { flex: 1; }
.vl-gr .n { color: var(--ink-faint); font-size: 12px; }
.vl-wz { padding: 5px 2px 5px 20px; font-size: 13px; }
.vl-wz:hover { background: var(--surface); }
.vl-wz > b { flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--ink-faint); }
.vl-wz > span:nth-of-type(1) { flex: 1; min-width: 0; }
.vl-wz small { color: var(--ink-faint); }
.vl-wz.an > span:nth-of-type(1) { color: var(--ink); }
.vl-wz .wert { color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vl-wz .wert .u { margin-left: 2px; }
.vl-klein { font-size: 12px; color: var(--ink-faint); margin-top: 10px; line-height: 1.45; }
.vl-alle { display: block; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--gold); font: inherit; cursor: pointer; }
.vl-plus { display: none; }
@media (max-width: 900px) {
  .vl-seite { grid-template-columns: minmax(0, 1fr); }
  .vl-plus { display: block; width: 100%; padding: 12px; margin: 4px 0 12px; border: 1px solid var(--gold); border-radius: var(--r-1);
    background: transparent; color: var(--gold); font: inherit; font-weight: 600; cursor: pointer; }
  .vl-wahl { display: none; }
  .vl-wahl.blatt { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; max-height: 78vh;
    border-radius: var(--r-4) var(--r-4) 0 0; background: var(--card-bg); background-color: var(--bg); padding: 16px; box-shadow: var(--shadow-2); }
  .vl-wahl.blatt .vl-fertig { display: block; padding: 6px 14px; border: 1px solid var(--gold); border-radius: var(--r-pill);
    background: transparent; color: var(--gold); font: inherit; cursor: pointer; }
  .vl-leg { grid-template-columns: 14px minmax(0, 1fr) auto; font-size: 12px; }
  .vl-leg .x { display: none; }
  .vl-ptitel span { display: none; }
  .vl-ansichten { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vl-ansichten button { flex: none; }
}

.vl-bandtext { fill: var(--ink); font-size: 10.5px; font-weight: 600; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; pointer-events: none; }
@media (max-width: 600px) {
  .vl-kopf .ger-titel { flex: 1 1 100%; }
  .vl-kopf #zeitraum { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vl-kopf #zeitraum button { flex: none; padding: 6px 12px; font-size: 13px; }
}

/* ── System als ein Knopf mit Unterreitern (07.11.2026, Entwurf system-entwurf.html) ── */
.sys-kopf { margin: 0 0 6px; }
.sys-kopf .ger-titel { margin: 0 0 10px; }
.sys-tabs { margin-bottom: 14px; }
.vl-kopf { justify-content: flex-end; }
#view-technik .technik-rahmen { height: calc(100dvh - 210px); }
@media (max-width: 600px) {
  .sys-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sys-tabs button { flex: none; }
}

/* ── Wetter im Werte-Stil (07.11.2026, Entwurf wetter-entwurf.html) ─────────
   Je Messwert Zahl + Wort + 24-h-Verlauf, Ja/Nein als Marke mit 24-h-Band.
   Jeder Abschnitt sagt, ob seine Zahlen gemessen oder gerechnet sind; die
   Vorhersage ist bewusst anders gezeichnet (gestrichelt, kein Verlauf,
   keine grossen Zahlen). Klassen mit ww-, weil .wert, .vh-* und .warn
   anderswo schon belegt sind. */
.ww { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.ww-kopf { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ww-kopf .ger-titel { margin: 0; font-size: 26px; }
.ww-ort { color: var(--text-muted); }
.ww-abschnitt { display: flex; flex-direction: column; gap: 12px; }
.ww-abschnitt[hidden] { display: none; }
.ww-ab-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ww-ab-kopf h2 { font: 700 13px 'Barlow Semi Condensed'; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0; }
.ww-ab-rest { display: contents; }
.ww-quelle { color: var(--text-subtle); font-size: 12px; }
.ww-linie { flex: 1; height: 1px; background: var(--border); min-width: 20px; }
.ww-art { font: 700 11px 'Barlow Semi Condensed'; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px; }
.ww-art.mess { color: var(--success); background: var(--success-soft); }
.ww-art.mess::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.ww-art.rech { color: var(--text-muted); border: 1px dashed var(--vh-rand); }
.ww-verb { font-size: 12px; color: var(--success); }
.ww-verb.weg { color: var(--danger); }
.ww-verb-stand { font-size: 12px; color: var(--text-subtle); margin-left: -6px; }

#wetter-jetzt { display: flex; flex-direction: column; gap: 16px; }
.ww-werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ww-wert { background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-1); border-radius: var(--r-4);
  padding: 16px 18px 12px; display: grid; grid-template-rows: auto auto 1fr; gap: 6px; cursor: pointer; min-width: 0; }
.ww-wert.alt .ww-zahl { color: var(--text-subtle); }
.ww-wert-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ww-wert-name { font-size: 13px; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.ww-mm { display: flex; flex-direction: column; align-items: flex-end; font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; line-height: 1.35; white-space: nowrap; }
.ww-zahl { font: 600 50px 'Barlow Semi Condensed'; line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.ww-zahl small { font-size: 18px; color: var(--text-muted); font-weight: 500; margin-left: 5px; letter-spacing: 0; }
.ww-wort { font: 700 12px 'Barlow Semi Condensed'; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.ww-verlauf { align-self: end; margin-top: 6px; }
.ww-spark { display: block; width: 100%; height: 54px; overflow: visible; }
.ww-null { stroke: var(--text-subtle); stroke-dasharray: 3 4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ww-tag { stroke: var(--surface-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ww-achse { position: relative; display: flex; justify-content: space-between; font-size: 10px; color: var(--text-subtle); margin-top: 2px; letter-spacing: .04em; }
.ww-achse .ww-mn { position: absolute; transform: translateX(-50%); }

.ww-marken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ww-marke { background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-1); border-radius: var(--r-2);
  padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0; }
.ww-marke-kopf { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ww-marke-kopf i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-subtle); }
.ww-marke.ok .ww-marke-kopf i { background: var(--success); }
.ww-marke.info .ww-marke-kopf i { background: var(--rampe-t0); }
.ww-marke.warn .ww-marke-kopf i { background: var(--warning); }
.ww-marke.bad .ww-marke-kopf i { background: var(--danger); }
.ww-marke.bad { border-color: var(--danger); }
.ww-marke.warn { border-color: var(--warning); }
.ww-marke-hinweis, .ww-marke-anteil { font-size: 11px; color: var(--text-subtle); }
.ww-band { display: grid; grid-template-columns: repeat(96, 1fr); height: 8px; border-radius: 3px; overflow: hidden; background: var(--surface); margin-top: 4px; }
.ww-band i { background: currentColor; }

.ww-vh { border: 1px dashed var(--vh-rand); border-radius: var(--r-4); background: var(--vh-grund); padding: 6px 18px; }
.ww-vh-spalten, .ww-vh-zeile { display: grid; grid-template-columns: 120px minmax(0, 1fr) 64px 64px 64px 80px; align-items: center; gap: 12px; }
.ww-vh-spalten { font: 600 11px 'Barlow Semi Condensed'; letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); padding: 8px 0 6px; border-bottom: 1px solid var(--surface-border); }
.ww-vh-spalten > span:nth-child(n+3) { text-align: right; }
.ww-vh-zeile { padding: 10px 0; border-bottom: 1px solid var(--surface-border); }
.ww-vh-tag b { display: block; font-weight: 600; font-size: 15px; }
.ww-vh-tag small, .ww-vh-wort small, .ww-vh-regen small { display: block; color: var(--text-subtle); font-size: 11px; }
.ww-vh-tag .ww-vhw { display: none; color: var(--text-muted); font-size: 12px; }
.ww-vh-wort { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-muted); }
.ww-vh-wort > span:last-child { min-width: 0; }
.ww-vh-sym { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text-muted); flex: none; font-size: 14px; }
.ww-vh-v { text-align: right; font: 600 20px 'Barlow Semi Condensed'; font-variant-numeric: tabular-nums; }
.ww-vh-v.hoch { color: var(--text); }
.ww-vh-v.tief { color: var(--rampe-t0); }
.ww-vh-v.leer { color: var(--text-subtle); font-weight: 400; }
.ww-vh-regen { text-align: right; }
.ww-vh-regen b { font-weight: 600; color: var(--text-muted); }
.ww-vh-regen.nass b { color: var(--blue); }
.ww-vh-zeile.heute .ww-vh-tag b { color: var(--gold); }
.ww-vergleich { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); padding: 10px 0 8px; }
.ww-vergleich b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ww-vergleich .rech b { font-style: italic; font-weight: 500; color: var(--text-muted); }

.ww-warnliste { display: flex; flex-direction: column; gap: 10px; }
.ww-warn { display: flex; gap: 12px; border-radius: var(--r-2); padding: 12px 16px; background: var(--warning-soft); border: 1px solid var(--warning); }
.ww-warn-balken { width: 4px; border-radius: 2px; background: var(--warning); flex: none; }
.ww-warn b { display: block; }
.ww-warn small { color: var(--text-muted); }
.ww-laeuft { color: var(--warning); font-weight: 600; }
.ww-warn.rot { background: var(--danger-soft); border-color: var(--danger); }
.ww-warn.rot .ww-warn-balken { background: var(--danger); }
.ww-warn.rot .ww-laeuft { color: var(--danger); }

.ww-radar { border-radius: var(--r-4); border-color: var(--border); }
.ww .radar-leiste { margin-top: 0; font-size: 12px; color: var(--text-subtle); }
.ww-knopf { font: 600 12px Barlow; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--surface-border); background: var(--surface); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.ww-radar-zeit { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .ww { gap: 18px; }
  .ww-kopf .ger-titel { font-size: 22px; }
  .ww-ort { font-size: 12px; }
  .ww-ab-rest { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; flex-wrap: wrap; }
  .ww-zeit { display: none; }
  .ww-mm span:first-child::after { content: ' ·'; }
  .ww-mm { flex-direction: row; gap: 8px; }
  /* Wert als Zeile: Zahl links, Verlauf rechts - drei Werte auf 300 px */
  #wetter-jetzt { gap: 10px; }
  .ww-werte { grid-template-columns: 1fr; gap: 10px; }
  .ww-wert { grid-template-columns: minmax(0, 1fr) 128px; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; padding: 12px 14px; border-radius: var(--r-2); }
  .ww-wert-kopf { grid-column: 1 / -1; }
  .ww-zahl { font-size: 38px; } .ww-zahl small { font-size: 15px; }
  .ww-wort { font-size: 11px; }
  .ww-verlauf { margin: 0; align-self: center; }
  .ww-spark { height: 44px; }
  .ww-achse .ww-mn { display: none; }
  .ww-marken { grid-template-columns: 1fr; gap: 8px; }
  .ww-marke { display: grid; grid-template-columns: minmax(0, 1fr) 128px; column-gap: 12px; row-gap: 2px; padding: 9px 12px; }
  .ww-marke-hinweis { grid-column: 1; grid-row: 2; }
  .ww-marke .ww-band { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
  .ww-marke-anteil { grid-column: 2; grid-row: 2; text-align: right; }
  .ww-vh { padding: 2px 12px; }
  .ww-vh-spalten, .ww-vh-zeile { grid-template-columns: minmax(0, 1fr) 44px 44px 44px 48px; gap: 4px; }
  .ww-vh-spalten { letter-spacing: .03em; font-size: 10px; }
  .ww-vh-spalten > span:nth-child(2) { display: none; }
  .ww-vh-wort { display: none; }
  .ww-vh-v { font-size: 18px; }
  .ww-vh-tag .ww-vhw { display: block; }
  .ww-vergleich { gap: 4px 14px; font-size: 12px; }
  .radar-ort span { font-size: 11px; }
}

/* ── Pool im Werte-Stil (07.11.2026, Entwurf pool-entwurf.html) ─────────────
   Dieselben Bausteine wie das Wetter (.ww-wert, .ww-zahl, .ww-wort,
   .ww-spark, .ww-band, .ww-achse); hier nur, was der Pool zusätzlich hat:
   Kurven mit zwei Arten (Messwert mit Durchfluss / Standwert ohne),
   Kanisterkacheln, Meldeliste und Sollwertskalen. Klassen mit pw-. */
.ww-sp-lauf { fill: none; stroke: var(--blue); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.ww-sp-stand { fill: none; stroke: var(--ink-faint); stroke-width: 1.6; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ww-sp-fluss { fill: var(--blue); opacity: .12; }
.ww-sp-punkt { fill: var(--blue); }
.ww-sp-punkt.grau { fill: var(--ink-faint); }

.pw-kopf { justify-content: space-between; }
.pw-quelle { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.pw-quelle .ww-verb, .pw-quelle [data-alter] { font-size: 13px; }
.pw-quelle [data-alter] { color: var(--text-subtle); }
.pw-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; margin-right: 2px; }
.pw-punkt.weg { background: var(--danger); }
.pw-satz { margin: -8px 0 0; font-size: 16px; color: var(--text-muted); max-width: 900px; line-height: 1.4; }
.pw-satz b { color: var(--text); font-weight: 600; }
.pw .c-red { color: var(--danger); font-weight: 600; }
.pw .c-amber { color: var(--warning); }
.pw .c-green { color: var(--success); }
.pw .c-dim { color: var(--text-subtle); }
.pw .pw-satz .c-amber { font-weight: 600; }

.pw-werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pw-wert { min-height: 196px; }
.pw-mm { font-size: 11px; color: var(--text-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-wortzahl { font-size: 40px; line-height: 50px; }
.pw-stand { display: none; color: var(--text-subtle); letter-spacing: .14em; }
/* Ohne Durchfluss: grau, nicht versteckt; das Wort wird STANDWERT.
   gueltigkeitNachfuehren() schaltet .ungueltig live um. */
.pw-wert.ungueltig .pw-bew { display: none; }
.pw-wert.ungueltig .pw-stand { display: block; }
.pw-wert.ungueltig .ww-zahl, .pw-wert.ungueltig .ww-zahl small { color: var(--text-subtle); }
.pw .ungueltig-grund { display: none; }
.pw-fluss.pw-warn { border-color: color-mix(in srgb, var(--warning) 55%, transparent);
  background: linear-gradient(var(--warning-soft), var(--warning-soft)), var(--card-bg); }
.pw-band { height: 14px; border-radius: 4px; background: var(--surface-strong); color: var(--blue); margin-top: 0; }
.pw-legende { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--text-subtle); margin-top: -2px; }
.pw-legende span { display: flex; align-items: center; gap: 6px; }
.pw-legende svg { width: 22px; height: 8px; }
.pw-lg-lauf { stroke: var(--blue); stroke-width: 2.2; }
.pw-lg-stand { stroke: var(--ink-faint); stroke-width: 1.6; stroke-dasharray: 3 3; }

/* Kanister: Wort + die Schwellen, aus denen es entsteht */
.pw-vorrat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pw-kan, .pw-karte { background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-1); border-radius: var(--r-4); min-width: 0; }
.pw-kan { padding: 16px 18px; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 18px; align-items: center; cursor: pointer; }
.pw-kan.pw-warn { border-color: color-mix(in srgb, var(--warning) 55%, transparent); }
.pw-lbl { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-muted); }
.pw-lbl span:last-child { color: var(--text-subtle); font-size: 12px; white-space: nowrap; }
.pw-kan .pw-wortzahl { font-size: 30px; line-height: 36px; }
.pw-schw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; font-size: 13px; color: var(--text-muted); }
.pw-schw b { font-weight: 600; color: var(--text); text-align: right; white-space: nowrap; }
.pw-schw b.c-red { color: var(--danger); }

.pw-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pw-liste { padding: 6px 0; overflow: hidden; }
.pw-mz { display: grid; grid-template-columns: minmax(0, 1fr) auto 118px; gap: 12px; align-items: center; padding: 9px 18px; border-top: 1px solid var(--surface-border); font-size: 14px; cursor: pointer; }
.pw-mz:first-child { border-top: 0; }
.pw-mz-wert { color: var(--text-subtle); text-align: right; }
.pw-mz-seit { color: var(--text-subtle); font-size: 12px; text-align: right; }
.pw-mz.warnung { background: var(--warning-soft); }
.pw-mz.warnung .pw-mz-wert { color: var(--warning); font-weight: 600; }
.pw-mz.alarm { background: var(--danger-soft); }
.pw-mz.alarm .pw-mz-wert { color: var(--danger); font-weight: 600; }
.pw-mz.alarm .pw-mz-name::before, .pw-mz.warnung .pw-mz-name::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.pw-mz.alarm .pw-mz-name::before { background: var(--danger); }
.pw-mz.warnung .pw-mz-name::before { background: var(--warning); }

.pw-soll { padding: 6px 18px 14px; }
.pw-sw { padding: 10px 0 14px; cursor: pointer; }
.pw-sw + .pw-sw { border-top: 1px solid var(--surface-border); }
.pw-sw-kopf { display: flex; justify-content: space-between; font-size: 14px; }
.pw-sw-kopf b { font: 600 18px 'Barlow Semi Condensed'; font-variant-numeric: tabular-nums; }
.pw-skala { position: relative; height: 6px; border-radius: 3px; background: var(--surface-strong); margin: 12px 0 8px; }
.pw-sk-band { position: absolute; top: 0; bottom: 0; background: var(--success); opacity: .55; border-radius: 3px; }
.pw-sk-soll { position: absolute; top: -4px; width: 2px; height: 14px; margin-left: -1px; background: var(--gold); }
.pw-sk-ist { position: absolute; top: -5px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px var(--bg); }
.pw-sw.ungueltig .pw-sk-ist { background: var(--ink-faint); }
.pw-sw.ungueltig .pw-sw-kopf b { color: var(--text-subtle); }
.pw-sw-achse { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.pw-sw-achse small { display: block; font-size: 11px; color: var(--text-subtle); }
.pw-geraet { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--surface-border); padding-top: 12px; margin-top: 4px; }
.pw-geraet b { color: var(--text); font-weight: 600; text-align: right; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.pw-geraet b[data-kachel] { cursor: pointer; }
.pw-hinw { grid-column: 1 / -1; font-size: 12px; color: var(--text-subtle); margin-top: 4px; }

@media (max-width: 1100px) {
  .pw-werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-zwei { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pw-quelle { font-size: 12px; }
  .pw-quelle .ww-verb, .pw-quelle [data-alter] { font-size: 12px; }
  .pw-lang, .pw-breit, .pw-mm, .pw-lbl span:last-child { display: none; }
  .pw-satz { font-size: 14px; margin-top: -10px; }
  .pw-werte { gap: 10px; }
  /* Am Telefon bleibt die Kachel eine Kachel (zwei je Zeile), nicht die
     Wetterzeile mit dem Verlauf rechts. */
  .pw .ww-wert { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; row-gap: 4px; padding: 12px 14px; border-radius: var(--r-2); min-height: 150px; }
  .pw .ww-verlauf { align-self: end; margin-top: 4px; }
  .pw .ww-spark { height: 36px; }
  .pw .ww-zahl { font-size: 36px; } .pw .ww-zahl small { font-size: 15px; }
  .pw .pw-wortzahl { font-size: 30px; line-height: 36px; }
  .pw .ww-wort { font-size: 11px; letter-spacing: .08em; }
  .pw-legende { gap: 6px 14px; }
  .pw-vorrat { grid-template-columns: 1fr; gap: 10px; }
  .pw-kan { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; border-radius: var(--r-2); }
  .pw-kan .pw-wortzahl { font-size: 26px; line-height: 30px; }
  .pw-liste { padding: 4px 0; }
  .pw-mz { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 14px; gap: 1px 10px; }
  .pw-mz-wert { grid-column: 1; text-align: left; font-size: 12px; }
  .pw-mz-seit { grid-column: 2; grid-row: 1 / span 2; }
  .pw-mz-seit:empty { display: none; }
  .pw-soll { padding: 4px 14px 12px; }
}

/* ── Jalousien mit Automatik (07.11.2026, Entwurf jalousien-entwurf.html) ──
   Je Gruppe mit gleichem Programm eine Karte: Jalousien links, Ablauf
   Morgen/Abend rechts; am Telefon steht der Ablauf über den Jalousien.
   Die Kacheln sind die bekannten .jf (Behang fährt live, Fahrt mit "≈"),
   nur kleiner gesetzt. Farben ausschließlich aus Tokens. */
.jw { --jw-gold-soft: color-mix(in srgb, var(--gold) 12%, transparent); }
.jw-karte { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-1); }
.jw-leer { padding: 16px 18px; color: var(--text-subtle); font-size: 14px; }

/* Leiste oben: Helligkeit, Achse, als Nächstes */
.jw-licht { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 28px; align-items: center; padding: 18px 22px; }
.jw-licht-wert, .jw-achse { cursor: pointer; }
.jw-gross { font: 700 44px/1 'Barlow Semi Condensed'; font-variant-numeric: tabular-nums; }
.jw-gross small { font: 500 18px Barlow; color: var(--text-muted); margin-left: 4px; }
.jw-wort { font: 700 13px 'Barlow Semi Condensed'; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }
.jw-quelle { font-size: 12px; color: var(--text-subtle); margin-top: 2px; }
.jw-quelle .alter { font-size: inherit; font-weight: 400; }
.jw-achse { position: relative; height: 58px; }
.jw-bahn { position: absolute; left: 0; right: 0; top: 26px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--surface-strong), color-mix(in srgb, var(--blue) 30%, var(--surface))); }
.jw-bereich { position: absolute; top: 22px; height: 16px; border-radius: 4px; border: 1px dashed var(--gold); background: var(--jw-gold-soft); }
.jw-bereich-name { position: absolute; top: 0; font-size: 12px; color: var(--gold); white-space: nowrap; transform: translateX(-50%); }
.jw-ist { position: absolute; top: 20px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--gold);
  border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--gold); transition: left 1s var(--ease); }
.jw-dek { position: absolute; top: 42px; font-size: 11px; color: var(--text-subtle); transform: translateX(-50%); white-space: nowrap; }
.jw-dek:first-of-type { transform: none; }
.jw-dek:last-of-type { transform: translateX(-100%); }
.jw-naechst { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.jw-naechst b { font-weight: 600; }
.jw-titel { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
.jw-n { color: var(--text-muted); font-size: 13px; }
.jw-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.jw-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--surface-border); color: var(--text-muted); cursor: pointer; }
.jw-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-subtle); }
.jw-chip.ok i { background: var(--success); }
.jw-chip.warn i { background: var(--warning); }
.jw-chip.bad { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.jw-chip.bad i { background: var(--danger); }

/* Gruppe */
.jw-gruppe { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.jw-gr-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.jw-gr-kopf b { font-size: 17px; font-weight: 600; }
.jw-gr-kopf small { display: block; color: var(--text-subtle); font-size: 12px; margin-top: 1px; }
.jw-sammel { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.jw-sammel .jf-knoepfe { flex-direction: row; gap: 6px; }
.jw-sammel .jf-knopf { width: 48px; flex: none; min-height: 40px; border-radius: 12px; }
.jw-gr-rumpf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }

/* Kacheln: .jf, kleiner gesetzt */
.jw-jals { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.jw-ohne .jw-jals { grid-template-columns: repeat(auto-fill, minmax(124px, 148px)); }
.jw-jals .jf { padding: 10px; border-radius: 14px; min-width: 0; display: flex; flex-direction: column; }
.jw-jals .jf:hover { transform: none; }
.jw-jals .jf-kopf { margin-bottom: 8px; }
.jw-jals .jf-name { font-size: 11px; letter-spacing: .06em; }
.jw-jals .jf-koerper { flex-direction: column; gap: 8px; flex: 1; }
.jw-jals .jf-fenster { height: 76px; flex: none; border-width: 2px; }
.jw-jals .jf-knoepfe { flex-direction: row; gap: 6px; margin-top: auto; }
.jw-jals .jf-knopf { width: auto; flex: 1; min-height: 36px; border-radius: 10px; }
.jw-jals .jf-knopf svg { width: 18px; height: 18px; }
.jw-jals .jf-fuss { margin-top: 8px; }
.jw-jals .jf-prozent { font-size: 20px; }
.jw-jals .jf-prozent small { font-size: 11px; }
.jw-jals .jf-frage { font-size: 9px; text-align: center; padding: 0 4px; }

/* Ablauf */
.jw-ablauf { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.jw-spur-titel { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 6px; }
.jw-spur-titel svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jw-schritte { display: flex; flex-direction: column; gap: 6px; }
.jw-sch { display: grid; grid-template-columns: 132px 104px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 12px;
  border-radius: 12px; border: 1px solid var(--surface-border); background: var(--surface); }
.jw-st { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.jw-st i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-subtle); }
.jw-st small { font-weight: 400; color: var(--text-muted); }
.jw-wenn { font-size: 13px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.jw-tat { font-size: 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jw-tat > span { display: flex; gap: 7px; align-items: baseline; }
.jw-tat svg { width: 15px; height: 15px; flex: none; align-self: center; fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jw-tat small { color: var(--text-subtle); font-size: 12px; }
.jw-zuletzt { font-size: 12px; color: var(--text-subtle); margin-top: 2px; }
.jw-fortschritt { height: 4px; border-radius: 2px; background: var(--surface-strong); margin-top: 5px; overflow: hidden; }
.jw-fortschritt i { display: block; height: 100%; background: var(--warning); transition: width 1s var(--ease); }
.jw-sch.erledigt .jw-st { color: var(--success); } .jw-sch.erledigt .jw-st i { background: var(--success); }
.jw-sch.erledigt .jw-tat { color: var(--text-muted); }
.jw-sch.naechste { border-color: var(--gold); background: var(--jw-gold-soft); }
.jw-sch.naechste .jw-st { color: var(--gold); } .jw-sch.naechste .jw-st i { background: var(--gold); }
.jw-sch.danach .jw-st, .jw-sch.aus .jw-st { color: var(--text-subtle); }
.jw-sch.aus { opacity: .6; }
.jw-sch.wartet, .jw-sch.laeuft { border-color: var(--warning); background: var(--warning-soft); }
.jw-sch.wartet .jw-st, .jw-sch.laeuft .jw-st { color: var(--warning); }
.jw-sch.wartet .jw-st i, .jw-sch.laeuft .jw-st i { background: var(--warning); animation: blink 1.2s step-end infinite; }
.jw-sch.gesperrt { border-color: var(--danger); background: var(--danger-soft); }
.jw-sch.gesperrt .jw-st { color: var(--danger); } .jw-sch.gesperrt .jw-st i { background: var(--danger); }
.jw-sch.unbekannt .jw-st { color: var(--warning); } .jw-sch.unbekannt .jw-st i { background: transparent; border: 2px solid var(--warning); }

/* Ohne Ablauf, Regeln */
.jw-ohne { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.jw-ohne-titel { font-size: 13px; color: var(--text-muted); }
.jw-regeln summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.jw-regeln summary::-webkit-details-marker { display: none; }
.jw-regeln summary::after { content: "▸"; color: var(--text-subtle); }
.jw-regeln[open] summary::after { content: "▾"; }
.jw-regeln summary small { font-weight: 400; color: var(--text-subtle); margin-left: 8px; }
.jw-tab { overflow-x: auto; padding-bottom: 6px; }
.jw-tab table { width: 100%; border-collapse: collapse; font-size: 13px; }
.jw-tab th, .jw-tab td { text-align: left; padding: 8px 18px 8px 0; border-top: 1px solid var(--surface-border); vertical-align: top; }
.jw-tab th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); font-weight: 500; }
.jw-tab td:first-child, .jw-tab th:first-child { padding-left: 18px; }
.jw-tab td:nth-child(3), .jw-tab td:last-child { white-space: nowrap; color: var(--text-muted); }
.jw-tab .jw-weg { color: var(--text-muted); }
.jw-lage { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.jw-lage i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-subtle); }
.jw-lage.ausgeloest i { background: var(--success); }
.jw-lage.wartet i, .jw-lage.unbekannt i { background: var(--warning); }
.jw-lage.gesperrt { color: var(--danger); } .jw-lage.gesperrt i { background: var(--danger); }

@media (max-width: 1100px) {
  .jw-gr-rumpf { grid-template-columns: 1fr; }
  .jw-licht { grid-template-columns: 1fr 1fr; }
  .jw-licht .jw-achse { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 600px) {
  .jw-licht { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .jw-licht .jw-achse { order: 0; }
  .jw-gross { font-size: 38px; }
  .jw-gruppe { padding: 14px; }
  .jw-gr-kopf { flex-direction: column; align-items: stretch; }
  .jw-sammel { justify-content: space-between; }
  .jw-sammel .jf-knoepfe { flex: 0 0 60%; }
  .jw-sammel .jf-knopf { flex: 1; width: auto; min-height: 44px; }
  .jw-jals, .jw-ohne .jw-jals { grid-template-columns: 1fr 1fr; }
  .jw-jals .jf-knopf { min-height: 44px; }
  .jw-ablauf { order: -1; }
  .jw-sch { grid-template-columns: auto 1fr; gap: 4px 10px; padding: 9px 11px; }
  .jw-wenn { text-align: right; }
  .jw-tat { grid-column: 1 / -1; }
  .jw-tab .jw-weg { display: none; }
}
@media (pointer: coarse) { .jw-jals .jf-knopf, .jw-sammel .jf-knopf { min-height: 44px; } }

/* ── Wärmepumpen in der Heizung (07.11.2026, Entwurf waermepumpen-entwurf.html) ── nur Tokens */
.hz4-sprung { font-size: 12px; color: var(--gold); margin-top: 3px; }
.hz4-zeile.grau .hz4-fluss i { background: var(--ink-faint); opacity: .35; }
.hz4-zeile.grau .hz4-fluss u { border-color: var(--ink-faint); }
.hz4-zeile.grau > .hz4-z:not(.hz4-fluss), .hz4-zeile.grau .hz4-w, .hz4-zeile.grau .hz4-stufe b { color: var(--ink-faint); }
.hw { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hw .t-ok { color: var(--green); } .hw .t-bad { color: var(--red); } .hw .t-warn { color: var(--amber); } .hw .t-dim { color: var(--ink-dim); }
.hw .vl { color: var(--gly-vl); } .hw .rl { color: var(--hz-rl); } .hw .sole { color: var(--sole); }
.hw-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hw-tab { font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-width: 0;
  border: 1px solid var(--surface-border); background: var(--surface); border-radius: 14px; padding: 10px 14px; }
.hw-tab b { display: block; font-size: 16px; font-weight: 600; }
.hw-tab span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-tab span i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.hw-tab.online span i { background: var(--green); }
.hw-tab.getrennt span { color: var(--red); } .hw-tab.getrennt span i { background: var(--red); }
.hw-tab.geplant span i { background: transparent; border: 1px dashed var(--ink-faint); }
.hw-tab:hover { border-color: var(--surface-strong); }
.hw-tab.aktiv { border-color: var(--gold); background: var(--card-bg); box-shadow: inset 0 -3px 0 var(--gold); }
.hw-panel { padding: 0 !important; overflow: hidden; }
.hw-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 16px 18px 4px; }
.hw-kopf > b { font-size: 18px; font-weight: 600; }
.hw-q { font-size: 12px; color: var(--ink-dim); }
.hw-q > i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 5px; }
.hw-q.weg > i { background: var(--red); } .hw-q .weg { color: var(--red); }
.hw-q .alter { font-size: 12px; font-weight: 400; color: inherit; } .hw-q .alter.alt { color: var(--amber); }
.hw [hidden] { display: none !important; }
.hw-weg.wp-offline, .hw .wp-offline { margin: 8px 18px 4px; }
.hw-hinweis { margin: 6px 18px; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--surface-strong); color: var(--ink-mid); font-size: 13px; }
.hw-hinweis b { color: var(--ink); }
.hw-block { padding: 6px 18px 16px; }
.hw-block-name { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 10px 0 8px; }
.hw .w { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 17px; }
.hw .w.alt { color: var(--ink-faint); opacity: 1; }
.hw .n { display: block; color: var(--ink-dim); font-size: 12px; margin-top: 2px; }
.hw .klickbar { cursor: pointer; }
.hw .klickbar:hover { background: var(--surface); }
/* Stellbar: goldener Stift, überall gleich */
.hw .hw-stift .w::after { content: "✎"; font-size: 12px; color: var(--gold); margin-left: 6px; font-weight: 400; }
.hw-stellen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.hw-stellen > div { border: 1px solid var(--surface-border); border-radius: 12px; padding: 9px 12px; min-width: 0; }
.hw-stellen > div.hw-stift { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.hw-stellen small, .hw-betrieb small { display: block; font-size: 11px; color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-stellen .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-weg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--surface-border); border-radius: 14px; overflow: hidden; }
.hw-weg.hw-weg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hw-st { border-left: 1px solid var(--surface-border); min-width: 0; }
.hw-st:first-child { border-left: 0; }
.hw-st-kopf { padding: 10px 12px 9px; background: var(--surface); border-bottom: 1px solid var(--surface-border); display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.hw-st-kopf > b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-st-kopf .pf { margin-left: auto; color: var(--ink-faint); font-size: 14px; flex: none; }
.hw-st:last-child .hw-st-kopf .pf { display: none; }
.hw-st-kopf .z { font-size: 12px; flex: none; }
.hw-st-kopf .z .w { font-size: 12px; font-weight: 500; color: inherit; }
.hw-wz { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--surface-border); min-width: 0; }
.hw-st-kopf + .hw-wz { border-top: 0; }
.hw-wz > span { font-size: 13px; color: var(--ink-mid); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-wz .w { font-size: 15px; white-space: nowrap; }
.hw-wz.neben > span { color: var(--ink-faint); } .hw-wz.neben .w { font-weight: 500; color: var(--ink-mid); }
.hw-betrieb { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.hw-betrieb > div { padding: 8px 12px; border-radius: 12px; background: var(--surface); min-width: 0; }
.hw-betrieb .w { font-size: 15px; }
.hw-betrieb .hz-knopf { margin-top: 6px; }
.hw-fuss { font-size: 12px; color: var(--ink-faint); padding: 0 18px 16px; }
.hw-bedienung { margin: 0; }
/* Nicht angeschlossen oder getrennt: grau, Striche, kein Rot */
.hw-panel.geplant .w, .hw-panel.weg .w { color: var(--ink-faint); }
.hw-panel.weg .hw-st-kopf .z { color: var(--ink-faint); }
@media (max-width: 1100px) {
  .hw-stellen, .hw-betrieb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hz4-zeile.grau > .hz4-z:not(.hz4-stufe):not([data-k="Zustand"]) { display: none; }
  .hz4-sprung { display: block; }
  .hw-weg, .hw-weg.hw-weg-4 { grid-template-columns: 1fr; }
  .hw-st { border-left: 0; border-top: 1px solid var(--surface-border); }
  .hw-st:first-child { border-top: 0; }
  .hw-st-kopf .pf { transform: rotate(90deg); }
}
@media (max-width: 600px) {
  .hw-tabs { gap: 6px; }
  .hw-tab { padding: 8px 10px; }
  .hw-tab b { font-size: 14px; }
  .hw-tab span { font-size: 11px; white-space: normal; align-items: flex-start; }
  .hw-tab span i { margin-top: 4px; }
  .hw-stellen, .hw-betrieb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-kopf, .hw-block { padding-left: 14px; padding-right: 14px; }
  .hw-hinweis, .hw .wp-offline { margin-left: 14px; margin-right: 14px; }
  .hw-fuss { padding-left: 14px; padding-right: 14px; }
}

/* Raumsollwert (07.11.2026): Strich auf der Skala, Knopf rechts */
.hz2-skala .hz2-soll-marke { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); opacity: .7; }
.hz2-soll { font: inherit; font-size: 13px; padding: 4px 8px; border-radius: var(--r-1); border: 1px solid var(--surface-border); background: transparent; color: var(--ink-mid); cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hz2-soll.stellbar { border-color: var(--gold-deep); color: var(--gold); }
.hz2-soll:hover { color: var(--ink); }

/* Licht: Kachel auf der Startseite und Reiter Beleuchtung (07.11.2026) */
.haus-licht { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 13px; color: var(--ink); }
.haus-btn.klein { flex: none; padding: 4px 12px; font-size: 12px; min-height: 0; }
.haus-k .t-gold { color: var(--gold); }
.li-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-mid); }
.li-kopf b { color: var(--gold); font-size: 22px; font-family: 'Barlow Semi Condensed'; }
.li-kopf .haus-btn { flex: none; }
.li-szenen { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; border: 1px dashed var(--surface-strong); border-radius: var(--r-2); color: var(--ink-dim); font-size: 13px; }
.li-szenen b { color: var(--ink-mid); }
.li-zeile { display: grid; grid-template-columns: 1fr 52px 64px; grid-template-areas: "n z k" "r r r"; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--surface-border); font-size: 14px; }
.li-zeile:last-child { border-bottom: 0; }
.li-name { grid-area: n; color: var(--ink-mid); }
.li-zeile.ist-an .li-name { color: var(--ink); }
.li-z { grid-area: z; text-align: right; font-size: 13px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.li-z.an { color: var(--gold); font-weight: 600; }
.li-z.unbek { color: var(--ink-faint); }
.li-btn, .li-gesperrt { grid-area: k; }
.li-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 0; border-radius: var(--r-1); border: 1px solid var(--surface-strong); background: transparent; color: var(--ink); cursor: pointer; }
.li-btn.an { border-color: var(--gold); background: var(--panel-gold); color: var(--gold); }
.li-btn:disabled { opacity: .5; }
.li-gesperrt { font-size: 12px; color: var(--ink-faint); text-align: center; }
.li-regler { grid-area: r; width: 100%; accent-color: var(--gold-deep); }
@media (max-width: 1080px) { .li-raum.col-4 { grid-column: span 6; } }
@media (max-width: 600px) { .li-raum.col-4 { grid-column: 1 / -1; } .li-kopf { flex-direction: column; align-items: stretch; } }
@media (pointer: coarse) { .haus-btn.klein { min-height: 36px; } .li-btn { min-height: 40px; } }

/* Leuchte umbenennen (07.11.2026) */
.li-lg { color: var(--ink-faint); font-size: 11px; font-weight: 400; white-space: nowrap; }
.li-stift { background: none; border: 0; padding: 0 4px; margin-left: 2px; color: var(--ink-faint); cursor: pointer; font-size: 13px; }
.li-stift:hover { color: var(--gold); }
.li-edit { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--surface-border); align-items: center; }
.li-edit input { font: inherit; font-size: 14px; padding: 7px 9px; border-radius: var(--r-1); border: 1px solid var(--surface-strong); background: var(--surface); color: var(--ink); min-width: 0; }
.li-edit input:focus { outline: none; border-color: var(--gold); }
.li-edit .li-btn { padding: 7px 10px; }
.li-edit button[type="submit"] { grid-column: 1 / 3; }
@media (pointer: coarse) { .li-stift { padding: 6px 10px; font-size: 16px; } .li-edit input { font-size: 16px; } }

/* Reiter Licht: was gerade an ist, oben als Leiste (07.11.2026) */
.li-an { display: flex; flex-wrap: wrap; gap: 8px; }
.li-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; border: 1px solid var(--gold-deep); background: var(--panel-gold); color: var(--ink); font-size: 14px; }
.li-chip small { color: var(--ink-dim); font-size: 11px; letter-spacing: .08em; }
.li-chip i { font-style: normal; color: var(--gold); font-variant-numeric: tabular-nums; }
.li-chip button { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--surface-strong); background: var(--card-bg); color: var(--ink); cursor: pointer; }
.li-chip button:hover { border-color: var(--gold); }
.li-chip button:disabled { opacity: .5; }
@media (pointer: coarse) { .li-chip button { min-height: 34px; padding: 4px 14px; } }

/* Poolabdeckung */
.pw-deckel { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 14px 16px; }
.pw-deckel-z { display: flex; flex-direction: column; gap: 2px; }
.pw-deckel-z b { font-size: 22px; font-weight: 600; }
.pw-deckel-z small { color: var(--ink-dim); font-size: 12px; }
.pw-deckel-k { display: flex; gap: 8px; }
.pw-deckel-k .li-btn { min-width: 84px; min-height: 44px; }

/* Poolabdeckung als Bild */
.pw-deckel-bild { flex: 1 1 340px; max-width: 560px; width: 100%; height: auto; display: block; }
.pw-deckel-bild .pd-rand { fill: var(--surface); stroke: var(--surface-border); stroke-width: 1.5; }
.pw-deckel-bild .pd-wasser { fill: var(--blue); opacity: .28; }
.pw-deckel-bild .pd-wellen path { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: .5; animation: pd-welle 6s linear infinite; }
.pw-deckel-bild .pd-wellen path:nth-child(2n) { animation-duration: 8s; animation-direction: reverse; }
@keyframes pd-welle { from { transform: translateX(0); } to { transform: translateX(-48px); } }
.pw-deckel-bild .pd-deckel { transition: transform 2s linear; }
.pw-deckel-bild .pd-latten rect { fill: var(--ink-faint); stroke: var(--surface-strong); stroke-width: .8; }
.pw-deckel-bild .pd-kante { fill: var(--gold); }
.pw-deckel-bild .pd-pfeil path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.pw-deckel-bild.laeuft .pd-pfeil path { animation: pd-blink 1s ease-in-out infinite; }
.pw-deckel-bild.laeuft.auf .pd-pfeil { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
@keyframes pd-blink { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.pw-deckel-bild .pd-welle { fill: var(--surface-strong); stroke: var(--gold-deep); stroke-width: 1.5; }
.pw-deckel-bild .pd-welle-l { stroke: var(--gold); stroke-width: 2; opacity: .6; }
.pw-deckel-bild.unbek .pd-deckel { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .pw-deckel-bild * { animation: none !important; transition: none !important; } }
/* Bild wie vom Haus aus gesehen: Welle rechts (Betreiber 08.11.2026) */
.pw-deckel-bild { transform: rotate(180deg); }

/* KNX-Test: Kanaele benennen */
.kt-stift { background: none; border: 0; color: var(--gold); cursor: pointer; font-size: 15px; padding: 2px 6px; min-height: 28px; }
.kt-name-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kt-name-form input { font: inherit; font-size: 15px; padding: 6px 10px; border-radius: var(--r-1); border: 1px solid var(--gold-deep); background: var(--surface); color: var(--ink); min-width: 220px; }

.kt-nachtrag summary { cursor: pointer; padding: 4px 0; }
.kt-nachtrag pre { white-space: pre-wrap; font-size: 13px; line-height: 1.5; color: var(--ink-mid); max-height: 60vh; overflow: auto; margin: 12px 0 0; }

/* Wasser auf der Startseite: sieben Tage als Balken */
.haus-wasser { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 64px; margin-top: 10px; }
.haus-wasser span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; min-width: 0; }
.haus-wasser i { display: block; width: 100%; max-width: 22px; background: var(--blue); border-radius: 3px 3px 0 0; }
.haus-wasser i.leer { background: none; }
.haus-wasser small { font-size: 10px; color: var(--ink-dim); }

/* Zaehlwerk wie an der Wasseruhr: m³ dunkel, Liter rot */
.wu-liste { display: flex; flex-direction: column; gap: 8px; }
.wu-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wu-name { display: flex; flex-direction: column; font-size: 13px; color: var(--ink-mid); min-width: 0; }
.wu-name small { font-size: 12px; color: var(--ink-dim); }
.wu { display: inline-flex; align-items: center; gap: 2px; font-family: var(--hs-font-mono, monospace); font-variant-numeric: tabular-nums; }
.wu i { font-style: normal; display: inline-block; width: 1.15em; text-align: center; padding: 3px 0; border-radius: 3px; font-size: 18px; font-weight: 600; line-height: 1.1; }
.wu .wu-m3 { background: var(--ink); color: var(--bg); }
.wu .wu-l { background: var(--red); color: var(--bg); }
.wu .wu-komma { width: auto; padding: 0 1px; color: var(--ink-mid); }
.wu em { font-style: normal; font-size: 12px; color: var(--ink-dim); margin-left: 4px; }
.wu-zeile.dim .wu { opacity: .55; }

/* Kachel Wasser: je Zaehler eine Spalte, Tagesbalken je Zaehler nebeneinander */
.wa-spalten { display: grid; gap: 12px; }
.wa-sp { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wa-sp .haus-gross { font-size: 32px; }
.wa-name { font-size: 13px; color: var(--ink-mid); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-name i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wa-stand { font-size: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.haus-wasser b { display: flex; align-items: flex-end; gap: 2px; height: 100%; width: 100%; max-width: 30px; }
.haus-wasser b i { flex: 1; max-width: none; border-radius: 2px 2px 0 0; }

.wa-ungemessen { opacity: .45; }
.wa-stand { font-size: 13px; }

.wa-ungemessen { opacity: .45; }
.wa-stand { font-size: 13px; }

/* Benutzerverwaltung (sitzung.js) */
.anm-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.anm-marke { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-1);
  border: 1px solid var(--surface-strong); color: var(--ink-dim); vertical-align: 1px; }
.anm-marke.gold { border-color: var(--gold-deep); color: var(--gold); }
.anm-link { margin: 12px 0; padding: 14px; border: 1px solid var(--gold-deep); border-radius: var(--r-2); background: var(--panel-gold);
  display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.anm-link input { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: var(--r-1); border: 1px solid var(--surface-strong);
  background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box; }
.anm-link .anm-knoepfe { justify-content: flex-start; }
.anm-link small, .anm-formen small { color: var(--ink-dim); font-size: 12px; }
.anm-haken { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-mid); }
@media (max-width: 600px) { .anm-zeile { flex-wrap: wrap; } .anm-zeile .anm-knoepfe { justify-content: flex-start; } }