/* Zelt-Anzeige — Lesbarkeit auf Distanz vor Dekor (Gernot, 20.10.2026).
   CI nur als Basis: Hausschrift Marguerite Grotesk, Creme S1 als Grund, Gelb P1 für „Jetzt“, Rost P5 für Beschriftungen.
   Alle Größen in --e = 1 % der kürzeren Bildschirmseite → gleiche Wirkung bei jeder Auflösung, quer wie hoch.
   --f = Schriftfaktor aus der Maske, --fit = automatische Verkleinerung, wenn ein langer Titel sonst nicht passt. */
@font-face { font-family: "Marguerite"; src: url(/fonts/MargueriteGrotesk2022-Regular.woff) format("woff"); font-weight: 400; font-display: block; }
@font-face { font-family: "Marguerite"; src: url(/fonts/MargueriteGrotesk2022-Bold.woff) format("woff"); font-weight: 700; font-display: block; }

:root {
  --s1: #f2e8de; --p1: #ffcb00; --p5: #c33e10; --tinte: #1b1714;
  --e: min(1vh, 1vw); --f: 1; --fit: 1;
  --rand: calc(var(--e) * 5.5);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; background: var(--s1); color: var(--tinte); overflow: hidden; }
body { font-family: "Marguerite", system-ui, sans-serif; font-synthesis: none; -webkit-font-smoothing: antialiased; cursor: none; }
.g { font-size: calc(var(--e) * var(--f) * var(--fit) * var(--n)); }   /* Größe: style="--n:9" */

#buehne { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* Meldung: dunkles Band, gelbe Schrift — das Stärkste auf dem Bild */
#meldung { flex: none; background: var(--tinte); color: var(--p1); padding: calc(var(--e) * 2.4) var(--rand); font-weight: 700;
  font-size: calc(var(--e) * var(--f) * 5.6); line-height: 1.12; position: relative; z-index: 30; }
#meldung span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

#kopf { flex: none; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--e) * 3.6) var(--rand) 0; gap: calc(var(--e) * 3); }
#kopf img { height: calc(var(--e) * 5.2); width: auto; display: block; }
#kopf .zeit { font-size: calc(var(--e) * var(--f) * 4.6); display: flex; gap: .9em; align-items: baseline; white-space: nowrap; }
#kopf #uhr { font-variant-numeric: tabular-nums; }

#ansichten { flex: 1; position: relative; min-height: 0; }
/* erst das alte Bild ausblenden, dann das neue einblenden — nie zwei Inhalte übereinander */
.ebene { position: absolute; inset: 0; padding: calc(var(--e) * 3.6) var(--rand) calc(var(--e) * 4.4); opacity: 0; transition: opacity .45s ease; }
.ebene.aktiv { opacity: 1; transition-delay: .4s; }

.marke { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--p5); line-height: 1; }

/* ---------- Programm ---------- */
.programm { height: 100%; display: grid; grid-template-columns: 1.12fr 1fr; gap: calc(var(--e) * 5); align-items: stretch; }
.karte { background: var(--p1); border-radius: calc(var(--e) * 1.6); padding: calc(var(--e) * 4.2) calc(var(--e) * 4.6); display: flex; flex-direction: column; gap: calc(var(--e) * 2.4); overflow: hidden; min-height: 0; }
.karte .marke { color: var(--tinte); }
.punkt { display: flex; flex-direction: column; gap: calc(var(--e) * 1); }
.punkt + .punkt { border-top: calc(var(--e) * .35) solid rgba(27, 23, 20, .25); padding-top: calc(var(--e) * 2.4); }
.punkt .wann { font-variant-numeric: tabular-nums; line-height: 1.1; }
.punkt .titel { font-weight: 700; line-height: 1.04; overflow-wrap: anywhere; hyphens: manual; }
.punkt .zusatz { line-height: 1.15; }
.punkt .takt { font-weight: 700; line-height: 1.1; }

.liste { display: flex; flex-direction: column; gap: calc(var(--e) * 2.6); min-height: 0; overflow: hidden; padding-top: calc(var(--e) * 4.2); }
.zeile { display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--e) * 2.6); align-items: baseline; }
.zeile .wann { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeile .titel { font-weight: 700; line-height: 1.08; overflow-wrap: anywhere; hyphens: manual; }
.zeile .zusatz { grid-column: 2; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.bald { display: inline-block; background: var(--p5); color: #fff; font-weight: 700; border-radius: .25em; padding: .08em .35em .02em; margin-left: .4em; white-space: nowrap; font-size: .78em; vertical-align: .08em; }

.leer { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--e) * 3); }
.leer .titel { font-weight: 700; line-height: 1.04; }

/* ---------- Text-Tafeln ---------- */
.tafel { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--e) * 3); overflow: hidden; }
.tafel .titel { font-weight: 700; line-height: 1.06; white-space: pre-line; overflow-wrap: anywhere; }
.tafel .text { line-height: 1.22; white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- Logos ---------- */
.logos { height: 100%; display: flex; flex-direction: column; gap: calc(var(--e) * 3); }
.raster { flex: 1; min-height: 0; display: grid; gap: calc(var(--e) * 5); }
.raster .zelle { min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
/* jedes Logo füllt seinen Kasten (auch SVGs ohne eigene Größe); „Größe“ aus der Maske gleicht optisch an */
.raster img { width: calc(88% * var(--gross, 1)); height: calc(72% * var(--gross, 1)); max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.raster[data-n="1"] { grid-template-columns: 1fr; }
.raster[data-n="2"] { grid-template-columns: 1fr 1fr; }
.raster[data-n="3"] { grid-template-columns: 1fr 1fr 1fr; }
.raster[data-n="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.raster[data-n="6"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.raster[data-n="1"] img { height: calc(62% * var(--gross, 1)); width: calc(70% * var(--gross, 1)); }

/* ---------- Aktuelle Ansage: unterbricht alles (auch den Film) als Vollbild ---------- */
#ansage { position: fixed; inset: 0; z-index: 50; background: var(--tinte); color: var(--p1); display: flex; flex-direction: column; justify-content: center;
  gap: calc(var(--e) * 4); padding: var(--rand) calc(var(--rand) * 1.4); opacity: 0; transition: opacity .5s ease; }
#ansage.an { opacity: 1; }
#ansage .marke { color: var(--s1); font-size: calc(var(--e) * var(--f) * 5); }
#ansage p { font-weight: 700; line-height: 1.08; font-size: calc(var(--e) * var(--f) * var(--fit) * 13); overflow-wrap: anywhere; hyphens: manual; }

/* ---------- Film ---------- */
#film { position: fixed; inset: 0; background: #000; z-index: 20; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .8s ease; }
#film.an { opacity: 1; }
#film video { width: 100%; height: 100%; object-fit: contain; }
#film .platzhalter { display: none; position: absolute; color: var(--s1); font-size: calc(var(--e) * 8); font-weight: 700; text-align: center; }
#film .platzhalter small { display: block; font-size: calc(var(--e) * 3.6); font-weight: 400; margin-top: calc(var(--e) * 2); opacity: .8; }
#film.vorschau video { display: none; }
#film.vorschau .platzhalter { display: block; }
body.film-meldung #meldung { position: fixed; left: 0; right: 0; top: 0; }

/* ---------- Hochformat ---------- */
@media (orientation: portrait) {
  .programm { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .liste { padding-top: 0; }
  .raster[data-n="3"] { grid-template-columns: 1fr; }
  .raster[data-n="4"], .raster[data-n="6"] { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 1fr; }
}

/* Dezente Zustandsanzeigen für die IT (nicht für Gäste gedacht) */
#netz { position: fixed; right: calc(var(--e) * 1.2); bottom: calc(var(--e) * 1.2); width: calc(var(--e) * 1.4); height: calc(var(--e) * 1.4); border-radius: 50%; background: var(--p5); z-index: 40; }
#sim { position: fixed; left: 0; bottom: 0; background: #ff00ff; color: #fff; font: 700 14px/1 system-ui; padding: 6px 10px; z-index: 40; }