.beon-video-player {
    position: relative;
    display: inline-block;
    width: 100%;
}

.beon-video-player .beon-video {
    display: block;
    width: 100%;
    height: 100svh;
    object-fit: cover;
}

.beon-video-player .beon-play-button {
    position: absolute;
    bottom: max(10px, 0.65rem);
    left: max(10px, 0.65rem);
    transform: none;
    background: transparent;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    /* Touch-/Klickfläche; Ecke statt Bildmitte */
    padding: max(8px, 0.5rem);
    margin: 0;
    cursor: pointer;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}

/*
 * Galerie-Themes nutzen oft breite img-Selektoren (#unit-gallery-grid … img).
 * Diese Regel hat höhere Spezifität, damit das Steuer-Icon nicht gestreckt wird.
 */
#unit-gallery-grid.grid-layout .beon-video-player .beon-play-button img,
#unit-mobile-gallery-slider .beon-video-player .beon-play-button img,
.gallery-popup-video .beon-video-player .beon-play-button img,
.beon-video-player .beon-play-button img {
    width: clamp(18px, 3vw, 28px);
    height: auto !important;
    max-height: none;
    max-width: 36px;
    object-fit: contain;
    display: block;
    opacity: 0.72;
    transition: opacity 0.18s ease;
}

.beon-video-player .beon-play-button:hover img,
.beon-video-player .beon-play-button:focus-visible img,
#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-mobile-gallery-slider .beon-video-player .beon-play-button:hover img,
#unit-mobile-gallery-slider .beon-video-player .beon-play-button:focus-visible img,
.gallery-popup-video .beon-video-player .beon-play-button:hover img,
.gallery-popup-video .beon-video-player .beon-play-button:focus-visible img {
    opacity: 0.95;
}

.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,
#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-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,
.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 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.beon-video-player .beon-play-button:active {
    transform: scale(0.96);
}

.beon-video-player .beon-play-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),
#unit-gallery-grid.grid-layout .beon-video-player .beon-play-button:focus:not(:focus-visible),
#unit-mobile-gallery-slider .beon-video-player .beon-play-button:focus:not(:focus-visible),
.gallery-popup-video .beon-video-player .beon-play-button:focus:not(:focus-visible) {
    outline: none;
    background: transparent !important;
    background-color: transparent !important;
}

/*
 * Mobil (Portrait-Telefone): oben rechts, etwas größeres Icon — keine Überdeckung der Slider-Punkte.
 */
@media (max-width: 781px) {
    .beon-video-player .beon-play-button {
        left: auto;
        right: max(10px, calc(env(safe-area-inset-right, 0px) + 8px));
        top: max(10px, calc(env(safe-area-inset-top, 0px) + 8px));
        bottom: auto;
        transform: none;
    }

    .beon-video-player .beon-play-button:active {
        transform: scale(0.96);
    }

    #unit-gallery-grid.grid-layout .beon-video-player .beon-play-button img,
    #unit-mobile-gallery-slider .beon-video-player .beon-play-button img,
    .gallery-popup-video .beon-video-player .beon-play-button img,
    .beon-video-player .beon-play-button img {
        width: clamp(24px, 5.5vw, 36px);
        max-width: 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 {
        left: auto;
        right: max(12px, calc(env(safe-area-inset-right, 0px) + 10px));
        top: max(12px, calc(env(safe-area-inset-top, 0px) + 10px));
        bottom: auto;
        transform: none;
    }

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

    #unit-mobile-gallery-slider .beon-video-player .beon-play-button img {
        width: clamp(24px, 5.5vw, 36px);
        max-width: 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-play-button {
    z-index: 2;
}

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

/*
 * 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: hidden;
        z-index: -1;
    }

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