/* Schriften lokal eingebunden (funktioniert ohne Internet, z. B. auf dem Raspberry Pi) – Lizenz: SIL OFL, siehe fonts/ */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
/* Layout: Leitstand – Kopfzeile mit Reitern, darunter je Reiter eine Arbeitsfläche (Schema | Steuerpult | Analyse) */
:root{
  --bg:#eef2f1; --surface:#ffffff; --surface-2:#f6f8f8; --ink:#15211e; --ink-2:#4c5c57; --muted:#5b6964; --line:#d3dcd9; --line-2:#e5ebe9;
  --accent:#0f5e7a; --accent-ink:#ffffff; --accent-soft:#dcebf0;
  --hot:#d2412e; --warm:#e0a030; --cold:#2a78d6; --solar:#e48b17;
  --good:#16703c; --warn:#875600; --crit:#b02e2e; --info:#245fa0;
  --div-neg:#2a78d6; --div-mid:#eceeed; --div-pos:#e34948;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --tank-shell:#c9d3d0; --pipe-idle:#b8c3bf;
  --f-ui:"Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0e1514; --surface:#162120; --surface-2:#1b2827; --ink:#e4ecea; --ink-2:#b2c1bc; --muted:#8a9b96; --line:#2c3b39; --line-2:#22302e;
  --accent:#5bb6d6; --accent-ink:#06222c; --accent-soft:#16343e;
  --hot:#ec6a55; --warm:#e8b04a; --cold:#4c95ea; --solar:#f0a040;
  --good:#3fb071; --warn:#e0a634; --crit:#f28b8b; --info:#5f9de0;
  --div-neg:#2f6cb8; --div-mid:#2b3533; --div-pos:#b84444;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#2ea02e; --s7:#9085e9; --s8:#e66767;
  --tank-shell:#3a4a47; --pipe-idle:#3b4a47; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0e1514; --surface:#162120; --surface-2:#1b2827; --ink:#e4ecea; --ink-2:#b2c1bc; --muted:#8a9b96; --line:#2c3b39; --line-2:#22302e;
  --accent:#5bb6d6; --accent-ink:#06222c; --accent-soft:#16343e;
  --hot:#ec6a55; --warm:#e8b04a; --cold:#4c95ea; --solar:#f0a040;
  --good:#3fb071; --warn:#e0a634; --crit:#f28b8b; --info:#5f9de0;
  --div-neg:#2f6cb8; --div-mid:#2b3533; --div-pos:#b84444;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#2ea02e; --s7:#9085e9; --s8:#e66767;
  --tank-shell:#3a4a47; --pipe-idle:#3b4a47; color-scheme:dark }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:17px;line-height:1.6;margin:0;-webkit-font-smoothing:antialiased}
p{margin:.5em 0}
.wrap{max-width:1440px;margin:0 auto;padding-inline:28px;padding-block:18px 72px}
@media (max-width:600px){.wrap{padding-inline:16px}.panel{padding:18px 18px}body{font-size:16px}}
h1,h2,h3{font-weight:700;text-wrap:balance;margin:0;line-height:1.2;letter-spacing:-.005em}
h1{font-size:1.9rem}
h2{font-size:1.4rem;margin-bottom:.35em}
h3{font-size:1.12rem;font-weight:600}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.lbl{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
header.top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding-block:6px 14px}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:38px;height:38px;flex:none}
.brand .mark svg{width:100%;height:100%;display:block}
.brandtext{display:flex;flex-direction:column;line-height:1.2}
.brandtext .name{font-weight:700;font-size:1.3rem;letter-spacing:-.01em}
.brandtext .meta{font-size:.9rem;color:var(--muted)}
.hdr-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stand{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:5px 12px}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 color-mix(in srgb, var(--good) 50%, transparent);animation:pulse 2.4s ease-out infinite}
.pulse.old{background:var(--warn);animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink-2)}
.btn.ghost[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.mainnav{display:flex;gap:6px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);position:sticky;top:env(safe-area-inset-top,0px);z-index:20;box-shadow:0 6px 18px -14px rgba(10,30,40,.45)}
.mainnav button{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;font-size:1rem;padding:10px 12px;border:0;background:transparent;color:var(--ink-2);border-radius:var(--r);cursor:pointer;white-space:nowrap}
.mainnav button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mainnav button:hover{background:var(--surface-2);color:var(--ink)}
.mainnav button[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
.mainnav button:disabled{opacity:.35;cursor:default}
.subnav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:12px;padding:10px 14px;border-radius:var(--r);background:var(--accent-soft)}
.subnav .lbl{margin-right:6px}
.subnav button{font:inherit;font-size:.95rem;font-weight:600;padding:6px 12px;border-radius:99px;border:1px solid transparent;background:transparent;color:var(--ink-2);cursor:pointer}
.subnav button[aria-current="page"]{background:var(--surface);border-color:var(--accent);color:var(--ink)}
.subnav button:disabled{opacity:.4;cursor:default}
.sub-range{margin-left:auto}
.linkbtn{font:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-weight:600}
@media (max-width:760px){
  .wrap{padding-bottom:110px}
  .mainnav{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:0;border-width:1px 0 0;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));gap:2px;box-shadow:0 -6px 18px -12px rgba(10,30,40,.4)}
  .mainnav button{flex-direction:column;gap:3px;font-size:.74rem;padding:7px 2px}
  .mainnav button svg{width:23px;height:23px}
  .stand{font-size:.8rem}
  .sub-range{margin-left:0}
}
button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
section.tab{padding-top:26px}
.grid{display:grid;gap:22px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;min-width:0}
.panel p, .find p, .rel p, .wx p{max-width:72ch}
.panel > h2, .panel > h3{margin-bottom:8px}
.row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.btn{font:inherit;font-size:.95rem;font-weight:600;padding:7px 14px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:5px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
select,input[type="date"],input[type="datetime-local"],input[type="number"]{font:inherit;font-size:.9rem;padding:4px 8px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--ink)}
input[type="range"]{accent-color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:99px;border:1px solid currentColor;white-space:nowrap;letter-spacing:.02em}
.chip.crit{color:var(--crit)} .chip.warn{color:var(--warn)} .chip.good{color:var(--good)} .chip.info{color:var(--info)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* Schema */
.schema-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media (min-width:1360px){.schema-layout{grid-template-columns:minmax(0,1fr) 340px}}
.pagehead{max-width:80ch}

.svgbox{overflow-x:auto}
#schema{width:100%;min-width:0;height:auto;display:block}
#schema text{font-family:var(--f-ui);fill:var(--ink)}
#schema .t-mono{font-family:var(--f-mono)}
#schema .cap{font-size:12px;fill:var(--ink-2);font-weight:600;letter-spacing:.04em}
#schema .pipe{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
#schema .flow{fill:none;stroke-width:2;stroke:var(--surface);stroke-dasharray:4 14;opacity:0;stroke-linecap:round}
#schema .flow.run{opacity:.85;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-18}}
#schema .box{fill:var(--surface-2);stroke:var(--line);stroke-width:1.5}
#schema .badge{cursor:pointer}
#schema .badge rect.bg{fill:var(--surface);stroke:var(--line);stroke-width:1.2}
#schema .badge:hover rect.bg, #schema .badge.sel rect.bg{stroke:var(--accent);stroke-width:2.2}
#schema .badge .id{font-size:11px;font-weight:700;fill:var(--ink-2)}
#schema .badge .val{font-size:12.5px;font-family:var(--f-mono);font-weight:500}
#schema .badge .sw{stroke:none}
#schema .badge.bad rect.bg{stroke:var(--warn);stroke-dasharray:3 2}
#schema .pump circle.ring{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.6}
#schema .pump path.blade{fill:var(--muted)}
#schema .pump.on path.blade{fill:var(--good)}
#schema .pump.on circle.ring{stroke:var(--good)}
#schema .pump.on .rot{animation:spin 1.4s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
#schema .valve path{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.5}
#schema .valve.on path{fill:var(--good);stroke:var(--good)}
#schema .lamp{stroke:var(--line);stroke-width:1}
@media (prefers-reduced-motion: reduce){#schema .flow.run,#schema .pump.on .rot{animation:none}}
.timebar{display:grid;gap:8px}
.timebar input[type="range"]{width:100%}
.clock{font-family:var(--f-mono);font-size:1.25rem;font-weight:500}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{border:1px solid var(--line-2);background:var(--surface-2);border-radius:8px;padding:12px 14px}
.kpi .v{font-family:var(--f-mono);font-size:1.1rem;font-variant-numeric:tabular-nums}
.detail .big{font-family:var(--f-mono);font-size:1.9rem;line-height:1.1}
.detail dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0 0;font-size:.95rem}
.detail dt{color:var(--muted)}
.detail dd{margin:0;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.note{font-size:.95rem;line-height:1.6;color:var(--ink-2);border-left:3px solid var(--line);padding-left:10px;margin-top:10px}
.note.warn{border-left-color:var(--warn)} .note.crit{border-left-color:var(--crit)}
.legend-svg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--ink-2);align-items:center}
.legend-svg i{display:inline-block;width:22px;height:5px;border-radius:3px;vertical-align:middle;margin-right:5px}
.tempscale{height:8px;border-radius:4px;width:160px;display:inline-block;vertical-align:middle}

/* Steuerpult */
.cp-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:950px){.cp-layout{grid-template-columns:minmax(0,1fr)}}
.sigs{display:grid;gap:10px;max-height:72vh;overflow:auto;padding-right:4px}
.sigs fieldset{border:1px solid var(--line-2);border-radius:5px;padding:6px 10px 8px;margin:0}
.sigs legend{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;padding:0 4px}
.sigs label{display:flex;gap:8px;align-items:center;font-size:.95rem;padding:3px 0;cursor:pointer;line-height:1.35}
.sigs label .k{font-family:var(--f-mono);font-size:.75rem;color:var(--muted);min-width:34px}
.sigs label i{width:10px;height:10px;border-radius:2px;flex:none}
.chart-stack{display:grid;gap:18px}
.chart-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 10px;min-width:0}
.chart-card .hd{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:2px}
.uplot{font-family:var(--f-ui)}
.u-legend{font-size:.9rem;color:var(--ink-2);text-align:left}
.u-legend .u-value{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.u-legend th{font-weight:500}
.u-select{background:var(--accent-soft);opacity:.6}
.tbl-wrap{overflow-x:auto}
table.data{border-collapse:collapse;width:100%;font-size:.95rem}
table.data th,table.data td{padding:9px 10px;border-bottom:1px solid var(--line-2);text-align:right;white-space:nowrap}
table.data th:first-child,table.data td:first-child,table.data td.l,table.data th.l{text-align:left}
table.data th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
table.data td{font-variant-numeric:tabular-nums}
table.data td.wrap{white-space:normal;min-width:220px;text-align:left}

/* Korrelation */
.corr-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1100px){.corr-layout{grid-template-columns:minmax(0,1fr)}}
table.heat{border-collapse:separate;border-spacing:2px;font-size:.72rem}
table.heat th{font-weight:600;color:var(--ink-2);white-space:nowrap;padding:2px 4px}
table.heat th.col{writing-mode:vertical-rl;transform:rotate(180deg);text-align:left;height:120px;vertical-align:bottom}
table.heat th.rowh{text-align:right}
table.heat td{width:30px;min-width:30px;height:26px;text-align:center;font-family:var(--f-mono);font-size:.68rem;border-radius:3px;cursor:pointer}
table.heat td:hover,table.heat td.sel{outline:2px solid var(--ink);outline-offset:-1px}
.rank{display:grid;gap:3px;font-size:.85rem}
.rank .r{display:grid;grid-template-columns:minmax(150px,1.3fr) 1fr 1fr;gap:10px;align-items:center}
.bar{position:relative;height:14px;background:var(--line-2);border-radius:3px}
.bar span{position:absolute;top:0;bottom:0;border-radius:3px}
.bar .zero{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--muted)}
.bar{margin-right:48px}
.bar b{position:absolute;left:calc(100% + 6px);top:-1px;font-family:var(--f-mono);font-weight:400;font-size:.72rem;color:var(--ink)}
canvas#scatter{width:100%;height:340px;display:block}
.tip{position:fixed;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:5px 8px;font-size:.8rem;box-shadow:0 2px 10px rgba(0,0,0,.12);z-index:50;font-family:var(--f-mono)}

/* Befunde */
.finds{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:22px}
.find{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;gap:12px;min-width:0}
.find .hd{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}
.find p{margin:0;font-size:1rem;max-width:70ch}
.find ul{margin:0;padding-left:20px;font-size:.97rem;display:grid;gap:6px}
.find .ev{font-family:var(--f-mono);font-size:.85rem;line-height:1.6;background:var(--surface-2);border:1px solid var(--line-2);border-radius:4px;padding:6px 8px;color:var(--ink-2)}
.find .act{margin-top:auto}
.prose{max-width:80ch}
.prose p{margin:.4em 0}

/* Einfach erklärt + Hilfen */
details.help{background:var(--accent-soft);border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));border-radius:var(--r);padding:16px 22px;margin-bottom:22px}
details.help summary{cursor:pointer;font-weight:600;font-size:1rem;color:var(--ink)}
details.help .hb{display:grid;gap:16px 26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:12px;font-size:1rem}
details.help .hb p{margin:.2em 0}
details.help ol{margin:.3em 0;padding-left:20px}
.ex3{display:grid;gap:16px 26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));font-size:.92rem}
.ex3 b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:2px}
.ex3 p{margin:.25em 0}
#cpExplain{border-left:4px solid var(--accent)}
ul.siglist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;font-size:.97rem}
ul.siglist li{display:flex;gap:8px;align-items:flex-start}
ul.siglist i{width:10px;height:10px;border-radius:2px;flex:none;margin-top:5px}
.chart-help{font-size:.93rem;color:var(--ink-2);margin:0 0 6px}
ol.steps{list-style:none;counter-reset:st;margin:12px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
ol.steps li{counter-increment:st;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);padding:18px 20px;display:grid;gap:6px;align-content:start}
ol.steps li .ic{width:44px;height:44px}
ol.steps li h3::before{content:counter(st) ". ";color:var(--accent)}
ol.steps li p{margin:0;font-size:1rem}
.easy-big{font-size:1.18rem;line-height:1.6;max-width:70ch;margin:1em 0 0}
.wxgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr))}
.wx{border:1px solid var(--line-2);background:var(--surface-2);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.wx .hd{display:flex;gap:8px;align-items:center}
.wx .hd h3{flex:1}
.wx p{margin:0;font-size:1rem}
.wx .btn{align-self:flex-start;margin-top:auto}
.wxic{width:28px;height:28px;display:inline-block}
.wxic svg,.ic svg{width:100%;height:100%}
.stripwrap{overflow-x:auto;padding-bottom:4px}
#strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(16px,1fr);gap:3px;min-width:520px}
.dbar{display:grid;grid-template-rows:90px 34px 16px;border:0;background:none;padding:0;cursor:pointer;font:inherit}
.dbar .up,.dbar .dn{position:relative;display:block}
.dbar .up i{position:absolute;bottom:0;left:1px;right:1px;border-radius:3px 3px 0 0}
.dbar .dn i{position:absolute;top:2px;left:1px;right:1px;border-radius:0 0 3px 3px;background:var(--cold);opacity:.75}
.dbar .dl{font-size:.68rem;color:var(--muted);font-family:var(--f-mono)}
.dbar .g.sonnig{background:var(--s4)} .dbar .g.wechselhaft{background:color-mix(in srgb, var(--s4) 45%, var(--surface))} .dbar .g.trüb{background:var(--muted)}
.dbar.sel{outline:2px solid var(--ink);outline-offset:1px;border-radius:3px}
.dbar:hover .dl{color:var(--ink)}
.keyrow{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--ink-2);margin-top:6px}
.keyrow i{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-2px;margin-right:5px}
.pfind{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.pfind article{border:1px solid var(--line-2);border-radius:var(--r);padding:18px 20px;background:var(--surface-2);display:grid;gap:6px;align-content:start}
.pfind p{margin:0;font-size:1rem}
.pfind b.k{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
dl.lex{display:grid;grid-template-columns:minmax(130px,auto) 1fr;gap:10px 18px;margin:0;font-size:1rem}
dl.lex dt{font-weight:600}
dl.lex dd{margin:0;color:var(--ink-2)}
.golist{display:grid;gap:8px}
.golist button{text-align:left;display:grid;gap:2px;white-space:normal}
.golist button span{font-size:.85rem;color:var(--muted);font-weight:400}
.two{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.kurz{background:var(--accent-soft);border-radius:8px;padding:10px 14px}
.rmini{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.rmini figure{margin:0;display:grid;gap:2px;justify-items:center;font-size:.8rem;color:var(--ink-2);text-align:center;max-width:130px}
.rmini svg{width:90px;height:70px;background:var(--surface);border:1px solid var(--line-2);border-radius:4px}

.relgrid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr))}
.rel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;gap:12px;min-width:0}
.rel h3{font-size:1.12rem}
.relans{font-size:1.12rem;line-height:1.55;margin:0;max-width:70ch}
.relplot{min-height:260px}
canvas.xy{width:100%;display:block}
.ex2{display:grid;gap:14px 26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));font-size:.97rem;border-top:1px solid var(--line-2);padding-top:12px}
.ex2 b{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:2px}
.ex2 p{margin:0}
details#expert > summary{cursor:pointer;font-size:1rem}
a.cite{font-size:.78em;font-family:var(--f-mono);color:var(--accent);text-decoration:none;vertical-align:super;line-height:0;margin-left:1px}
a.cite:hover{text-decoration:underline}
ol.srclist{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px}
ol.srclist li{padding:8px 10px;border-radius:4px;border:1px solid var(--line-2);word-break:break-word}
ol.srclist li.flash{border-color:var(--accent);background:var(--accent-soft)}
ol.srclist a{color:var(--accent)}
.upgrid{display:grid;gap:6px 12px;grid-template-columns:minmax(0,1fr);font-size:.9rem}
.upgrid input[type=file]{font:inherit;font-size:.85rem;max-width:100%}
.note.crit{border-left-color:var(--crit)}
select{max-width:100%}
@media (max-width:640px){.rank .r{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.rank .r > span:first-child{grid-column:1/-1}.bar{margin-right:44px}}
/* Prognose */
.fcgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.fctop{grid-template-columns:minmax(0,1fr)}
.fc{border:1px solid var(--line-2);background:var(--surface-2);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.fc .day{font-size:1.15rem;font-weight:700}
.fc .big{font-size:2rem;font-weight:700;line-height:1.15}
.fc .rng{font-family:var(--f-mono);font-size:.9rem;color:var(--muted)}
.fc dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:4px 0 0;font-size:.95rem}
.fc dt{color:var(--muted)} .fc dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600}
.fc .rng{margin-left:6px}
.empty{max-width:70ch}
.loading{padding:60px 0;text-align:center;color:var(--muted);font-size:1.1rem}

/* ===== Seitenköpfe, Startseite ===== */
.pagehead{margin:8px 0 22px;max-width:70ch}
.pagehead h1{font-size:2rem}
.lead{font-size:1.15rem;line-height:1.6;color:var(--ink-2);margin:.4em 0 0}
.hero{padding:30px 32px;border-radius:calc(var(--r) + 6px);background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)) 0%, var(--surface) 70%);border:1px solid var(--line);margin-bottom:8px}
.hero h1{font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);max-width:24ch}
.hero .lead{max-width:62ch;font-size:clamp(1.05rem, 1rem + .3vw, 1.22rem)}
.kicker{margin:0 0 8px;font-size:.92rem;color:var(--muted);font-weight:600}
h2.sect{font-size:1.25rem;margin:34px 0 14px}
[hidden]{display:none!important}
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr))}

.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tile .tl{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-weight:600;font-size:.95rem}
.tic{width:26px;height:26px;color:var(--ink-2);flex:none}
.tic svg{width:100%;height:100%;display:block}
.tv{font-size:2rem;font-weight:700;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;hyphens:auto}
.tm{margin:0;font-size:.95rem;color:var(--ink-2);line-height:1.5}
.stl{display:inline-block;font-size:.8rem;font-weight:700;padding:1px 9px;border-radius:99px;margin-right:2px}
.stl.good{background:color-mix(in srgb, var(--good) 16%, transparent);color:var(--good)}
.stl.warn{background:color-mix(in srgb, var(--warn) 18%, transparent);color:var(--warn)}
.tile.warn{border-color:color-mix(in srgb, var(--warn) 45%, var(--line))}
details.why{margin-top:auto}
details.why > summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:.92rem;list-style:none;display:inline-flex;align-items:center;gap:6px;padding:4px 0}
details.why > summary::-webkit-details-marker{display:none}
details.why > summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details.why[open] > summary::before{transform:rotate(45deg)}
details.why > p, details.why > dl{font-size:.95rem;color:var(--ink-2);margin:.4em 0 0}
.panel.issues{padding:6px 22px 18px}
details.issue{border-bottom:1px solid var(--line-2)}
details.issue > summary{display:flex;gap:14px;align-items:flex-start;padding:16px 0;cursor:pointer;list-style:none}
details.issue > summary::-webkit-details-marker{display:none}
.dot{width:12px;height:12px;border-radius:50%;flex:none;margin-top:7px}
.dot.warn{background:var(--warn)} .dot.crit{background:var(--crit)}
.issue .it{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.issue .it span{color:var(--ink-2);font-size:.97rem}
.issue .more{color:var(--accent);font-weight:600;font-size:.9rem;white-space:nowrap;margin-top:3px}
details.issue[open] .more{visibility:hidden}
.issuebody{padding:0 0 18px 26px;max-width:70ch}
.issuebody b.k{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-top:10px}
.issuebody p{margin:.2em 0}
.story{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px;align-items:center}
@media (max-width:820px){.story{grid-template-columns:minmax(0,1fr)}}
.storyfig svg{width:100%;height:auto;display:block;max-height:380px}
.storydots{list-style:none;display:flex;gap:8px;padding:0;margin:0 0 14px}
.storydots button{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer}
.storydots button.done{border-color:var(--accent);color:var(--accent)}
.storydots button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
#storyBody h3{font-size:1.35rem;margin:4px 0 8px}
#storyBody p{font-size:1.06rem;line-height:1.65}
.storynav{margin-top:16px}
.storynav .btn{padding:10px 18px}
#storySvg .ground{fill:color-mix(in srgb, var(--ink) 6%, var(--surface))}
#storySvg .slab{fill:var(--muted);font-size:11px;font-family:var(--f-ui);font-weight:600}
#storySvg .glab{fill:var(--ink);font-size:12px;font-family:var(--f-ui);font-weight:700}
#storySvg .roof{fill:color-mix(in srgb, var(--ink) 10%, var(--surface));stroke:var(--ink-2);stroke-width:1.5}
#storySvg .wall{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.5}
#storySvg .floor{stroke:var(--line);stroke-width:1.5}
#storySvg .sun{fill:var(--s4)}
#storySvg .rays path{stroke:var(--s4);stroke-width:3;stroke-linecap:round}
#storySvg .coll{fill:color-mix(in srgb, var(--s1) 70%, var(--ink));stroke:var(--ink);stroke-width:1}
#storySvg .collines{stroke:color-mix(in srgb, var(--s4) 70%, white);stroke-width:1.2}
#storySvg .hot,#storySvg .cold,#storySvg .warm{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
#storySvg .hot{stroke:var(--hot)} #storySvg .cold{stroke:var(--cold)} #storySvg .warm{stroke:var(--warm)}
#storySvg .pump{fill:var(--surface);stroke:var(--good);stroke-width:2.5} #storySvg .pumpi{fill:var(--good)}
#storySvg .tank{stroke:var(--ink-2);stroke-width:2}
#storySvg .shower{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.5}
#storySvg .drops{stroke:var(--cold);stroke-width:2;stroke-linecap:round}
#storySvg .radi{fill:var(--surface);stroke:var(--hot);stroke-width:2} #storySvg .radl{stroke:var(--hot);stroke-width:1.4}
#storySvg [data-g]{transition:opacity .35s}
#storySvg.focus [data-g]:not(.hl){opacity:.22}
#storySvg [data-g].hl .glab{fill:var(--accent)}
@media (prefers-reduced-motion: reduce){#storySvg [data-g]{transition:none}.pulse{animation:none}}
details.lexwrap > summary{cursor:pointer;list-style:none}
details.lexwrap > summary::-webkit-details-marker{display:none}
details.lexwrap > summary h2{display:inline;margin:0}
details.lexwrap > summary::after{content:"  +";color:var(--accent);font-weight:700;font-size:1.3rem}
details.lexwrap[open] > summary::after{content:"  –"}
details.lexwrap dl{margin-top:14px}
.ex2.one{grid-template-columns:minmax(0,1fr)}
#expert > summary{display:none}
.panel > h2:first-child{margin-top:0}

@media (max-width:760px){
  #schema{min-width:0}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi{padding:9px 11px}
  .kpi .v{font-size:1rem}
}
.kpi .lbl{text-transform:none;letter-spacing:0;font-size:.82rem}
.kpi .v{font-family:var(--f-ui);font-weight:700;font-size:1.3rem}

@media (max-width:560px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{padding:14px 13px 10px}.tv{font-size:1.3rem;overflow-wrap:normal}.tile .tl{font-size:.88rem}.tm{font-size:.88rem}.hero{padding:22px 20px}}

/* Theme-Umschalter */
.themebtn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.92rem;font-weight:600;padding:7px 12px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink-2);cursor:pointer}
.themebtn:hover{border-color:var(--accent);color:var(--ink)}
.themebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.themebtn .tl{display:none}}

/* ---------- Bericht ---------- */
#berichtBody{display:grid;gap:22px}
.rep h2{display:flex;align-items:center;gap:12px}
.repn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:1rem;font-weight:700;flex:none}
.replist{margin:.4em 0;padding-left:1.2em;line-height:1.6}
.replist li{margin:.45em 0}
.replist .chip{vertical-align:2px}
.rep .okh{color:var(--good)} .rep .badh{color:var(--crit)}
.rep h3{margin:.8em 0 .3em}
ol.meas{list-style:none;counter-reset:m;margin:0;padding:0;display:grid;gap:12px}
ol.meas li{counter-increment:m;border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px;background:var(--surface-2)}
ol.meas .mh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
ol.meas h3{margin:0;font-size:1.08rem}
ol.meas h3::before{content:counter(m) ". "}
ol.meas p{margin:.45em 0 0;max-width:90ch;line-height:1.6}
.panel.rep.prose{max-width:none}
.rep > p,.rep .replist,.rep .prose{max-width:90ch}

/* ===================== Feinschliff v9 =====================
   Ein Raster für alle Seiten: gleiche Abstände zwischen Blöcken, gleiche Höhe aller
   Bedienelemente, Beschriftung und Eingabefeld bleiben zusammen, Textspalten statt
   halbbreiter Kästen. */
:root{--gap:24px;--r-sm:8px;--ctl-h:38px}
@media (max-width:600px){:root{--gap:18px}}

/* Seitenfluss */
section.tab{display:flex;flex-direction:column;gap:var(--gap);padding-top:28px}
section.tab > *{margin-top:0;margin-bottom:0}
.pagehead{margin:0;max-width:72ch}
.pagehead h1{font-size:2rem}
section.tab > h2.sect{margin:10px 0 -8px}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.grid,.schema-layout,.cp-layout,.corr-layout,.two,.finds,.relgrid,#berichtBody{gap:var(--gap)}
details.help{margin:0}

/* Text: Kasten volle Breite, nur die Zeilen begrenzt */
.prose{max-width:none}
.prose > p,.prose > ul,.prose > ol,.prose > h3{max-width:75ch}
.panel{padding:24px 28px}
.panel > h2,.panel > h3{margin-bottom:10px}
@media (max-width:600px){.panel{padding:18px}}

/* Kopfzeile: alle Elemente gleich hoch */
header.top{padding-block:4px 16px}
.hdr-right{gap:8px}
.stand,.themebtn,.hdr-right .btn{height:var(--ctl-h);min-height:0;padding-block:0;display:inline-flex;align-items:center;border-radius:99px}
.hdr-right .btn{padding-inline:16px}
@media (max-width:560px){
  header.top{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .hdr-right{flex-wrap:nowrap}
  .stand{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}
  .hdr-right .btn{padding-inline:12px}
  .hide-s{display:none}
}

/* Bedienelemente */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--ctl-h);padding:0 14px;border-radius:var(--r-sm);line-height:1.2}
.btn.ghost{background:transparent}
select,input[type="date"],input[type="datetime-local"],input[type="number"]{height:var(--ctl-h);padding:0 10px;border-radius:var(--r-sm);font-size:.95rem}
.field{display:inline-flex;align-items:center;gap:8px}
.field > label{font-size:.9rem;color:var(--muted);font-weight:600;white-space:nowrap}
.row{gap:10px 12px}
@media (max-width:760px){
  .field{display:flex;width:100%}
  .field > label{min-width:86px}
  .field > select,.field > input[type="date"],.field > input[type="datetime-local"],.field > input[type="range"]{flex:1;min-width:0}
}
input[type="file"]{font:inherit;font-size:.92rem;color:var(--ink-2);max-width:100%}
input[type="file"]::file-selector-button{font:inherit;font-weight:600;font-size:.92rem;height:var(--ctl-h);padding:0 14px;margin-right:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);cursor:pointer}
input[type="file"]::file-selector-button:hover{border-color:var(--accent)}
.upgrid{gap:6px 12px}
.upgrid label{font-weight:600;color:var(--ink);margin-top:6px}

/* Aufklappbereiche: überall derselbe Pfeil */
details.help > summary,details.lexwrap > summary{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer}
details.help > summary::-webkit-details-marker{display:none}
details.help > summary::before,details.lexwrap > summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);transition:transform .15s;flex:none;margin:0 2px}
details.help[open] > summary::before,details.lexwrap[open] > summary::before{transform:rotate(45deg)}
details.lexwrap > summary::after{content:none}
details.lexwrap > summary h2{display:block;margin:0}
@media (prefers-reduced-motion: reduce){details > summary::before{transition:none}}

/* Kacheln: festes Spaltenraster, damit beide Reihen auf der Startseite fluchten */
.tiles{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
@media (max-width:560px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Karten: Aktionen immer unten links */
.cardact{margin-top:auto;padding-top:4px}
.find .kurz{max-width:none}

/* Tabellen */
table.data th,table.data td{vertical-align:top}
table.data th{vertical-align:bottom}
table.data .mono,table.data td.mono{font-size:.9rem}
#dataState table{table-layout:auto!important}
#dataState td:first-child{width:40%;color:var(--ink-2)}

/* Bericht */
.replist.flat{list-style:none;padding-left:0}
.replist.flat li{margin:.7em 0}

/* Anlagenschema auf dem Handy: lesbar groß, seitlich wischen */
.svghint{display:none;margin:0 0 8px}
@media (max-width:760px){
  .svghint{display:block}
  .svgbox{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:-6px;padding-inline:6px}
  #schema{min-width:720px}
}
#mapTbl td.mapdesc{min-width:320px;max-width:520px}
.mapnote{display:block;margin-top:6px;padding:6px 10px;border-left:3px solid var(--warn);background:var(--surface-2);border-radius:0 6px 6px 0;color:var(--ink-2)}
.pulse{flex:none}
.stl{border-radius:6px}

/* ---------- Anmeldung ---------- */
body.loginpage{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.loginbox{width:100%;max-width:400px;display:grid;gap:20px}
.loginform{display:grid;gap:8px}
.loginform h1{font-size:1.5rem;margin-bottom:8px}
.loginform label{font-weight:600;font-size:.95rem;margin-top:6px}
.loginform input[type="text"],.loginform input[type="password"]{font:inherit;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);width:100%}
.loginform input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.loginform .btn{margin-top:14px;min-height:44px;width:100%}
.loginerr{margin:0 0 4px;padding:10px 12px;border-left:3px solid var(--crit);background:var(--surface-2);border-radius:0 6px 6px 0;color:var(--ink)}
.logoutform{display:inline-flex;margin:0}
.logoutbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.logoutbtn{padding-inline:10px}}

/* ---------- Zeitachse (Anlagenschema) ---------- */
.timebar{gap:14px;border-color:color-mix(in srgb, var(--accent) 45%, var(--line));box-shadow:inset 0 3px 0 var(--accent)}
.tb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 20px}
.tb-kicker{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.tb-kicker svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tb-clock{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tb-clock .clock{font-size:1.7rem;font-weight:500;letter-spacing:-.01em}
.tb-play{gap:10px}
.tb-steps{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tb-steps .btn{font-variant-numeric:tabular-nums}
.tb-steps #stepBack,.tb-steps #stepFwd{border-color:var(--accent)}
.tb-win{display:inline-flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}
.tb-win .lbl{margin-right:2px}
.tb-chart{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 4px 2px;background:var(--surface);min-width:0;touch-action:none}
.tb-chart:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tb-legend{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.88rem;color:var(--ink-2);margin-top:-6px}
.tb-legend i{display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.tb-legend b{color:var(--ink);font-weight:500;margin-left:2px}
.tb-over{display:grid;gap:4px;min-width:0}
.tb-over > div{border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);min-width:0;touch-action:none}
.tb-kpilbl{margin:4px 0 -6px}
#tlOver .u-over{cursor:pointer}
@media (max-width:760px){
  .tb-win{margin-left:0}
  .tb-steps .btn{padding:0 10px}
  .tb-clock .clock{font-size:1.35rem}
}

/* Zähler & Messpunkte (Die Anlage) */
#meterPanel h2{margin-bottom:.2em}
#meters{width:100%;height:auto;display:block}
#meters text{font-family:var(--f-ui);fill:var(--ink)}
#meters .mcap{font-size:15px;font-weight:700;letter-spacing:.05em;fill:var(--ink-2)}
#meters .msub{font-size:14.5px;fill:var(--muted)}
#meters .mkick{font-size:12px;font-weight:700;letter-spacing:.07em;fill:var(--muted)}
#meters .mname{font-size:17px;font-weight:700}
#meters .mnum{font-family:var(--f-mono);font-size:14px;fill:var(--ink-2)}
#meters .mnum.warn{fill:var(--warn);font-weight:600}
#meters .mval{font-family:var(--f-mono);font-size:14px;fill:var(--ink-2)}
#meters .mline{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
#meters .mline.gas{stroke:var(--info)}
#meters .mline.heat{stroke:var(--hot)}
#meters .marr.gas{fill:var(--info)} #meters .marr.heat{fill:var(--hot)}
#meters .mnet{fill:var(--info)}
#meters .mbox rect{fill:var(--surface-2);stroke:var(--line);stroke-width:1.5}
#meters .mbox.gen rect{stroke:var(--ink-2);stroke-width:2}
#meters .mbox.sun rect{stroke:var(--solar);stroke-width:2}
#meters .mbox.use rect{fill:var(--surface)}
#meters .mtank rect:first-child{fill:var(--surface-2);stroke:var(--tank-shell);stroke-width:3}
#meters .mwt{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5}
#meters .meter,#meters .mreg{cursor:pointer;outline:none}
#meters .meter .mbg{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.5}
#meters .meter .minner{fill:none;stroke:var(--line);stroke-width:1.2}
#meters .meter .mstat{fill:var(--pipe-idle)}
#meters .meter.has .mstat{fill:var(--good)}
#meters .meter.open .mstat{fill:var(--warn)}
#meters .meter.open .mbg{stroke:var(--warn);stroke-dasharray:6 4}
#meters .meter:hover .mbg,#meters .meter:focus-visible .mbg{stroke:var(--accent);stroke-width:2.5}
#meters .mreg rect{fill:var(--surface);stroke:var(--good);stroke-width:1.5;stroke-dasharray:5 3}
#meters .mreg:hover rect,#meters .mreg:focus-visible rect{stroke:var(--accent);stroke-width:2.5}
.metercards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gap,14px);margin-top:14px}
.mcard{border:1px solid var(--line);border-radius:var(--r-sm,10px);padding:14px 16px;background:var(--surface);transition:box-shadow .2s,border-color .2s}
.mcard h3{margin-bottom:.15em}
.mcard p{margin:.35em 0}
.mcard.hl{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mcard .chips{display:flex;flex-wrap:wrap;gap:6px}
.mcard .chip{font-size:.78rem;padding:1px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.mstatus{padding-left:10px;border-left:3px solid var(--pipe-idle)}
.mstatus.good{border-left-color:var(--good)}
.mvals{margin:.3em 0 0;padding-left:1.2em}
@media (max-width:760px){ #meters{min-width:760px} }