/* ---- Szenen (Filme) · hochwertige Fassung ---- */
:root{--warm:#d9722e}html[data-theme=dark]{--warm:#f2a15f}
.szene{position:relative;margin:30px 0 0;padding:20px 20px 16px;border-radius:22px;border:1px solid var(--border);overflow:hidden;
 background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 88%,var(--accent)));box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 22px 50px -26px rgba(5,12,22,.35),0 4px 14px -8px rgba(5,12,22,.2)}
.szene::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 35%,#6fb3ff),var(--accent));background-size:200% 100%}
html.ek-eff .szene::before{animation:szband 7s linear infinite}@keyframes szband{to{background-position:200% 0}}
.sz-kopf{display:flex;justify-content:space-between;align-items:center;margin:2px 0 12px;gap:12px}
.sz-tit{display:inline-flex;align-items:center;gap:9px;font:700 .8rem/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sz-pkt{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
html.ek-eff .sz-pkt{animation:szpuls 2s ease-in-out infinite}@keyframes szpuls{50%{box-shadow:0 0 0 8px transparent}}
.sz-uhr{font:700 1.5rem/1 'Barlow Condensed',sans-serif;letter-spacing:.12em;color:var(--accent);font-variant-numeric:tabular-nums;min-width:4.2ch;text-align:right}
.sz-svg{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--border);
 background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--accent) 11%,var(--alt)),var(--alt) 70%)}
.sz-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 0}
.sz-k{padding:10px 12px 9px;border-radius:14px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 80%,var(--alt));min-width:0}
.sz-kl{display:block;font:600 .68rem/1.2 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sz-k b{display:block;margin-top:3px;font:700 1.55rem/1.1 'Barlow Condensed',sans-serif;letter-spacing:.02em;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sz-cap{min-height:3.5em;margin:14px 2px 8px;font-weight:500;font-size:1.05rem;line-height:1.45}
.sz-ctl{display:flex;gap:14px;align-items:center}.sz-barwrap{flex:1;height:7px;background:var(--border);border-radius:99px;overflow:hidden}.sz-bar{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#a9cdff))}.sz-play{min-height:42px;padding:0 20px;flex:none}
/* Text im Bild */
.sz-svg .sz-lab{font:700 10.5px Inter,sans-serif;letter-spacing:.13em;fill:var(--muted)}.sz-svg .sz-t{font:500 12.5px Inter,sans-serif;fill:var(--text)}.sz-svg .sz-t.s{font-size:11px;fill:var(--muted)}
.sz-svg .sz-val{font:700 16px 'Barlow Condensed',sans-serif;letter-spacing:.04em;fill:var(--accent)}.sz-svg .sz-val.s{font-size:14px}.sz-svg .sz-ax{font:500 9px Inter,sans-serif;fill:var(--muted);opacity:.85}
/* Diagrammfläche */
.sz-plot{fill:color-mix(in srgb,var(--surface) 60%,transparent);stroke:var(--border);stroke-width:1}.sz-gr{stroke:var(--border);stroke-width:1;stroke-dasharray:2 4;opacity:.9}.sz-gr.v{opacity:.55}
.sz-pl{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}.sz-mk{stroke:var(--muted);stroke-dasharray:3 3;opacity:.8}.sz-md{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.sz-ring{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:.7;transform-box:fill-box;transform-origin:center}html.ek-eff .sz-ring{animation:szring 1.8s ease-out infinite}@keyframes szring{from{transform:scale(1);opacity:.8}to{transform:scale(3.2);opacity:0}}
.sz-sun .sonne path{stroke:var(--warm);stroke-width:1.6;stroke-linecap:round;fill:none}.sz-sun .sonne circle{fill:var(--warm)}.sz-sun .mond{fill:var(--muted)}.sz-sun .mond,.sz-sun.nacht .sonne{display:none}.sz-sun.nacht .mond{display:block}
/* Fahrplanblöcke */
.sz-blk{fill:var(--border);opacity:.65}.sz-blk.a.an{fill:var(--muted);opacity:.9}.sz-blk.b.an{fill:var(--accent);opacity:1;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 60%,transparent))}
/* Anlagenteile */
.sz-boden{fill:color-mix(in srgb,var(--surface) 55%,transparent)}.sz-bl{stroke:var(--border);stroke-width:1.5}
.sz-tank{fill:url(#sz-metal);stroke:color-mix(in srgb,var(--muted) 80%,var(--border));stroke-width:1.6;filter:url(#sz-shadow)}
.sz-glz{fill:url(#sz-glanz);pointer-events:none}.sz-dach{fill:url(#sz-gasg);stroke:color-mix(in srgb,var(--muted) 80%,var(--border));stroke-width:1.4;opacity:.9}
.sz-fl{fill:url(#sz-liq)}.sz-gas{fill:url(#sz-gasg)}.sz-silo{fill:url(#sz-warmg)}.sz-ring2{stroke:color-mix(in srgb,var(--warm) 55%,var(--muted));stroke-width:1.4;opacity:.45;fill:none}
.sz-rohr{fill:none;stroke:color-mix(in srgb,var(--border) 70%,var(--muted));stroke-width:5;stroke-linecap:round}.sz-rohr.strom{stroke-width:4}.sz-rohr.strom.an{stroke:var(--accent);stroke-dasharray:7 7;filter:drop-shadow(0 0 4px var(--accent))}
.sz-lampe{fill:var(--border);stroke:var(--muted);stroke-width:1}.sz-lampe.an{fill:var(--accent);stroke:var(--accent);filter:drop-shadow(0 0 6px var(--accent))}
.sz-zyl{fill:none;stroke:var(--muted);stroke-width:5;stroke-linecap:round}.sz-kw{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.sz-rad circle{fill:var(--surface);stroke:var(--muted);stroke-width:2}.sz-rad path{stroke:var(--muted);stroke-width:1.6}
.sz-motor.an .sz-zyl{stroke:var(--accent)}.sz-motor.an .sz-kw{stroke:var(--accent)}.sz-motor.an .sz-rad circle,.sz-motor.an .sz-rad path{stroke:var(--accent)}
.sz-mast{fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round}.sz-fkn{fill:var(--accent);stroke:none}
.sz-dot{fill:var(--warm);filter:drop-shadow(0 0 3px var(--warm))}
.sz-fa{fill:var(--accent);opacity:.92}.sz-fb{fill:var(--warm);opacity:.85}.sz-lg{fill:var(--accent)}.sz-lg.b{fill:var(--warm)}
.sz-dampfg{opacity:0;transition:opacity .4s}.sz-dampfg.an{opacity:1}.sz-dampf{fill:var(--muted);opacity:0}
.sz-bub{fill:#fff;opacity:0;stroke:var(--accent);stroke-width:.8}
/* Verbrauch */
.sz-zeile{fill:color-mix(in srgb,var(--surface) 55%,transparent);stroke:var(--border);stroke-width:1}
.sz-bk{fill:var(--border);opacity:.45}.sz-ra{fill:var(--muted);opacity:.85}.sz-rb{fill:var(--accent);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 55%,transparent))}
.sz-svg .sz-v{fill:var(--accent);filter:drop-shadow(0 1px 2px rgba(5,12,22,.25))}.sz-svg .sz-v.c3{opacity:.74}.sz-svg .sz-v.c2{opacity:.52}.sz-svg .sz-v.c1{opacity:.32}.sz-svg .sz-v.c0{fill:url(#sz-hatch);stroke:var(--muted);stroke-dasharray:4 3;opacity:1;filter:none}
/* Wärmenetz */
.sz-rv{fill:none;stroke:var(--warm);stroke-width:11;opacity:.26;stroke-linejoin:round}.sz-rr{fill:none;stroke:var(--accent);stroke-width:11;opacity:.24;stroke-linejoin:round}
.sz-fluss{fill:none;stroke-width:3.6;stroke-dasharray:2 12;stroke-linecap:round;stroke-linejoin:round}.sz-fluss.v{stroke:var(--warm)}.sz-fluss.r{stroke:var(--accent)}.sz-fluss.g{stroke:var(--accent);stroke-width:3}.sz-fluss.sw{opacity:0}.sz-fluss.sw.an{opacity:1}
.sz-wsp{fill:url(#sz-warmg)}.sz-pumpe circle,.sz-pumpe path{fill:none;stroke:var(--muted);stroke-width:2}.sz-pumpe{transform-box:fill-box;transform-origin:center}
.sz-haus .dach{fill:color-mix(in srgb,var(--warm) 60%,var(--surface));stroke:var(--text);stroke-width:1.8;stroke-linejoin:round;filter:url(#sz-shadow)}.sz-haus .wand{fill:url(#sz-metal);stroke:var(--text);stroke-width:1.8}.sz-haus .tuer{fill:var(--muted);opacity:.5}.sz-fenster rect{fill:var(--warm);filter:drop-shadow(0 0 5px var(--warm))}
/* Vertraulichkeit */
.sz-st{fill:color-mix(in srgb,var(--surface) 70%,transparent);stroke:var(--border);stroke-width:1.6;stroke-dasharray:5 5}
.sz-icon{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.sz-doc .blatt{fill:var(--surface);stroke:var(--accent);stroke-width:2;filter:url(#sz-shadow)}.sz-doc .ecke{fill:var(--alt);stroke:var(--accent);stroke-width:1.6}.sz-zl{stroke:var(--border);stroke-width:3;stroke-linecap:round;fill:none}.sz-scan{fill:var(--accent)}.sz-hl{fill:var(--warm);transition:opacity .25s}
.sz-tor{fill:var(--border);stroke:var(--muted);stroke-width:1}.sz-tor.an{fill:var(--accent);stroke:var(--accent);filter:drop-shadow(0 0 5px var(--accent))}
.sz-wolke path{fill:color-mix(in srgb,var(--surface) 80%,var(--alt));stroke:var(--muted);stroke-width:2;filter:url(#sz-shadow)}.sz-rueck{fill:none;stroke:var(--muted);stroke-dasharray:6 6;stroke-width:2}.sz-antw rect{fill:var(--accent);filter:drop-shadow(0 0 5px var(--accent))}.sz-antw text{fill:var(--on-accent)!important}
/* Bewegung */
html.ek-eff .sz-welle{animation:szwelle 4.5s linear infinite}@keyframes szwelle{to{transform:translateX(-35px)}}
html.ek-eff .sz-welle.w2{animation-name:szwelle2}@keyframes szwelle2{to{transform:translateX(-45px)}}
html.ek-eff .sz-bub{animation:szbub 3.4s ease-in infinite}@keyframes szbub{0%{opacity:0;transform:translateY(0)}15%{opacity:.85}100%{opacity:0;transform:translateY(calc(var(--hh,40px)*-1))}}
html.ek-eff .sz-dampfg.an .sz-dampf{animation:szdampf 2.7s ease-out infinite}@keyframes szdampf{0%{opacity:.55;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(8px,-26px) scale(2.1)}}
html.ek-eff .sz-rohr.strom.an{animation:szdash 1s linear infinite}@keyframes szdash{to{stroke-dashoffset:-14}}
html.ek-eff .sz-motor.an .sz-zyl{animation:szkolb .36s ease-in-out infinite alternate}html.ek-eff .sz-motor.an .sz-zyl{transform-box:fill-box}@keyframes szkolb{to{transform:translateY(5px)}}
html.ek-eff .sz-motor.an .sz-rad{animation:szdrehen .8s linear infinite;transform-box:fill-box;transform-origin:center}
html.ek-eff .sz-fluss{animation:szfluss 2s linear infinite}@keyframes szfluss{to{stroke-dashoffset:-28}}
html.ek-eff .sz-pumpe{animation:szdreh 2s linear infinite}@keyframes szdreh{to{transform:rotate(360deg)}}@keyframes szdrehen{to{transform:rotate(360deg)}}
@media (max-width:640px){.szene{padding:14px 12px 12px;border-radius:16px}.sz-ctl{flex-direction:column;align-items:stretch}.sz-kpi{gap:6px}.sz-k{padding:8px 9px}.sz-k b{font-size:1.2rem}.sz-kl{font-size:.6rem;letter-spacing:.06em}.sz-tit{font-size:.7rem;letter-spacing:.1em}.sz-uhr{font-size:1.25rem}}
.sz-lg.w{fill:var(--warm)}

/* Datenschreiber */
.sz-ds rect{fill:color-mix(in srgb,var(--surface) 85%,transparent);stroke:var(--accent);stroke-width:1.4;filter:url(#sz-shadow)}.sz-recpkt{fill:var(--border)}.sz-recpkt.an{fill:#e5484d;filter:drop-shadow(0 0 4px #e5484d)}.sz-svg .sz-lab.ds{font-size:9px;letter-spacing:.1em}
html.ek-eff .sz-recpkt.an{animation:szrec 1.1s ease-in-out infinite}@keyframes szrec{50%{opacity:.35}}
.ds-zwei{align-items:start;gap:28px}.ds-stack{grid-template-columns:1fr!important;gap:14px}
.ds-prot{margin:0;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 90%,var(--accent)));padding:18px;box-shadow:0 18px 44px -26px rgba(5,12,22,.4);position:relative;overflow:hidden}
.ds-prot::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent))}
.ds-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ds-rec{display:inline-flex;align-items:center;gap:9px;font:700 .74rem/1 Inter,sans-serif;letter-spacing:.14em;color:var(--muted)}.ds-rec i{width:10px;height:10px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.18)}
html.ek-eff .ds-rec i{animation:szrec 1.4s ease-in-out infinite}
.ds-chip{font:700 .72rem/1 Inter,sans-serif;letter-spacing:.06em;padding:6px 10px;border-radius:99px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}.ds-chip::before{content:"✓ "}
.ds-tab{font:500 .82rem/1.3 'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;display:grid;gap:6px}
.ds-h,.ds-r{display:grid;grid-template-columns:3.2em 5.4em 1fr 3.4em 9.6em;gap:8px;align-items:center;padding:7px 10px;border-radius:9px}
.ds-h{font:700 .66rem/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:2px}
.ds-r{background:color-mix(in srgb,var(--surface) 70%,var(--alt));border:1px solid var(--border)}
.ds-r .nr{color:var(--accent);font-weight:700}.ds-r .zt{color:var(--muted)}.ds-r .was{font-family:Inter,sans-serif;font-weight:500;color:var(--text)}.ds-r .fd{color:var(--accent);font-weight:700;text-align:center}
.ds-r .sg{display:flex;flex-direction:column;line-height:1.15}.ds-r .sg em{font-style:normal;font-size:.68rem;color:var(--muted);opacity:.8}.ds-r .sg b{font-size:.78rem;color:var(--text)}
html.ek-eff .ds-prot.is-in .ds-r,html.ek-eff .ds-prot.in .ds-r,html.ek-eff .ds-prot.reveal.visible .ds-r{animation:dsein .6s ease both;animation-delay:calc(var(--i)*.28s)}@keyframes dsein{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.ds-fuss{margin-top:12px;font-size:.9rem;color:var(--muted);line-height:1.45}
@media (max-width:760px){.ds-h{display:none}.ds-r{grid-template-columns:3.2em 1fr 3em;grid-template-areas:"nr was fd" "zt sg sg";row-gap:3px}.ds-r .nr{grid-area:nr}.ds-r .was{grid-area:was}.ds-r .fd{grid-area:fd}.ds-r .zt{grid-area:zt}.ds-r .sg{grid-area:sg;flex-direction:row;gap:8px;align-items:baseline}}

.ds-prot{max-width:940px;margin:6px auto 26px}.ds-h span:nth-child(4),.ds-r .fd{text-align:center}.ds-h,.ds-r{grid-template-columns:3.6em 6em 1fr 4.2em 10em}

/* ---- Erklärfilme Serie 2 ---- */
.sz-chat{fill:color-mix(in srgb,var(--surface) 88%,var(--alt));stroke:var(--border);stroke-width:1.4}
.sz-qb{fill:var(--accent);opacity:.95}.sz-svg .sz-t.qt{fill:var(--on-accent)}
.sz-ab{fill:color-mix(in srgb,var(--surface) 70%,var(--alt));stroke:var(--accent);stroke-width:1.4}
.sz-quelle{fill:color-mix(in srgb,var(--accent) 12%,var(--surface));stroke:color-mix(in srgb,var(--accent) 40%,transparent);stroke-width:1}
.sz-d rect{fill:var(--surface);stroke:var(--muted);stroke-width:1.6}.sz-d .zl{stroke:var(--border);stroke-width:2.4;fill:none;stroke-linecap:round}.sz-d path{stroke:var(--border);stroke-width:2.4;fill:none;stroke-linecap:round}
.sz-d.ant rect{stroke:var(--accent)}.sz-d.fund rect{stroke:var(--accent);stroke-width:2.4;fill:color-mix(in srgb,var(--accent) 16%,var(--surface));filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 55%,transparent))}.sz-d.dim{opacity:.35}
.sz-schatten{fill:color-mix(in srgb,var(--accent-i) 14%,var(--surface));stroke:var(--accent-i);stroke-width:2;stroke-dasharray:5 4;filter:url(#sz-shadow)}.sz-d.schatten rect{stroke:var(--accent-i);stroke-dasharray:4 3;fill:color-mix(in srgb,var(--accent-i) 14%,var(--surface))}
.sz-schl{fill:var(--warm);stroke:var(--warm);stroke-width:2.4;stroke-linecap:round}.sz-schl circle{fill:var(--warm)}.sz-schl path{fill:none}
.sz-icon.an{stroke:var(--accent);opacity:1}.sz-icon{stroke-width:2}
.sz-fk{fill:var(--surface);stroke:var(--accent);stroke-width:1.6;filter:url(#sz-shadow)}
.sz-ordner{fill:color-mix(in srgb,var(--warm) 22%,var(--surface));stroke:var(--warm);stroke-width:1.6}
.sz-tank.an{stroke:var(--accent);stroke-width:2.4;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 60%,transparent))}
.sz-kopf{fill:color-mix(in srgb,var(--accent) 10%,var(--surface));stroke:var(--accent);stroke-width:2.2;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 45%,transparent))}
.sz-kopfkreis{fill:var(--surface);stroke:var(--accent);stroke-width:2}.sz-kopfpfad{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round}
.sz-chip{fill:var(--border);stroke:var(--muted);stroke-width:1.2}.sz-chip.ok{fill:var(--accent);stroke:var(--accent)}.sz-chip.warn{fill:var(--warm);stroke:var(--warm)}
.sz-haken{fill:none;stroke:var(--on-accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sz-schleife{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-dasharray:6 6;stroke-linecap:round}
.sz-nein{fill:color-mix(in srgb,#e5484d 10%,var(--surface));stroke:#e5484d;stroke-width:1.6;stroke-dasharray:5 4}.sz-kreuz{stroke:#e5484d;stroke-width:2.6;stroke-linecap:round}
.sz-himmel{fill:color-mix(in srgb,var(--accent) 7%,var(--alt));stroke:var(--border)}
.sz-kachel{fill:var(--surface);stroke:var(--border);stroke-width:1.2}.sz-balken{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round}.sz-ring0{fill:none;stroke:var(--border);stroke-width:7}.sz-ring1{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round}
.sz-kabel{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 8}.sz-kabel.aus{stroke:var(--muted);stroke-dasharray:3 6;opacity:.5}
.sz-dot.b{fill:var(--accent-i)}.sz-svg .sz-lab.ds,.sz-svg .sz-lab.ds{font-size:9px}
html.ek-eff .sz-kabel:not(.aus){animation:szfluss 2s linear infinite}html.ek-eff .sz-schleife{animation:szfluss 2.4s linear infinite}
