.slide-out-img {
    max-width: 100%;
    height: auto;
    display: block;
    
    /* Wir starten standardmäßig mit 'steps(1)' -> das schaltet ohne Übergang sofort um */
    animation: zackigesFlippenUndSlide 3s steps(1) forwards;
}

@keyframes zackigesFlippenUndSlide {
    /* --- Phase 1: Absolut harte, zackige Flips (0% bis 40%) --- */
    0%   { transform: scaleX(1); opacity: 1; }
    10%  { transform: scaleX(-1); } 
    13%  { transform: scaleX(1); }
    25%  { transform: scaleX(-1); }
    27%  { transform: scaleX(1); }
    35%  { transform: scaleX(-1); }
    40%  { transform: scaleX(1); } 

    /* --- Phase 2: Stillstand (40% bis 83%) --- */
    /* Ab hier schalten wir die Timing-Function für den Rest auf 'ease-in-out' um! */
    83%  { 
        transform: scaleX(1) translateX(0); 
        opacity: 1; 
        animation-timing-function: ease-in-out; /* Überschreibt 'steps(1)' für das Finale */
    } 

    /* --- Phase 3: Flüssiges Wegrutschen nach rechts (83% bis 100%) --- */
    100% { 
        transform: scaleX(1) translateX(250%); 
        opacity: 0; 
    }
}