/* Startseite: Logo-Leiste. Helles Theme zeigt die farbigen Marken, dunkles Theme eine eigene Datei, in der nur die dunkle Schrift weiss ist. */

.client-logos {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    background: var(--color-darker);
}

.client-logos .section-title {
    margin-bottom: 2.4rem;
}

.client-logos__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem 2.25rem;
    max-width: 1080px;
    margin: 0 auto 2.5rem;
    padding: 0;
}

.client-logos__list li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 210px;
    height: 72px;
}

.client-logos img {
    display: block;
    max-width: 210px;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Spezifischer als ".client-logos img", sonst bleibt die dunkle Datei im hellen Theme sichtbar. */
.client-logos img.client-logos__dark {
    display: none;
}

[data-theme="dark"] .client-logos img.client-logos__light {
    display: none;
}

[data-theme="dark"] .client-logos img.client-logos__dark {
    display: block;
}

.client-logos__cta {
    text-align: center;
}

@media (max-width: 640px) {
    .client-logos__list li {
        width: 42%;
        max-width: none;
        height: 64px;
    }

    .client-logos img {
        max-width: 100%;
        max-height: 52px;
    }
}