/* Gegenanflug – Website-Demo der Empfänger-Oberfläche (demo.js): Gehäuse-Rendering als Rahmen, die Oberfläche
   (800 × 480, pi.css) skaliert in der Displayfläche. Am Gerät gibt es keinen Mauszeiger – hier schon. */
html.demo { width: 100vw; height: 100vh; overflow: hidden; background: #e9ecf2 url("../bilder/empfaenger-gehaeuse-hell-1200.webp") no-repeat;
  background-size: var(--bild-b) var(--bild-h); background-position: var(--bild-x) var(--bild-y); }
html.demo body { position: absolute; left: 0; top: 0; transform: translate(var(--x), var(--y)) scale(var(--s)); transform-origin: 0 0; }
html.demo.demo--ohne-gehaeuse { background: #10172a none; }
html.demo--ohne-gehaeuse body { border-radius: 6px; box-shadow: 0 0 0 6px #000; }
html.demo, html.demo body, html.demo body * { cursor: auto !important; }
html.demo body button, html.demo body [data-id], html.demo body a { cursor: pointer !important; }
.demo-leiste { position: fixed; left: 0; right: 0; top: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between;
  padding: 12px 16px; font: 500 15px/1.35 "Inter", system-ui, sans-serif; color: #10172a; }
.demo-leiste a { color: #27479f; font-weight: 600; }
html.demo--ohne-gehaeuse .demo-leiste { color: #e6ebff; } html.demo--ohne-gehaeuse .demo-leiste a { color: #93a8ec; }
@media (prefers-color-scheme: dark) {
  html.demo { background-color: #15171c; background-image: url("../bilder/empfaenger-gehaeuse-dunkel-1200.webp"); }
  .demo-leiste { color: #e6ebff; } .demo-leiste a { color: #93a8ec; }
}
.demo-quer { display: none; }
html.demo--ohne-gehaeuse .demo-quer { display: block; flex-basis: 100%; }
@media (max-width: 600px) { .demo-leiste span:not(.demo-quer) { display: none; } }