/* Video im Seitenraster, 16:9, dunkle Fläche hinter dem Player, damit Letterbox nicht weiß aufreißt. */
.sz-video { padding-block: var(--sz-raum-8); }
.sz-video__figur { margin: var(--sz-raum-6) 0 0; }
.sz-video__buehne { position: relative; }
/* Abspielknopf: orangener Kreis mit Dreieck, Beschriftung darunter; verschwindet, sobald das Video laeuft. */
.sz-video__abspielen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sz-raum-3); inline-size: 100%; background: linear-gradient(180deg, rgb(0 36 58 / .08), rgb(0 36 58 / .32)); border: 0; border-radius: var(--sz-rund-s); color: var(--sz-invers); font: 600 var(--sz-text-m) var(--sz-schrift); cursor: pointer; }
.sz-video__abspielen-kreis { display: grid; place-items: center; inline-size: 8.8rem; block-size: 8.8rem; border-radius: 50%; background: var(--sz-orange); box-shadow: 0 8px 24px rgb(0 36 58 / .35); transition: transform .2s ease; }
.sz-video__abspielen-kreis::before { content: ""; inline-size: 0; block-size: 0; margin-inline-start: .6rem; border-block: 1.8rem solid transparent; border-inline-start: 3rem solid var(--sz-blau); }
.sz-video__abspielen-text { padding: .4rem 1.2rem; border-radius: 999px; background: rgb(0 36 58 / .7); font-size: var(--sz-text-s); }
.sz-video__abspielen:hover .sz-video__abspielen-kreis, .sz-video__abspielen:focus-visible .sz-video__abspielen-kreis { transform: scale(1.08); }
.sz-video__abspielen:focus-visible { outline: 3px solid var(--sz-orange); outline-offset: 2px; }
.sz-video__buehne.is-gestartet .sz-video__abspielen { display: none; }
.sz-video__player { display: block; inline-size: 100%; aspect-ratio: 16 / 9; background: var(--sz-blau); border-radius: var(--sz-rund-s); }
.sz-video__beschriftung { margin-block-start: var(--sz-raum-3); font-size: var(--sz-text-s); color: var(--sz-tinte-leise); }
/* YouTube erst auf Klick: Vorschaubild und spaeter das iframe im selben 16:9-Rahmen. */
.sz-video__buehne--youtube img.sz-video__player, .sz-video__buehne--youtube span.sz-video__player { object-fit: cover; }
.sz-video__buehne--youtube iframe.sz-video__player { border: 0; }
.sz-video__hinweis { margin-block-start: var(--sz-raum-3); font-size: var(--sz-text-xs); color: var(--sz-tinte-leise); }
.sz-video__hinweis a { color: inherit; }
/* Seitenspalte (Ben 07.10.2026, KRA): Video links groß, rechts Text und Bildvorschau. Mobil in Quellreihenfolge. */
.sz-video__raster { display: grid; gap: var(--sz-raum-6); margin-block-start: var(--sz-raum-6); align-items: start; }
.sz-video[data-layout="seite"] .sz-video__figur { margin: 0; }
.sz-video__seite { display: grid; gap: var(--sz-raum-5); }
@media (min-width: 62rem) { .sz-video__raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sz-raum-7); } }
.sz-video__vorschau { margin: 0; }
.sz-video__vorschau-knopf { display: grid; justify-items: center; gap: var(--sz-raum-3); inline-size: 100%; padding: var(--sz-raum-4); background: var(--sz-hell); border: 1px solid var(--sz-linie); border-radius: var(--sz-rund-s); cursor: zoom-in; color: var(--sz-blau); font: 600 var(--sz-text-s) var(--sz-schrift); }
.sz-video__vorschau-bild { display: block; max-block-size: 32rem; inline-size: auto; max-inline-size: 100%; block-size: auto; object-fit: contain; }
.sz-video__vorschau-knopf:hover, .sz-video__vorschau-knopf:focus-visible { border-color: var(--sz-orange); }
.sz-video__vorschau-knopf:focus-visible { outline: 3px solid var(--sz-orange); outline-offset: 2px; }
.sz-video__vorschau-text { text-decoration: underline; text-underline-offset: 3px; }
.sz-video__vorschau figcaption { margin-block-start: var(--sz-raum-3); font-size: var(--sz-text-s); color: var(--sz-tinte-leise); }
.sz-lightbox { max-inline-size: min(96vw, 120rem); max-block-size: 96dvh; padding: var(--sz-raum-5); border: 0; border-radius: var(--sz-rund-s); background: #fff; overflow: auto; }
.sz-lightbox::backdrop { background: rgb(0 35 58 / .78); }
.sz-lightbox__zu { display: block; margin: 0 0 var(--sz-raum-4) auto; padding: .8rem 1.6rem; border: 1px solid var(--sz-blau); border-radius: var(--sz-rund-s); background: #fff; color: var(--sz-blau); font: 600 var(--sz-text-s) var(--sz-schrift); cursor: pointer; }
.sz-lightbox__zu:focus-visible { outline: 3px solid var(--sz-orange); outline-offset: 2px; }
.sz-lightbox__bild { display: block; max-inline-size: 100%; max-block-size: calc(96dvh - 10rem); inline-size: auto; block-size: auto; margin-inline: auto; }