/*
 * de-wheel – Struktur-CSS des Endlos-Karten-Sliders (self-hosted, wiederverwendbar).
 *
 * Herkunft: extrahiert aus themes/dieentwicklerei/assets/custom-theme.css, damit die
 * MECHANIK-Struktur unabhängig vom Theme verfügbar ist (ContentBuilder-Themes wie auch
 * der niarxbuilder-Block laden diese Datei). Rein strukturell – Farben/Kartenoptik bleiben
 * Tailwind-Utilities im Markup bzw. Theme-Sache.
 *
 * Sichtbare Slides: mobil 1, ab md 2, ab lg 3. Die JS (public/assets/js/de-wheel.js) liest
 * `gap` aus dem berechneten Stil des __track – Änderungen an `gap` hier wirken automatisch mit.
 */
.de-wheel__viewport {
    width: 100%;
    overflow: hidden;
}

.de-wheel__track {
    display: flex;
    gap: 2rem;
    will-change: transform;
}

.de-wheel__slide {
    flex-shrink: 0;
    width: 100%;
}

/* Default (Markup OHNE data-cols, z. B. bestehende CB-Themes): bis zu 3 sichtbar. */
@media (min-width: 768px) {
    .de-wheel__slide {
        width: calc(50% - 1rem);
    }
}

@media (min-width: 1024px) {
    .de-wheel__slide {
        width: calc((100% - 4rem) / 3);
    }
}

/* Explizite Kartenzahl: der NB-Wheel-Block setzt die Klasse .de-wheel--cols-N und übersteuert die
   Defaults. KLASSE statt data-* (data-Attribute entfernt der HtmlSanitizer, class bleibt). gap ist
   2rem → 2-Spalten zieht je 1rem (halbes gap) ab, 3-Spalten 4rem (zwei gaps). Mobil immer 1. */
.de-wheel--cols-1 .de-wheel__slide {
    width: 100%;
}

.de-wheel--cols-2 .de-wheel__slide {
    width: 100%;
}

@media (min-width: 768px) {
    .de-wheel--cols-2 .de-wheel__slide {
        width: calc(50% - 1rem);
    }
}

.de-wheel--cols-3 .de-wheel__slide {
    width: 100%;
}

@media (min-width: 768px) {
    .de-wheel--cols-3 .de-wheel__slide {
        width: calc(50% - 1rem);
    }
}

@media (min-width: 1024px) {
    .de-wheel--cols-3 .de-wheel__slide {
        width: calc((100% - 4rem) / 3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .de-wheel__track {
        transition: none !important;
    }
}