/* Seite Webseiten (01.10.2026): 3D-Bühne nur hier geladen. Präfix ws-. Ohne Skript und bei «Bewegung reduzieren» steht alles ruhig im Endzustand. */
@property --abstand{syntax:"<length>";inherits:true;initial-value:38px}
.ws-buehne{--blau-hell:#62DCFF;--blau:#2B86F5;--indigo:#4129C9;--violett:#C08BFA;--nachtblau:#070A12;
  position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(120% 90% at 75% 40%,#13204A 0%,#0B1022 45%,var(--nachtblau) 75%);color:#fff;padding:clamp(120px,16vh,170px) 0 clamp(72px,10vh,110px)}
.ws-buehne::before{content:"";position:absolute;left:-30%;right:-30%;bottom:-8%;height:62%;z-index:-1;
  background-image:linear-gradient(rgba(98,220,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(98,220,255,.13) 1px,transparent 1px);background-size:64px 64px;
  transform:perspective(520px) rotateX(68deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%);
  animation:ws-boden 6s linear infinite}
@keyframes ws-boden{to{background-position:0 64px,0 0}}
.ws-held{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.ws-text{display:grid;gap:22px;min-width:0}
.ws-pfad{font-size:13px;color:rgba(255,255,255,.6)}
.ws-pfad a{color:inherit}
.ws-buehne h1{font-size:clamp(52px,7.4vw,104px);line-height:.95;letter-spacing:-.045em;color:#fff;margin:0}
.ws-buehne h1 span{background:linear-gradient(100deg,var(--blau-hell),var(--blau) 45%,var(--violett));-webkit-background-clip:text;background-clip:text;color:transparent}
.ws-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:rgba(255,255,255,.78);max-width:34em}
.ws-buehne .tlink{color:#fff}

/* Explodierte Website */
.ws-szene{position:relative;height:clamp(380px,46vw,560px);perspective:1500px;min-width:0}
.ws-kipp{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d;transform:rotateY(calc(var(--px,0) * 9deg)) rotateX(calc(var(--py,0) * -7deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ws-stapel{position:relative;width:min(340px,72%);aspect-ratio:34/23;transform-style:preserve-3d;transform:rotateX(57deg) rotateZ(-36deg);animation:ws-drehen 18s ease-in-out infinite;will-change:transform}
@keyframes ws-lage{0%,100%{transform:translateZ(calc(var(--i) * 16px))}50%{transform:translateZ(calc(var(--i) * 58px))}}
@keyframes ws-drehen{0%,100%{transform:rotateX(57deg) rotateZ(-36deg)}50%{transform:rotateX(50deg) rotateZ(-24deg)}}
.ws-lage{position:absolute;inset:0;border-radius:14px;transform:translateZ(calc(var(--i) * 38px));animation:ws-lage 6.5s ease-in-out infinite;will-change:transform;
  background:linear-gradient(140deg,rgba(98,220,255,.16),rgba(43,134,245,.12) 50%,rgba(65,41,201,.24));border:1px solid rgba(150,210,255,.38);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 18px 50px -10px rgba(43,134,245,.35);display:grid;padding:7%;gap:6%;align-content:start}
.ws-lage.l0{background:linear-gradient(160deg,#16244F,#0D1430);border-color:rgba(150,210,255,.25);padding:0;align-content:stretch}
.ws-rahmen{display:flex;align-items:center;gap:6px;height:16%;padding:0 5%;border-bottom:1px solid rgba(150,210,255,.2)}
.ws-rahmen i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55)}
.ws-rahmen b{margin-left:6%;flex:1;height:44%;border-radius:999px;background:rgba(255,255,255,.1);font:600 9px/1.9 var(--f);color:rgba(255,255,255,.7);padding-left:8px;overflow:hidden;white-space:nowrap}
.ws-zeile{height:9px;border-radius:999px;background:rgba(255,255,255,.55)}
.ws-zeile.kurz{width:40%}.ws-zeile.mittel{width:65%}.ws-zeile.hell{background:rgba(255,255,255,.85)}
.ws-nav{display:flex;align-items:center;justify-content:space-between}
.ws-nav .logo{width:22%;height:12px;border-radius:4px;background:linear-gradient(90deg,var(--blau-hell),var(--blau))}
.ws-nav .punkte{display:flex;gap:6px}.ws-nav .punkte i{width:22px;height:6px;border-radius:999px;background:rgba(255,255,255,.45)}
.ws-bild{height:58%;border-radius:10px;background:linear-gradient(120deg,var(--blau-hell),var(--blau) 50%,var(--indigo));box-shadow:0 0 30px rgba(98,220,255,.35)}
.ws-spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ws-spalten div{height:46px;border-radius:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18)}
.ws-feld{height:18px;border-radius:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3)}
.ws-knopf{width:38%;height:20px;border-radius:999px;background:linear-gradient(90deg,var(--violett),var(--indigo))}
.ws-schatten{position:absolute;width:min(360px,76%);aspect-ratio:2/1;border-radius:50%;background:radial-gradient(closest-side,rgba(43,134,245,.45),transparent);filter:blur(18px);transform:translateY(46%) rotateX(70deg)}
.ws-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font:600 13px var(--f);color:#fff;white-space:nowrap;
  background:rgba(13,20,48,.72);border:1px solid rgba(150,210,255,.35);box-shadow:0 10px 30px -8px rgba(43,134,245,.5);animation:ws-schweben 5s ease-in-out infinite}
.ws-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blau-hell);box-shadow:0 0 10px var(--blau-hell)}
.ws-chip.c1{top:8%;left:4%}.ws-chip.c2{top:18%;right:2%;animation-delay:-1.3s}.ws-chip.c3{bottom:20%;left:0;animation-delay:-2.6s}.ws-chip.c4{bottom:8%;right:8%;animation-delay:-3.9s}
@keyframes ws-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* Schritte als Treppe in 3D */
.ws-schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;perspective:1200px}
.ws-schritt{--i:0;position:relative;display:grid;gap:12px;align-content:start;min-width:0;padding:28px 24px 30px;border-radius:calc(var(--radius) * 2);background:var(--weiss);
  box-shadow:0 1px 0 rgba(40,30,20,.06),0 30px 40px -28px rgba(30,40,120,.45);transform-style:preserve-3d;transform:rotateX(16deg) rotateY(-12deg);
  animation:ws-welle 5s ease-in-out infinite;animation-delay:calc(var(--i) * -1.25s);transition:box-shadow .4s}
.ws-schritt:hover{box-shadow:0 1px 0 rgba(40,30,20,.06),0 40px 60px -30px rgba(43,134,245,.6)}
@keyframes ws-welle{0%,100%{transform:rotateX(16deg) rotateY(-12deg) translateZ(0)}50%{transform:rotateX(9deg) rotateY(-5deg) translateZ(34px)}}
.ws-nr{font:800 54px/1 var(--f);letter-spacing:-.05em;background:linear-gradient(120deg,#62DCFF,#2B86F5 50%,#4129C9);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateZ(30px)}
.ws-schritt h3{font-size:19px;margin:0;transform:translateZ(18px)}
.ws-schritt p{margin:0;color:var(--grau);font-size:15.5px}

/* Würfel mit den Betriebsleistungen */
.ws-umfang{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:center}
.ws-wuerfel-buehne{height:340px;display:grid;place-items:center;perspective:1100px}
.ws-wuerfel{--s:180px;position:relative;width:var(--s);height:var(--s);transform-style:preserve-3d;animation:ws-wuerfel 16s cubic-bezier(.65,0,.35,1) infinite}
@keyframes ws-wuerfel{0%{transform:rotateX(-22deg) rotateY(0)}16.6%{transform:rotateX(-22deg) rotateY(-90deg)}33.3%{transform:rotateX(-22deg) rotateY(-180deg)}50%{transform:rotateX(-22deg) rotateY(-270deg)}
  66.6%{transform:rotateX(-112deg) rotateY(-360deg)}83.3%{transform:rotateX(68deg) rotateY(-360deg)}100%{transform:rotateX(-22deg) rotateY(-360deg)}}
.ws-seite{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;padding:18px;text-align:center;border-radius:18px;font:700 17px/1.2 var(--f);color:#fff;
  background:linear-gradient(140deg,#62DCFF,#2B86F5 50%,#4129C9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -20px 40px rgba(20,10,90,.35);backface-visibility:hidden}
.ws-seite:nth-child(even){background:linear-gradient(140deg,#C08BFA,#7D57E0 55%,#4A2DB8)}
.ws-seite small{font:500 12.5px/1.35 var(--f);color:rgba(255,255,255,.85)}
.ws-seite.f1{transform:translateZ(calc(var(--s) / 2))}.ws-seite.f2{transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}
.ws-seite.f3{transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}.ws-seite.f4{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}
.ws-seite.f5{transform:rotateX(90deg) translateZ(calc(var(--s) / 2))}.ws-seite.f6{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2))}
.ws-listen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;min-width:0}
.ws-listen h3{font-size:20px;margin:0 0 12px}
.ws-listen ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ws-listen li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;color:var(--text);font-size:16px}
.ws-listen li::before{content:"";width:11px;height:6px;margin-top:8px;border-left:2px solid var(--akzent);border-bottom:2px solid var(--akzent);transform:rotate(-45deg)}

/* Animationen nur, solange die Bühne sichtbar ist (Klasse ws-ruht setzt das Skript ausserhalb des Bildschirms) */
.ws-ruht,.ws-ruht *,.ws-ruht::before{animation-play-state:paused!important}

@media (max-width:1040px){
  .ws-held,.ws-umfang{grid-template-columns:minmax(0,1fr)}
  .ws-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .ws-schritte,.ws-listen{grid-template-columns:minmax(0,1fr)}
  .ws-szene{height:340px}
  .ws-chip{font-size:12px;padding:6px 11px}
  .ws-wuerfel{--s:150px}
  .ws-wuerfel-buehne{height:280px}
}
@media (prefers-reduced-motion:reduce){
  .ws-stapel{animation:none!important}
  .ws-lage{animation:none!important;transform:translateZ(calc(var(--i) * 40px))}
  .ws-buehne::before,.ws-chip,.ws-schritt,.ws-wuerfel{animation:none!important}
  .ws-wuerfel{transform:rotateX(-22deg) rotateY(-30deg)}
  .ws-kipp{transition:none}
}