/* Hintergrund-Motive im Hero: diagonaler Wisch beim Einblenden, dazu ein
   langsamer Zoom (Ken Burns). Zeitgesteuert – funktioniert damit auch in
   Safari und Firefox, wo animation-timeline: scroll() noch fehlt. */
@keyframes hero-media-cycle {
    /* Die abgehende Ebene bleibt sichtbar, bis die neue vollständig
       eingewischt ist (42,33 %) – sonst klafft dazwischen ein Loch.
       z-index rotiert in drei Stufen, damit die einwischende Ebene immer
       oben liegt, auch beim Sprung von der letzten zurück zur ersten. */
    0% {
        opacity: 0;
        z-index: 3;
        transform: scale(1.04);
        -webkit-mask-position: 115% 0;
        mask-position: 115% 0;
    }
    9% {
        opacity: 1;
        z-index: 3;
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
    }
    15% {
        z-index: 3;
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
    }
    15.01% {
        z-index: 2;
    }
    43% {
        opacity: 1;
        z-index: 2;
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
    }
    46% {
        opacity: 0;
        z-index: 2;
        transform: scale(1.14);
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
    }
    46.01% {
        z-index: 1;
    }
    100% {
        opacity: 0;
        z-index: 1;
        transform: scale(1.04);
        -webkit-mask-position: 115% 0;
        mask-position: 115% 0;
    }
}

@keyframes dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ken Burns für die Einzelbild-Heros der Unterseiten: langsamer Zoom mit
   leichter Drift. Zeitgesteuert, läuft also auch dort, wo
   animation-timeline: scroll() fehlt (Safari, Firefox). */
@keyframes hero-kenburns {
    0% {
        transform: scale(1.04) translate3d(0, 0, 0);
    }
    50% {
        transform: scale(1.15) translate3d(-1.8%, -1.2%, 0);
    }
    100% {
        transform: scale(1.04) translate3d(0, 0, 0);
    }
}


/* Mobiles Menü: Punkte gleiten gestaffelt von rechts ein */
@keyframes menu-item-in {
    from {
        opacity: 0;
        transform: translateX(34px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}