/* ================================================================
   THEMENWELTEN 0.2.31 – SCHAUFENSTER-LICHTBAND / MOBILE GROESSE
   Die Produktbilder sind nur Beispiele. Der gemeinsame helle
   Schaufenster-Untergrund neutralisiert typische weisse Produktfotos.
   Keine Produktkarte, kein Preis, kein Warenkorb, kein Slider-JS.
   ================================================================ */

/* Desktop: vier Bilder teilen sich die jeweilige Schaufensterhaelfte.
   Die Breite wird vom verfuegbaren Raum bestimmt, nicht vom Quellbild. */
.bd-twm-v028 .bd-twm__showcase-products .bd-twm__teasers {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.bd-twm-v028 .bd-twm__showcase-products .bd-twm__teaser {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Rein technischer Bildslot. Weiss ist hier absichtlich keine sichtbare
   Karte: die ganze Auslage darunter liegt auf nahezu demselben Weiss. */
.bd-twm-v028 .bd-twm__showcase-products .bd-twm__teaser-frame {
    display: grid !important;
    place-items: center;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    overflow: hidden !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform .15s ease;
    contain: layout paint;
}

.bd-twm-v028 .bd-twm__showcase-products .bd-twm__teaser:hover .bd-twm__teaser-frame,
.bd-twm-v028 .bd-twm__showcase-products .bd-twm__teaser:focus-visible .bd-twm__teaser-frame {
    transform: translateY(-2px);
}

.bd-twm-v028 .bd-twm__showcase-products .bd-twm__teaser img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
}

@media (min-width: 640px) and (max-width: 991.98px) {
    .bd-twm-v028 .bd-twm__showcase-products .bd-twm__teasers {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        overflow: hidden !important;
    }
}

@media (max-width: 639.98px) {
    /* Mobil bleiben die Beispiele gut erkennbar, dürfen aber nicht zum
       dominanten Inhalt werden. Die zentral begrenzte Breite verhindert
       insbesondere direkt unter 640px die bisher riesigen Bildquadrate.
       Auf schmaleren Geräten schrumpfen die Slots fließend; bei Bedarf
       bleibt der native horizontale Swipe erhalten. */
    .bd-twm-v028 .bd-twm__showcase-products .bd-twm__teasers {
        display: grid !important;
        grid-template-columns: none !important;
        grid-auto-flow: column !important;
        grid-auto-columns: var(--bd-twm-mobile-teaser-width, 132px) !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .bd-twm-v028 .bd-twm__showcase-products .bd-twm__teasers::-webkit-scrollbar { display: none; }
    .bd-twm-v028 .bd-twm__showcase-products .bd-twm__teaser { scroll-snap-align: start; }
}