/* ============================================================
   Infobildschirm SHW - Praesentation fuer 4K-Fernseher
   Bilder fuellen den kompletten Bildschirm, keine Fusszeile.
   Alle Groessen relativ (vh/vw), damit die Seite auf jeder
   Aufloesung (Full-HD bis 4K) identisch aussieht.
   ============================================================ */

:root {
  --hintergrund:   #000;
  --ueberblendung: 1.5s;     /* muss zu FADE in slideshow.js passen */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;              /* keine Scrollbalken auf dem TV */
  background: var(--hintergrund);
  color: #fff;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  cursor: none;                  /* Mauszeiger ausblenden */
}

/* ---------- Bildflaeche ---------- */

.buehne {
  position: fixed;
  inset: 0;                      /* voller Bildschirm */
  background: var(--hintergrund);
}

.folie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--anpassung, contain);   /* Bild vollstaendig, ohne Beschnitt */
  object-position: center;
  opacity: 0;
  transition: opacity var(--ueberblendung) ease-in-out;
  will-change: opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.folie.sichtbar { opacity: 1; }

/* ---------- Hinweistext, wenn keine Bilder vorhanden ---------- */

.hinweis {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5vh;
  text-align: center;
  font-size: 3vh;
  background: var(--hintergrund);
}

.hinweis[hidden] { display: none; }

.hinweis .klein { font-size: 2vh; opacity: .7; }

.hinweis code {
  font-family: Consolas, "Courier New", monospace;
  background: #222;
  padding: .2em .5em;
  border-radius: .3em;
}