/* ==========================================
   HERO CONTAINER
========================================== */

#header {
    display: none;
}


.kenburns {

    position: relative;

    overflow: hidden;

}



/* ==========================================
   CONTAINER
========================================== */

.kenburns .ept-container {

    position: relative;

}



/* ==========================================
   NUR DAS HINTERGRUNDBILD ANIMIEREN
   Logo/Text bleibt stehen
========================================== */

.kenburns .ept-container > a:first-child img {

    width: 100%;

    height: 100vh;

    display: block;

    object-fit: cover;


    transform-origin: 50% 35%;


    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;


    transform: translateZ(0);


    will-change: transform;


    animation: droneFlight 18s linear infinite;

}



/* ==========================================
   KEN BURNS / DROHNENFLUG
   Zoom kürzer, Pause länger
========================================== */

@keyframes droneFlight {


    /* START */
    0% {

        transform: scale(1) translate(-3%,3%);

    }


    /* ZOOM ENDE ca. nach 5 Sekunden */
    28% {

        transform: scale(1.75) translate(0,0);

    }


    /* LÄNGERE HALTEPHASE */
    72% {

        transform: scale(1.75) translate(0,0);

    }


    /* ZURÜCK */
    100% {

        transform: scale(1) translate(-3%,3%);

    }

}



/* ==========================================
   ABDUNKELUNG
========================================== */

.kenburns::before {

    content: "";

    position: absolute;

    inset: 0;


    background: rgba(0,0,0,.45);


    opacity: 0;


    z-index: 20;


    pointer-events: none;


    transition: opacity 1.5s ease;

}



.kenburns.dark::before {

    opacity: 1;

}



/* ==========================================
   GANZE FLÄCHE KLICKBAR
========================================== */

.kenburns-click-layer {

    position: absolute;

    inset: 0;


    z-index: 50;


    display: block;

}



/* ==========================================
   LOGO / TEXT EBENE
   bleibt fix stehen
========================================== */

.kenburns .field--name-field-ept-text {

    position: absolute;

    inset: 0;


    z-index: 100;


    display: flex;

    justify-content: center;

    align-items: center;


    opacity: 0;


    transition: opacity 1.5s ease;


    pointer-events: none;

}

.kenburns .field--name-field-ept-text a {
    color: #fff;
    border: 1px solid;
    padding: 9px 30px;
    display: block;
    text-align: center;
}

.kenburns.show-logo .field--name-field-ept-text {

    opacity: 1;

}



/* Logo Größe */

.kenburns .field--name-field-ept-text img {

    max-width: 640px !important;
    width: 100%;
    height: auto;

}