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

/* Inhalt: jede Folie ist eine Ebene, Überblendung per Deckkraft */
#stage { position: fixed; inset: 0; background: #000; z-index: 1; }
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #000;
  will-change: opacity, transform;
}
.slide.plain { will-change: auto; }
/* AVPlay zeichnet unter der Seite: Seite und Ebene sind durchsichtig, solange eine AVPlay-Folie läuft */
.slide.hole { background: transparent; }
html.hole, html.hole body, html.hole #stage { background: transparent; }
object.media { background: transparent; }
.media { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame { width: 100%; height: 100%; border: 0; display: block; background: #000; }

/* Leerlauf: nichts zugewiesen */
#idle {
  position: fixed; inset: 0; z-index: 2;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: #0E0E10; color: #F8F7F4; text-align: center;
}
#idle.on { display: flex; }
#idle p { font-size: 3vh; color: #b9b7b0; margin: 0; }

.kicker {
  letter-spacing: .35em;
  text-transform: uppercase;
  font-size: 2.2vh;
  color: #C6A664;
  margin-bottom: 3vh;
}

/* Durchsage */
#overlay { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.announce {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font: 600 2.6vw/1.35 system-ui, sans-serif;
  text-align: center;
  padding: 2.2vh 4vw;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 400ms ease;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Kopplung und Meldungen */
.screen {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 6vh 6vw; box-sizing: border-box;
  background: #0E0E10; color: #F8F7F4;
}
.screen.on { display: flex; }
.screen h1 { font-size: 6vh; font-weight: 500; margin: 0 0 4vh; }
.screen p { font-size: 3vh; color: #b9b7b0; max-width: 60vw; margin: 0; line-height: 1.4; }
.screen b { color: #F8F7F4; font-weight: 600; }
.code {
  font-size: 20vh; font-weight: 600; letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  margin: 2vh 0 5vh;
}

/* Prüfansicht (Taste 0, Info oder Rot) */
#hud {
  position: fixed; left: 1.5vw; bottom: 1.5vh; z-index: 300;
  display: none;
  background: rgba(0, 0, 0, .8); color: #e8e6df;
  font: 1.7vh/1.45 monospace;
  padding: 1.2vh 1.4vw; max-width: 70vw;
  white-space: pre-wrap; word-break: break-all;
}
#hud.on { display: block; }