/* Weser Theme – Block: Erklärvideos (Produktlinien-Seiten)
   ==========================================================================
   Gemessen aus `.figma-ref/Sprint 3/Sprint 1 Neue Seiten/Vario Line.png`.

   ⚠️ Zum Umrechnen: Dieser Export ist 1785px breit, der Seiteninhalt beginnt
   aber erst bei x=53 und ist von dort 1728px breit – derselbe Frame wie die
   Startseite, nur mit Rand. Alle Bildkoordinaten also minus 53.

   - Zwei Karten nebeneinander (col-md-6)
   - Vorschaubild 530px breit, in der Spalte zentriert – die Spalte ist mit
     710px deutlich breiter, Titel und Text laufen über die volle Spaltenbreite
   - Play-Fläche mittig, Laufzeit-Badge unten rechts
   - Titel Literata SemiBold #263864, zentriert; Text Poppins 16px, zentriert

   Das Embed lädt erst beim Klick (siehe assets/js/video-cards.js) – deshalb
   ist die Medienfläche ein <button> und kein <iframe>.

   Tablet/Mobil sind ABGELEITET – für Sprint 3 lagen nur Desktop-Screenshots vor.
   ========================================================================== */

.video-cards-headline {
    color: var(--color-dark);
    margin: 0 0 40px;
}

.video-card {
    max-width: 530px;
    margin: 0 auto;
}

/* ---- Medienfläche -------------------------------------------------------- */
.video-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 24px;
}

/* Der Auslöser füllt die Fläche komplett – Poster, Play und Badge liegen darin. */
.video-card-trigger {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.video-card-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    pointer-events: none;
}

.video-card-play svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}

.video-card-duration {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 16px;
    padding: 3px 6px;
    border-radius: 2px;
    pointer-events: none;
}

/* Nach dem Klick sitzt hier der Rahmen des Anbieters. */
.video-card-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---- Text ---------------------------------------------------------------- */
.video-card-body {
    text-align: center;
}

.video-card-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 24px;
    line-height: 32px;
    color: var(--color-dark);
    margin: 0 0 12px;
}

.video-card-text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text);
    margin: 0;
}

/* ---- Tablet (768–1199) – abgeleitet -------------------------------------- */
@media (max-width: 1199.98px) {
    .video-cards-headline {
        margin-bottom: 32px;
    }

    .video-card-title {
        font-size: 22px;
        line-height: 28px;
    }

    .video-card-play {
        width: 52px;
        height: 52px;
    }
}

/* ---- Mobil (<768) – abgeleitet ------------------------------------------- */
@media (max-width: 767.98px) {
    .video-card-media {
        margin-bottom: 16px;
    }

    .video-card-title {
        font-size: 20px;
        line-height: 26px;
    }

    .video-card-play {
        width: 44px;
        height: 44px;
    }
}