/* tokens.css */
/* ACTIVATED — Werte. Erzeugt aus brand.json, nicht von Hand ändern. */

@font-face { font-family: "Bebas Neue Pro"; src: url("../fonts/BebasNeuePro-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir LT Pro"; src: url("../fonts/AvenirLTPro-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir LT Pro"; src: url("../fonts/AvenirLTPro-Book.woff2") format("woff2"); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir LT Pro"; src: url("../fonts/AvenirLTPro-Roman.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir LT Pro"; src: url("../fonts/AvenirLTPro-Oblique.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Avenir LT Pro"; src: url("../fonts/AvenirLTPro-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir LT Pro"; src: url("../fonts/AvenirLTPro-Heavy.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir LT Pro"; src: url("../fonts/AvenirLTPro-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #030604;
  --bg-deep: #000000;
  --surface: #06100c;
  --surface-raised: #111a13;
  --surface-hover: #163426;
  --surface-glass: #041009e8;
  --scrim: #0208066b;
  --panel-start: #0b1716ee;
  --panel-end: #020805f5;
  --dialog-start: #12251ff0;
  --dialog-end: #030a08ed;
  --nav-shade: #0205049c;
  --media-shade-strong: #00000088;
  --media-shade-soft: #00000033;
  --text: #ffffff;
  --text-soft: #edf3ef;
  --text-muted: #bac5bf;
  --text-dim: #90a19a;
  --on-accent: #000000;
  --accent: #12ff00;
  --accent-hover: #9cff00;
  --accent-alt: #bfff3d;
  --accent-text: #12ff00;
  --accent-tint: #b8ffb1;
  --accent-soft: #12ff001e;
  --accent-line: #12ff0080;
  --line: #c8f2d126;
  --line-strong: #92dfa250;
  --line-control: #9cbea5;
  --danger: #ff6a7c;
  --danger-soft: #7b17233d;
  --warning: #ffc53d;
  --success: var(--accent-text);
  --focus: #12ff00;
  --shadow-card: 0 3px 9px #00000044;
  --shadow-float: 0 14px 35px #00000055;
  --shadow-panel: 0 0 0 5px #090f0c25, 0 0 55px #12ff0012, 0 25px 90px #00000099, inset 0 1px #c6ffd859;
  --shadow-dialog: 0 0 90px #12ff0020, 0 30px 90px #00000088, inset 0 1px #effff333;
  --glow-hover: 0 0 24px #12ff0020;
  --glow-sm: 0 0 12px #12ff0066;
  --glow-md: 0 0 14px 2px #12ff0080;
  --glow-lg: 0 0 70px #12ff0022, 0 0 160px #12ff0012, 0 56px 110px -34px #12ff0066, 0 30px 80px #000000cc;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5ef;
  --bg-deep: #ffffff;
  --surface: #ffffff;
  --surface-raised: #eef4f0;
  --surface-hover: #e4eee7;
  --surface-glass: #ffffffe0;
  --scrim: #0304034d;
  --panel-start: #ffffff;
  --panel-end: #f4f5ef;
  --dialog-start: #ffffff;
  --dialog-end: #eef4f0;
  --nav-shade: #f4f5efcc;
  --media-shade-strong: #00000088;
  --media-shade-soft: #00000033;
  --text: #030403;
  --text-soft: #163426;
  --text-muted: #3d4d43;
  --text-dim: #536559;
  --on-accent: #000000;
  --accent: #12ff00;
  --accent-hover: #9cff00;
  --accent-alt: #bfff3d;
  --accent-text: #125321;
  --accent-tint: #183c24;
  --accent-soft: #12ff0030;
  --accent-line: #125321;
  --line: #03040326;
  --line-strong: #0304034d;
  --line-control: #536559;
  --danger: #a3142a;
  --danger-soft: #ffdbe1;
  --warning: #7a4d00;
  --success: var(--accent-text);
  --focus: #125321;
  --shadow-card: 0 3px 9px #00000044;
  --shadow-float: 0 14px 35px #00000055;
  --shadow-panel: 0 0 0 1px #0304031a, 0 25px 60px #03040326;
  --shadow-dialog: 0 30px 90px #03040333;
  --glow-hover: 0 6px 18px #03040326;
  --glow-sm: none;
  --glow-md: 0 0 0 3px #12532133;
  --glow-lg: 0 30px 80px #03040333;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;
  --blur-sm: 6px;
  --blur-md: 12px;
  --blur-lg: 22px;
  --duration-fast: 180ms;
  --duration-base: 200ms;
  --duration-slow: 550ms;
  --duration-scene: 1100ms;
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.3,0,.2,1);
  --content-max: 1200px;
  --measure: 62ch;
  --gutter: 3.5vw;
  --gutter-narrow: 20px;
  --bp-narrow: 650px;
  --bp-wide: 1000px;
  --target-min: 44px;
  --font-display: "Bebas Neue Pro", "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-sans: "Avenir LT Pro", "Avenir Next", Avenir, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.display-hero { font-family: var(--font-display); font-size: 78px; line-height: 0.96; font-weight: 700; letter-spacing: 0.015em; }
.display-1 { font-family: var(--font-display); font-size: 60px; line-height: 1.02; font-weight: 700; letter-spacing: 0.01em; }
.display-2 { font-family: var(--font-display); font-size: 48px; line-height: 1.04; font-weight: 700; letter-spacing: 0.015em; }
.display-3 { font-family: var(--font-display); font-size: 38px; line-height: 1.06; font-weight: 700; letter-spacing: 0.015em; }
.display-4 { font-family: var(--font-display); font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: 0.015em; }
.display-5 { font-family: var(--font-display); font-size: 24px; line-height: 1.12; font-weight: 700; letter-spacing: 0.02em; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 1.5; font-weight: 400; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 13px; line-height: 1.6; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.6; font-weight: 400; letter-spacing: 0.04em; }
.eyebrow { font-family: var(--font-sans); font-size: 10px; line-height: 1.5; font-weight: 700; letter-spacing: 0.18em; }
.eyebrow-lg { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; font-weight: 700; letter-spacing: 0.12em; }
.button-lg { font-family: var(--font-sans); font-size: 15px; line-height: 1; font-weight: 700; }
.button { font-family: var(--font-sans); font-size: 13px; line-height: 1; font-weight: 700; }
.button-sm { font-family: var(--font-sans); font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: 0.1em; }
.label { font-family: var(--font-sans); font-size: 11px; line-height: 1.6; font-weight: 400; letter-spacing: 0.15em; }
.micro { font-family: var(--font-sans); font-size: 10px; line-height: 1.6; font-weight: 400; letter-spacing: 0.1em; }
.data { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; font-weight: 500; letter-spacing: 0.02em; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; font-weight: 400; }

/* components.css */
/*
 * Gemeinsame Bausteine für ACTIVATED und IGNITED Records.
 * Diese Datei kennt keine Marke: Sie liest ausschließlich die Werte aus tokens.css.
 * Eine andere Marke entsteht durch andere Werte, nie durch eine Kopie dieser Datei.
 */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-scope,
.ds-scope *,
.ds-scope *::before,
.ds-scope *::after { box-sizing: border-box; }

.ds-scope img { display: block; max-width: 100%; height: auto; }

.ds-scope :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.ds-container {
  width: min(var(--content-max, 1200px), 100% - 2 * var(--gutter-narrow, 20px));
  margin-inline: auto;
}

.ds-section { padding-block: var(--space-24); scroll-margin-top: var(--space-6); }
.ds-section--tight { padding-block: var(--space-16); }
.ds-section__head { display: grid; gap: var(--space-4); justify-items: start; margin-bottom: var(--space-10); }
.ds-stage { position: relative; }

.ds-preview { padding: var(--space-6); }
.ds-stack { display: grid; gap: var(--space-4); }
.ds-stack--lg { gap: var(--space-8); }
.ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.ds-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* ---------- Schrift ---------- */

.ds-display-hero,
.ds-display-1,
.ds-display-2,
.ds-display-3,
.ds-display-4,
.ds-display-5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
}

.ds-display-hero { font-size: clamp(38px, 4.6vw, 78px); line-height: .96; letter-spacing: .015em; }
.ds-display-1 { font-size: clamp(38px, 4.7vw, 60px); line-height: 1.02; letter-spacing: .01em; }
.ds-display-2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.04; letter-spacing: .015em; }
.ds-display-3 { font-size: clamp(30px, 3vw, 38px); line-height: 1.06; letter-spacing: .015em; }
.ds-display-4 { font-size: 30px; line-height: 1.1; letter-spacing: .015em; }
.ds-display-5 { font-size: 24px; line-height: 1.12; letter-spacing: .02em; }

.ds-accent { color: var(--accent-text); }
.ds-break { display: block; }

.ds-lead { margin: 0; max-width: 39ch; font-size: 20px; line-height: 1.5; color: var(--text-soft); text-wrap: pretty; }
.ds-body-lg { margin: 0; max-width: var(--measure, 62ch); font-size: 18px; line-height: 1.6; color: var(--text-soft); }
.ds-body { margin: 0; max-width: var(--measure, 62ch); font-size: 16px; line-height: 1.7; color: var(--text-soft); }
.ds-body-sm { margin: 0; max-width: var(--measure, 62ch); font-size: 15px; line-height: 1.6; color: var(--text-soft); }
.ds-small { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.ds-caption { margin: 0; font-size: 12px; line-height: 1.6; letter-spacing: .04em; color: var(--text-muted); }
.ds-label { margin: 0; font-size: 11px; line-height: 1.6; letter-spacing: .15em; text-transform: uppercase; color: var(--text); }
.ds-micro { margin: 0; font-size: 10px; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.ds-data { font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

.ds-link {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-base, 200ms) var(--ease-standard, ease);
}
.ds-link:hover { color: var(--text); }

/* ---------- Eyebrow ---------- */

.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.ds-eyebrow::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--accent-text);
  box-shadow: var(--glow-sm);
}
[data-theme="light"] .ds-eyebrow::before { box-shadow: none; }
.ds-eyebrow--lg { font-size: 12px; letter-spacing: .12em; }
.ds-eyebrow--plain::before { display: none; }
.ds-eyebrow--neutral { color: var(--text); }
.ds-eyebrow--neutral::before { background: var(--text); box-shadow: none; }

/* ---------- Überschriftenblock ---------- */

.ds-heading { display: grid; gap: var(--space-4); justify-items: start; }
.ds-heading > .ds-lead { margin-top: var(--space-1); }

/* ---------- Button ---------- */

.ds-button {
  --_bg: var(--accent);
  --_fg: var(--on-accent);
  --_bd: var(--accent);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 48px;
  margin: 0;
  padding: 12px var(--space-5);
  border: 1px solid var(--_bd);
  border-radius: var(--radius-none);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--duration-base, 200ms) var(--ease-standard, ease),
    border-color var(--duration-base, 200ms) var(--ease-standard, ease),
    color var(--duration-base, 200ms) var(--ease-standard, ease),
    box-shadow var(--duration-base, 200ms) var(--ease-standard, ease);
}
.ds-button:hover { --_bg: var(--accent-hover); --_bd: var(--accent-hover); box-shadow: var(--glow-hover); }
.ds-button:active { transform: translateY(1px); }

.ds-button--lg { min-height: 54px; padding: 14px 21px; gap: 28px; font-size: 15px; letter-spacing: 0; }
.ds-button--sm {
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: var(--shadow-card);
}
.ds-button--block { display: flex; width: 100%; }

.ds-button--secondary { --_bg: var(--surface); --_fg: var(--accent-text); --_bd: var(--accent-text); }
.ds-button--secondary:hover { --_bg: var(--accent); --_fg: var(--on-accent); --_bd: var(--accent); }

.ds-button--quiet { --_bg: var(--surface-hover); --_fg: var(--text-soft); --_bd: var(--line-strong); }
.ds-button--quiet:hover { --_bg: var(--accent-tint); --_fg: var(--bg); --_bd: var(--accent-tint); box-shadow: none; }

.ds-button--ghost {
  --_bg: transparent;
  --_fg: var(--text);
  --_bd: transparent;
  min-height: 44px;
  padding: 0;
  gap: var(--space-4);
  border-bottom-color: var(--line-strong);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ds-button--ghost:hover { --_bg: transparent; --_fg: var(--accent-text); --_bd: transparent; border-bottom-color: var(--accent-line); box-shadow: none; }

.ds-button[disabled],
.ds-button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; pointer-events: none; }

.ds-button[aria-busy="true"] { cursor: progress; }
.ds-button[aria-busy="true"]::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: ds-spin 800ms linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ---------- Badge ---------- */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 22px;
  padding: 0 var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ds-badge--accent { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }
.ds-badge--solid { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.ds-badge--success { border-color: var(--success); color: var(--success); }
.ds-badge--warning { border-color: var(--warning); color: var(--warning); }
.ds-badge--danger { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

/* ---------- Panel ---------- */

.ds-panel {
  position: relative;
  width: 100%;
  max-width: var(--content-max, 1200px);
  padding: var(--space-8);
  border: 1px solid var(--line-strong);
  background: linear-gradient(130deg, var(--panel-start), var(--panel-end) 72%);
  box-shadow: var(--shadow-panel);
}
.ds-panel--flat { background: var(--surface); box-shadow: none; border-color: var(--line); }
.ds-panel--glass {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--blur-md, 12px));
  backdrop-filter: blur(var(--blur-md, 12px));
}
.ds-panel__split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-5) var(--space-10);
  align-items: center;
}
.ds-panel__media { border: 1px solid var(--line); aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-deep); }
.ds-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.ds-panel__block { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }

/* ---------- Karte ---------- */

.ds-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); row-gap: 44px; padding-bottom: var(--space-6); }

.ds-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 246px;
  padding: 52px 18px 42px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  transition: border-color var(--duration-base, 200ms) var(--ease-standard, ease);
}
.ds-card:hover,
.ds-card:focus-within { border-color: var(--accent-line); }
.ds-card__media { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ds-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .66; }
.ds-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent -30%, var(--surface-raised) 92%);
}
.ds-card__media--symbol img { inset: 14px 14px auto auto; width: auto; height: 58%; object-fit: contain; opacity: .92; }
.ds-card__media--symbol::after { background: linear-gradient(transparent 30%, var(--surface-raised) 86%); }
.ds-card__index { position: absolute; top: 17px; left: 18px; z-index: 2; font-size: 10px; line-height: 1.6; color: var(--text-muted); }
.ds-card__body { position: relative; z-index: 2; display: grid; gap: 6px; width: 100%; }
.ds-card__kicker { font-size: 9px; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ds-card__title { font-family: var(--font-display); font-size: 29px; font-weight: 700; line-height: 1.05; letter-spacing: .015em; text-transform: uppercase; color: var(--text); }
.ds-card__text { margin: 7px 0 0; font-size: 12px; line-height: 1.6; text-transform: uppercase; color: var(--text-soft); }
.ds-card__actions {
  position: absolute;
  left: 50%;
  bottom: -1px;
  z-index: 3;
  display: flex;
  gap: var(--space-2);
  width: calc(100% - 32px);
  max-width: 248px;
  transform: translate(-50%, 50%);
}
.ds-card__actions > .ds-button { flex: 1; min-width: 0; }

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

.ds-release-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6) var(--space-4); }

.ds-release { display: grid; gap: var(--space-3); align-content: start; max-width: 420px; }
.ds-release__cover {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  transition: border-color var(--duration-base, 200ms) var(--ease-standard, ease), box-shadow var(--duration-base, 200ms) var(--ease-standard, ease);
}
.ds-release__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow, 550ms) var(--ease-out, ease); }
.ds-release__cover:hover,
.ds-release__cover:focus-visible { border-color: var(--accent-line); box-shadow: var(--glow-hover); }
.ds-release__cover:hover img { transform: scale(1.03); }
.ds-release__cover--empty { display: grid; place-items: center; }
.ds-release__cover--empty img { width: 38%; height: auto; object-fit: contain; opacity: .5; }
.ds-release__body { display: grid; gap: 2px; }
.ds-release__catalog { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .06em; color: var(--accent-text); }
.ds-release__title { margin: 2px 0 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.08; letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.ds-release__artist { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-soft); }
.ds-release__meta { margin: 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; letter-spacing: .04em; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ---------- Artist ---------- */

.ds-artist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }

.ds-artist {
  position: relative;
  display: flex;
  align-items: flex-end;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-base, 200ms) var(--ease-standard, ease);
}
.ds-artist:hover,
.ds-artist:focus-visible { border-color: var(--accent-line); }
.ds-artist__stage { position: absolute; inset: 0; }
.ds-artist__stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ds-artist__stage > .ds-artist__wall { opacity: .9; }
.ds-artist__stage > .ds-artist__figure { object-fit: contain; object-position: center bottom; transition: transform var(--duration-slow, 550ms) var(--ease-out, ease); transform-origin: center bottom; }
.ds-artist:hover .ds-artist__figure { transform: scale(1.03); }
.ds-artist__stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, var(--bg-deep) 96%); }
.ds-artist__body { position: relative; z-index: 1; display: grid; gap: 2px; width: 100%; padding: var(--space-5); }
.ds-artist__name { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: .015em; text-transform: uppercase; color: var(--text); }
.ds-artist__role { margin: 0; font-size: 11px; line-height: 1.6; letter-spacing: .15em; text-transform: uppercase; color: var(--accent-text); }

/* ---------- Leerzustand ---------- */

.ds-empty {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  padding: var(--space-12) var(--space-6);
  border: 1px dashed var(--line-strong);
  color: var(--text-muted);
  text-align: center;
}
.ds-empty img { width: 56px; height: auto; opacity: .7; }
.ds-empty__title { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1.12; letter-spacing: .02em; text-transform: uppercase; color: var(--text); }

/* ---------- Tabs ---------- */

.ds-tabs { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; align-items: start; }
.ds-tabs__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ds-tabs__tab {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--text-soft);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast, 180ms) var(--ease-standard, ease), color var(--duration-fast, 180ms) var(--ease-standard, ease);
}
.ds-tabs__tab:hover { border-color: var(--accent-text); color: var(--accent-text); }
.ds-tabs__tab[aria-selected="true"] { border-color: var(--accent-line); border-left-color: var(--accent-text); color: var(--accent-text); }
.ds-tabs__panel { display: grid; gap: var(--space-3); padding-top: var(--space-1); }
.ds-tabs__panel[hidden] { display: none; }

/* ---------- Zeitleiste ---------- */

.ds-timeline { display: grid; gap: 9px; max-width: var(--measure, 62ch); margin: 0; padding: 0; list-style: none; }
.ds-timeline__item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: 6px 0 6px 12px;
  border-left: 1px solid var(--accent-line);
  transition: border-color var(--duration-base, 200ms) var(--ease-standard, ease);
}
.ds-timeline__item:hover { border-left-color: var(--accent-text); }
.ds-timeline__year { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.12; letter-spacing: .02em; color: var(--accent-text); }
.ds-timeline__title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.12; letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.ds-timeline__text { margin: 2px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-soft); }

/* ---------- Formular ---------- */

.ds-field { display: grid; gap: 6px; }
.ds-field__label { font-size: 11px; line-height: 1.6; letter-spacing: .15em; text-transform: uppercase; color: var(--text); }
.ds-field__hint { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.ds-field__error { display: flex; gap: 6px; align-items: baseline; font-size: 13px; line-height: 1.6; color: var(--danger); }

.ds-input,
.ds-select,
.ds-textarea {
  appearance: none;
  width: 100%;
  min-height: 48px;
  padding: 12px var(--space-4);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--duration-fast, 180ms) var(--ease-standard, ease), background var(--duration-fast, 180ms) var(--ease-standard, ease);
}
.ds-textarea { min-height: 128px; resize: vertical; }
.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--text-dim); opacity: 1; }
.ds-input:hover,
.ds-select:hover,
.ds-textarea:hover { border-color: var(--accent-text); }
.ds-input:focus-visible,
.ds-select:focus-visible,
.ds-textarea:focus-visible { border-color: var(--accent-text); outline-offset: 2px; }
.ds-input[aria-invalid="true"],
.ds-select[aria-invalid="true"],
.ds-textarea[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }
.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled { opacity: .5; cursor: not-allowed; }
.ds-select {
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.ds-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); align-items: start; min-height: 44px; padding-block: 10px; font-size: 13px; line-height: 1.6; color: var(--text-soft); cursor: pointer; }
.ds-check input {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  cursor: pointer;
  transition: background var(--duration-fast, 180ms) var(--ease-standard, ease), border-color var(--duration-fast, 180ms) var(--ease-standard, ease);
}
.ds-check input:checked {
  border-color: var(--accent);
  background: var(--accent) linear-gradient(transparent, transparent);
  box-shadow: inset 0 0 0 4px var(--accent), inset 0 0 0 20px var(--on-accent);
}

.ds-newsletter { display: grid; gap: var(--space-5); padding: var(--space-8); border: 1px solid var(--line-strong); background: linear-gradient(130deg, var(--panel-start), var(--panel-end) 72%); }
.ds-newsletter__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; }

/* ---------- Navigation ---------- */

.ds-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 17px var(--gutter-narrow, 20px);
  background: linear-gradient(var(--nav-shade), transparent);
}
.ds-nav--overlay { position: absolute; inset: 0 0 auto; z-index: 5; padding: 28px var(--gutter, 3.5vw); }
.ds-nav__brand { display: grid; gap: 2px; align-content: center; width: 154px; min-height: 44px; color: inherit; text-decoration: none; }
.ds-nav__brand img { width: 100%; }
.ds-nav__brand span { font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .5em; text-transform: uppercase; color: var(--text-soft); }
.ds-nav__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.ds-nav__link {
  display: inline-flex;
  align-items: center;
  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;
  transition: color var(--duration-base, 200ms) var(--ease-standard, ease), border-color var(--duration-base, 200ms) var(--ease-standard, ease);
}
.ds-nav__link:hover { color: var(--accent-text); border-bottom-color: var(--accent-line); }
.ds-nav__link[aria-current="page"] { color: var(--accent-text); border-bottom-color: var(--accent-text); }

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

.ds-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: end;
  padding: var(--space-8) var(--gutter-narrow, 20px);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.ds-footer__brand { display: grid; gap: var(--space-3); }
.ds-footer__brand img { width: 132px; }
.ds-footer__note { margin: 0; font-size: 10px; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.ds-footer__legal {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 4px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duration-base, 200ms) var(--ease-standard, ease);
}
.ds-footer__legal:hover { color: var(--accent-text); }

/* ---------- Trennlinie ---------- */

.ds-divider { display: flex; align-items: center; gap: var(--space-6); width: 100%; margin: 0; border: 0; color: var(--text); }
.ds-divider::before,
.ds-divider::after { content: ""; flex: 1; height: 1px; }
.ds-divider::before { background: linear-gradient(90deg, transparent, var(--text)); }
.ds-divider::after { background: linear-gradient(90deg, var(--text), transparent); }
.ds-divider img { flex: none; width: auto; height: 28px; }
.ds-divider--accent::before { background: linear-gradient(90deg, transparent, var(--accent-text)); }
.ds-divider--accent::after { background: linear-gradient(90deg, var(--accent-text), transparent); }

/* ---------- Dialog ---------- */

.ds-dialog {
  position: relative;
  isolation: isolate;
  width: min(600px, 100%);
  padding: 42px 44px 36px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  background: linear-gradient(130deg, var(--dialog-start), var(--dialog-end) 72%);
  box-shadow: var(--shadow-dialog);
  color: var(--text);
}
.ds-dialog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 42px;
  right: 42px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 24px var(--accent);
}
.ds-dialog__emblem { position: absolute; top: 12px; right: -24px; z-index: -1; width: 245px; opacity: .1; transform: rotate(-12deg); pointer-events: none; }
.ds-dialog__title { margin: var(--space-4) 0 var(--space-5); }
.ds-dialog__text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-soft); }
.ds-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: 28px; }
.ds-dialog__actions > .ds-button { min-height: 50px; border-radius: 5px; box-shadow: none; }

/* ---------- Hotspot ---------- */

.ds-hotspot {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 54px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.ds-hotspot__dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface-glass);
  color: var(--accent-text);
  -webkit-backdrop-filter: blur(var(--blur-sm, 6px));
  backdrop-filter: blur(var(--blur-sm, 6px));
  transition: border-color var(--duration-base, 200ms) var(--ease-standard, ease), box-shadow var(--duration-base, 200ms) var(--ease-standard, ease);
}
.ds-hotspot:hover .ds-hotspot__dot,
.ds-hotspot:focus-visible .ds-hotspot__dot { border-color: var(--accent-text); box-shadow: var(--glow-md); }
.ds-hotspot__label { display: grid; gap: 1px; }
.ds-hotspot__label strong { font-size: 11px; font-weight: 400; line-height: 1.6; letter-spacing: .15em; text-transform: uppercase; }
.ds-hotspot__label small { max-width: 180px; font-size: 10px; line-height: 1.6; letter-spacing: .03em; color: var(--text-muted); }

/* ---------- Hero ---------- */

.ds-hero {
  position: relative;
  display: grid;
  align-content: end;
  min-height: min(720px, 100svh);
  padding: var(--space-32) var(--gutter, 3.5vw) var(--space-16);
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--text);
}
.ds-hero__media { position: absolute; inset: 0; }
.ds-hero__media img,
.ds-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.ds-hero__media--contain img { object-fit: contain; object-position: 78% 50%; padding: 6% 4%; }
.ds-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--media-shade-strong), transparent 40% 77%, var(--media-shade-soft)),
    linear-gradient(var(--media-shade-soft), transparent 18% 65%, var(--bg-deep));
}
.ds-hero__content { position: relative; z-index: 1; display: grid; gap: var(--space-5); justify-items: start; max-width: 640px; }
.ds-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

/* ---------- Tabelle ---------- */

.ds-table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
.ds-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; line-height: 1.6; color: var(--text-soft); }
.ds-table caption { padding: var(--space-4) var(--space-4) var(--space-2); font-family: var(--font-display); font-size: 24px; line-height: 1.12; letter-spacing: .02em; text-align: left; text-transform: uppercase; color: var(--text); }
.ds-table th { padding: 10px var(--space-4); border-bottom: 1px solid var(--line-strong); background: var(--surface-raised); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-align: left; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.ds-table td { padding: 12px var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.ds-table tbody tr { transition: background var(--duration-fast, 180ms) var(--ease-standard, ease); }
.ds-table tbody tr:hover { background: var(--accent-soft); }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table .ds-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ds-table .ds-strong { color: var(--text); font-weight: 500; }

/* ---------- Fassung je Thema ---------- */

.ds-theme-light-only { display: none !important; }
[data-theme="light"] .ds-theme-dark-only { display: none !important; }
[data-theme="light"] .ds-theme-light-only { display: block !important; }
[data-theme="light"] [data-theme="dark"] .ds-theme-dark-only { display: block !important; }
[data-theme="light"] [data-theme="dark"] .ds-theme-light-only { display: none !important; }

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

@media (max-width: 1000px) {
  .ds-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-panel__split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 650px) {
  .ds-panel { padding: 23px 20px; }
  .ds-card-grid { grid-template-columns: minmax(0, 1fr); }
  .ds-card { min-height: 217px; padding: 48px 18px 42px; }
  .ds-tabs { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .ds-dialog { padding: 32px 24px 26px; }
  .ds-dialog::before { left: 24px; right: 24px; }
  .ds-dialog__actions { grid-template-columns: minmax(0, 1fr); }
  .ds-newsletter { padding: var(--space-6) var(--space-5); }
  .ds-newsletter__form { grid-template-columns: minmax(0, 1fr); }
  .ds-nav { flex-wrap: wrap; }
  .ds-nav--overlay { padding: 17px var(--gutter-narrow, 20px); }
  .ds-nav--overlay nav { display: none; }
  .ds-section { padding-block: var(--space-16); }
  .ds-section--tight { padding-block: var(--space-12); }
  .ds-nav__brand { width: 112px; }
  .ds-nav__links { gap: var(--space-4); }
  .ds-footer { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ds-hero { min-height: 560px; padding: var(--space-24) var(--gutter-narrow, 20px) var(--space-12); }
  .ds-hero__media::after { background: linear-gradient(var(--media-shade-soft), transparent 24%, var(--media-shade-strong) 50%, var(--bg-deep) 94%); }
  .ds-lead { font-size: 18px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .ds-scope *,
  .ds-scope *::before,
  .ds-scope *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .ds-release__cover:hover img,
  .ds-artist:hover .ds-artist__figure { transform: none; }
}

/* site/scene.css */
/* ACTIVATED Agency — Maße und Werte der Szenen. Erzeugt aus inhalt/site.json, nicht von Hand ändern. */
:root {
  --st-plane-ratio: 1.77683;
  --st-plane-focus: 0.5;
  --st-band-left: 41.148%;
  --st-band-top: 34.431%;
  --st-band-width: 18.301%;
  --st-band-height: 20.191%;
  --st-sign-x: 50.299%;
  --st-sign-y: 43.996%;
  --st-sign-width: 12.201%;
  --st-glass-left: 0%;
  --st-glass-width: 100%;
  --st-glass-top: 0%;
  --st-glass-bottom: 100%;
  --st-ticker-top: 0%;
  --st-ticker-height: 0%;
  --st-floor-top: 101.063%;
  --st-lift-x: 50%;
  --st-lift-y: 48%;
}

/* site/site.css */
/*
 * 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); }
.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; }
}

/* site/agency.css */
/*
 * Agency-Etage (Level 01). Ergänzt die gemeinsame Gestaltung der Tower-Etagen (site.css der
 * Labelwelten) um die Szenen der Agency: Bühne der Exclusives, Booking-Roster, Etagenwahl im
 * Aufzug, Anfragearten und das Anfrageformular. Dieselbe Formsprache: Glas mit Lichtkante,
 * das Symbol der Marke als leuchtender Knoten, Leitungen zwischen Erklärung und Gegenstand.
 * Farben, Schriften, Abstände und Zeiten kommen aus tokens.css.
 */

/* ---------- Kopfzeile: sechs Szenen brauchen etwas mehr Breite ---------- */

@media (max-width: 1360px) {
  .st-agency .st-bar__nav { display: none; }
}
.st-agency .st-bar__brand img { height: 46px; }

/* ---------- 01 Ankunft: Räume der Agency-Etage ---------- */

/* Das Flurbild zeigt die Räume in Perspektive, nicht als gerade Glasboxen nebeneinander: Rechteckige
   „Licht aus“-Flächen je Raum würden als schwarze Balken über Decke, Wand und Boden liegen. Das Licht
   geht deshalb auf der ganzen Etage gleichmäßig an (Lichtbereiche in site.json), und das Ansteuern eines
   Raums verdunkelt keine anderen Flächen; Knoten, Leitung und Konsole heben den Raum hervor. */
.st-agency .st-plane[data-zone] .st-zone { opacity: 0; }

/* Die flache Etage ist per Tastatur anwählbar (floorFocus in agency.js); der Rahmen zeigt den Fokus. */
.st-agency .st-look:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }

/* Agency room anchors: no lift, avoidance, depth scale or changing label side.
   The symbol's centre is the source-image point in both projection modes. */
.st-agency .st-spots li[hidden] { display: none; }
.st-agency .st-node { translate: none; left: -24px; right: auto; top: -24px; width: 48px; height: 48px; gap: 0; flex-direction: row; }
.st-agency .st-node__core { width: 48px; height: 48px; }
.st-agency .st-node__label { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.st-agency .st-node[data-spot="care"] .st-node__label { left: 0; transform: none; }
.st-agency .st-node[data-spot="office"] .st-node__label { left: auto; right: 0; transform: none; }
.st-agency .st-nodes { z-index: 7; }
.st-agency .st-look__keys:not([hidden]) { display: flex; }

/* A separate, non-interactive stage allows three small native link targets.
   All foreground geometry stays below the room anchors, including their motion. */
.st-agency .st-agency-duo[data-figure-mode] { inset: 0; display: block; width: 100%; height: 100%; z-index: 5; }
.st-agency-duo .st-greeter__stage { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; overflow: clip; }
.st-agency-duo .st-greeter__stage::after { display: none; }
.st-agency .st-arrival__copy { width: 46vw; max-width: 48vw; gap: 12px; }
.st-agency .st-arrival__lead { max-width: none; font-size: 15px; line-height: 1.55; }
.st-agency .st-console { top: var(--st-bar); padding: 6px; }
.st-agency .st-console__item { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
.st-agency .st-console__title { margin-bottom: 3px; }
.st-agency .st-hint { left: var(--gutter); transform: none; }
.st-agency-figure { position: absolute; aspect-ratio: 1; pointer-events: none; }
/* Register the cropped torso seams at the physical edges (89.8% x / 91% y).
   The small transparent padding in the PNG must not leave a seam inside the scene. */
.st-agency-figure--fluffy { --figure-size: min(25vw, 34svh, 360px); width: var(--figure-size); right: calc(var(--figure-size) * -.102); bottom: 7svh; }
.st-agency-figure--vixxy { --figure-size: min(24vw, 31svh, 330px); width: var(--figure-size); left: 49%; bottom: calc(var(--figure-size) * -.09); }
.st-agency-figure__still, .st-agency-figure__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 6px 12px rgb(0 0 0 / .35)); }
.st-agency-figure__canvas { opacity: 0; }
.st-agency-figure.is-live-figure .st-agency-figure__canvas { opacity: 1; }
.st-agency-figure.is-live-figure .st-agency-figure__still { opacity: 0; }
.st-agency-duo .st-greeter__figure-action, .st-agency-duo .st-vixxy__action { position: absolute; left: 35%; top: 34%; width: 43%; height: 49%; bottom: auto; border-radius: 45%; pointer-events: auto; z-index: 3; }
.st-agency-duo .st-vixxy__action { left: 24%; top: 30%; width: 46%; height: 54%; }
.st-vixxy__action:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
/* Wie Records: Die Plattform steht auf der Unterkante, ihr Sockel läuft unter den Bildrand (Projektor -13 %).
   Owner-Wunsch 01.10.2026: größer als zuvor (189 px am Desktop), Records als Vorbild (dort 303 px). */
.st-agency-duo .st-holobox { left: 68%; bottom: 0; width: min(19vw, 28svh, 300px); height: auto; min-height: 164px; aspect-ratio: 1 / 1.65; }
/* Reserve the two text lines at their readable font size even on a 344 px screen. */
.st-agency-duo .st-holobox__art, .st-agency-duo .st-holobox__action { bottom: max(38%, calc(19% + 44px)); }
/* Radial falloffs finish at transparent pixels; no clipped cone/rectangle. */
.st-agency-duo .st-holobox__beam { background: radial-gradient(ellipse at 50% 88%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 68%); mask-image: linear-gradient(transparent, black 20% 80%, transparent); -webkit-mask-image: linear-gradient(transparent, black 20% 80%, transparent); }
.st-agency-duo .st-holobox__projector { mask-image: radial-gradient(ellipse, black 55%, transparent 74%); -webkit-mask-image: radial-gradient(ellipse, black 55%, transparent 74%); }
.st-agency-duo .st-holobox__caption { font-size: 10px; bottom: 19%; }

@media (min-width: 1101px) and (max-height: 800px) {
  .st-agency .st-console { left: calc(50% - 180px); right: auto; width: 360px; }
  .st-agency .st-arrival__copy { gap: 8px 18px; grid-template-columns: 1fr 1.2fr; align-items: center; }
  .st-agency .st-arrival__copy > .ds-eyebrow, .st-agency .st-arrival__copy > .st-actions { grid-column: 1 / -1; }
  .st-agency .st-arrival__title { font-size: 36px; }
  .st-agency .st-arrival__lead { font-size: 14px; line-height: 1.5; }
}

@media (max-aspect-ratio: 4 / 5), (max-width: 1100px) and (min-height: 641px) {
  .st-agency .st-arrival .st-look { --plane-h: calc(100svh - var(--st-arrival-top)); }
  .st-agency .st-arrival__shade { inset: calc(100svh - 98px) 0 auto; }
  .st-agency .st-arrival__copy { width: auto; max-width: none; }
  .st-agency .st-console { top: auto; }
  .st-agency .st-agency-duo[data-figure-mode] { top: var(--st-arrival-top); height: calc(100svh - var(--st-arrival-top)); }
  .st-agency-figure--fluffy { --figure-size: min(36vw, 24svh, 245px); bottom: 12px; }
  .st-agency-figure--vixxy { --figure-size: min(38vw, 25svh, 250px); left: 4%; }
  .st-agency-duo .st-holobox { left: 50%; bottom: 0; width: min(36vw, 20svh, 220px); translate: -50% 0; }
  .st-agency .st-node__label { left: 0; top: 0; transform: none; }
  .st-agency .st-arrival .st-wires { display: block; }
  .st-agency .st-look__keys { inset: calc(var(--st-arrival-top) + 12px) 10px auto; }
  .st-agency .st-swipe { max-width: calc(100% - 128px); white-space: normal; text-align: center; }
  /* Der Hinweis steht über der Holo-Box (Höhe = Breite × 1,65, mindestens 164 px). */
  .st-agency .st-hint { display: inline-flex; top: calc(100svh - max(164px, min(36vw, 20svh, 220px) * 1.65) - 52px); bottom: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; }
}
@media (max-height: 640px) and (min-aspect-ratio: 4 / 5) {
  /* Die Labelwelten heben hier Raum und Anker gemeinsam an (seit 01.10.2026, 18:05). Die Agency ordnet Figuren
     und Text in dieser Größe selbst an; angehoben lägen Artist Care und Management & Booking außerhalb. */
  .st-agency .st-arrival .st-look,
  .st-agency .st-arrival .st-pano,
  .st-agency .st-arrival .st-nodes { translate: none; }
  .st-agency .st-arrival .st-scene__body { min-height: 100svh; }
  .st-agency .st-arrival .st-look { --plane-h: 100svh; }
  .st-agency .st-look__keys { inset: calc(var(--st-bar) + 4px) auto auto 50%; transform: translateX(-50%); }
  .st-agency .st-swipe { display: none; }
  .st-agency .st-arrival__copy { gap: 6px; bottom: 18px; max-width: 45vw; }
  .st-agency .st-arrival__title { font-size: clamp(24px, 3.8vw, 38px); }
  .st-agency .st-arrival__copy .ds-eyebrow { font-size: 9px; }
  .st-agency .st-arrival__copy .st-actions { gap: 6px; }
  .st-agency .st-arrival__copy .st-holo { font-size: 10px; min-height: 36px; padding: 6px 12px; }
  .st-agency-figure--fluffy { --figure-size: 35svh; bottom: 3svh; }
  .st-agency-figure--vixxy { --figure-size: 35svh; left: 48%; }
  /* Höchstens 29svh breit: Die Oberkante bleibt unter dem Knopf Management & Booking. */
  .st-agency-duo .st-holobox { left: 69%; width: 29svh; bottom: 0; }
}
html:not(.st-js) .st-agency .st-look { touch-action: auto; }

/* ---------- 02 Exclusives: Bühne mit Spotlicht ---------- */

.st-cast .st-scene__body {
  background:
    radial-gradient(ellipse 70% 60% at 72% 30%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    linear-gradient(140deg, var(--panel-start), var(--bg-deep) 68%);
}
.st-cast__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head stage" "panel stage" "tabs tabs";
  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-cast__head { grid-area: head; }
.st-cast__text { margin: 0; }
.st-cast__panels { grid-area: panel; align-self: end; display: grid; }
.st-cast__tabs { grid-area: tabs; }

.st-cast__stage {
  --st-mx: 50%;
  --st-my: 30%;
  grid-area: stage;
  position: relative;
  isolation: isolate;
  align-self: stretch;
  min-height: clamp(360px, 62svh, 760px);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px var(--st-glass-rim), 0 40px 90px -30px rgb(0 0 0 / .85);
}
.st-cast__wall { position: absolute; inset: 0; z-index: -2; }
.st-cast__wall img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.9); }
.st-cast__wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at var(--st-mx) var(--st-my), transparent, color-mix(in srgb, var(--bg-deep) 62%, transparent) 70%),
    linear-gradient(transparent 55%, var(--bg-deep));
}
/* Spotlicht von oben; beim Wechsel läuft ein Lichtband über die Bühne. */
.st-cast__beam {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 46% at 50% 0, color-mix(in srgb, var(--text) 16%, transparent), transparent 70%),
    conic-gradient(from 180deg at 50% -8%, transparent 162deg, color-mix(in srgb, var(--accent-tint) 14%, transparent) 172deg 188deg, transparent 198deg);
  mix-blend-mode: screen;
}
.st-cast__beam::after {
  content: "";
  position: absolute;
  inset: -20% -40%;
  background: linear-gradient(100deg, transparent 40%, color-mix(in srgb, var(--accent) 22%, transparent) 50%, transparent 60%);
  transform: translateX(-60%);
  opacity: 0;
}
.st-motion .st-cast__stage.is-switching .st-cast__beam::after { animation: st-cast-sweep 1.1s var(--ease-out) both; }
@keyframes st-cast-sweep { 0% { opacity: 0; transform: translateX(-60%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }

/* Nur das gewählte Porträt steht im Bild; die übrigen laden erst bei Bedarf (lazy und nicht angezeigt). */
.st-cast__photo {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  display: none;
  height: 94%;
  aspect-ratio: 4 / 5;
  margin: 0;
  translate: -50% 0;
}
.st-cast__photo.is-on { display: block; }
.st-cast__photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  -webkit-mask-image: linear-gradient(black 72%, transparent);
  mask-image: linear-gradient(black 72%, transparent);
  filter: drop-shadow(0 30px 50px rgb(0 0 0 / .6));
}
.st-cast__floor {
  position: absolute;
  left: 50%;
  bottom: 3%;
  z-index: 0;
  width: 70%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent);
  filter: blur(8px);
  transform: translateX(-50%);
  pointer-events: none;
}
/* Anschluss der Leitung am linken Rand des Porträts. */
.st-cast__plug { position: absolute; left: calc(50% - 37.6%); top: 46%; width: 0; height: 0; }

.st-cast__panel { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-6); outline-offset: 6px; }
.st-cast__panel[hidden] { display: none; }
.st-cast__no { margin: 0; color: var(--accent-text); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.st-cast__name { margin: 2px 0 0; text-wrap: balance; }
.st-cast__roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.st-cast__roles .ds-badge { min-height: 26px; }
.st-cast__genre { margin: 4px 0 0; color: var(--text); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.st-cast__panel .ds-body { margin: 2px 0 0; }
.st-cast__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.st-cast__tabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-2); }
@media (max-width: 1360px) {
  .st-cast__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Acht Artists in einer Reihe: Gesicht und Name kompakt, damit kein Name abgeschnitten wird. */
.st-cast__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 60px;
  padding: 8px 10px 8px 8px;
  border: 0;
  border-radius: var(--radius-full);
  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)), var(--st-glass-fill);
  box-shadow: inset 0 1px 0 var(--st-glass-shine), inset 0 0 0 1px var(--st-glass-rim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
  transition: color var(--duration-base) var(--ease-standard), box-shadow var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-out);
}
.st-cast__face {
  flex: none;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--st-glass-rim);
  transition: box-shadow var(--duration-slow) var(--ease-standard);
}
.st-cast__face img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) brightness(.8); transition: filter var(--duration-slow) var(--ease-standard); }
.st-cast__tabname { display: -webkit-box; overflow: hidden; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.st-cast__tab:hover,
.st-cast__tab:focus-visible { color: var(--text); transform: translateY(-2px); }
.st-cast__tab:hover .st-cast__face img,
.st-cast__tab:focus-visible .st-cast__face img { filter: none; }
.st-cast__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.st-cast__tab[aria-selected="true"] { color: var(--accent-text); box-shadow: inset 0 1px 0 var(--st-glass-shine), inset 0 0 0 1px var(--accent-line), 0 0 26px var(--st-glow-soft); }
.st-cast__tab[aria-selected="true"] .st-cast__face { box-shadow: 0 0 0 2px var(--accent), 0 0 18px var(--st-glow-soft); }
.st-cast__tab[aria-selected="true"] .st-cast__face img { filter: none; }

/* ---------- 03 Booking: das Roster als Auswahl ---------- */

.st-booking .st-backdrop img { filter: blur(3px) brightness(.5) saturate(.9); transform: scale(1.03); }
.st-booking .st-backdrop::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg-deep) 94%, transparent), color-mix(in srgb, var(--bg-deep) 72%, transparent) 40%, color-mix(in srgb, var(--bg-deep) 58%, transparent)),
    linear-gradient(color-mix(in srgb, var(--bg-deep) 70%, transparent), transparent 24% 70%, var(--bg-deep));
}
.st-booking__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(300px, .62fr) minmax(0, 1.38fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "head filters" "tray roster" ". roster";
  gap: var(--space-5) var(--space-10);
  align-content: start;
  min-height: 100svh;
  padding: calc(var(--st-bar) + clamp(12px, 4svh, 48px)) calc(var(--gutter) + 56px) var(--st-edge) var(--gutter);
}
.st-booking__head { grid-area: head; }
.st-booking__text { margin: 0; }
.st-filters { grid-area: filters; align-self: end; display: flex; flex-wrap: wrap; gap: 8px; }
.st-roster { grid-area: roster; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(132px, 30vw), 1fr)); gap: 12px; align-content: start; margin: 0; padding: 0; list-style: none; }
.st-roster__item { position: relative; display: grid; }
.st-roster__item[hidden] { display: none; }

.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent), inset 0 0 0 1px var(--st-glass-rim);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  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), background var(--duration-base) var(--ease-standard);
}
.st-chip__n { color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; }
.st-chip:hover { color: var(--text); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 22%, transparent), inset 0 0 0 1px var(--accent-line); }
.st-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.st-chip[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); box-shadow: 0 0 22px var(--st-glow-soft); }
.st-chip[aria-pressed="true"] .st-chip__n { color: color-mix(in srgb, var(--on-accent) 70%, transparent); }

.st-pick {
  --st-mx: 50%;
  --st-my: 30%;
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  width: 100%;
  margin: 0;
  padding: 8px 8px 12px;
  border: 0;
  border-radius: var(--radius-lg);
  color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 7%, transparent), color-mix(in srgb, var(--bg-deep) 60%, transparent)), color-mix(in srgb, var(--surface) 62%, transparent);
  box-shadow: inset 0 1px 0 var(--st-glass-shine), inset 0 0 0 1px var(--st-glass-rim), 0 18px 40px -22px rgb(0 0 0 / .9);
  text-align: left;
  cursor: pointer;
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
  transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-standard);
}
.st-pick__photo { position: relative; display: block; overflow: hidden; aspect-ratio: 1; margin-bottom: 6px; border-radius: var(--radius-md); background: var(--bg-deep); }
.st-pick__photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82) saturate(.92); transition: filter var(--duration-slow) var(--ease-standard), transform var(--duration-scene) var(--ease-out); }
.st-pick__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at var(--st-mx) var(--st-my), color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
}
.st-pick__name { overflow: hidden; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.st-pick__genre { display: -webkit-box; overflow: hidden; color: var(--text-muted); font-size: 12px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.st-pick__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg-deep) 78%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.st-pick__check {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-deep) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 40%, transparent);
  color: transparent;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), transform var(--duration-slow) var(--ease-out);
}
.st-pick__check .ds-icon { width: 16px; height: 16px; stroke-width: 3; }
.st-pick:hover,
.st-pick:focus-visible { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--st-glass-shine), inset 0 0 0 1px var(--accent-line), 0 22px 46px -20px rgb(0 0 0 / .9); }
.st-pick:hover .st-pick__photo img,
.st-pick:focus-visible .st-pick__photo img { filter: none; transform: scale(1.04); }
.st-pick:hover .st-pick__photo::after,
.st-pick:focus-visible .st-pick__photo::after { opacity: 1; }
.st-pick:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.st-pick[aria-pressed="true"] { box-shadow: inset 0 1px 0 var(--st-glass-shine), 0 0 0 1px var(--accent), 0 0 30px var(--st-glow-soft), 0 22px 46px -20px rgb(0 0 0 / .9); }
.st-pick[aria-pressed="true"] .st-pick__photo img { filter: none; }

/* Erstes Bild schneller: Bis agency.js den Aufbau beginnt (Klasse st-measured), rechnet der Browser nur die
   Ankunft; die übrigen Szenen folgen unmittelbar danach, bevor stack.js sie vermisst. Ohne Skript nicht aktiv. */
html.st-js:not(.st-measured) .st-agency .st-scene:not(.st-arrival) { content-visibility: auto; contain-intrinsic-size: auto 100svh; }

/* Kapitel-Leiste: Nur der sichtbare Knoten nimmt den Zeiger an. Der ganze Eintrag samt unsichtbarer
   Beschriftung lag sonst als Klickfläche über der rechten Kartenspalte des Rosters (Fokus verdeckt). */
.st-agency .st-rail,
.st-agency .st-rail a { pointer-events: none; }
.st-agency .st-rail__node { pointer-events: auto; }

/* ---------- Social-Profile der Artists (Owner-Auftrag 01.10.2026) ----------
   Kleine runde Icons wie die Netzwerke im Fußbereich (.st-social); Profile und Quellen in roster.json. */
.st-artist-socials { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.st-artist-socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 14%, transparent), 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), transform var(--duration-base) var(--ease-standard);
}
.st-artist-socials a:hover,
.st-artist-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); transform: translateY(-1px); }
.st-artist-socials a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.st-artist-socials .st-social { width: 17px; height: 17px; }
.st-pick[aria-pressed="true"] .st-pick__check { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 14px var(--st-glow-soft); transform: scale(1.06); }
/* Anschluss der Leitung am linken Rand des zuletzt gewählten Artists. */
.st-pick__anchor { position: absolute; left: 0; top: 36%; width: 0; height: 0; }

.st-tray { grid-area: tray; align-self: start; display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-6); }
.st-tray__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-motion .st-booking.is-live:not(.is-covered) .st-tray .st-stats__dot { animation: st-blink 2.8s var(--ease-in-out) infinite; }
.st-tray__count { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.st-tray__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.st-tray__actions [data-tray-request][aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.st-line { display: grid; gap: 0; justify-items: start; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.st-line .ds-micro { margin-bottom: 2px; color: var(--text-muted); }
.st-line .ds-link { display: inline-flex; align-items: center; min-height: 44px; }

.st-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.st-chips:empty { display: none; }
.st-chips li { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 4px 0 12px; border-radius: var(--radius-full); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--text); font-size: 12px; font-weight: 600; }
.st-chips button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.st-chips button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
.st-chips button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ---------- 04 Services ---------- */

.st-services .st-scene__body {
  background:
    radial-gradient(ellipse at 0 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
    linear-gradient(220deg, var(--panel-start), var(--bg-deep) 70%);
}
.st-services .st-label__grid {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "head ribbon" "chapters ribbon" "tools ribbon" "actions ribbon";
  row-gap: var(--space-5);
}
.st-services__lead { margin: 0; }
.st-services__actions { grid-area: actions; }
.st-service { gap: var(--space-2); }
.st-facts { display: grid; gap: var(--space-3); margin: var(--space-1) 0 0; }
.st-facts div { display: grid; gap: 2px; }
.st-facts dt { color: var(--accent-text); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.st-facts dd { margin: 0; color: var(--text-soft); font-size: 15px; line-height: 1.55; }
.st-services .st-chapters { min-height: 0; }

/* ---------- 05 Tower: Aufzug mit Etagenwahl ---------- */

.st-lift .st-scene__body { height: auto; min-height: max(100svh, 640px); }
.st-lift__copy { inset: auto auto calc(var(--st-edge) + 18px) var(--gutter); gap: var(--space-4); max-width: min(560px, 100% - 2 * var(--gutter)); }
.st-panel { display: grid; gap: var(--space-2); width: 100%; padding: var(--space-4) var(--space-3) var(--space-3); }
.st-panel__title { display: flex; align-items: center; gap: 10px; margin: 0 var(--space-2) var(--space-1); color: var(--text-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.st-motion .st-lift.is-live:not(.is-covered) .st-panel .st-stats__dot { animation: st-blink 2.8s var(--ease-in-out) infinite; }
.st-panel__floors { position: relative; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.st-panel__floors::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 66px;
  width: 1px;
  background: linear-gradient(var(--accent-line), color-mix(in srgb, var(--accent) 16%, transparent));
}
.st-floor {
  position: relative;
  display: grid;
  grid-template-columns: 36px 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.st-floor__no { color: var(--accent-text); font-family: var(--font-mono); font-size: 15px; letter-spacing: .04em; text-align: right; text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); }
.st-floor__symbol {
  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);
  transition: box-shadow var(--duration-slow) var(--ease-standard);
}
.st-floor__symbol img { width: auto; max-width: 26px; height: 22px; object-fit: contain; }
.st-floor__text { display: grid; gap: 1px; min-width: 0; }
.st-floor__text strong { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.st-floor__text small { overflow: hidden; color: var(--text-soft); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.st-floor:hover,
.st-floor:focus-visible,
.st-floor.is-chosen { background: color-mix(in srgb, var(--accent) 11%, transparent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.st-floor:hover .st-floor__symbol,
.st-floor:focus-visible .st-floor__symbol,
.st-floor.is-chosen .st-floor__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-floor:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.st-lift .st-world:not([hidden]) { display: block; }

/* ---------- 06 Kontakt: Anfragearten zum Formular ---------- */

.st-contact__grid { grid-template-areas: "head call" "requests call" "panel call"; }
.st-requests { grid-area: requests; display: grid; gap: var(--space-3); pointer-events: auto; }
.st-requests .ds-label { color: var(--text-muted); }
.st-requests__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.st-request {
  display: grid;
  align-content: start;
  gap: 6px;
  height: 100%;
  min-height: 44px;
  padding: 14px 16px 16px;
  color: var(--text);
  text-decoration: none;
  transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-standard);
}
.st-request .st-step__no { margin-bottom: 2px; }
.st-request strong { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.st-request > span:last-child { color: var(--text-soft); font-size: 13.5px; line-height: 1.45; }
.st-request:hover,
.st-request:focus-visible { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--st-glass-shine), inset 0 0 0 1px var(--accent-line), 0 0 30px var(--st-glow-soft), 0 30px 70px -20px rgb(0 0 0 / .75); }
.st-request:hover .st-step__no,
.st-request:focus-visible .st-step__no { background: var(--accent); color: var(--on-accent); }
.st-request:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.st-contact__panel { gap: var(--space-3); }
.st-guarantee { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
.st-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--line); list-style: none; }
.st-channels li { display: grid; gap: 0; min-width: 0; }
.st-channels .ds-link { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

/* ---------- Anfrageformular ---------- */

.st-inquiry__picked { display: grid; gap: var(--space-2); }
.st-inquiry__picked[hidden] { display: none; }
.st-picker { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.st-picker[hidden] { display: none; }
.st-picker legend { padding: 0; margin-bottom: var(--space-2); }
.st-picker__group { margin: var(--space-2) 0 0; color: var(--accent-text); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.st-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px var(--space-3); }
.st-picker__item { min-height: 40px; align-items: center; }
.st-picker[aria-invalid="true"] legend { color: var(--danger); }
.st-picker .ds-field__error { grid-column: 1 / -1; }
.st-count-chars { justify-self: end; font-family: var(--font-mono); font-size: 11px; }
/* Kästchen mit mindestens 24 px; die ganze Zeile bleibt die Bedienfläche. */
.st-agency .ds-check { grid-template-columns: 24px minmax(0, 1fr); }
.st-agency .ds-check input { width: 24px; height: 24px; margin-top: -1px; }
.st-agency .ds-check input:checked { box-shadow: inset 0 0 0 5px var(--accent), inset 0 0 0 24px var(--on-accent); }

/* ---------- Fußzeile: sieben Etagen ---------- */

.st-agency .st-divisions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-agency .st-footer__brand img { height: 52px; }
.st-agency .st-menu__head img { height: 46px; }

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

@media (min-width: 1001px) and (max-height: 820px) {
  .st-cast__grid { gap: var(--space-4) var(--space-8); padding-top: calc(var(--st-bar) + 10px); padding-bottom: 20px; }
  .st-cast__panel { padding: var(--space-4) var(--space-5); }
  .st-cast__panel .ds-body { font-size: 15px; line-height: 1.55; }
  .st-cast__text { font-size: 16px; }
  .st-cast__tab { min-height: 56px; }
  .st-cast__face { width: 40px; height: 40px; }
  .st-booking__grid { gap: var(--space-4) var(--space-8); padding-top: calc(var(--st-bar) + 10px); }
  .st-requests__list { gap: var(--space-2); }
  .st-request { padding: 10px 14px 12px; }
  .st-request > span:last-child { display: none; }
  .st-services .st-label__grid { row-gap: var(--space-4); padding-top: calc(var(--st-bar) + 10px); padding-bottom: 20px; }
  .st-facts { gap: var(--space-2); }
  .st-facts dd { font-size: 14px; line-height: 1.5; }
}

@media (max-width: 1000px) {
  .st-cast__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "head" "stage" "tabs" "panel";
    gap: var(--space-5);
    padding-right: var(--gutter);
  }
  .st-cast__stage { min-height: 0; height: clamp(340px, 54svh, 560px); }
  .st-cast__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .st-cast__panels { align-self: start; }
  .st-cast .st-wires { display: none; }
  .st-booking__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "head" "tray" "filters" "roster";
    gap: var(--space-5);
    padding-right: var(--gutter);
  }
  .st-booking .st-wires { display: none; }
  .st-roster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .st-services .st-label__grid { grid-template-rows: auto auto auto auto auto; grid-template-areas: "ribbon" "head" "chapters" "tools" "actions"; }
  .st-contact__grid { grid-template-areas: "head" "requests" "call" "panel"; }
  .st-requests__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-contact .st-wires { display: none; }
  .st-agency .st-divisions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .st-agency .st-bar__brand img { height: 34px; }
  .st-cast__grid,
  .st-booking__grid { padding-inline: var(--gutter-narrow); }
  .st-cast__stage { height: clamp(320px, 52svh, 480px); }
  .st-cast__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-cast__tab { min-height: 56px; padding-right: 10px; gap: 8px; font-size: 11px; letter-spacing: .06em; }
  .st-cast__face { width: 40px; height: 40px; }
  .st-cast__panel { padding: var(--space-5); }
  .st-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .st-pick__genre { font-size: 11.5px; }
  .st-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter-narrow) * -1); padding: 2px var(--gutter-narrow) 6px; scrollbar-width: none; }
  .st-filters::-webkit-scrollbar { display: none; }
  .st-chip { flex: none; }
  .st-requests__list { grid-template-columns: minmax(0, 1fr); }
  .st-request > span:last-child { display: none; }
  .st-channels { grid-template-columns: minmax(0, 1fr); }
  .st-lift__copy { left: var(--gutter-narrow); right: var(--gutter-narrow); max-width: none; }
  .st-floor__text small { white-space: normal; }
  .st-agency .st-divisions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-agency .st-footer__brand img { height: 40px; }
  .st-agency .st-menu__head img { height: 34px; }
  .st-picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 400px) {
  .st-agency .st-bar__brand img { height: 30px; }
}

/* Hochformat: Der Aufzug steht oben, Text und Etagenwahl darunter. FLUFFY und die Raumknoten folgen der
   gemeinsamen Gestaltung der Etagen (Knoten weichen FLUFFY, Holo-Box, Konsole und Text selbst aus). */
@media (max-aspect-ratio: 4 / 5) {
  .st-lift .st-scene__body { display: block; min-height: 100svh; padding-top: calc(var(--st-bar) + 46svh); }
  .st-lift .st-backdrop { bottom: auto; height: calc(var(--st-bar) + 50svh); }
  .st-lift__copy { position: relative; inset: auto; margin: 0 var(--gutter-narrow) calc(var(--st-edge) + 20px); }
  .st-lift .st-wires { display: none; }
}

/* Laptop-Höhen: Leistungen ohne Einleitung, damit Leistung, Steuerung und Termin im Bild bleiben. */
@media (min-width: 1001px) and (max-height: 960px) {
  .st-services__lead { display: none; }
  .st-services .st-chapter { padding: var(--space-5); }
}

/* Niedrige Bildschirme: alle Szenen bleiben bedienbar. */
@media (max-height: 640px) and (min-aspect-ratio: 4 / 5) {
  .st-lift .st-sister__text { display: none; }
  .st-cast__text { display: none; }
}

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

html:not(.st-js) .st-cast__panels { gap: var(--space-4); }
html:not(.st-js) .st-tray__actions,
html:not(.st-js) .st-filters,
html:not(.st-js) .st-pick__check { display: none; }
html:not(.st-js) .st-lift .st-scene__body { height: auto; }
html:not(.st-js) .st-lift__copy { position: relative; inset: auto; padding: calc(var(--st-bar) + var(--space-12)) var(--gutter) var(--space-12); }

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

html:not(.st-motion) .st-cast__photo,
html:not(.st-motion) .st-cast__tab,
html:not(.st-motion) .st-pick,
html:not(.st-motion) .st-pick__photo img,
html:not(.st-motion) .st-request,
html:not(.st-motion) .st-floor { transition: none !important; }
html:not(.st-motion) .st-cast__beam::after { animation: none !important; }

@media print {
  .st-cast__stage, .st-filters, .st-tray__actions { display: none !important; }
}

/* site/booking.css */
/* Booking follows the predecessor's hierarchy: large exclusive portraits first,
   a separate, smaller roster below, and readable information on every device. */
.st-agency:has(.st-booking.is-live:not(.is-covered)) .st-bar { background: var(--bg-deep); }
.st-booking .st-booking__grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  grid-template-rows: auto auto auto;
  grid-template-areas: "head tray" "filters filters" "roster roster";
  gap: 32px 56px;
  width: 100%;
  max-width: 1640px;
  margin-inline: auto;
  padding-bottom: clamp(64px, 7vw, 112px);
}
.st-booking__head .ds-display-1 { font-size: clamp(44px, 5vw, 76px); }
.st-booking__text { max-width: 54ch; }
.st-booking .st-tray { gap: 10px; padding: 22px 26px; }
.st-booking .st-tray__count { font-size: 24px; }
.st-booking .st-line { display: flex; flex-wrap: wrap; column-gap: 20px; padding-top: 8px; }
.st-booking .st-line .ds-micro { flex-basis: 100%; font-size: 10px; }
.st-booking .st-line .ds-link { font-size: 14px; overflow-wrap: anywhere; }
.st-booking .st-filters { align-self: start; }
.st-booking-roster { grid-area: roster; display: grid; gap: 64px; min-width: 0; }
.st-roster-group { min-width: 0; }
.st-roster-group[hidden] { display: none; }
.st-roster-group__head { margin-bottom: 24px; }
.st-roster-group__head h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.1;
  text-transform: uppercase;
}
.st-roster-group__head h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.st-roster-group__head h3 span { color: var(--text-muted); font: 12px var(--font-mono); }
.st-roster-group--exclusive .st-roster-group__head h3 { color: var(--accent-text); }
.st-roster-group--exclusive .st-roster-group__head h3::after { background: linear-gradient(90deg, var(--accent-line), transparent); }
.st-roster-group__head p { margin: 0; color: var(--text-soft); font-size: 15px; line-height: 1.5; }
.st-roster-group--bookable { border-top: 1px solid var(--line); padding-top: 48px; }
.st-roster-group__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.st-roster-group--bookable .st-roster-group__cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.st-booking-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--st-glass-rim);
  border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 96%, black), var(--bg-deep));
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.st-roster-group--exclusive .st-booking-card { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.st-booking-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 24px var(--st-glow-soft); }
.st-booking-card__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-deep); }
.st-booking-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.st-booking-card__photo::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / .72)); pointer-events: none; }
.st-booking-card__badge { position: absolute; z-index: 1; bottom: 16px; left: 18px; color: var(--accent-text); font-family: var(--font-mono); font-size: 10px; line-height: 1.4; letter-spacing: .09em; text-transform: uppercase; }
.st-booking-card__body { display: flex; flex: 1; flex-direction: column; align-items: stretch; gap: 10px; padding: 20px; }
.st-booking-card__body h4 { margin: 0; font-family: var(--font-display); font-size: clamp(25px, 2.2vw, 32px); line-height: 1.08; text-transform: uppercase; overflow-wrap: anywhere; }
.st-booking-card__genre { margin: 0; color: var(--accent-text); font-size: 13px; font-weight: 600; line-height: 1.5; }
.st-booking-card__pitch { margin: 0 0 10px; color: var(--text-soft); font-size: 14px; line-height: 1.55; }
.st-booking-card__actions { display: grid; gap: 8px; margin-top: auto; }
.st-booking-card__actions button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.st-booking-card__select { color: var(--text); background: transparent; }
.st-booking-card__select .ds-icon { width: 16px; height: 16px; flex: none; }
.st-booking-card__tick { display: none; }
.st-booking-card__select[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.st-booking-card__select[aria-pressed="true"] .st-booking-card__plus { display: none; }
.st-booking-card__select[aria-pressed="true"] .st-booking-card__tick { display: block; }
.st-booking-card__actions .st-booking-card__request { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.st-booking-card__request span { font-size: 18px; line-height: 1; }
.st-booking-card__actions button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.st-roster-group--bookable .st-booking-card__photo { aspect-ratio: 1; }
.st-roster-group--bookable .st-booking-card__body { padding: 16px; gap: 8px; }
.st-roster-group--bookable .st-booking-card__body h4 { font-size: 24px; }
.st-roster-group--bookable .st-booking-card__badge { color: var(--text); left: 14px; bottom: 12px; font-size: 9px; }
.st-roster-group--bookable .st-booking-card__genre { color: var(--text-soft); }
.st-roster-group--bookable .st-booking-card__pitch { font-size: 13px; }
@media (hover: hover) and (pointer: fine) {
  .st-booking-card:hover { border-color: var(--accent-line); }
  .st-booking-card__select:hover { background: var(--accent-soft); border-color: var(--accent-line); }
  .st-booking-card__actions .st-booking-card__request:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
}
@media (max-width: 1200px) {
  .st-booking .st-booking__grid { gap: 28px; }
  .st-roster-group__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .st-roster-group--bookable .st-roster-group__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 900px) {
  .st-booking .st-booking__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head" "tray" "filters" "roster"; }
  .st-roster-group__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-roster-group--bookable .st-roster-group__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .st-booking .st-booking__grid { gap: 24px; }
  .st-booking .st-tray { padding: 20px; }
  .st-booking .st-tray__actions { display: grid; }
  .st-booking .st-line { column-gap: 12px; }
  .st-booking .st-line .ds-link { font-size: 13px; }
  .st-roster-group__cards, .st-roster-group--bookable .st-roster-group__cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .st-booking-roster { gap: 44px; }
  .st-roster-group__head h3 { font-size: 28px; gap: 10px; }
  .st-roster-group__head p { font-size: 14px; }
  .st-roster-group--bookable { padding-top: 32px; }
  .st-booking-card__photo { aspect-ratio: 1; }
  .st-booking-card__actions { grid-template-columns: .85fr 1.15fr; }
  .st-booking-card__body h4 { font-size: 32px; }
  .st-roster-group--bookable .st-booking-card { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: start; }
  .st-roster-group--bookable .st-booking-card__photo { margin: 12px 0 0 12px; border-radius: 8px; }
  .st-roster-group--bookable .st-booking-card__badge { display: none; }
  .st-roster-group--bookable .st-booking-card__body { padding: 14px; }
  .st-roster-group--bookable .st-booking-card__body h4 { font-size: 25px; }
  .st-roster-group--bookable .st-booking-card__actions { grid-template-columns: minmax(0, 1fr); }
  .st-roster-group--bookable .st-booking-card__genre { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-booking-card, .st-booking-card__actions button { transition: none; }
}