:root {
  color-scheme: dark;
  background: #030d20;
  --scene-ratio: 1.7139874739;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #030d20;
  font-family: system-ui, sans-serif;
}
.ambience, .ambience-shade { position: fixed; inset: -5%; pointer-events: none; }
.ambience {
  /* Tatsächliche, mitgelieferte GIF-Datei – keine externe Bildadresse. */
  background: #06132d url("assets/datei.gif") center / cover no-repeat;
  filter: blur(22px) brightness(.46) saturate(1.08);
  transform: scale(1.08);
}
.ambience-shade {
  background: radial-gradient(ellipse at 50% 47%, transparent 15%, #010713a6 80%);
}
.viewport {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.scene {
  /* Vollständige Szene auch im Hochformat: keine abgeschnittenen Personen. */
  position: relative;
  width: min(100vw, calc(100vh * var(--scene-ratio)));
  width: min(100vw, calc(100svh * var(--scene-ratio)));
  aspect-ratio: 1642 / 958;
  isolation: isolate;
}
.camera {
  position: absolute;
  inset: 0;
  transform-origin: center;
  animation: camera-drift 24s ease-in-out infinite;
  will-change: transform;
}
@keyframes camera-drift {
  0%, 100% { transform: translate3d(-.12%, .08%, 0) scale(1); }
  50% { transform: translate3d(.12%, -.08%, 0) scale(1.006); }
}
picture, #sceneImage { display: block; width: 100%; height: 100%; }
#sceneImage { user-select: none; -webkit-user-drag: none; }
.laptop-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 660px;
  height: 440px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 2px;
  background: #041329;
  overflow: hidden;
  transform-origin: 0 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.laptop-screen[hidden] { display: none; }
#mouthCanvas { display: block; width: 100%; height: 100%; }
.laptop-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(142deg, #ffffff07, transparent 38%, #258ade04 90%, #69bdff14);
  box-shadow: inset 0 0 12px #0009;
}
.laptop-screen:focus-visible { outline: 5px solid #fff; outline-offset: 3px; }
.controls {
  position: fixed;
  z-index: 10;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  padding: 0;
}
.icon-button {
  appearance: none;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid #d3edff50;
  border-radius: 50%;
  padding: 0;
  color: #eef7ff;
  background: #041127b8;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 5px 24px #0004;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.icon-button:hover { border-color: #eaf8ffbf; background: #0c2547d9; }
.icon-button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.icon-button:disabled { opacity: .45; cursor: default; }
.icon { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.sound-stop, .sound-warning, .play-icon { display: none; }
body[data-audio="speaking"] .sound-button,
body[data-audio="starting"] .sound-button { border-color: #aee3ffc9; background: #10325add; }
body[data-audio="speaking"] .sound-waves,
body[data-audio="starting"] .sound-waves,
body[data-audio="error"] .sound-waves { display: none; }
body[data-audio="speaking"] .sound-stop,
body[data-audio="starting"] .sound-stop { display: block; }
body[data-audio="error"] .sound-warning { display: block; }
body[data-audio="error"] .sound-button { border-color: #f3bb77; }
body.motion-off .camera, body.page-hidden .camera { animation-play-state: paused; }
body.motion-off .ambience, body.page-hidden .ambience {
  background-image: url("assets/xamri-scene.webp");
}
body.motion-off .pause-icon { display: none; }
body.motion-off .play-icon { display: block; }
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 600px) {
  .controls { right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
  .icon-button { width: 48px; height: 48px; }
  .ambience { filter: blur(28px) brightness(.39) saturate(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-enabled) .camera { animation: none; }
  body:not(.motion-enabled) .ambience { background-image: url("assets/xamri-scene.webp"); }
  .icon-button { transition: none; }
}

/* Version 1.1: nach der einmaligen Ansage kein Wiedergabeknopf und kein Replay. */
.sound-button[hidden] { display: none; }
.laptop-screen:disabled { cursor: default; }
body[data-audio="ended"] .laptop-screen,
body[data-audio="stopped"] .laptop-screen { pointer-events: none; }
body[data-audio="blocked"] .sound-button { border-color: #d7eeff; background: #123356e6; }