:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --ring: rgba(11, 11, 11, 0.10);
  --wash: rgba(11, 11, 11, 0.04);

  /* Luftarten in den Kennfarben nach DIN EN 16798-3 (Aussenluft grün, Zuluft blau,
     Abluft gelb, Fortluft braun, Raumluft grau); im Schema und in den Charts gleich */
  --c-zul: #2a78d6;
  --c-abl: #d9a300;
  --c-aul: #2f9e4a;
  --c-fol: #a0522d;
  --c-raum: #6f6e69;
  --c-witt: #1d6b35;
  --c-wrg: #6250d6;
  --c-le: #e34948;

  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --ink: #f0efec;
    --ink-2: #c3c2b7;
    --grid: #2c2c2a;
    --axis: #383835;
    --ring: rgba(255, 255, 255, 0.10);
    --wash: rgba(255, 255, 255, 0.05);
    --c-zul: #3987e5;
    --c-abl: #c99a00;
    --c-aul: #2e9a4c;
    --c-fol: #c46f35;
    --c-raum: #8e8d86;
    --c-witt: #6cc487;
    --c-wrg: #9085e9;
    --c-le: #e66767;
  }
}


* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 20px; }
h2 { font-size: 15px; }

.top-right { display: flex; align-items: center; gap: 10px; }
.btn {
  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--surface);
}
.btn:hover { opacity: 0.88; }
.btn.ghost { background: var(--wash); color: var(--ink); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn:focus-visible, .seg button:focus-visible { outline: 2px solid var(--c-zul); outline-offset: 2px; }
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1240px; margin: 0 auto; padding: 20px 16px 12px;
}
.brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sub { color: var(--muted); font-size: 13px; }
.conn {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--ring);
  font-size: 13px; color: var(--ink-2); white-space: nowrap;
}
.conn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.conn.ok .dot { background: var(--good); }
.conn.stale .dot { background: var(--warning); }
.conn.down .dot { background: var(--critical); }

main { max-width: 1240px; margin: 0 auto; padding: 0 16px 24px; display: grid; gap: 16px; }
.card {
  background: var(--surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--ring);
  padding: 16px; min-width: 0;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 8px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 820px) { .two { grid-template-columns: 1fr; } }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 10px;
  border-radius: 999px; background: var(--wash); color: var(--ink-2);
}
.chip svg { width: 14px; height: 14px; }
.chip.alarm { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--critical); }
.chip.alarm svg { color: var(--critical); }
.chip.on { color: var(--ink); }

/* Schema ------------------------------------------------------------------ */
.scheme-wrap { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
@media (max-width: 720px) { #scheme { min-width: 760px; } }
#scheme { width: 100%; height: auto; display: block; }
#scheme text { fill: var(--ink); font-size: 13px; }
#scheme .c { text-anchor: middle; }
#scheme .end { text-anchor: end; }
#scheme .lbl { fill: var(--ink-2); font-size: 12.5px; }
#scheme .stream { fill: var(--muted); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; }
#scheme .sym { font-size: 13px; font-weight: 600; fill: var(--ink-2); }
#scheme .sym.small { font-size: 11.5px; }
#scheme .sym.tiny { font-size: 9px; }
#scheme .reading { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
#scheme .reading-sub { font-size: 11.5px; fill: var(--muted); }
#scheme .value-tag .k, #scheme .status-block .k { fill: var(--muted); font-size: 12px; }
#scheme .value-tag .v { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
#scheme .value-tag .s { fill: var(--muted); font-size: 11.5px; }
#scheme .status-block .v2 { font-weight: 600; font-size: 13px; }

.room rect { fill: color-mix(in srgb, var(--c-raum) 10%, var(--surface)); stroke: var(--c-raum); stroke-width: 1.5; }

.duct { fill: none; stroke-width: 12; stroke-linejoin: round; stroke-linecap: butt; opacity: 0.22; }
.duct.aul { stroke: var(--c-aul); } .duct.abl { stroke: var(--c-abl); }
.duct.zul { stroke: var(--c-zul); } .duct.fol { stroke: var(--c-fol); }
.flow { fill: none; stroke-width: 2; stroke-linejoin: round; }
.flow.aul { stroke: var(--c-aul); } .flow.abl { stroke: var(--c-abl); }
.flow.zul { stroke: var(--c-zul); } .flow.fol { stroke: var(--c-fol); }
.end { stroke-width: 2; }
.end.aul { stroke: var(--c-aul); } .end.abl { stroke: var(--c-abl); }
.end.zul { stroke: var(--c-zul); } .end.fol { stroke: var(--c-fol); }
.running .flow { stroke-dasharray: 6 8; animation: flow 1.1s linear infinite; }
.running.stage2 .flow { animation-duration: 0.6s; }
/* Luftanteil durch Tauscher bzw. Bypass proportional zur WRG-Klappe (app.js setzt
   --through = WRG-Stellung, --bypass = 1 − WRG-Stellung, je 0…1) */
.duct.through { stroke-width: calc(2px + 10px * var(--through, 1)); }
.duct.bypass { stroke-width: calc(2px + 10px * var(--bypass, 1)); }
.flow.through { stroke-width: calc(0.6px + 1.6px * var(--through, 1)); opacity: var(--through, 1); }
.flow.bypass { stroke-width: calc(0.6px + 1.6px * var(--bypass, 1)); opacity: var(--bypass, 1); }
@keyframes flow { to { stroke-dashoffset: -14; } }

.hx-body { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; }
.hx-plates { stroke: var(--axis); stroke-width: 1.5; }
.damper .blade { stroke: var(--ink); stroke-width: 3; stroke-linecap: round;
  transition: transform 0.6s ease; }
.damper .hub { fill: var(--ink); }
.motor { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5; }
.link { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 4 3; }

.coil-body { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; }
.coil-diag { stroke: var(--ink-2); stroke-width: 1.5; }
.coil.heating .coil-body { fill: color-mix(in srgb, var(--c-le) calc(var(--heat, 0) * 45%), var(--surface)); }
.water path { fill: none; stroke-width: 2.5; }
.water .hot { stroke: var(--c-le); } .water .cold { stroke: var(--c-zul); }
.pump-body { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5; }
.pump-tri { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5; }
/* Pumpe meldet Betrieb (LE_PU): grün */
.pump.on .pump-body { stroke: var(--good); stroke-width: 2; }
.pump.on .pump-tri { fill: var(--good); stroke: var(--good); }
.valve-body { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5; }

.frost .stem, .sensor .stem { stroke: var(--ink-2); stroke-width: 1.5; }
.frost-box { fill: var(--surface); stroke: var(--good); stroke-width: 2; }
.frost.alarm .frost-box { fill: var(--critical); stroke: var(--critical); }
.frost.alarm text { fill: #fff !important; }

.fan-body { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; }
.fan .rotor { color: var(--axis); fill: currentColor; }
.fan.on .rotor { color: var(--ink-2); }
.rotor { transform-box: view-box; transform-origin: 0 0; }
.fan.on .rotor { animation: spin 1.6s linear infinite; will-change: transform; }
.fan.on.stage2 .rotor { animation-duration: 0.8s; }
@keyframes spin { to { transform: rotate(360deg); } }
.flowsw .sw { fill: var(--surface); stroke: var(--good); stroke-width: 1.5; }
.flowsw.alarm .sw { fill: var(--critical); stroke: var(--critical); }

.probe { fill: var(--surface); stroke-width: 2.5; }
.sensor[data-key="t_aul"] .probe { stroke: var(--c-aul); }
.sensor[data-key="t_fol"] .probe { stroke: var(--c-fol); }
.sensor[data-key="t_abl"] .probe { stroke: var(--c-abl); }
.sensor[data-key="t_zul"] .probe { stroke: var(--c-zul); }
.sensor[data-key="t_raum"] .probe { stroke: var(--c-raum); }
.sensor[data-key="t_witt"] .probe { stroke: var(--c-witt); }

.smoker .pill { fill: var(--surface); stroke: var(--axis); stroke-width: 1.5; }
.smoker.on .pill { stroke: var(--ink-2); fill: var(--wash); }

#scheme.stale .rotor { animation: none; }
#scheme.stale .reading { fill: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .running .flow, .fan.on .rotor { animation: none; }
}

/* Klickbare Elemente im Schema ------------------------------------------------ */
.hit { cursor: pointer; outline: none; }
.hitbox { fill: transparent; stroke: transparent; stroke-width: 1.5; transition: fill 0.15s, stroke 0.15s; }
.hit:hover > .hitbox { fill: var(--wash); }
.hit:focus-visible > .hitbox { stroke: var(--c-zul); fill: var(--wash); }
tr.hit:hover th, tr.hit:hover td { background: var(--wash); }
tr.hit:focus-visible th { box-shadow: inset 2px 0 0 var(--c-zul); }
.hint { color: var(--muted); font-size: 13px; }

/* Verläufe ------------------------------------------------------------------ */
.panel { margin-top: 10px; }
.panel + .panel { margin-top: 26px; border-top: 1px solid var(--grid); padding-top: 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px; }
.panel-head h3 { font-size: 14px; margin: 0; font-weight: 600; }
.picker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.picker select {
  font: inherit; font-size: 13px; color: var(--ink); background: var(--surface);
  border: 0; box-shadow: 0 0 0 1px var(--ring); border-radius: 8px; padding: 5px 8px; max-width: 100%;
}
.picker select:disabled { color: var(--muted); }
.xchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2);
  background: var(--wash); border-radius: 999px; padding: 2px 4px 2px 10px; }
.xchip .sw { width: 12px; height: 3px; border-radius: 2px; }
.xchip button { font: inherit; border: 0; background: none; color: var(--muted); cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%; line-height: 1; }
.xchip button:hover { background: var(--surface); color: var(--ink); }
.stock { min-height: 260px; }
.stock.loading { opacity: 0.4; }
.highcharts-range-input text, .highcharts-range-label text { font-size: 12px; }

dialog#detail {
  width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  border: 0; border-radius: 14px; padding: 16px; background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1px var(--ring), 0 24px 64px rgba(0, 0, 0, 0.28);
}
dialog#detail::backdrop { background: rgba(0, 0, 0, 0.35); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dlg-head h2 { font-size: 16px; }
.close { font: inherit; font-size: 22px; line-height: 1; width: 36px; height: 36px; border-radius: 10px;
  border: 0; background: var(--wash); color: var(--ink-2); cursor: pointer; }
.close:hover { color: var(--ink); }
@media (max-width: 640px) {
  dialog#detail { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; margin: 0; }
}

/* Bedienung (nur Panel im LAN) ------------------------------------------------ */
.control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 24px; }
.ctl h3 { font-size: 13px; margin: 0 0 8px; color: var(--ink-2); font-weight: 600; }
.ctl.wide { grid-column: 1 / -1; }
.ctl label { font-size: 13px; color: var(--ink-2); }
.ctl .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ctl select, #login input {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 0; box-shadow: 0 0 0 1px var(--ring); border-radius: 8px; padding: 6px 8px;
}
.seg { display: inline-flex; background: var(--wash); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button {
  font: inherit; font-size: 13px; color: var(--ink-2); background: none; border: 0;
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 0 0 1px var(--ring); }
.sub2 { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }
.manual { display: grid; grid-template-columns: auto minmax(120px, 1fr) 52px; align-items: center; gap: 10px 12px;
  max-width: 560px; }
.manual output { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.manual input[type="range"] { width: 100%; accent-color: var(--ink-2); }
.manual input[type="range"]:disabled { opacity: 0.35; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
#scheme .hand-badge { fill: var(--critical); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  visibility: hidden; }
#scheme .hand-badge.on { visibility: visible; }
dialog#login { border: 0; border-radius: 14px; padding: 18px; width: min(360px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--ring), 0 24px 64px rgba(0,0,0,.28); }
dialog#login::backdrop { background: rgba(0, 0, 0, 0.35); }
#login h2 { margin-bottom: 4px; }
#login input { width: 100%; margin-top: 8px; }

/* Tabellen ---------------------------------------------------------------- */
.values { width: 100%; border-collapse: collapse; font-size: 14px; }
.values th { text-align: left; font-weight: 400; color: var(--ink-2); padding: 6px 0; }
.values td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; padding: 6px 0; }
.values tr + tr th, .values tr + tr td { border-top: 1px solid var(--grid); }
.values .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px;
  vertical-align: -1px; }
.values tr.group th { padding-top: 14px; color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.04em; border-top: 0; }
.values tr.group + tr th, .values tr.group + tr td { border-top: 0; }

.events { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; font-size: 13.5px; }
.events li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 7px 0; }
.events li + li { border-top: 1px solid var(--grid); }
.events time { color: var(--muted); font-variant-numeric: tabular-nums; }
.events .src { color: var(--muted); font-size: 12px; }
.events li.alarm span:first-child::before, .events li.warnung span:first-child::before {
  content: "▲ "; color: var(--critical);
}
.events li.warnung span:first-child::before { color: var(--warning); }

.foot { max-width: 1240px; margin: 0 auto; padding: 0 16px 24px; color: var(--muted); font-size: 12px; }

@media (max-width: 640px) {
  .top { padding-top: 14px; }
  .sub { display: none; }
  .card { padding: 12px; border-radius: 12px; }
  .events li { grid-template-columns: 76px 1fr; }
}