/* =============================================================================
   Display-Renderer CSS — Vollbild-Slideshow mit Laufschrift
   ============================================================================= */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #000;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  height: 100%;
  overflow: hidden;
}

/* ── Stage ─────────────────────────────────────────────────────────────────── */
#stage {
  position: fixed;
  inset: 0; /* Vollbild — Ticker-Modus setzt bottom:60px via body.ticker-active */
}
body.ticker-active #stage { bottom: 60px; }

/* ── Slide-Basis ────────────────────────────────────────────────────────────── */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;                        /* versteckt, kein Paint */
  background: #000 no-repeat center center / contain;

  /* ▼▼ GPU-Compositing erzwingen — wichtig für schwache CPUs (Raspberry Pi etc.) ▼▼
     translateZ(0) + backface-visibility promoten die Stage auf einen eigenen
     Compositing-Layer. Alle Animationen laufen dann ausschließlich auf der GPU
     (keine Main-Thread-Paints, keine gedroppten Frames beim Umschalten). */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: opacity, transform;
}

/* ── Content-Typen ──────────────────────────────────────────────────────────── */
.slide img,
.slide video,
.slide iframe {
  width: 100%; height: 100%;
  object-fit: contain;
  border: 0; display: block;
}
.slide.link {
  display: flex;
  align-items: center; justify-content: center;
  color: #fff; font-size: 3vw; padding: 5vw;
  text-align: center; text-wrap: balance;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Transitions — Prinzip:
     Beide Stages wechseln gleichzeitig.
     enter-from → enter-to  : eingehender Slide animiert herein
     leave-from → leave-to  : ausgehender Slide animiert heraus

   Eigenschaften für geschmeidige Animation auf schwacher Hardware:
     - translate3d() statt translateX() → stabile GPU-Compositing-Promotion
     - cubic-bezier(0.25, 0.1, 0.25, 1) → gleichmäßiger als stock `ease`
     - nur opacity und transform animieren (die einzigen GPU-beschleunigten Properties)
   ═══════════════════════════════════════════════════════════════════════════ */

/* WICHTIG: Die .enter-from / .leave-from-Zustände deaktivieren die Transition
   explizit. Sonst würde der Browser beim initialen Class-Set die Property-Änderung
   (z.B. transform von translateZ(0) auf translate3d(100%,0,0)) als Transition-
   Trigger werten und das Element in die FALSCHE Richtung animieren. Die eigentliche
   Animation startet erst beim Wechsel zu .enter-to / .leave-to, wo die Transition
   vom Tx-Basisselector wieder aktiv ist. */

/* ── FADE ───────────────────────────────────────────────────────────────────── */
.tx-fade {
  visibility: visible;
  transition: opacity 900ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.tx-fade.enter-from,
.tx-fade.leave-from { transition: none; }
.tx-fade.enter-from { opacity: 0; }
.tx-fade.enter-to   { opacity: 1; }
.tx-fade.leave-from { opacity: 1; }
.tx-fade.leave-to   { opacity: 0; }

/* ── SLIDE — Kante-an-Kante, wie ein Karussell ─────────────────────────────── */
/* Der ausgehende Slide zieht den eingehenden rein: beide bewegen sich
   gleichzeitig um -100%, perfekt synchron, keine Überlappung. */
.tx-slide {
  visibility: visible;
  opacity: 1;                               /* immer voll sichtbar, nur verschoben */
  transition: transform 900ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.tx-slide.enter-from,
.tx-slide.leave-from { transition: none; }
.tx-slide.enter-from { transform: translate3d(100%, 0, 0); }
.tx-slide.enter-to   { transform: translate3d(0, 0, 0); }
.tx-slide.leave-from { transform: translate3d(0, 0, 0); }
.tx-slide.leave-to   { transform: translate3d(-100%, 0, 0); }

/* ── ZOOM — sanft, nicht aggressiv ──────────────────────────────────────────── */
.tx-zoom {
  visibility: visible;
  transition: opacity  900ms cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 900ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.tx-zoom.enter-from,
.tx-zoom.leave-from { transition: none; }
.tx-zoom.enter-from { opacity: 0; transform: scale(0.94); }
.tx-zoom.enter-to   { opacity: 1; transform: scale(1); }
.tx-zoom.leave-from { opacity: 1; transform: scale(1); }
.tx-zoom.leave-to   { opacity: 0; transform: scale(1.06); }

/* ── CUT ────────────────────────────────────────────────────────────────────── */
.tx-cut {
  visibility: visible;
  transition: none;                         /* sofortiger Wechsel */
}
.tx-cut.enter-from { opacity: 0; }
.tx-cut.enter-to   { opacity: 1; }
.tx-cut.leave-from { opacity: 1; }
.tx-cut.leave-to   { opacity: 0; }

/* ── Ticker ─────────────────────────────────────────────────────────────────── */
/* Standardmäßig ausgeblendet — nur sichtbar wenn aktive Items vorhanden */
#ticker {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 60px;
  background: #808080;
  color: #fff;
  overflow: hidden;
  align-items: center;
  font-size: 28px;
  border-top: 1px solid rgba(255,255,255,.15);
}
body.ticker-active #ticker { display: flex; }

#ticker-text {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 20s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

/* ── Betriebszeiten-Overlay ─────────────────────────────────────────────────── */
/* Schwarze leere Seite — kein Text, kein Hinweis */
#overlay-off {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10;
}
body.off #stage    { display: none; }  /* Stage komplett ausblenden */
body.off #ticker   { display: none; }  /* Ticker auch ausblenden */
body.off #overlay-off { display: block; }

/* ── Warning-Banner ─────────────────────────────────────────────────────────── */
#warning-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(200,40,40,.9);
  color: #fff;
  padding: .5rem 1rem;
  font-weight: 600;
  text-align: center;
  z-index: 5;
}