/* Logo Slider – Infinite scroll von links nach rechts */

.logoslider {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 1rem 0;
}

.logoslider__track {
    display: flex;
    gap: var(--slider-gap, 60px);
    width: max-content;
    animation: logoslider-scroll var(--slider-speed, 30s) linear infinite;
}

.logoslider__set {
    display: flex;
    gap: var(--slider-gap, 60px);
    flex-shrink: 0;
    align-items: center;
}

.logoslider__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logoslider__item img {
    height: var(--logo-height, 50px);
    width: auto;
    max-width: 200px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.logoslider__item img:hover {
    transform: scale(1.05);
}

/* Pause bei Hover */
.logoslider--pause-on-hover:hover .logoslider__track {
    animation-play-state: paused;
}

/* Fade-Ränder für weichen Übergang */
.logoslider::before,
.logoslider::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.logoslider::before {
    left: 0;
    background: linear-gradient(to right, var(--slider-bg, #ffffff), transparent);
}

.logoslider::after {
    right: 0;
    background: linear-gradient(to left, var(--slider-bg, #ffffff), transparent);
}

/* Animation: scrollt exakt um die Breite eines Logo-Sets */
@keyframes logoslider-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--scroll-distance, -50%));
    }
}