/* Layout: Steuerleiste oben, isometrische Bühne mit automatisch entflochtenen Beschriftungen, Schrittkarte direkt darunter, Legende am Schluss. */
#bp-technik{
  --bg:#f6f3ec; --panel:#fffdf8; --fg:#1d2b3a; --muted:#6b7786; --line:#e3dccd;
  --ground:#e9e4d6; --paving:#ddd3bf; --coping:#efe8da; --stone:#d9d3c6; --stone-dk:#a69d8b;
  --water:#4f9fdb; --water-deep:#2c6fae; --tile:#cfe6f5; --tile-wall:#a9d0ec; --tile-line:#9cc4e2;
  --steel:#dbe4ee; --steel-dk:#9fb1c5; --steel-side:#c2cfdd;
  --pipe:#8da3ba; --pipe-in:#eaf1f8; --flow:#2f78b8; --warm:#d7553f; --warm-in:#fbe4df; --air:#7fc4ef;
  --accent:#c9663a; --accent-soft:#f6e3d6; --accent-ink:#8f4523;
  --navy:#17335a; --on-navy:#ffffff; --kl-body:#24282e; --hp-body:#2f2733; --dirty:#7d7a2e; --dirty-in:#ece7c9; --filt:#4b5058; --filt-hi:#6e747d; --filt-dk:#34383e; --cloud-lo:#e3eef8; --cloud-edge:#c9dceb; --hp-side:#241e28; --hp-top:#3d3442; --kl-k:#5d636b; --kl-blue:#2f6fd0; --kl-screen:#b9c7a9; --ok:#3a9d6a; --lamp:#fff4c2;
  --font-display:"Satoshi","Figtree",system-ui,sans-serif; --font-body:"Figtree","Satoshi",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){ #bp-technik:not([data-theme="light"]){
  --bg:#0f1720; --panel:#172230; --fg:#eaf0f6; --muted:#97a6b8; --line:#2b3a4b;
  --ground:#1a2531; --paving:#2a3440; --coping:#3a4450; --stone:#5c5d5a; --stone-dk:#3d3e3c;
  --water:#3b88c6; --water-deep:#1f5a93; --tile:#1f4a6c; --tile-wall:#1a3f5e; --tile-line:#2b5d84;
  --steel:#3d4e62; --steel-dk:#1f2c3b; --steel-side:#2c3b4c;
  --pipe:#4a5d72; --pipe-in:#223040; --flow:#7cc0f2; --warm:#ff8c74; --warm-in:#3d2622; --air:#8fd0f7;
  --accent:#e58a5e; --accent-soft:#3b2619; --accent-ink:#f3b89a;
  --navy:#9cc4ea; --on-navy:#0f1720; --kl-body:#0b0d10; --hp-body:#2a2230; --dirty:#b5ad55; --dirty-in:#3a3820; --filt:#3d4249; --filt-hi:#5c626b; --filt-dk:#25282d; --cloud-lo:#1f3346; --cloud-edge:#3b5873; --hp-side:#1b161f; --hp-top:#3a3040; --kl-k:#4a5058; --kl-blue:#4d8ef0; --kl-screen:#9fb08e; --ok:#5cc28d; --lamp:#fff1b0; color-scheme:dark } }
#bp-technik[data-theme="dark"]{
  --bg:#0f1720; --panel:#172230; --fg:#eaf0f6; --muted:#97a6b8; --line:#2b3a4b;
  --ground:#1a2531; --paving:#2a3440; --coping:#3a4450; --stone:#5c5d5a; --stone-dk:#3d3e3c;
  --water:#3b88c6; --water-deep:#1f5a93; --tile:#1f4a6c; --tile-wall:#1a3f5e; --tile-line:#2b5d84;
  --steel:#3d4e62; --steel-dk:#1f2c3b; --steel-side:#2c3b4c;
  --pipe:#4a5d72; --pipe-in:#223040; --flow:#7cc0f2; --warm:#ff8c74; --warm-in:#3d2622; --air:#8fd0f7;
  --accent:#e58a5e; --accent-soft:#3b2619; --accent-ink:#f3b89a;
  --navy:#9cc4ea; --on-navy:#0f1720; --kl-body:#0b0d10; --hp-body:#2a2230; --dirty:#b5ad55; --dirty-in:#3a3820; --filt:#3d4249; --filt-hi:#5c626b; --filt-dk:#25282d; --cloud-lo:#1f3346; --cloud-edge:#3b5873; --hp-side:#1b161f; --hp-top:#3a3040; --kl-k:#4a5058; --kl-blue:#4d8ef0; --kl-screen:#9fb08e; --ok:#5cc28d; --lamp:#fff1b0; color-scheme:dark }

#bp-technik *{box-sizing:border-box}
#bp-technik{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.5;
  padding-block:24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#bp-technik .wrap{max-width:1180px;margin:0 auto;display:grid;gap:14px}
#bp-technik h1{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.8rem);margin:0;letter-spacing:-.01em;text-wrap:balance}
#bp-technik .eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
#bp-technik .head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
#bp-technik .head p{margin:0;color:var(--muted);max-width:52ch}

#bp-technik .bar{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 10px;flex-wrap:wrap}
#bp-technik .btn{border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:999px;height:40px;min-width:40px;padding:0 14px;
  font:600 .9rem var(--font-body);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
#bp-technik .btn:focus-visible, #bp-technik .dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#bp-technik .btn.primary{background:var(--navy);color:var(--on-navy);border-color:transparent;min-width:150px}
#bp-technik .steps{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
#bp-technik .dot{height:30px;min-width:30px;padding:0 8px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);
  font:600 .78rem var(--font-body);cursor:pointer;font-variant-numeric:tabular-nums}
#bp-technik .dot[aria-current="step"]{background:var(--accent);color:#fff;border-color:var(--accent)}
#bp-technik .dot.care:not([aria-current]){border-style:dashed;border-color:var(--accent)}

#bp-technik .stage{background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden}
#bp-technik .scene-wrap{display:flex;justify-content:center;padding:8px 12px 0}
#bp-technik .stage svg{display:block;width:100%;height:auto;max-height:min(62vh,560px);max-width:100%}
#bp-technik .card{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;border-top:1px solid var(--line);padding:16px 20px 18px}
#bp-technik .card .num{grid-row:span 2;display:inline-flex;align-items:center;justify-content:center;height:34px;min-width:34px;padding:0 9px;border-radius:999px;
  background:var(--navy);color:var(--on-navy);font:600 .9rem var(--font-display)}
#bp-technik .card .num.care{background:var(--accent);color:#fff}
#bp-technik .card h2{font-family:var(--font-display);font-size:1.15rem;margin:0;font-weight:600;line-height:1.3}
#bp-technik .card p{margin:0;color:var(--muted);font-size:.92rem;max-width:72ch;min-width:0}
#bp-technik .progress{grid-column:1/-1;height:3px;background:var(--line);border-radius:2px;margin-top:10px;overflow:hidden}
#bp-technik .progress i{display:block;height:100%;width:0;background:var(--accent)}
#bp-technik .progress i.run{animation:fill var(--dur) linear forwards}
@keyframes fill{to{width:100%}}

#bp-technik .note{font-size:.78rem;color:var(--muted)}
#bp-technik .legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
#bp-technik .leg{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
#bp-technik .leg b{font-family:var(--font-display);font-weight:600}
#bp-technik .leg small{display:block;color:var(--muted)}
#bp-technik .sw{flex:none;width:22px;height:22px;border-radius:7px;margin-top:2px}
#bp-technik .sw.cold{background:var(--flow)} #bp-technik .sw.warm{background:var(--warm)} #bp-technik .sw.air{background:var(--air)}
#bp-technik .sw.care{border:2px dashed var(--accent);background:var(--accent-soft)}

/* SVG */
#bp-technik .flow{stroke:var(--flow);stroke-dasharray:6 12;animation:flow 1.1s linear infinite}
#bp-technik .flow.warm{stroke:var(--warm)}
#bp-technik .flow.dirty{stroke:var(--dirty)}
#bp-technik .sw.dirty{background:var(--dirty)}
#bp-technik .flow.dose{stroke:var(--accent);animation-duration:1.4s}
#bp-technik .flow.air{stroke:var(--air);stroke-dasharray:4 10;animation-duration:.8s}
@keyframes flow{to{stroke-dashoffset:-18}}
#bp-technik .callout{transition:opacity .4s}
#bp-technik .comp{transition:filter .4s}
#bp-technik .stage.focus .comp:not(.on):not(#c-becken):not(#c-badipool){filter:saturate(.35) brightness(1.04)}
#bp-technik .stage.focus .callout:not(.on):not(.minor) .t{fill:var(--muted)}
#bp-technik .stage.focus .callout:not(.on):not(.minor) .nc{filter:saturate(.3) brightness(1.25)}
#bp-technik .ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
#bp-technik .comp.on .ring{animation:ring 1.6s ease-out infinite}
@keyframes ring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.35)}}
#bp-technik .callout rect.pill{fill:var(--panel);stroke:var(--line)}
#bp-technik .callout.on rect.pill{stroke:var(--accent);stroke-width:1.5}
#bp-technik .callout .t{font:700 12.5px var(--font-body);fill:var(--fg)}
#bp-technik .callout .s{font:500 11px var(--font-body);fill:var(--muted)}
#bp-technik .callout .n{font:600 11px var(--font-display);fill:var(--on-navy)}
#bp-technik .callout .nc{fill:var(--navy)} #bp-technik .callout.care .nc{fill:var(--accent)} #bp-technik .callout.care .n{fill:#fff}
#bp-technik .callout.minor rect.pill{fill:var(--bg);stroke:none}
#bp-technik .callout.minor .t{font-size:11.5px;font-weight:600}
#bp-technik .callout.cold .t{fill:var(--flow)} #bp-technik .callout.warm .t{fill:var(--warm)}
#bp-technik .leader{stroke:var(--muted);stroke-width:1;fill:none;stroke-opacity:.7}
#bp-technik .anchor{fill:var(--muted)}
#bp-technik .wave{animation:wave 3s ease-in-out infinite}
#bp-technik .glow{animation:glow 3.2s ease-in-out infinite}
#bp-technik .season-a{animation:seasonA 10s ease-in-out infinite}
#bp-technik .season-b{animation:seasonB 10s ease-in-out infinite}
@keyframes seasonA{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes seasonB{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
#bp-technik .blink{transform-box:fill-box;transform-origin:center;animation:blink 6s ease-in-out infinite}
@keyframes blink{0%,46%,54%,100%{transform:scaleY(1)}50%{transform:scaleY(.08)}}
#bp-technik .look{animation:look 7s ease-in-out infinite}
@keyframes look{0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,2px)}60%{transform:translate(3px,3px)}}
#bp-technik .halo{animation:halo 3s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.75}50%{opacity:1}}
#bp-technik .beams{animation:beams 4s ease-in-out infinite}
@keyframes beams{0%,100%{opacity:.55}50%{opacity:.9}}
#bp-technik .chart{stroke-dasharray:140;stroke-dashoffset:140;animation:chart 5s ease-in-out infinite}
@keyframes chart{0%{stroke-dashoffset:140}60%,100%{stroke-dashoffset:0}}
#bp-technik .sunrays{transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#bp-technik .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}
@keyframes glow{0%,100%{opacity:.75}50%{opacity:1}}
#bp-technik .signal{stroke:var(--accent);stroke-width:2;fill:none;stroke-dasharray:3 9;stroke-linecap:round;animation:flow .9s linear infinite}
#bp-technik .wifi{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;animation:wifi 1.8s ease-out infinite;opacity:0}
#bp-technik .wifi.b{animation-delay:.3s}#bp-technik .wifi.c{animation-delay:.6s}
@keyframes wifi{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes wave{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion: reduce){#bp-technik .chart{animation:none;stroke-dashoffset:0}#bp-technik .blink, #bp-technik .look, #bp-technik .halo, #bp-technik .beams{animation:none}#bp-technik .season-a{animation:none;opacity:1}#bp-technik .season-b{animation:none;opacity:0}#bp-technik .sunrays, #bp-technik .pulse{animation:none}#bp-technik .glow, #bp-technik .signal, #bp-technik .wifi{animation:none;opacity:1}#bp-technik .flow, #bp-technik .comp.on .ring, #bp-technik .wave, #bp-technik .progress i.run{animation:none}#bp-technik .comp.on .ring{opacity:.8}}

#bp-technik{max-width:100%;overflow-x:hidden}
#bp-technik .wrap{max-width:100%;margin:0;gap:12px}
#bp-technik .stage{overflow:hidden}
#bp-technik .stage svg{max-width:100%}

/* Mobile controls + step-zoom (m4) */
@media (max-width:640px){
  #bp-technik .bar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"prev play next" "steps steps steps";
    align-items:center;
    gap:8px;
    padding:8px;
    border-radius:16px;
    flex-wrap:nowrap;
  }
  #bp-technik #bp-t3d-prev{grid-area:prev}
  #bp-technik #bp-t3d-play{grid-area:play;min-width:0;width:100%;height:36px;padding:0 12px;font-size:.88rem}
  #bp-technik #bp-t3d-next{grid-area:next}
  #bp-technik .bar > .btn{height:36px;min-width:36px;padding:0 10px}
  #bp-technik .steps{
    grid-area:steps;
    display:flex;
    flex-wrap:nowrap;
    gap:6px;
    margin-left:0;
    width:auto;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding:2px 4px 4px;
    overscroll-behavior-x:contain;
  }
  #bp-technik .steps::-webkit-scrollbar{display:none}
  #bp-technik .dot{
    flex:0 0 auto;
    scroll-snap-align:center;
    height:28px;
    min-width:28px;
    padding:0 9px;
    font-size:.74rem;
  }
}
/* Never show Gesamtansicht (removed UX) */
#bp-technik .zoom-out{display:none!important}