/* Die Welt: 3D-Erzählung (welt.js). Ohne WebGL oder bei reduzierter Bewegung bleibt alles normaler Text mit dem Siegel. */
html,body{overflow-x:clip}
section.welt{position:relative;padding:0;margin-inline:calc(50% - 50vw)}
.welt .huelle{padding-inline:max(16px,env(safe-area-inset-left,0px))}
.welt-buehne{display:none}
.mit-3d .welt-buehne{display:block;position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;z-index:0;overflow:hidden}
.welt-buehne canvas{position:relative;display:block;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.welt-bereit .welt-buehne canvas{opacity:1}
.welt-buehne::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 95% at 50% 42%,transparent 58%,rgba(8,11,22,.7) 100%)}
.welt-text{position:relative;z-index:1}
.kapitel{position:relative;display:flex;align-items:center}
.kapitel>.huelle{width:100%}
.mit-3d .kapitel{min-height:125vh;min-height:125svh}
.mit-3d .kapitel-held{min-height:calc(100svh - 88px)}
.mit-3d .kapitel-schluss{min-height:115svh}
.ohne-3d .kapitel:not(.kapitel-held){padding-block:64px 8px}
.karte{position:relative;max-width:31rem;isolation:isolate}
.mit-3d .karte::before,.mit-3d .held>div:first-child::before{content:"";position:absolute;inset:-32% -38%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(8,11,22,.88),rgba(8,11,22,.6) 55%,rgba(8,11,22,0))}
.mit-3d .held>div:first-child{position:relative;isolation:isolate}
.rechts .karte{margin-left:auto}
.karte h2{font-size:clamp(38px,4.6vw,64px);line-height:1.02}
.karte p{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:#C9D0E4;margin-top:20px;max-width:28em}
.mit-3d .karte h2,.mit-3d .held h1{text-shadow:0 2px 32px rgba(8,11,22,.85)}
.kapitel-schluss .karte{margin-inline:auto;text-align:center;max-width:44rem}
.kapitel-schluss .karte h2{font-size:clamp(46px,6.6vw,104px);line-height:.98}
.kapitel-schluss .karte p{margin-inline:auto}
.kapitel-schluss .knoepfe{justify-content:center}
.mit-3d .siegel{display:none}
.mit-3d .held{grid-template-columns:minmax(0,44rem);min-height:0;padding-block:24px}
.welt-leiste{position:absolute;right:max(18px,2.2vw);top:50%;transform:translateY(-50%);z-index:2;list-style:none;margin:0;padding:0;display:grid;gap:10px}
.welt-leiste li{width:2px;height:18px;border-radius:2px;background:var(--kante);transition:height .45s ease,background .45s ease}
.welt-leiste li[aria-current]{height:44px;background:var(--folie)}
.scroll-linie{display:none}
.mit-3d .scroll-linie{display:block;position:absolute;left:50%;bottom:26px;width:1px;height:58px;background:linear-gradient(var(--hell),transparent);transform-origin:top;animation:tropfen 2.6s ease-in-out infinite}
@keyframes tropfen{0%{transform:scaleY(0);opacity:0}35%{opacity:.75}100%{transform:scaleY(1);opacity:0}}
@media (max-width:760px){
  .mit-3d .kapitel{align-items:flex-end;padding-bottom:12svh}
  .mit-3d .kapitel-held{padding-bottom:9svh}
  .rechts .karte{margin-left:0}
  .welt-buehne::after{background:radial-gradient(120% 80% at 50% 30%,transparent 50%,rgba(8,11,22,.6) 100%),linear-gradient(transparent 38%,rgba(8,11,22,.88) 82%)}
  .welt-leiste{right:8px;gap:7px}.welt-leiste li{height:11px}.welt-leiste li[aria-current]{height:26px}
  .mit-3d .scroll-linie{display:none}
}
.ohne-3d .rechts .karte{margin-left:0}