/* ═══════════════════════════════════════════════════════════════════════════
   HERO-SZENEN — die gezeichnete Anlage im Kopf der vier Bereichsseiten
   Erzeugt von _werkzeug/hero-szenen.py. Die Körperfarben kommen aus site.css
   (.ob …); hier stehen nur Boden, Ferne und die Bewegungen.
   reduced-motion DÄMPFT (langsamer, kleinere Wege) — es killt nichts.
   ═══════════════════════════════════════════════════════════════════════ */
.szene{width:100%; height:auto; display:block; overflow:visible}

.szene .sz-boden,.kb .sz-boden{fill:#DCE6E0; opacity:.5}
.szene .sz-fuge,.kb .sz-fuge{fill:#A9BCB1; opacity:.35}
.szene .sz-ferne,.kb .sz-ferne{fill:#B4C6BB; opacity:.32}
.szene .sz-ring,.kb .sz-ring{stroke:#A9BCB1; stroke-width:1.1; opacity:.5; fill:none}
.szene .sz-rohr,.kb .sz-rohr{fill:none; stroke:#D2DED7; stroke-linecap:round; stroke-linejoin:round}
.szene .sz-rohr-innen,.kb .sz-rohr-innen{fill:none; stroke:#B4C6BB; opacity:.5;
  stroke-linecap:round; stroke-linejoin:round}

/* Das Medium läuft sichtbar durch die Leitung — der Strich wandert, nicht das Rohr. */
.szene .sz-medium,.kb .sz-medium{fill:none; stroke:var(--f,#E0561D); stroke-width:3.4; stroke-linecap:round;
  stroke-dasharray:14 30; opacity:.9; animation:sz-medium 4.6s linear infinite}
.szene .sz-medium--1,.kb .sz-medium--1{animation-duration:5.4s}
.szene .sz-medium--2,.kb .sz-medium--2{animation-duration:4.2s; animation-delay:-1.4s}
.szene .sz-medium--3,.kb .sz-medium--3{animation-duration:6.1s; animation-delay:-2.8s}
@keyframes sz-medium{to{stroke-dashoffset:-88}}

.szene .sz-rad,.kb .sz-rad{animation:sz-rad 14s linear infinite}
.szene .sz-rad-gegen,.kb .sz-rad-gegen{animation:sz-rad 9s linear infinite reverse}
@keyframes sz-rad{to{rotate:360deg}}

.szene .sz-welle,.kb .sz-welle{fill:#C6D4CC; stroke:#A9BCB1; stroke-width:1}
.szene .sz-riemen,.kb .sz-riemen{fill:none; stroke:#A9BCB1; stroke-width:3; stroke-dasharray:9 7;
  opacity:.65; animation:sz-riemen 2.4s linear infinite}
@keyframes sz-riemen{to{stroke-dashoffset:-32}}

.szene .sz-dampf,.kb .sz-dampf{fill:#FFFFFF; opacity:0; animation:sz-dampf 6.4s ease-out infinite}
.szene .sz-dampf--2,.kb .sz-dampf--2{animation-duration:7.8s; animation-delay:-2.4s}
.szene .sz-dampf--3,.kb .sz-dampf--3{animation-duration:9.2s; animation-delay:-4.9s}
@keyframes sz-dampf{
  0%{transform:translateY(6px) scale(.35); opacity:0}
  18%{opacity:.62}
  100%{transform:translateY(-46px) scale(1.5); opacity:0}}

.szene .sz-leuchte,.kb .sz-leuchte{fill:var(--f,#E0561D); animation:sz-leuchte 3.4s ease-in-out infinite}
@keyframes sz-leuchte{0%,100%{opacity:.22} 46%,60%{opacity:1}}

/* Materialschleuse: das Tor fährt auf, wenn das Gebinde ankommt. */
.szene .sz-tor{fill:#C6D4CC; transform-origin:233px 226px;
  animation:sz-tor 9s cubic-bezier(.5,0,.2,1) infinite}
@keyframes sz-tor{0%,44%{transform:scaleY(1)} 58%,84%{transform:scaleY(.12)} 96%,100%{transform:scaleY(1)}}

.szene .sz-gebinde{animation:sz-gebinde 9s cubic-bezier(.45,0,.3,1) infinite}
@keyframes sz-gebinde{
  0%,6%{transform:translateX(104px)}
  50%,62%{transform:translateX(210px)}
  90%,100%{transform:translateX(104px)}}

.szene .sz-kran{animation:sz-kran 17s cubic-bezier(.45,0,.35,1) infinite}
@keyframes sz-kran{0%,8%{transform:translateX(40px)} 46%,58%{transform:translateX(292px)}
  96%,100%{transform:translateX(40px)}}

html.dark .szene .sz-boden{fill:#1B2A22; opacity:.55}
html.dark .szene .sz-ferne{fill:#2C4036; opacity:.5}
html.dark .szene .sz-dampf{fill:#DCE6E0}

@media (prefers-reduced-motion: reduce){
  .szene .sz-medium{animation-duration:22s}
  .szene .sz-rad,.szene .sz-rad-gegen{animation-duration:60s}
  .szene .sz-riemen{animation-duration:14s}
  .szene .sz-dampf{animation-duration:26s}
  .szene .sz-leuchte{animation-duration:12s}
  .szene .sz-gebinde,.szene .sz-tor{animation-duration:34s}
  .szene .sz-kran{animation-duration:52s}
}

/* Kühlturm: Rippen längs, Ringe quer — beide folgen der Kontur. */
.szene .sz-rippe,.kb .sz-rippe{fill:none; stroke:#A9BCB1; stroke-width:1.1; opacity:.4}

/* Szene mitten im Text (personal.html: „Ein Bedarf, drei Wege, ein Einsatz"). */
.szene-feld{margin:.4rem auto 2.2rem; max-width:46rem; width:100%}

/* ═══ BEREICHS-KARTEN — die kleinen Objekte auf den vier Hauptseiten ═══════
   Bewusst einfache Bewegungen: EINE Sache je Karte, im Endlos-Takt. */
.kb{width:100%; height:auto; display:block}

/* Apparatetechnik: das Rohrbündel fährt aus dem Mantel und wieder hinein. */
.kb .kb-buendel{animation:kb-buendel 8s cubic-bezier(.45,0,.35,1) infinite}
@keyframes kb-buendel{0%,10%{transform:translateX(0)} 46%,62%{transform:translateX(26px)}
  94%,100%{transform:translateX(0)}}

/* Zutritt: das Schleusentor fährt auf, wenn die Freigabe steht. */
.kb .kb-tor{fill:#C6D4CC; transform-origin:48px 56px;
  animation:kb-tor 7.5s cubic-bezier(.5,0,.2,1) infinite}
@keyframes kb-tor{0%,40%{transform:scaleX(1)} 56%,82%{transform:scaleX(.08)}
  96%,100%{transform:scaleX(1)}}

/* Rückbau: der Schnitt wandert über das Bauteil, Funken fallen. */
.kb .kb-schnitt{animation:kb-schnitt 6.5s cubic-bezier(.5,0,.4,1) infinite}
@keyframes kb-schnitt{0%,6%{transform:translateX(38px)} 62%,74%{transform:translateX(138px)}
  96%,100%{transform:translateX(38px)}}
.kb .kb-funke{fill:var(--f,#E0561D); opacity:0; animation:kb-funke 1.1s ease-out infinite}
.kb .kb-funke--2{animation-duration:1.5s; animation-delay:-.4s}
.kb .kb-funke--3{animation-duration:.9s; animation-delay:-.7s}
@keyframes kb-funke{0%{transform:translateY(0); opacity:.95}
  100%{transform:translateY(14px); opacity:0}}

/* Freimessen: der Messbalken fährt über das Gebinde. */
.kb .kb-messer{fill:var(--f,#E0561D); opacity:.75;
  animation:kb-messer 5.5s cubic-bezier(.45,0,.35,1) infinite}
@keyframes kb-messer{0%,8%{transform:translateY(0)} 50%,64%{transform:translateY(78px)}
  96%,100%{transform:translateY(0)}}

/* Montage: der Haken senkt sich auf die Last und hebt wieder an. */
.kb .kb-haken{animation:kb-haken 7s cubic-bezier(.4,0,.3,1) infinite}
@keyframes kb-haken{0%,10%{transform:translateY(0)} 48%,66%{transform:translateY(22px)}
  96%,100%{transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  .kb .kb-buendel,.kb .kb-tor,.kb .kb-schnitt,.kb .kb-messer,.kb .kb-haken{
    animation-duration:34s}
  .kb .kb-funke{animation-duration:5s}
}