/* YouTube-Videos mit Vorschaubild (docs/videos.py, js/video.js) */
.vc-yt { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0d1a2e; border-radius: 10px; overflow: hidden; }
.vc-video .vc-yt, .vc-video-rahmen .vc-yt, .vc-hero-video .vc-yt { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; }
.vc-yt-start { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
.vc-yt-start img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, filter .3s ease; }
.vc-yt-start:hover img, .vc-yt-start:focus img { transform: scale(1.02); filter: brightness(.92); }
.vc-yt-play {
    position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
    border-radius: 50%; background: rgba(40, 89, 158, .92); box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    transition: transform .2s ease, background .2s ease;
}
.vc-yt-play::after {
    content: ""; position: absolute; left: 31px; top: 23px;
    border-left: 22px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent;
}
.vc-yt-start:hover .vc-yt-play, .vc-yt-start:focus .vc-yt-play { transform: scale(1.08); background: #1d4176; }
.vc-yt-start:focus-visible { outline: 3px solid #28599e; outline-offset: -3px; }
.vc-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.avPlayerBlock .vc-yt { max-width: 100%; }
/* Altes Joomla-Videoplugin (AllVideos) setzt padding-top: 58% auf den Rahmen – bei Vorschaubildern
   entsteht dadurch eine grosse weisse Flaeche unter der Ueberschrift. Abstand aufheben und die Videos
   auf eine mittlere Groesse begrenzen (wie auf /beratung und /methoden). */
div.avPlayerWrapper div.avPlayerContainer div.avPlayerBlock:has(> .vc-yt) { padding: 0 !important; height: auto !important; }
div.avPlayerWrapper { max-width: 720px; margin: 22px 0 26px !important; }
div.avPlayerWrapper .vc-yt { box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }

/* Kleines Video-Fenster ueber der Seite (Referenz-Interviews) */
.vc-yt-overlay {
    position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(13, 26, 46, .55); animation: vc-yt-ein .2s ease;
}
.vc-yt-overlay-box {
    position: relative; width: min(640px, 100%); background: #fff; border-radius: 12px;
    padding: 12px 12px 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.vc-yt-overlay-rahmen { position: relative; aspect-ratio: 16 / 9; background: #0d1a2e; border-radius: 8px; overflow: hidden; }
.vc-yt-overlay-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vc-yt-overlay-titel { margin: 8px 4px 0; font-size: 14px; line-height: 1.4; color: #3a4a5e; }
.vc-yt-overlay-zu {
    position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%;
    border: 0; background: #28599e; color: #fff; font-size: 24px; line-height: 36px; padding: 0;
    cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.vc-yt-overlay-zu:hover, .vc-yt-overlay-zu:focus { background: #1d4176; }
@media (max-width: 600px) { .vc-yt-overlay-zu { top: -10px; right: -6px; } }
@keyframes vc-yt-ein { from { opacity: 0; } to { opacity: 1; } }