/*
 * Tower-Journey auf Level 05, 2026-09-29.
 * Nur vorhandene ACTIVATED-Tokens; Mischungen daraus per color-mix. Eine bewusste
 * Inszenierung (Aufzug), danach ruhige Arbeitsflächen. Keine Scroll-Kopplung.
 * Ladereihenfolge: tokens.css, components.css, academy-shell.css, academy-detail.css, diese Datei.
 */

/* Kopf: eine Frage, ein nächster Schritt. */
.tower-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); grid-template-rows: auto auto auto; align-items: end; gap: var(--space-2) var(--space-10); margin-bottom: var(--space-6); }
.tower-kicker { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.tower-head h1 { grid-column: 1; grid-row: 2 / span 2; margin: 0; max-width: 22ch; font-size: clamp(40px, 3.9vw, 62px); }
.tower-lead { grid-column: 2; grid-row: 2; margin: 0 0 var(--space-3); color: var(--text-muted); font-size: 16px; line-height: 1.6; }
.tower-actions { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Bühne: feste Bildproportion, Container-Einheiten halten Hotspots auf dem Motiv. */
.tower-stage { position: relative; margin-bottom: var(--space-4); border: 1px solid var(--line); background: var(--bg-deep); }
/* overflow: clip statt hidden: Fokus oder Skript dürfen die Szene nie seitlich verschieben. */
.stage-viewport { position: relative; aspect-ratio: 1672 / 941; overflow: clip; container-type: size; isolation: isolate; background: var(--bg-deep); }
.scene { position: absolute; inset: 0; }
.scene[data-state="inactive"] { visibility: hidden; }
.scene[data-state="leaving"] { z-index: 2; pointer-events: none; }
.scene-canvas { position: absolute; top: 0; height: 100%; width: calc(100cqh * var(--arn)); left: calc(50% - 100cqh * var(--arn) / 2); transform-origin: 50% 50%; transition: scale 450ms var(--ease-out); }
.stage-viewport[data-parallax="on"] .scene[data-state="active"] .scene-canvas { scale: 1.035; }
.scene-image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.scene-caption { position: absolute; inset: 0 0 auto 0; z-index: 3; padding: clamp(14px, 2.4cqw, 28px) clamp(16px, 2.8cqw, 32px) clamp(40px, 6cqh, 64px); background: linear-gradient(180deg, color-mix(in oklab, var(--bg-deep) 78%, transparent), transparent); pointer-events: none; }
.scene-caption-title { margin: 0 0 var(--space-1); color: var(--text); font: 700 clamp(22px, 3.1cqw, 36px)/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.scene-caption-title:focus { outline: none; }
.scene-caption-hint { margin: 0; max-width: 46ch; color: var(--text-soft); font-size: clamp(12px, 1.25cqw, 14px); line-height: 1.5; }
.scene-controls { position: absolute; left: clamp(12px, 2cqw, 24px); bottom: clamp(12px, 2cqw, 24px); z-index: 4; }
.stage-back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--line-strong); background: color-mix(in oklab, var(--bg-deep) 72%, transparent); color: var(--text); font: 700 13px/1.3 var(--font-sans); cursor: pointer; backdrop-filter: blur(var(--blur-sm)); }
.stage-level { position: absolute; top: clamp(10px, 1.6vw, 18px); right: clamp(10px, 1.6vw, 18px); z-index: 6; display: grid; justify-items: end; min-width: 88px; padding: var(--space-2) var(--space-4); border: 1px solid var(--line); background: color-mix(in oklab, var(--bg-deep) 64%, transparent); backdrop-filter: blur(var(--blur-md)); pointer-events: none; transition: opacity var(--duration-fast) var(--ease-out); }
.stage-level-label { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.stage-level strong { color: var(--accent-alt); font: 700 44px/1 var(--font-display); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px color-mix(in oklab, var(--accent-alt) 45%, transparent); }
[data-riding] .stage-level { opacity: 0; }

/* Hotspots: echte Links und Schaltflächen. Der Ring sitzt exakt auf dem Motivpunkt. */
.hotspot { position: absolute; z-index: 3; left: var(--x); top: var(--y); translate: -22px -50%; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--text); font: 500 13px/1.3 var(--font-sans); text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hotspot--flip { flex-direction: row-reverse; translate: calc(-100% + 22px) -50%; text-align: right; }
.hotspot-ring { position: relative; display: grid; flex: none; place-items: center; width: 44px; height: 44px; border: 1px solid color-mix(in oklab, var(--accent) 72%, transparent); border-radius: var(--radius-full); background: color-mix(in oklab, var(--bg-deep) 42%, transparent); backdrop-filter: blur(3px); transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.hotspot-ring::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--accent); box-shadow: var(--glow-sm); }
.hotspot-ring::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--accent); border-radius: var(--radius-full); opacity: 0; }
.hotspot-label { display: grid; gap: 2px; max-width: 30ch; padding: 7px 11px; border: 1px solid var(--line-strong); background: color-mix(in oklab, var(--bg-deep) 74%, transparent); backdrop-filter: blur(var(--blur-sm)); white-space: nowrap; }
.hotspot-label small { overflow: hidden; color: var(--text-muted); font-size: 11px; font-weight: 400; text-overflow: ellipsis; }
.hotspot--screen { translate: -50% -50%; width: var(--w); height: var(--h); min-height: 0; justify-content: center; }
.hotspot--screen .hotspot-ring { position: absolute; inset: 0; width: auto; height: auto; border-radius: var(--radius-sm); border-color: color-mix(in oklab, var(--accent) 50%, transparent); background: transparent; backdrop-filter: none; }
.hotspot--screen .hotspot-ring::before { display: none; }
.hotspot--screen .hotspot-ring::after { border-radius: var(--radius-sm); }
.hotspot--screen .hotspot-label { position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; padding: 4px 8px; font-size: 12px; }
.hotspot--lift .hotspot-ring { border-color: var(--accent); box-shadow: 0 0 26px color-mix(in oklab, var(--accent) 55%, transparent); }
.hotspot--narrow-only, .hotspot .label-short { display: none; }
.hotspot:focus-visible { outline: none; }
.hotspot:focus-visible .hotspot-ring, .hotspot:focus-visible .hotspot-label { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .hotspot:hover .hotspot-ring { transform: scale(1.08); box-shadow: var(--glow-md); }
  .hotspot--screen:hover .hotspot-ring { transform: none; background: color-mix(in oklab, var(--accent) 16%, transparent); }
  .hotspot:hover .hotspot-label { border-color: var(--accent-line); background: color-mix(in oklab, var(--bg-deep) 86%, transparent); }
  .stage-back:hover { border-color: var(--accent-line); }
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .scene[data-state="active"] .hotspot-ring::after { animation: tower-pulse 1.8s var(--ease-out) .9s 2; }
}
@keyframes tower-pulse { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }

/* Stationskarten am Hotspot: Popover-API; Anker, wo verfügbar, sonst unten mittig. */
.hotspot-card { position: fixed; inset: auto auto max(16px, env(safe-area-inset-bottom)) 50%; translate: -50% 0; width: min(400px, calc(100vw - 32px)); max-height: min(72svh, 600px); margin: 0; overflow: auto; padding: var(--space-6); border: 1px solid var(--line-strong); border-top: 2px solid var(--accent); background: var(--surface); color: var(--text-soft); box-shadow: var(--shadow-dialog); opacity: 0; transform: translateY(8px) scale(.98); transform-origin: 50% 100%; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), overlay 180ms allow-discrete, display 180ms allow-discrete; }
.hotspot-card:popover-open { opacity: 1; transform: none; }
@starting-style { .hotspot-card:popover-open { opacity: 0; transform: translateY(8px) scale(.98); } }
.hotspot-card::backdrop { background: transparent; }
.hotspot-card h3 { margin: 0 0 var(--space-2); font-size: 30px; }
.hotspot-card p { font-size: 14px; }
.hotspot-card-kicker { margin: 0 0 var(--space-2); color: var(--accent-text); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hotspot-card-zone { margin: var(--space-4) 0 0; color: var(--text); font: 700 20px/1.1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.hotspot-card--fluffy { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.hotspot-card--fluffy img { width: 96px; height: 118px; object-fit: cover; object-position: left top; }
.hotspot-card--fluffy h3 { font: 700 15px/1.5 var(--font-sans); text-transform: none; letter-spacing: 0; }

/* Aufzug: Blick aus der Glaskabine. Die Spur ruht auf Level 00 (unterste Platte). */
/* Durchsichtig: Die Platten decken während der Fahrt, zwischen den Türen erscheint die Lernwelt. */
.lift { position: absolute; inset: 0; z-index: 5; overflow: clip; background: transparent; }
.lift-shaft { position: absolute; inset: 0; overflow: clip; }
.lift-track { position: absolute; inset: 0 0 auto 0; display: grid; grid-template-rows: repeat(6, 1fr); height: 600%; transform: translateY(-83.3333%); will-change: transform; }
.lift-slab { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in oklab, var(--bg-deep) 86%, var(--surface-hover)) 0 84%, color-mix(in oklab, var(--surface-raised) 80%, var(--text-dim)) 84% 100%); }
.lift-slab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 16%; height: 2px; background: color-mix(in oklab, var(--accent) 60%, transparent); box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 50%, transparent); }
.lift-slab-label { position: absolute; left: 6%; bottom: 22%; z-index: 1; display: grid; gap: var(--space-2); color: color-mix(in oklab, var(--text) 30%, transparent); font: 700 clamp(40px, 12cqh, 120px)/1 var(--font-display); letter-spacing: .02em; }
.lift-slab-label b { font: inherit; }
.lift-slab-label small { color: color-mix(in oklab, var(--text) 62%, transparent); font: 700 clamp(11px, 1.35cqw, 15px)/1.3 var(--font-sans); letter-spacing: .18em; }
.lift-glimpse { position: absolute; inset: 0 0 16% 0; width: 100%; height: 84%; max-width: none; object-fit: cover; object-position: 38% 50%; filter: blur(12px) brightness(.52) saturate(.9); transform: scale(1.14); }
.lift-slab--landing { background: transparent; }
.lift-slab--landing::after { display: none; }
.lift-door { position: absolute; top: 0; bottom: 0; width: 50%; display: grid; align-items: center; background: linear-gradient(90deg, var(--surface-raised), var(--bg-deep) 70%, var(--surface-raised)); box-shadow: inset 0 0 0 1px var(--line-strong); }
.lift-door--left { left: 0; justify-items: end; padding-right: 7%; }
.lift-door--right { right: 0; justify-items: start; padding-left: 7%; }
.lift-door--left::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: var(--accent); box-shadow: 0 0 24px color-mix(in oklab, var(--accent) 65%, transparent); }
.lift-door-mark { color: color-mix(in oklab, var(--text) 42%, transparent); font: 700 clamp(28px, 9cqh, 96px)/1 var(--font-display); letter-spacing: .04em; }
.lift-glass { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0 40%, color-mix(in oklab, var(--text) 7%, transparent) 44%, transparent 52%), linear-gradient(90deg, transparent calc(33.3% - 1px), var(--line) calc(33.3% - 1px) 33.3%, transparent 33.3% calc(66.6% - 1px), var(--line) calc(66.6% - 1px) 66.6%, transparent 66.6%); }
.lift-display { position: absolute; top: clamp(10px, 1.6vw, 18px); right: clamp(10px, 1.6vw, 18px); z-index: 2; display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px var(--space-3); padding: var(--space-2) var(--space-4); border: 1px solid var(--line-strong); background: color-mix(in oklab, var(--bg-deep) 72%, transparent); backdrop-filter: blur(var(--blur-md)); }
.lift-arrow { grid-row: 1 / span 2; color: var(--accent); font-size: 18px; line-height: 1; }
.lift-digits { display: block; height: 1em; overflow: hidden; color: var(--accent-alt); font: 700 44px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.lift-reel, .lift-names-reel { display: flex; flex-direction: column; will-change: transform; }
.lift-reel > span { height: 1em; line-height: 1; }
.lift-names { display: block; height: 1.5em; overflow: hidden; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .16em; line-height: 1.5; }
.lift-names-reel > span { height: 1.5em; }
.lift-display.is-arrived .lift-digits { text-shadow: 0 0 20px color-mix(in oklab, var(--accent-alt) 70%, transparent); }
.lift-display.is-arrived .lift-arrow { opacity: 0; }
/* Höhere Spezifität als die Glasknopf-Regel (.academy-shell .button setzt position: relative). */
.academy-shell .lift .lift-skip { position: absolute; right: clamp(10px, 1.6vw, 18px); bottom: clamp(10px, 1.6vw, 18px); z-index: 3; background: color-mix(in oklab, var(--bg-deep) 70%, transparent); }

/* Weg durch Level 05: drei Zonen wie auf dem Bildschirm, Stationen als Aufzugsschacht. */
.tower-path { margin-top: var(--space-12); container-type: inline-size; }
.path-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-6) 0 0; padding: 0; list-style: none; border: 1px solid var(--line); background: var(--surface); }
.path-zone { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-6); border-right: 1px solid var(--line); }
.path-zone:last-child { border-right: 0; }
.zone-head h3 { margin: 0 0 var(--space-2); }
.zone-head p { margin: 0; color: var(--text-muted); font-size: 14px; }
.zone-screen { margin-bottom: var(--space-2) !important; color: var(--accent-text) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.zone-note { margin: auto 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--text-dim); font-size: 12px; }
.path-stations { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.path-stations::before { content: ""; position: absolute; top: 26px; bottom: 26px; left: 21px; width: 1px; background: var(--line-strong); }
.station { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; }
.station-number { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-muted); font: 700 20px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.station[data-status="next"] .station-number { border-color: var(--accent); background: var(--accent); color: var(--on-accent); box-shadow: var(--glow-sm); }
.station[data-status="done"] .station-number { border-color: var(--accent-line); color: var(--accent-text); }
.station-body { min-width: 0; }
.station-title { margin: 3px 0 var(--space-1); color: var(--text); font: 700 24px/1.05 var(--font-display); letter-spacing: .015em; text-transform: uppercase; }
.station-status { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2) !important; color: var(--text-muted); font-size: 12px; font-weight: 700; }
.status-dot { flex: none; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--line-strong); }
.station[data-status="next"] .status-dot { background: var(--accent); box-shadow: var(--glow-sm); }
.station[data-status="next"] .station-status { color: var(--accent-text); }
.station[data-status="done"] .status-dot { background: var(--accent-alt); }
.station[data-status="active"] .status-dot { background: var(--text-soft); }
.station[data-status="waiting"] .status-dot { background: var(--warning); }
.station:is([data-status="locked"], [data-status="pending"]) .status-dot { border: 1px dashed var(--text-dim); background: transparent; }
.station-detail { margin: 0 0 var(--space-2) !important; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.station-progress { margin: 0 0 var(--space-2) !important; color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.station-meter { display: block; height: 3px; margin-bottom: var(--space-2); overflow: hidden; background: var(--line); }
.station-meter > span { display: block; width: var(--fill); height: 100%; background: var(--accent); }
.station-action { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); font-size: 14px; font-weight: 700; text-underline-offset: 4px; }
.station-action::after { content: ""; position: absolute; inset: 0; }
.station:has(.station-action:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.station-action:focus-visible { outline: none; }
.path-stations--compact .station { padding-block: var(--space-2); }
.path-stations--compact .station-title { font-size: 20px; }
@media (hover: hover) and (pointer: fine) {
  .station:hover .station-action { text-decoration: underline; }
  .station:hover .station-number { border-color: var(--accent-line); }
}
@container (max-width: 820px) {
  .path-zones { grid-template-columns: minmax(0, 1fr); }
  .path-zone { border-right: 0; border-bottom: 1px solid var(--line); }
  .path-zone:last-child { border-bottom: 0; }
}

/* Grundriss von Level 05: Räume der Fachwelten, Praxisraum, verschlossener Bonus. */
.room-plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-flow: dense; gap: 1px; margin: var(--space-6) 0 0; padding: 0; list-style: none; border: 1px solid var(--line); background: var(--line); }
.room { min-width: 0; background: var(--bg); }
.room--large, .room--bonus { grid-column: span 2; }
.room > :is(a, div) { position: relative; display: grid; align-content: start; gap: var(--space-2); height: 100%; min-height: 148px; padding: var(--space-5); color: var(--text-soft); text-decoration: none; }
.room-no { position: absolute; top: var(--space-4); right: var(--space-4); color: var(--text-dim); font: 700 16px/1 var(--font-display); letter-spacing: .06em; }
.room-count { color: var(--accent-text); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.room-title { max-width: 24ch; color: var(--text); font: 700 22px/1.08 var(--font-display); letter-spacing: .015em; text-transform: uppercase; }
.room-focus { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.room--practice > a { background: color-mix(in oklab, var(--accent) 6%, var(--bg)); }
.room--bonus > div { border: 1px dashed var(--line-strong); background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in oklab, var(--line) 50%, transparent) 10px 11px); }
.room--bonus .room-count { color: var(--text-dim); }
.room > a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .room > a:hover { background: var(--surface-raised); box-shadow: inset 0 -2px var(--accent); }
}

/* Übergang von Station zu Arbeitsseite: der Titel wandert (View Transitions API). */
::view-transition-group(academy-target) { animation-duration: 380ms; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
::view-transition-old(academy-target), ::view-transition-new(academy-target) { height: 100%; object-fit: contain; }
::view-transition-old(root) { animation: 200ms var(--ease-out) both tower-fade-out; }
::view-transition-new(root) { animation: 260ms var(--ease-out) both tower-fade-in; }
@keyframes tower-fade-out { to { opacity: 0; } }
@keyframes tower-fade-in { from { opacity: 0; } }

.motion-toggle[aria-pressed="true"] { border-color: var(--accent-line); color: var(--text); }

/* Schmal: Bühne 4:3, Beschriftung kompakt, kleine Bildschirmfelder weichen einer Sammelstation. */
@media (max-width: 999px) {
  .tower-head { grid-template-columns: minmax(0, 1fr); }
  .tower-lead, .tower-actions { grid-column: 1; grid-row: auto; }
  .tower-head h1 { max-width: 18ch; }
}
@media (max-width: 650px) {
  .tower-head h1 { font-size: clamp(38px, 11vw, 56px); }
  .tower-lead { font-size: 16px; }
  .tower-actions > * { flex: 1 1 100%; }
  .stage-viewport { aspect-ratio: 4 / 3; }
  .hotspot--wide-only, .hotspot .label-full { display: none; }
  .hotspot--narrow-only { display: inline-flex; }
  .hotspot .label-short { display: inline; }
  .hotspot { font-size: 12px; }
  .hotspot-ring { width: 40px; height: 40px; }
  .hotspot { translate: -20px -50%; }
  .hotspot--flip { translate: calc(-100% + 20px) -50%; }
  .hotspot-label { max-width: 20ch; padding: 5px 8px; }
  .hotspot-label small { display: none; }
  .scene-caption-hint { display: none; }
  .stage-level { min-width: 0; padding: var(--space-1) var(--space-3); }
  .stage-level strong { font-size: 30px; }
  .lift-digits { font-size: 30px; }
  .lift-display { padding: var(--space-1) var(--space-3); }
  .room--large { grid-column: auto; }
  .hotspot-card { inset: auto 16px max(16px, env(safe-area-inset-bottom)) 16px; translate: none; width: auto; }
}
@supports (position-area: bottom) {
  @media (min-width: 651px) {
    .hotspot-card[data-anchored] { inset: auto; translate: none; margin: var(--space-2) 0; position-area: bottom; position-try-fallbacks: flip-block, flip-inline; transform-origin: 50% 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-canvas, .stage-level, .hotspot-ring, .hotspot-card { transition: none; }
  .stage-viewport[data-parallax="on"] .scene[data-state="active"] .scene-canvas { scale: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
[data-motion="reduce"] :is(.scene-canvas, .stage-level, .hotspot-ring, .hotspot-card) { transition: none !important; }
@media (forced-colors: active) {
  .hotspot-ring, .hotspot-label, .stage-level, .lift-display, .stage-back { border: 1px solid ButtonText; background: Canvas; color: ButtonText; forced-color-adjust: none; }
  .station-number, .room > :is(a, div) { border: 1px solid CanvasText; }
  .station[data-status="next"] .station-number { outline: 2px solid Highlight; }
}
@media print {
  .tower-stage, .hotspot-card, .tower-actions { display: none !important; }
}

/* ---------- Oberflächen nach der Labelwelten-Überarbeitung, 29.09.2026 ----------
 * Dieselben Punkte wie in den Labelwelten Level 03/02, ohne Änderung des Aufbaus:
 * Knöpfe als Glasfläche mit Lichtkante statt flacher Kästen, das Academy-Symbol als
 * leuchtender Knoten statt Punkt, Leitungen mit fließendem Licht, Fluffy nah mit dem
 * nächsten Schritt, Seitenleiste mit Aufzugsschacht und Mission des Towers, Fußzeile
 * mit Weiterleitungen. Nur vorhandene Tokens; Bewegung nur ohne reduzierte Bewegung.
 */
@property --academy-beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes academy-beam { to { --academy-beam: 360deg; } }
@keyframes academy-flow { to { background-position: 0 240px; } }

/* Knöpfe: Glasfläche, umlaufende Lichtkante, die Hauptaktion leuchtet. Gilt auch für den öffentlichen Eingang. */
:is(.academy-shell, .public-page) .button {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: var(--radius-full);
  padding-inline: var(--space-6);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--text) 11%, transparent), color-mix(in oklab, var(--text) 2%, transparent) 52%, color-mix(in oklab, var(--bg-deep) 36%, transparent)),
    color-mix(in oklab, var(--surface-raised) 74%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 24%, transparent), var(--shadow-card);
  letter-spacing: .04em;
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(1.3);
  backdrop-filter: blur(var(--blur-sm)) saturate(1.3);
}
:is(.academy-shell, .public-page) .button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background:
    conic-gradient(from var(--academy-beam), transparent 0 58%, color-mix(in oklab, var(--accent) 85%, transparent) 72%, var(--accent-tint) 78%, transparent 90% 100%),
    linear-gradient(180deg, color-mix(in oklab, var(--text) 28%, transparent), color-mix(in oklab, var(--text) 8%, transparent) 60%, color-mix(in oklab, var(--accent) 26%, 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: academy-beam 4.8s linear infinite paused;
  pointer-events: none;
}
:is(.academy-shell, .public-page) .button--primary,
:is(.academy-shell, .public-page) .button.primary {
  color: var(--on-accent);
  background:
    radial-gradient(90% 160% at 50% 0, color-mix(in oklab, var(--accent-tint) 55%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 74%, var(--text)), var(--accent) 48%, color-mix(in oklab, var(--accent) 76%, var(--bg-deep)));
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 55%, transparent), 0 12px 30px -12px color-mix(in oklab, var(--accent) 60%, transparent), 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent);
}
:is(.academy-shell, .public-page) .button--primary::before,
:is(.academy-shell, .public-page) .button.primary::before {
  background: conic-gradient(from var(--academy-beam), transparent 0 60%, color-mix(in oklab, var(--text) 90%, transparent) 74%, transparent 86% 100%);
  animation-duration: 6s;
}
:is(.academy-shell, .public-page) .button--quiet,
:is(.academy-shell, .public-page) .button.quiet,
:is(.academy-shell, .public-page) .button--ghost {
  color: var(--text-soft);
  background: linear-gradient(180deg, color-mix(in oklab, var(--text) 7%, transparent), color-mix(in oklab, var(--bg-deep) 42%, transparent)), color-mix(in oklab, var(--surface) 46%, transparent);
}
:is(.academy-shell, .public-page) .button--danger { color: var(--danger); background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger); }
:is(.academy-shell, .public-page) .button--danger::before { display: none; }
:is(.academy-shell, .public-page) .button--small { padding-inline: var(--space-4); }
:is(.academy-shell, .public-page) .button:is([disabled], [aria-disabled="true"]) { color: var(--text-dim); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
:is(.academy-shell, .public-page) .button:is([disabled], [aria-disabled="true"])::before { display: none; }
@media (hover: hover) and (pointer: fine) {
  :is(.academy-shell, .public-page) .button:not([disabled]):not([aria-disabled="true"]):hover {
    color: var(--text);
    background:
      radial-gradient(90% 160% at 50% 0, color-mix(in oklab, var(--accent) 16%, transparent), transparent 64%),
      linear-gradient(180deg, color-mix(in oklab, var(--text) 13%, transparent), color-mix(in oklab, var(--bg-deep) 34%, transparent)),
      color-mix(in oklab, var(--surface-raised) 80%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 30%, transparent), var(--shadow-card), 0 0 22px color-mix(in oklab, var(--accent) 24%, transparent);
  }
  :is(.academy-shell, .public-page) .button--primary:not([disabled]):not([aria-disabled="true"]):hover,
  :is(.academy-shell, .public-page) .button.primary:not([disabled]):not([aria-disabled="true"]):hover {
    color: var(--on-accent);
    background:
      radial-gradient(90% 160% at 50% 0, color-mix(in oklab, var(--accent-tint) 70%, transparent), transparent 62%),
      linear-gradient(180deg, color-mix(in oklab, var(--accent-hover) 70%, var(--text)), var(--accent-hover) 50%, color-mix(in oklab, var(--accent) 76%, var(--bg-deep)));
    box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 65%, transparent), 0 16px 36px -12px color-mix(in oklab, var(--accent) 70%, transparent), 0 0 34px color-mix(in oklab, var(--accent) 34%, transparent), 0 0 0 1px var(--accent);
  }
  :is(.academy-shell, .public-page) .button:not([disabled]):not([aria-disabled="true"]):hover::before { animation-play-state: running; }
}
:is(.academy-shell, .public-page) .button:focus-visible::before,
:is(.academy-shell, .public-page) :is(.button--primary, .button.primary)::before { animation-play-state: running; }

/* Knoten: das Academy-Symbol leuchtet auf dem Motiv, ein Lichtstrahl läuft um den Ring. */
.hotspot-ring {
  width: 46px;
  height: 46px;
  border: 1.5px solid transparent;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--text) 14%, transparent), transparent 62%) padding-box,
    color-mix(in oklab, var(--bg-deep) 62%, transparent) padding-box,
    conic-gradient(from var(--academy-beam), color-mix(in oklab, var(--accent) 32%, transparent) 0 42%, var(--accent) 62%, var(--accent-tint) 68%, color-mix(in oklab, var(--accent) 32%, transparent) 86% 100%) border-box;
  box-shadow: var(--shadow-float), 0 0 18px color-mix(in oklab, var(--accent) 26%, transparent);
  animation: academy-beam 6s linear infinite paused;
}
.hotspot-ring::before {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: url("assets/academy-symbol.png") center / contain no-repeat;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 40%, transparent);
  transition: filter 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.hotspot-label {
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface-raised) 86%, transparent), color-mix(in oklab, var(--bg-deep) 86%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 18%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--text) 12%, transparent), var(--shadow-float);
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
}
.hotspot--screen .hotspot-label { border-radius: var(--radius-sm); }
.hotspot:is(:hover, :focus-visible) .hotspot-ring { animation-play-state: running; animation-duration: 2.4s; }
.hotspot:is(:hover, :focus-visible) .hotspot-ring::before { filter: brightness(1.12) drop-shadow(0 0 6px var(--accent)); transform: scale(1.06); }
@media (hover: hover) and (pointer: fine) {
  .hotspot:hover .hotspot-ring { transform: scale(1.06); box-shadow: var(--shadow-float), 0 0 30px color-mix(in oklab, var(--accent) 45%, transparent); }
  .hotspot:hover .hotspot-label { background: linear-gradient(180deg, color-mix(in oklab, var(--surface-raised) 92%, transparent), color-mix(in oklab, var(--bg-deep) 92%, transparent)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 20%, transparent), inset 0 0 0 1px var(--accent-line), var(--shadow-float); }
}
.scene[data-state="active"] .hotspot--lift .hotspot-ring { animation-play-state: running; }

/* Karten am Knoten: Glas mit Lichtkante. */
.hotspot-card {
  border: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, color-mix(in oklab, var(--text) 7%, transparent), transparent 46%), linear-gradient(180deg, var(--dialog-start), var(--dialog-end));
  box-shadow: var(--shadow-dialog), inset 0 1px 0 color-mix(in oklab, var(--accent) 60%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--text) 12%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.3);
  backdrop-filter: blur(var(--blur-lg)) saturate(1.3);
}

/* Fluffy tritt nah heran und zeigt den nächsten eigenen Schritt. */
.hotspot-card--fluffy { width: min(520px, calc(100vw - 32px)); grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5) var(--space-6) var(--space-5) 0; overflow: visible; }
.hotspot-card--fluffy img { width: 150px; height: 190px; margin: calc(var(--space-10) * -1) 0 0 calc(var(--space-2) * -1); object-fit: cover; object-position: 12% 0; filter: drop-shadow(-10px 16px 24px color-mix(in oklab, var(--bg-deep) 80%, transparent)); }
.hotspot-card--fluffy h3 { font: 700 20px/1.1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.fluffy-next { display: grid; gap: var(--space-2); margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: color-mix(in oklab, var(--accent) 9%, transparent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.fluffy-next p { margin: 0; color: var(--accent-text); font-size: 11px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fluffy-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .hotspot-card--fluffy:popover-open img { animation: academy-fluffy-in 900ms var(--ease-out) both; }
}
@keyframes academy-fluffy-in { from { opacity: 0; transform: translateX(40px) rotate(4deg); } 60% { opacity: 1; } }
@media (max-width: 650px) {
  .hotspot-card--fluffy { grid-template-columns: 96px minmax(0, 1fr); padding-right: var(--space-4); }
  .hotspot-card--fluffy img { width: 96px; height: 128px; margin-top: calc(var(--space-6) * -1); }
}

/* Leitungen: Der Stationsweg ist ein Lichtleiter, auf dem Licht zur nächsten Station fließt. */
.path-stations::before { width: 2px; left: 21px; background: linear-gradient(var(--accent-line), color-mix(in oklab, var(--accent) 14%, transparent)); box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 26%, transparent); }
.path-stations::after { content: ""; position: absolute; top: 26px; bottom: 26px; left: 20.5px; width: 3px; background: linear-gradient(transparent 0 40%, var(--accent-tint) 50%, transparent 60% 100%) 0 0 / 100% 240px repeat-y; opacity: .75; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .path-stations::after { animation: academy-flow 3.4s linear infinite; }
}
.station-number { border-radius: var(--radius-md); background: linear-gradient(180deg, color-mix(in oklab, var(--surface-raised) 90%, transparent), var(--surface)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 16%, transparent); }
.station[data-status="next"] .station-number { box-shadow: 0 0 0 1px var(--accent), 0 0 20px color-mix(in oklab, var(--accent) 55%, transparent); }

/* Seitenleiste: der aktuelle Weg leuchtet, unten der Aufzugsschacht und die Mission des Towers. */
.sidebar nav { position: relative; }
.nav-link[aria-current="page"] { box-shadow: -8px 0 18px -10px var(--accent); }
.tower-stack { position: relative; gap: var(--space-3); border-left: 0; padding-left: var(--space-5); }
.tower-stack::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: 2px; border-radius: 2px; background: linear-gradient(var(--accent), color-mix(in oklab, var(--accent) 14%, transparent)); box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 40%, transparent); }
.tower-stack > span { position: relative; }
.tower-stack > span::before { content: ""; position: absolute; top: 50%; left: calc(var(--space-5) * -1 + 1px); width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line-strong); transform: translateY(-50%); }
.tower-stack > .current::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.tower-mission { display: grid; gap: 0; margin: 0; color: var(--text); font: 700 22px/1.05 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.tower-mission span { color: var(--accent-text); }

/* Fußzeile: Weiterleitungen ins Netzwerk und zu den Rechtstexten. */
.app-footer { align-items: center; }
.app-footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.app-footer-links a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--text-muted); text-decoration: none; }
.app-footer-links a:hover, .app-footer-links a:focus-visible { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.app-footer > a { display: inline-flex; align-items: center; min-height: var(--target-min); }
/* Helles Thema: Die Etage im Aufzugsschacht bleibt lesbar (Limette ist auf Weiß zu hell). */
[data-theme="light"] .tower-stack .current { color: var(--accent-text); }

@media (prefers-reduced-motion: reduce) {
  :is(.academy-shell, .public-page) .button::before, .hotspot-ring { animation: none !important; }
}
[data-motion="reduce"] :is(.academy-shell, .public-page) .button::before,
[data-motion="reduce"] .hotspot-ring { animation: none !important; }
@media (forced-colors: active) {
  :is(.academy-shell, .public-page) .button { border: 1px solid ButtonText; }
  :is(.academy-shell, .public-page) .button::before, .path-stations::after { display: none; }
}

/* Ohne sichtbare Etagennummer (Owner 04.10.2026): Die Anzeige im Aufzug nennt nur noch Namen, der Stand oben rechts ein Wort. */
.lift-digits[hidden] { display: none; }
.stage-level strong { font-size: 30px; letter-spacing: .03em; }