/*
 * Inszenierte Label-Website für ACTIVATED Records und IGNITED Records.
 * Diese Datei kennt keine Marke: Farben, Schriften, Abstände und Zeiten kommen aus
 * tokens.css, Bildmaße aus scene.css. Bausteine des Design-Systems tragen ds-,
 * Szenen tragen st-.
 *
 * Bewegung: Das Scrollen steuert ausschließlich den Wechsel zwischen den Szenen.
 * Alles innerhalb einer Szene startet von selbst oder folgt Zeiger und Tastatur.
 *
 * Formsprache: Glas mit Lichtkante, das Symbol der Marke als leuchtender Knoten,
 * Leitungen verbinden jede Erklärung mit ihrem Gegenstand.
 */

@property --st-beam {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ---------- Grundlage ---------- */

html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

.st {
  --st-bar: 84px;
  --st-edge: clamp(28px, 5svh, 56px);
  --st-glass-fill: color-mix(in srgb, var(--surface) 58%, transparent);
  --st-glass-rim: color-mix(in srgb, var(--text) 13%, transparent);
  --st-glass-shine: color-mix(in srgb, var(--text) 22%, transparent);
  --st-glow-soft: color-mix(in srgb, var(--accent) 34%, transparent);
  --st-wire: color-mix(in srgb, var(--accent) 46%, transparent);
  background: var(--bg-deep);
  overflow-x: clip;
}

.st-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.st-defs { position: absolute; }
.st [hidden] { display: none !important; }

.st-skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.st-skip:focus-visible { transform: none; }

/* ---------- Glas ---------- */

.st-glass {
  position: relative;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--text) 7%, transparent), transparent 42%),
    linear-gradient(180deg, var(--panel-start), var(--panel-end));
  box-shadow:
    inset 0 1px 0 var(--st-glass-shine),
    inset 0 0 0 1px var(--st-glass-rim),
    0 30px 70px -20px rgb(0 0 0 / .75);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.35);
  backdrop-filter: blur(var(--blur-lg)) saturate(1.35);
}
/* Obere Lichtkante in der Farbe der Marke. */
.st-glass::before {
  content: "";
  position: absolute;
  inset: 0 18% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
  pointer-events: none;
}

/* ---------- Knöpfe: Glas mit umlaufender Lichtkante ---------- */

.st-holo {
  --st-mx: 50%;
  --st-my: 50%;
  --st-tilt-x: 0deg;
  --st-tilt-y: 0deg;
  --st-lift: 0px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--text);
  background:
    radial-gradient(90% 160% at var(--st-mx) var(--st-my), color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--text) 12%, transparent), color-mix(in srgb, var(--text) 3%, transparent) 48%, color-mix(in srgb, var(--bg-deep) 44%, transparent)),
    var(--st-glass-fill);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 30%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--bg-deep) 70%, transparent),
    0 14px 34px -12px rgb(0 0 0 / .8);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.5);
  backdrop-filter: blur(var(--blur-md)) saturate(1.5);
  transform: perspective(640px) rotateX(var(--st-tilt-x)) rotateY(var(--st-tilt-y)) translateY(var(--st-lift));
  transition:
    transform var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}
/* Die Lichtkante: ein Strahl läuft auf dem Rand um, sobald der Knopf angesprochen wird. */
.st-holo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background:
    conic-gradient(from var(--st-beam), transparent 0 56%, color-mix(in srgb, var(--accent) 85%, transparent) 70%, var(--accent-tint) 76%, transparent 88% 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--text) 30%, transparent), color-mix(in srgb, var(--text) 6%, transparent) 60%, color-mix(in srgb, var(--accent) 30%, transparent));
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
  animation: st-beam 4.8s linear infinite;
  animation-play-state: paused;
  pointer-events: none;
}
/* Holografischer Schimmer, der dem Zeiger folgt. */
.st-holo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 22%, color-mix(in srgb, var(--accent-alt) 20%, transparent) 38%, color-mix(in srgb, var(--text) 28%, transparent) 47%, color-mix(in srgb, var(--accent) 20%, transparent) 56%, transparent 74%);
  background-size: 260% 100%;
  background-position: calc(160% - var(--st-mx)) 0;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-standard);
}
.st-holo:hover,
.st-holo:focus-visible { --st-lift: -2px; color: var(--text); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 36%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--bg-deep) 70%, transparent), 0 18px 40px -14px rgb(0 0 0 / .85), 0 0 26px var(--st-glow-soft); }
.st-holo:hover::before,
.st-holo:focus-visible::before { animation-play-state: running; }
.st-holo:hover::after,
.st-holo:focus-visible::after { opacity: .85; }
.st-holo:active { --st-lift: 1px; transition-duration: var(--duration-fast); }
.st-holo:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
@keyframes st-beam { to { --st-beam: 360deg; } }

.st-holo__label { position: relative; }
.st-holo .ds-icon { flex: none; width: 16px; height: 16px; }
/* Das Symbol der Marke als Signal: ruhig im Stand, leuchtend unter dem Zeiger. */
img.st-holo__mark {
  flex: none;
  width: auto;
  height: 22px;
  filter: drop-shadow(0 0 3px var(--st-glow-soft));
  transition: filter var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-out);
}
.st-holo:hover .st-holo__mark,
.st-holo:focus-visible .st-holo__mark { filter: brightness(1.18) drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 16px var(--st-glow-soft)); transform: scale(1.08); }

.st-holo--primary {
  color: var(--on-accent);
  background:
    radial-gradient(80% 150% at var(--st-mx) var(--st-my), color-mix(in srgb, var(--accent-tint) 70%, transparent), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, var(--text)), var(--accent) 46%, color-mix(in srgb, var(--accent) 74%, var(--bg-deep)));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 60%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--bg-deep) 30%, transparent),
    0 14px 34px -10px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent);
  font-weight: 700;
}
.st-holo--primary::before { animation-play-state: running; animation-duration: 6s; background: conic-gradient(from var(--st-beam), transparent 0 60%, color-mix(in srgb, var(--text) 90%, transparent) 74%, transparent 86% 100%); }
.st-holo--primary:hover,
.st-holo--primary:focus-visible { color: var(--on-accent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 70%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--bg-deep) 30%, transparent), 0 18px 44px -10px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 42px var(--st-glow-soft), 0 0 0 1px var(--accent); }
.st-holo--primary .st-holo__mark { filter: drop-shadow(0 1px 1px rgb(0 0 0 / .35)); }
.st-holo--primary:hover .st-holo__mark,
.st-holo--primary:focus-visible .st-holo__mark { filter: drop-shadow(0 1px 1px rgb(0 0 0 / .35)) brightness(1.1); }

.st-holo--quiet { color: var(--text-soft); background: linear-gradient(180deg, color-mix(in srgb, var(--text) 8%, transparent), color-mix(in srgb, var(--bg-deep) 50%, transparent)), color-mix(in srgb, var(--surface) 40%, transparent); }
.st-holo--sm { min-height: 44px; gap: 10px; padding: 0 18px; font-size: 11px; letter-spacing: .15em; }
.st-holo--sm .st-holo__mark { height: 18px; }
.st-holo[aria-pressed="false"] { color: var(--text-muted); }

/* Runder Knopf mit Lichtring. */
.st-round {
  --st-mx: 50%;
  --st-my: 50%;
  position: relative;
  isolation: isolate;
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--text);
  background:
    radial-gradient(circle at var(--st-mx) var(--st-my), color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--text) 12%, transparent), color-mix(in srgb, var(--bg-deep) 50%, transparent)),
    var(--st-glass-fill);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 28%, transparent), 0 10px 24px -10px rgb(0 0 0 / .8);
  cursor: pointer;
  -webkit-backdrop-filter: blur(var(--blur-sm));
  backdrop-filter: blur(var(--blur-sm));
  transition: color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-slow) var(--ease-out);
}
.st-round::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--st-beam), color-mix(in srgb, var(--text) 18%, transparent) 0 50%, var(--accent) 66%, var(--accent-tint) 72%, color-mix(in srgb, var(--text) 18%, transparent) 86% 100%);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
  animation: st-beam 4s linear infinite paused;
  pointer-events: none;
}
.st-round:hover,
.st-round:focus-visible { color: var(--accent-text); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 34%, transparent), 0 0 22px var(--st-glow-soft); transform: translateY(-1px); }
.st-round:hover::before,
.st-round:focus-visible::before { animation-play-state: running; }
.st-round[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }
.st-round .ds-icon { width: 18px; height: 18px; }

/* Magnetischer Knopf: Die Bedienfläche bleibt stehen, nur der Inhalt folgt dem Zeiger. */
.st-magnet__inner { display: inline-flex; align-items: center; justify-content: center; gap: inherit; width: 100%; pointer-events: none; }

.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* ---------- Kopfzeile ---------- */

.st-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--st-bar);
  padding: 18px var(--gutter);
  background: linear-gradient(var(--nav-shade), transparent);
  pointer-events: none;
  transition: transform var(--duration-slow) var(--ease-out);
}
.st-bar > * { pointer-events: auto; }
.st-bar.is-away:not(:focus-within) { transform: translateY(-110%); }
.st-bar__brand { display: inline-flex; align-items: center; flex-shrink: 0; min-width: 44px; min-height: var(--target-min); }
.st-bar__brand picture { display: flex; align-items: center; }
.st-bar__brand img { width: auto; height: 38px; filter: drop-shadow(0 2px 14px rgb(0 0 0 / .7)); }

.st-index { display: flex; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.st-index__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-bottom: 1px solid transparent;
  color: var(--text);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 12px rgb(0 0 0 / .8);
  transition: color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.st-index__no { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--text-muted); }
.st-index__link:hover { color: var(--accent-text); border-bottom-color: var(--accent-line); }
.st-index__link[aria-current="true"] { color: var(--accent-text); border-bottom-color: var(--accent-text); }
.st-index__link[aria-current="true"] .st-index__no { color: var(--accent-text); }

.st-bar__tools { display: flex; align-items: center; gap: var(--space-2); }

/* Sprachwahl: klein neben dem Menü. Die aktive Sprache leuchtet, die andere führt zur selben Stelle der anderen Fassung. */
.st-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--st-glass-fill);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 22%, transparent), inset 0 0 0 1px var(--st-glass-rim), 0 14px 34px -12px rgb(0 0 0 / .8);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.5);
  backdrop-filter: blur(var(--blur-md)) saturate(1.5);
}
.st-lang__item {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.st-lang__item:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.st-lang__item img { width: 26px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / .22); }
.st-lang__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.st-lang__item[aria-current="page"] { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 15%, transparent); box-shadow: inset 0 0 0 1px var(--accent-line); }

/* ---------- Szenenleiste: eine Leitung, ein Knoten je Szene ---------- */

.st-rail {
  --st-progress: 0;
  position: fixed;
  top: 50%;
  right: clamp(8px, 1.2vw, 22px);
  z-index: 55;
  transform: translateY(-50%);
  transition: opacity var(--duration-slow) var(--ease-standard);
}
.st-rail.is-home { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity var(--duration-slow) var(--ease-standard), visibility 0s var(--duration-slow); }
.st-rail ol { position: relative; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.st-rail__wire {
  position: absolute;
  top: 22px;
  bottom: 22px;
  right: 21px;
  width: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
  overflow: hidden;
}
.st-rail__beam {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--accent-tint), var(--accent));
  box-shadow: 0 0 10px var(--accent);
  transform: scaleY(var(--st-progress));
  transform-origin: 50% 0;
  transition: transform var(--duration-scene) var(--ease-out);
}
.st-rail a {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
  min-height: var(--target-min);
  color: var(--text);
  text-decoration: none;
}
.st-rail__node {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--surface-raised) 90%, transparent), color-mix(in srgb, var(--bg-deep) 92%, transparent));
  box-shadow: inset 0 1px 0 var(--st-glass-shine), inset 0 0 0 1px var(--st-glass-rim);
  transition: box-shadow var(--duration-slow) var(--ease-standard);
}
.st-rail__node img { width: auto; height: 17px; opacity: .38; transition: opacity var(--duration-slow) var(--ease-standard), filter var(--duration-slow) var(--ease-standard); }
.st-rail__label {
  padding: 5px 11px;
  border-radius: var(--radius-full);
  background: var(--surface-glass);
  box-shadow: inset 0 0 0 1px var(--st-glass-rim);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.st-rail a:hover .st-rail__label,
.st-rail a:focus-visible .st-rail__label { opacity: 1; transform: none; }
.st-rail a:hover .st-rail__node img,
.st-rail a:focus-visible .st-rail__node img { opacity: .8; }
.st-rail a[aria-current="true"] .st-rail__node { box-shadow: inset 0 1px 0 var(--st-glass-shine), 0 0 0 1px var(--accent-line), 0 0 18px var(--st-glow-soft); }
.st-rail a[aria-current="true"] .st-rail__node img { opacity: 1; filter: drop-shadow(0 0 5px var(--accent)); }

/* ---------- Szenen ---------- */

.st-scene {
  position: relative;
  min-height: 100svh;
  background: var(--bg-deep);
  isolation: isolate;
  scroll-margin-top: 0;
}
.st-scene__body {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: clip;
  isolation: isolate;
  background: var(--bg-deep);
  transform-origin: 50% 0;
}
.st-scene__veil {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: var(--bg-deep);
  opacity: 0;
  pointer-events: none;
}

/* Gestapelte Szenen: Die nächste Szene schiebt sich über die stehende vorherige. */
.st-stack .st-scene { position: sticky; top: min(0px, calc(100dvh - var(--st-h, 100dvh))); }
.st-stack .st-scene + .st-scene { box-shadow: 0 -34px 90px rgb(0 0 0 / .7); }
.st-stack .st-scene + .st-scene::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 41;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line) 30% 70%, transparent);
}
.st-stack .st-scene.is-covered { visibility: hidden; }

.st-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg-deep); }
.st-backdrop img { width: 100%; height: 100%; object-fit: cover; }
.st-backdrop::after { content: ""; position: absolute; inset: 0; }

/* Auftritt der Inhalte: sichtbar ohne Skript, im bewegten Modus bis zum Aufruf zurückgehalten. */
.st-motion .st-scene:not(.is-live) [data-rise] { opacity: 0; transform: translateY(18px); }
.st-motion .st-scene:not(.is-live) [data-split] { opacity: 0; }

/* ---------- Leitungen ---------- */

.st-wires { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.st-wire__halo { fill: none; stroke: color-mix(in srgb, var(--accent) 16%, transparent); stroke-width: 6; stroke-linecap: round; }
.st-wire__base { fill: none; stroke: var(--st-wire); stroke-width: 1.5; stroke-linecap: round; transition: stroke var(--duration-slow) var(--ease-standard), stroke-width var(--duration-slow) var(--ease-standard); }
.st-wire__pulse { fill: none; stroke: var(--accent-tint); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 34; opacity: 0; }
.st-wire__plug { fill: var(--bg-deep); stroke: var(--accent); stroke-width: 1.5; }
.st-wire__plug--end { fill: var(--accent); stroke: color-mix(in srgb, var(--accent-tint) 80%, transparent); }
.st-wire.is-hot .st-wire__base { stroke: var(--accent); stroke-width: 2; }
.st-wire.is-hot .st-wire__halo { stroke: color-mix(in srgb, var(--accent) 30%, transparent); }
.st-motion .st-wire__pulse { opacity: .95; animation: st-flow 2.6s linear infinite; }
.st-motion .st-wire.is-hot .st-wire__pulse { animation-duration: 1.1s; }
.st-scene.is-covered .st-wire__pulse { animation-play-state: paused; }
@keyframes st-flow { to { stroke-dashoffset: -72; } }

/* ---------- 01 Ankunft ---------- */

.st-arrival .st-scene__body { height: 100svh; min-height: 560px; }

.st-look {
  --plane-h: 100svh;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  outline: 0;
}
.st-look::-webkit-scrollbar { display: none; }
/* Berührung: waagerecht führt das Skript (Wischen der Etage), senkrecht scrollt die Seite. */
@media (pointer: coarse) {
  .st-arrival .st-look { touch-action: pan-y; }
}
.st-arrival .st-look { --plane-h: max(100svh, 560px); }

.st-plane {
  position: relative;
  flex: none;
  width: max(100vw, calc(var(--plane-h) * var(--st-plane-ratio)));
  aspect-ratio: var(--st-plane-ratio);
}
img.st-plane__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Gekrümmte Etage: dieselben Bilder, auf eine Rundung gelegt. Die flache Etage bleibt der Rückweg. */
/* Das flache Foto bleibt darunter sichtbar, bis die Rundung gezeichnet ist: Es ist der erste große Inhalt der Seite. */
.st-pano { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: 0; touch-action: pan-y; }
.st-arrival.is-pano .st-pano { opacity: 1; }
.st-arrival.is-pano .st-ticker,
.st-arrival.is-pano .st-spill { display: none; }
/* In der Rundung ist die flache Etage nur noch Bild: kein eigener Scrollbereich ohne Inhalt. */
.st-arrival.is-pano .st-look { overflow: hidden; }
.st-nodes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.st-nodes .st-spots li { left: 0; top: 0; will-change: transform; }

.st-zones { position: absolute; inset: 0; pointer-events: none; }
.st-zone {
  position: absolute;
  background: var(--bg-deep);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
}
.st-plane[data-zone] .st-zone { opacity: .62; }
.st-plane[data-zone="studio"] .st-zone[data-zone="studio"],
.st-plane[data-zone="lounge"] .st-zone[data-zone="lounge"],
.st-plane[data-zone="workspace"] .st-zone[data-zone="workspace"] { opacity: 0; }
.st-motion .st-arrival:not(.is-lit) .st-zone { opacity: .86; transition: none; }
.st-arrival.is-intro .st-zone { transition: none; }

.st-ticker {
  position: absolute;
  left: var(--st-glass-left);
  top: var(--st-ticker-top);
  width: var(--st-glass-width);
  height: var(--st-ticker-height);
  overflow: hidden;
  container-type: size;
  pointer-events: none;
  transition: opacity var(--duration-scene) var(--ease-standard);
}
.st-ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  animation: st-ticker 80s linear infinite;
  animation-play-state: paused;
}
.st-ticker p {
  display: flex;
  margin: 0;
  font-family: var(--font-display);
  font-size: 52cqh;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent-tint);
  text-shadow: 0 0 .06em var(--accent), 0 0 .3em color-mix(in srgb, var(--accent) 70%, transparent);
  opacity: .7;
}
.st-ticker span::after { content: "◆"; display: inline-block; margin: 0 1.1em; font-size: .38em; vertical-align: .55em; opacity: .85; }
.st-motion .st-arrival.is-live:not(.is-covered) .st-ticker__track { animation-play-state: running; }
.st-motion .st-arrival:not(.is-lit) .st-ticker { opacity: 0; }
@keyframes st-ticker { to { transform: translateX(-50%); } }

img.st-sign {
  position: absolute;
  left: var(--st-band-left);
  top: var(--st-band-top);
  width: var(--st-band-width);
  height: var(--st-band-height);
  max-width: none;
  opacity: 0;
  pointer-events: none;
}
.st-motion .st-arrival:not(.is-lit) .st-sign { opacity: 1; }

.st-spill { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 1; }
.st-spill::before,
.st-spill::after { content: ""; position: absolute; border-radius: 50%; }
.st-spill::before {
  left: calc(var(--st-sign-x) - var(--st-sign-width) * .95);
  top: calc(var(--st-sign-y) - var(--st-sign-width) * .55);
  width: calc(var(--st-sign-width) * 1.9);
  aspect-ratio: 2 / 1.1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 24%, transparent), transparent);
  animation: st-breathe 6s var(--ease-in-out) infinite;
}
.st-spill::after {
  left: calc(var(--st-sign-x) - var(--st-sign-width) * 1.3);
  top: calc(var(--st-floor-top) - 6%);
  width: calc(var(--st-sign-width) * 2.6);
  height: calc(106% - var(--st-floor-top));
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  animation: st-breathe 6s var(--ease-in-out) -2s infinite;
}
.st-motion .st-arrival:not(.is-lit) .st-spill { opacity: 0; }
html:not(.st-motion) .st-spill::before,
html:not(.st-motion) .st-spill::after { animation: none; }
@keyframes st-breathe { 50% { opacity: .62; } }

/* Knoten: das Symbol der Marke auf dem Glas jedes Raums. */
.st-spots { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.st-spots li { position: absolute; width: 0; height: 0; scroll-snap-align: center; }
.st-node {
  --st-node-lift: 0px;
  translate: 0 var(--st-node-lift);
  position: absolute;
  left: -27px;
  top: -27px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  color: var(--text);
  text-decoration: none;
  pointer-events: auto;
}
.st-node--left,
.st-node[data-spot="lounge"] { left: auto; right: -27px; flex-direction: row-reverse; text-align: right; }
.st-node__core {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--text) 16%, transparent), transparent 60%),
    radial-gradient(circle, color-mix(in srgb, var(--surface-raised) 86%, transparent), color-mix(in srgb, var(--bg-deep) 90%, transparent));
  box-shadow: inset 0 1px 0 var(--st-glass-shine), inset 0 0 0 1px var(--st-glass-rim), 0 10px 26px rgb(0 0 0 / .6), 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-sm));
  backdrop-filter: blur(var(--blur-sm));
  transition: box-shadow var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-out);
}
.st-node__core img { position: relative; width: auto; height: 24px; filter: drop-shadow(0 0 4px var(--st-glow-soft)); transition: filter var(--duration-slow) var(--ease-standard); }
.st-node__ring {
  position: absolute;
  inset: -5px;
  padding: 1.5px;
  border-radius: 50%;
  background: conic-gradient(from var(--st-beam), transparent 0 40%, var(--accent) 62%, var(--accent-tint) 68%, transparent 84% 100%);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
  opacity: .7;
  animation: st-beam 5.5s linear infinite paused;
}
.st-node__core::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
}
.st-motion .st-arrival.is-lit:not(.is-covered) .st-node__ring { animation-play-state: running; }
.st-motion .st-arrival.is-lit:not(.is-covered) .st-node__core::after { animation: st-ping 3.4s var(--ease-out) infinite; }
.st-spots li:nth-child(2) .st-node__core::after { animation-delay: 1.1s; }
.st-spots li:nth-child(3) .st-node__core::after { animation-delay: 2.2s; }
@keyframes st-ping { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.9); } }
.st-node__label {
  display: grid;
  gap: 2px;
  padding: 9px 16px 9px 14px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 80%, transparent), color-mix(in srgb, var(--bg-deep) 82%, transparent));
  box-shadow: inset 0 1px 0 var(--st-glass-shine), inset 0 0 0 1px var(--st-glass-rim), 0 12px 28px rgb(0 0 0 / .55);
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.st-node__label strong { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.st-node__label small { color: var(--text-soft); font-size: 12px; white-space: nowrap; }
.st-node:hover .st-node__core,
.st-node:focus-visible .st-node__core,
.st-node.is-hot .st-node__core { transform: scale(1.08); box-shadow: inset 0 1px 0 var(--st-glass-shine), 0 0 0 1px var(--accent), 0 0 30px var(--st-glow-soft), 0 0 70px color-mix(in srgb, var(--accent) 22%, transparent); }
.st-node:hover .st-node__core img,
.st-node:focus-visible .st-node__core img,
.st-node.is-hot .st-node__core img { filter: brightness(1.2) drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 14px var(--st-glow-soft)); }
.st-node:hover .st-node__ring,
.st-node:focus-visible .st-node__ring,
.st-node.is-hot .st-node__ring { opacity: 1; animation-play-state: running; animation-duration: 2.2s; }
.st-node:hover .st-node__label,
.st-node:focus-visible .st-node__label,
.st-node.is-hot .st-node__label { box-shadow: inset 0 1px 0 var(--st-glass-shine), inset 0 0 0 1px var(--accent-line), 0 12px 28px rgb(0 0 0 / .55); }
.st-node:focus-visible { outline: 0; }
.st-node:focus-visible .st-node__core { outline: 2px solid var(--focus); outline-offset: 6px; }
.st-motion .st-arrival:not(.is-lit) .st-node { opacity: 0; }

.st-arrival__shade {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 46%;
  background: linear-gradient(transparent, color-mix(in srgb, var(--bg-deep) 50%, transparent) 38%, color-mix(in srgb, var(--bg-deep) 88%, transparent) 74%, var(--bg-deep));
  pointer-events: none;
}
.st-arrival .st-scene__body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 26%;
  background: linear-gradient(color-mix(in srgb, var(--bg-deep) 62%, transparent), transparent);
  pointer-events: none;
}
.st-arrival__copy {
  position: absolute;
  inset: auto auto calc(var(--st-edge) + 22px) var(--gutter);
  z-index: 4;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  max-width: min(760px, 58vw);
  pointer-events: none;
}
.st-arrival__copy > * { pointer-events: auto; }
.st-arrival__title { display: grid; gap: var(--space-2); justify-items: start; margin: 0; text-shadow: 0 2px 30px rgb(0 0 0 / .6); }
.st-arrival__lead { max-width: 48ch; margin: 0; font-size: 17px; text-shadow: 0 1px 16px rgb(0 0 0 / .8); }
/* Die 10-px-Etagenzeile steht wie Titel und Lead auf dem Raumbild; ohne Schatten an hellen Stellen
   unter 4,5:1 (Barrierefreiheitsprüfung 03.10.2026, WCAG 1.4.3). */
.st-arrival__copy .ds-eyebrow { text-shadow: 0 1px 2px rgb(0 0 0 / .95), 0 0 12px rgb(0 0 0 / .85); }
.st-arrival__copy .st-actions { margin-top: var(--space-2); }

/* Konsole der Etage: die Räume als Liste, mit den Knoten verbunden. */
.st-console {
  position: absolute;
  top: calc(var(--st-bar) + 14px);
  right: calc(var(--gutter) + 8px);
  z-index: 4;
  width: min(330px, 30vw);
  padding: 14px 10px 10px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel-start), var(--panel-end));
  box-shadow: inset 0 1px 0 var(--st-glass-shine), inset 0 0 0 1px var(--st-glass-rim), 0 26px 60px -18px rgb(0 0 0 / .8);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.3);
  backdrop-filter: blur(var(--blur-lg)) saturate(1.3);
}
.st-console__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 8px 8px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.st-console__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.st-motion .st-arrival.is-lit:not(.is-covered) .st-console__dot { animation: st-blink 2.8s var(--ease-in-out) infinite; }
@keyframes st-blink { 50% { opacity: .35; } }
.st-console ol { position: relative; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
/* Sammelleitung links der Einträge. */
.st-console ol::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 22px;
  width: 1px;
  background: linear-gradient(var(--accent-line), color-mix(in srgb, var(--accent) 12%, transparent));
}
.st-console__item {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 7px 10px 7px 8px;
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard);
}
.st-console__no {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 11px;
}
.st-console__text { display: grid; gap: 1px; min-width: 0; }
.st-console__text strong { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.st-console__text small { overflow: hidden; color: var(--text-soft); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.st-console__item:hover,
.st-console__item:focus-visible,
.st-console__item.is-hot { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.st-console__item:hover .st-console__no,
.st-console__item:focus-visible .st-console__no,
.st-console__item.is-hot .st-console__no { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 14px var(--st-glow-soft); }
.st-console__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.st-look__keys {
  position: absolute;
  inset: calc(var(--st-bar) + 14px) auto auto var(--gutter);
  z-index: 5;
  display: flex;
  gap: var(--space-2);
}
.st-look__keys[hidden] { display: none; }
@media (pointer: fine) {
  .st-motion .st-look__keys { display: none; }
}

/* Wischhinweis auf Berührungsgeräten: erscheint mit dem Licht und geht beim ersten Wischen oder Pfeil. */
.st-swipe {
  position: absolute;
  top: calc(var(--st-bar) + 14px);
  left: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-deep) 72%, transparent);
  box-shadow: inset 0 0 0 1px var(--st-glass-rim);
  -webkit-backdrop-filter: blur(var(--blur-lg));
  backdrop-filter: blur(var(--blur-lg));
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity var(--duration-slow) var(--ease-standard);
}
.st-swipe .ds-icon { width: 18px; height: 18px; color: var(--accent-text); }
.st-swipe.is-gone { opacity: 0; }
.st-motion .st-swipe:not(.is-gone) .ds-icon { animation: st-sway 1.8s var(--ease-in-out) infinite; }
@keyframes st-sway { 50% { transform: translateX(4px); } }
.st-look__keys .st-round[disabled] { opacity: .35; }

.st-hint {
  position: absolute;
  left: 50%;
  bottom: 4px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--target-min);
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateX(-50%);
  transition: color var(--duration-base) var(--ease-standard);
}
.st-hint:hover { color: var(--accent-text); }
.st-motion .st-arrival.is-live .st-hint .ds-icon { animation: st-nudge 2.4s var(--ease-in-out) infinite; }
@keyframes st-nudge { 50% { transform: translateY(4px); } }

/* FLUFFY: permanently compact, with no expandable greeting. */
.st-greeter {
  position: absolute;
  right: clamp(80px, 7vw, 160px);
  bottom: 24px;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  height: clamp(400px, 60svh, 690px);
  pointer-events: none;
}
.st .st-greeter[hidden] { display: flex !important; visibility: hidden; }
/* Bühne im Seitenverhältnis des Standbilds: FLUFFY links, die Holo-Box rechts. Die ganze Bühne ist ein Knopf. */
.st-greeter__stage {
  position: relative;
  flex: none;
  height: 100%;
  aspect-ratio: 1224 / 1024;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: none;
  color: inherit;
  cursor: pointer;
  pointer-events: none;
  transition: filter 180ms var(--ease-out);
}
.st-greeter__still, .st-greeter__canvas, .st-holobox__art, .st-holobox__projector { pointer-events: none; }
.st-greeter__figure-action, .st-holobox__action { position: absolute; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; pointer-events: auto; z-index: 3; }
.st-greeter__figure-action { left: 9%; bottom: 2%; width: 43%; height: 68%; border-radius: 45%; }
.st-holobox__action { inset: auto 8% 27%; width: auto; height: auto; aspect-ratio: 1; border-radius: 5px; }
.st-greeter__figure-action:focus-visible, .st-holobox__action:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.st-greeter__stage::after {
  content: "";
  position: absolute;
  inset: 30% 10% 0 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  filter: blur(20px);
}
.st-greeter__stage:focus-visible { outline: 2px solid var(--focus); outline-offset: -8px; }
img.st-greeter__still { position: absolute; z-index: 1; display: block; max-width: none; object-fit: contain; filter: drop-shadow(-24px 30px 40px rgb(0 0 0 / .65)); transition: opacity var(--duration-slow) var(--ease-standard); }
/* Lage und Größe setzt fluffy.js aus data-box (dieselbe Fläche wie das Standbild). */
.st-greeter__canvas { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity var(--duration-slow) var(--ease-standard); }
.st-greeter[data-mode="wide"] .st-greeter__canvas { filter: drop-shadow(-24px 30px 40px rgb(0 0 0 / .65)); }
.st-greeter.is-live-figure img.st-greeter__still { opacity: 0; }
.st-greeter.is-live-figure .st-greeter__canvas { opacity: 1; }

/* The hand holds the lower scene edge. The hologram keeps its separate space. */
.st-greeter__figure { position: absolute; inset: 0; pointer-events: none; }
.st-greeter[data-figure-mode="edge"] { bottom: 0; }
.st-greeter[data-figure-mode="edge"] .st-greeter__figure { inset: auto auto -4.4% -7%; width: 60%; aspect-ratio: 1; }
.st-greeter[data-figure-mode="edge"] .st-greeter__still,
.st-greeter[data-figure-mode="edge"] .st-greeter__canvas { inset: 0; width: 100%; height: 100%; }
.st-greeter[data-figure-mode="edge"] .st-greeter__figure-action { left: 25%; top: 34%; width: 43%; height: 55%; bottom: auto; }
.st-greeter[data-figure-mode="edge"] ~ .st-hint { left: var(--gutter); transform: none; }

/* Physischer Projektor als freigestelltes PNG/WebP, darüber das aktuelle Artwork als lebende Projektion. */
.st-holobox {
  position: absolute;
  left: 53%;
  bottom: 0;
  width: 47%;
  height: 96%;
  perspective: 900px;
  pointer-events: none;
}
.st-holobox__stage {
  --rx: 0deg;
  --ry: 0deg;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 700ms var(--ease-out);
}
.st-holobox__projector {
  position: absolute;
  left: -6%;
  bottom: -13%;
  width: 112%;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 14px 16px rgb(0 0 0 / .8));
  transform: translateZ(0);
}
.st-holobox__emitter {
  position: absolute;
  left: 11%;
  right: 11%;
  bottom: 7%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 16%, transparent) 45%, var(--accent) 65%, transparent 75%);
  box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 40%, transparent);
  mix-blend-mode: screen;
  filter: blur(2px);
  transform: translateZ(2px);
}
.st-holobox__beam {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 12%;
  height: 71%;
  /* Light fades on every edge instead of ending at a cut polygon. */
  background: conic-gradient(from -28deg at 50% 100%, transparent,
    color-mix(in srgb, var(--accent) 12%, transparent) 8deg,
    color-mix(in srgb, var(--accent) 32%, transparent) 28deg,
    color-mix(in srgb, var(--accent) 12%, transparent) 48deg, transparent 56deg);
  -webkit-mask-image: linear-gradient(0deg, transparent, black 8% 35%, transparent 96%);
  mask-image: linear-gradient(0deg, transparent, black 8% 35%, transparent 96%);
  filter: blur(3px);
  opacity: .58;
  transform: translateZ(10px);
}
.st-holobox__art {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 27%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 5px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 75%, transparent),
    0 0 30px color-mix(in srgb, var(--accent) 32%, transparent),
    0 32px 60px -24px rgb(0 0 0 / .9);
  transform: translateZ(35px) rotateY(-9deg) rotateX(3deg);
}
.st-holobox__art img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.st-holobox__caption { position: absolute; left: 0; right: 0; bottom: 14%; display: grid; gap: 4px; text-align: center; font-size: clamp(10px, .85vw, 14px); line-height: 1.3; text-shadow: 0 2px 6px rgb(0 0 0), 0 0 16px var(--accent); transform: translateZ(24px); }
.st-holobox__caption strong, .st-holobox__caption span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-holobox__caption strong { color: var(--text); font-size: 1.3em; }
.st-holobox__caption > span { color: var(--text-soft); }
.st-holobox__foil {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 22%, color-mix(in srgb, var(--accent) 55%, transparent) 40%, color-mix(in srgb, var(--text) 45%, transparent) 50%, color-mix(in srgb, var(--accent) 40%, transparent) 60%, transparent 76%);
  background-size: 280% 280%;
  background-position: 120% 0;
  mix-blend-mode: color-dodge;
  opacity: .24;
}
.st-holobox__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 10%, transparent) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  opacity: .45;
}
.st-motion .st-holobox__art { animation: st-holo-float 5.5s var(--ease-in-out) infinite; }
.st-motion .st-holobox__foil { animation: st-holo-sweep 6s linear infinite; }
.st-motion .st-holobox__scan { animation: st-holo-scan 3s linear infinite; }
.st-motion .st-holobox__beam { animation: st-holo-beam 4.5s var(--ease-in-out) infinite; }
@keyframes st-holo-float { 50% { translate: 0 -2.5%; } }
@keyframes st-holo-sweep { to { background-position: -120% 0; } }
@keyframes st-holo-scan { to { background-position: 0 32px; } }
@keyframes st-holo-beam { 50% { opacity: .8; } }
/* Compact touch layout; the figure stays visible in landscape as well. */
.st-greeter[data-mode="compact"] { right: var(--gutter); bottom: calc(var(--st-edge) + 24px); height: clamp(280px, 48svh, 500px); }
.st-greeter[data-mode="compact"][data-figure-mode="edge"] { bottom: 0; }

/* Keep the room controls above the foreground figures, with no invisible stage hit area. */
@media (min-aspect-ratio: 4 / 5) and (min-height: 641px) {
  .st-node[data-spot="lounge"] { --st-node-lift: -84px; }
  .st-console { padding: 10px; }
  .st-console__item { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
}

/* Small utility control: a quiet icon and state, with a usable touch target. */
.st-motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--text-soft);
  font: 500 10px/1 var(--font-sans);
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-standard);
}
.st-motion-toggle .ds-icon { width: 15px; height: 15px; }
.st-motion-toggle:hover { color: var(--text); }
.st-motion-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- 02 Releases ---------- */

.st-releases .st-backdrop img { filter: brightness(.7) saturate(.95); }
.st-releases .st-backdrop::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg-deep) 90%, transparent), color-mix(in srgb, var(--bg-deep) 42%, transparent) 46%, color-mix(in srgb, var(--bg-deep) 30%, transparent)),
    linear-gradient(color-mix(in srgb, var(--bg-deep) 70%, transparent), transparent 22% 62%, var(--bg-deep));
}

.st-releases__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.6fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "head stats" "now orbit" "tools orbit" "artists artists";
  gap: var(--space-6) var(--space-10);
  min-height: 100svh;
  padding: calc(var(--st-bar) + clamp(12px, 4svh, 48px)) calc(var(--gutter) + 56px) var(--st-edge) var(--gutter);
}
.st-releases__head { grid-area: head; }
.st-artists { grid-area: artists; display: flex; align-items: center; gap: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.st-artists__label { flex: none; margin: 0; font: 10px/1.6 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.st-artists__label span { display: block; color: var(--text-muted); letter-spacing: .02em; text-transform: none; }
.st-artists__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.st-artist-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgb(8 13 12 / .72); color: var(--text); text-decoration: none; font-size: 12px; font-weight: 600; transition: border-color 160ms ease, background 160ms ease; }
.st-artist-link img { flex: none; width: 32px; height: 32px; object-fit: contain; }
.st-artist-link__arrow { margin-left: 4px; color: var(--text-muted); }
.st-artist-link:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-deep)); }
.st-artist-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.st-artist-link:active { transform: scale(.98); }
.st-profile-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.st-profile-links[hidden] { display: none; }
.st-artist-link--small { min-height: 44px; font-size: 11px; }
.st-artist-link--small img { width: 24px; height: 24px; }
/* Katalogzahlen im Glasrahmen wie Konsole und Detail: breit oben rechts über der Galerie, wo die Hüllen nie
   hinreichen; gestapelt unter der Detailkarte, damit Überschrift, Galerie und Detail auf dem ersten Bildschirm
   bleiben. Zahl über Beschriftung, getrennt durch feine Linien; darunter der Zugang zur Best-of-Playlist. */
.st-stats {
  grid-area: stats;
  align-self: start;
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-4);
}
.st-stats__title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.st-stats__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.st-motion .st-releases.is-live:not(.is-covered) .st-stats__dot { animation: st-blink 2.8s var(--ease-in-out) infinite; }
.st-stats__list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) 0; margin: 0; }
.st-stats__item { display: flex; flex-direction: column-reverse; gap: 6px; padding: 0 var(--space-5); border-left: 1px solid var(--line); }
.st-stats__item:first-child { padding-left: 0; border-left: 0; }
.st-stats__item:last-child { padding-right: 0; }
.st-stats__item dt { color: var(--text-muted); }
.st-stats__item dd { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 2.6vw, 44px); font-weight: 700; line-height: .9; letter-spacing: .01em; color: var(--text); font-variant-numeric: tabular-nums; }
.st-stats__unit { color: var(--accent); }
.st-stats__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.st-stats__note { margin: 0; max-width: 34ch; font-size: 12px; line-height: 1.5; letter-spacing: .03em; color: var(--text-muted); }
/* Zugang zur Best-of-Playlist: Spotify-Zeichen, Beschriftung, Pfeil. */
.st-playlist { gap: 10px; }
.st-playlist__icon { width: 18px; height: 18px; flex: none; }
.st-release__playlist { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.st-now { grid-area: now; align-self: end; display: grid; gap: var(--space-2); max-width: 440px; padding: var(--space-6); }
.st-now h3 { margin-top: 2px; }
.st-now__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
img.st-now__mark { width: auto; height: 52px; filter: drop-shadow(0 0 12px var(--st-glow-soft)); }
.st-releases__tools { grid-area: tools; display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.st-list { grid-area: orbit; align-self: center; max-height: calc(100svh - var(--st-bar) - 2 * var(--st-edge)); overflow-y: auto; padding: 4px; }
.st-list[hidden] { display: none; }
.st-list .ds-release-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-list .ds-release__title { font-size: 20px; }
.st-list .ds-release__artist { font-size: 13px; }

.st-orbit { grid-area: orbit; display: grid; grid-template-rows: minmax(0, 1fr) auto; align-self: stretch; min-width: 0; }
.st-orbit[hidden] { display: none; }
.st-orbit__stage {
  --card: clamp(170px, 25svh, 310px);
  --radius: calc(var(--card) * 1.2);
  position: relative;
  min-height: calc(var(--card) * 1.5);
  perspective: 1700px;
  perspective-origin: 50% 42%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  outline-offset: -2px;
}
.st-orbit__stage.is-dragging { cursor: grabbing; }
.st-orbit__ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--radius) * -1)) rotateX(-6deg) rotateY(calc(var(--turn, 0) * 1deg));
}
.st-orbit__card {
  position: absolute;
  left: calc(50% - var(--card) / 2);
  top: calc(50% - var(--card) / 2);
  width: var(--card);
  height: var(--card);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * var(--step, 60deg))) translateZ(var(--radius)) rotateY(var(--face, 0deg));
}
.st-orbit__stage.is-dragging .st-orbit__card { cursor: grabbing; }
.st-sleeve {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 26px 60px rgb(0 0 0 / .7);
  transition: box-shadow var(--duration-slow) var(--ease-standard);
}
.st-sleeve img { width: 100%; height: 100%; border-radius: inherit; object-fit: contain; pointer-events: none; }
.st-orbit__card .st-sleeve { filter: brightness(var(--lit, 1)) saturate(calc(.7 + var(--lit, 1) * .3)); }
.st-orbit__card[data-active] .st-sleeve { box-shadow: 0 0 0 1px var(--accent-line), 0 26px 60px rgb(0 0 0 / .7), 0 0 40px var(--st-glow-soft); }
.st-orbit__card:focus-visible { outline: 0; }
.st-orbit__card:focus-visible .st-sleeve { outline: 2px solid var(--focus); outline-offset: 4px; }
/* Anschluss der Leitung an der vorderen Hülle. */
.st-orbit__anchor { position: absolute; left: calc(50% - var(--card) / 2); top: 50%; width: 0; height: 0; }
.st-orbit__floor {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: min(86%, calc(var(--card) * 3.4));
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 20%, transparent), transparent);
  filter: blur(6px);
  transform: translateX(-50%);
  pointer-events: none;
}
.st-orbit__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-5); padding-top: var(--space-3); }
.st-orbit__count { margin: 0; min-width: 64px; color: var(--text-soft); font-family: var(--font-mono); font-size: 13px; text-align: center; }
.st-orbit__count span { color: var(--accent-text); }

/* Versiegelte Hüllen: gestalteter Leerzustand, solange kein Katalog vorliegt. */
.st-sleeve--sealed {
  --lx: 38%;
  --ly: 30%;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    repeating-linear-gradient(118deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 6px),
    linear-gradient(145deg, var(--surface-raised), var(--bg) 58%, var(--bg-deep));
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 26px 60px rgb(0 0 0 / .7);
}
.st-sleeve--sealed::before {
  content: "";
  position: absolute;
  inset: 5%;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-xs);
  pointer-events: none;
}
.st-foil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at var(--lx) var(--ly), color-mix(in srgb, var(--accent-alt) 60%, transparent), transparent 42%),
    conic-gradient(from 90deg at var(--lx) var(--ly), var(--accent), transparent 18%, var(--accent-alt) 34%, transparent 52%, var(--accent-hover) 70%, transparent 86%, var(--accent));
  mix-blend-mode: screen;
  opacity: .34;
}
.st-sleeve--sealed img { position: absolute; left: 50%; top: 50%; width: auto; max-width: none; height: 46%; opacity: .94; transform: translate(-50%, -50%); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 70%, transparent)); }
.st-sleeve--sealed .ds-data { position: absolute; left: 9%; bottom: 8%; color: var(--accent-text); }
.st-orbit--sealed .st-orbit__card { cursor: inherit; }

.st-count { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.st-count__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.st-count__grid[hidden] { display: none; }
.st-count__grid div { display: grid; gap: 2px; padding: 10px 8px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-deep) 60%, transparent); box-shadow: inset 0 0 0 1px var(--st-glass-rim); text-align: center; }
.st-count__grid dd { margin: 0; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.st-count__grid dt { order: 2; }

/* ---------- 03 Das Label ---------- */

.st-label .st-scene__body {
  background:
    radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%),
    linear-gradient(130deg, var(--panel-start), var(--bg-deep) 70%);
}
.st-label__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(300px, .62fr) minmax(0, 1.38fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head ribbon" "chapters ribbon" "tools ribbon";
  gap: var(--space-8) var(--space-12);
  min-height: 100svh;
  padding: calc(var(--st-bar) + clamp(12px, 4svh, 48px)) calc(var(--gutter) + 56px) var(--st-edge) var(--gutter);
}
.st-label__head { grid-area: head; }
.st-label__grid > .st-ribbon { grid-area: ribbon; }
.st-chapters { grid-area: chapters; align-self: end; min-height: 250px; }
.st-label__tools { grid-area: tools; }
.st-chapter { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-6); outline-offset: 6px; }
.st-chapter[hidden] { display: none; }
.st-chapter__no { margin: 0; color: var(--accent-text); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; }
.st-chapter h3 { text-wrap: balance; }
.st-chapter .ds-body { margin: 0; }
.st-label__tools { display: flex; align-items: center; gap: var(--space-4); min-height: 48px; }
.st-label__tools [aria-pressed="true"] .st-icon-play,
.st-label__tools [aria-pressed="false"] .st-icon-pause { display: none; }
.st-progress { position: relative; flex: 1; max-width: 260px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--text) 16%, transparent); overflow: hidden; }
.st-progress span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent), var(--accent-tint)); box-shadow: 0 0 8px var(--accent); transform: scaleX(var(--progress, 0)); transform-origin: 0 50%; }

.st-ribbon { display: flex; gap: 8px; min-height: 360px; min-width: 0; }
.st-strip {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--st-glass-rim);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: flex-grow var(--duration-scene) var(--ease-out), box-shadow var(--duration-slow) var(--ease-standard);
}
.st-strip[aria-selected="true"] { flex-grow: 6; box-shadow: 0 0 0 1px var(--accent-line), 0 30px 70px -20px rgb(0 0 0 / .8), 0 0 40px color-mix(in srgb, var(--accent) 12%, transparent); cursor: default; }
.st-strip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: brightness(.42) saturate(.7);
  transition: filter var(--duration-scene) var(--ease-standard), transform var(--duration-scene) var(--ease-out);
}
.st-strip:hover img,
.st-strip:focus-visible img { filter: brightness(.62) saturate(.85); }
.st-strip[aria-selected="true"] img { filter: none; }
.st-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 52%, color-mix(in srgb, var(--bg-deep) 86%, transparent));
  pointer-events: none;
}
.st-strip:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.st-strip__label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  text-shadow: 0 1px 10px rgb(0 0 0 / .9);
}
.st-strip__no { color: var(--accent-text); font-family: var(--font-mono); font-size: 11px; }
.st-strip__label strong { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.st-strip[aria-selected="true"] .st-strip__label { left: 22px; bottom: 20px; writing-mode: horizontal-tb; transform: none; }
.st-strip[aria-selected="true"] .st-strip__label strong { font-size: 30px; }
/* Anschluss der Leitung am linken Rand des gewählten Streifens. */
.st-strip__plug { position: absolute; left: 0; top: 50%; width: 0; height: 0; }

/* ---------- 04 Schwesterlabel: der Aufzug ---------- */

.st-sister .st-scene__body { height: 100svh; min-height: 560px; }
.st-lift__view img { transform-origin: var(--st-lift-x) var(--st-lift-y); }
.st-sister .st-backdrop img { filter: brightness(.86); }
.st-sister .st-backdrop::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg-deep) 88%, transparent), color-mix(in srgb, var(--bg-deep) 30%, transparent) 46%, transparent 64%),
    linear-gradient(color-mix(in srgb, var(--bg-deep) 60%, transparent), transparent 24% 72%, var(--bg-deep));
}
.st-lift__anchor { position: absolute; left: var(--st-lift-x); top: var(--st-lift-y); width: 0; height: 0; }
/* Stockwerksanzeige über der Kabine. */
.st-lift__indicator {
  position: absolute;
  left: var(--st-lift-x);
  top: calc(var(--st-bar) + 6px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-deep) 88%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 24px color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-text);
  font-family: var(--font-mono);
  transform: translateX(-50%);
}
.st-lift__label { color: var(--text-muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.st-lift__digits { position: relative; display: inline-block; overflow: hidden; width: 2.2ch; height: 1.25em; font-size: 22px; line-height: 1.25; text-shadow: 0 0 10px var(--accent); }
.st-lift__digits span { position: absolute; inset: 0; text-align: center; }
.st-lift__digits [data-lift-next] { transform: translateY(100%); }
.st-lift__arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--accent);
  filter: drop-shadow(0 0 4px var(--accent));
  opacity: .35;
}
.st-sister[data-direction="up"] .st-lift__arrow { border-top: 0; border-bottom: 8px solid var(--accent); }
.st-sister.is-riding .st-lift__arrow { opacity: 1; animation: st-blink .5s steps(2) infinite; }

.st-sister__copy {
  position: absolute;
  inset: auto auto calc(var(--st-edge) + 26px) var(--gutter);
  z-index: 3;
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  max-width: min(620px, 100% - 2 * var(--gutter));
}
.st-sister__text { max-width: 46ch; margin: 0; }

.st-world {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--text);
  visibility: hidden;
}
.st-world.is-open { visibility: visible; }
/* Die zweite Etage lädt erst, wenn die Szene betreten wird. */
.st-js .st-world:not(.is-ready) { display: none; }
img.st-world__image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.st-world__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 90% at 0 100%, color-mix(in srgb, var(--bg-deep) 94%, transparent), color-mix(in srgb, var(--bg-deep) 60%, transparent) 46%, transparent 72%),
    linear-gradient(color-mix(in srgb, var(--bg-deep) 55%, transparent), transparent 26% 66%, var(--bg-deep));
}
.st-world__content {
  position: absolute;
  inset: auto auto calc(var(--st-edge) + 26px) var(--gutter);
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  max-width: min(660px, 100% - 2 * var(--gutter));
}
.st-world__content > p { margin: 0; }
.st-motion .st-world:not(.is-shown) .st-world__content { opacity: 0; transform: translateY(16px); }
.st-world__content { transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-out); }

/* Aufzugstüren: dunkles Glas, Lichtkante an der Fuge. */
.st-doors { position: absolute; inset: 0; z-index: 6; display: flex; pointer-events: none; visibility: hidden; }
.st-doors.is-active { visibility: visible; }
.st-doors__panel {
  position: relative;
  flex: 1 1 50%;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 3%, transparent) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), var(--bg-deep));
  box-shadow: inset 0 0 0 1px var(--st-glass-rim);
}
.st-doors__panel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: linear-gradient(transparent, var(--accent) 20% 80%, transparent);
  box-shadow: 0 0 18px var(--accent);
}
.st-doors__panel + .st-doors__panel::after { right: auto; left: 0; }

/* ---------- 05 Demos ---------- */

.st-demo .st-scene__body { background: var(--bg-deep); }
.st-light { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
img.st-light__poster,
.st-light__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
img.st-light__poster { object-fit: cover; opacity: .9; mix-blend-mode: screen; transition: opacity var(--duration-scene) var(--ease-standard); }
.st-light__canvas { touch-action: pan-y; opacity: 0; mix-blend-mode: screen; transition: opacity var(--duration-scene) var(--ease-standard); }
/* Der Raum steht unscharf hinter dem Licht: Tiefe ohne Konkurrenz zur Schrift. */
.st-light .st-backdrop { z-index: 0; }
.st-light .st-backdrop img { object-position: var(--fx, 50%) var(--fy, 50%); transform-origin: var(--fx, 50%) var(--fy, 50%); transform: scale(1.85); filter: blur(5px) brightness(.46) saturate(.85); }
.st-light.is-running .st-light__canvas { opacity: 1; }
.st-light.is-running .st-light__poster { opacity: 0; }
.st-light__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg-deep) 82%, transparent), transparent 62%),
    linear-gradient(color-mix(in srgb, var(--bg-deep) 66%, transparent), transparent 26% 66%, var(--bg-deep));
  pointer-events: none;
}
.st-demo__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "head call" "steps call" "panel call";
  gap: var(--space-6) var(--space-12);
  align-content: end;
  min-height: 100svh;
  padding: calc(var(--st-bar) + clamp(12px, 4svh, 48px)) calc(var(--gutter) + 56px) var(--st-edge) var(--gutter);
  pointer-events: none;
}
.st-demo__grid a,
.st-demo__grid button,
.st-demo__grid .st-glass { pointer-events: auto; }
.st-demo__head { grid-area: head; max-width: 640px; }
.st-demo__head .ds-body-lg { margin: 0; }
.st-steps { grid-area: steps; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.st-step { display: grid; align-content: start; gap: 6px; padding: 16px 18px 18px; }
.st-step__no {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 14px color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 11px;
}
.st-step strong { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.st-step > span:last-child { color: var(--text-soft); font-size: 14px; line-height: 1.45; }
.st-demo__call { grid-area: call; align-self: center; justify-self: center; }
.st-demo__panel { grid-area: panel; align-self: start; display: grid; gap: var(--space-4); max-width: 640px; padding: var(--space-6); }
.st-tags { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; margin: 0; padding: 0; list-style: none; }
.st-tags li { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow-wrap: anywhere; color: var(--text-soft); font-size: 13px; line-height: 1.5; }
.st-tags li::before { content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--st-genre-marker, var(--accent)); box-shadow: 0 0 8px var(--st-genre-marker, var(--accent)); }
.st-demo__contact { display: grid; gap: 2px; justify-items: start; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.st-demo__contact .ds-link { display: inline-flex; align-items: center; min-height: var(--target-min); }

/* Einreichen: eine leuchtende Scheibe mit dem Symbol der Marke. */
.st-submit {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: clamp(210px, 30svh, 290px);
  aspect-ratio: 1;
  padding: 18px;
  border-radius: 50%;
  color: var(--on-accent);
  text-decoration: none;
}
.st-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1.5px;
  border-radius: 50%;
  background: conic-gradient(from var(--st-beam), color-mix(in srgb, var(--accent) 20%, transparent) 0 40%, var(--accent) 60%, var(--accent-tint) 66%, color-mix(in srgb, var(--accent) 20%, transparent) 84% 100%);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
  animation: st-beam 7s linear infinite paused;
}
.st-motion .st-demo.is-live:not(.is-covered) .st-submit::before { animation-play-state: running; }
.st-submit::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 28%, transparent), transparent);
  filter: blur(10px);
  opacity: .8;
  transition: opacity var(--duration-slow) var(--ease-standard);
}
.st-submit__core {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at var(--st-mx, 50%) var(--st-my, 30%), color-mix(in srgb, var(--accent-tint) 70%, transparent), transparent 58%),
    radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--accent) 70%, var(--bg-deep)), var(--accent) 70%);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--text) 60%, transparent), inset 0 -6px 18px color-mix(in srgb, var(--bg-deep) 30%, transparent), 0 20px 50px -12px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: box-shadow var(--duration-slow) var(--ease-standard);
}
.st-submit__core img { width: auto; height: 38px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .35)); }
.st-submit__label { max-width: 11ch; font-family: var(--font-display); font-size: clamp(24px, 3.4svh, 32px); font-weight: 700; line-height: 1; letter-spacing: .03em; text-align: center; text-transform: uppercase; }
.st-submit__core .ds-icon { width: 20px; height: 20px; }
.st-submit:hover::after,
.st-submit:focus-visible::after { opacity: 1; }
.st-submit:hover .st-submit__core,
.st-submit:focus-visible .st-submit__core { box-shadow: inset 0 2px 0 color-mix(in srgb, var(--text) 70%, transparent), inset 0 -6px 18px color-mix(in srgb, var(--bg-deep) 30%, transparent), 0 0 70px var(--st-glow-soft); }
.st-submit:hover::before,
.st-submit:focus-visible::before { animation-play-state: running; animation-duration: 2.4s; }
.st-submit:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }

/* ---------- Fußzeile ---------- */

.st-footer { position: relative; z-index: 2; padding: var(--space-12) var(--gutter) var(--space-8); background: var(--bg-deep); }
.st-footer__glass {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-areas: "brand links tower" "socials socials tower" "legal legal legal";
  gap: var(--space-8) var(--space-10);
  padding: var(--space-10);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
    linear-gradient(180deg, var(--panel-start), var(--panel-end));
  box-shadow: inset 0 1px 0 var(--st-glass-shine), inset 0 0 0 1px var(--st-glass-rim);
}
.st-footer__brand { grid-area: brand; display: grid; gap: var(--space-4); align-content: start; }
.st-footer__brand img { width: auto; height: 42px; }
.st-footer__note { margin: 0; color: var(--accent-text); font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: .03em; }
.st-footer__links { grid-area: links; }
.st-footer__links ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.st-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--target-min);
  color: var(--text);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}
.st-link::before { content: ""; width: 14px; height: 1px; background: var(--accent-line); transition: width var(--duration-slow) var(--ease-out), background var(--duration-base) var(--ease-standard); }
.st-link:hover,
.st-link:focus-visible { color: var(--accent-text); }
.st-link:hover::before,
.st-link:focus-visible::before { width: 24px; background: var(--accent); }
.st-footer__tower { grid-area: tower; }
.st-divisions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.st-division {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border-radius: var(--radius-md);
  color: var(--text-soft);
  font-size: 11px;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.st-division__ring {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--surface-raised) 90%, transparent), var(--bg-deep));
  box-shadow: inset 0 1px 0 var(--st-glass-shine), inset 0 0 0 1px var(--st-glass-rim);
  transition: box-shadow var(--duration-slow) var(--ease-standard);
}
.st-division__ring img { width: auto; max-width: 30px; height: 26px; object-fit: contain; transition: filter var(--duration-slow) var(--ease-standard); }
.st-division:hover,
.st-division:focus-visible { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.st-division:hover .st-division__ring,
.st-division:focus-visible .st-division__ring,
.st-division[aria-current="page"] .st-division__ring { box-shadow: inset 0 1px 0 var(--st-glass-shine), 0 0 0 1px var(--accent-line), 0 0 18px var(--st-glow-soft); }
.st-division:hover .st-division__ring img,
.st-division:focus-visible .st-division__ring img { filter: brightness(1.15) drop-shadow(0 0 6px var(--st-glow-soft)); }
.st-division[aria-current="page"] { color: var(--accent-text); }
.st-socials { grid-area: socials; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.st-socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--text-soft);
  box-shadow: inset 0 0 0 1px var(--st-glass-rim);
  transition: color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.st-socials a:hover,
.st-socials a:focus-visible { color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 14px var(--st-glow-soft); }
.st-social {
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}
.st-footer__legal { grid-area: legal; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); color: var(--text-muted); font-size: 12px; }
.st-footer__legal ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; }
.st-footer__legal a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--text-muted); text-decoration: none; }
.st-footer__legal a:hover,
.st-footer__legal a:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.st-footer__legal p { margin: 0; }

/* ---------- Menü: das Verzeichnis des Towers ---------- */

.st-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg-deep);
  color: var(--text);
  overflow: auto;
}
.st-menu::backdrop { background: var(--bg-deep); }
.st-menu__backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.st-menu__backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; opacity: .78; }
.st-menu__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg-deep) 0, color-mix(in srgb, var(--bg-deep) 88%, transparent) 38%, color-mix(in srgb, var(--bg-deep) 40%, transparent) 70%, color-mix(in srgb, var(--bg-deep) 64%, transparent)),
    linear-gradient(transparent 60%, var(--bg-deep));
}
.st-menu__inner { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-8); min-height: 100%; padding: 22px var(--gutter) var(--st-edge); }
.st-menu__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.st-menu__head img { width: auto; height: 40px; }
.st-menu__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-10) var(--space-12); align-items: center; }
.st-menu__eyebrow { margin: 0 0 var(--space-4); color: var(--accent-text); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.st-menu__list { display: grid; margin: 0; padding: 0; list-style: none; }
.st-menu__list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  padding: clamp(4px, 1svh, 10px) 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(34px, min(7.6svh, 10vw), 84px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard), transform var(--duration-slow) var(--ease-out);
}
.st-menu__list small { flex: none; min-width: 2.2em; color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.st-menu__node {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--surface-raised) 90%, transparent), var(--bg-deep));
  box-shadow: inset 0 1px 0 var(--st-glass-shine), inset 0 0 0 1px var(--st-glass-rim);
  transition: box-shadow var(--duration-slow) var(--ease-standard);
}
.st-menu__node img { width: auto; height: 18px; opacity: .45; transition: opacity var(--duration-slow) var(--ease-standard), filter var(--duration-slow) var(--ease-standard); }
.st-menu__list a:hover,
.st-menu__list a:focus-visible { color: var(--accent-text); transform: translateX(10px); }
.st-menu__list a:hover .st-menu__node,
.st-menu__list a:focus-visible .st-menu__node,
.st-menu__list a[aria-current="true"] .st-menu__node { box-shadow: inset 0 1px 0 var(--st-glass-shine), 0 0 0 1px var(--accent-line), 0 0 20px var(--st-glow-soft); }
.st-menu__list a:hover .st-menu__node img,
.st-menu__list a:focus-visible .st-menu__node img,
.st-menu__list a[aria-current="true"] .st-menu__node img { opacity: 1; filter: drop-shadow(0 0 6px var(--accent)); }
.st-menu__list a[aria-current="true"] small { color: var(--accent-text); }
.st-menu__list a:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.st-menu__tower { padding: var(--space-6); border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--dialog-start), var(--dialog-end)); box-shadow: var(--shadow-dialog), inset 0 0 0 1px var(--st-glass-rim); -webkit-backdrop-filter: blur(var(--blur-lg)); backdrop-filter: blur(var(--blur-lg)); }
.st-levels { position: relative; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
/* Der Aufzugsschacht: eine Leitung durch alle Etagen. */
.st-levels::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 74px;
  width: 1px;
  background: linear-gradient(var(--accent-line), color-mix(in srgb, var(--accent) 18%, transparent));
}
.st-level {
  position: relative;
  display: grid;
  grid-template-columns: 44px 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard);
}
.st-level__no { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-align: right; }
.st-level__symbol {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--surface-raised) 90%, transparent), var(--bg-deep));
  box-shadow: inset 0 1px 0 var(--st-glass-shine), inset 0 0 0 1px var(--st-glass-rim);
}
.st-level__symbol img { width: auto; max-width: 26px; height: 22px; object-fit: contain; }
.st-level__text { display: grid; gap: 1px; min-width: 0; }
.st-level__text strong { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.st-level__text small { color: var(--text-soft); font-size: 13px; }
.st-level:hover,
.st-level:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent); }
.st-level:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.st-level[aria-current="page"] { background: color-mix(in srgb, var(--accent) 11%, transparent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.st-level[aria-current="page"] .st-level__no { color: var(--accent-text); }
.st-level[aria-current="page"] .st-level__symbol { box-shadow: inset 0 1px 0 var(--st-glass-shine), 0 0 0 1px var(--accent), 0 0 18px var(--st-glow-soft); }
.st-level__here { color: var(--accent-text); }

.st-menu__foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.st-menu__mission { display: grid; gap: 4px; max-width: 52ch; color: var(--text-soft); font-size: 14px; }
.st-menu__mission p { margin: 0; }
.st-menu__claim { color: var(--text); font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; line-height: 1; letter-spacing: .02em; }
.st-menu__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); max-width: 640px; margin-left: auto; }
/* Rechtliches klein unter Formular und Mail, wie im Fuß der Seite. */
.st-menu__legal { flex-basis: 100%; }
.st-menu__legal ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-4); margin: -6px 0 0; padding: 0; list-style: none; }
.st-menu__legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-muted); font-size: 11px; letter-spacing: .04em; text-decoration: none; transition: color var(--duration-base) var(--ease-standard); }
.st-menu__legal a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.st-menu__legal a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.st-motion .st-menu[open] .st-menu__list li,
.st-motion .st-menu[open] .st-levels li { animation: st-menu-in var(--duration-slow) var(--ease-out) both; }
.st-motion .st-menu[open] li:nth-child(2) { animation-delay: 50ms; }
.st-motion .st-menu[open] li:nth-child(3) { animation-delay: 100ms; }
.st-motion .st-menu[open] li:nth-child(4) { animation-delay: 150ms; }
.st-motion .st-menu[open] li:nth-child(5) { animation-delay: 200ms; }
.st-motion .st-menu[open] li:nth-child(6) { animation-delay: 250ms; }
.st-motion .st-menu[open] li:nth-child(7) { animation-delay: 300ms; }
@keyframes st-menu-in { from { opacity: 0; transform: translateY(22px); } }

/* ---------- Release-Detail ---------- */

.st-release {
  position: fixed;
  inset: 0;
  width: min(880px, calc(100% - 32px));
  height: fit-content;
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border-radius: var(--radius-xl);
}
.st-release[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.st-release::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(var(--blur-lg)); backdrop-filter: blur(var(--blur-lg)); }
.st-release__cover { aspect-ratio: 1; background: var(--bg-deep); }
.st-release__cover img { width: 100%; height: 100%; object-fit: contain; }
.st-release__body { display: grid; align-content: center; gap: var(--space-2); padding: 42px 40px 36px; }
.st-release__body .ds-dialog__title { margin: var(--space-2) 0 var(--space-1); }
.st-release__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }

/* ---------- Demo-Formular: Glasdialog mit den Feldern des Design-Systems ---------- */

.st-form {
  position: fixed;
  inset: 0;
  width: min(880px, calc(100% - 32px));
  height: fit-content;
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-xl);
}
.st-form::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(var(--blur-lg)); backdrop-filter: blur(var(--blur-lg)); }
.st-form__body,
.st-form__done { display: grid; gap: var(--space-5); padding: 42px 44px 36px; }
.st-form__body[hidden],
.st-form__done[hidden] { display: none; }
.st-form__head { display: grid; gap: var(--space-2); }
.st-form__head .ds-dialog__title { margin: var(--space-1) 0 0; }
.st-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-4) var(--space-5); }
/* Felder behalten ihre Höhe, auch wenn das Nachbarfeld einen Hinweis trägt. */
.st-form__grid .ds-field { align-content: start; }
.st-form__wide { grid-column: 1 / -1; }
textarea.st-form__short { min-height: 76px; }
.st-form__file { min-height: 48px; padding-block: 6px; line-height: 34px; cursor: pointer; }
.st-form__file::file-selector-button {
  margin-right: var(--space-3);
  padding: 4px 14px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.st-form__checks { display: grid; }
.st-form__checks a { color: var(--accent-text); text-underline-offset: 3px; }
.st-form__status { min-height: 1.6em; margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-soft); }
.st-form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.st-form__done { justify-items: start; }
img.st-form__mark { width: auto; height: 46px; filter: drop-shadow(0 0 12px var(--st-glow-soft)); }
.st-form__note { color: var(--accent-text); }

::view-transition-old(st-cover),
::view-transition-new(st-cover) { animation-duration: 520ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }

/* ---------- Schmale Komposition ---------- */

@media (max-width: 1100px) {
  .st-bar__nav { display: none; }
  .st-arrival__lead { display: none; }
}

/* Keep the added artist destinations inside the laptop scene before the next floor rises. */
@media (min-width: 1001px) and (max-height: 800px) {
  .st-releases__grid { gap: 14px 32px; padding-top: calc(var(--st-bar) + 12px); padding-bottom: 20px; }
  .st-now { padding: 16px; }
  .st-now__actions { margin-top: 10px; }
  .st-profile-links { margin-top: 6px; }
  .st-artists { padding-top: 12px; gap: 20px; }
}

@media (max-width: 1000px) {
  /* Die Umschaltung zwischen Raum und Liste steht unter der Überschrift: in beiden Ansichten sofort erreichbar. */
  .st-releases__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "head" "tools" "orbit" "now" "stats" "artists";
    gap: var(--space-5);
    padding-right: var(--gutter);
  }
  .st-releases__tools { margin-top: calc(var(--space-2) * -1); }
  .st-artists { align-items: flex-start; flex-direction: column; gap: 12px; }
  .st-stats { position: static; grid-area: stats; justify-self: stretch; }
  .st-stats__list { justify-content: flex-start; }
  .st-now { max-width: none; align-self: start; }
  .st-list { max-height: none; overflow: visible; }
  .st-list .ds-release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-label__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "ribbon" "head" "chapters" "tools";
    align-content: start;
    gap: var(--space-5);
    padding-right: var(--gutter);
  }
  .st-chapters { min-height: 0; align-self: start; }
  .st-ribbon { min-height: 0; height: clamp(240px, 38svh, 420px); }
  .st-demo__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "head" "steps" "call" "panel";
    padding-right: var(--gutter);
  }
  .st-demo__call { justify-self: start; }
  .st-submit { width: clamp(180px, 24svh, 230px); padding: 14px; }
  .st-console { width: min(300px, 40vw); }
  /* Gestapelt liegen Kapitel und Streifen übereinander; eine Leitung würde die Überschrift kreuzen. */
  .st-label .st-wires { display: none; }
  .st-footer__glass { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "brand links" "tower tower" "socials socials" "legal legal"; }
  .st-menu__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 650px) {
  .st { --st-bar: 72px; }
  .st-bar { padding: 14px var(--gutter-narrow); }
  .st-bar__brand img { height: 30px; }
  /* Schmal nur das Symbol; die Beschriftung bleibt für Vorleseprogramme der Name des Schalters. */
  .st-bar__tools [data-motion-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .st-bar__tools .st-holo--sm { padding: 0 14px; }
  .st-bar__tools { gap: 6px; }
  .st-lang__item { padding: 0 6px; }
  .st-rail { display: none; }
  .st-arrival__copy,
  .st-sister__copy,
  .st-world__content { left: var(--gutter-narrow); right: var(--gutter-narrow); max-width: none; }
  .st-arrival__copy .st-actions .st-holo { flex: 1 1 auto; }
  .st-releases__grid,
  .st-label__grid,
  .st-demo__grid { padding-inline: var(--gutter-narrow); }
  .st-orbit__stage { --card: clamp(136px, 38vw, 190px); --radius: calc(var(--card) * 1.12); min-height: calc(var(--card) * 1.7); perspective: 900px; }
  .st-tags { gap: 16px 10px; }
  .st-tags li { gap: 6px; font-size: 12px; }
  .st-demo__panel { padding-inline: var(--space-4); }
  /* Schmal steht die ganze Szene auf einem Bildschirm: Überschrift, Umschaltung, Galerie, Detail. */
  .st-releases__grid { grid-template-rows: auto auto auto auto auto; align-content: start; gap: var(--space-4); padding-top: calc(var(--st-bar) + 6px); }
  .st-stats { gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .st-stats__list { justify-content: space-between; }
  .st-stats__item { padding: 0 var(--space-2); gap: 4px; }
  .st-stats__item dd { font-size: 26px; }
  .st-stats__item dt { font-size: 9px; letter-spacing: .06em; }
  .st-stats__note { font-size: 11px; }
  .st-stats__foot { padding-top: var(--space-2); gap: var(--space-2); }
  .st-stats__foot .st-playlist { flex: 1 1 100%; justify-content: center; }
  .st-orbit__controls { padding-top: var(--space-1); }
  .st-orbit__controls .st-round { width: 44px; height: 44px; }
  .st-now { gap: 2px; padding: var(--space-4) var(--space-5); }
  .st-now h3 { font-size: 28px; }
  .st-now__actions { margin-top: var(--space-2); }
  .st-list .ds-release-grid { gap: var(--space-5) var(--space-3); }
  .st-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  /* Schmal: Die Streifen liegen als Zeilen übereinander, jede Zeile bleibt gut treffbar. */
  .st-ribbon { flex-direction: column; gap: 4px; height: auto; }
  .st-strip { flex: none; height: 48px; transition: height var(--duration-scene) var(--ease-out), box-shadow var(--duration-slow) var(--ease-standard); }
  .st-strip[aria-selected="true"] { flex: none; height: clamp(170px, 27svh, 250px); }
  .st-strip::after { background: linear-gradient(90deg, color-mix(in srgb, var(--bg-deep) 80%, transparent), transparent 70%); }
  .st-strip[aria-selected="true"]::after { background: linear-gradient(transparent 46%, color-mix(in srgb, var(--bg-deep) 86%, transparent)); }
  .st-strip__label,
  .st-strip[aria-selected="true"] .st-strip__label { left: 14px; bottom: 50%; writing-mode: horizontal-tb; transform: translateY(50%); }
  .st-strip[aria-selected="true"] .st-strip__label { bottom: 14px; transform: none; }
  .st-strip__label strong { font-size: 18px; }
  .st-strip[aria-selected="true"] .st-strip__label strong { font-size: 22px; }
  .st-footer { padding-inline: var(--gutter-narrow); }
  .st-footer__glass { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "links" "tower" "socials" "legal"; padding: var(--space-6); }
  .st-divisions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-menu__inner { padding-inline: var(--gutter-narrow); }
  .st-menu__head img { height: 30px; }
  .st-menu__node { display: none; }
  .st-release[open] { grid-template-columns: minmax(0, 1fr); }
  .st-release__body { padding: 26px 24px; }
  .st-form__grid { grid-template-columns: minmax(0, 1fr); }
  .st-form__body,
  .st-form__done { padding: 28px 22px 24px; }
  .st-form__actions .st-holo { flex: 1 1 auto; }
  .st-release__cover { max-height: 46svh; }
  .st-lift__indicator { top: calc(var(--st-bar) + 2px); }
}

/* Sehr schmale Handys: Markensymbol statt gestauchter Wortmarke; alle Ziele bleiben 44 px groß. */
@media (max-width: 400px) {
  .st-bar { gap: 8px; padding-inline: 12px; }
  .st-bar__brand img { height: 32px; max-width: 44px; object-fit: contain; }
  .st-bar__tools { gap: 4px; }
}

/* Narrow/tall windows: room above the copy, including compact tablets. */
@media (max-aspect-ratio: 4 / 5), (max-width: 1100px) and (min-height: 641px) {
  /* Abstand zur Kopfzeile als Innenabstand: Ränder verschmelzen nicht, alle Lagen zählen ab der Oberkante der Szene. */
  /* Layout offset and the image's floor-light coordinate must remain separate. */
  .st-arrival .st-scene__body { --st-arrival-top: calc(var(--st-bar) - 10px); height: auto; min-height: 100svh; display: block; padding-top: var(--st-arrival-top); }
  .st-arrival .st-scene__body::before { display: none; }
  /* Die Etage läuft an beiden Rändern weich aus: angeschnittene Räume zeigen, dass es seitlich weitergeht. */
  .st-arrival .st-look {
    --plane-h: 56svh;
    position: relative;
    inset: auto;
    height: var(--plane-h);
    scroll-snap-type: x proximity;
    touch-action: pan-y;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 7% 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 7% 93%, transparent);
  }
  .st-arrival__shade { inset: calc(var(--st-arrival-top) + 56svh - 96px) 0 auto; height: 98px; background: linear-gradient(transparent, color-mix(in srgb, var(--bg-deep) 70%, transparent) 60%, var(--bg-deep)); }
  .st-arrival__copy { position: relative; inset: auto; margin: var(--space-4) var(--gutter-narrow) 0; }
  .st-arrival__lead { display: block; }
  .st-console { position: relative; inset: auto; width: auto; margin: var(--space-6) var(--gutter-narrow) calc(var(--st-edge) + 34px); }
  /* Pfeile an den Rändern der Etage, mittig: Sie zeigen, dass es links und rechts weitergeht. */
  .st-look__keys { inset: calc(var(--st-arrival-top) + 28svh - 22px) 6px auto 6px; justify-content: space-between; pointer-events: none; }
  .st-look__keys .st-round { pointer-events: auto; }
  /* Hochformat: nur die Knoten; die Räume stehen benannt in der Konsole darunter. Der Name bleibt für Vorleseprogramme. */
  .st-node__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .st-hint { display: none; }
  .st-arrival .st-wires { display: none; }
  .st-node { --st-node-lift: -84px; }
  /* Hochformat: FLUFFY steht rechts auf dem Boden der Etage, über dem Text. Der Abstand der Etage zur Kopfzeile
     wirkt hier schon auf den ganzen Szenenkörper (Randverschmelzung), daher zählt die Lage ab der Etage selbst. */
  .st-greeter[data-mode="compact"] { --st-greeter-h: min(37svh, 75vw, 440px); top: calc(var(--st-arrival-top) + 56svh - 14px - var(--st-greeter-h)); bottom: auto; right: max(10px, 3vw); height: var(--st-greeter-h); }
  /* Grip the room's lower edge, above the copy and the separate room controls. */
  .st-greeter[data-mode="compact"][data-figure-mode="edge"] { top: calc(var(--st-arrival-top) + 56svh - var(--st-greeter-h)); bottom: auto; }
  .st-greeter[data-figure-mode="edge"] .st-greeter__figure { left: -2%; width: 60%; }
  .st-greeter[data-figure-mode="edge"] .st-greeter__still,
  .st-greeter[data-figure-mode="edge"] .st-greeter__canvas { -webkit-mask-image: linear-gradient(black 90%, transparent 98%); mask-image: linear-gradient(black 90%, transparent 98%); }
  .st-holobox__caption { bottom: 14%; font-size: 10px; }
  .st-swipe { top: calc(var(--st-arrival-top) + 12px); }
  .st-sister .st-scene__body { min-height: 100svh; }
}

/* Niedrige Bildschirme: Die Szenen bleiben vollständig bedienbar. */
@media (max-height: 640px) and (min-aspect-ratio: 4 / 5) {
  /* Lift the whole room with its anchors to reserve the foreground band. */
  .st-arrival .st-look,
  .st-arrival .st-pano,
  .st-arrival .st-nodes { translate: 0 clamp(-100px, calc(100svh - 580px), 0px); }
  .st-look__keys { top: var(--st-bar); left: 50%; transform: translateX(-50%); }
  .st-arrival__lead { display: none; }
  .st-hint { display: none; }
  .st-chapters { min-height: 0; }
  .st-console { display: none; }
  .st-node__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .st-greeter[data-mode] { --st-greeter-h: min(62svh, 310px); display: flex; top: calc(100svh - var(--st-greeter-h) - 18px); right: 18px; bottom: auto; height: var(--st-greeter-h); }
  .st-greeter[data-mode][data-figure-mode="edge"] { top: calc(100svh - var(--st-greeter-h)); }
}

/* ---------- Ohne Skript ---------- */

html:not(.st-js) .st-bar { position: absolute; }
html:not(.st-js) .st-rail,
html:not(.st-js) .st-bar__tools > button,
html:not(.st-js) .st-look__keys,
html:not(.st-js) .st-label__tools,
html:not(.st-js) .st-sister__copy [data-lift-open],
html:not(.st-js) .st-lift__indicator,
html:not(.st-js) .st-wires,
html:not(.st-js) .st-doors { display: none; }
html:not(.st-js) .st-chapters { display: grid; gap: var(--space-8); }
html:not(.st-js) .st-sister .st-scene__body { height: auto; }
html:not(.st-js) .st-sister__copy { position: relative; inset: auto; padding: calc(var(--st-bar) + var(--space-12)) var(--gutter) var(--space-12); }
html:not(.st-js) .st-world { position: relative; inset: auto; min-height: 80svh; visibility: visible; }

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  .st-ticker__track,
  .st-wire__pulse,
  .st-holo::before,
  .st-round::before,
  .st-node__ring,
  .st-submit::before { animation: none !important; }
  .st-spill::before,
  .st-spill::after { animation: none !important; }
}
html:not(.st-motion) .st-strip,
html:not(.st-motion) .st-strip img,
html:not(.st-motion) .st-world__content,
html:not(.st-motion) .st-sleeve,
html:not(.st-motion) .st-zone,
html:not(.st-motion) .st-holo,
html:not(.st-motion) .st-greeter__stage,
html:not(.st-motion) .st-greeter__bubble,
html:not(.st-motion) .st-pano { transition: none !important; }
html:not(.st-motion) .st-menu li,
html:not(.st-motion) img.st-greeter__still,
html:not(.st-motion) .st-console__dot,
html:not(.st-motion) .st-stats__dot { animation: none !important; }
html:not(.st-motion) .st-wire__pulse { display: none; }

@media print {
  .st-bar, .st-rail, .st-hint, .st-look__keys, .st-scene__veil, .st-greeter, .st-wires, .st-doors { display: none !important; }
  .st-scene { position: static !important; min-height: 0; }
}

/* Ohne angezeigte Katalognummer (Ersatzkennung) entfällt die Zeile statt eines leeren Abstands. */
[data-now-catalog]:empty, [data-release-catalog]:empty { display: none; }