/* TV-Canvas (55″, 1080p, Abstand ~3 m): sehr große Schrift, ruhiger Himmel, Glasflächen
   wie in der Glass-App. Keine Bedienelemente, kein Scrollen. */

:root {
  --text: #f2f6fa;
  --muted: rgba(242, 246, 250, 0.7);
  --glass: rgba(255, 255, 255, 0.1);
  --glass-line: rgba(255, 255, 255, 0.22);
  --accent: #9cc3e6;
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1c2639; color: var(--text); cursor: none; }
/* Himmel als unterste Ebene (z-index 0); Kopf und Bühne liegen darüber (z-index 1). */
.sky { position: fixed; inset: 0; background: linear-gradient(180deg, #1c2639 0%, #3d4f6a 55%, #8c9fb8 100%); z-index: 0; }
.tv-head, .stage { z-index: 1; }

.tv-head { position: fixed; top: 3.2vh; left: 4vw; right: 4vw; display: flex; justify-content: space-between; align-items: baseline; }
.tv-head h1 { margin: 0; font-weight: 300; font-size: 4.2vh; letter-spacing: 0.04em; }
.status { margin: 0; font-size: 2.2vh; color: var(--muted); }
.status.offline { color: #ffd38a; }

.stage { position: fixed; inset: 12vh 4vw 6vh; display: grid; grid-template-columns: 1fr minmax(0, 28vw); gap: 3vw; }
.stage.no-side { grid-template-columns: 1fr; }

.main-slot, .note-card {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 3vh;
  box-shadow: 0 2vh 6vh rgba(0, 0, 0, 0.18);
}
.main-slot { display: grid; place-items: center; padding: 5vh 4vw; overflow: hidden; }
.main-slot:empty { display: none; }
.main-slot h2 { margin: 0 0 2vh; font-size: 6vh; font-weight: 600; line-height: 1.1; }
.main-slot .body { font-size: 4.6vh; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.main-slot .body.long { font-size: 3.4vh; }
.main-slot img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 1.5vh; }
.main-slot .note { max-width: 70ch; width: 100%; }

.side-slot { display: grid; align-content: start; gap: 2.4vh; }
.note-card { padding: 2.4vh 2vw; }
.note-card h3 { margin: 0 0 1vh; font-size: 3vh; }
.note-card p { margin: 0; font-size: 2.6vh; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9em; overflow: hidden; }
.note-card img { width: 100%; max-height: 22vh; object-fit: contain; border-radius: 1vh; }

.idle { grid-column: 1 / -1; display: grid; place-content: center; text-align: center; }
.idle[hidden] { display: none; }
.idle-title { margin: 0; font-size: 7vh; font-weight: 200; letter-spacing: 0.02em; }
.idle-sub { margin: 2vh 0 0; font-size: 2.6vh; color: var(--muted); }

.fade-in { animation: fade 0.5s ease-out both; }
@keyframes fade { from { opacity: 0; transform: translateY(1vh); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }