/* ===========================================
   PRODUKT?BERSICHT: OPTIMIERTE BILDANZEIGE
   =========================================== */

/* Container f?r Produktbilder */
.tpl .categorygallery .card.product-card .card-img-top {
    width: 100%;
    height: 300px; /* feste H?he f?r gleiche Kartenh?he */
    display: center; /* Flexbox f?r perfekte Zentrierung */
    justify-content: center; /* Bild horizontal zentrieren */
    align-items: center; /* Bild vertikal zentrieren */
    background-color: #fff; /* Hintergrundfarbe, wenn Bild kleiner ist */
    overflow: hidden; /* verhindert ?berlauf */
    padding: 0; /* sichergehen, dass kein Padding dazwischen ist */
    box-sizing: border-box;
}

/* Bilder proportional skalieren, ohne Verzerren */
.tpl .categorygallery .card.product-card .card-img-top img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover; /* zeigt IMMER das ganze Bild */
    display: block;
    margin: auto; /* zus?tzliche Sicherheit gegen "linkes Kleben" */
}

/* Einheitliche H?he der Karten */
.tpl .categorygallery .card.product-card {
    display: flex;
    flex-direction: center;
    justify-content: space-between;
    height: 100%;
}

/* Produkttitel angleichen, damit sie alle auf gleicher H?he erscheinen */
.tpl .categorygallery .card.product-card .product-title {
    min-height: 50px; /* gleiche Titelh?he f?r alle */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 10px; /* etwas Abstand nach dem Bild */
}

/* Responsive Anpassung */
@media (max-width: 767px) {
    .tpl .categorygallery .card.product-card .card-img-top {
        height: 180px; /* kleinere Bilderh?he f?r Smartphones */
    }
}