/* ===========================================
   Logo Slider for Elementor
   Smooth infinite scroll carousel
   =========================================== */

.lse-logo-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* Track: Enthält alle Logos und scrollt endlos */
.lse-logo-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: lse-scroll-left var(--lse-speed, 30s) linear infinite;
}

/* Richtung: rechts */
.lse-logo-slider[data-direction="right"] .lse-logo-track {
    animation-name: lse-scroll-right;
}

/* Einzelnes Logo-Item */
.lse-logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lse-logo-item a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.lse-logo-item img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.lse-logo-item img:hover {
    transform: scale(1.05);
}

/* Pause bei Hover */
.lse-logo-slider[data-pause-hover="true"]:hover .lse-logo-track {
    animation-play-state: paused;
}

/* Graustufen-Filter */
.lse-grayscale .lse-logo-item img {
    filter: grayscale(100%);
}

.lse-grayscale-hover .lse-logo-item img:hover {
    filter: grayscale(0%);
}

/* Fade-Effekt an den Rändern */
.lse-fade-edges::before,
.lse-fade-edges::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.lse-fade-edges::before {
    left: 0;
    background: linear-gradient(to right, var(--lse-bg, #ffffff) 0%, transparent 100%);
}

.lse-fade-edges::after {
    right: 0;
    background: linear-gradient(to left, var(--lse-bg, #ffffff) 0%, transparent 100%);
}

/* Keyframes für endloses Scrollen */
@keyframes lse-scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes lse-scroll-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Reduced Motion: Animation stoppen */
@media (prefers-reduced-motion: reduce) {
    .lse-logo-track {
        animation-play-state: paused;
    }
}

/* Responsive: Kleinere Fade-Edges auf Mobile */
@media (max-width: 767px) {
    .lse-fade-edges::before,
    .lse-fade-edges::after {
        width: 40px;
    }
}