/* Vollbild-Startanimation */
.startup-loader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
    transition: opacity 400ms ease;
}

.startup-loader-inner {
    display: flex;
    gap: 4rem;
    /* vorher 8rem – etwas kompakter */
    font-family: "Inter Tight", sans-serif;
    font-weight: 900;
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    /* kleinere Min/Max-Werte, damit es sicher in den Viewport passt */
    color: #111;
    flex-wrap: wrap;
    /* erlaubt Umbruch, falls nötig */
    justify-content: center;
    text-align: center;
}

/* Grundzustand: außerhalb des Bildschirms links, unsichtbar */
.startup-word {
    transform: translateX(-120%);
    opacity: 0;
    animation: startupFlyInOut 2200ms cubic-bezier(.22, .9, .3, 1) forwards;
    /* 2.2s: Einflug + 1s stehen + Ausflug */
}

/* zeitlich versetzter Start für jedes Wort
   Rechts (Coaching) zuerst raus, dann Leading, dann Performing */
.startup-word--1 {
    /* Performing (links) – letzte, verlässt als letztes den Screen */
    animation-delay: 0.5s;
    /* vorher 0s */
}

.startup-word--2 {
    /* Leading (Mitte) – mittlere Reihenfolge */
    animation-delay: 0.25s;
    /* unverändert oder leicht angepasst */
}

.startup-word--3 {
    /* Coaching (rechts) – soll zuerst rausfliegen -> kleinste Delay */
    animation-delay: 0s;
    /* vorher 0.5s */
}

@keyframes startupFlyInOut {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }

    25% {
        /* fertig eingeflogen */
        transform: translateX(0);
        opacity: 1;
    }

    70% {
        /* ca. 1 Sekunde stehen bleiben (je nach Gesamtdauer) */
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        /* nach rechts aus dem Bild fliegen */
        transform: translateX(120%);
        opacity: 0;
    }
}

/* Klasse zum Ausblenden des Loaders nach der Sequenz */
.startup-loader--hidden {
    opacity: 0;
    pointer-events: none;
}

/* Nach dem Fade-Out kann per JS display:none gesetzt werden;
   optionaler Fallback bei sehr alten Browsern ist nicht nötig. */

@media (prefers-reduced-motion: reduce) {
    .startup-loader {
        display: none;
    }
}

/* Auf sehr kleinen Screens: noch kleiner und enger setzen */
@media (max-width: 600px) {
    .startup-loader-inner {
        gap: 1.5rem;
        font-size: clamp(1.6rem, 8vw, 2.4rem);
    }
}