/* =============================================================================
   KE Video Player (ke-video-player) — v0.26.15
   Wrapper, Aspect-Ratio, Facade, Iframe, Sticky, Lightbox, Skip-Button
   v0.26.16: Fundamentale Wrapper/Aspect/Facade-Styles ergänzt — fehlten bisher
   komplett, weshalb das Poster auf natürlicher Bildgröße erschien und der
   Play-Button als kleine Box unter dem Bild stand.
   ============================================================================= */

/* Outer-Container (v0.26.15-Refactor) */
.ke-video-player {
    position: relative;
    width: 100%;
}

/* Inner-Wrapper mit Aspect-Ratio */
.ke-video-player__wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}

/* Aspect-Ratio-Klassen */
.ke-vp-aspect-16-9  { aspect-ratio: 16 / 9; }
.ke-vp-aspect-4-3   { aspect-ratio: 4 / 3; }
.ke-vp-aspect-21-9  { aspect-ratio: 21 / 9; }
.ke-vp-aspect-1-1   { aspect-ratio: 1 / 1; }
.ke-vp-aspect-9-16  { aspect-ratio: 9 / 16; }
/* aspect-custom wird über das `height`-Control gesteuert (siehe Selectors-CSS) */

/* Iframe + Native-Video füllen den Wrapper */
.ke-video-player__iframe,
.ke-video-player__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* v0.26.20: Native-Video + Poster-Bild über die ganze Wrapper-Fläche fitten.
   Vorher zeigten Self-Hosted-Videos das Poster (oder den Placeholder-SVG) als
   kleines Bild links oben, weil der Browser-Default für `<video poster=""...>`
   das Poster nicht streckt. */
.ke-video-player__video {
    object-fit: cover;
}

/* v0.26.19: Plyr-Container ebenfalls ausfüllen. Plyr 3.7.x nutzt intern
   `padding-bottom: 56.25%` am `.plyr__video-wrapper` für die Aspect-Ratio.
   Innerhalb unseres bereits aspect-ratio-fixierten Wrappers blieb die
   `__video-wrapper`-Höhe auf 0 (padding-bottom-Regel wirkte mit unserem
   bereits gefixten Container nicht). Resultat: schwarzer Block ohne
   sichtbares Video. Fix: Plyr-Wrapper-Höhe explizit auf 100% setzen. */
.ke-video-player__wrapper > .plyr,
.ke-video-player__wrapper > .plyr > .plyr__video-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* v0.26.33: Play-Button Stil-Varianten + Pulse + Hover-Effekte
   ───────────────────────────────────────────────────────────────── */

/* v0.26.41: Stil „Kreis" — outline-only. Dünner Ring außen rum (Farbe folgt
   Icon-Farbe via Selector im Control), Hintergrund transparent. SVG-Größe
   wird vom „Größe"-Slider gesteuert; Padding skaliert mit `em`, sodass das
   Icon proportional im Ring sitzt. Border-Dicke per eigenem Slider. */
.ke-vp-play-style--circle .ke-video-player__play-btn {
    background: transparent;
    border-radius: 50%;
    border: 2px solid #ffffff;
    padding: 0.2em;
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ke-vp-play-style--circle .ke-video-player__play-btn svg path:nth-of-type(1) {
    display: none;
}

/* Stil: Abgerundetes Rechteck */
.ke-vp-play-style--rounded .ke-video-player__play-btn {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ke-vp-play-style--rounded .ke-video-player__play-btn svg path:nth-of-type(1) {
    display: none;
}

/* Stil: Minimal (nur Dreieck-Icon, kein BG)
   v0.26.43: SVG-viewBox ist auf die YouTube-Pille (68×48) bemessen — das
   Dreieck darin nutzt nur ~26% Breite × 42% Höhe. Bei sichtbarer Pille
   stimmen die Proportionen, bei „Minimal" (Pille versteckt) sah das Dreieck
   absurd klein aus, weil 74% der Slider-Größe auf leeren Whitespace
   gingen. Path-Skalierung um die viewBox-Mitte vergrößert das Dreieck
   auf ~84% Breite × 84% Höhe — Slider-Größe wirkt jetzt wie erwartet. */
.ke-vp-play-style--minimal .ke-video-player__play-btn {
    background: transparent;
    padding: 0;
}
.ke-vp-play-style--minimal .ke-video-player__play-btn svg path:nth-of-type(1) {
    display: none;
}
.ke-vp-play-style--minimal .ke-video-player__play-btn svg {
    overflow: visible;
}
.ke-vp-play-style--minimal .ke-video-player__play-btn svg path:nth-of-type(2) {
    transform: scale(2.4);
    transform-box: view-box;
    transform-origin: center;
}

/* Pulse-Animation (kontinuierlich) */
.ke-vp-play-pulse-yes .ke-video-player__play-btn {
    animation: ke-vp-pulse 2s infinite;
}
@keyframes ke-vp-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
    70%  { box-shadow: 0 0 0 30px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Hover-Effekte — überschreiben den Default-Scale aus dem Basis-CSS */
.ke-vp-play-hover--scale .ke-video-player__facade:hover .ke-video-player__play-btn {
    transform: translate(-50%, -50%) scale(1.15);
}
.ke-vp-play-hover--bounce .ke-video-player__facade:hover .ke-video-player__play-btn {
    animation: ke-vp-play-bounce 0.5s ease;
}
@keyframes ke-vp-play-bounce {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, calc(-50% - 14px)); }
}
.ke-vp-play-hover--glow .ke-video-player__facade:hover .ke-video-player__play-btn {
    filter: drop-shadow(0 0 16px rgba(99, 102, 241, 0.9));
}
.ke-vp-play-hover--none .ke-video-player__facade:hover .ke-video-player__play-btn {
    transform: translate(-50%, -50%);
}

/* v0.26.44: YouTube-Abonnieren-Leiste — sitzt unter dem Video-Wrapper.
   `.ke-video-player` hat absolute children (Sticky-Close, Skip), aber selbst
   keine fixed Höhe → die Subscribe-Bar fließt darunter im normalen Layout. */
.ke-vp-subscribe-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: #1b1b1b;
    color: #fff;
}
.ke-vp-subscribe-bar__label {
    line-height: 1.3;
}
.ke-vp-subscribe-bar .g-ytsubscribe {
    display: inline-block;
}
.ke-vp-subscribe-bar--empty {
    background: rgba(244, 67, 54, 0.1);
    color: #c62828;
    border: 1px dashed #c62828;
}

/* v0.26.31: Plyr's großer zentraler Play-Button (play-large) verstecken.
   Auch wenn die JS-Controls-Liste den `play-large` weglässt, kann Plyr
   ihn als Default rendern. Wir starten nach dem Facade-Klick sofort
   `player.play()` — der zentrale Button würde sonst kurz blau aufblitzen
   und wie ein zweiter Play-Button hinter dem Facade-Play wirken. Der
   kleine Play-Button in der Steuerleiste unten bleibt sichtbar. */
.ke-video-player__wrapper .plyr__control--overlaid {
    display: none !important;
}

/* Facade-Container */
.ke-video-player__facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: block;
    background: #000;
}
.ke-video-player__facade:focus-visible {
    outline: 3px solid #6366f1;
    outline-offset: 2px;
}
.ke-video-player__facade-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ke-video-player__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.ke-video-player__facade:hover .ke-video-player__play-btn {
    transform: translate(-50%, -50%) scale(1.08);
}
.ke-video-player__facade-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3;
}
.ke-video-player__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ke-vp-spin 0.8s linear infinite;
}
@keyframes ke-vp-spin {
    to { transform: rotate(360deg); }
}

/* Placeholder im Editor bei fehlender Quelle */
.ke-video-player__placeholder {
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
}
.ke-video-player__placeholder .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
}

/* Lightbox-Trigger (Lightbox-Lademodus): vollflächiger Button im Aspect-Wrapper */
.ke-video-player__lightbox-trigger {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    display: block;
}
.ke-video-player__lightbox-trigger > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ke-video-player__lightbox-trigger > .ke-video-player__play-btn {
    pointer-events: none;
}

/* Lightbox-Modal */
.ke-vp-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ke-vp-lightbox-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}
.ke-vp-lightbox-modal__content {
    position: relative;
    width: min(90vw, 1280px);
    max-height: 90vh;
    aspect-ratio: 16 / 9;
    background: #000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    overflow: hidden;
}
.ke-vp-lightbox-modal__body {
    width: 100%;
    height: 100%;
}
.ke-vp-lightbox-modal__body iframe,
.ke-vp-lightbox-modal__body video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.ke-vp-lightbox-modal__close {
    position: absolute;
    top: -36px;
    right: 0;
    width: 32px;
    height: 32px;
    background: transparent;
    color: #fff;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.ke-vp-lightbox-modal__close:hover {
    color: #ddd;
}

/* Sticky-Mini-Player */
.ke-vp-sticky-host {
    position: relative;
    transition: all 0.3s ease;
}
.ke-vp-sticky-host.ke-vp-sticky-active {
    position: fixed !important;
    width: 320px !important;
    max-width: 40vw !important;
    z-index: 99998 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.ke-vp-sticky-host.ke-vp-sticky--bottom-right.ke-vp-sticky-active {
    bottom: 20px;
    right: 20px;
    top: auto;
    left: auto;
}
.ke-vp-sticky-host.ke-vp-sticky--bottom-left.ke-vp-sticky-active {
    bottom: 20px;
    left: 20px;
    top: auto;
    right: auto;
}
.ke-vp-sticky-host.ke-vp-sticky--top-right.ke-vp-sticky-active {
    top: 20px;
    right: 20px;
    bottom: auto;
    left: auto;
}
.ke-vp-sticky-host.ke-vp-sticky--top-left.ke-vp-sticky-active {
    top: 20px;
    left: 20px;
    bottom: auto;
    right: auto;
}
.ke-vp-sticky-close {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 18px;
    line-height: 1;
}
.ke-vp-sticky-host.ke-vp-sticky-active .ke-vp-sticky-close {
    display: block;
}
.ke-vp-sticky-spacer {
    width: 100%;
}
@media (max-width: 600px) {
    .ke-vp-sticky-host.ke-vp-sticky-active {
        width: 240px;
        max-width: 60vw;
    }
}

/* Sales-Letter-Skip-Button */
.ke-vp-skip {
    margin-top: 16px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.ke-vp-skip.ke-vp-skip--visible {
    opacity: 1;
}
.ke-vp-skip__btn {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ke-vp-skip__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
    color: #fff;
}