.power-demo{margin:42px 0 12px;border:1px solid #d3ddd5;background:#fff;padding:28px;overflow:hidden}.demo-heading{display:flex;justify-content:space-between;align-items:center;gap:22px}.demo-heading h3{font-size:27px;letter-spacing:-.035em;margin:6px 0 10px}.demo-heading p:not(.demo-badge){font-size:14px;color:#50646d}.demo-badge{font-size:9px;font-weight:700;letter-spacing:.12em;color:#9d470e}.demo-controls{display:flex;gap:7px;flex-wrap:wrap;flex-shrink:0}.demo-controls button{border:1px solid #173546;background:#fff;color:#173546;padding:10px 13px;font-size:12px;min-height:42px}.demo-controls button:first-child{background:#173546;color:white}.demo-tabs{display:flex;gap:8px;margin:24px 0}.demo-tabs button{border:1px solid #d3ddd5;background:#f6f8f5;padding:9px 14px;font-size:12px;color:#50646d;min-height:40px}.demo-tabs button[aria-pressed=true]{background:#fff2e5;color:#954109;border-color:#e1ab80;font-weight:700}.demo-scene{display:grid;grid-template-columns:43% 4% 53%;align-items:center}.demo-panel-title{font-size:12px;font-weight:700;margin-bottom:3px}.installation-svg{width:100%;display:block;overflow:visible}.wire-name{font-size:12px;fill:#334a54}.sensor-slide{transform:translateX(46px);opacity:0;transition:transform .55s ease,opacity .25s ease}.sensor-lid{transform-box:fill-box;transform-origin:8% 38%;transform:translateY(-32px) rotate(-32deg);transition:transform .4s .42s ease}.is-clipped .sensor-slide{transform:translateX(0);opacity:1}.is-clipped .sensor-lid{transform:translateY(0) rotate(0)}.sensor-led{opacity:.12;transition:opacity .3s}.sensor-led.on{opacity:1}.demo-signal{opacity:0;stroke-dashoffset:0}.is-connected .demo-signal{opacity:.8}.is-running.is-connected .demo-signal{animation:radio-dash .7s linear infinite}.demo-bridge{opacity:.3;transition:opacity .6s}.is-connected .demo-bridge{opacity:1}.demo-wireless{font-size:11px;text-align:center;color:#50646d;margin:0}.demo-transfer{font-size:30px;text-align:center;color:#b9c7bf;transition:color .5s}.is-connected .demo-transfer{color:#d66d2c}.demo-chart{padding:16px 0 5px 18px}.demo-chart-head{display:flex;flex-direction:column;gap:4px}.demo-chart-head strong{font-size:17px}.demo-chart-head span{font-size:11px;color:#50646d}.chart-canvas{position:relative}.sankey-svg{display:block;width:100%}.sankey-result{opacity:0;transition:opacity .5s}.is-analyzed .sankey-result{opacity:1}.sankey-branch{opacity:0;transform:translateX(-12px);transition:opacity .65s,transform .65s}.sankey-branch.visible{opacity:1;transform:translateX(0)}.sink-name{font-size:16px;fill:#173546;font-weight:700}.sink-value{font-size:14px;fill:#50646d}.total-value{font-size:22px;fill:#173546;font-weight:700}.total-label{font-size:12px;fill:#50646d}.chart-pending{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;color:#74867c;font-size:13px;border-radius:5px;background:#f4f7f3;margin:15px 0;transition:opacity .3s}.pending-symbol{font-size:42px;font-weight:400;color:#c1ccc4}.is-analyzed .chart-pending{opacity:0;pointer-events:none}.demo-progress{height:3px;background:#e4ebe5;margin-top:17px}.demo-progress span{display:block;height:100%;width:0;background:#d96c27}.demo-status{font-size:14px;min-height:45px;padding-top:13px;color:#173546;font-weight:600}.demo-note{font-size:11px;line-height:1.6;color:#65736c;margin-top:8px;max-width:930px}.demo-source{display:inline-block;font-size:11px;color:#50646d;margin-top:9px;text-decoration:underline;text-underline-offset:3px}
@keyframes radio-dash{to{stroke-dashoffset:-20}}
@media(max-width:900px){.demo-heading{align-items:flex-start;flex-direction:column;gap:15px}.demo-scene{grid-template-columns:46% 4% 50%}.power-demo{padding:20px}.demo-chart{padding-left:8px}.demo-chart-head strong{font-size:15px}}
@media(max-width:600px){.power-demo{padding:16px;margin-top:30px}.demo-heading h3{font-size:24px}.demo-heading p:not(.demo-badge){font-size:13px}.demo-controls button{font-size:11px;padding:9px 12px}.demo-tabs{gap:5px;margin:18px 0;display:grid;grid-template-columns:1fr 1fr 1fr}.demo-tabs button{font-size:10px;padding:8px 4px;line-height:1.4}.demo-scene{display:flex;flex-direction:column}.demo-install,.demo-chart{width:100%}.demo-chart{padding:12px 0 0}.demo-transfer{transform:rotate(90deg);font-size:26px;height:32px}.demo-chart-head strong{font-size:16px}.demo-status{font-size:12px;min-height:50px}.demo-note{font-size:10px}.sink-name{font-size:24px}.sink-value{font-size:21px}.total-label{font-size:18px}.wire-name{font-size:17px}.demo-source{font-size:10px}}
@media(prefers-reduced-motion:reduce){.power-demo *{animation:none!important;transition:none!important}}

.demo-controls button:disabled{opacity:.5;cursor:default}.power-demo{scroll-margin-top:90px}


.demo-action{font-size:12px;line-height:1.5;min-height:36px;margin:6px 0 0;color:#a64f1d;font-weight:600}
.demo-scrub{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-top:24px;font-size:11px;color:#50646d}
.demo-scrub input{width:100%;min-width:0;accent-color:#d96c27;cursor:pointer}.demo-scrub output{font-variant-numeric:tabular-nums;min-width:58px;text-align:right}
.demo-bridge{opacity:.45}.active-mesh,.active-photo{pointer-events:none}
@media(max-width:600px){.demo-action{font-size:11px;min-height:36px}.wire-name{font-size:15px}.demo-scrub{grid-template-columns:1fr auto;gap:8px}.demo-scrub label{grid-column:1/-1}.sink-name{font-size:22px}}

.demo-radio path{fill:none;stroke:#337dba;stroke-width:2.4;stroke-linecap:round}.demo-radio{pointer-events:none}
.power-demo.radio-visible [data-radio].is-transmitting .radio-wave,.bridge-aside.power-demo.radio-visible [data-radio].is-transmitting .radio-wave,.bridge-aside.radio-visible .is-transmitting .radio-wave{animation:radio-ripple 1.35s ease-in-out infinite}
.power-demo.radio-visible [data-radio].is-transmitting .radio-middle,.bridge-aside.power-demo.radio-visible [data-radio].is-transmitting .radio-middle,.bridge-aside.radio-visible .is-transmitting .radio-middle{animation-delay:.12s}.power-demo.radio-visible [data-radio].is-transmitting .radio-outer,.bridge-aside.power-demo.radio-visible [data-radio].is-transmitting .radio-outer,.bridge-aside.radio-visible .is-transmitting .radio-outer{animation-delay:.24s}
@keyframes radio-ripple{0%,100%{opacity:.28}45%,70%{opacity:1}}

/* Montage links, Funk-Bridge rechts; Leistungskurven darunter, Energiefluss zuletzt. */
.demo-scene{display:grid;grid-template-columns:minmax(0,1fr) 215px;grid-template-areas:"install bridge" "load bridge" "energy energy";align-items:start;gap:24px 34px}
.demo-install{grid-area:install;min-width:0}.installation-svg{max-width:690px;margin:auto}
.bridge-aside{grid-area:bridge;border-left:1px solid #e0e7e2;padding:18px 0 20px 24px;margin-top:26px;text-align:center;min-width:0}
.bridge-aside h4{font-size:14px;line-height:1.4;margin:0 0 10px}.bridge-svg{display:block;width:100%;max-width:200px;margin:auto}.bridge-aside p{font-size:12px;color:#337dba}.bridge-aside .bridge-description{font-size:11px;line-height:1.6;color:#50646d;margin-top:10px}
.bridge-link{opacity:0}.has-reception .bridge-link{opacity:1}.has-reception .demo-bridge{opacity:1}.radio-visible.has-reception .bridge-link{animation:radio-dash .7s linear infinite}
.demo-loadcurve{grid-area:load;min-width:0;padding:20px 0 8px;border-top:1px solid #e0e7e2}.loadcurve-svg{display:block;width:100%;margin-top:12px}.load-grid{stroke:#e2e8e3;stroke-width:1}.load-label,.load-unit{font-size:13px;fill:#50646d}.load-unit{font-weight:600}.load-legend{display:flex;flex-wrap:wrap;gap:9px 20px;font-size:11px}.load-legend>span{display:flex;align-items:center;gap:6px}.load-legend i{display:inline-block;width:15px;height:3px}.load-pending{font-size:11px;color:#65736c;margin-top:10px;min-height:18px}.load-pending[hidden]{display:block;visibility:hidden}
.demo-chart{grid-area:energy;width:100%;padding:24px 0 0;border-top:1px solid #d3ddd5}.demo-chart .chart-canvas{max-width:740px;margin:0 auto}.demo-chart-head strong{font-size:18px}.demo-chart-head span{font-size:11px}
@media(max-width:900px){.demo-scene{grid-template-columns:minmax(0,1fr) 170px;gap:20px}.bridge-aside{padding-left:14px}.bridge-aside h4{font-size:12px}}
@media(max-width:600px){.demo-scene{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"install" "bridge" "load" "energy";gap:18px}.bridge-aside{display:grid;grid-template-columns:1fr 115px;grid-template-rows:auto auto 1fr;align-items:center;column-gap:15px;border-left:0;border-top:1px solid #e0e7e2;margin:0;padding:10px 0;text-align:left}.bridge-aside h4{grid-column:1;grid-row:1;font-size:13px}.bridge-svg{grid-column:2;grid-row:1/4;max-height:164px}.bridge-aside p{grid-column:1;font-size:11px}.bridge-aside .bridge-description{font-size:10px}.demo-loadcurve{padding-top:16px}.demo-chart-head strong{font-size:16px}.demo-chart-head span{font-size:10px}.load-label,.load-unit{font-size:23px}.load-legend{font-size:10px;gap:7px 14px}.load-pending{font-size:10px}.demo-chart{padding-top:18px}.load-series{stroke-width:3.5}}

.demo-scrub{margin:0 0 24px}

/* Calm, independent replay controls for each visible chart. */
.chart-replay{align-self:flex-start;margin-top:8px;padding:8px 12px;min-height:44px;border:1px solid #b9c9c1;background:#fff;color:#173546;font:inherit;font-size:11px;cursor:pointer;border-radius:3px}.chart-replay:focus-visible{outline:3px solid #337dba;outline-offset:3px}.loadcurve-svg,.sankey-svg{cursor:pointer}.paused .radio-wave,.paused .bridge-link{animation-play-state:paused!important}

.power-local-paused .radio-wave,.power-local-paused .bridge-link{animation-play-state:paused!important}