/* fX-Home nach dem format-X-Designsystem: „Regieraum, nicht Bühne“.
   Eine Signalfarbe, 8-Punkt-Raster, linksbündig, Quicksand (Versalien) für Überschriften, Inter für Text und Daten.
   Funktionsfarben für Alarm und Warnung stehen außerhalb der Markenpalette (die Marke kennt keinen Fehlerton). */
@font-face { font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap; src:url(/fonts/Inter-Regular.woff2) format('woff2'); }
@font-face { font-family:'Inter'; font-weight:500; font-style:normal; font-display:swap; src:url(/fonts/Inter-Medium.woff2) format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-style:normal; font-display:swap; src:url(/fonts/Inter-SemiBold.woff2) format('woff2'); }
@font-face { font-family:'Quicksand'; font-weight:700; font-style:normal; font-display:swap; src:url(/fonts/Quicksand-Bold.woff2) format('woff2'); }

:root {
  color-scheme: light;
  --bg:#f6f7f3; --surface:#ffffff; --ink:#14140f; --ink-soft:#565a4e; --muted:#a7ab9f; --line:#dde1d5;
  --signal:#053d38; --signal-soft:#dde9e5; --glow:#34675c; --on-signal:#f3f4f0;
  --alarm:#a4262c; --alarm-soft:#f8e4e2; --warn:#8a5a00; --warn-soft:#f6ecd2;
  --font:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --display:'Quicksand', 'Inter', system-ui, sans-serif;
  /* Kurzformen, die der Oberflächencode auch inline nutzt */
  --card:var(--surface); --fg:var(--ink); --mut:var(--ink-soft); --bd:var(--line); --acc:var(--signal); --on:var(--signal); --bad:var(--alarm); --ok:var(--signal);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#10140f; --surface:#171d16; --ink:#f3f4f0; --ink-soft:#c7ccbf; --muted:#8b9186; --line:#2b332a;
    --signal:#a3ccab; --signal-soft:#1b2b1f; --glow:#7fae9f; --on-signal:#10140f;
    --alarm:#ff9a92; --alarm-soft:#3a1e1c; --warn:#e3b341; --warn-soft:#2e2711;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#10140f; --surface:#171d16; --ink:#f3f4f0; --ink-soft:#c7ccbf; --muted:#8b9186; --line:#2b332a;
  --signal:#a3ccab; --signal-soft:#1b2b1f; --glow:#7fae9f; --on-signal:#10140f;
  --alarm:#ff9a92; --alarm-soft:#3a1e1c; --warn:#e3b341; --warn-soft:#2e2711;
}

* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; font:400 15px/1.5 var(--font); background:var(--bg); color:var(--ink); font-feature-settings:'kern','calt'; }
button, input, select, textarea { font:inherit; color:inherit }
a { color:var(--signal) }
:focus-visible { outline:2px solid var(--glow); outline-offset:2px }

/* ---------- Kopfzeile ---------- */
header { position:sticky; top:0; z-index:5; background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:stretch; gap:24px; padding:0 24px; min-height:56px }
.brand { display:flex; align-items:center; gap:12px; color:var(--signal); padding:8px 0; flex:none }
.wordmark { height:20px; width:auto; display:block; fill:currentColor }
.brand-sub { font:700 11px/1 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); border-left:1px solid var(--line); padding-left:12px }
nav { display:flex; align-items:stretch; gap:0; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; min-width:0 }
nav::-webkit-scrollbar { display:none }
nav button { background:none; border:0; border-bottom:2px solid transparent; border-radius:0; color:var(--ink-soft); font:500 12px/1 var(--font); letter-spacing:.08em; text-transform:uppercase; padding:0 14px; cursor:pointer; white-space:nowrap; min-height:48px }
nav button:hover { color:var(--ink) }
nav button.on { color:var(--ink); border-bottom-color:var(--signal) }
.hdr-right { display:flex; align-items:center; gap:16px; flex:none; margin-left:auto }
.tc { font:500 11px/1.4 var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); font-variant-numeric:tabular-nums }
.live { display:inline-flex; align-items:center; gap:8px }
.dot { width:8px; height:8px; border-radius:50%; background:var(--muted); display:inline-block; flex:none }
.dot.ok { background:var(--signal) } .dot.warn { background:var(--warn) } .dot.bad { background:var(--alarm) }
@media (prefers-reduced-motion: no-preference) { .live .dot.ok { animation:pulse 2.4s ease-in-out infinite } }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }
.hdr-user { display:flex; align-items:center; gap:12px }

/* ---------- Seite ---------- */
main { padding:24px; max-width:1240px; margin:0 auto }
h2 { display:flex; align-items:center; gap:16px; font:700 12px/1 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin:32px 0 16px }
h2::after { content:''; flex:1; height:1px; background:var(--line) }
h2:first-child { margin-top:8px }
.meta { color:var(--ink-soft); font-size:13px }
.sec { margin-top:8px }

/* ---------- Statuszeile (Regieraum) ---------- */
.strip { background:var(--surface); border:1px solid var(--line); padding:16px 24px; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:16px 32px; margin-bottom:24px }
.strip .k { display:block; margin-bottom:4px }
.strip .v { font:700 20px/1.1 var(--display); font-variant-numeric:tabular-nums }
.strip .v small { font:500 12px var(--font); color:var(--ink-soft); letter-spacing:0 }
.strip .state { display:flex; align-items:center; gap:8px; font:700 15px/1.1 var(--display); letter-spacing:.06em; text-transform:uppercase }
.strip .state.warn { color:var(--warn) } .strip .state.bad { color:var(--alarm) }

/* ---------- Karten und Kacheln ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(224px, 1fr)); gap:16px }
.card { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:16px; display:flex; flex-direction:column; gap:8px; min-width:0 }
.card.off { opacity:.55 }
.card.lit::before, .card.alarm::before, .tile.open::before { content:''; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px; background:var(--signal) }
.card.alarm { border-color:var(--alarm); background:var(--alarm-soft) } .card.alarm::before { background:var(--alarm) }
.name { font:600 14px/1.3 var(--font); display:flex; align-items:center; justify-content:space-between; gap:8px }
.big { font:700 22px/1.15 var(--display); font-variant-numeric:tabular-nums }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 }
.card .row { margin:0 }
.bar { height:4px; background:var(--line); overflow:hidden } .bar i { display:block; height:100%; background:var(--signal) }

.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(176px, 1fr)); gap:8px }
.tile { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:12px 16px; display:flex; flex-direction:column; gap:4px; min-width:0 }
.tile .meta { font-size:12px }
.tile .big { font-size:16px }
.tile.open { background:var(--warn-soft); border-color:var(--warn) } .tile.open::before { background:var(--warn) }
.tile.off { opacity:.5 }
.bat { font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums } .bat.warn { color:var(--warn); font-weight:600 } .bat.low { color:var(--alarm); font-weight:600 }

.cams { display:grid; grid-template-columns:repeat(auto-fill, minmax(272px, 1fr)); gap:16px }
.cam { position:relative; overflow:hidden; background:#0b0e0a; border:1px solid var(--line); border-radius:2px; aspect-ratio:16/9 }
.cam img { width:100%; height:100%; object-fit:cover; display:block }
.cam .cap { position:absolute; left:0; right:0; bottom:0; padding:24px 12px 8px; font:500 11px/1.2 var(--font); letter-spacing:.08em; text-transform:uppercase; color:#f3f4f0; background:linear-gradient(transparent, rgba(0,0,0,.72)); display:flex; justify-content:space-between; gap:8px }
.cam .nope { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#9aa391; font:500 11px var(--font); letter-spacing:.08em; text-transform:uppercase }
.cam.motion { border-color:var(--warn); box-shadow:0 0 0 2px var(--warn) }
.kv { display:grid; grid-template-columns:1fr auto; gap:0 24px; font-size:14px }
.kv span { padding:8px 0; border-top:1px dashed var(--line) } .kv span:nth-child(-n+2) { border-top:0 }
.kv span:nth-child(odd) { color:var(--ink-soft) } .kv span:nth-child(even) { text-align:right; font-variant-numeric:tabular-nums; font-weight:500 }

/* ---------- Meldungen ---------- */
.banner { position:relative; display:flex; gap:16px; align-items:center; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); padding:12px 16px 12px 24px; margin-bottom:8px; font-weight:500 }
.banner::before { content:''; position:absolute; left:-1px; top:-1px; bottom:-1px; width:4px; background:var(--signal) }
.banner.crit { background:var(--alarm-soft); border-color:var(--alarm) } .banner.crit::before { background:var(--alarm) }
.banner.warn { background:var(--warn-soft); border-color:var(--warn) } .banner.warn::before { background:var(--warn) }
.banner .btn { margin-left:auto }
.ic { width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:square; stroke-linejoin:miter; vertical-align:-3px }

/* ---------- Bedienelemente ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:8px 16px; background:var(--surface); border:1px solid var(--line); border-radius:2px; color:var(--ink); font:500 13px/1 var(--font); cursor:pointer }
.btn:hover:not(:disabled) { background:var(--signal-soft); border-color:var(--glow) }
.btn:disabled { opacity:.45; cursor:default }
.btn.acc { background:var(--signal); border-color:var(--signal); color:var(--on-signal) }
.btn.acc:hover:not(:disabled) { background:var(--signal); filter:brightness(1.12) }
.btn.icon { min-height:28px; min-width:28px; padding:4px; background:transparent; border-color:transparent; color:var(--ink-soft) }
.btn.icon:hover:not(:disabled) { color:var(--ink); border-color:var(--line); background:var(--bg) }
input, select, textarea { background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:8px 10px; min-height:36px; max-width:100% }
input:hover, select:hover, textarea:hover { border-color:var(--glow) }
input[type=range] { padding:0; min-height:24px; accent-color:var(--signal); background:transparent; border:0 }
input[type=checkbox], input[type=radio] { min-height:0; accent-color:var(--signal) }
label { cursor:pointer }
textarea { width:100% }

/* ---------- Tabellen und Diagramme ---------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(208px, 1fr)); gap:16px; margin-bottom:16px }
.stat .big { font-size:26px }
.chart { width:100%; height:auto; display:block } .chart .b { fill:var(--glow) } .chart .b.today { fill:var(--signal) }
.chart text { fill:var(--ink-soft); font:500 11px var(--font) } .chart .ax { stroke:var(--line) }
.tbl-wrap { overflow-x:auto }
table.tbl { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
.tbl th { text-align:left; color:var(--ink-soft); font:500 11px/1.2 var(--font); letter-spacing:.08em; text-transform:uppercase; padding:8px 12px; border-bottom:1px solid var(--line) }
.tbl td { padding:8px 12px; border-bottom:1px dashed var(--line) } .tbl .n { text-align:right }
.tbl tr.child td:first-child { padding-left:32px; position:relative } .tbl tr.child td:first-child::before { content:''; position:absolute; left:16px; top:0; bottom:50%; width:10px; border-left:1px solid var(--line); border-bottom:1px solid var(--line) }
.tbl tr.child { color:var(--ink-soft) } .tbl .rest { color:var(--ink-soft); font-size:12px }

/* ---------- Sonstiges ---------- */
#log { font:12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--ink-soft); max-height:70vh; overflow:auto; background:var(--surface); border:1px solid var(--line); padding:16px }
.secret { font:13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--bg); border:1px dashed var(--warn); padding:12px; word-break:break-all }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.chip { min-height:32px; padding:6px 12px; background:var(--surface); border:1px solid var(--line); border-radius:2px; font:500 12px var(--font); color:var(--ink-soft); cursor:pointer }
.chip.on { border-color:var(--signal); color:var(--ink); background:var(--signal-soft) }
.search { min-width:200px; flex:1 1 200px; max-width:360px }
.empty { border:1px dashed var(--line); padding:24px; color:var(--ink-soft); background:transparent }
dialog { border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:2px; padding:0; width:min(480px, calc(100vw - 32px)) }
dialog::backdrop { background:rgba(10,14,9,.55) }
dialog form { padding:24px; display:flex; flex-direction:column; gap:16px }
dialog h3 { margin:0; font:700 16px var(--display); letter-spacing:.08em; text-transform:uppercase }
dialog .f { display:flex; flex-direction:column; gap:4px } dialog .f > span { font:500 11px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft) }
dialog .acts { display:flex; gap:8px; justify-content:flex-end }

/* ---------- Anmeldung ---------- */
.login { max-width:440px; margin:12vh 24px 0 max(24px, calc(50vw - 220px)) }
.login .wordmark { height:26px; color:var(--signal); margin-bottom:8px }
.login .panel { background:var(--surface); border:1px solid var(--line); padding:24px; display:flex; flex-direction:column; gap:16px }
.login form { display:flex; flex-direction:column; gap:16px }
.login .f { display:flex; flex-direction:column; gap:4px } .login .f > span { font:500 11px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft) }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1100px) {   /* Navigation in eine eigene Zeile, damit nichts abgeschnitten wird */
  header { flex-wrap:wrap; gap:8px 16px; align-items:center }
  nav { order:3; flex:1 0 100%; margin:0 -24px; padding:0 16px; border-top:1px solid var(--line) }
  .hdr-right { margin-left:auto }
}
@media (max-width: 760px) {
  header { gap:12px; padding:0 16px; flex-wrap:wrap; align-items:center }
  .brand { padding:12px 0 0 } .brand-sub { display:none }
  .hdr-right { margin-left:auto; padding-top:12px } .hdr-user .tc { display:none }
  nav { margin:0 -16px; padding:0 8px }
  main { padding:16px }
  .grid { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px }
  .strip { padding:16px; gap:16px }
  .btn, input, select { min-height:44px }
  .btn.icon { min-height:36px; min-width:36px }
}

/* Piktogramme und Wertanzeigen */
.ic.sm { width:18px; height:18px; color:var(--mut); margin-right:8px; vertical-align:-4px }
.ic.lg { width:36px; height:36px; stroke-width:1.5 }
.ic.on { color:var(--signal); fill:var(--signal); fill-opacity:.16 }
.ic.on.warm { color:#c9772f; fill:#c9772f }
.ic.alarm { color:var(--alarm); fill:var(--alarm); fill-opacity:.18 }
.card .ic.sm.on { color:var(--signal) } .card .ic.sm.alarm { color:var(--alarm) }
.hero { display:flex; align-items:center; gap:12px; color:var(--mut) } .hero .big { color:var(--fg) }
.hero:has(.ic.on) { color:var(--signal) } .hero.alarm, .hero.alarm .big { color:var(--alarm) } .hero.okc { color:var(--signal) }
.hero .big .meta { font:500 12px var(--body) }
.sl { stroke-width:1.5; opacity:.45 } .sl.on { opacity:1; stroke-width:2.5 }
.name { display:flex; align-items:center; gap:8px } .name .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis }
.bat { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--mut) }
.batt { width:22px; height:22px } .batt .fill { fill:currentColor; stroke:none } .batt.low { color:var(--alarm) }
.gauge { position:relative; height:6px; margin:10px 0 2px; border-radius:1px; background:linear-gradient(90deg,#4f86b8 0%,#7fae9f 35%,#c9a24a 70%,#c4553b 100%) }
.gauge i { position:absolute; top:-5px; width:3px; height:16px; margin-left:-1px; background:var(--fg); border:1px solid var(--surface) }
.gauge b { position:absolute; top:-3px; width:8px; height:12px; margin-left:-4px; border:2px solid var(--fg); border-radius:50%; background:var(--surface); box-sizing:border-box }
.scale { display:flex; justify-content:space-between; font-size:10px; color:var(--mut) }
.bar.hum i { background:#4f86b8 } .bar.pw i { background:#c9a24a }

/* Einklappbare Rubriken, Ansicht, Benutzerdialog */
.fold h2 { margin:24px 0 12px } .fold.closed h2 { margin-bottom:0 }
.fold-h { all:unset; cursor:pointer; display:flex; align-items:center; gap:8px; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; padding:4px 0 }
.fold-h:focus-visible { outline:2px solid var(--signal); outline-offset:2px }
.fold-h small { color:var(--mut); font-weight:500; font-size:11px }
.fold-h .ic { width:16px; height:16px }
.view-opts { margin-top:8px; align-items:center } .view-opts .tc { margin-right:4px }
.ck { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:14px } .ck small { color:var(--mut) }
.ck-list { display:flex; flex-wrap:wrap; gap:4px 16px } .ck-list.tall { flex-direction:column; flex-wrap:nowrap; max-height:220px; overflow:auto; border:1px solid var(--line); padding:8px }
dialog[hidden], [hidden] { display:none !important }

/* Drucker-Modul */
.card.wide { grid-column:span 2 } @media (max-width:560px) { .card.wide { grid-column:auto } }
.card.wide { container-type:inline-size }
.pr { display:grid; grid-template-columns:minmax(0,1fr); gap:16px } @container (min-width:520px) { .pr.has-cam { grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.pcam { position:relative; background:#000; aspect-ratio:16/9; align-self:start } .pcam img { width:100%; height:100%; object-fit:cover; display:block }
.pcam .nope { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#ccc; font-size:12px } .pcam .nope[hidden] { display:none }
.pinfo { display:flex; flex-direction:column; gap:6px; min-width:0 }
.tcap { font:500 11px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin-top:6px }
.gauge.hot { background:linear-gradient(90deg,#4f86b8 0%,#c9a24a 55%,#c4553b 100%) }
.ams { display:flex; flex-wrap:wrap; gap:16px; border-top:1px solid var(--line); padding-top:12px }
.spools { display:flex; gap:8px; margin-top:6px }
.spool { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:48px; padding:6px; border:1px solid var(--line); border-radius:2px; font-size:11px }
.spool.act { border-color:var(--signal); box-shadow:inset 0 0 0 1px var(--signal) } .spool.empty { opacity:.45 }
.spool .sw { width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:var(--line) } .spool small { color:var(--mut) }
dialog { max-height:calc(100vh - 32px); overflow:auto }

/* Laserdrucker (Brother) */
.laser { display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; align-items:start } @media (max-width:420px) { .laser { grid-template-columns:1fr } }
.bro-pic { width:120px; height:80px; fill:none; stroke:var(--mut); stroke-width:2; stroke-linejoin:miter } .bro-pic .led { fill:var(--signal); stroke:none } .bro-pic.bad { stroke:var(--alarm) } .bro-pic.bad .led { fill:var(--alarm) }
.toners { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.toner { display:flex; flex-direction:column; align-items:center; gap:4px }
.tube { position:relative; width:100%; max-width:56px; height:96px; border:2px solid var(--line); border-radius:2px; display:flex; align-items:flex-end; overflow:hidden; background:var(--bg) }
.tube i { display:block; width:100%; transition:height .4s }
.toner b { font:700 15px var(--display) } .toner small { font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.08em }
.toner.low .tube { border-color:var(--alarm) } .toner.low b { color:var(--alarm) }
.bar.low i { background:var(--alarm) }
.tbl tr.house td { font-weight:600; border-bottom:2px solid var(--line) }

/* FRITZ!Box */
.lanes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px } @media (max-width:420px) { .lanes { grid-template-columns:1fr } }
.lane { display:flex; flex-direction:column; gap:4px } .lane-h { display:flex; justify-content:space-between; align-items:baseline; gap:8px } .lane-h b { font:700 15px var(--display); font-variant-numeric:tabular-nums }
.lane .tcap { margin-top:0 } .bar.dl i { background:#4f86b8 } .bar.ul i { background:var(--signal) }
.vol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; border-top:1px solid var(--line); padding-top:10px } .vol div { display:flex; flex-direction:column; gap:2px } .vol .tcap { margin-top:0 } .vol b { font:700 14px var(--display) }

/* Grünbeck */
.soft { display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start }
.soft-salt { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center } .soft-salt b, .soft-h b { display:block; font:700 16px var(--display) } .soft small { display:block; color:var(--mut); font-size:11px }
.soft-salt .tcap, .soft-h .tcap { margin-top:0; display:block }
.tank { width:60px; height:70px; fill:none; stroke:var(--mut); stroke-width:2 } .tank .salt { fill:var(--ink); fill-opacity:.8; stroke:none } .tank.low { stroke:var(--alarm) } .tank.low .salt { fill:var(--alarm) }
.gauge.hard { background:linear-gradient(90deg,#9fd1e8 0%,#4f86b8 50%,#1f3f6e 100%) }

.mini { display:flex; align-items:flex-end; gap:6px; height:64px } .mini > div { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:2px } .mini i { display:block; width:100%; background:var(--signal); opacity:.8; min-height:3px } .mini small { font-size:10px; color:var(--mut); text-transform:uppercase }

/* System */
.spark { width:100%; height:64px; display:block; margin-top:8px } .spark polyline { fill:none; stroke:var(--signal); stroke-width:1.5; vector-effect:non-scaling-stroke } .spark .fill { fill:var(--signal); fill-opacity:.12; stroke:none }
.spark.mem polyline { stroke:#4f86b8 } .spark.mem .fill { fill:#4f86b8 } .spark.tmp polyline { stroke:#c9a24a } .spark.tmp .fill { fill:#c9a24a } .spark.net polyline { stroke:#7fae9f } .spark.net .fill { fill:#7fae9f }
.card.stat.alarm { border-color:var(--alarm) } .card.stat.warn { border-color:var(--warn) }

.note { display:flex; align-items:center; gap:12px; padding:8px 16px; margin-bottom:8px; border-left:3px solid var(--line); color:var(--mut); font-size:13px } .note .ic { color:var(--mut) }
.qr { width:168px; flex:none; background:#fff; padding:4px } .qr svg { width:100%; height:auto; display:block }
.secret { font-family:ui-monospace,Menlo,monospace; letter-spacing:.06em; word-break:break-all; padding:8px 0; user-select:all }

/* Ausführungslog */
.runs { padding:0 } .run { border-bottom:1px solid var(--line) } .run:last-child { border-bottom:0 }
.run summary { display:grid; grid-template-columns:110px minmax(0,1.2fr) 130px minmax(0,2fr); gap:12px; padding:10px 16px; cursor:pointer; align-items:baseline; list-style:none } .run summary::-webkit-details-marker { display:none }
.run .t { color:var(--mut); font-size:12px; font-variant-numeric:tabular-nums } .run .o { font:500 11px var(--font); letter-spacing:.08em; text-transform:uppercase } .run .w { color:var(--mut); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.run.ok .o { color:var(--signal) } .run.bad .o { color:var(--alarm) } .run.dry .o { color:var(--warn) }
.run-d { padding:0 16px 12px 138px; display:flex; flex-direction:column; gap:6px; font-size:13px } .run-d .tcap { margin:0 8px 0 0 }
@media (max-width:760px) { .run summary { grid-template-columns:1fr; gap:2px } .run-d { padding-left:16px } }

/* Person */
.person { display:flex; align-items:center; gap:16px } .avatar { width:56px; height:56px; border-radius:50%; border:2px solid var(--line); color:var(--mut); display:flex; align-items:center; justify-content:center; font:700 24px var(--display) }
.person.home .avatar { border-color:var(--signal); color:var(--signal); background:color-mix(in srgb, var(--signal) 12%, transparent) }

.stack { display:flex; height:8px; background:var(--line) } .stack .a { background:var(--signal) } .stack .b { background:#4f86b8 }
.banner > span { flex:1 1 0; min-width:0 }

/* Designs: wählbar unter Einstellungen → Darstellung (html[data-design]) */
:root[data-design="klar"] { --bg:#f3f6fb; --surface:#ffffff; --ink:#0f1720; --ink-soft:#4a5666; --muted:#9aa6b6; --line:#dbe3ee; --signal:#1f5fbf; --signal-soft:#dde8f8; --glow:#4b83d6; --on-signal:#ffffff; }
@media (prefers-color-scheme: dark) { :root[data-design="klar"]:not([data-theme="light"]) { --bg:#0e131a; --surface:#151c26; --ink:#eef3fa; --ink-soft:#bdc9d9; --muted:#7f8da1; --line:#263040; --signal:#8ab4ff; --signal-soft:#1a2740; --glow:#6a9bf0; --on-signal:#0e131a; } }
:root[data-design="klar"][data-theme="dark"] { --bg:#0e131a; --surface:#151c26; --ink:#eef3fa; --ink-soft:#bdc9d9; --muted:#7f8da1; --line:#263040; --signal:#8ab4ff; --signal-soft:#1a2740; --glow:#6a9bf0; --on-signal:#0e131a; }
:root[data-design="warm"] { --bg:#f8f4ee; --surface:#fffdf9; --ink:#1f1710; --ink-soft:#5e5145; --muted:#b0a597; --line:#e8dfd2; --signal:#8a3d1c; --signal-soft:#f1e1d6; --glow:#b5633a; --on-signal:#fff8f2; }
@media (prefers-color-scheme: dark) { :root[data-design="warm"]:not([data-theme="light"]) { --bg:#17120e; --surface:#1f1914; --ink:#f6efe6; --ink-soft:#d2c6b8; --muted:#948877; --line:#3a3027; --signal:#e8a47a; --signal-soft:#33241a; --glow:#d08a5e; --on-signal:#17120e; } }
:root[data-design="warm"][data-theme="dark"] { --bg:#17120e; --surface:#1f1914; --ink:#f6efe6; --ink-soft:#d2c6b8; --muted:#948877; --line:#3a3027; --signal:#e8a47a; --signal-soft:#33241a; --glow:#d08a5e; --on-signal:#17120e; }
:root[data-design="kontrast"] { --bg:#ffffff; --surface:#ffffff; --ink:#000000; --ink-soft:#1a1a1a; --muted:#4d4d4d; --line:#000000; --signal:#000000; --signal-soft:#eeeeee; --glow:#333333; --on-signal:#ffffff; --alarm:#b00020; --warn:#6b4500; }
@media (prefers-color-scheme: dark) { :root[data-design="kontrast"]:not([data-theme="light"]) { --bg:#000000; --surface:#000000; --ink:#ffffff; --ink-soft:#eeeeee; --muted:#bbbbbb; --line:#ffffff; --signal:#ffffff; --signal-soft:#222222; --glow:#dddddd; --on-signal:#000000; --alarm:#ff6b6b; --warn:#ffd166; } }
:root[data-design="kontrast"][data-theme="dark"] { --bg:#000000; --surface:#000000; --ink:#ffffff; --ink-soft:#eeeeee; --muted:#bbbbbb; --line:#ffffff; --signal:#ffffff; --signal-soft:#222222; --glow:#dddddd; --on-signal:#000000; --alarm:#ff6b6b; --warn:#ffd166; }
[data-design="klar"] .card, [data-design="klar"] .btn, [data-design="klar"] .banner, [data-design="klar"] dialog, [data-design="klar"] input, [data-design="klar"] select, [data-design="klar"] .chip { border-radius:10px }
[data-design="warm"] h2, [data-design="warm"] .big { letter-spacing:.02em }
[data-design="kontrast"] .card, [data-design="kontrast"] .btn, [data-design="kontrast"] input, [data-design="kontrast"] select { border-width:2px }
[data-design="kontrast"] .meta, [data-design="kontrast"] .tcap { color:var(--ink) }
[data-design="tafel"] body { zoom:1.25 } [data-design="tafel"] .card .btn { min-height:44px } [data-design="tafel"] .edit, [data-design="tafel"] [data-edit-ent] { display:none }
@media (max-width:760px) { [data-design="tafel"] body { zoom:1.1 } }

/* Statistik */
.statf .row { align-items:flex-end } .statf .f { display:flex; flex-direction:column; gap:4px; min-width:160px } .statf .f > span { font:500 11px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft) }
.chart { width:100%; height:auto; display:block } .chart .grid { stroke:var(--line); stroke-width:1 } .chart .ax { fill:var(--mut); font-size:11px }
.legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin:8px 0; font-size:13px } .legend i, .dot2 { display:inline-block; width:10px; height:10px; margin-right:6px; border-radius:50% }

/* Wetter, Planer, Heute */
.ic.sm2 { width:22px; height:22px } .wx-h, .wx-d { display:flex; gap:8px; justify-content:space-between; border-top:1px solid var(--line); padding-top:8px } .wx-h > div, .wx-d > div { display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; min-width:0 } .wx-h small, .wx-d small { font-size:10px; color:var(--mut); text-transform:uppercase }
.agenda { display:flex; flex-direction:column; gap:12px } .agenda-day .tcap { margin:0 0 4px } .ev { display:grid; grid-template-columns:8px 108px minmax(0,1fr) auto; gap:10px; align-items:baseline; padding:3px 0; font-size:14px } .ev i { width:8px; height:8px; border-radius:50% } .ev .t { color:var(--mut); font-size:12px; font-variant-numeric:tabular-nums } .ev small { color:var(--mut) } .late { color:var(--alarm) !important }
.todos { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; margin-bottom:16px } .todo .row { margin-top:6px } .ti { display:flex; align-items:center; justify-content:space-between; gap:8px } .ti.done .ck span { text-decoration:line-through; color:var(--mut) } .prio { color:var(--alarm); margin-left:6px }
.today { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; margin-top:16px } .today .ev { grid-template-columns:8px 110px minmax(0,1fr) }

/* DWD-Warnungen */
.wx-alerts { display:flex; flex-direction:column; gap:6px } .wx-alert { border-left:4px solid var(--warn); background:var(--warn-soft); padding:6px 10px; font-size:13px } .wx-alert summary { cursor:pointer; list-style:none } .wx-alert summary::-webkit-details-marker { display:none } .wx-alert small { color:var(--mut); margin-left:6px }
.wx-alert.sev2 { border-color:#d9822b } .wx-alert.sev3 { border-color:var(--alarm); background:var(--alarm-soft) } .wx-alert.sev4 { border-color:var(--alarm); background:var(--alarm-soft); box-shadow:inset 0 0 0 1px var(--alarm) }
.wx-ad { padding:6px 0 2px; display:flex; flex-direction:column; gap:4px }

/* Synology kombiniert */
.disks { display:grid; grid-template-columns:repeat(auto-fill, minmax(54px, 1fr)); gap:6px } .disk { border:1px solid var(--line); padding:4px 6px; display:flex; flex-direction:column; align-items:center; font-size:11px; line-height:1.3 } .disk b { font:700 11px var(--display) } .disk span { color:var(--mut) }
.disk.hot { border-color:var(--warn); background:var(--warn-soft) } .disk.bad { border-color:var(--alarm); background:var(--alarm-soft) } .disk.off { opacity:.5 }

/* Elemente eines Geräts in der Karte */
.parts { border-top:1px solid var(--line); padding-top:8px; display:flex; flex-direction:column; gap:2px } .parts .tcap { margin:0 0 4px }
.part { display:grid; grid-template-columns:22px minmax(0,1fr) auto auto auto; gap:8px; align-items:center; padding:2px 0; font-size:13px } .part .ic.sm { margin:0 } .part .pn { overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .part .pv { color:var(--mut); font-variant-numeric:tabular-nums } .part.off { opacity:.5 } .part .btn { padding:2px 8px; min-height:0 }

/* Eigene Ansichten */
.vbar { display:flex; align-items:center; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin:16px 0 8px }
.vtab { all:unset; cursor:pointer; padding:10px 14px; font:600 12px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--mut); border-bottom:2px solid transparent; margin-bottom:-1px } .vtab:hover { color:var(--fg) } .vtab.on { color:var(--fg); border-color:var(--signal) } .vtab small { font-weight:500; opacity:.7; text-transform:none; letter-spacing:0 } .vtab.add { font-size:16px; padding:6px 12px } .vtab:focus-visible { outline:2px solid var(--signal) }
.dsec { margin-bottom:8px } .dsec-h { display:flex; align-items:center; gap:12px; flex-wrap:wrap } .dsec-h h2 { flex:1 } .dsec-title { flex:1; min-width:160px; font:700 12px var(--display); letter-spacing:.12em; text-transform:uppercase } .dctl-inline { display:flex; gap:4px; flex-wrap:wrap }
.dcard { position:relative; min-width:0 } .dcard > .card, .dcard > h2 { height:100% } .dctl { position:absolute; top:-10px; right:6px; z-index:3; display:flex; gap:2px; background:var(--surface); border:1px solid var(--line); padding:2px } .dctl .btn { padding:2px 7px; min-height:0 }
.vedit { margin:8px 0 16px } @media (max-width:560px) { .dcard { grid-column:auto !important } }

/* Grundriss */
.plan { position:relative; width:100%; max-width:1100px; margin:8px 0 16px; border:1px solid var(--line); background:var(--surface); user-select:none; touch-action:none } .plan img { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none }
.plan.placing { cursor:crosshair; outline:2px dashed var(--signal) } .plan.editing .fp { cursor:grab }
.fp { all:unset; position:absolute; transform:translate(-50%,-50%) scale(var(--s,1)); display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; padding:4px; border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--mut); box-shadow:0 1px 3px rgba(0,0,0,.25) }
.fp .ic.sm { margin:0; width:20px; height:20px } .fp span { position:absolute; top:100%; margin-top:2px; white-space:nowrap; font-size:10px; color:var(--fg); background:var(--surface); padding:0 3px }
.fp.on { color:var(--signal); border-color:var(--signal); background:color-mix(in srgb, var(--signal) 18%, var(--surface)) } .fp.off { opacity:.5 } .fp.orphan { border-style:dashed; color:var(--alarm) } .fp.sel { outline:2px solid var(--signal) } .fp:focus-visible { outline:2px solid var(--signal) }
.ck.dim { opacity:.55 }

/* Schalter als grafische Kachel und Geschirrspüler-Piktogramm */
.ic.pic.xl { width:56px; height:56px }
.swtile { display:grid; justify-items:center; gap:10px; width:100%; padding:16px 12px; border:1px solid var(--line); background:var(--bg); color:var(--ink-soft); cursor:pointer; font:inherit }
.swtile:hover { border-color:var(--signal) }
.swtile .ic { transition:color .2s }
.swtile.on { background:var(--signal-soft); border-color:var(--signal); color:var(--signal) }
.swtile .swl { font:500 13px var(--font); color:var(--ink) }
.tgl { position:relative; width:44px; height:24px; border-radius:12px; background:var(--line); transition:background .2s }
.tgl i { position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:var(--ink-soft); transition:left .2s, background .2s }
.swtile.on .tgl { background:var(--signal) } .swtile.on .tgl i { left:23px; background:var(--on-signal) }
.dishwrap { display:flex; align-items:center; gap:16px }
.dish { width:104px; height:104px; flex:none; color:var(--ink-soft) }
.dish .ap, .dish .dl { fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round }
.dish .trk { fill:none; stroke:var(--line); stroke-width:5 }
.dish .prg { fill:none; stroke:var(--signal); stroke-width:5; stroke-linecap:round; transition:stroke-dasharray .6s }
.dish .led { fill:var(--line) } .dish.run .led { fill:var(--signal) }
.dish .rt { font:700 15px var(--display); fill:var(--ink) } .dish .rs { font:500 8px var(--font); fill:var(--ink-soft) }
.dish.done .prg { stroke:var(--signal) } .dish.err { color:var(--alarm) } .dish.err .prg { stroke:var(--alarm) }
.dish .open { fill:var(--warn); stroke:none }
.dish.run .prg { animation:dishpulse 2.4s ease-in-out infinite } @keyframes dishpulse { 50% { opacity:.55 } }
@media (prefers-reduced-motion: reduce) { .dish.run .prg { animation:none } .tgl, .tgl i, .swtile .ic { transition:none } }
.btntile { display:grid; justify-items:center; gap:8px; padding:16px 12px; border:1px solid var(--line); background:var(--bg); color:var(--ink-soft) }
.btntile.fresh { border-color:var(--signal); background:var(--signal-soft); color:var(--signal) }
.btntile .swl { font:500 13px var(--font); color:var(--ink) }

/* Thermostat: Soll und Offset gut lesbar */
.setrow { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0; padding:8px; border:1px solid var(--line); background:var(--bg) }
.setrow.off { opacity:.7 }
.setv { display:grid; justify-items:center; line-height:1.1 }
.setv b { font:600 22px var(--display); color:var(--ink); white-space:nowrap }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px }
.chip2 { padding:2px 8px; border:1px solid var(--line); font:500 12px var(--font); color:var(--ink-soft) }
.chip2.warm { border-color:var(--warn); color:var(--warn) }
/* Detailansicht */
dialog.detail { width:min(94vw,720px); max-height:92vh; overflow:auto; padding:0 }
.dlg-detail { display:grid; gap:16px; padding:20px }
.dbig { padding:12px; border:1px solid var(--line); background:var(--bg) }
.dbig .hero .big { font-size:32px }
.dsec { display:grid; gap:8px }
.attrs { display:grid; grid-template-columns:minmax(120px,max-content) 1fr; gap:6px 16px }
.card[data-detail] { cursor:pointer }

/* Gruppenkachel */
.gcard .mrows { display:grid; gap:0; margin-top:8px }
.mrow { display:flex; align-items:center; gap:10px; padding:10px 4px; border-top:1px solid var(--line); cursor:pointer }
.mrow:hover { background:var(--signal-soft) }
.mrow.child { padding-left:28px; border-top-style:dashed }
.mrow.off { opacity:.55 }
.mrow .mn { flex:1; min-width:0; display:grid; gap:2px }
.mrow .mn b { font:500 14px var(--font); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mbtns { display:flex; gap:4px }
.mtgl { position:relative; flex:none; width:44px; height:24px; border-radius:12px; border:0; background:var(--line); cursor:pointer; padding:0 }
.mtgl i { position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:var(--ink-soft); transition:left .2s, background .2s }
.mtgl.on { background:var(--signal) } .mtgl.on i { left:23px; background:var(--on-signal) }
.swatch { flex:none; width:18px; height:18px; border-radius:50%; border:1px solid var(--line) }
.cam[data-live], .pcam[data-live] { cursor:pointer }

/* Rheinpegel */
.pegelwrap { display:flex; align-items:center; gap:16px; margin:6px 0 }
.pegel { width:98px; height:154px; flex:none }
.pg-tank { fill:var(--bg); stroke:var(--line); stroke-width:2 }
.pg-water { fill:var(--signal); opacity:.35 } .pg-wave { fill:none; stroke:var(--signal); stroke-width:2 }
.pg-mark { stroke:var(--ink-soft); stroke-width:1; stroke-dasharray:3 3 } .pg-lbl { font:500 9px var(--font); fill:var(--ink-soft) }
.spark { width:100%; height:50px } .spark polyline { fill:none; stroke:var(--signal); stroke-width:2; vector-effect:non-scaling-stroke }
/* Müllabfuhr */
.wastemain { display:flex; align-items:center; gap:16px; padding:8px 0 }
.bins { display:flex; gap:6px }
.bin { width:64px; height:80px; flex:none } .bin.sm { width:40px; height:50px } .bin.xs { width:26px; height:32px }
.bin-rib { stroke:rgba(255,255,255,.28); stroke-width:2.5; stroke-linecap:round } .bin-lid { filter:brightness(.85) }
.bin-grip { fill:var(--ink-soft) } .bin-wheel { fill:var(--ink) }
.wastemain.soon .bin.wiggle { animation:wiggle 2.4s ease-in-out infinite; transform-origin:50% 100% }
@keyframes wiggle { 0%,60%,100% { transform:rotate(0) } 70% { transform:rotate(-4deg) } 80% { transform:rotate(4deg) } 90% { transform:rotate(-2deg) } }
.wastelist { display:flex; flex-wrap:wrap; gap:12px } .wl { display:flex; align-items:center; gap:6px }
.wastehint { display:flex; align-items:center; gap:12px }
@media (prefers-reduced-motion: reduce) { .wastemain.soon .bin.wiggle { animation:none } }
.wastemain { flex-wrap:wrap } .wastemain > div:last-child { min-width:150px; flex:1 }

/* ===== Grafische Überarbeitung der Karten und Mobilansicht ===== */
.card { border-radius:6px; transition:border-color .2s, background .2s }
.card.lit { background:linear-gradient(160deg, var(--signal-soft), var(--surface) 70%); border-color:color-mix(in srgb, var(--signal) 45%, var(--line)) }
.card.lit::before, .card.alarm::before { display:none }
.card.alarm { box-shadow:0 0 0 1px var(--alarm) inset }
.card .name .nm .ic.sm { flex:none; width:28px; height:28px; padding:5px; margin-right:8px; border-radius:50%; background:var(--bg); border:1px solid var(--line); vertical-align:middle; box-sizing:border-box }
.card.lit .name .nm .ic.sm { background:var(--signal-soft); border-color:var(--signal) }
.btn, .swtile, .statetile, .setrow, .dbig, .btntile, .mrow { border-radius:6px }
.ic.pic.xl { width:56px; height:56px }
.swtile { box-shadow:0 1px 0 rgba(0,0,0,.12) }
.swtile.on { box-shadow:0 0 0 1px var(--signal) inset, 0 6px 18px -8px var(--signal) }
.statetile { display:grid; justify-items:center; gap:8px; padding:16px 12px; border:1px solid var(--line); background:var(--bg); color:var(--ink-soft) }
.statetile.ok { color:var(--signal) } .statetile.ok .swl { color:var(--ink) }
.statetile.warn { border-color:var(--warn); background:var(--warn-soft); color:var(--warn) } .statetile.warn .swl { color:var(--ink); font-weight:600 }
.statetile .swl { font:500 14px var(--font) }
/* Thermostat-Rundregler */
.dial { width:100%; max-width:200px; margin:0 auto; display:block }
.dial.lg { max-width:260px }
.dl-trk { fill:none; stroke:var(--line); stroke-width:10; stroke-linecap:round }
.dl-val { fill:none; stroke:var(--signal); stroke-width:10; stroke-linecap:round; transition:d .4s }
.dial.warm .dl-val { stroke:#d98a3a }
.dl-t { stroke:var(--ink); stroke-width:3; stroke-linecap:round }
.dl-n { font:700 38px var(--display); fill:var(--ink) } .dl-u { font:500 13px var(--font); fill:var(--ink-soft) }
/* Regler */
input[type=range].dim { width:100%; height:28px; accent-color:var(--signal) }
input[type=range] { height:28px }
/* Segmentierte Auswahl für Betriebsart */
select { border-radius:6px }

/* Detailansicht: auf dem Telefon als Sheet von unten */
dialog.detail { border-radius:10px }
.dlg-detail > .row:first-child { position:sticky; top:0; z-index:2; background:var(--surface); padding:4px 0 8px; margin:0 }
.dbig .hero .big { font-size:34px }
.dbig .dial { max-width:260px }
.dbig .setrow { padding:12px } .dbig .setrow .btn { min-width:56px; min-height:52px; font-size:22px }
.dbig .setv b { font-size:30px }
@media (max-width: 760px) {
  main { padding:12px }
  .grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; align-items:start }
  .card { padding:12px; gap:8px }
  .card.wide { grid-column:1 / -1 }
  .card .name { font-size:13px; align-items:flex-start }
  .card .name .nm { white-space:normal; overflow:visible; line-height:1.25 }
  .card .name .btn.icon { margin:-4px -4px 0 0; opacity:.55 }
  .hero .big, .big { font-size:19px }
  .hero { gap:8px } .ic.lg { width:30px; height:30px }
  .ic.pic.xl { width:48px; height:48px }
  .swtile, .statetile { padding:14px 8px }
  .setv b { font-size:20px }
  .setrow .btn { min-width:44px }
  .dial { max-width:150px }
  .chips { gap:4px }
  dialog { width:calc(100vw - 16px) }
  dialog.detail { width:100vw; max-width:100vw; max-height:92dvh; margin:auto 0 0; border-radius:16px 16px 0 0; border-bottom:0; animation:sheetup .22s ease-out }
  .dlg-detail { padding:16px 14px calc(20px + env(safe-area-inset-bottom)); gap:14px }
  .dbig { padding:10px }
  .attrs { grid-template-columns:1fr 1fr }
  .mrow .mn b { white-space:normal }
  .pegelwrap { gap:12px } .pegel { width:84px; height:132px }
  .wastemain { gap:10px } .bin { width:54px; height:68px }
  .strip { grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@keyframes sheetup { from { transform:translateY(40px); opacity:0 } to { transform:none; opacity:1 } }
@media (prefers-reduced-motion: reduce) { dialog.detail { animation:none } }
@media (max-width: 380px) { .grid { gap:8px } .card { padding:10px } }
.card .row:has(> .btn:nth-child(3)) > .btn { flex:1 1 0; min-width:0; padding-left:8px; padding-right:8px }
.card .row > input[type=range] { flex:1 1 100% }
.setrow .btn { flex:none; min-width:40px; padding:8px 10px } .setrow .setv { flex:1; min-width:0 }
.dl-n { font-size:44px } .dl-u { font-size:14px }
@media (max-width: 760px) { .setrow { padding:6px; gap:4px } .setrow .btn { min-width:36px; min-height:40px; padding:4px 0 } .setv b { font-size:17px } }
.seg { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--bg) }
.seg button { min-height:48px; border:0; background:transparent; color:var(--ink-soft); font:500 15px var(--font); cursor:pointer }
.seg button + button { border-left:1px solid var(--line) }
.seg button.on { background:var(--signal); color:var(--on-signal); font-weight:600 }
.dbig select[data-hvac] { display:none }
.dlg-detail > .row:first-child { flex-wrap:nowrap; align-items:center } .dlg-detail > .row:first-child h3 { flex:1; min-width:0; font-size:15px }
.dlg-detail > .row:first-child .row { flex-wrap:nowrap; flex:none }
.bgroup { margin:0 0 12px; border:1px solid var(--warn); background:var(--warn-soft); border-radius:6px }
.bgroup > summary { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; font:600 14px var(--font); color:var(--warn); list-style:none }
.bgroup > summary::-webkit-details-marker { display:none }
.bgroup > summary::after { content:'▾'; margin-left:auto } .bgroup[open] > summary::after { content:'▴' }
.bgroup > .banner, .bgroup > .note { margin:0; border-width:1px 0 0; border-radius:0; border-color:color-mix(in srgb, var(--warn) 35%, transparent) }
.banner, .note { border-radius:6px }
@media (max-width: 760px) {
  .scrollrow { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; margin-right:-12px; padding-right:12px }
  .scrollrow::-webkit-scrollbar { display:none }
  .scrollrow > * { flex:none } .scrollrow .search { width:180px; min-width:180px }
}
/* Navigation: „Mehr“-Menü */
.navmore { display:flex; align-items:stretch }
.navmenu { position:fixed; z-index:60; min-width:180px; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:6px; box-shadow:0 12px 30px -12px rgba(0,0,0,.6) }
.navmenu[hidden] { display:none }
.navmenu button { text-align:left; border:0; border-radius:6px; padding:12px 14px; border-bottom:0; min-height:44px }
.navmenu button:hover { background:var(--signal-soft) } .navmenu button.on { background:var(--signal-soft); color:var(--ink); border-bottom:0 }

/* ===== Touch-Display (Kiosk) ===== */
body.kiosk-on header, body.kiosk-on nav { display:none !important }
body.kiosk-on main { padding:0 }
.kiosk { min-height:100dvh; display:flex; flex-direction:column; font-size:17px }
.k-top { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px; padding:12px 20px; background:var(--bg); border-bottom:1px solid var(--line) }
.k-clock { display:flex; align-items:baseline; gap:10px } .k-clock b { font:700 40px var(--display); font-variant-numeric:tabular-nums } .k-clock small { font:500 16px var(--font); color:var(--ink-soft) }
.k-tabs { display:flex; gap:8px; margin:0 auto }
.k-tab { min-height:56px; padding:0 28px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink-soft); font:600 18px var(--font); cursor:pointer }
.k-tab.on { background:var(--signal); color:var(--on-signal); border-color:var(--signal) }
.k-tools { display:flex; gap:8px } .k-tools .btn { min-width:56px; min-height:56px; font-size:22px; border-radius:10px }
.k-body { padding:20px; display:grid; gap:20px; align-content:start }
.k-h { margin:8px 0 0; font:700 15px var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft) }
.k-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px }
.k-stat { display:grid; gap:4px; padding:16px 18px; border:1px solid var(--line); border-radius:10px; background:var(--surface) }
.k-stat b { font:700 28px var(--display) } .k-stat small { color:var(--ink-soft); font-size:14px }
.k-stat.ok { border-color:color-mix(in srgb, var(--signal) 50%, var(--line)) } .k-stat.ok b { color:var(--signal) }
.k-stat.warn { border-color:var(--warn); background:var(--warn-soft) } .k-stat.bad { border-color:var(--alarm); background:var(--alarm-soft) } .k-stat.bad b { color:var(--alarm) }
.k-scenes { display:flex; flex-wrap:wrap; gap:12px } .k-big { min-height:64px; padding:0 28px; font-size:18px; border-radius:10px }
.k-grid { grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px }
.k-rooms { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px }
.k-rooms.big { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px }
.k-room { display:grid; gap:8px; align-content:space-between; min-height:112px; padding:16px; text-align:left; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); cursor:pointer; font:inherit }
.k-room:active, .k-cat:active, .k-tab:active { transform:scale(.98) }
.k-rn { font:700 20px var(--display) } .k-rm { display:flex; flex-wrap:wrap; gap:6px; align-items:center } .k-rm b { font:600 18px var(--font) } .k-room small { color:var(--ink-soft) }
.k-room.more { place-content:center; text-align:center; background:transparent; border-style:dashed }
.k-cats { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px } .k-cats.big { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px }
.k-cat { display:grid; justify-items:center; gap:10px; padding:20px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); cursor:pointer; font:600 17px var(--font) } .k-cat small { color:var(--ink-soft); font-weight:400 }
.k-sub { display:flex; align-items:center; gap:16px } .k-sub h2 { margin:0; font:700 28px var(--display) } .k-sub .btn { min-height:52px; border-radius:10px; font-size:16px }
.kiosk .card .btn, .kiosk .card select { min-height:48px }
#k-saver { position:fixed; inset:0; z-index:200; background:#000; color:#9bb5a6; display:grid; place-items:center; overflow:hidden }
.k-saver-c { display:grid; justify-items:center; transition:transform 60s linear } .k-saver-c b { font:700 min(28vw, 220px) var(--display); font-variant-numeric:tabular-nums } .k-saver-c small { font:500 min(6vw, 40px) var(--font) }
@media (max-width: 760px) { .k-top { flex-wrap:wrap; padding:10px 12px } .k-tabs { order:3; width:100%; margin:0 } .k-tab { flex:1; padding:0 8px } .k-clock b { font-size:30px } .k-body { padding:12px } .k-grid { grid-template-columns:1fr } }
.k-grid { align-items:start }
/* Display mit wenig Höhe (7"-Touchscreen, 1024x600 oder 800x480) */
@media (max-height: 640px) and (min-width: 700px) {
  .k-top { padding:6px 14px; gap:10px } .k-clock b { font-size:30px } .k-clock small { font-size:14px }
  .k-tab { min-height:46px; padding:0 20px; font-size:16px } .k-tools .btn { min-width:46px; min-height:46px; font-size:18px }
  .k-body { padding:12px; gap:12px } .kiosk { font-size:15px }
  .k-stats { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px } .k-stat { padding:10px 12px } .k-stat b { font-size:20px } .k-stat small { font-size:12px }
  .k-grid { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px } .k-grid .card.wide { grid-column:auto }
  .k-scenes .k-big { min-height:48px; padding:0 18px; font-size:15px }
  .k-room { min-height:84px; padding:12px } .k-rn { font-size:17px } .k-cat { padding:12px 8px; font-size:15px } .k-cats { grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)) } .k-cats.big { grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)) }
  .k-rooms { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)) } .k-rooms.big { grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)) }
  .k-sub h2 { font-size:22px } .k-sub .btn { min-height:44px }
  .kiosk .card { padding:12px } .kiosk .card .btn, .kiosk .card select { min-height:44px }
}
/* Display-Skalierung per CSS-Zoom (Variable --kzoom aus /?kiosk&zoom=…) */
body.kiosk-on { zoom:var(--kzoom, 1) }
body.kiosk-on .kiosk { min-height:calc(100dvh / var(--kzoom, 1)) }
/* Masonry-Anordnung: Kacheln fließen in Spalten, keine Lücken durch unterschiedliche Höhen */
.grid.masonry { display:block; column-width:240px; column-gap:16px }
.grid.masonry > .card, .grid.masonry > .dcard { display:flex; break-inside:avoid; margin:0 0 16px; width:100% }
.grid.masonry > .card.wide { column-span:none }
@media (max-width: 760px) { .grid.masonry { column-width:150px; column-gap:10px } .grid.masonry > .card { margin-bottom:10px } }
.k-grid.masonry { column-width:300px; column-gap:16px } .k-grid.masonry > .card { margin-bottom:16px }
@media (max-height: 640px) and (min-width: 700px) { .k-grid.masonry { column-width:270px; column-gap:10px } .k-grid.masonry > .card { margin-bottom:10px } }
@media (max-width: 760px) { .k-grid.masonry { column-width:auto; column-count:1 } }
/* Marke: fX-Home-Symbol (CI Variante B) neben der Wortmarke */
.brand { display:flex; align-items:center; gap:10px } .brand-icon { width:32px; height:32px; border-radius:7px; flex:none }
.brand-icon.big { width:72px; height:72px; border-radius:16px; margin-bottom:16px; display:block }
.bat.muted { opacity:.55; text-decoration:line-through; text-decoration-thickness:1px }
/* Wandanzeige: kein Mauszeiger (Touch bedient direkt; ein angeschlossenes Touchpad oder Funk-Dongle zeigt sonst dauerhaft einen Zeiger) */
body.kiosk-on, body.kiosk-on * { cursor:none !important }
/* Gruppenkachel in der Vollansicht: Mitglieder mit allen Werten nebeneinander */
.gsub { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; margin-top:8px; align-items:start }
.gcard .gsub .card { background:var(--bg); margin:0 } .gcard .gsub .card.wide { grid-column:auto }
.gcard .gsub .card.lit { background:linear-gradient(160deg, var(--signal-soft), var(--bg) 70%) }
.gm { display:grid; gap:6px; min-width:0 }
.gcard .name .btn { min-height:32px; padding:4px 10px; font-size:12px }
.grid.masonry > .gcard { column-span:all; margin-bottom:16px }
@media (max-width: 760px) { .grid.masonry > .gcard { margin-bottom:10px } .gcard .gsub { grid-template-columns:1fr } }
.grid.masonry > .card.gcard.wide { column-span:all }
/* Innerhalb der Gruppe: Masonry wie auf der Startseite (keine Lücken durch unterschiedliche Höhen) */
.gsub.masonry { display:block; column-width:260px; column-gap:12px }
.gsub.masonry > .gm { break-inside:avoid; margin-bottom:12px }
.g-order .row { margin:2px 0 } .g-order .name { flex:1; font-weight:400 }
@media (max-width: 760px) { .gsub.masonry { column-width:auto; column-count:1 } }
/* Popups: nie breiter als der Bildschirm, Inhalt bricht um statt rechts abgeschnitten zu werden */
dialog { width:min(640px, calc(100vw - 24px)); max-width:calc(100vw - 24px); box-sizing:border-box }
dialog > div, dialog > form { max-width:100%; box-sizing:border-box }
dialog input, dialog select, dialog textarea, dialog .ck-list { max-width:100%; box-sizing:border-box }
dialog.detail { max-width:100vw }
@media (max-width: 760px) { dialog:not(.detail) { width:calc(100vw - 16px) } }

/* Detail-Popups: nichts darf breiter als der Dialog werden (lange Werte, Diagramme, Balken) */
.dlg-detail { grid-template-columns:minmax(0,1fr); min-width:0; box-sizing:border-box }
.dlg-detail > * { min-width:0; max-width:100% }
.dlg-detail svg, .dlg-detail canvas, .dlg-detail img { max-width:100%; height:auto }
.dlg-detail .attrs { min-width:0 } .dlg-detail .attrs > * { min-width:0; overflow-wrap:anywhere; word-break:break-word }
dialog.detail { overflow-x:hidden }
.attrs { grid-template-columns:minmax(120px,max-content) minmax(0,1fr) }
@media (max-width: 760px) { .attrs { grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }