/* Vaira Player – Kern 0.2.0. Gestaltung folgt spaeter, hier zaehlt die Mechanik. */

.vaira-player {
	--vp-orange: #ff7e05;
	/* Der Hover-Ton. Steht als Variable da, damit Knopf, CTA und Fenster
	   dieselbe Reaktion zeigen und nicht drei aehnliche Orangetoene. */
	--vp-orange-dunkel: #e06f00;
	--vp-dunkel: #02001d;
	position: relative;
	/*
	 * ⚠️ DER PLAYER LIEGT UEBER DEN WIDGETS DER SEITE.
	 *
	 * Auf vaira.app schweben der Website-Chat, der Anmeldeknopf und das
	 * Borlabs-Cookie-Fenster als feste Elemente ueber der Seite -- mit sehr
	 * hohen Stapelwerten, wie das bei solchen Werkzeugen ueblich ist. Im
	 * Querformat lagen sie damit AUF dem Player und verdeckten unter anderem
	 * den Vollbildknopf (Befund Dennis, 24.08.2026).
	 *
	 * Deshalb ein eigener Stapelkontext ganz oben. Das ist kein Wettruesten um
	 * die groesste Zahl: Alles, was zum Player gehoert, liegt INNERHALB dieses
	 * Kontexts und behaelt untereinander seine Reihenfolge (Einblendungen 4,
	 * Reaktionen 5, Leiste 6, Bedienleiste 7). Nach aussen zaehlt nur diese
	 * eine Zahl. Die Fenster liegen mit 2147483646 noch darueber.
	 */
	z-index: 2147483640;
	isolation: isolate;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	color: #fff;
	max-width: 1100px;
	margin: 0 auto;
	/*
	 * ⚠️ Der Player darf NIE hoeher werden als der Bildschirm.
	 *
	 * Ohne diese Grenze ergibt 16:9 auf einem quer gehaltenen Handy eine
	 * Buehne von ~430 px — bei 412 px Sichthoehe liegen Startknopf,
	 * Identitaetsleiste und Postfach damit teilweise ausserhalb des Bildes.
	 * Genau dieser Fehler ist am 21.08.2026 auf der Pruefseite aufgetreten
	 * (Handoff 2b, Befund 7) und dort dreimal falsch diagnostiziert worden,
	 * weil er wie ein Vollbild-Problem aussah. Er ist keins: Die Knoepfe sind
	 * nicht verdeckt, sie stehen ausserhalb.
	 *
	 * Im Player wiegt das schwerer als auf der Pruefseite — am Eventtag sitzen
	 * die meisten Zuschauer am Handy, und wer den einen Klick nicht trifft,
	 * sieht das Webseminar nicht.
	 */
	max-height: 100vh;
	max-height: 100dvh;
}

/* Quer gehaltenes Handy: Der ganze Player muss auf einen Blick passen. */
@media (orientation: landscape) and (max-height: 560px) {
	.vaira-player {
		max-height: calc(100dvh - 12px);
	}
	.vaira-player .vp-decke {
		padding: 10px;
		gap: 8px;
		overflow-y: auto;
	}
}

.vaira-player video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: #000;
}

.vaira-player .vp-decke {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	padding: 20px;
	background: rgba(2, 0, 29, 0.85);
}
.vaira-player .vp-decke[hidden] { display: none; }
.vaira-player .vp-decke h3 { margin: 0; font-size: clamp(17px, 3vw, 26px); color: #fff; }
.vaira-player .vp-decke p { margin: 0; max-width: 46ch; color: #d7d7e0; font-size: 15px; }

.vaira-player .vp-zaehler {
	font-variant-numeric: tabular-nums;
	font-size: clamp(38px, 10vw, 76px);
	font-weight: 800;
	color: var(--vp-orange);
	line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Der orangefarbene Knopf
 *
 * ⚠️ WARUM HIER EIN :hover STEHEN MUSS (Befund Dennis, 01.09.2026)
 *
 * „Beim Hover-Over wird der Button grau. Beim Hover-Over wird der
 * border-radius größer." Beides kam nicht von hier — es kam vom Theme.
 * Diese Datei hatte fuer `.vp-knopf` schlicht KEINEN Hover-Zustand, und was
 * ein Plugin nicht selbst setzt, setzt die Seite darum herum: Auf vaira.app
 * faerbt das Theme jeden `button:hover` grau und gibt ihm seinen eigenen
 * Radius.
 *
 * Deshalb stehen unten alle Zustaende ausdruecklich da — Ruhe, Hover, Fokus,
 * Druck — und jeder wiederholt `border-radius`, `background` und `border`.
 * Das ist keine Doppelung aus Versehen: Es ist die Zusage, dass kein Theme
 * den wichtigsten Knopf des Webseminars umfaerbt.
 * ------------------------------------------------------------------------ */
.vaira-player .vp-knopf,
.vaira-player .vp-knopf:link,
.vaira-player .vp-knopf:visited {
	appearance: none;
	border: 0;
	border-radius: 8px;
	background: var(--vp-orange);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	padding: 14px 26px;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
	box-shadow: none;
	transition: background .14s ease;
}
.vaira-player .vp-knopf:hover,
.vaira-player .vp-knopf:focus,
.vaira-player .vp-knopf:focus-visible,
.vaira-player .vp-knopf:active {
	background: var(--vp-orange-dunkel);
	color: #fff;
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: none;
}
.vaira-player .vp-knopf:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}
/* Der leisere zweite Knopf am Ende bleibt auch beim Hovern eine Umrandung. */
.vaira-player .vp-knopf-leise:hover,
.vaira-player .vp-knopf-leise:focus,
.vaira-player .vp-knopf-leise:active {
	background: rgba(255, 255, 255, .14);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85);
}

/* Reaktionsspalte rechts, Ruhezustand 26 px, beim Hovern 52 px (Entscheidung 16) */
.vaira-player .vp-reaktionen {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 5;
}
.vaira-player .vp-reaktionen button {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: width .14s ease, height .14s ease, font-size .14s ease, background .14s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.vaira-player .vp-reaktionen:hover button { width: 52px; height: 52px; font-size: 24px; }
.vaira-player .vp-reaktionen button:hover { background: rgba(255, 126, 5, 0.9); }
.vaira-player .vp-reaktionen button.vp-gedrueckt { background: var(--vp-orange); transform: scale(1.15); }

/* Einblendungen: Infoboxen von links, Umfragen unten links (Entscheidung 19) */
.vaira-player .vp-einblendungen { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
/* ---------------------------------------------------------------------------
 * Der Aufbau einer Karte (ab 0.22.0)
 *
 * ⚠️ Drei Bereiche UNTEREINANDER statt drei Schichten uebereinander:
 *
 *     .vp-inhalt     Text, Frage, Antworten, Knopf — scrollt, wenn es eng wird
 *     .vp-fuss       die Restsekunden
 *     .vp-standzeit  der Ablaufbalken, 4 px am unteren Rand
 *
 * Nur das Schliesskreuz liegt noch absolut oben rechts; dafuer haelt der
 * Inhalt rechts Platz frei (`padding-right`), und dieser Platz ist breiter als
 * das Kreuz — nicht knapper, wie bis 0.21.0.
 *
 * Befund Dennis, 01.09.2026: „Bei Infoboxen überlagern sich Inhalte. Bei der
 * Umfrage steht das Kreuz mit in der Frage und auch der Countdown steht halb
 * in der letzten Option."
 * ------------------------------------------------------------------------ */
.vaira-player .vp-einblendung {
	position: absolute;
	max-width: min(46%, 420px);
	background: rgba(255, 255, 255, 0.96);
	color: var(--vp-dunkel);
	/*
	 * ⚠️ Unten 6 px + 2 px Abstand + 12 px Fusszeile = 20 px — GENAU so viel,
	 *    wie bis 0.21.0 als `padding-bottom` unter dem Inhalt stand.
	 *
	 * Das ist keine Feinjustage, sondern eine Bedingung: Die Karte darf durch
	 * die neue Fusszeile nicht hoeher werden. Der erste Bau von 0.22.0 machte
	 * sie 9 px hoeher — und auf einem hochkant gehaltenen Handy schob das den
	 * Knopf eines Handlungsaufrufs unter die Bedienleiste. Gefunden von
	 * cta.test.js bei 412x915, mit derselben Messung wie beim Querformat-
	 * Befund vom 21.08.: elementFromPoint auf die Mitte des Knopfes.
	 */
	padding: 12px 16px 6px;
	border-radius: 10px;
	border-left: 4px solid var(--vp-orange);
	font-size: 15px;
	line-height: 1.45;
	pointer-events: auto;
	animation: vp-rein .35s ease both;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
/*
 * 44 px Reserve fuer das Kreuz: Es ist 36 px breit und sitzt 4 px vom Rand,
 * plus 4 px Luft, damit ein „?" am Zeilenende nicht doch noch anstoesst.
 *
 * ⚠️ Damit diese Reserve keine Zeile kostet, darf die Karte auf schmalen
 *    Buehnen breiter werden — siehe die Medienabfrage weiter unten. Ohne die
 *    brach auf einem 412 px breiten Handy der Knopf eines Handlungsaufrufs in
 *    zwei Zeilen um, die Karte wurde 40 px hoeher und schob ihn unter die
 *    Bedienleiste (gefunden von cta.test.js).
 */
.vaira-player .vp-inhalt {
	padding-right: 44px;
	min-height: 0;
}
/*
 * ⚠️ Gescrollt wird NUR die Umfrage.
 *
 * `overflow-y: auto` macht aus dem Inhalt einen eigenen Formatierungskontext —
 * und darin zaehlt der umflossene Platzhalter fuer das Kreuz zur Hoehe, auch
 * wenn der Text kuerzer ist als er. Eine Infobox mit zwei Wörtern wurde damit
 * 30 px hoeher als noetig. Die Umfrage BRAUCHT das Scrollen (sie darf nicht
 * bis unter die Identitaetsleiste wachsen), alle anderen Karten nicht.
 */
.vaira-player .vp-umfrage .vp-inhalt {
	overflow-y: auto;
	overflow-x: hidden;
}

.vaira-player .vp-fuss {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex: 0 0 auto;
	min-height: 12px;
}
.vaira-player .vp-einblendung-text { margin: 0; }

/* --------------------------------------------------- Standzeit einer Karte
 *
 * Kreuz, Restsekunden und Balken gehören ab 0.6.5 an JEDE Einblendung.
 *
 * Vorher hatten sie nur Handlungsaufrufe MIT Zieladresse — eine Karte war
 * also je nach ausgefülltem Feld unterschiedlich bedienbar. Auf vaira.app
 * hat sich prompt nichts wegklicken lassen und kein Balken gezeigt
 * (Rückmeldung Dennis, 21.08.2026). Eine Bedienung, die von einem Feld im
 * Backend abhängt, ist keine Bedienung, sondern eine Falle.
 *
 * ⚠️ WARUM DER BALKEN NICHT `vp-balken` HEISST
 *
 * Genau so hieß er einen Nachmittag lang — und `umfrage.test.js` fiel um.
 * Diese Prüfung stellt sicher, dass ein Zuschauer NIE ein Umfrageergebnis
 * sieht (Entscheidung 22), und sie sucht dafür nach `.vp-balken`: dem
 * Ergebnisbalken. Ein Ablaufbalken mit demselben Klassennamen ist für sie
 * nicht davon zu unterscheiden — und für einen Menschen, der den Code liest,
 * auch nicht. Der Name `vp-balken` gehört dem Ergebnis. Er bleibt frei.
 */
.vaira-player .vp-zu {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 36px;
	height: 36px;
	z-index: 2;
	border: 0;
	background: transparent;
	color: #6b6b7b;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	border-radius: 8px;
	padding: 0;
}
.vaira-player .vp-zu:hover { background: rgba(0, 0, 0, .06); color: var(--vp-dunkel); }
.vaira-player .vp-rest {
	font-size: 11px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: #6b6b7b;
	pointer-events: none;
	white-space: nowrap;
}
.vaira-player .vp-standzeit {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: rgba(0, 0, 0, .08);
}
.vaira-player .vp-standzeit i {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--vp-orange);
}
/*
 * WARUM HIER max() STEHT (Befund vom 21.08.2026)
 *
 * 16 % klingen harmlos, sind aber ein Prozentsatz der BÜHNENHÖHE. Auf einem
 * hochkant gehaltenen Handy ist die Bühne 16:9 von 412 px, also rund 230 px
 * hoch — 16 % davon sind 37 px, und genau dort liegt die Leiste mit
 * „alle Funktionen freischalten" (z-index 6). Das Schließen-Kreuz eines
 * Handlungsaufrufs lag damit unter der Leiste: sichtbar, aber nicht tippbar.
 *
 * Gefunden von cta.test.js bei 412x915, mit derselben Messung wie beim
 * Querformat-Befund: elementFromPoint auf die Mitte des Knopfes. „Liegt im
 * Bild" allein ist eben keine Aussage darüber, ob man drankommt.
 *
 * max() statt einer Medienabfrage, weil nicht die Fenstergröße das Problem
 * ist, sondern die Bühnenhöhe — und die hängt auch vom Seitenlayout ab.
 */
/*
 * ⚠️ Auf einem Handy ist die Karte breiter — 46 % von 346 px sind 159 px, und
 *    davon gehen 44 px Reserve fuer das Kreuz ab. Ein Knopftext wie „Mehr
 *    erfahren" passt dann nicht mehr in eine Zeile. Auf dem kleinen Schirm ist
 *    ohnehin nichts daneben, was die Karte verdecken wuerde.
 */
@media (max-width: 760px) {
	.vaira-player .vp-einblendung { max-width: min(66%, 420px); }
	.vaira-player .vp-umfrage { max-width: min(76%, 460px); }
}

/* ------------------------------------------------ Wo eine Karte im Bild sitzt
 *
 * Neun Stellen ab 0.23.0 (Wunsch Dennis, 08.09.2026), vorher zwei. Es ist ein
 * Drei-mal-drei-Raster: drei Zeilen (oben, Mitte, unten) mal drei Spalten
 * (links, mittig, rechts).
 *
 * ⚠️ Die zentrierten Stellen brauchen `transform: translate(...)` — und die
 *    Einflug-Animation animiert ebenfalls `transform`. Beides an derselben
 *    Karte hiesse: Die Animation gewinnt, und die Karte springt am Ende auf
 *    ihre unzentrierte Stelle zurueck. Deshalb gibt es VIER Einflugkurven, und
 *    jede traegt die Zentrierung in ihren eigenen Bildern mit. Weil sie mit
 *    `both` laufen, bleibt das Schlussbild stehen — die Zentrierung gilt also
 *    auch nach dem Einfliegen.
 *
 * Die Werte `left`/`untenlinks` sind unveraendert: Bestehende Zeitachsen
 * sollen nach dem Update genau so aussehen wie vorher.
 */
.vaira-player .vp-pos-obenlinks { left: 16px; top: max(8%, 28px); }
.vaira-player .vp-pos-oben { left: 50%; top: max(8%, 28px); }
.vaira-player .vp-pos-obenrechts { right: 16px; top: max(8%, 28px); }
.vaira-player .vp-pos-links { left: 16px; top: max(16%, 46px); }
.vaira-player .vp-pos-mittig { left: 50%; top: 50%; }
.vaira-player .vp-pos-rechts { right: 16px; top: max(16%, 46px); }
.vaira-player .vp-pos-untenlinks { left: 16px; bottom: 12%; }
.vaira-player .vp-pos-untenmittig { left: 50%; bottom: 12%; }
.vaira-player .vp-pos-untenrechts { right: 16px; bottom: 12%; }

@keyframes vp-rein {
	from { opacity: 0; transform: translateX(-18px); }
	to { opacity: 1; transform: translateX(0); }
}

/* Von rechts kommt, was rechts sitzt — sonst fliegt die Karte aus dem Bild. */
@keyframes vp-rein-rechts {
	from { opacity: 0; transform: translateX(18px); }
	to { opacity: 1; transform: translateX(0); }
}

/* Waagerecht zentriert: von unten hoch, die Zentrierung bleibt erhalten. */
@keyframes vp-rein-mittespalte {
	from { opacity: 0; transform: translateX(-50%) translateY(14px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Ganz in der Mitte: kein Flug, sondern ein Aufziehen. */
@keyframes vp-rein-mitte {
	from { opacity: 0; transform: translate(-50%, -50%) scale(.965); }
	to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.vaira-player .vp-pos-obenrechts,
.vaira-player .vp-pos-rechts,
.vaira-player .vp-pos-untenrechts {
	animation-name: vp-rein-rechts;
}

.vaira-player .vp-pos-oben,
.vaira-player .vp-pos-untenmittig {
	transform: translateX(-50%);
	animation-name: vp-rein-mittespalte;
}

.vaira-player .vp-pos-mittig {
	transform: translate(-50%, -50%);
	animation-name: vp-rein-mitte;
}

.vaira-player .vp-hinweisband {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%) translateY(20px);
	background: rgba(2, 0, 29, 0.92);
	color: #fff;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 14px;
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
	z-index: 6;
	pointer-events: none;
	white-space: nowrap;
	max-width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vaira-player .vp-hinweisband.vp-sichtbar { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Hinweise immer ganz lesbar (0.32.0) */
.vaira-player .vp-hinweisband {
	white-space: normal;
	text-align: center;
	width: max-content;
	max-width: calc(100% - 28px);
	box-sizing: border-box;
	border-radius: 14px;
	line-height: 1.35;
	overflow: visible;
	text-overflow: clip;
	z-index: 8;
}
.vaira-player.vp-steuerung-an .vp-hinweisband { bottom: 62px; }
.vaira-player.vp-hinweis-an .vp-hochkant,
.vaira-player.vp-fehler-an .vp-hochkant { display: none; }
@media (max-width: 600px) {
	.vaira-player .vp-hinweisband { font-size: 13px; padding: 7px 12px; bottom: 10px; }
}

/* Stoerungshinweis (0.32.0) */
.vaira-player .vp-fehler {
	position: absolute;
	inset: 0;
	z-index: 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 20px;
	box-sizing: border-box;
	overflow-y: auto;
	text-align: center;
	background: rgba(2, 0, 29, .94);
	color: #fff;
}
.vaira-player .vp-fehler[hidden] { display: none; }
.vaira-player .vp-fehler h3 { margin: 0; font-size: clamp(16px, 2.6vw, 22px); line-height: 1.25; color: #fff; }
.vaira-player .vp-fehler p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.45; color: #d7d7e0; }
.vaira-player .vp-fehler-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 2px; }
.vaira-player .vp-fehler .vp-knopf { font-size: 15px; padding: 10px 18px; }
.vaira-player .vp-fehler .vp-knopf-leise,
.vaira-player .vp-fehler .vp-knopf-leise:link,
.vaira-player .vp-fehler .vp-knopf-leise:visited {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85);
}
.vaira-player .vp-fehler p.vp-fehler-kontakt { font-size: 13px; }
.vaira-player .vp-fehler-link,
.vaira-player .vp-fehler-link:link,
.vaira-player .vp-fehler-link:visited {
	color: var(--vp-orange);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}
.vaira-player .vp-fehler-link:hover { color: #fff; }
.vaira-player .vp-fehler-zu {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #d7d7e0;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.vaira-player .vp-fehler-zu:hover { background: rgba(255, 255, 255, .12); color: #fff; }
@media (max-width: 600px), (max-height: 420px) {
	.vaira-player .vp-fehler { gap: 6px; padding: 10px 40px 10px 12px; justify-content: flex-start; }
	.vaira-player .vp-fehler h3 { font-size: 15px; margin-top: 4px; }
	.vaira-player .vp-fehler p { font-size: 12.5px; line-height: 1.35; }
	.vaira-player .vp-fehler .vp-knopf { font-size: 13px; padding: 7px 12px; }
	.vaira-player .vp-fehler p.vp-fehler-kontakt { font-size: 12px; }
}

/* Abschluss-Knoepfe als Einblendung (0.32.0) */
.vaira-player .vp-endecta-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.vaira-player .vp-cta-knopf.vp-cta-knopf-leise,
.vaira-player .vp-cta-knopf.vp-cta-knopf-leise:hover,
.vaira-player .vp-cta-knopf.vp-cta-knopf-leise:focus,
.vaira-player .vp-cta-knopf.vp-cta-knopf-leise:active {
	background: transparent;
	color: var(--vp-dunkel);
	box-shadow: inset 0 0 0 1.5px var(--vp-orange);
}

.vaira-player .vp-debug {
	position: absolute;
	right: 52px;
	top: 10px;
	background: rgba(0, 0, 0, .72);
	color: #7CFC9B;
	font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
	padding: 8px 10px;
	border-radius: 6px;
	white-space: pre;
	z-index: 8;
	pointer-events: none;
}

/* Identitaetsleiste: kein Popup fuer Angemeldete, sondern ein sichtbarer
   Schalter (Entscheidung 13). */
.vaira-player .vp-leiste {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	background: linear-gradient(to bottom, rgba(2, 0, 29, .78), rgba(2, 0, 29, 0));
	font-size: 13px;
	color: #e6e6ee;
	z-index: 6;
}
.vaira-player .vp-leiste[hidden] { display: none; }
.vaira-player .vp-leiste-link {
	appearance: none;
	background: none;
	border: 0;
	color: #fff;
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
	padding: 2px 4px;
}
.vaira-player .vp-leiste-link.vp-betont {
	background: var(--vp-orange);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	padding: 4px 12px;
}

/* Postfach und Freischalten. Ausserhalb des Vollbilds oeffnen die Fenster als
   Dialog ueber der Seite (Entscheidung 24) - im Player waere ein 16:9-Rahmen
   fuer ein Formular zu niedrig. */
/* ---------------------------------------------------------------------------
 * Fenster liegen auf der SEITE, nicht im Player (ab 0.8.0)
 *
 * Vorher sassen sie im Player. Auf einem hochkant gehaltenen Handy ist der
 * rund 210 px hoch — ein Formular mit vier Feldern war dort winzig und kaum
 * auszufuellen (Befund Dennis, 24.08.2026). Jetzt verhaelt es sich wie ein
 * gewoehnliches Popup und darf so hoch werden, wie es braucht.
 * ------------------------------------------------------------------------ */
.vaira-dialog-schicht {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(2, 0, 29, .72);
	/* Ueber dem Player und damit auch ueber allem, was der Player ueberdeckt. */
	z-index: 2147483646;
	padding: 16px;
	overscroll-behavior: contain;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
/* Solange ein Fenster offen ist, scrollt die Seite dahinter nicht mit. */
html.vaira-dialog-offen { overflow: hidden; }

/*
 * Borlabs-Cookie-Fenster ueber dem Player (0.29.4).
 * Nur das Einwilligungsfenster, nicht das Borlabs-Symbol: Das bleibt unter
 * dem Player, damit es im Querformat den Vollbildknopf nicht verdeckt.
 */
#BorlabsCookieBox .brlbs-z-max { z-index: 2147483647 !important; }

/*
 * Im Vollbild rueckt das Fenster an den rechten Rand (ab 0.26.2).
 *
 * Befund Dennis, 11.09.2026: Mittig verdeckt es genau das Bild, ueber das man
 * gerade schreibt. Rechts mit Abstand bleibt der groessere Teil des Videos zu
 * sehen -- und dort sitzen auch die Reaktionen, der Weg ist also kurz.
 *
 * Bewusst NUR im Vollbild und nur am Zeigegeraet: Die Klasse setzt player.js
 * genau dann, wenn das Vollbild stehen bleibt. Ausserhalb des Vollbilds und auf
 * dem Telefon bleibt das Fenster mittig -- dort ist Platz das Knappste.
 */
.vaira-dialog-schicht.vp-dialog-im-vollbild {
	justify-content: flex-end;
	padding-right: clamp(16px, 4vw, 56px);
}

.vaira-dialog-schicht .vp-dialog-kasten {
	position: relative;
	background: #fff;
	color: #02001d;
	border-radius: 14px;
	padding: 26px 24px 22px;
	width: min(460px, 100%);
	max-height: min(88vh, 88dvh);
	overflow: auto;
	text-align: left;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
	/* Auf kleinen Schirmen bis an den Rand — Platz ist dort das Knappste. */
	-webkit-overflow-scrolling: touch;
}
.vaira-dialog-schicht .vp-dialog-kasten h3 { margin: 0 0 6px; font-size: 18px; color: var(--vp-dunkel); }
.vaira-dialog-schicht .vp-dialog-kasten p { margin: 0 0 14px; font-size: 14px; color: #5a5a6c; }
.vaira-dialog-schicht .vp-dialog-kasten p.vp-timecode { margin: -4px 0 10px; font-size: 13px; }
.vaira-dialog-schicht .vp-dialog-kasten p.vp-timecode strong { color: var(--vp-dunkel); font-variant-numeric: tabular-nums; }
/* Das Kreuz sitzt in der Ecke, nicht im Text. Vorher stand es so weit
   innerhalb, dass es wie ein Teil des Formulars aussah (Befund 24.08.2026). */
.vaira-dialog-schicht .vp-dialog-zu {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 36px;
	height: 36px;
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #8a8a99;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vaira-dialog-schicht .vp-dialog-zu:hover { background: rgba(0, 0, 0, .06); color: #02001d; }
.vaira-dialog-schicht .vp-dialog-zu:focus-visible { outline: 2px solid #ff7e05; outline-offset: 2px; }

/* Der Datenschutzhinweis, wie in allen Vaira-Formularen. */
.vaira-dialog-schicht .vp-legal {
	font-size: 12px;
	line-height: 1.45;
	color: #6a6a7c;
	margin: 0 0 14px;
}
.vaira-dialog-schicht .vp-legal a { color: #02001d; }

/*
 * Der Knopf im Fenster: gross genug fuer einen Daumen.
 *
 * ⚠️ Dasselbe wie oben beim `.vp-knopf` im Player, und aus demselben Grund:
 *    „Der Freischalten-Button verhält sich genauso" (Dennis, 01.09.2026).
 *    Das Fenster haengt am `<body>` der Seite, also greift das Theme hier
 *    sogar direkter. Alle Zustaende stehen deshalb ausdruecklich da.
 */
.vaira-dialog-schicht .vp-knopf,
.vaira-dialog-schicht .vp-knopf:link,
.vaira-dialog-schicht .vp-knopf:visited {
	appearance: none;
	border: 0;
	background: #ff7e05;
	color: #fff;
	font: inherit;
	font-weight: 700;
	font-size: 16px;
	padding: 13px 18px;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
	transition: background .14s ease;
}
.vaira-dialog-schicht .vp-knopf:hover,
.vaira-dialog-schicht .vp-knopf:focus,
.vaira-dialog-schicht .vp-knopf:focus-visible,
.vaira-dialog-schicht .vp-knopf:active {
	background: #e06f00;
	color: #fff;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: none;
}
.vaira-dialog-schicht .vp-knopf:focus-visible {
	outline: 3px solid #02001d;
	outline-offset: 2px;
}
.vaira-dialog-schicht .vp-feld { display: block; margin: 0 0 10px; }
.vaira-dialog-schicht .vp-feld span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.vaira-dialog-schicht .vp-feld input,
.vaira-dialog-schicht .vp-textfeld {
	width: 100%;
	border: 1px solid #d3d3de;
	border-radius: 8px;
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	color: var(--vp-dunkel);
	background: #fff;
}
.vaira-dialog-schicht .vp-textfeld { margin-bottom: 10px; resize: vertical; }
.vaira-dialog-schicht .vp-dialog-fehler { color: #c1272d; font-size: 13px; margin: 0 0 10px; min-height: 1em; }
.vaira-dialog-schicht .vp-dialog-kasten .vp-knopf { width: 100%; text-align: center; display: block; text-decoration: none; }

/* Umfragen: unten links (Entscheidung 19), ohne jedes Ergebnis (Entscheidung 22) */
.vaira-player .vp-umfrage {
	max-width: min(56%, 460px);
	padding: 14px 16px 6px;
	/* Nicht bis unter die Identitaetsleiste wachsen. */
	max-height: 66%;
	/*
	 * ⚠️ Gescrollt wird der INHALT, nicht die Karte.
	 *
	 * Bis 0.21.0 stand `overflow: auto` hier an der Karte -- und weil Kreuz
	 * und Restsekunden absolut darin lagen, blieben sie stehen, waehrend die
	 * Antworten darunter durchliefen. Genau daher kam „der Countdown steht
	 * halb in der letzten Option".
	 */
	overflow: hidden;
}
.vaira-player .vp-umfrage-frage { margin: 0 0 10px; font-weight: 700; font-size: 15px; line-height: 1.4; }
.vaira-player .vp-umfrage-antworten { display: flex; flex-direction: column; gap: 6px; }
.vaira-player .vp-umfrage-antwort {
	appearance: none;
	text-align: left;
	border: 1px solid #d3d3de;
	background: #fff;
	color: var(--vp-dunkel);
	border-radius: 8px;
	padding: 9px 13px;
	font: inherit;
	font-size: 14.5px;
	cursor: pointer;
	transition: border-color .12s, background .12s;
}
.vaira-player .vp-umfrage-antwort:hover,
.vaira-player .vp-umfrage-antwort:focus-visible {
	border-color: var(--vp-orange);
	background: #fff6ec;
	color: var(--vp-dunkel);
	border-radius: 8px;
}
.vaira-player .vp-umfrage-danke { margin: 0; font-weight: 700; color: var(--vp-orange); }
.vaira-player .vp-umfrage-fertig { border-left-color: #0f7a3d; }

/* ----------------------------------------------------- Handlungsaufrufe
 *
 * Absprache vom 21.08.2026: Der Kasten bleibt stehen, bis er weggeklickt
 * wird, laengstens die eingetragene Dauer. Der Balken unten zeigt sie
 * ablaufen — ohne ihn verschwindet die Karte mitten im Ueberlegen und der
 * Zuschauer haelt es fuer einen Fehler.
 *
 * Das Schliessen-Kreuz ist bewusst gross genug fuer einen Daumen (36 px):
 * Es sitzt in einer Ecke, und Ecken trifft man auf einem Handy schlecht.
 */
.vaira-player .vp-cta-text { margin: 0 0 10px; font-weight: 600; }
.vaira-player .vp-cta-knopf {
	display: inline-block;
	background: var(--vp-orange);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	padding: 9px 16px;
	border-radius: 8px;
	line-height: 1.2;
}
/* Radius und Rand wiederholen sich, damit das Theme sie nicht ersetzt. */
.vaira-player .vp-cta-knopf:hover,
.vaira-player .vp-cta-knopf:focus,
.vaira-player .vp-cta-knopf:active {
	background: var(--vp-orange-dunkel);
	color: #fff;
	text-decoration: none;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
}
/* Nach dem Klick bleibt die Karte kurz sichtbar quittiert stehen. */
.vaira-player .vp-cta-geklickt { border-left-color: #0f7a3d; }
.vaira-player .vp-cta-geklickt .vp-standzeit i { background: #0f7a3d; }

/* Untertitel (Entscheidung 23) */
.vaira-player .vp-leiste-link.vp-untertitel {
	font-variant-numeric: tabular-nums;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 6px;
	padding: 3px 8px;
	min-height: 32px;
}
.vaira-player .vp-leiste-link.vp-untertitel.vp-an {
	border-color: var(--vp-orange);
	color: var(--vp-orange);
}
/* Die Einblendungen kommen von links, die Reaktionsspalte steht rechts
 * (Entscheidungen 15 und 19). Untertitel gehoeren dazwischen nach unten
 * mittig — und hoch genug, dass die Bedienleiste sie nicht ueberdeckt. */
.vaira-player video::cue {
	background: rgba(2, 0, 29, .78);
	color: #fff;
	font-size: 1em;
	line-height: 1.35;
}
.vaira-player video::-webkit-media-text-track-container {
	transform: translateY(-6%);
}

/* Seitenprogression (Entscheidung 28)
 *
 * ⚠️ Das Verstecken haengt an `vp-reveal-bereit` auf dem <html>-Element, und
 *    diese Klasse setzt ausschliesslich player.js. Ohne JavaScript — oder wenn
 *    der Player scheitert — greift keine dieser Regeln und die Seite ist
 *    vollstaendig lesbar. Andersherum waere ein Fehler im Player gleich einer
 *    leeren Landingpage.
 */
.vp-reveal-bereit .vp-reveal {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	/*
	 * ⚠️ HIER STEHT BEWUSST KEINE TRANSITION.
	 *
	 * Das Verstecken beim Laden muss augenblicklich passieren. Mit einer
	 * Überblendung waeren beim Seitenaufruf erst alle Abschnitte zu sehen und
	 * wuerden dann eine halbe Sekunde lang wegblenden — die Seite saehe aus,
	 * als raeume sie sich selbst ab. Aufgefallen am 21.08.2026, weil eine
	 * Pruefung sporadisch rot wurde: Sie mass genau in dieses Zeitfenster
	 * hinein. Der sporadische Fehlschlag war kein Testproblem, sondern der
	 * Befund.
	 *
	 * Weich wird es erst mit `vp-reveal-weich`, das player.js im naechsten
	 * Bildaufbau nachtraegt — also nach dem ersten Verstecken.
	 */
}

/*
 * ⚠️ EIN ZUGEKLAPPTER ABSCHNITT NIMMT KEINEN PLATZ MEHR WEG (0.26.0).
 *
 * Bis 0.25.0 stand oben nur `opacity: 0; visibility: hidden`. Das macht den
 * Abschnitt unsichtbar, aber sein Kasten bleibt stehen: Wer in Elementor eine
 * Mindesthoehe setzt, bekam mitten auf der Seite ein Loch von genau dieser
 * Hoehe — und bei Elementor-Containern obendrein den `gap` zum naechsten
 * Abschnitt dazu. Befund Dennis, 11.09.2026.
 *
 * Deshalb `display: none` — aber nur, solange `vp-sichtbar` FEHLT. Diese
 * Einschraenkung ist der ganze Trick: Sobald der Abschnitt aufgeht, gilt die
 * Regel gar nicht mehr, und es ist nichts zurueckzusetzen. Der Abschnitt
 * bekommt genau das `display` zurueck, das Elementor oder das Theme ihm geben
 * (`flex` beim Container, `block` bei einer Section) — was ein `display: revert`
 * auf der Sichtbar-Regel gerade NICHT koennte: `revert` wirft alle Angaben des
 * Autors weg, also auch die von Elementor.
 *
 * Aus demselben Grund ist `!important` hier ungefaehrlich. Es schlaegt beim
 * Verstecken Theme- und Inline-Angaben, steht dem sichtbaren Abschnitt aber
 * nie im Weg.
 *
 * ⚠️ Die Grundregel von oben gilt weiter: Ohne `vp-reveal-bereit` — also ohne
 *    JavaScript — greift auch diese Regel nicht. Die Seite bleibt vollstaendig.
 */
.vp-reveal-bereit .vp-reveal:not(.vp-sichtbar) {
	display: none !important;
}
.vp-reveal-bereit.vp-reveal-weich .vp-reveal {
	transition: opacity .45s ease, transform .45s ease, visibility 0s .45s;
}
.vp-reveal-bereit .vp-reveal.vp-sichtbar {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.vp-reveal-bereit.vp-reveal-weich .vp-reveal.vp-sichtbar {
	transition: opacity .45s ease, transform .45s ease;
}

/*
 * Die Ueberblendung beim Aufgehen (0.26.0).
 *
 * Ein Element, das von `display: none` kommt, hat fuer den Browser keinen
 * Vorher-Zustand — ohne diesen Block poppt der Abschnitt hart auf, statt
 * einzublenden. `@starting-style` reicht den Startwert nach.
 *
 * Browser ohne `@starting-style` (aelter als Chrome 117, Safari 17.4,
 * Firefox 129) ueberspringen die Regel samt Block: Dort erscheint der
 * Abschnitt ohne Ueberblendung. Das ist der gewollte Rueckfall — kein
 * Weissraum, nur keine Animation.
 */
@starting-style {
	.vp-reveal-bereit.vp-reveal-weich .vp-reveal.vp-sichtbar {
		opacity: 0;
		transform: translateY(10px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.vp-reveal-bereit.vp-reveal-weich .vp-reveal,
	.vp-reveal-bereit.vp-reveal-weich .vp-reveal.vp-sichtbar {
		transform: none;
		transition: opacity .2s linear;
	}
	@starting-style {
		.vp-reveal-bereit.vp-reveal-weich .vp-reveal.vp-sichtbar {
			transform: none;
		}
	}
}

/* ---------------------------------------------------------------------------
 * Kapitelmenü im VOD (Entscheidung 38), Fassung „Zeitachse" vom 11.09.2026
 *
 * ⚠️ DIE REGELN HÄNGEN AN `.vaira-dialog-schicht`, NICHT AN `.vaira-player`.
 *
 * Vorher standen sie als `.vaira-player .vp-kapitel` da -- und griffen nie.
 * Das Fenster haengt per `dialogZiel()` am `<body>` der Seite, also AUSSERHALB
 * des Players; der Selektor passte damit auf nichts. Was man auf vaira.app sah,
 * war die Button-Vorlage des Themes: dunkle Pille, zentrierter Text, Zeit und
 * Name ohne Abstand aneinandergeklebt. Auch `var(--vp-orange)` war dort leer,
 * weil die Variable auf `.vaira-player` definiert ist -- deshalb Klartext-
 * Hexwerte hier, wie bei allen anderen Fenster-Regeln in dieser Datei.
 *
 * Im Vollbild liefert `dialogZiel()` den Player selbst; `.vaira-dialog-schicht`
 * sitzt aber in beiden Faellen auf der Schicht, also greift es dort ebenso.
 *
 * ⚠️ Textfarbe ist `#b35a00`, nicht das Marken-Orange. `#ff7e05` kommt auf Weiss
 *    nur auf 2,5:1 -- fuer 11-px-Zeitangaben zu wenig. Volles `#ff7e05` bleibt
 *    ueberall dort, wo es Flaeche ist: Achse, Punkt, Etikett, Scrollbar.
 */
.vaira-dialog-schicht .vp-kapitelliste {
	position: relative;
	max-height: 46vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin-top: 10px;
	padding-right: 4px;
	/* Orangene Scrollbar wie ueberall bei Vaira. Firefox. */
	scrollbar-width: thin;
	scrollbar-color: #ff7e05 rgba(2, 0, 29, .08);
}
/* Dieselbe Scrollbar fuer Safari, Chrome und Edge. */
.vaira-dialog-schicht .vp-kapitelliste::-webkit-scrollbar { width: 8px; }
.vaira-dialog-schicht .vp-kapitelliste::-webkit-scrollbar-track {
	background: rgba(2, 0, 29, .07);
	border-radius: 99px;
}
.vaira-dialog-schicht .vp-kapitelliste::-webkit-scrollbar-thumb {
	background: #ff7e05;
	border: 2px solid #fff;
	border-radius: 99px;
}
.vaira-dialog-schicht .vp-kapitelliste::-webkit-scrollbar-thumb:hover { background: #e06f00; }

.vaira-dialog-schicht .vp-kapitel {
	position: relative;
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: #02001d;
	font: inherit;
	padding: 9px 8px 9px 30px;
	min-height: 44px;
	cursor: pointer;
}
/* Die Achse selbst: eine Linie durch alle Zeilen, oben und unten gestutzt. */
.vaira-dialog-schicht .vp-kapitel::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #e7e5ee;
}
.vaira-dialog-schicht .vp-kapitelliste .vp-kapitel:first-child::before { top: 17px; }
.vaira-dialog-schicht .vp-kapitelliste .vp-kapitel:last-child::before {
	bottom: calc(100% - 17px);
}
.vaira-dialog-schicht .vp-kapitel-punkt {
	position: absolute;
	left: 7px;
	top: 12px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #c9c6d4;
}
.vaira-dialog-schicht .vp-kapitel-kopf {
	display: flex;
	align-items: center;
	gap: 6px;
}
.vaira-dialog-schicht .vp-kapitel-zeit {
	font-variant-numeric: tabular-nums;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	color: #7a7789;
}
.vaira-dialog-schicht .vp-kapitel-etikett {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #b35a00;
	background: rgba(255, 126, 5, .13);
	border-radius: 4px;
	padding: 1px 5px;
}
.vaira-dialog-schicht .vp-kapitel-name {
	display: block;
	font-size: 15px;
	line-height: 1.35;
	margin-top: 1px;
}
.vaira-dialog-schicht .vp-kapitel:hover { background: rgba(2, 0, 29, .04); }
.vaira-dialog-schicht .vp-kapitel:hover .vp-kapitel-punkt { border-color: #ff7e05; }
.vaira-dialog-schicht .vp-kapitel:focus-visible {
	outline: 2px solid #ff7e05;
	outline-offset: 1px;
	background: rgba(2, 0, 29, .04);
}
/* Schon gesehen: Achse orange, Punkt gefuellt. */
.vaira-dialog-schicht .vp-kapitel[data-gesehen="true"]::before {
	background: #ff7e05;
	opacity: .35;
}
.vaira-dialog-schicht .vp-kapitel[data-gesehen="true"] .vp-kapitel-punkt {
	background: #c9c6d4;
	border-color: #c9c6d4;
}
/* Laeuft gerade. */
.vaira-dialog-schicht .vp-kapitel[aria-current="true"] .vp-kapitel-punkt {
	background: #ff7e05;
	border-color: #ff7e05;
	box-shadow: 0 0 0 4px rgba(255, 126, 5, .2);
}
.vaira-dialog-schicht .vp-kapitel[aria-current="true"] .vp-kapitel-name { font-weight: 700; }
.vaira-dialog-schicht .vp-kapitel[aria-current="true"] .vp-kapitel-zeit { color: #b35a00; }

.vaira-player .vp-wegweiser { color: var(--vp-orange); font-weight: 700; }

/* ---------------------------------------------------------------------------
 * Bedienleiste am unteren Rand (24.08.2026, Wunsch Dennis)
 *
 * Ton mit Regler, Laufzeit, Untertitel, Qualitaet, Vollbild. Blendet sich ein,
 * wenn der Zeiger in den Player kommt, und nach gut drei Sekunden Ruhe wieder
 * aus. Auf Touchgeraeten holt ein Tipp aufs Bild sie herbei.
 *
 * ⚠️ Keine Spulleiste, mit Absicht — Entscheidung 10 (Spulsperre). Ein
 * schiebbarer Balken waere ein Versprechen, das der Player gleich wieder
 * einkassiert.
 * ------------------------------------------------------------------------ */
.vaira-player .vp-steuerung {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	background: linear-gradient(to top, rgba(2, 0, 29, .86), rgba(2, 0, 29, .55) 60%, rgba(2, 0, 29, 0));
	color: #fff;
	font-size: 13px;
	z-index: 7;
	animation: vp-st-auf .16s ease;
}
.vaira-player .vp-steuerung[hidden] { display: none; }

@keyframes vp-st-auf {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.vaira-player .vp-steuerung { animation: none; }
}

.vaira-player .vp-st-knopf {
	appearance: none;
	background: none;
	border: 0;
	color: #fff;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
	/* 32 px sind auf dem Handy die Untergrenze fuer sicheres Treffen. */
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.vaira-player .vp-st-knopf:hover { background: rgba(255, 255, 255, .16); }
.vaira-player .vp-st-knopf:focus-visible { outline: 2px solid var(--vp-orange); outline-offset: 2px; }
.vaira-player .vp-st-knopf.vp-an { color: var(--vp-orange); font-weight: 700; }

.vaira-player .vp-st-ton { display: flex; align-items: center; gap: 6px; }
.vaira-player .vp-st-ton.vp-gesperrt .vp-st-regler { opacity: .45; cursor: not-allowed; }
.vaira-player .vp-st-hinweis { font-size: 11px; color: #b9b9c8; white-space: nowrap; }

.vaira-player .vp-st-regler {
	appearance: none;
	width: 86px;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .34);
	outline: none;
	cursor: pointer;
}
.vaira-player .vp-st-regler::-webkit-slider-thumb {
	appearance: none;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}
.vaira-player .vp-st-regler::-moz-range-thumb {
	width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; cursor: pointer;
}
.vaira-player .vp-st-regler:focus-visible { outline: 2px solid var(--vp-orange); outline-offset: 3px; }

.vaira-player .vp-st-zeit { font-variant-numeric: tabular-nums; color: #e6e6ee; white-space: nowrap; }
.vaira-player .vp-st-luecke { flex: 1 1 auto; }

.vaira-player .vp-st-menue {
	position: absolute;
	bottom: calc(100% - 4px);
	min-width: 148px;
	max-height: 46vh;
	overflow-y: auto;
	background: rgba(2, 0, 29, .96);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 8px;
	padding: 4px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.vaira-player .vp-st-menue-zeile {
	appearance: none;
	background: none;
	border: 0;
	color: #fff;
	font: inherit;
	text-align: left;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
}
.vaira-player .vp-st-menue-zeile:hover { background: rgba(255, 255, 255, .14); }
.vaira-player .vp-st-menue-zeile.vp-an { color: var(--vp-orange); font-weight: 700; }
.vaira-player .vp-st-menue-zeile.vp-an::before { content: "✓ "; }

/* Umfragen und Hinweise sitzen unten (Entscheidung 19). Steht die
   Bedienleiste, ruecken sie ueber sie — sonst verdeckt die eine das andere.
   Gilt ab 0.23.0 fuer alle drei unteren Stellen des Rasters. */
.vaira-player.vp-steuerung-an .vp-pos-untenlinks,
.vaira-player.vp-steuerung-an .vp-pos-untenmittig,
.vaira-player.vp-steuerung-an .vp-pos-untenrechts { bottom: calc(12% + 40px); }

/* Quer gehaltenes Handy: Platz ist knapp, der Hinweistext faellt zuerst. */
@media (orientation: landscape) and (max-height: 560px) {
	.vaira-player .vp-steuerung { padding: 6px 10px; gap: 7px; }
	.vaira-player .vp-st-regler { width: 62px; }
	.vaira-player .vp-st-hinweis { display: none; }
}
@media (max-width: 420px) {
	.vaira-player .vp-st-regler { width: 56px; }
	.vaira-player .vp-st-hinweis { display: none; }
}

/* ---------------------------------------------------------------------------
 * Pseudo-Vollbild (Abschnitt 11.1)
 *
 * Auf dem iPhone gibt es kein echtes Vollbild fuer normale Elemente. Sein
 * einziges Vollbild ist der native Apple-Player — dort sind unsere
 * Einblendungen weg und seine Spulleiste haengt die Spulsperre aus. Also
 * fuellt der Player das Fenster, das Video bleibt eingebettet.
 *
 * ⚠️ 100dvh, nicht 100vh. Der Layout-Viewport ist auf Android Chrome hoeher
 * als der sichtbare Bereich, solange die Adressleiste steht — mit 100vh
 * verschwindet die Bedienleiste dahinter. Befund vom 21.08.2026, auf der
 * Pruefseite seit 0.5.3 so gebaut.
 * ------------------------------------------------------------------------ */
.vaira-player.vp-vollbild {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	border-radius: 0;
	aspect-ratio: auto;
	z-index: 2147483640;
	background: #000;
}

/* Echtes Vollbild: Der Browser gibt uns den ganzen Schirm, das Seitenverhaeltnis
   darf dann nicht mehr 16:9 erzwingen. */
.vaira-player:fullscreen,
.vaira-player:-webkit-full-screen {
	max-width: none;
	max-height: none;
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
	border-radius: 0;
}

/* Die Knopfzeile innerhalb der Leiste. */
.vaira-player .vp-st-zeile {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

/* Symbole in den Knöpfen: nehmen die Textfarbe an, überall gleich groß. */
.vaira-player .vp-st-knopf svg { width: 20px; height: 20px; display: block; fill: currentColor; }

/* ---------------------------------------------------------------------------
 * Spulleiste — NUR in der Aufzeichnung
 *
 * ⚠️ Live gibt es sie nicht, und das ist Entscheidung 10: Alle sehen dieselbe
 * Sekunde. In der Aufzeichnung gibt es niemanden, mit dem man gleich sein
 * müsste — dort ist Spulen ohnehin erlaubt, es fehlte nur der Griff.
 * ------------------------------------------------------------------------ */
/*
 * ⚠️ Seit 0.22.0 liegt die Spulleiste IN der Symbolzeile, nicht darueber.
 *
 * Sie ersetzt dort das Fuellstueck `vp-st-luecke` und muss sich deshalb
 * genauso dehnen wie das: `flex: 1 1 auto` plus `min-width: 0` -- ohne die
 * Null-Mindestbreite bestimmt bei Flexbox die Standardbreite eines
 * `input[type=range]` (rund 130 px) die Untergrenze, und auf schmalen Schirmen
 * schoebe die Leiste den Vollbildknopf aus dem Bild.
 */
.vaira-player .vp-st-spulen {
	appearance: none;
	flex: 1 1 auto;
	min-width: 0;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .32);
	outline: none;
	cursor: pointer;
	margin: 0;
}
.vaira-player .vp-st-spulen::-webkit-slider-thumb {
	appearance: none;
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--vp-orange); cursor: pointer;
}
.vaira-player .vp-st-spulen::-moz-range-thumb {
	width: 14px; height: 14px; border: 0; border-radius: 50%;
	background: var(--vp-orange); cursor: pointer;
}
.vaira-player .vp-st-spulen:focus-visible { outline: 2px solid var(--vp-orange); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
 * Bitte um Querformat
 *
 * Erzwingen geht nicht (Abschnitt 11.1). Also die Bitte — und zwar nur dort,
 * wo sie stimmt: schmaler Schirm, hochkant. Am Schreibtisch sieht sie niemand.
 * ------------------------------------------------------------------------ */
.vaira-player .vp-hochkant { display: none; }
@media (orientation: portrait) and (max-width: 820px) {
	.vaira-player .vp-hochkant {
		display: block;
		position: absolute;
		left: 50%;
		bottom: 12px;
		transform: translateX(-50%);
		z-index: 6;
		background: rgba(2, 0, 29, .82);
		color: #fff;
		font-size: 12px;
		line-height: 1.3;
		padding: 7px 12px;
		border-radius: 999px;
		white-space: nowrap;
		pointer-events: none;
	}
	/* Steht die Bedienleiste, rückt der Hinweis darüber. */
	.vaira-player.vp-steuerung-an .vp-hochkant { bottom: 62px; }
}

/* Reaktionen: dieselben einfarbigen Striche wie in der Bedienleiste. */
.vaira-player .vp-reaktionen button svg {
	width: 60%;
	height: 60%;
	display: block;
}

/* Abspielen und Anhalten — nur in der Aufzeichnung, links vom Zeitbalken. */
.vaira-player .vp-st-spielen { flex: 0 0 auto; }
.vaira-player .vp-st-spielen svg { width: 18px; height: 18px; }

/* -------------------------------------------------------------------------
 * Standbild im Vorlauf, Countdown und Warteraum (0.16.0)
 *
 * Bis 0.15.0 war die Fläche vor dem Start schlicht schwarz. Eine
 * Viertelstunde schwarzer Bildschirm sieht aus, als sei etwas kaputt — und
 * Zuschauer, die das denken, laden neu oder gehen wieder. Das Standbild liegt
 * deshalb HINTER dem Text, nicht statt seiner.
 *
 * Sobald das Video läuft, ist es weg: Es hängt an data-phase, nicht an einer
 * Sichtbarkeitslogik im JavaScript, die man an drei Stellen pflegen müsste.
 * ---------------------------------------------------------------------- */

.vaira-player .vp-standbild {
	position: absolute;
	inset: 0;
	display: none;
	background-color: #02001d;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.vaira-player[data-phase="vorlauf"] .vp-standbild,
.vaira-player[data-phase="countdown"] .vp-standbild,
.vaira-player[data-phase="warteraum"] .vp-standbild { display: block; }

/* ---------------------------------------------------------------------------
 * Die Aufzeichnung vor dem ersten Klick (0.22.0)
 *
 * Kein Deckel, kein Text — Standbild und ein runder Play-Knopf, so wie man es
 * von jedem Video kennt. Der Klick dahinter ist derselbe wie live; nur sieht
 * er nicht mehr nach einer Tuer aus, hinter der noch etwas kommt.
 * ------------------------------------------------------------------------ */
.vaira-player.vp-vod-bereit .vp-standbild { display: block; }

.vaira-player .vp-decke.vp-decke-klar {
	/* Ein Hauch dunkler, damit der Knopf auch auf hellem Standbild steht. */
	background: rgba(2, 0, 29, .28);
	padding: 0;
	gap: 0;
	cursor: pointer;
}

.vaira-player .vp-abspielen {
	appearance: none;
	border: 0;
	padding: 0;
	width: clamp(64px, 13%, 104px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	/*
	 * ⚠️ Der helle Ring ist nicht Zierrat. Ohne ihn steht ein dunkler Kreis auf
	 *    einem schwarzen Bild -- im ersten Bau von 0.22.0 war vom Knopf nur das
	 *    Dreieck zu sehen. Ein Standbild gibt es nicht immer; schwarz schon.
	 */
	background: rgba(2, 0, 29, .55);
	box-shadow: 0 6px 26px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .88);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .14s ease, transform .14s ease;
}
.vaira-player .vp-abspielen svg { width: 46%; height: 46%; display: block; }
/*
 * Auch hier alle Zustaende ausdruecklich — aus demselben Grund wie beim
 * `.vp-knopf` weiter oben: Was das Plugin nicht selbst setzt, setzt das Theme.
 */
.vaira-player .vp-abspielen:hover,
.vaira-player .vp-abspielen:focus,
.vaira-player .vp-abspielen:focus-visible,
.vaira-player .vp-abspielen:active {
	background: var(--vp-orange);
	color: #fff;
	border: 0;
	border-radius: 50%;
	transform: scale(1.06);
	box-shadow: 0 6px 26px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .95);
}
.vaira-player .vp-abspielen:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.vaira-player .vp-abspielen { transition: none; }
	.vaira-player .vp-abspielen:hover { transform: none; }
}

/*
 * Mit Bild darf der Deckel nicht mehr fast undurchsichtig sein, sonst sieht
 * man das Bild nicht. Ohne Bild bleibt alles wie bisher — deshalb hängt die
 * Abschwächung an der Klasse und nicht an der Phase.
 */
.vaira-player.vp-mit-standbild .vp-decke {
	background: linear-gradient(rgba(2, 0, 29, 0.45), rgba(2, 0, 29, 0.78));
}

/* -------------------------------------------------------------------------
 * Hinweis im Testmodus (0.16.0)
 *
 * Kein Player, kein hls.js, kein JavaScript — nur ein Kasten. Die Seite
 * behält ihre Adresse, damit Links aus Einladungen, die schon draußen sind,
 * weiter funktionieren.
 * ---------------------------------------------------------------------- */

.vaira-player-testmodus {
	max-width: 640px;
	margin: 0 auto;
	padding: 34px 26px;
	border-radius: 14px;
	background: #02001d;
	color: #d7d7e0;
	text-align: center;
	font-size: 16px;
	line-height: 1.55;
}
.vaira-player-testmodus p { margin: 0 0 10px; }
.vaira-player-testmodus p:last-child { margin-bottom: 0; }
.vaira-player-testmodus strong { color: #fff; font-size: 19px; }

/* -------------------------------------------------------------------------
 * Zwei Knöpfe auf dem Abschlussbildschirm (0.17.0)
 *
 * Eine Rangfolge, keine zweite Frage: Der erste trägt die Vaira-Farbe, der
 * zweite ist nur eine Umrandung. Auf schmalen Schirmen stehen sie
 * untereinander — nebeneinander wären sie dort zwei halbe Knöpfe.
 * ---------------------------------------------------------------------- */

.vaira-player .vp-endeknoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
}
.vaira-player .vp-knopf-leise {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
	font-weight: 600;
}
@media (max-width: 520px) {
	.vaira-player .vp-endeknoepfe { flex-direction: column; width: 100%; }
	.vaira-player .vp-endeknoepfe .vp-knopf { width: 100%; text-align: center; }
}

/* -------------------------------------------------------------------------
 * Frisch freigeschalteter Seitenabschnitt (0.17.0)
 *
 * Der Prototyp vom 30.07. setzt an jeden neuen Abschnitt eine „Neu"-Marke.
 * Sie hängt hier an einer Klasse, die der Player eine Weile trägt und dann
 * wieder abnimmt — eine Marke, die den ganzen Abend „Neu" sagt, sagt nichts.
 *
 * ⚠️ Gescrollt wird nicht (Entscheidung 30). Wer gerade zusieht, soll nicht
 *    weggerissen werden; wer schaut, findet den Abschnitt beim nächsten Blick
 *    nach unten. Die Marke ist der Ersatz für den Sprung.
 * ---------------------------------------------------------------------- */

.vp-reveal[data-vp-kapitel] { position: relative; }
.vp-reveal .vp-neu {
	display: none;
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	transform: translateY(-50%);
	background: var(--vp-orange, #ff7e05);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	pointer-events: none;
}
.vp-reveal.vp-frisch .vp-neu { display: inline-block; }


/* -------------------------------------------------------------------------
 * Kopfzeile eines Abschnitts am Kapitel (0.27.0)
 *
 * Der Player schreibt diese Zeile selbst -- im Markup steht nichts davon.
 * Deshalb steht hier nur ein schlichter Grundstand: Die Seite darf ihn
 * ueberschreiben, indem sie ein eigenes Element mit `vp-kapitelzeile` an die
 * gewuenschte Stelle legt und selbst gestaltet.
 * ---------------------------------------------------------------------- */
.vp-kapitelzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.4;
	color: #6b6b78;
}
.vp-kapitelzeile-name { font-weight: 600; letter-spacing: .02em; }
.vp-kapitelzeile-sprung {
	color: inherit;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	border-bottom: 2px solid rgba(2, 0, 29, .16);
	transition: color 140ms linear, border-color 140ms linear;
}
.vp-kapitelzeile-sprung:hover,
.vp-kapitelzeile-sprung:focus-visible {
	color: var(--vp-orange, #ff7e05);
	border-bottom-color: var(--vp-orange, #ff7e05);
}


/* -------------------------------------------------------------------------
 * Seitenabschnitte unter dem Player (0.17.0)
 *
 * Das Aussehen gehoert ins Plugin und nicht in den HTML-Block auf der Seite.
 * Zwei Gruende, beide beim Bauen aufgefallen:
 *
 *   1. WordPress raeumt <style> aus Beitragsinhalten weg, sobald der
 *      Bearbeiter kein unfiltered_html hat -- und laesst den CSS-TEXT stehen.
 *      Auf der Seite steht dann die halbe Formatvorlage als Fliesstext. Genau
 *      das ist beim ersten Blick auf die Testseite passiert.
 *   2. Es gibt die Seite zweimal, deutsch und englisch. Zwei Kopien einer
 *      Formatvorlage laufen auseinander; die zweite merkt niemand.
 *
 * Der HTML-Block auf der Seite traegt deshalb nur noch Klassen und Text.
 * ---------------------------------------------------------------------- */
/* Alles unter .vp-sek eingesperrt, damit nichts ins Theme ausbricht. */
.vp-sek {
	--vp-o: #ff7e05;
	--vp-d: #02001d;
	max-width: 880px;
	margin: 0 auto 28px;
	padding: 26px 28px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(2, 0, 29, .08), 0 8px 28px rgba(2, 0, 29, .06);
	font-size: 16px;
	line-height: 1.6;
	color: #2c2c35;
}
.vp-sek h2 {
	margin: 0 0 6px;
	font-size: clamp(20px, 2.4vw, 27px);
	line-height: 1.25;
	color: var(--vp-d);
}
.vp-sek .vp-sek-claim {
	margin: 0 0 14px;
	font-weight: 600;
	color: var(--vp-o);
}
.vp-sek p { margin: 0 0 14px; }
.vp-sek ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
@media (min-width: 700px) {
	.vp-sek ul.vp-sek-drei { grid-template-columns: repeat(3, 1fr); }
	.vp-sek ul.vp-sek-zwei { grid-template-columns: repeat(2, 1fr); }
}
.vp-sek li {
	padding: 14px 16px;
	border-radius: 10px;
	background: #f6f6f8;
}
.vp-sek li strong { display: block; margin-bottom: 4px; color: var(--vp-d); }
.vp-sek li span { font-size: 15px; color: #55555f; }
.vp-sek .vp-sek-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.vp-sek .vp-sek-links a {
	display: inline-block;
	padding: 11px 18px;
	border-radius: 8px;
	background: var(--vp-d);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
}
.vp-sek .vp-sek-links a.vp-sek-leise {
	background: transparent;
	color: var(--vp-d);
	box-shadow: inset 0 0 0 1.5px rgba(2, 0, 29, .25);
}

/* CC-Auswahl: Redaktionshinweis (0.29.0) */
.vaira-player .vp-st-menue {
	scrollbar-width: thin;
	scrollbar-color: #ff7e05 rgba(255, 255, 255, .08);
}
.vaira-player .vp-st-menue::-webkit-scrollbar { width: 8px; }
.vaira-player .vp-st-menue::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); border-radius: 8px; }
.vaira-player .vp-st-menue::-webkit-scrollbar-thumb { background: #ff7e05; border-radius: 8px; }
.vaira-player .vp-st-menue-zeile.vp-mit-hinweis {
	display: flex;
	align-items: center;
}
.vaira-player .vp-st-menue-zeile.vp-mit-hinweis.vp-an::before { white-space: pre; }
.vaira-player .vp-st-redaktion {
	display: inline-block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-inline-start: 8px;
	border-radius: 50%;
	color: rgba(255, 255, 255, .8);
	line-height: 0;
	cursor: help;
}
.vaira-player .vp-st-redaktion svg { display: block; width: 16px; height: 16px; }
.vaira-player .vp-st-redaktion:hover,
.vaira-player .vp-st-redaktion:focus,
.vaira-player .vp-st-redaktion.vp-fest {
	color: var(--vp-orange);
	outline: 0;
}
.vaira-player .vp-st-redaktion-text {
	position: absolute;
	box-sizing: border-box;
	overflow: hidden;
	pointer-events: none;
	z-index: 30;
	width: max-content;
	max-width: 320px;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(2, 0, 29, .97);
	border: 1px solid rgba(255, 126, 5, .6);
	color: #fff;
	font-size: 12.5px;
	line-height: 1.45;
	white-space: normal;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.vaira-player .vp-st-redaktion-text[hidden] { display: none; }

/* Tooltips an den Reaktionen */
.vaira-player .vp-reaktion-tipp {
	position: absolute;
	z-index: 31;
	padding: 5px 9px;
	border-radius: 6px;
	background: rgba(2, 0, 29, .92);
	color: #fff;
	font-size: 12.5px;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	animation: vp-tipp-ein .12s ease-out;
}
.vaira-player .vp-reaktion-tipp[hidden] { display: none; }
@keyframes vp-tipp-ein { from { opacity: 0; } to { opacity: 1; } }

/* Auf- und Abblenden zwischen Clips (0.36.0) */
.vaira-player .vp-blende {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
}