html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #000; overflow: hidden; }
body { font-family: "Segoe UI", system-ui, sans-serif; }

#stage { position: fixed; inset: 0; background: #000; }
.layer { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; background: #000; }
.layer.visible { opacity: 1; }
body.no-fade .layer { transition: none; }

.layer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.layer .img-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.layer .img-wrap img { width: 100%; height: 100%; object-fit: contain; }
.layer .img-wrap.fit-cover img { object-fit: cover; }
.layer .yt { position: absolute; inset: 0; }
.layer .yt iframe { width: 100%; height: 100%; }
.layer .unknown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #889; font-size: 3vw; }

#idle {
  position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  background: #262C58; color: #fff; z-index: 5;
}
#idle.show { display: flex; }
#idle.black { background: #000; }
#idle.black img, #idle.black .idle-sub, #idle.black .idle-msg { display: none; }
.idle-logo { width: 30vw; max-width: 640px; animation: breathe 6s ease-in-out infinite; }
.idle-sub { display: flex; align-items: center; gap: .8vw; font-size: 1.4vw; color: #B8BDD9; margin-top: 1vw; letter-spacing: .06em; }
.idle-sub img { height: 1.6vw; }
.idle-msg { margin-top: 4vw; font-size: 1.4vw; color: #8A91BF; }
@keyframes breathe { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

/* obinet-Logo-Einblendung */
#logo {
  position: fixed; z-index: 50; width: 12vw; max-width: 360px; opacity: 0; pointer-events: none;
  transition: opacity .8s ease; filter: drop-shadow(0 2px 10px rgba(0,0,0,.45));
}
#logo.show { opacity: var(--logo-opacity, .9); }
#logo.size-s { width: 8vw; }
#logo.size-m { width: 12vw; }
#logo.size-l { width: 17vw; }
#logo.pos-bottom-right { right: 2.5vw; bottom: 2.5vw; }
#logo.pos-bottom-left { left: 2.5vw; bottom: 2.5vw; }
#logo.pos-top-right { right: 2.5vw; top: 2.5vw; }
#logo.pos-top-left { left: 2.5vw; top: 2.5vw; }

/* Unsichtbare Schicht über allem: versteckt den Mauszeiger auch über YouTube/Canva-iframes. */
#shield { position: fixed; inset: 0; z-index: 9999; cursor: none; display: none; }
body.kiosk-cursor #shield { display: block; }