/**
 * Poster mit eigenem Play-Button für Videos aus dem Inhalts-Editor
 * Pfad: /assets/css/video-poster.css
 * Eingebunden von: /pages/ad-hoc-laden/ad-hoc-laden.php, /pages/blog-post/sections/styles.php
 * Gehört zu: /assets/js/video-poster.js (.ls-video*)
 */

.ls-video {
    position: relative;
    margin: 1.5rem 0;
}

.ls-video > video {
    margin: 0 !important;
}

.ls-video:not(.is-started) > video {
    cursor: pointer;
}

.ls-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(46, 184, 115, 0.92);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.ls-video-play:hover,
.ls-video-play:focus-visible {
    background: #26a064;
    transform: translate(-50%, -50%) scale(1.08);
}

.ls-video-play:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.ls-video-play svg {
    width: 34px;
    height: 34px;
    margin-left: 4px;
    fill: currentColor;
}

@media (max-width: 640px) {
    .ls-video-play {
        width: 60px;
        height: 60px;
    }

    .ls-video-play svg {
        width: 28px;
        height: 28px;
    }
}