/*
 * Das Einführungsvideo der Plattform (32 s, mit Ton): der Dialog, den der
 * Textlink „In 30 Sekunden erklärt" im Hero der Startseite öffnet. Markup und
 * Skript: templates/landing/_erklaervideo.html.twig. Farben aus den Tokens der
 * Seite (--pine/--gold aus platform-brand.css, der Rest aus dem :root der Seite).
 */
dialog.video-dialog {
    width: min(94vw, 60rem); max-width: none; padding: 0; border: 0; border-radius: 22px;
    overflow: hidden; background: var(--pine); color: var(--paper, var(--surface));
}
dialog.video-dialog::backdrop { background: rgba(20, 51, 44, .72); backdrop-filter: blur(3px); }
.video-dialog video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--pine); }
.video-dialog-foot { display: flex; align-items: center; gap: 1rem 1.2rem; flex-wrap: wrap; padding: 1rem 1.25rem; }
.video-dialog-foot p { flex: 1 1 14rem; margin: 0; font-size: .88rem; line-height: 1.45; opacity: .82; }
.video-dialog-close {
    font: inherit; font-size: .9rem; font-weight: 600; color: inherit; background: none; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 100px; min-height: 44px; padding: 0 1.1rem;
}
.video-dialog-close:hover { border-color: currentColor; }
.video-dialog :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Untertitel: lesbar auf hellen Szenen, ohne den Kasten des Browsers. */
.video-dialog video::cue { font-family: 'DM Sans', system-ui, sans-serif; font-size: .95em; }