/* FVD EVENT: Seite Technik. Ergänzt style.css um Bühnenplaner, Steckbrief und Paketraster. */

.bild--breit { aspect-ratio: 2000 / 731; }

/* Bühnenplaner */
.planer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: start; margin-top: clamp(40px, 5vw, 72px); padding: clamp(24px, 3.4vw, 48px); border: 3px solid var(--blau); }
.planer__eingabe { display: grid; gap: 18px; align-content: start; }
.planer .feld label { display: flex; justify-content: space-between; align-items: baseline; font-size: 1rem; }
.planer .feld output { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.planer__ergebnis { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--linie); }
.planer__ergebnis p { margin: 0; }
.planer__flaeche b { font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.planer__flaeche span { margin-left: 10px; color: var(--leise); }
.planer__preis { font-weight: 600; }
.planer__preis .beispiel { margin-left: 8px; }
.planer .btn { justify-self: start; margin-top: 6px; }
.planer__bild svg { width: 100%; height: auto; }
.planer__bild p { margin-top: 8px; }
.js .planer__ohne { display: block; }
#b-zeichnung .platte { fill: var(--gelb); stroke: var(--nacht); stroke-width: 1.5; }
#b-zeichnung .mass { fill: var(--nacht); font: 600 15px var(--schrift); }
#b-zeichnung .linie { stroke: var(--nacht); stroke-width: 1.5; fill: none; }
#b-zeichnung .figur { fill: var(--blau); }
#b-zeichnung .zuviel { fill: #fff; stroke-dasharray: 6 5; }

/* Steckbrief Anhänger */
.steckbrief { margin-top: var(--abstand); }
.steckbrief h3 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.02em; }
.steckbrief h3 + p { margin-top: 16px; }
.skizze { width: min(100%, 420px); margin-top: 26px; color: var(--blau); }

.pakete-fuss { margin-top: 18px; }
.paket__preis .beispiel { margin-left: 6px; }
.fragen-kontakt { margin-top: 28px; }
.seite-technik .sec--gelb .rechner-band { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 820px) {
  .planer { grid-template-columns: minmax(0, 1fr); }
  .planer__bild { order: -1; }
}

/* Streaming-Paket in der Tagungstechnik (14.10.2026) */
.technik-streaming { margin-top: clamp(22px, 2.6vw, 34px); padding-top: 18px; border-top: 3px solid var(--blau); }
.technik-streaming h3 { font-size: 1.125rem; }
.technik-streaming__text { margin-top: 8px; max-width: 36em; color: var(--leise); }
.technik-streaming__text + .knoepfe { margin-top: clamp(20px, 2.4vw, 30px); }

/* Bühne in 3D (22.10.2026): ersetzt die Draufsicht, wenn der Browser WebGL kann */
.buehne3d { position: relative; }
.buehne3d canvas { display: block; width: 100%; aspect-ratio: 560 / 470; background: radial-gradient(ellipse at 50% 30%, #1b2459, #080E32 72%); cursor: grab; touch-action: pan-y; }
.buehne3d canvas:active { cursor: grabbing; }
.buehne3d__wechsel { position: absolute; right: 10px; top: 10px; padding: 6px 12px; border: 1px solid var(--linie); background: #fff; font: 600 .8125rem var(--schrift); color: var(--nacht); cursor: pointer; }
.buehne3d__wechsel:hover { background: var(--gelb); }
.buehne3d__szene { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); margin: 0; padding: 5px 10px; background: rgba(8, 14, 50, .78); color: #fff; font: 600 .8125rem/1.35 var(--schrift); pointer-events: none; }
.planer__bild--flach .buehne3d__szene { display: none; }
.planer__bild--3d:not(.planer__bild--flach) #b-zeichnung, .planer__bild--3d:not(.planer__bild--flach) #b-zeichnung + p { display: none; }
.planer__bild--flach .buehne3d canvas { display: none; }
.planer__bild--flach .buehne3d { min-height: 44px; }
#b-zeichnung .rad { fill: var(--nacht); }
.planer__masse[hidden] { display: none; }
#b-zeichnung .anhaenger { fill: #E4E7EC; stroke: var(--nacht); stroke-width: 2; }
#b-hoehe-feld[hidden] { display: none; }
/* Zoom-Knöpfe in der 3D-Bühne */
.buehne3d__zoom { position: absolute; left: 10px; top: 10px; display: grid; gap: 6px; }
.buehne3d__zoom button { width: 36px; height: 36px; border: 1px solid var(--linie); background: #fff; color: var(--nacht); font: 700 1.125rem/1 var(--schrift); cursor: pointer; }
.buehne3d__zoom button:hover { background: var(--gelb); }
.planer__bild--flach .buehne3d__zoom { display: none; }