/* Realtime TV – Sender-Ansicht. Alles im 16:9-Bild skaliert über Container-Einheiten (cqw). */
:root {
  --signal: #e3262e;
  --gold: #f2c230;
  --ink: #0f1124;
  --glass: rgba(10, 12, 32, .78);
  --f-display: "Avenir Next Condensed", "DIN Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-body: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  --bars: linear-gradient(90deg, #c0c0c0 0 14.28%, #c0c000 0 28.57%, #00c0c0 0 42.85%, #00c000 0 57.14%, #c000c0 0 71.42%, #c00000 0 85.71%, #0000c0 0);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: var(--f-body); color: #fff; }
body.idle, body.idle * { cursor: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* 16:9-Bühne, zentriert mit Letterbox */
.stage {
  position: absolute; inset: 0; margin: auto;
  width: min(100vw, 177.78vh); height: min(100vh, 56.25vw);
  container-type: size; overflow: hidden; background: #000;
}
.screen {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000;
  opacity: 0; transition: opacity 150ms linear;
}
.screen.on { opacity: 1; }

/* Senderlogo (Bug) */
.bug {
  position: absolute; left: 3.2cqw; top: 4.4cqh; display: flex; align-items: stretch;
  font: 800 2.1cqw/1 var(--f-display); letter-spacing: .01em; filter: drop-shadow(0 .2cqw .6cqw rgba(0,0,0,.45));
}
.bug-name { display: inline-flex; align-items: center; gap: .7cqw; background: var(--glass); padding: .75cqw 1.1cqw .65cqw; border-radius: .5cqw 0 0 .5cqw; }
.bug-dot { width: 1.05cqw; height: 1.05cqw; border-radius: 50%; background: var(--signal); display: inline-block; }
.bug-live {
  background: var(--signal); color: #fff; padding: .75cqw 1cqw .65cqw; border-radius: 0 .5cqw .5cqw 0;
  font-size: 1.5cqw; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center;
}
.bug-live.pause { background: #4a4f6e; }

/* Story-Kennung oben links unter dem Bug */
.story {
  position: absolute; left: 3.2cqw; top: calc(4.4cqh + 5cqw); display: flex; flex-direction: column; gap: .3cqw;
  max-width: 44cqw; text-shadow: 0 .15cqw .5cqw rgba(0,0,0,.7);
}
.story-title { font: 700 1.9cqw/1.1 var(--f-display); }
.story-scene { font: 600 1.25cqw/1 var(--f-body); color: var(--gold); }

/* QR oben rechts */
.qr {
  position: absolute; right: 3.2cqw; top: 4.4cqh; width: 11.5cqw; padding: .7cqw .7cqw .8cqw;
  background: #fff; color: var(--ink); border-radius: .7cqw; display: flex; flex-direction: column; align-items: center; gap: .25cqw;
  box-shadow: 0 .3cqw 1.2cqw rgba(0,0,0,.35);
}
.qr img { width: 100%; height: auto; display: block; }
.qr-cta { font: 800 1.45cqw/1 var(--f-display); }
.qr-url { font: 600 .95cqw/1.1 var(--f-body); color: #3a3f5c; text-align: center; overflow-wrap: anywhere; }

/* Bauchbinde */
.lower {
  position: absolute; left: 3.2cqw; bottom: 12.5cqh; max-width: 64cqw;
  display: grid; grid-template-columns: auto; justify-items: start;
}
.lower-badge {
  font: 800 1.2cqw/1 var(--f-display); letter-spacing: .06em; padding: .55cqw .9cqw .45cqw; border-radius: .4cqw .4cqw 0 0;
  background: var(--gold); color: #231a00;
}
.lower-badge.rerun { background: #d7d9e4; color: #2a2e48; }
.lower-title {
  margin: 0; background: #fff; color: var(--ink); padding: 1cqw 1.6cqw 0; border-bottom: .9cqw solid #fff; border-radius: 0 .6cqw 0 0;
  font: 700 2.55cqw/1.12 var(--f-display);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 64cqw;
  /* overflow schneidet erst an der Padding-Kante: unten Rand statt Padding, sonst lugt die 3. Zeile hervor */
  border-left: .55cqw solid var(--signal);
}
.lower-by {
  margin: 0; background: var(--ink); color: #fff; padding: .6cqw 1.6cqw .55cqw; border-radius: 0 0 .6cqw .6cqw;
  font: 600 1.35cqw/1.1 var(--f-body); border-left: .55cqw solid var(--signal);
}
.lower.enter { animation: wipe 520ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes wipe {
  from { clip-path: inset(0 100% 0 0); transform: translateX(-1.2cqw); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}

/* Ticker unten */
.ticker {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7.6cqh;
  display: flex; align-items: stretch; background: var(--glass); font-size: 1.4cqw; border-top: .25cqw solid var(--signal);
}
.ticker > span { display: flex; align-items: center; white-space: nowrap; }
.ticker-label { background: var(--gold); color: #231a00; font: 800 1.35cqw/1 var(--f-display); padding: 0 1.4cqw 0 3.2cqw; }
.ticker-next { padding: 0 1.4cqw; font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; max-width: 48cqw; display: block !important; line-height: 7.3cqh; }
.ticker-run { flex: 1; overflow: hidden; min-width: 0; color: #d7d9e4; }
.ticker-run span { display: inline-block; padding-left: 100%; animation: run 22s linear infinite; }
@keyframes run { to { transform: translateX(-100%); } }
.ticker-queue { margin-left: auto; padding: 0 3.2cqw 0 1.4cqw; color: #d7d9e4; font-variant-numeric: tabular-nums; }

/* Testbild */
.slate { position: absolute; inset: 0; background: #000; }
.slate-bars { position: absolute; inset: 0 0 25% 0; background: var(--bars); }
.slate::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 25%;
  background: linear-gradient(90deg, #0000c0 0 14.28%, #111 0 28.57%, #c000c0 0 42.85%, #111 0 57.14%, #00c0c0 0 71.42%, #111 0 85.71%, #c0c0c0 0);
}
.slate-card {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 1;
  background: #0d0f24; border: .3cqw solid #fff; border-radius: 1cqw; padding: 2.4cqw 3.6cqw 2cqw; text-align: center; min-width: 40cqw; max-width: 80cqw;
}
.slate-mark { display: inline-flex; align-items: center; gap: .8cqw; font: 800 2.4cqw/1 var(--f-display); }
.slate-mark .bug-dot { width: 1.3cqw; height: 1.3cqw; }
.slate-text { margin: 1.3cqw 0 .6cqw; font: 700 3.6cqw/1.1 var(--f-display); white-space: nowrap; }
.slate-clock { margin: 0; font: 600 2cqw/1 var(--f-body); color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: .05em; }

/* Verbindungshinweis, Start-Hinweis */
.conn {
  position: absolute; left: 50%; top: 4.4cqh; transform: translateX(-50%);
  background: rgba(0,0,0,.72); padding: .6cqw 1.2cqw; border-radius: .5cqw; font-size: 1.2cqw;
}
.tap {
  position: absolute; inset: 0; margin: auto; width: 40cqw; height: 9cqw; border-radius: 1cqw; border: .25cqw solid #fff;
  background: rgba(10,12,32,.9); color: #fff; font: 700 2cqw/1.2 var(--f-body); cursor: pointer;
}

/* «Ton an» unten rechts, immer oberhalb des Tickers (Bühne = min(100vh, 56.25vw) hoch, Ticker 7.6 % davon);
   sonst verdeckt der Knopf bei fast 16:9-Fenstern die Warteschlangen-Anzeige */
.sound {
  position: fixed; right: 16px; z-index: 5;
  bottom: calc((100vh - min(100vh, 56.25vw)) / 2 + min(100vh, 56.25vw) * 0.076 + 12px);
  font: 700 16px/1 var(--f-body); color: #fff; background: rgba(10,12,32,.85); border: 2px solid #fff;
  border-radius: 999px; padding: 12px 18px; cursor: pointer; transition: opacity 300ms;
}
.sound:focus-visible, .tap:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
body.idle .sound.unmuted { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .lower.enter { animation: none; }
  .ticker-run span { animation: none; padding-left: 0; }
  .screen { transition: none; }
}