/* Energas Videos: Vorschaubild mit Start-Knopf, nach dem Klick der Player.
   Volle Textbreite im Format 16:9 (vorher: volle Breite, aber feste Hoehe 315 bzw. 450 px,
   dadurch schwarze Raender). Knopf wie die uebrigen Knoepfe: beim Zeigen schwarz mit weissem Pfeil, kein Gruen. */
body .energas-video {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

/* Knopf ueber das ganze Bild; Theme-Knopfstil (Rahmen, Abstand, Farben) aufheben */
body .energas-video .energas-video__start,
body .energas-video .energas-video__start:hover,
body .energas-video .energas-video__start:focus,
body .energas-video .energas-video__start:active {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #000;
    color: #000;
    box-shadow: none;
    transform: none;
    transition: none;
    cursor: pointer;
}

body .energas-video .energas-video__start:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
}

/* genauer als die Bildregel der Beitragsvorlage 760 (margin 1.6em 0, height auto) */
body .energas-video .energas-video__start img.energas-video__bild {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
}

/* Start-Knopf: weisser Kreis, schwarzer Pfeil; beim Zeigen und bei Tastaturfokus schwarz mit weissem Pfeil */
body .energas-video .energas-video__knopf {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

body .energas-video .energas-video__knopf::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 28px;
    margin: -14px 0 0 -9px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

body .energas-video .energas-video__start:hover .energas-video__knopf,
body .energas-video .energas-video__start:focus-visible .energas-video__knopf {
    background: #000;
    color: #fff;
}

body .energas-video .energas-video__player {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
}

/* Hinweis unter dem Video */
body .energas-video__hinweis {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 767px) {
    body .energas-video .energas-video__knopf {
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
    }

    body .energas-video .energas-video__knopf::before {
        width: 19px;
        height: 22px;
        margin: -11px 0 0 -7px;
    }
}

/* 1.1.0: Elementor-Video-Baustein (z. B. Servicetechniker): Seitenverhaeltnis aus der Baustein-Einstellung,
   Vorschaubild = Overlay-Bild des Bausteins. In schmalen Spalten (unter 480 px) der kleine Start-Knopf. */
body .energas-video.energas-video--format-219 { aspect-ratio: 21 / 9; }
body .energas-video.energas-video--format-43  { aspect-ratio: 4 / 3; }
body .energas-video.energas-video--format-32  { aspect-ratio: 3 / 2; }
body .energas-video.energas-video--format-11  { aspect-ratio: 1 / 1; }
body .energas-video.energas-video--format-916 { aspect-ratio: 9 / 16; }

body .energas-video.energas-video--elementor {
    container-type: inline-size;
}

/* Hinweis-Link wie im Beitragstext: unterstrichen, beim Zeigen und bei Tastaturfokus 2 px
   (auf Elementor-Seiten fehlt die Unterstreichung sonst) */
body .energas-video--elementor + .energas-video__hinweis a {
    text-decoration-line: underline;
}

body .energas-video--elementor + .energas-video__hinweis a:hover,
body .energas-video--elementor + .energas-video__hinweis a:focus-visible {
    text-decoration-thickness: 2px;
}

@container (max-width: 480px) {
    body .energas-video.energas-video--elementor .energas-video__knopf {
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
    }

    body .energas-video.energas-video--elementor .energas-video__knopf::before {
        width: 19px;
        height: 22px;
        margin: -11px 0 0 -7px;
    }
}