/**
 * Video CSS - Video mit Zustimmungs-Hinweis
 *
 * Vorbild: Startseite, Block „Sommerfrische im Schwarzatal" (px @1200):
 *   Fläche 907×476 in der Textspalte, dunkles Vorschaubild
 *   Hinweis Open Sans Semibold 24, weiß, zentriert
 *   Buttons 175×39, Pille, Bebas Neue 30 / Tracking 50, Abstand 37
 *     „Zustimmen" weiß gefüllt, Schrift Petrol · „Ablehnen" weiße Kontur
 *
 * Bildformat über aspect-ratio. Der Hinweis liegt im Fluss (Grid-Zelle
 * über dem Bild): Ist er auf schmalen Bildschirmen höher als das Format,
 * wächst die Fläche mit, statt Text abzuschneiden.
 *
 * Konsumiert Theme-Tokens (--aktd-*) mit Fallbacks.
 */

.akt-video {
    width: 100%;
    margin: 0;
}

.akt-video__stage {
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* KEIN overflow: hidden — sonst entfällt die automatische Mindesthöhe
       von aspect-ratio und ein hoher Hinweis würde abgeschnitten. */
    background: var(--aktd-color-petrol-dark, #00745f);
    color: var(--aktd-color-white, #ffffff);
}

/* Bildformate */
.akt-video--ratio-21-9 .akt-video__stage {
    aspect-ratio: 21 / 9;
}

.akt-video--ratio-4-3 .akt-video__stage {
    aspect-ratio: 4 / 3;
}

.akt-video--ratio-1-1 .akt-video__stage {
    aspect-ratio: 1 / 1;
}

/* Ohne Vorschaubild: dunkle Fläche statt leerem Petrol */
.akt-video--no-poster .akt-video__stage {
    background: linear-gradient(135deg, #1f2a27 0%, #0f1513 100%);
}

/* Vorschaubild + Abdunklung für lesbaren Hinweis */
.akt-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.akt-video__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.akt-video.is-loaded .akt-video__stage::after,
.akt-video--provider-file .akt-video__stage::after {
    content: none;
}

/* Player */
.akt-video__iframe,
.akt-video__file {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

.akt-video__file {
    object-fit: contain;
}

/* Zustimmungs-Hinweis */
.akt-video__consent {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 32px 24px;
    text-align: center;
}

.akt-video__consent[hidden] {
    display: none;
}

.akt-video .akt-video__notice {
    max-width: 640px;
    margin: 0;
    font-family: var(--aktd-font-base, sans-serif);
    font-weight: 600;
    font-size: 24px; /* Design 24px @1200 */
    line-height: 1.2;
    color: var(--aktd-color-white, #ffffff);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.akt-video .akt-video__notice:focus {
    outline: none;
}

.akt-video .akt-video__provider {
    margin: 10px 0 0;
    font-family: var(--aktd-font-base, sans-serif);
    font-size: 14px;
    line-height: 1.3;
    color: var(--aktd-color-white, #ffffff);
}

.akt-video__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 37px; /* Design 37px zwischen den Buttons */
    margin-top: 30px;
}

/* Buttons (Pille) — Astra unterstreicht Content-Links, daher !important */
.akt-video .akt-video__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 175px; /* Design 175px */
    min-height: 44px; /* Touch-Ziel (Design 39px) */
    margin: 0;
    padding: 4px 24px 2px;
    border: 2px solid var(--aktd-color-white, #ffffff);
    border-radius: 999px;
    font-family: var(--aktd-font-accent, sans-serif);
    font-weight: 400;
    font-size: 30px; /* Design 30px @1200 */
    line-height: 1;
    letter-spacing: 0.05em; /* Design-Tracking 50 */
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.akt-video .akt-video__button--accept {
    background: var(--aktd-color-white, #ffffff);
    color: var(--aktd-color-petrol, #008f7d);
}

.akt-video .akt-video__button--decline {
    background: transparent;
    color: var(--aktd-color-white, #ffffff);
}

.akt-video .akt-video__button:hover,
.akt-video .akt-video__button:focus {
    transform: translateY(-2px);
}

.akt-video .akt-video__button--accept:hover,
.akt-video .akt-video__button--accept:focus {
    background: var(--aktd-color-mint, #ddfcf2);
    color: var(--aktd-color-petrol-dark, #00745f);
}

.akt-video .akt-video__button--decline:hover,
.akt-video .akt-video__button--decline:focus {
    background: rgba(255, 255, 255, 0.15);
    color: var(--aktd-color-white, #ffffff);
}

/* Leerzustand (nur für Redakteure sichtbar) */
.akt-video__no-content {
    padding: 16px;
    border: 2px dashed #c3c4c7;
    border-radius: 3px;
    color: #646970;
    font-size: 14px;
    text-align: center;
}

/* Responsive — Breakpoints wie Astra: 1024 / 921 / 544 */
@media (max-width: 1024px) {

    .akt-video .akt-video__notice {
        font-size: 21px;
    }

    .akt-video .akt-video__button {
        font-size: 26px;
    }
}

@media (max-width: 921px) {

    .akt-video .akt-video__notice {
        font-size: 18px;
    }

    .akt-video .akt-video__button {
        min-width: 150px;
        font-size: 24px;
    }

    .akt-video__actions {
        gap: 12px 20px;
        margin-top: 22px;
    }
}

@media (max-width: 544px) {

    .akt-video__consent {
        padding: 24px 16px;
    }

    .akt-video .akt-video__notice {
        font-size: 16px;
        line-height: 1.3;
    }

    .akt-video .akt-video__provider {
        font-size: 13px;
    }

    .akt-video .akt-video__button {
        min-width: 130px;
        padding: 4px 18px 2px;
        font-size: 22px;
    }

    .akt-video__actions {
        margin-top: 18px;
    }
}

/* Barrierefreiheit / Print */
@media (prefers-contrast: high) {

    .akt-video__stage::after {
        background: rgba(0, 0, 0, 0.75);
    }

    .akt-video .akt-video__button--accept {
        color: var(--aktd-color-petrol-dark, #00745f);
    }
}

@media (prefers-reduced-motion: reduce) {

    .akt-video .akt-video__button {
        transition: none;
    }

    .akt-video .akt-video__button:hover,
    .akt-video .akt-video__button:focus {
        transform: none;
    }
}

@media print {

    .akt-video__actions {
        display: none;
    }

    .akt-video__stage {
        border: 1px solid #000;
    }
}