/* Energiefluss · Knoten wie Messinstrumente mit Skalenring. Fallbackwerte gelten für das Tablet-Dashboard (fest dunkel). */
.energy-flow{padding:22px 24px 20px;background:radial-gradient(ellipse 70% 60% at 50% 40%,var(--glow,#1b2838) 0,var(--surface,#131c29) 72%);overflow:hidden}
.flow-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}
.flow-heading h2{font-size:17px}
.flow-heading .sub{font-size:12.5px;text-align:right}
.flow-diagram{display:block;width:100%;max-width:660px;margin:10px auto 0;overflow:visible;font-family:var(--font-display,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif)}
.flow-node,.flow-wire{--flow-color:var(--home,#89c8f9)}
.solar{--flow-color:var(--solar,#edcf76)}.storage{--flow-color:var(--storage,#6ee7bd)}.network{--flow-color:var(--network,#b4a1ff)}.home{--flow-color:var(--home,#89c8f9)}.charging{--flow-color:var(--storage,#6ee7bd)}.heat{--flow-color:var(--heat,#efba85)}
.node-halo{fill:none;stroke:var(--flow-color);stroke-width:7;stroke-opacity:.22;stroke-dasharray:1.6 6.67}
.node-active .node-halo{stroke-opacity:.6}
.node-body{fill:var(--node-fill,#1b2330);stroke:var(--flow-color);stroke-width:2.5;stroke-opacity:.55}
.node-active .node-body{stroke-opacity:1}
.node-symbol{fill:none;stroke:var(--flow-color);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.node-value{text-anchor:middle;fill:var(--text,#ecf1f9);font-size:33px;font-weight:620;font-variant-numeric:tabular-nums;letter-spacing:-.8px}
.node-unit{text-anchor:middle;fill:var(--muted,#94a3b7);font-size:18px;font-weight:500}
.node-soc{text-anchor:middle;fill:var(--flow-color);font-size:18px;font-weight:620;font-variant-numeric:tabular-nums}
.node-name{text-anchor:middle;fill:var(--text,#ecf1f9);font-size:22px;font-weight:600;letter-spacing:-.2px}
.node-status{text-anchor:middle;fill:var(--muted,#94a3b7);font-size:17px}
.wire-track{fill:none;stroke:var(--flow-color);stroke-width:3;stroke-opacity:.16;stroke-linecap:round;stroke-linejoin:round}
.flowing .wire-track{stroke-opacity:.34}
.wire-motion{fill:none;stroke:var(--flow-color);stroke-width:5;stroke-dasharray:.1 26;stroke-linecap:round;stroke-linejoin:round;animation:flow-travel 1.6s linear infinite}
.toward-hub{animation-direction:reverse}
.thermal-wire .wire-track{stroke-dasharray:6 8;stroke-opacity:.3}
.flow-hub{fill:var(--surface,#131c29);stroke:var(--muted,#94a3b7);stroke-width:2}
.active-loads-label{fill:var(--muted,#94a3b7);font-size:19px;text-anchor:middle}
.flow-capacity{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;max-width:480px;margin:10px auto 0;padding:10px 16px;background:var(--surface-2,#0e1521);border:1px solid var(--line,#29313e);border-radius:999px;font-size:13px;text-align:center;color:var(--muted,#94a3b7)}
.flow-capacity strong{color:var(--text,#ecf1f9);font-weight:560;font-variant-numeric:tabular-nums}
.flow-note{color:var(--muted,#94a3b7);font-size:13px;line-height:1.6;margin:16px auto 0;text-align:center;max-width:660px}
@keyframes flow-travel{to{stroke-dashoffset:-52.2}}
@media(max-width:760px){.energy-flow{padding:16px 8px}.flow-heading{padding:0 8px}.flow-heading .sub{max-width:140px;font-size:12px}.flow-diagram{margin-top:12px}.flow-note{padding:0 8px}.node-unit{font-size:20px}.node-value{font-size:35px}.node-name{font-size:24px}.flow-capacity{border-radius:14px;margin-inline:8px}}
@media(prefers-reduced-motion:reduce){.wire-motion{animation:none;stroke-dasharray:5 12}}