/* Foyer-Folie (S1; Prototyp „F10 Foyer Monitor"): am Monitor und in der Vorschau am Mac. Maße in cqw. */
.ff-rahmen { position: relative; width: 100%; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; background: var(--ff-bg); color: var(--ff-fg); font-family: Archia, Arial, sans-serif; --k: 1; }
.ff-rahmen.hoch { aspect-ratio: 9 / 16; --k: 1.75; }
.ff-innen { position: absolute; display: flex; flex-direction: column; }
.ff-kopf { flex: none; display: flex; align-items: center; gap: 3cqw; padding: 1.6cqw 3cqw; background: #1A0F4A; color: #fff; }
.ff-rahmen.hoch .ff-kopf { padding: 3cqw 5cqw; }
.ff-kopf img { height: calc(4.4cqw * var(--k)); width: auto; }
.ff-ort { flex: 1; min-width: 0; font-size: calc(1.4cqw * var(--k)); font-weight: 600; color: #CFC3F7; line-height: 1.3; }
.ff-uhr { display: flex; flex-direction: column; align-items: flex-end; gap: .3cqw; text-align: right; }
.ff-uhr b { font-size: calc(4.2cqw * var(--k)); line-height: 1; font-variant-numeric: tabular-nums; color: #E4FF00; }
.ff-uhr span { font-size: calc(1.4cqw * var(--k)); font-weight: 600; white-space: nowrap; }
/* hochkant: Datum darf nicht in sechs Zeilen zerfallen (Abw. 51) — Ort ausblenden, Uhr und Datum bekommen den Platz */
.ff-rahmen.hoch .ff-ort { display: none; }
.ff-rahmen.hoch .ff-uhr { flex: 1; }
.ff-linie { flex: none; height: .5cqw; background: #E4FF00; }
.ff-rumpf { flex: 1; min-height: 0; display: flex; background: var(--ff-bg); }
.ff-text { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(1.6cqw * var(--k)); padding: 3cqw 6cqw; }
.ff-rahmen.hoch .ff-text, .ff-rahmen.hoch .ff-ablauf { padding: 6cqw; }
.ff-ueber { font-size: calc(1.5cqw * var(--k)); font-weight: 700; letter-spacing: .16em; }
.ff-titel { font-size: calc(6.6cqw * var(--k)); line-height: 1.04; text-wrap: balance; }
.ff-titel.beide { font-size: calc(5.4cqw * var(--k)); }
.ff-titel.klein { font-size: calc(3.2cqw * var(--k)); line-height: 1; }
.ff-tx { font-size: calc(3cqw * var(--k)); font-weight: 500; line-height: 1.35; white-space: pre-line; text-wrap: pretty; }
.ff-tx.beide { font-size: calc(2.5cqw * var(--k)); }
.ff-zwei { display: flex; flex-direction: column; gap: 1cqw; padding-top: calc(1.6cqw * var(--k)); border-top: .3cqw solid; opacity: .85; }
.ff-zwei b { font-size: calc(3.4cqw * var(--k)); font-weight: 600; line-height: 1.1; }
.ff-zwei span { font-size: calc(2.1cqw * var(--k)); font-weight: 500; line-height: 1.35; white-space: pre-line; }
.ff-ablauf { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(1.6cqw * var(--k)); padding: 3cqw 6cqw; }
.ff-ablauf-kopf { display: flex; align-items: baseline; gap: 2cqw; flex-wrap: wrap; }
.ff-zeilen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(.5cqw * var(--k)); overflow: hidden; }
.ff-zeile { display: grid; grid-template-columns: 15cqw minmax(0, 1fr) auto; align-items: center; gap: 2cqw; padding: .6cqw 1.6cqw; border-radius: 1.2cqw; }
.ff-rahmen.hoch .ff-zeile { grid-template-columns: 30cqw minmax(0, 1fr) auto; padding: 1.6cqw 3cqw; }
.ff-zeile.jetzt { background: #E4FF00; color: #1A1A22; }
.ff-zeile.naechst { background: rgba(255, 255, 255, .1); }
.ff-rahmen.ff-hell .ff-zeile.naechst { background: rgba(26, 15, 74, .08); }
.ff-zeit { font-size: calc(2cqw * var(--k)); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ff-akzent); }
.ff-zeile.jetzt .ff-zeit { color: #1A1A22; }
/* DE und EN in einer Zeile: ein Abstand, nicht zwei (Abw. 51) */
.ff-was { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3cqw 1.4cqw; min-width: 0; }
.ff-was b { font-size: calc(2cqw * var(--k)); line-height: 1.15; }
.ff-was span { font-size: calc(1.5cqw * var(--k)); font-weight: 500; line-height: 1.2; opacity: .75; }
.ff-tag { font-size: calc(1.1cqw * var(--k)); font-weight: 700; padding: .5cqw 1.4cqw; border-radius: 999px; white-space: nowrap; }
.ff-tag.jetzt { background: #1A0F4A; color: #E4FF00; }
.ff-tag.naechst { background: #E4FF00; color: #1A1A22; }
.ff-ende { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1cqw; }
.ff-ende b { font-size: calc(4cqw * var(--k)); }
.ff-ende span { font-size: calc(2.4cqw * var(--k)); opacity: .8; }
.ff-punkte { flex: none; display: flex; justify-content: center; gap: .8cqw; padding: 0 0 1cqw; background: var(--ff-bg); }
.ff-punkte i { width: .7cqw; height: .7cqw; border-radius: 999px; background: var(--ff-fg); opacity: .3; }
.ff-punkte i.an { width: 3cqw; background: var(--ff-akzent); opacity: 1; }
.ff-logos { flex: none; height: 11%; display: flex; align-items: center; justify-content: center; gap: 6%; background: #fff; }
.ff-rahmen.hoch .ff-logos { height: 9%; }
.ff-logos img { height: 64%; width: auto; }
.ff-test { position: absolute; border: .6cqw dashed #C43B2E; display: flex; align-items: flex-end; justify-content: center; gap: 1cqw; padding: 2cqw; pointer-events: none; }
.ff-test span { position: absolute; top: 2cqw; left: 2cqw; padding: .6cqw 1.4cqw; border-radius: 999px; background: #C43B2E; color: #fff; font-size: calc(1.4cqw * var(--k)); font-weight: 700; }
.ff-test i { width: 6cqw; height: 4cqw; border-radius: .6cqw; border: .2cqw solid #fff; }