html, body { margin: 0; height: 100%; background: #000; overflow: hidden; cursor: none; font-family: system-ui, Roboto, Arial, sans-serif; }
#stage { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
.layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; background: #000; opacity: 0; transition: opacity .5s ease; }
video.layer, img.layer { object-fit: contain; }
iframe.layer { background: #fff; }
.layer.in { opacity: 1; }
#screen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; text-align: center; background: #0d1117; color: #e6edf3; padding: 4vw; box-sizing: border-box; }
#screen.hidden { display: none; }
#screen h1 { font-size: 4vw; margin: 0 0 2vw; }
#screen p { font-size: 2vw; color: #9da7b3; margin: 1vw 0; line-height: 1.4; }
#screen .code { font-size: 9vw; font-weight: 700; letter-spacing: .12em; color: #fff; background: #161b22; border: 2px solid #30363d; border-radius: 1.5vw; padding: 1.5vw 3vw; display: inline-block; margin: 2vw 0; }
#screen .small { font-size: 1.4vw; color: #6e7681; }
#screen.warn h1 { color: #ff7b72; }

/* Bildschirm-Drehung: Video/Bilder kommen bereits vorgedreht vom Server; Webinhalte (Hotel-Typen, HTML5) werden hier gedreht.
   r90 = Bildschirm um 90° im Uhrzeigersinn gedreht → Inhalt 90° gegen den Uhrzeigersinn, rm90 umgekehrt. */
.layer.rot { inset: auto; top: 50%; left: 50%; width: 100vh; height: 100vw; }
.layer.rot.r90 { transform: translate(-50%, -50%) rotate(-90deg); }
.layer.rot.rm90 { transform: translate(-50%, -50%) rotate(90deg); }

/* Interaktive Inhalte: Attract-Modus (QR-Code) und Display-App – wie im Pi-Player (player/web/player.css) */
.ia-attract { background: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; display: flex; align-items: center; justify-content: center; gap: 7vmin; padding: 6vmin; box-sizing: border-box; border: 0; }
.ia-attract .ia-left { flex: 1 1 0; min-width: 0; }
.ia-attract .ia-kicker { display: inline-block; background: var(--c, #2563eb); color: #fff; font-weight: 800; font-size: 3.2vmin; letter-spacing: .08em; text-transform: uppercase; padding: .8vmin 2.4vmin; border-radius: 99px; }
.ia-attract h1 { margin: 2.4vmin 0 1.6vmin; font-size: 9vmin; line-height: 1.05; }
.ia-attract .ia-hint { margin: 0 0 4vmin; font-size: 4.6vmin; color: #cbd5e1; }
.ia-attract .ia-steps { margin: 0; padding-left: 5vmin; font-size: 3.6vmin; line-height: 1.7; color: #94a3b8; }
.ia-attract .ia-right { flex: 0 0 auto; text-align: center; }
.ia-attract .ia-qr { position: relative; width: 38vmin; height: 38vmin; background: #fff; border-radius: 3vmin; padding: 2vmin; box-sizing: border-box; border: 1.2vmin solid var(--c, #2563eb); }
.ia-attract .ia-qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.ia-attract .ia-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10vmin; color: #94a3b8; }
.ia-attract .ia-url { margin-top: 2.4vmin; font-size: 2.4vmin; color: #94a3b8; font-family: ui-monospace, Menlo, monospace; white-space: nowrap; max-width: 50vmin; }
.ia-attract .ia-qrtext { display: none; }
.ia-attract .ia-bg { position: absolute; inset: 0; background: #000; }
.ia-attract .ia-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s; }
.ia-attract .ia-bg img.on { opacity: 1; }
.ia-attract.ia-preview { display: block; padding: 0; background: #000; }
.ia-attract.ia-preview .ia-left { display: none; }
.ia-attract.ia-preview .ia-right { position: absolute; right: 3vmin; bottom: 3vmin; z-index: 2; background: rgba(15,23,42,.88); padding: 1.6vmin; border-radius: 3vmin; }
.ia-attract.ia-preview .ia-qrtext { display: block; font-size: 2.6vmin; font-weight: 700; margin-bottom: 1.2vmin; color: #fff; max-width: 26vmin; }
.ia-attract.ia-preview .ia-qr { width: 22vmin; height: 22vmin; padding: 1vmin; border-width: .7vmin; border-radius: 2vmin; }
.ia-attract.ia-preview .ia-url { margin-top: 1vmin; font-size: 1.6vmin; max-width: none; }
@media (orientation: portrait) { .ia-attract { flex-direction: column; text-align: center; gap: 5vmin; } .ia-attract .ia-steps { display: inline-block; text-align: left; } }
iframe.ia-session { background: #000; z-index: 20; }