:root {
  --bg: #f4f5f2; --card: #fff; --ink: #1d2320; --muted: #5f6b66; --line: #dfe3dd;
  --accent: #1f6f5c; --warn: #b26a00; --bad: #b3261e; --ok: #23784b; --sim: #3657a6;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #151917; --card: #1e2421; --ink: #e8ece9; --muted: #9aa7a1; --line: #2e3632;
    --accent: #5fc3a6; --warn: #e3a33c; --bad: #ff8a80; --ok: #7bd4a1; --sim: #8fb1ff; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); }
main { max-width: 1280px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; margin: .4rem 0 1rem; } h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
a { color: var(--accent); }
.top { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.top nav a { padding: 5px 9px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.top nav a.active, .top nav a:hover { background: var(--bg); }
.logout { display: flex; gap: 8px; align-items: center; color: var(--muted); }
.mode { padding: 4px 10px; border-radius: 99px; font-weight: 700; font-size: .8rem; }
.mode.sim { background: color-mix(in srgb, var(--sim) 15%, transparent); color: var(--sim); }
.mode.prod { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.mode.err { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; }
.grid2, .grid3, .grid4 { display: grid; gap: 14px; }
.climate-kpis { margin-bottom: 14px; }
.climate-kpis .kpi { min-height: 86px; }
.climate-kpis .kpi small { margin-top: 4px; }
.grid2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpi span { color: var(--muted); font-size: .85rem; display: block; } .kpi b { font-size: 1.4rem; display: block; } .kpi small { color: var(--muted); }
table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .82rem; color: var(--muted); font-weight: 600; }
.ok { color: var(--ok); } .bad { color: var(--bad); } td.on { color: var(--warn); font-weight: 700; }
.flash { padding: 10px 14px; border-radius: 8px; margin: 0 0 12px; border: 1px solid var(--line); background: var(--card); }
.flash.ok { border-color: var(--ok); } .flash.err { border-color: var(--bad); color: var(--bad); }
.flash.warn { border-color: var(--warn); } .flash.info { border-color: var(--sim); }
.flash ul { margin: .3rem 0 0 1.1rem; padding: 0; }
.hint, small { color: var(--muted); }
label { display: block; margin: 6px 0; } label.chk { display: flex; gap: 8px; align-items: flex-start; }
input, select, button { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); }
button { cursor: pointer; } button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
form.inline { display: inline-flex; gap: 8px; align-items: center; }
.config fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 4px 18px; }
.config legend { font-weight: 700; padding: 0 6px; }
.field span { display: block; font-size: .85rem; font-weight: 600; } .field input:not([type=checkbox]), .field select { width: 100%; max-width: 360px; }
.field em { font-style: normal; color: var(--muted); margin-left: 6px; } .field small { display: block; }
.sticky { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.step.done { border-left: 5px solid var(--ok); } .step.failed { border-left: 5px solid var(--bad); }
.tag { font-size: .75rem; font-weight: 600; color: var(--muted); margin-left: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; } .tabs a { padding: 6px 10px; border-radius: 6px; text-decoration: none; }
.tabs a.active { background: var(--card); border: 1px solid var(--line); }
tr.lv-critical td, tr.lv-error td { color: var(--bad); } tr.lv-warning td { color: var(--warn); }
pre { white-space: pre-wrap; font-size: .8rem; max-height: 360px; overflow: auto; }
.chart svg { width: 100%; height: auto; } .chart path { fill: none; stroke-width: 1.6; }
.chart .axis { stroke: var(--line); } .chart .lbl, .chart .leg { font-size: 11px; fill: var(--muted); }
.chart .s0 { stroke: var(--sim); fill: var(--sim); } .chart .s1 { stroke: var(--warn); fill: var(--warn); } .chart .s2 { stroke: var(--ok); fill: var(--ok); }
.chart path.s0, .chart path.s1, .chart path.s2 { fill: none; }
.login { max-width: 360px; margin: 10vh auto; } .login input { width: 100%; }
.meter h2 small { font-weight: 400; font-size: .8rem; margin-left: 6px; }
.meter-main { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 16px; align-items: center; margin-bottom: 8px; }
.meter-now { border-radius: 10px; padding: 14px 16px; background: var(--bg); text-align: center; }
.meter-now span { display: block; color: var(--muted); font-size: .85rem; }
.meter-now b { display: block; font-size: 2.2rem; line-height: 1.2; }
.meter-now em { font-style: normal; font-weight: 700; }
.meter-now.imp { background: color-mix(in srgb, var(--bad) 12%, var(--card)); } .meter-now.imp em, td.imp { color: var(--bad); }
.meter-now.exp { background: color-mix(in srgb, var(--ok) 14%, var(--card)); } .meter-now.exp em, td.exp { color: var(--ok); }
.meter-now.unk { background: color-mix(in srgb, var(--warn) 14%, var(--card)); } .meter-now.unk em { color: var(--warn); }
.meter-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; }
.meter-side span { display: block; color: var(--muted); font-size: .8rem; } .meter-side b { font-size: 1.05rem; } .meter-side small { display: block; }
@media (max-width: 640px) { .meter-main { grid-template-columns: 1fr; } }
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 20px; }
@media (max-width: 640px) {
  .top { gap: 6px 10px; padding: 8px 12px; }
  .top nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .top nav a { white-space: nowrap; }
  .logout span { display: none; }
  .mode { font-size: .72rem; }
  #stages td:nth-child(4), #stages th:nth-child(4) { display: none; } th, td { padding: 4px; font-size: .85rem; } .config fieldset { grid-template-columns: 1fr; } }

/* ---- 2.0 Energiemanager: Kennzeichnung gemessen / Prognose / Schätzung */
.kind { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 99px; vertical-align: middle; letter-spacing: .02em; }
.kind.measured { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.kind.forecast { background: color-mix(in srgb, var(--sim) 16%, transparent); color: var(--sim); border: 1px dashed var(--sim); }
.kind.estimate, .kind.fallback { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); border: 1px dotted var(--warn); }
.kind.learned { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.chart path.k-forecast { stroke-dasharray: 7 4; } .chart path.k-estimate { stroke-dasharray: 2 3; stroke-width: 2.2; }
.chart path.k-target { stroke-dasharray: 1 0; opacity: .55; } .chart .now { stroke: var(--bad); stroke-dasharray: 3 3; }
.warn { color: var(--warn); }
.egrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; }
.egrid span { display: block; color: var(--muted); font-size: .8rem; } .egrid b { display: block; font-size: 1.1rem; } .egrid small { display: block; }
#energy h2 small, .card h2 small { font-weight: 400; font-size: .8rem; margin-left: 6px; }
ul.checks { list-style: none; padding: 0; margin: 0 0 8px; } ul.checks li { padding: 2px 0; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.slots tr.gridslot td { background: color-mix(in srgb, var(--warn) 8%, transparent); }
table.report tr.total td { font-weight: 700; border-top: 2px solid var(--line); }
.field.rows { grid-column: 1 / -1; overflow-x: auto; } .rowtable td { padding: 2px 4px; } .rowtable input:not([type=checkbox]) { width: 5.5em; }
a.button { display: inline-block; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); text-decoration: none; }
.kpi span.kind, .egrid span.kind, .meter-side span.kind { display: inline-block; font-size: .68rem; }

/* ---- Einstellungen: Reiter, Tabellen, Speichern-Leiste */
.pagehead h1 { margin-bottom: .3rem; } .pagehead .hint { max-width: 80ch; }
.cfgtabs { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; margin: 0 0 14px;
  border-bottom: 1px solid var(--line); padding-top: 6px; }
.cfgtabs a { padding: 8px 12px; text-decoration: none; color: var(--muted); border-radius: 8px 8px 0 0; white-space: nowrap;
  border: 1px solid transparent; border-bottom: 0; font-weight: 600; font-size: .9rem; }
.cfgtabs a[aria-selected="true"] { color: var(--ink); background: var(--card); border-color: var(--line); margin-bottom: -1px; }
.tab-panel { scroll-margin-top: 120px; } body:not(.js-tabs) .tab-panel { margin-bottom: 28px; }
.tabtitle { display: none; } body:not(.js-tabs) .tabtitle { display: block; font-size: 1.2rem; }
.config fieldset.card { display: block; border: 1px solid var(--line); }
.config fieldset.card legend { font-weight: 700; padding: 0 6px; font-size: 1rem; }
.config .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 22px; padding-top: 4px; }
.config .field { margin: 0; } .config .field > span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 3px; }
.config .field > span em { font-style: normal; color: var(--muted); font-weight: 400; }
.config .field input:not([type=checkbox]), .config .field select { width: 100%; max-width: none; }
.config .field small { display: block; margin-top: 3px; font-size: .78rem; line-height: 1.3; }
.config .chkfield { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; }
.config .chkfield > span { grid-column: 2; grid-row: 1; margin: 0; } .config .chkfield input { grid-column: 1; grid-row: 1; margin-top: 3px; width: 18px; height: 18px; }
.config .chkfield small { grid-column: 2; }
.config .field.rows { grid-column: 1 / -1; }
.card h3 { font-size: 1rem; margin: 0 0 .6rem; }
table.matrix th[scope=row] { width: 34%; min-width: 180px; font-weight: 600; color: var(--ink); font-size: .85rem; }
table.matrix th[scope=row] em { font-style: normal; color: var(--muted); font-weight: 400; }
table.matrix th[scope=row] small { display: block; font-weight: 400; font-size: .75rem; color: var(--muted); }
table.matrix td input:not([type=checkbox]), table.matrix td select { width: 100%; min-width: 120px; }
table.matrix tr:nth-child(even) td, table.matrix tr:nth-child(even) th[scope=row] { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.savebar { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-top: 8px;
  box-shadow: 0 -4px 14px rgba(0,0,0,.06); }
.savebar input[name=comment] { flex: 1 1 260px; }
.savebar label.chk { margin: 0; font-size: .85rem; }
@media (max-width: 640px) {
  .config .fields { grid-template-columns: 1fr; }
  table.matrix th[scope=row] { min-width: 140px; } .savebar button { flex: 1; }
}
/* ---- Ölheizung */
.state-big { font-size: 1.6rem; font-weight: 800; } .state-big.blocked { color: var(--warn); } .state-big.released { color: var(--ok); }
.steps-list { list-style: none; padding: 0; margin: 0; } .steps-list li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.steps-list li b { min-width: 2ch; }

/* ---- Navigation „Mehr“ */
.top nav { align-items: center; }
.top details.more { position: relative; }
.top details.more summary { list-style: none; cursor: pointer; padding: 5px 9px; border-radius: 6px; }
.top details.more summary::-webkit-details-marker { display: none; }
.top details.more summary::after { content: " ▾"; font-size: .75em; color: var(--muted); }
.top details.more summary.active, .top details.more summary:hover, .top details.more[open] summary { background: var(--bg); }
.top details.more .menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px; min-width: 190px; box-shadow: 0 8px 24px rgba(0,0,0,.12); display: grid; z-index: 20; }
.top details.more .menu a { padding: 7px 10px; white-space: nowrap; }
@media (max-width: 640px) { .top details.more .menu { position: fixed; left: 12px; right: 12px; top: auto; } }
.kpi small { display: block; }

/* ---- Schaltzustand der Shellys */
.switchgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sw { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--bg); }
.sw .lamp { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; margin-top: 4px; background: var(--line);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--muted) 35%, transparent); }
.sw.on { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: color-mix(in srgb, var(--warn) 9%, var(--card)); }
.sw.on .lamp { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 25%, transparent), 0 0 14px color-mix(in srgb, var(--warn) 60%, transparent); }
.sw.nofb .lamp { opacity: .55; }
.sw.warn { border-color: var(--bad); }
.sw.boiler.blocked { border-color: color-mix(in srgb, var(--sim) 55%, var(--line)); background: color-mix(in srgb, var(--sim) 9%, var(--card)); }
.sw.boiler.blocked .lamp { background: var(--sim); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sim) 25%, transparent); }
.sw.boiler.free .lamp { background: var(--ok); }
.sw .swtxt span { display: block; color: var(--muted); font-size: .85rem; }
.sw .swtxt b { display: block; font-size: 1.5rem; line-height: 1.2; letter-spacing: .02em; }
.sw .swtxt small { display: block; font-size: .78rem; line-height: 1.4; margin-top: 2px; }
#switches h2 small { font-weight: 400; font-size: .8rem; margin-left: 6px; }

/* ---- 3.0 Echtbetrieb: Systemstatus, Gerätestatus, Wetter */
.mode { text-decoration: none; }
.mode.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.mode.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
a.sysbar { display: block; text-decoration: none; color: var(--ink); border-left: 6px solid var(--line); }
.sysbar b { display: block; font-size: 1.05rem; } .sysbar small { display: block; margin-top: 2px; }
.sysbar.lvl-echtbetrieb, .sysstate.lvl-echtbetrieb { border-left: 6px solid var(--ok); }
.sysbar.lvl-messbetrieb, .sysstate.lvl-messbetrieb { border-left: 6px solid var(--sim); }
.sysbar.lvl-teilweise, .sysstate.lvl-teilweise { border-left: 6px solid var(--warn); }
.sysbar.lvl-stoerung, .sysstate.lvl-stoerung { border-left: 6px solid var(--bad); }
.q { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: .78rem; font-weight: 700; background: var(--bg); }
.q.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.q.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.q.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.q.muted { color: var(--muted); }
table.devtable tr.grp td { background: var(--bg); font-weight: 700; font-size: .85rem; color: var(--muted); }
table.devtable td.val { font-weight: 700; white-space: nowrap; }
.wnow { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.wnow .wicon { font-size: 2.6rem; line-height: 1; } .wnow b { display: block; font-size: 1.6rem; } .wnow small { display: block; }
.whours { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(58px, 1fr); gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.whours div { text-align: center; background: var(--bg); border-radius: 8px; padding: 6px 4px; }
.whours span { display: block; font-size: 1.3rem; } .whours b { display: block; } .whours small { display: block; font-size: .72rem; }
#fire h2 small, #weather h2 small { font-weight: 400; font-size: .8rem; margin-left: 6px; }
/* Inbetriebnahme: Live-Fortschritt */
.commlive .commcur { font-weight: 700; min-height: 1.4em; }
.commlog { list-style: none; padding: 0; margin: 0; max-height: 420px; overflow: auto; font-size: .92em; }
.commlog li { padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.commlog li small { opacity: .7; margin-right: .4em; font-variant-numeric: tabular-nums; }
.commlog li.ok { color: var(--ok); } .commlog li.bad { color: var(--bad); font-weight: 600; }

/* Inline-Validierungsfehler: ungültige oder fehlende Werte direkt am Feld markieren. */
.config .field.invalid > span { color: var(--bad); }
.config input.invalid-input, .config select.invalid-input,
.config .field.invalid input:not([type=checkbox]), .config .field.invalid select {
  border: 2px solid var(--bad) !important;
  background: color-mix(in srgb, var(--bad) 8%, var(--card));
  outline-color: var(--bad);
}
.config .field-error { display: block; color: var(--bad) !important; font-weight: 650; margin-top: 4px; }
.config .matrix .field-error { min-width: 150px; max-width: 240px; }

/* Qualitative thermal-storage twin for five installed buffer sensors. */
.tank-twin{display:flex;flex-direction:column;gap:9px;max-width:900px;margin:12px auto}
.tank-layer{display:grid;grid-template-columns:minmax(120px,1fr) minmax(120px,3fr) 80px;gap:12px;align-items:center}
.tank-layer-name{font-size:.92rem}
.tank-track{height:18px;background:var(--surface-muted,#e8edf1);border-radius:9px;overflow:hidden;border:1px solid var(--border,#d5dce2)}
.tank-fill{height:100%;background:linear-gradient(90deg,#4d9cda,#e7a64b,#d95c4b);border-radius:9px;transition:width .2s ease}
@media(max-width:600px){.tank-layer{grid-template-columns:1fr 2fr 66px;gap:6px}.tank-layer-name{font-size:.8rem}}


/* Robl-IT visual redesign 3.5.4: presentation only; controller/API logic untouched. */
:root { --bg:#061426; --card:#0b1d33; --ink:#edf5ff; --muted:#9bb0ca; --line:#1c3b5e; --accent:#078cff; --warn:#ffb12b; --bad:#ff5368; --ok:#16d6a0; --sim:#5b9dff; color-scheme:dark; }
body { background:radial-gradient(ellipse at 48% -12%,#143e6b 0,#07172a 48%,#04101f 100%); color:var(--ink); min-height:100vh; }
.top { min-height:64px; display:flex; flex-wrap:nowrap; gap:14px; padding:10px 20px; background:rgba(4,16,31,.96); border-bottom:1px solid #16416c; box-shadow:0 8px 28px #0005; }
.brand { color:#18bfff; font-size:1.35rem; letter-spacing:-.03em; min-width:220px; }
.brand:before { content:'☀ '; color:#ffd04a; }
.top nav { position:fixed; z-index:8; top:64px; bottom:0; left:0; width:198px; padding:12px 9px 18px; overflow:auto; display:flex; flex-direction:column; align-items:stretch; gap:4px; background:linear-gradient(180deg,#071a2d,#061322); border-right:1px solid #153b60; }
.top nav a,.top details.more summary { display:block; padding:10px 12px; border-radius:8px; color:#c8d9ed; text-decoration:none; font-size:.88rem; }
.top nav a.active,.top nav a:hover,.top details.more summary.active,.top details.more summary:hover { color:white; background:linear-gradient(90deg,#087bf0,#0756ad); box-shadow:0 4px 18px #007aff35; }
.top details.more { width:100%; }
.top details.more .menu { position:static; min-width:0; border:0; box-shadow:none; background:transparent; padding:2px 0 2px 12px; }
.top details.more .menu a { white-space:normal; }
.mode { margin-left:auto; white-space:nowrap; border:1px solid #21456b; background:#0d2743; }
.logout { white-space:nowrap; }
.logout span { color:#b5c8df; }
main { max-width:none; margin:0 0 0 198px; padding:20px 18px 30px; }
main > h1 { font-size:1.6rem; letter-spacing:-.025em; margin:0 0 16px; }
.card { background:linear-gradient(145deg,rgba(14,36,61,.97),rgba(6,22,40,.98)); border:1px solid #1b4268; border-radius:13px; padding:15px 16px; box-shadow:0 8px 22px #0002,inset 0 1px #ffffff08; }
.card h2 { color:#f2f7ff; font-size:1.04rem; }
.kpi { position:relative; overflow:hidden; min-height:105px; }
.kpi:after { content:''; position:absolute; right:-22px; bottom:-36px; width:100px; height:80px; background:radial-gradient(ellipse,#078cff22,transparent 70%); pointer-events:none; }
.kpi b { display:block; font-size:1.65rem; color:#f6fbff; line-height:1.25; margin:.3rem 0; font-variant-numeric:tabular-nums; }
.kpi span,.kpi small { color:#b6c9e0; }
.climate-kpis .kpi b { color:#31d8f6; }
#live { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px; }
#live > * { min-width:0; margin:0; grid-column:span 6; }
#live > .sysbar { grid-column:span 12; background:linear-gradient(110deg,#0d3762,#0b1d33 72%); }
#live > .climate-kpis { grid-column:span 12; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
#live > .grid4:not(.climate-kpis) { grid-column:span 12; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#live > #switches,#live > #meter,#live > #energy,#live > #costs,#live > #faults,#live > .card:has(#chart) { grid-column:span 12; }
#live > .grid2 { grid-column:span 6; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#live > .grid2 .card { margin:0; }
#live table { color:var(--ink); }
table th { color:#c8dbf2; background:#112a45; }
table td,table th { border-color:#203c5a; }
button,.button,input[type=submit] { background:linear-gradient(180deg,#118cff,#0666ca); border:1px solid #299bff; color:white; border-radius:8px; }
input,select,textarea { background:#07192b; color:var(--ink); border:1px solid #294966; border-radius:7px; }
a { color:#42baff; }
.flash { border-radius:10px; }
footer { margin-left:198px; padding:14px 20px 20px; border-top:1px solid #173958; background:#04101e; color:#9bb0ca; font-size:.84rem; }
@media(max-width:1050px) { #live > .grid4:not(.climate-kpis) { grid-template-columns:repeat(2,minmax(0,1fr)); } #live > .grid2 { grid-column:span 12; } }
@media(max-width:760px) {
 .top { flex-wrap:wrap; padding:10px 12px; gap:8px; }
 .brand { min-width:0; flex:1; }
 .top nav { position:static; order:5; width:100%; max-height:none; overflow:visible; flex-direction:row; flex-wrap:wrap; padding:6px 0 0; border:0; background:transparent; }
 .top nav a { padding:7px 9px; }
 .mode { margin-left:0; }
 main { margin:0; padding:14px 10px 22px; }
 footer { margin-left:0; }
 #live { display:block; }
 #live > * { margin-bottom:11px; }
 #live > .climate-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #live > .grid4:not(.climate-kpis) { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #live > .grid2 { display:grid; grid-template-columns:1fr; }
 .logout { margin-left:auto; }
}
@media(prefers-color-scheme:light) { :root { color-scheme:dark; } }

.top-search { flex:1; max-width:440px; min-width:130px; margin:0 auto; padding:8px 13px; border:1px solid #25496c; border-radius:10px; background:#07192b; color:#8fa9c6; font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:760px){.top-search{order:4;flex-basis:100%;max-width:none;margin:0}.logout{font-size:.82rem}}

/* Robl-IT dashboard polish: visual-only refinements matching the supplied reference. */
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.16;background-image:linear-gradient(rgba(55,145,220,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(55,145,220,.12) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent 85%)}
.top{backdrop-filter:blur(14px)}
.top nav a{border:1px solid transparent;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.top nav a:hover{border-color:#1b6bb0;transform:translateX(2px)}
.top nav a.active{border-color:#188df1}
#live>.sysbar{position:relative;overflow:hidden;border:1px solid #1768a7;box-shadow:0 0 26px #078cff15}
#live>.sysbar:after{content:"LIVE STATUS";position:absolute;right:16px;top:14px;padding:4px 8px;border:1px solid #1a7bc4;border-radius:99px;color:#56d7ff;font-size:.68rem;font-weight:800;letter-spacing:.12em;background:#07192b}
.card{transition:border-color .18s ease,box-shadow .18s ease}
#live .card:hover{border-color:#2a6596;box-shadow:0 10px 28px #0003,0 0 18px #078cff0a}
.kpi{background:linear-gradient(145deg,#102945,#091a2e)}
.kpi span{letter-spacing:.015em}
.kpi b{letter-spacing:-.035em}
#live>.grid4:not(.climate-kpis) .kpi:nth-child(1) b{color:#38d5a1}
#live>.grid4:not(.climate-kpis) .kpi:nth-child(2) b{color:#46caff}
#live>.grid4:not(.climate-kpis) .kpi:nth-child(3) b{color:#ffcb63}
#weather .wnow,.meter-now{border:1px solid #1c4265;background:linear-gradient(145deg,#0d2743,#07192b)}
#weather .whours div{border:1px solid #183a5b;background:#0a2037}
#switches .switchgrid>*,.tank-layer{border-color:#214769}
.chart{padding:8px;border:1px solid #1b3c5d;border-radius:10px;background:#07192a}
footer strong{letter-spacing:.02em}
@media(max-width:760px){#live>.sysbar:after{position:static;display:inline-block;margin-top:10px} .top nav a:hover{transform:none}}

/* Dashboard composition: data-driven thermal store graphic and visual hierarchy. */
.dashboard-hero-grid{grid-column:span 12;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.85fr);gap:12px;min-width:0}
#live>.dashboard-hero-grid{grid-column:span 12}
.dashboard-hero-grid>.card{margin:0;min-width:0}
.energy-hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 88% 10%,#087bce2b,transparent 42%),linear-gradient(135deg,#0d2d4c,#07182a 70%);}
.energy-hero:before{content:"";position:absolute;right:-36px;bottom:-105px;width:300px;height:300px;border:1px solid #1e75b255;border-radius:50%;box-shadow:0 0 0 22px #1e75b218,0 0 0 48px #1e75b210;pointer-events:none}
.hero-head,.panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.eyebrow{display:block;color:#46caff;font-size:.68rem;font-weight:850;letter-spacing:.15em;margin-bottom:6px}
.hero-head h2,.panel-title h2{font-size:1.16rem;margin:0;color:#f5faff}
.hero-head p{margin:7px 0 0;color:#9bb5cf;font-size:.84rem}
.live-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid #176b89;background:#082c3d;color:#6de5fa;border-radius:99px;padding:5px 9px;font-size:.68rem;font-weight:850;letter-spacing:.1em}
.live-pill i,.pulse-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#19dfa9;box-shadow:0 0 10px #19dfa9}
.hero-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px 0 18px}
.hero-metric{padding:13px 12px;border:1px solid #204a6d;border-radius:11px;background:linear-gradient(145deg,#0c2741b8,#061729b8);min-width:0}
.hero-metric span,.hero-metric small{display:block;color:#9fb8d1;font-size:.75rem}
.hero-metric b{display:block;color:#f4fbff;font-size:clamp(1.2rem,2vw,1.8rem);line-height:1.3;margin:7px 0;overflow-wrap:anywhere}
.hero-metric:nth-child(1) b{color:#4bd4ff}.hero-metric:nth-child(2) b{color:#ffca68}.hero-metric:nth-child(3) b{color:#53e2b4}
.hero-bottom{display:flex;align-items:center;gap:8px;border-top:1px solid #1b3c59;padding-top:13px;color:#8faac5;font-size:.76rem}
.hero-brand{margin-left:auto;color:#b7cce1;font-weight:700}
.tank-dashboard{background:radial-gradient(ellipse at 50% 35%,#12466a55,transparent 60%),linear-gradient(145deg,#0c243b,#061626)}
.tank-volume{color:#4bd7f6;font-weight:850;font-size:1.15rem;white-space:nowrap}.tank-volume small{font-size:.68rem;color:#94b3cd;font-weight:600}
.tank-visual-wrap{height:235px;display:flex;align-items:center;justify-content:center;position:relative;margin:12px 0 6px;gap:0}
.tank-visual{width:132px;height:214px;position:relative;filter:drop-shadow(0 8px 18px #0005);z-index:1}
.tank-cap{height:13px;background:linear-gradient(90deg,#52758b,#c3d6e4 20%,#466d85 50%,#a4bdcd 80%,#36566e);border:1px solid #78a7c5;border-radius:50% / 65%;position:relative;z-index:2}
.tank-water{position:absolute;top:7px;bottom:7px;left:5px;right:5px;overflow:hidden;border-left:2px solid #6ca6c5;border-right:2px solid #6ca6c5;background:#0a2c46;display:flex;flex-direction:column}
.tank-zone{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:space-between;gap:5px;padding:0 8px;border-bottom:1px solid #d4edff35;background:linear-gradient(90deg,rgba(255,93,72,calc(var(--heat-level,0%)/180)),rgba(28,166,255,.06)),linear-gradient(90deg,#174969,#0a2b45 48%,#174969);font-size:.55rem;color:#d3eaff;letter-spacing:.03em}
.tank-zone:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--heat-level,0%);background:linear-gradient(90deg,#e35c4b55,#f5ae4b22);pointer-events:none;transition:width .35s ease}
.tank-zone span,.tank-zone b{position:relative;z-index:1}.tank-zone span{opacity:.8}.tank-zone b{font-size:.69rem;color:#fff;white-space:nowrap}.tank-zone.is-invalid{opacity:.55}
.tank-cap-bottom{position:absolute;bottom:0;width:100%}.tank-pipe{position:absolute;width:32px;height:7px;background:linear-gradient(#86a9be,#284a61);border:1px solid #83a9c0;left:calc(50% + 62px)}.pipe-top{top:23px}.pipe-bottom{bottom:23px;left:calc(50% - 94px)}
.tank-legend{display:flex;justify-content:center;gap:16px;color:#9bb5ce;font-size:.7rem}.tank-legend span{display:flex;align-items:center;gap:5px}.tank-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}.legend-hot{background:#f06c50}.legend-mid{background:#f3b84f}.legend-cold{background:#39b9f3}
.tank-note{font-size:.72rem;color:#91abc5;text-align:center;min-height:18px;margin:10px 0}
.panel-link{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #1a3b59;padding-top:11px;text-decoration:none;font-size:.8rem;font-weight:750;color:#4ac8ff}.panel-link span{font-size:1.1rem}
#live>.grid4:not(.climate-kpis){margin-top:0}
#live>.grid4:not(.climate-kpis) .kpi{min-height:118px}
#live>.grid2{align-items:stretch}
#weather,#fire{height:100%}
#live .card h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#live .card h2:before{content:"";display:inline-block;width:3px;height:16px;border-radius:3px;background:linear-gradient(#3de1fa,#087bff)}
@media(max-width:1050px){.dashboard-hero-grid{grid-template-columns:minmax(0,1fr)}.tank-visual-wrap{height:215px}}
@media(max-width:760px){.dashboard-hero-grid{display:grid;grid-template-columns:minmax(0,1fr)}.hero-metrics{grid-template-columns:1fr;gap:8px;margin:16px 0 14px}.hero-metric{display:grid;grid-template-columns:1fr auto;align-items:center}.hero-metric b{grid-column:2;grid-row:1 / span 2;margin:0;text-align:right}.hero-metric small{font-size:.68rem}.hero-brand{display:none}.tank-visual-wrap{height:215px}.tank-visual{height:198px;width:122px}.tank-zone{padding:0 6px}.tank-zone span{font-size:.5rem}}

/* Layoutkorrektur für die Energieübersicht und den Speicher-Zwilling */
#live > .dashboard-hero-grid { grid-column: 1 / -1; width: 100%; }
.dashboard-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(360px, .9fr); align-items: stretch; }
.dashboard-hero-grid > .card { min-width: 0; height: 100%; }
.energy-hero { display: flex; flex-direction: column; justify-content: space-between; min-height: 310px; padding: 22px; }
.hero-head { align-items: flex-start; }
.hero-head > div { min-width: 0; }
.hero-head h2 { line-height: 1.25; }
.hero-metrics { margin: 22px 0; }
.hero-metric { min-height: 125px; display: flex; flex-direction: column; justify-content: center; }
.hero-metric span { line-height: 1.35; }
.hero-metric b { overflow-wrap: anywhere; }
.hero-metric small { line-height: 1.4; }
.hero-bottom { flex-wrap: wrap; margin-top: auto; }
.tank-dashboard { padding: 22px; display: flex; flex-direction: column; }
.panel-title { align-items: center; }
.tank-visual-wrap { flex: 1; min-height: 250px; height: auto; }
.tank-visual { width: 205px; height: 224px; }
.tank-zone { padding: 0 11px; font-size: .68rem; letter-spacing: .02em; }
.tank-zone span { font-size: .64rem; }
.tank-zone b { font-size: .78rem; }
.tank-pipe { left: calc(50% + 98px); }
.pipe-bottom { left: calc(50% - 130px); }
.tank-note { line-height: 1.45; }
#live > .climate-kpis { align-items: stretch; }
#live > .climate-kpis .kpi { min-width: 0; }
#live > .grid4:not(.climate-kpis) .kpi { min-width: 0; }
@media (max-width: 1150px) {
  .dashboard-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .energy-hero { min-height: 0; }
  .tank-visual-wrap { min-height: 240px; }
}
@media (max-width: 760px) {
  .energy-hero, .tank-dashboard { padding: 16px; }
  .hero-head { gap: 8px; }
  .hero-head h2 { font-size: 1.05rem; }
  .hero-metrics { grid-template-columns: minmax(0,1fr); margin: 16px 0; }
  .hero-metric { min-height: 82px; }
  .hero-bottom { align-items: flex-start; }
  .hero-brand { display: inline; margin-left: 0; flex-basis: 100%; }
  .tank-visual-wrap { min-height: 230px; }
  .tank-visual { width: 190px; height: 208px; }
  .tank-zone { padding: 0 8px; }
  .tank-zone span { font-size: .58rem; }
  .tank-zone b { font-size: .72rem; }
  .tank-pipe { left: calc(50% + 90px); }
  .pipe-bottom { left: calc(50% - 120px); }
}

/* Robl-IT Layout-Fix 4: breite, klare Dashboard-Komposition; Suchfeld entfernt. */
html, body { min-height: 100%; }
body { background: radial-gradient(ellipse at 72% 0%, #0c2a49 0, #07182b 42%, #061322 100%); }
main { width: auto !important; max-width: none !important; margin: 0 !important; padding: 24px clamp(14px, 2.2vw, 36px) 34px !important; }
#live { width: 100%; max-width: none; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
#live > .sysbar, #live > .climate-kpis, #live > .dashboard-hero-grid,
#live > .grid4:not(.climate-kpis), #live > #switches, #live > #meter,
#live > #energy, #live > #costs, #live > #faults, #live > .card:has(#chart) { grid-column: 1 / -1; }
#live > .dashboard-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(370px, .85fr); gap: 16px; }
#live > .climate-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
#live > .grid4:not(.climate-kpis) { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
#live > .grid2 { grid-column: span 6; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
#live > * { min-width: 0; }
.energy-hero, .tank-dashboard { min-height: 330px; }
.hero-metrics { gap: 12px; }
.hero-metric { min-height: 130px; }
.tank-visual-wrap { min-height: 250px; }
.top-search { display: none !important; }
.top { gap: 10px; }
.top nav { min-width: 0; }
@media (max-width: 1200px) {
  #live > .dashboard-hero-grid { grid-template-columns: minmax(0,1fr); }
  #live > .grid2 { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  main { padding: 14px 10px 22px !important; }
  #live { display: grid; grid-template-columns: minmax(0,1fr); gap: 11px; }
  #live > *, #live > .grid2, #live > .dashboard-hero-grid { grid-column: 1 / -1; }
  #live > .climate-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #live > .grid4:not(.climate-kpis) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #live > .grid2 { grid-template-columns: minmax(0,1fr); }
  .hero-metrics { grid-template-columns: minmax(0,1fr); }
}


/* Navigation fix: keep the menu in the top bar; prevent the old sidebar rules from collapsing it. */
.top { align-items:center; min-height:58px; height:auto; flex-wrap:wrap; }
.top nav { position:static !important; inset:auto !important; z-index:auto; width:auto; flex:1 1 600px; min-width:0; max-height:none; padding:0; margin:0; overflow:visible; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:5px; background:transparent; border:0; box-shadow:none; }
.top nav a, .top details.more summary { display:inline-flex; align-items:center; padding:8px 10px; white-space:nowrap; }
.top details.more { width:auto; }
.top details.more .menu { position:absolute; z-index:30; min-width:180px; padding:8px; background:#091b2e; border:1px solid #21496f; border-radius:10px; box-shadow:0 12px 30px #0008; }
.top details.more .menu a { display:flex; white-space:nowrap; }
main, footer { margin-left:0 !important; }
@media(max-width:760px) { .top nav { position:static !important; flex:1 0 100%; flex-direction:row; flex-wrap:wrap; overflow:visible; padding:6px 0 0; } .top nav a { white-space:nowrap; } .top details.more .menu { position:static; } }



.target-check-panel{margin:1.2rem 0;overflow:hidden}.target-check-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.target-check-head h2{margin:.25rem 0}.target-check-head p{margin:.2rem 0;color:var(--muted,#9ca3af);font-size:.9rem}.target-check-state{padding:.35rem .7rem;border-radius:999px;background:rgba(148,163,184,.12);font-size:.8rem;font-weight:700}.target-check-state.ok{color:#4ade80;background:rgba(34,197,94,.12)}.target-check-state.warn{color:#fbbf24;background:rgba(245,158,11,.12)}.target-check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.target-check-row{padding:1rem;border-radius:.8rem;background:rgba(15,23,42,.45);border:1px solid rgba(148,163,184,.12);display:flex;justify-content:space-between;gap:1rem;align-items:center}.target-check-row small,.target-check-row strong{display:block}.target-check-row small{color:var(--muted,#9ca3af);margin-top:.2rem}.target-check-row strong{font-size:.9rem}.target-check-row.ok{border-color:rgba(34,197,94,.3)}.target-check-row.warn{border-color:rgba(245,158,11,.35)}.target-check-row.pending{border-color:rgba(96,165,250,.3)}
@media(max-width:700px){.target-check-list{grid-template-columns:1fr}.target-check-head{flex-direction:column}.target-check-row{align-items:flex-start;flex-direction:column}}


.qdiag-actions{display:flex;gap:.8rem;align-items:center;margin:.8rem 0}.qdiag-actions button{cursor:pointer;padding:.55rem .8rem;border-radius:.65rem;border:1px solid rgba(148,163,184,.2);background:rgba(37,99,235,.18);color:inherit;font-weight:700}.qdiag-candidates{margin-top:1rem}.qdiag-candidates pre{white-space:pre-wrap;overflow:auto;font-size:.75rem}.qdiag-actions+.scroll{max-height:520px;overflow:auto}