.logo-slider {
    position: relative;
    width: 367px;
    height: 47px;
}

.logo-slider .logo {
    position: absolute;
    top: 0;
    left: 0;

    width: 367px;
    height: 47px;

    object-fit: contain;

    opacity: 0;
}

/* Alle drei Logos laufen synchron */
.logo-1 {
    animation: logo1 15s infinite ease-in-out;
}

.logo-2 {
    animation: logo2 15s infinite ease-in-out;
}

.logo-3 {
    animation: logo3 15s infinite ease-in-out;
}


/* =========================
   LOGO 1
   ========================= */

@keyframes logo1 {

    /* 0–4 s: Logo 1 klar sichtbar */
    0% {
        opacity: 1;
    }

    26.67% {
        opacity: 1;
    }

    /* 4–5 s: Überblendung zu Logo 2 */
    33.33% {
        opacity: 0;
    }

    /* 5–14 s: unsichtbar */
    93.33% {
        opacity: 0;
    }

    /* 14–15 s: Überblendung von Logo 3 zurück zu Logo 1 */
    100% {
        opacity: 1;
    }
}


/* =========================
   LOGO 2
   ========================= */

@keyframes logo2 {

    /* 0–4 s: unsichtbar */
    0% {
        opacity: 0;
    }

    26.67% {
        opacity: 0;
    }

    /* 4–5 s: Logo 2 wird eingeblendet */
    33.33% {
        opacity: 1;
    }

    /* 5–9 s: Logo 2 klar sichtbar */
    60% {
        opacity: 1;
    }

    /* 9–10 s: Überblendung zu Logo 3 */
    66.67% {
        opacity: 0;
    }

    /* 10–15 s: unsichtbar */
    100% {
        opacity: 0;
    }
}


/* =========================
   LOGO 3
   ========================= */

@keyframes logo3 {

    /* 0–9 s: unsichtbar */
    0% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    /* 9–10 s: Logo 3 wird eingeblendet */
    66.67% {
        opacity: 1;
    }

    /* 10–14 s: Logo 3 klar sichtbar */
    93.33% {
        opacity: 1;
    }

    /* 14–15 s: Überblendung zurück zu Logo 1 */
    100% {
        opacity: 0;
    }
}