/* === Global === */
body {
    margin: 0;
    font-family: sans-serif;
}

.no-partners {
    text-align: center;
    padding: 4rem 1rem;
    color: #555;
    font-size: 1.25rem;
}

/* === Karussell zentrieren === */
/* 1. Main als Flex-Container – zentriert direkten Inhalt horizontal */
main {
    display: flex;
    justify-content: center;
}

/* 2. Carousel-Wrapper bekommt eine feste Breite (2×translateZ) und Margin-Auto */
.carousel-wrapper {
    perspective: 1200px;
    width: 800px;
    /* 2 × 400px aus translateZ(400px) */
    max-width: 90%;
    /* auf kleinen Bildschirmen etwas Luft lassen */
    margin: 2rem auto;
    /* oben 2rem, seitlich auto = horizontale Zentrierung */
    height: 300px;
    overflow: hidden;
    position: relative;
}

#partnerCarousel {
    width: 800px;
    /* Breite des 3D-Kreises (2 × translateZ) */
    max-width: 90%;
    /* Responsives Limit */
    margin: 0 auto;
    /* Auto-Margen zentrieren horizontal */
    transform-style: preserve-3d;
}

.carousel {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;

    /* Karussell-Rotation */
    animation: rotateCarousel 20s linear infinite;
    animation-play-state: running;
}

.carousel-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;

    /* Position in der Kreisbahn */
    transform:
        rotateY(calc(360deg / var(--n) * var(--i))) translateZ(400px) translateX(-50%) translateY(-50%);
    transition: transform 0.5s;
}

.carousel-item img {
    display: block;
    max-height: 100px;
    max-width: 150px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
}

/* Dauerschleife */
@keyframes rotateCarousel {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(-360deg);
    }
}

/* Responsive-Fallback: horizontales Scrollen */
@media (max-width: 600px) {
    .carousel-wrapper {
        perspective: none;
        height: auto;
        width: 100%;
        /* wieder auf volle Breite */
        margin: 2rem 0;
        /* evtl. nur vertikaler Abstand */
    }

    .carousel {
        display: flex;
        animation: none;
        transform: none;
        overflow-x: auto;
        padding: 1rem 0;
    }

    .carousel-item {
        position: static;
        transform: none !important;
        margin: 0 0.5rem;
    }
}