.beon-video-player {
    position: relative;
    display: block;
    width: 100%;
    overflow: visible;
    isolation: isolate;
}

.beon-video-player .beon-video-media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.beon-video-player .beon-video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Mindesthöhe, damit Steuerung bei Hero/Fullscreen am Video verankert ist */
.beon-video-player:not(.hero-video) {
    min-height: 12rem;
}

.beon-video-player.beon-video-player--fullscreen {
    min-height: 100vh;
    height: 100vh;
}

/*
 * Kein Vollflächen-Overlay (inset: 0) – das blockiert Hit-Tests trotz pointer-events auf Buttons.
 * Wrapper nur als Anker, Buttons liegen darüber.
 */
.beon-video-player .beon-video-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: 0;
    overflow: visible;
    z-index: 50;
    box-sizing: border-box;
    pointer-events: none;
}

.beon-video-player .beon-play-button,
.beon-video-player .beon-mute-button {
    position: absolute !important;
    z-index: 51;
    margin: 0;
    transform: none;
    border: none;
    border-radius: 50%;
    padding: max(8px, 0.5rem);
    min-width: 44px;
    min-height: 44px;
    cursor: pointer !important;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
    touch-action: manipulation;
    transition: transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    background-color: transparent;
}

.beon-video-player .beon-play-button {
    left: max(10px, 0.65rem);
    right: auto !important;
    bottom: max(10px, 0.65rem);
    top: auto !important;
}

.beon-video-player .beon-mute-button {
    right: max(10px, 0.65rem);
    left: auto !important;
    bottom: max(10px, 0.65rem);
    top: auto !important;
}

/*
 * Galerie-Themes nutzen oft breite img-Selektoren (#unit-gallery-grid … img).
 * Diese Regel hat höhere Spezifität, damit die Steuer-Icons nicht gestreckt werden.
 */
#unit-gallery-grid.grid-layout .beon-video-player .beon-play-button img,
#unit-gallery-grid.grid-layout .beon-video-player .beon-mute-icon__svg,
#unit-mobile-gallery-slider .beon-video-player .beon-play-button img,
#unit-mobile-gallery-slider .beon-video-player .beon-mute-icon__svg,
.gallery-popup-video .beon-video-player .beon-play-button img,
.gallery-popup-video .beon-video-player .beon-mute-icon__svg,
.beon-video-player .beon-play-button img,
.beon-video-player .beon-mute-icon,
.beon-video-player .beon-mute-icon__svg {
    pointer-events: none;
    cursor: inherit;
}

.beon-video-player .beon-play-button img,
.beon-video-player .beon-mute-icon__svg {
    width: clamp(18px, 3vw, 28px);
    height: auto !important;
    max-height: none;
    max-width: 36px;
    object-fit: contain;
    display: block;
    opacity: 0.85;
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.55));
    transition: opacity 0.18s ease;
}

.beon-video-player .beon-play-button:hover img,
.beon-video-player .beon-play-button:focus-visible img,
.beon-video-player .beon-mute-button:hover .beon-mute-icon__svg,
.beon-video-player .beon-mute-button:focus-visible .beon-mute-icon__svg,
#unit-gallery-grid.grid-layout .beon-video-player .beon-play-button:hover img,
#unit-gallery-grid.grid-layout .beon-video-player .beon-play-button:focus-visible img,
#unit-gallery-grid.grid-layout .beon-video-player .beon-mute-button:hover .beon-mute-icon__svg,
#unit-gallery-grid.grid-layout .beon-video-player .beon-mute-button:focus-visible .beon-mute-icon__svg,
#unit-mobile-gallery-slider .beon-video-player .beon-play-button:hover img,
#unit-mobile-gallery-slider .beon-video-player .beon-play-button:focus-visible img,
#unit-mobile-gallery-slider .beon-video-player .beon-mute-button:hover .beon-mute-icon__svg,
#unit-mobile-gallery-slider .beon-video-player .beon-mute-button:focus-visible .beon-mute-icon__svg,
.gallery-popup-video .beon-video-player .beon-play-button:hover img,
.gallery-popup-video .beon-video-player .beon-play-button:focus-visible img,
.gallery-popup-video .beon-video-player .beon-mute-button:hover .beon-mute-icon__svg,
.gallery-popup-video .beon-video-player .beon-mute-button:focus-visible .beon-mute-icon__svg {
    opacity: 0.95;
}

.beon-video-player .beon-mute-icon {
    display: block;
    width: clamp(18px, 3vw, 28px);
    height: clamp(18px, 3vw, 28px);
    max-width: 36px;
    max-height: 36px;
    line-height: 0;
    flex-shrink: 0;
}

.beon-video-player .beon-mute-icon__svg {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.85;
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.55));
    transition: opacity 0.18s ease;
}

.beon-video-player .beon-mute-icon__layer {
    display: none;
}

.beon-video-player .beon-mute-button.is-muted .beon-mute-icon__layer--off {
    display: block;
}

.beon-video-player .beon-mute-button.is-unmuted .beon-mute-icon__layer--on {
    display: block;
}

.beon-video-player .beon-play-button:hover,
.beon-video-player .beon-play-button:active,
.beon-video-player .beon-play-button:focus,
.beon-video-player .beon-play-button:focus-visible,
.beon-video-player .beon-mute-button:hover,
.beon-video-player .beon-mute-button:active,
.beon-video-player .beon-mute-button:focus,
.beon-video-player .beon-mute-button:focus-visible,
#unit-gallery-grid.grid-layout .beon-video-player .beon-play-button:hover,
#unit-gallery-grid.grid-layout .beon-video-player .beon-play-button:active,
#unit-gallery-grid.grid-layout .beon-video-player .beon-play-button:focus,
#unit-gallery-grid.grid-layout .beon-video-player .beon-play-button:focus-visible,
#unit-gallery-grid.grid-layout .beon-video-player .beon-mute-button:hover,
#unit-gallery-grid.grid-layout .beon-video-player .beon-mute-button:active,
#unit-gallery-grid.grid-layout .beon-video-player .beon-mute-button:focus,
#unit-gallery-grid.grid-layout .beon-video-player .beon-mute-button:focus-visible,
#unit-mobile-gallery-slider .beon-video-player .beon-play-button:hover,
#unit-mobile-gallery-slider .beon-video-player .beon-play-button:active,
#unit-mobile-gallery-slider .beon-video-player .beon-play-button:focus,
#unit-mobile-gallery-slider .beon-video-player .beon-play-button:focus-visible,
#unit-mobile-gallery-slider .beon-video-player .beon-mute-button:hover,
#unit-mobile-gallery-slider .beon-video-player .beon-mute-button:active,
#unit-mobile-gallery-slider .beon-video-player .beon-mute-button:focus,
#unit-mobile-gallery-slider .beon-video-player .beon-mute-button:focus-visible,
.gallery-popup-video .beon-video-player .beon-play-button:hover,
.gallery-popup-video .beon-video-player .beon-play-button:active,
.gallery-popup-video .beon-video-player .beon-play-button:focus,
.gallery-popup-video .beon-video-player .beon-play-button:focus-visible,
.gallery-popup-video .beon-video-player .beon-mute-button:hover,
.gallery-popup-video .beon-video-player .beon-mute-button:active,
.gallery-popup-video .beon-video-player .beon-mute-button:focus,
.gallery-popup-video .beon-video-player .beon-mute-button:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.beon-video-player .beon-play-button:active,
.beon-video-player .beon-mute-button:active,
#unit-gallery-grid.grid-layout .beon-video-player .beon-mute-button:active,
#unit-gallery-grid.grid-layout .beon-video-player .beon-play-button:active,
#unit-mobile-gallery-slider .beon-video-player .beon-mute-button:active,
#unit-mobile-gallery-slider .beon-video-player .beon-play-button:active,
.gallery-popup-video .beon-video-player .beon-mute-button:active,
.gallery-popup-video .beon-video-player .beon-play-button:active {
    transform: scale(0.96);
}

.beon-video-player .beon-play-button:focus-visible,
.beon-video-player .beon-mute-button:focus-visible {
    outline: 2px solid rgb(255 255 255 / 0.95);
    outline-offset: 3px;
}

/* Nach Mausklick: Theme-/UA-Focus ohne sichtbaren Kasten */
.beon-video-player .beon-play-button:focus:not(:focus-visible),
.beon-video-player .beon-mute-button:focus:not(:focus-visible),
#unit-gallery-grid.grid-layout .beon-video-player .beon-play-button:focus:not(:focus-visible),
#unit-gallery-grid.grid-layout .beon-video-player .beon-mute-button:focus:not(:focus-visible),
#unit-mobile-gallery-slider .beon-video-player .beon-play-button:focus:not(:focus-visible),
#unit-mobile-gallery-slider .beon-video-player .beon-mute-button:focus:not(:focus-visible),
.gallery-popup-video .beon-video-player .beon-play-button:focus:not(:focus-visible),
.gallery-popup-video .beon-video-player .beon-mute-button:focus:not(:focus-visible) {
    outline: none;
    background: transparent !important;
    background-color: transparent !important;
}

/*
 * Mobil: Play links unten, Ton rechts unten.
 */
@media (max-width: 781px) {
    .beon-video-player .beon-play-button {
        left: max(10px, calc(env(safe-area-inset-left, 0px) + 8px));
        bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    }

    .beon-video-player .beon-mute-button {
        right: max(10px, calc(env(safe-area-inset-right, 0px) + 8px));
        bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    }

    /* Galerie-Slider: Steuerung oben, damit Slider-Punkte unten frei bleiben */
    #unit-gallery-grid.grid-layout .beon-video-player .beon-play-button,
    #unit-mobile-gallery-slider .beon-video-player .beon-play-button {
        top: max(10px, calc(env(safe-area-inset-top, 0px) + 8px));
        bottom: auto;
    }

    #unit-gallery-grid.grid-layout .beon-video-player .beon-mute-button,
    #unit-mobile-gallery-slider .beon-video-player .beon-mute-button,
    .gallery-popup-video .beon-video-player .beon-mute-button {
        top: max(10px, calc(env(safe-area-inset-top, 0px) + 8px));
        bottom: auto;
        right: max(10px, calc(env(safe-area-inset-right, 0px) + 8px));
    }

    #unit-gallery-grid.grid-layout .beon-video-player .beon-play-button img,
    #unit-gallery-grid.grid-layout .beon-video-player .beon-mute-icon,
    #unit-mobile-gallery-slider .beon-video-player .beon-play-button img,
    #unit-mobile-gallery-slider .beon-video-player .beon-mute-icon,
    .gallery-popup-video .beon-video-player .beon-play-button img,
    .gallery-popup-video .beon-video-player .beon-mute-icon,
    .beon-video-player .beon-play-button img,
    .beon-video-player .beon-mute-icon {
        width: clamp(24px, 5.5vw, 36px);
        max-width: 44px;
    }

    .beon-video-player .beon-mute-icon {
        height: clamp(24px, 5.5vw, 36px);
        max-height: 44px;
    }

}

/*
 * Mobilslider (bis Tablet quer): gleiche Ecke wie Smartphone; Icon für Touch vergrößert.
 */
@media (max-width: 1200px) {
    #unit-mobile-gallery-slider .beon-video-player .beon-play-button {
        top: max(12px, calc(env(safe-area-inset-top, 0px) + 10px));
        bottom: auto;
        left: max(12px, calc(env(safe-area-inset-left, 0px) + 10px));
    }

    #unit-mobile-gallery-slider .beon-video-player .beon-mute-button {
        top: max(12px, calc(env(safe-area-inset-top, 0px) + 10px));
        bottom: auto;
        right: max(12px, calc(env(safe-area-inset-right, 0px) + 10px));
    }

    #unit-mobile-gallery-slider .beon-video-player .beon-play-button img,
    #unit-mobile-gallery-slider .beon-video-player .beon-mute-icon {
        width: clamp(24px, 5.5vw, 36px);
        max-width: 44px;
    }

    #unit-mobile-gallery-slider .beon-video-player .beon-mute-icon {
        height: clamp(24px, 5.5vw, 36px);
        max-height: 44px;
    }
}

/*
 * Hero / Elementor: ein Viewport hoch, Video mit object-fit: cover.
 * Shortcode: [beon_video layout="fullscreen" …]
 * Kanten bis zum Bildschirmrand: extra_class="beon-video-player--fullscreen-edge"
 */
.beon-video-player.beon-video-player--fullscreen {
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
}

.beon-video-player.beon-video-player--fullscreen .beon-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.beon-video-player.beon-video-player--fullscreen .beon-video-media,
.beon-video-player.beon-video-player--fullscreen .beon-video-media .beon-video {
    width: 100%;
    height: 100%;
}

.beon-video-player.beon-video-player--fullscreen .beon-video-controls {
    z-index: 20;
}

.gallery-video-wrapper .beon-video-player,
.gallery-popup-video .beon-video-player {
    min-height: 100%;
    height: 100%;
}

.gallery-video-wrapper .beon-video-player .beon-play-button,
.gallery-video-wrapper .beon-video-player .beon-mute-button,
.gallery-popup-video .beon-video-player .beon-play-button,
.gallery-popup-video .beon-video-player .beon-mute-button,
#unit-mobile-gallery-slider .beon-video-player .beon-play-button,
#unit-mobile-gallery-slider .beon-video-player .beon-mute-button,
#unit-gallery-grid.grid-layout .beon-video-player .beon-play-button,
#unit-gallery-grid.grid-layout .beon-video-player .beon-mute-button {
    z-index: 100 !important;
    pointer-events: auto !important;
}

#unit-mobile-gallery-slider .flex-viewport,
#unit-mobile-gallery-slider .slides > li {
    pointer-events: auto;
}

.gallery-video-wrapper .beon-video-player .beon-video-media,
.gallery-popup-video .beon-video-player .beon-video-media {
    position: absolute;
    inset: 0;
    height: 100%;
}

.beon-video-player.beon-video-player--fullscreen-edge {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}

/*
 * Hero / Frontpage: Video als Hintergrund; Steuerung bleibt am Video (absolute, nicht fixed).
 */
/*
 * Elementor (.hero-video): Container 105vh, Video oft 115 % – Steuerung am Player-Rand ausrichten.
 */
/*
 * Elementor Custom CSS: .hero-video { z-index: -1 } – gesamter Player hinter Hero-Text.
 * Buttons mit position:fixed + hohem z-index, damit Klicks nicht am Suchformular hängen bleiben.
 */
.beon-video-player.hero-video,
.hero-video.beon-video-player {
    overflow: hidden;
    width: 100%;
    height: 105vh;
    min-height: 105vh;
    z-index: 0 !important;
}

.beon-video-player.hero-video .beon-video-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.beon-video-player.hero-video .beon-video-media .beon-video,
.hero-video.beon-video-player video.beon-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none;
    object-fit: cover;
    pointer-events: none;
}

.beon-video-player.hero-video .beon-video-controls {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: 0;
    z-index: 99998;
    pointer-events: none;
}

.beon-video-player.hero-video .beon-play-button,
.beon-video-player.hero-video .beon-mute-button {
    position: fixed !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
}

.beon-video-player.hero-video .beon-play-button {
    left: max(10px, 0.65rem);
    bottom: max(10px, 0.65rem);
    top: auto !important;
    right: auto !important;
}

.beon-video-player.hero-video .beon-mute-button {
    right: max(10px, 0.65rem);
    bottom: max(10px, 0.65rem);
    top: auto !important;
    left: auto !important;
}

/*
 * Frontpage-Video Mobil (.hero-video am Shortcode-Wrapper für type="frontpage")
 */
@media (max-width: 781px) {
    .beon-video-player.hero-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100vh - 200px);
        overflow: visible;
        z-index: 0 !important;
    }

    .beon-video-player.hero-video .beon-video-media {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    .beon-video-player.hero-video .beon-video-media .beon-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .beon-video-player.hero-video {
        height: calc(100vh - 200px);
        min-height: calc(100vh - 200px);
    }

    .beon-video-player.hero-video .beon-play-button {
        left: max(10px, calc(env(safe-area-inset-left, 0px) + 8px));
        bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    }

    .beon-video-player.hero-video .beon-mute-button {
        right: max(10px, calc(env(safe-area-inset-right, 0px) + 8px));
        bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    }
}