.logo-marquee {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

.logo-track {
    display: flex;
    gap: 4rem; /* fehlte hier — sorgt für Abstand zwischen den beiden Sets */
    width: max-content;
    max-width: none; /* index.css's global `* { max-width: 100% }` would otherwise clamp this to the viewport width, causing the two sets to overlap */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.logo-set {
    display: flex;
    gap: 4rem;
    flex-shrink: 0;
    max-width: none; /* same override as .logo-track — must be allowed to exceed the viewport width */
}

.logo-track img {
    height: 40px;
    width: auto;
    filter: grayscale(100%) opacity(0.6);
    transition: filter 0.3s ease;
}

.logo-track img:hover {
    filter: grayscale(0%) opacity(1);
}

@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--marquee-distance))); }
}

.logo-marquee:hover .logo-track {
    animation-play-state: paused !important;
}