.frame-type-mask-logoslider {
    max-width: 1440px;
    background-color: #e8e5df;
    margin: 4.5rem auto;
    border-radius: 20px;
}

/* Container, der alles beschneidet */
.logo-slider-container {
    width: 100%;
    overflow: hidden;
    padding: 50px 0;
    position: relative;
}

.logo-slider-header h1, .logo-slider-header h2, .logo-slider-header h3 {
    background: linear-gradient(0deg, #ffffff 45%, rgba(217, 217, 217, 0) 45%);
}

.logo-slider-header {
    padding: 60px;
}

/* Die Schiene, die sich bewegt */
.logo-track {
    display: flex;
    width: max-content; /* Wichtig: Die Schiene orientiert sich am Inhalt */
    animation: marquee var(--speed) linear infinite;
}

/* Die UL-Listen nebeneinander */
.logo-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Einzelnes Logo-Item */
.logo-item {
    flex: 0 0 auto;
    padding: 0 40px; /* Abstand zwischen den Logos */
    display: flex;
    align-items: center;
}

.logo-item img {
    max-height: 80px; /* Sorgt für eine ruhige Optik */
    width: auto;
    filter: grayscale(1);
    opacity: 0.6;
    transition: 0.3s ease-in-out;
}

.logo-item img:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

/* Die Animation */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Schiebt genau eine volle Listenlänge nach links */
}

@media (max-width: 991px) {
    .logo-slider-header {
        padding: 40px;
    }
}