.widget-logo-slider {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--wl-section-spacing, 3rem) 0;
}

.logo-slider__eyebrow {
    display: block;
    text-align: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    opacity: 0.45;
    margin: 0 1.5rem 1.5rem;
}

.logo-slider {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-slider--up,
.logo-slider--down {
    height: 260px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}

.logo-slider__track {
    display: flex;
    align-items: center;
    width: max-content;
    /* Dauer kommt inline von render.php (Prozent-Regler 0-100, siehe dort) --
       30s hier nur als Ausweichwert, falls der Inline-Style aus irgendeinem
       Grund fehlt. animation-duration wird per Inline-style ueberschrieben. */
    animation: logo-slider-left 30s linear infinite;
}

.logo-slider--up .logo-slider__track,
.logo-slider--down .logo-slider__track {
    flex-direction: column;
    width: auto;
    height: max-content;
}

.logo-slider:hover .logo-slider__track {
    animation-play-state: paused;
}

.logo-slider--left .logo-slider__track { animation-name: logo-slider-left; }
.logo-slider--right .logo-slider__track { animation-name: logo-slider-right; }
.logo-slider--up .logo-slider__track { animation-name: logo-slider-up; }
.logo-slider--down .logo-slider__track { animation-name: logo-slider-down; }

/* --logo-slider-shift kommt inline von render.php: -100%/Kopienzahl (z.B.
   -33.3333% bei 3 Kopien) statt fest -50% -- siehe dortiger Kommentar zur
   Kopienzahl je nach Logo-Anzahl. Fallback -50% nur fuer den (in der Praxis
   nie vorkommenden) Fall ohne Inline-Style. */
@keyframes logo-slider-left {
    from { transform: translateX(0); }
    to { transform: translateX(var(--logo-slider-shift, -50%)); }
}

@keyframes logo-slider-right {
    from { transform: translateX(var(--logo-slider-shift, -50%)); }
    to { transform: translateX(0); }
}

@keyframes logo-slider-up {
    from { transform: translateY(0); }
    to { transform: translateY(var(--logo-slider-shift, -50%)); }
}

@keyframes logo-slider-down {
    from { transform: translateY(var(--logo-slider-shift, -50%)); }
    to { transform: translateY(0); }
}

.logo-slider__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.5rem;
    height: 4rem;
}

.logo-slider--up .logo-slider__logo,
.logo-slider--down .logo-slider__logo {
    padding: 1.5rem 0;
}

.logo-slider__logo img {
    max-height: 100%;
    max-width: 140px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

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

@media (prefers-reduced-motion: reduce) {
    .logo-slider__track { animation: none; }
}