/* Nur die Einbettung auf room-atlas.com/funktionen: Hintergrund wie die Website, kein Rand der Karte. */
html, body.ra-kino { margin: 0; background: #0a1a20; min-height: 100%; }
body.ra-kino { padding: 0; overflow-x: hidden; }
body.ra-kino .room-card { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }
.kino-fehler { color: #9db3b5; font: 15px "IBM Plex Sans", system-ui, sans-serif; padding: 24px; }
/* Die App rechnet die Höhe der Ansicht aus der Fensterhöhe (100vh); im Rahmen ist das die eigene Höhe,
   die die Website aus dem Inhalt setzt – das liefe immer auf das Minimum. Hier deshalb aus der Breite. */
body.ra-kino .sound-stage .sound-view { height: clamp(320px, 50vw, 620px); }
@media (max-width: 900px) { body.ra-kino .sound-stage .sound-view { height: clamp(280px, 72vw, 460px); } }

/* Jonas 19.10.2026: „stärkste Reflexionen, freie Kamera, Info-Knopf sowie Legende weg … Raummode soll
   stärkste immer gewählt sein, eigene nicht wählbar. Scrollen soll man in dem Fenster nicht können.“
   Nur ausgeblendet, die Module der App bleiben unverändert. */
#sound-refl-fold, #sound-camera, #sound-legend-fold, #sound-modes-own { display: none !important; }
/* Jonas 19.10.2026: „‚Kollision mit Objekten‘ kann raus, immer automatisch an“ (kino.mjs setzt es an) */
#sound-collide-row { display: none !important; }
html, body.ra-kino { overflow: hidden; }

/* Raumwahl über der Ansicht (Jonas 19.10.2026), im Stil der Umschalter von Schritt C (.sound-seg) */
#vorfuehrung { display: block; }
.kino-raeume { display: flex; width: max-content; max-width: 100%; margin: 0 0 14px; }
.kino-raeume[hidden] { display: none; }
.kino-raeume .sound-seg-btn { min-height: 38px; padding: 6px 16px; font-size: 12.5px; }
@media (max-width: 560px) { .kino-raeume { width: 100%; } .kino-raeume .sound-seg-btn { flex: 1; padding: 6px 8px; } }

/* Jonas 19.10.2026: „äußere Knöpfe sind abgeschnitten durch das Feld“ – Luft zum Rand des Rahmens */
#vorfuehrung { padding: 12px; }
@media (max-width: 560px) { #vorfuehrung { padding: 8px; } }
/* Vorrechnen beim Öffnen eines Raums: statt der Knöpfe steht rechts die Anzeige (kino.mjs statusAnzeige),
   das 3D-Modell blendet vorher weich ein (Jonas 20.10.2026) */
.kino-rechnet #sound-bar { display: none !important; }
#sound-3d { opacity: 0; transition: opacity .7s ease; }
#sound-3d.kino-da { opacity: 1; }
.kino-status { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; margin: 0 0 12px;
  border: 1px solid var(--line, #29474f); border-radius: 6px; background: var(--panel, #10272f); }
.kino-status strong { font: 600 15px var(--sans, "IBM Plex Sans", system-ui, sans-serif); color: var(--text, #e9efec); }
.kino-status-text { font: 12px var(--mono, "IBM Plex Mono", ui-monospace, monospace); color: var(--muted, #9db3b5); }
.kino-status-balken { position: relative; height: 4px; border-radius: 2px; background: rgba(97, 216, 200, .14); overflow: hidden; margin-top: 4px; }
.kino-status-balken i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--accent, #61d8c8); transition: width .3s ease; }
.kino-status.unbestimmt .kino-status-balken i { width: 35% !important; animation: kino-lauf 1.4s ease-in-out infinite; }
@keyframes kino-lauf { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { #sound-3d { transition: none; } .kino-status.unbestimmt .kino-status-balken i { animation: none; } }
/* Kamera-Symbol oben rechts in der Ansicht: zeigt, dass man das Modell drehen kann */
#sound-stage { position: relative; }
.kino-drehen { position: absolute; width: 44px; height: 44px; pointer-events: none; color: var(--accent, #61d8c8); opacity: .9; }
.kino-drehen svg { display: block; width: 100%; height: 100%; }

/* Erklärung als zwei Stichpunkte in eigenem Feld unter dem Knopf (Jonas 21.10.2026); die Zeile der App weg */
#sound-note { display: none !important; }
.kino-hinweis { margin: 10px 0 12px; padding: 12px 14px; border: 1px solid var(--line, #29474f); border-radius: 6px; }
.kino-hinweis ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
/* ohne Aufzählungspunkte (Jonas 21.10.2026) – zwei Zeilen untereinander */
.kino-hinweis li { font: 13px/1.45 var(--sans, "IBM Plex Sans", system-ui, sans-serif); color: var(--muted, #9db3b5); }
.kino-rechnet .kino-hinweis { display: none; }

/* Jonas 21.10.2026: bei den Raummoden keine Wahl „Stärkste“ und keine Zeile „21,2 Hz · Modenbereich …“ */
.sound-mode-choice, #sound-modes-range { display: none !important; }