.stellplatz-hero-video-section {
    --stellplatz-hero-desktop-ratio-width: 16;
    --stellplatz-hero-desktop-ratio-height: 9;
    --stellplatz-hero-desktop-ratio-min-height: 56.25vw;
    --stellplatz-hero-desktop-position-x: 50%;
    --stellplatz-hero-desktop-position-y: 50%;
    --stellplatz-hero-mobile-ratio-width: 16;
    --stellplatz-hero-mobile-ratio-height: 9;
    --stellplatz-hero-mobile-ratio-min-height: 56.25vw;
    --stellplatz-hero-mobile-position-x: 50%;
    --stellplatz-hero-mobile-position-y: 50%;
    --stellplatz-hero-overlay-color: #000000;
    --stellplatz-hero-overlay-opacity: 0.46;
    --stellplatz-hero-active-ratio-width: var(--stellplatz-hero-desktop-ratio-width);
    --stellplatz-hero-active-ratio-height: var(--stellplatz-hero-desktop-ratio-height);
    --stellplatz-hero-active-ratio-min-height: var(--stellplatz-hero-desktop-ratio-min-height);
    --stellplatz-hero-active-position-x: var(--stellplatz-hero-desktop-position-x);
    --stellplatz-hero-active-position-y: var(--stellplatz-hero-desktop-position-y);

    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: clamp(
        560px,
        var(--stellplatz-hero-active-ratio-min-height),
        620px
    );
}

.stellplatz-hero-video-section.is-mobile {
    --stellplatz-hero-active-ratio-width: var(--stellplatz-hero-mobile-ratio-width);
    --stellplatz-hero-active-ratio-height: var(--stellplatz-hero-mobile-ratio-height);
    --stellplatz-hero-active-ratio-min-height: var(--stellplatz-hero-mobile-ratio-min-height);
    --stellplatz-hero-active-position-x: var(--stellplatz-hero-mobile-position-x);
    --stellplatz-hero-active-position-y: var(--stellplatz-hero-mobile-position-y);
}

@media (min-width: 768px) {
    .stellplatz-hero-video-section {
        padding-top: clamp(90px, 6vw, 110px) !important;
        padding-bottom: clamp(90px, 6vw, 110px) !important;
    }
}

.stellplatz-hero-video-section .stellplatz-hero-video-bg,
.stellplatz-hero-video-section .stellplatz-hero-video-bg video,
.stellplatz-hero-video-section .stellplatz-hero-video-bg::after {
    position: absolute;
    inset: 0;
}

.stellplatz-hero-video-section .stellplatz-hero-video-bg {
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.stellplatz-hero-video-section > :not(.stellplatz-hero-video-bg) {
    position: relative;
    z-index: 2;
}

.stellplatz-hero-video-section .stellplatz-hero-video-bg video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--stellplatz-hero-active-position-x) var(--stellplatz-hero-active-position-y);
}

.stellplatz-hero-video-section .stellplatz-hero-video-bg::after {
    content: "";
    background-color: var(--stellplatz-hero-overlay-color);
    opacity: var(--stellplatz-hero-overlay-opacity);
}