/* Erklärvideo auf der Startseite: Vorschaubild mit Play-Knopf und Dialog (erklaervideo.php) */

.vs-video { margin: 18px 0 20px; }

/* Kopfleiste wie .feature-grid-header in layout.css */
.vs-video-kopf {
    background-color: #D2A454;
    color: #FFFFFF;
    padding: 10px 15px;
    margin: 0 0 12px;
    font: bold 14px Verdana, Arial, Helvetica, sans-serif;
    border-radius: 4px;
}

.vs-video-teaser {
    position: relative;
    display: block;
    border: 2px solid #D2A454;
    border-radius: 8px;
    overflow: hidden;
    background: #FBF5EA;
    box-shadow: 0 4px 12px rgba(152, 16, 16, 0.12);
    text-decoration: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.vs-video-teaser img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.vs-video-teaser:hover,
.vs-video-teaser:focus-visible {
    border-color: #C40001;
    box-shadow: 0 4px 14px rgba(196, 0, 1, 0.2);
}

.vs-video-teaser:hover img,
.vs-video-teaser:focus-visible img { transform: scale(1.03); }

.vs-video-teaser:focus-visible { outline: 3px solid #C40001; outline-offset: 3px; }

/* Im freien Band zwischen Wortmarke (bis 22 % der Höhe) und den Köpfen der
   Figuren (ab 49 %); die Größe folgt der Breite, damit der Knopf auch auf dem
   Handy in dieses Band passt. */
.vs-video-play {
    position: absolute;
    left: 50%;
    top: 36%;
    width: 12.5%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #C40001;
    border: 4px solid #FFFFFF;
    box-sizing: border-box;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.vs-video-teaser:hover .vs-video-play,
.vs-video-teaser:focus-visible .vs-video-play {
    transform: translate(-50%, -50%) scale(1.1);
    background: #A30001;
}

.vs-video-play svg { width: 42%; height: 42%; margin-left: 8%; fill: #FFFFFF; }

.vs-video-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 14px 9px;
    background: linear-gradient(rgba(43, 36, 32, 0), rgba(43, 36, 32, 0.78));
    color: #FFFFFF;
    font: bold 13px Verdana, Arial, Helvetica, sans-serif;
    text-align: left;
}

.vs-video-text { margin: 8px 0 0; font-size: 12px; color: #333; }

.vs-video-dialog {
    width: min(92vw, 1100px);
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #000;
    overflow: visible;
}

.vs-video-dialog::backdrop { background: rgba(26, 8, 6, 0.86); }

.vs-video-dialog video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.vs-video-schliessen {
    position: absolute;
    top: -48px;
    right: 0;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    color: #C40001;
    font-size: 28px;
    line-height: 40px;
    cursor: pointer;
}

.vs-video-schliessen:hover { background: #FBE4DE; }

.vs-video-schliessen:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

@media only screen and (max-width: 768px) {
    .vs-video { margin: 15px 5px 18px; }
    .vs-video-kopf { padding: 8px 12px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .vs-video-teaser,
    .vs-video-teaser img,
    .vs-video-play { transition: none; }
}