/* Der Raum: eine 3D-Szene hinter der ganzen Seite. Gilt nur, wenn body.raumseite gesetzt ist. */
canvas.raum{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;touch-action:pan-y;background:#050506}
.raumseite{background:#050506;overscroll-behavior-y:none}
.raumseite html,html:has(.raumseite){scroll-behavior:auto}
/* Der Text der Seite bleibt für Suchmaschinen im Dokument, ist aber nicht zu sehen und nicht zu bedienen */
.raumseite main{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.raum__weg{position:relative;width:1px;pointer-events:none}
.raum__ebene{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
/* Rand dunkelt ab, feines Filmkorn */
.raum__ebene::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 100% at 50% 48%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.raum__ebene::before{content:"";position:absolute;inset:-60px;pointer-events:none;opacity:.055;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23k)'/%3E%3C/svg%3E");animation:korn .5s steps(5) infinite}
.raum__ebene>*{z-index:2}

/* Menü ohne Fläche: nur die Wörter, damit der Raum das ganze Bild behält */
.raumseite .leiste{position:fixed;left:0;right:0;top:0;background:none;border:0;padding-top:20px;transform:translateY(-110%);transition:transform .45s var(--ease);pointer-events:none}
.raumseite.unten .leiste{transform:none}
.raumseite .leiste a,.raumseite .leiste button{pointer-events:auto;text-shadow:0 1px 10px #000,0 0 3px #000}
.raumseite .leiste .korbknopf b{text-shadow:none}
/* während ein Film oder ein Formular die Aufmerksamkeit hat, tritt das Menü zurück */
.raumseite.still .leiste{transform:translateY(-110%)}

.raumseite .tonknopf{position:absolute;right:var(--rand);bottom:22px;padding:.5em 1em;border:1px solid var(--linie);border-radius:999px;background:rgba(7,7,8,.6);pointer-events:auto;transition:opacity .3s}
.raumseite .fuss{position:fixed;z-index:6;left:var(--rand);bottom:20px;right:auto;padding:0;border:0;gap:.3rem 1.2rem;font-size:.8rem;opacity:0;pointer-events:none;transition:opacity .4s;text-shadow:0 1px 8px #000}
.raumseite.ende .fuss{opacity:1;pointer-events:auto}
.raumseite .fuss nav{gap:1rem}

/* Ladebalken vor dem Sturm */
.lade{position:fixed;inset:0;z-index:120;display:grid;place-content:center;justify-items:center;gap:22px;background:#050506;color:var(--fg);transition:opacity .7s,visibility .7s}
.lade.weg{opacity:0;visibility:hidden}
.lade b{font-family:"Metal Mania",Inter,sans-serif;font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(1.5rem,3.4vw,2.4rem)}
.lade i{display:block;width:min(260px,56vw);height:2px;background:#1d1d21;overflow:hidden}
.lade i span{display:block;height:100%;width:100%;background:var(--fg);transform-origin:0 50%;transform:scaleX(var(--lade,0));transition:transform .25s linear}
.lade small{font-size:.8rem;color:var(--grau);font-variant-numeric:tabular-nums;min-height:1.2em}

/* Gefangenes Blatt im Raum: die Schildchen liegen in der festen Ebene */
.raum__ebene .fang{z-index:3}
.raum__ebene .fang dl{grid-template-columns:auto 1fr}
.fang .fang__art{font-family:"Metal Mania",Inter,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.07em;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.1;white-space:nowrap}
@media (max-width:860px){.raumseite.gefangen .tonknopf{opacity:0;pointer-events:none}}
@media (prefers-reduced-motion:reduce){.raum__ebene::before{animation:none}}

/* fliegende T-Shirts nie über einem laufenden Film oder beim Schreiben */
.still .hemdflug{opacity:0;pointer-events:none;transition:opacity .4s}

/* Nach dem Laden: Balken weicht dem Knopf „Eintreten“ */
.lade__los{margin-top:4px}
.lade.bereit i{visibility:hidden;height:0}
.lade.bereit small{display:none}
/* Sprachlink: im Ladebild unter „Eintreten“, im Menü; mit der Tastatur kommt das Menü auch vor dem ersten Scrollen hervor */
.lade__sprache{font-family:"Metal Mania",Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--grau);text-decoration:none;padding:.4em .6em}
.lade__sprache:hover,.lade__sprache:focus-visible{color:var(--fg)}
.lade:not(.bereit) .lade__sprache{margin-top:-6px}
.raumseite:not(.still) .leiste:focus-within{transform:none}