/* Startseite: scroll-gesteuertes 3D-Zeichen hinter dem Inhalt.
   Alles hier greift nur, wenn js/szene.js die Bühne startet (html.scene3d-on). Ohne WebGL, im Datensparmodus oder
   auf schwachen Geräten bleibt die Seite wie vorher (Netz mit flachem Zeichen). */
.szene-bg,#szene{display:none}
html.scene3d-on .szene-bg,html.scene3d-on #szene{display:block}
.szene-bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at var(--scene-x,50%) var(--scene-y,50%),rgba(226,190,110,calc(.2 * var(--scene-halo,0))) 0,rgba(226,190,110,0) 190px),radial-gradient(circle at var(--scene-x,50%) var(--scene-y,50%),var(--scene-a,#1a1408) 0%,rgba(26,20,8,0) 52%),var(--bg)}
#szene{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
html.scene3d-on main{position:relative;z-index:0}
html.scene3d-on .fuss{position:relative;z-index:3;background:var(--bg)}
/* Das Netz bleibt; nur das flache Zeichen weicht dem 3D-Zeichen */
html.scene3d-on .st-netz .mk{visibility:hidden}
html.scene3d-on .st:not(.st-held){min-height:42svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-block:56px;max-width:min(60vw,calc(1180px + 2*var(--rand)));width:100%;box-sizing:border-box}
html.scene3d-on .st.st-ende{min-height:0;padding-bottom:110px}
html.scene3d-on .st .karten,html.scene3d-on .st .was,html.scene3d-on .st .schritte{align-self:stretch}
@media (max-width:700px){
  html.scene3d-on .st-netz{display:none}
  html.scene3d-on .st:not(.st-held){max-width:none;justify-content:flex-start;padding-top:40svh;min-height:0}
  html.scene3d-on .st-held{padding-top:40svh}
}