/* ==========================================================================
   THERAPY GALLERY SLIDER (33% WIDTH, PAUSE-&-GO, INFINITE LOOP)
   ========================================================================== */

#therapy-gallery {
    padding: 4rem 0;
    background-color: var(--light-background-color);
    overflow: hidden; /* Wichtig: Versteckt die Bilder außerhalb des Bildschirms */
}

#therapy-gallery h2 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 3rem;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

/* Der sichtbare Bereich */
.gallery-viewport {
    width: 100%;
    position: relative;
    cursor: grab;
}

/* Die lange Schiene, die sich bewegt */
.gallery-track {
    display: flex; /* Bilder nebeneinander */
    
    /* BERECHNUNG FÜR UNENDLICHEN LOOP MIT 5 BILDERN (3 SICHTBAR):
       Wir haben 5 echte Bilder + 3 geklonte = 8 Bilder gesamt.
       Jedes Bild ist 33.333% des Viewports breit.
       Die Schiene ist also 8 * 33.333% = 266.666% breit. */
    width: 266.666%; 
    
    /* ANIMATION STARTEN:
       Name: slideAndPause
       Dauer: 25 Sekunden (5 Bilder * 5 Sek. pro Zyklus)
       Timing: Linear für gleichmäßige Gleitphasen
       Wiederholung: Infinite für den Kreis */
    animation: slideAndPause 25s linear infinite;
}

/* Animation pausieren, wenn die Maus darüber schwebt */
.gallery-viewport:hover .gallery-track {
    animation-play-state: paused;
}

/* Das einzelne Bild-Container */
.gallery-item {
    /* Jedes Bild ist 1/3 des Viewports breit */
    /* Da es in der Schiene (266.666% breit) liegt, ist es 1/8 der Schiene. */
    width: calc(100% / 8); 
    padding: 0 10px; /* Kleiner Spalt zwischen den Bildern */
    box-sizing: border-box;
}

.gallery-item img {
    width: 100%;
    height: 25rem; /* Feste Höhe für Einheitlichkeit */
    object-fit: cover; /* Bild füllt den Bereich, ohne zu verzerren */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* ==========================================================================
   KEYFRAMES FÜR DIE GLEITEN-&-STOPPEN ANIMATION
   ==========================================================================
   Ein Zyklus dauert 5 Sekunden (100% / 5 Stopps = 20% pro Bild-Zyklus).
   Wir wollen z.B. 1 Sek. gleiten und 4 Sek. stoppen.
   1 Sek ist 4% von 25 Sek (Animation-Duration).
   Die Bewegungseinheit ist 1 Bildbreite (1/8 der Schiene = 12.5%).
========================================================================== */

@keyframes slideAndPause {
    /* START: Zeige Bilder 1, 2, 3 */
    0%, 16% { transform: translateX(0); } /* Stopp auf Bild 1 */

    /* GLEITEN von Bild 1 zu Bild 2 */
    20% { transform: translateX(-12.5%); } /* Ankunft auf Bild 2 */
    
    /* STOPP auf Bild 2 (Bilder 2, 3, 4 sichtbar) */
    20%, 36% { transform: translateX(-12.5%); }

    /* GLEITEN von Bild 2 zu Bild 3 */
    40% { transform: translateX(-25%); } /* Ankunft auf Bild 3 */
    
    /* STOPP auf Bild 3 (Bilder 3, 4, 5 sichtbar) */
    40%, 56% { transform: translateX(-25%); }

    /* GLEITEN von Bild 3 zu Bild 4 */
    60% { transform: translateX(-37.5%); } /* Ankunft auf Bild 4 */
    
    /* STOPP auf Bild 4 (Bilder 4, 5, 1' sichtbar) */
    60%, 76% { transform: translateX(-37.5%); }

    /* GLEITEN von Bild 4 zu Bild 5 */
    80% { transform: translateX(-50%); } /* Ankunft auf Bild 5 */
    
    /* STOPP auf Bild 5 (Bilder 5, 1', 2' sichtbar) */
    80%, 96% { transform: translateX(-50%); }

    /* GLEITEN von Bild 5 zu Bild 1' (Klone) - Nahtloser Übergang */
    100% { transform: translateX(-62.5%); } 
    /* Am Ende angekommen, springt die Animation unsichtbar zurück auf 0%. */
}


/* ==========================================================================
   MOBILE ANPASSUNG (Exakt 1 Bild sichtbar)
   ========================================================================== */
@media (max-width: 768px) {
    .gallery-track {
        /* Wir haben 8 Bilder im HTML (5 + 3 Klone). 
           Damit 1 Bild genau 100% des Bildschirms füllt, 
           muss die Schiene 8 * 100% = 800% breit sein. */
        width: 800%; 
        animation: slideAndPauseMobile 25s linear infinite;
    }
    
    .gallery-item {
        /* Jedes Bild ist jetzt genau 1/8 der Schiene breit (12.5%) */
        width: calc(100% / 8); 
    }

    .gallery-item img {
        height: 300px; /* Etwas höher für bessere Sichtbarkeit am Handy */
    }
}

/* Korrigierte Keyframes für 8 Bilder (12.5% Schritte) */
@keyframes slideAndPauseMobile {
    0%, 16% { transform: translateX(0); }             /* Stopp Bild 1 */
    20%, 36% { transform: translateX(-12.5%); }      /* Stopp Bild 2 */
    40%, 56% { transform: translateX(-25%); }        /* Stopp Bild 3 */
    60%, 76% { transform: translateX(-37.5%); }      /* Stopp Bild 4 */
    80%, 96% { transform: translateX(-50%); }        /* Stopp Bild 5 */
    100% { transform: translateX(-62.5%); }          /* Gleiten zum Klon (Bild 1') & Sprung zurück */
}