/* Option „Experimentelle Darstellung“ und die Bühne des 3D-Dioramas. Das 2D-Rad bleibt unverändert. */
.exp { margin: 10px 0 0; }
.exp label { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; font: 600 .82rem var(--sans); color: var(--ink-2); cursor: pointer; }
.exp input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.exp input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.exp input:disabled, .exp input:disabled + span { cursor: not-allowed; opacity: .6; }
.exp small { display: block; margin: 2px 0 0 24px; font: 500 .7rem var(--mono); color: var(--muted); }

/* 3D-Bühne: volle Spaltenbreite, mindestens 360 px hoch. Die Endgröße steht schon beim Laden, nichts springt. */
.stage.is3d { max-width: none; aspect-ratio: 4 / 5; min-height: 360px; }
.stage.is3d > svg { display: none; }
.dio { position: absolute; inset: 0; }
.dio canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }

@media (min-width: 1024px) {
  /* Die linke Spalte soll auf 1080p ohne Scrollen passen: Höhe an die Fensterhöhe koppeln, aber nie unter 360 px */
  .col-left .stage.is3d { aspect-ratio: auto; height: max(360px, 42vh); max-width: none; }
}

/* Bedienung im Schacht: Knöpfe unten links, Etagen-Regler am rechten Rand (nur sichtbar, wenn es Untergeschosse gibt) */
.dio-nav { position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.dio-btn { padding: 6px 10px; font: 600 .75rem var(--sans); color: var(--ink); background: color-mix(in srgb, var(--paper) 85%, transparent); border: 1px dashed var(--muted); cursor: pointer; }
.dio-btn:hover { border-style: solid; }
.dio-btn:focus-visible, .dio-floor:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dio-floor { position: absolute; left: calc(100% - 2px); top: 12%; z-index: 2; height: 22px; margin: 0; transform-origin: 0 0; transform: rotate(90deg); accent-color: var(--accent); cursor: pointer; }
.dio-floor[hidden], .dio-nav[hidden] { display: none; }

/* Tooltip der Zonen (Position setzt die Szene per JS) */
.dio-tip { position: absolute; z-index: 3; pointer-events: none; padding: 3px 7px; font: 500 .72rem var(--mono); color: var(--paper); background: var(--ink); white-space: nowrap; }
.dio-tip[hidden] { display: none; }