/* Container: Maskiert alles, was außerhalb ist */
    .marquee-container {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        background: #f0f0f0;
        padding: 20px 0;
    }

    /* Der bewegliche Streifen */
    .marquee-track {
        display: inline-block;
        white-space: nowrap;
        /* Animation: Name, Dauer, Timing, Unendlich wiederholen */
        animation: scroll 60s linear infinite;
    }

    /* Die Bilder im Streifen */
    .marquee-track img {
        height: 100px; /* Feste Höhe für Einheitlichkeit */
        width: auto;
        margin: 0 15px; /* Abstand zwischen den Bildern */
        vertical-align: middle;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }

    /* Anklickbarkeit & Hover-Effekt */
    .marquee-track a:hover img {
        transform: scale(1.1); /* Bild vergrößern beim Hover */
        filter: brightness(1.1);
    }

    /* WICHTIG: Animation anhalten beim Hover, damit man klicken kann */
    .marquee-container:hover .marquee-track {
        animation-play-state: paused;
    }

    /* Die eigentliche Bewegung */
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            /* Wir bewegen uns um -50%, da das Bildset dupliziert ist */
            transform: translateX(-50%);
        }
    }
    
    /* Optional: Für mobile Touch-Geräte */
    @media (hover: none) {
        .marquee-track {
            /* Auf Touch-Geräten läuft es oft weiter, oder man nutzt :active */
        }
        .marquee-container:active .marquee-track {
            animation-play-state: paused;
        }
    }