/* Adapted from Tools/Energie-Netzwerk.html; shares the site's palette and typography. */
.energy-network{border-top:1px solid var(--line);background:var(--bg)}
.network-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:8vw;align-items:end}
.network-intro h2{font-size:clamp(40px,4.6vw,80px);max-width:18ch}
.network-intro p{color:var(--muted);font-size:16px;line-height:1.6;max-width:40ch}
.network-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:6vw;align-items:center;margin-top:64px}
.network-map{position:relative;aspect-ratio:1000/820;container-type:inline-size}
.network-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--line);stroke-width:1.5}
.network-wires .network-active{stroke:var(--accent);stroke-width:2.2}
.network-hub{position:absolute;left:50%;top:40.24%;transform:translate(-50%,-50%);width:19%;aspect-ratio:1;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:var(--bg);box-shadow:0 0 60px #6aad4214}
.network-hub img{width:40%;height:52%;object-fit:contain}
.network-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;min-width:90px;font-size:clamp(10px,1.8cqw,14px);font-weight:500;white-space:nowrap}
.network-node-icon{width:clamp(44px,9.6cqw,76px);aspect-ratio:1;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--muted);background:var(--bg);transition:transform .35s var(--ease),border-color .35s,color .35s,background .35s}
.network-node-icon svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.network-node[aria-pressed=true] .network-node-icon{border-color:var(--accent);color:var(--accent);background:var(--panel);transform:scale(1.08)}
.network-node:focus-visible{outline:0}.network-node:focus-visible .network-node-icon{outline:2px solid var(--text);outline-offset:5px}
@media(hover:hover){.network-node:hover .network-node-icon{border-color:var(--accent);transform:scale(1.08);color:var(--text)}}
.network-customer{position:absolute;left:50%;top:86%;transform:translate(-50%,-50%);text-align:center;border-top:1px solid var(--accent);padding-top:16px;font-size:13px;min-width:40%}
.network-customer small{display:block;color:var(--muted);font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-top:9px}
.network-detail{border-top:1px solid var(--line);padding-top:26px;min-height:420px}
.network-detail .eyebrow{color:var(--accent)}.network-detail h3{font-size:clamp(38px,4vw,64px);margin:24px 0 20px}
.network-detail p{font-size:16px;line-height:1.6;color:var(--muted);max-width:38ch}
.network-detail ul{list-style:none;padding:0;margin:28px 0 32px;font-size:13px;line-height:1.55}
.network-detail li{padding:12px 0;border-bottom:1px solid var(--line)}.network-detail li::before{content:'+';color:var(--accent);margin-right:14px}
.network-detail .text-link{font-size:14px}.network-detail .text-link>span:first-child,.district-footer .text-link>span:first-child{font-size:inherit;transform:none}.network-foot{display:flex;justify-content:space-between;gap:24px;margin-top:32px;padding-top:22px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.district-story{position:relative;background:#10170f;isolation:isolate;color:#f2f3e6}
.district-stage{position:relative;min-height:600px;height:85svh;overflow:hidden}
.district-visual{position:absolute;inset:0}.district-visual img,.district-visual video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.district-visual video{opacity:0}.district-ready .district-visual video{opacity:1}
.district-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#07100bd9,transparent 85%),linear-gradient(0deg,#07100bb3,transparent 60%);pointer-events:none}
.district-heading{position:absolute;top:calc(var(--nav) + 28px);left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:24px;font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.district-caption{position:absolute;left:var(--pad);right:var(--pad);top:36%;visibility:hidden;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .55s var(--ease),visibility .45s}
.district-caption.is-active{visibility:visible;opacity:1;transform:translateY(0)}
.district-caption h3{font-size:clamp(42px,5.7vw,92px);max-width:16ch;line-height:1.12}.district-caption p{font-size:16px;line-height:1.5;max-width:37ch;margin-top:24px}
.district-footer{position:absolute;left:var(--pad);right:var(--pad);bottom:30px;display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid #f2f3e640;padding-top:18px;font-size:11px}
.district-meter{height:2px;position:absolute;left:0;right:0;top:-1px;background:var(--yellow);transform:scaleX(var(--district-progress,0));transform-origin:left}
.district-loading{width:25px;height:25px;flex:none;transform:rotate(-90deg)}.district-loading circle{fill:none;stroke:var(--yellow);stroke-width:2;stroke-dasharray:63;stroke-dashoffset:var(--district-load,63)}
.district-loading[hidden]{display:none}.district-scrub .district-stage{position:sticky;top:0;height:100svh}.district-scrub{height:440svh}
.district-footer .text-link{gap:22px;white-space:nowrap;flex:none}
.district-story:not(.district-scrub) .district-caption{display:none}.district-story:not(.district-scrub) .district-caption:last-child{display:block;visibility:visible;opacity:1;transform:none}
.district-story:not(.district-scrub) .district-scroll-hint{display:none}
@media(max-width:1000px){.network-layout{grid-template-columns:minmax(0,1.3fr) minmax(250px,1fr);gap:32px}.network-intro{gap:40px}.network-detail{min-height:450px}}
@media(max-width:760px){.network-intro,.network-layout{grid-template-columns:1fr;gap:28px}.network-layout{margin-top:40px}.network-detail{min-height:400px}.network-map{margin-inline:-12px}.network-node{gap:7px;min-width:72px}.network-customer{font-size:12px;padding-top:10px}.network-customer small{font-size:8px}.network-foot{flex-direction:column;gap:14px}.district-stage{min-height:640px;height:88svh}.district-heading{top:34px;font-size:9px}.district-heading span:last-child{display:none}.district-caption{top:31%}.district-caption h3{font-size:clamp(40px,10vw,64px)}.district-caption p{font-size:15px}.district-footer{font-size:9px;bottom:24px;gap:14px}.district-footer .text-link{font-size:12px}.district-visual::after{background:linear-gradient(90deg,#07100be0,#07100b30),linear-gradient(0deg,#07100bc0,transparent)}}
@media(max-height:650px) and (min-width:761px){.district-caption{top:32%}.district-caption h3{font-size:8svh}.district-caption p{margin-top:18px;font-size:14px}.district-heading{top:calc(var(--nav) + 20px)}}
@media(prefers-reduced-motion:reduce){.network-active{animation:none!important}.network-node-icon,.district-caption{transition:none}}

/* Original network choreography, locally scoped and paused outside the viewport. */
.energy-network{--network-rgb:106 173 66}
[data-theme=light] .energy-network{--network-rgb:72 120 45}
@keyframes enet-flow{0%{offset-distance:0%;opacity:0}12%{opacity:1}86%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes enet-dashmove{to{stroke-dashoffset:-48}}
@keyframes enet-spin{to{transform:rotate(360deg)}}
@keyframes enet-ringpulse{0%{transform:scale(.82);opacity:.6}75%{opacity:0}100%{transform:scale(1.45);opacity:0}}
@keyframes enet-breathe{0%,100%{opacity:.45;transform:scale(.97)}50%{opacity:.9;transform:scale(1.03)}}
@keyframes enet-drift{0%,100%{transform:translate(0,0);opacity:.2}50%{transform:translate(8px,-16px);opacity:.65}}
@keyframes enet-win{0%,100%{opacity:.14;box-shadow:none}45%,60%{opacity:1;box-shadow:0 0 .7cqw rgb(var(--network-rgb) / .9)}}
@keyframes enet-bubble{0%{transform:translateY(.8cqw) scale(.5);opacity:0}25%{opacity:1}100%{transform:translateY(-3.4cqw) scale(1);opacity:0}}
@keyframes enet-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes enet-flame{0%,100%{transform:rotate(45deg) scale(.9);opacity:.85}50%{transform:rotate(45deg) scale(1.08);opacity:1}}
@keyframes enet-smoke{0%{transform:translateY(0) scale(.5);opacity:0}30%{opacity:.75}100%{transform:translateY(-2cqw) scale(1.3);opacity:0}}
.network-map *{animation-play-state:paused!important}
.network-visible .network-map *{animation-play-state:running!important}
.network-wires circle{stroke:none}.network-wires circle[stroke-width]{stroke:rgb(var(--network-rgb) / .26)}
.network-hub{background:radial-gradient(circle at 50% 42%,var(--panel),var(--bg) 72%);border-color:rgb(var(--network-rgb) / .45);box-shadow:0 0 55px rgb(var(--network-rgb) / .25),0 0 150px rgb(var(--network-rgb) / .12),inset 0 0 34px rgb(var(--network-rgb) / .12)}
.network-hub img{filter:drop-shadow(0 0 12px rgb(var(--network-rgb) / .4))}
.network-halo{position:absolute;left:21.5%;top:17.68%;width:max(60px,13.6cqw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;border:1px solid rgb(var(--network-rgb) / .75);box-shadow:0 0 34px rgb(var(--network-rgb) / .25),inset 0 0 24px rgb(var(--network-rgb) / .12);transition:left .7s cubic-bezier(.65,.05,.36,1),top .7s cubic-bezier(.65,.05,.36,1)}
.network-halo i{position:absolute;inset:-6%;border-radius:50%;border:1px solid rgb(var(--network-rgb) / .5);animation:enet-ringpulse 2.8s ease-out infinite}
.network-node-icon{transition:transform .35s var(--ease),border-color .35s,box-shadow .35s,background .35s;isolation:isolate}
.network-node[aria-pressed=true] .network-node-icon{box-shadow:0 0 34px rgb(var(--network-rgb) / .3)}
.network-customer{width:34%;min-width:0;padding:2.2cqw 2cqw;border:1px solid rgb(var(--network-rgb) / .45);border-radius:1.8cqw;background:var(--bg);box-shadow:0 0 45px rgb(var(--network-rgb) / .12);transition:border-color .3s,box-shadow .3s}
.network-buildings{margin:1cqw 0 1.5cqw}.network-customer>span{display:block;font-size:clamp(9px,1.6cqw,13px)}.network-customer small{font-size:clamp(8px,1.3cqw,10px);margin-top:7px}
.network-detail .text-link{transition:color .25s,background .25s,box-shadow .25s}
@media(hover:hover){.network-node:hover .network-node-icon{transform:scale(1.15);box-shadow:0 0 34px rgb(var(--network-rgb) / .4)}.network-customer:hover{border-color:var(--accent);box-shadow:0 0 60px rgb(var(--network-rgb) / .25)}.network-detail .text-link:hover{background:var(--panel);box-shadow:0 0 28px rgb(var(--network-rgb) / .2)}}
@media(prefers-reduced-motion:reduce){.network-map *{animation:none!important;transition:none!important}.network-wires circle[offset-path],.network-wires circle[style*="offset-path"]{display:none}.network-halo i{display:none}}