diff --git a/assets/css/compcard.css b/assets/css/compcard.css index 78973d4..e36f87d 100644 --- a/assets/css/compcard.css +++ b/assets/css/compcard.css @@ -335,31 +335,62 @@ } .wishlist-card.product-card { + display: flex; flex-direction: row; - min-height: auto; - height: 120px; + width: 100%; + max-width: 100%; + + /* Höhe wieder flacher machen */ + height: 110px; + min-height: 110px; + + /* Zieht die Elemente im Inneren auf die exakt selbe Höhe! */ + align-items: stretch; + + /* Verhindert, dass Ecken überstehen */ + overflow: hidden; } .wishlist-card.product-card img { - width: 150px; + width: 160px; + flex: 0 0 160px; + + /* Das Bild-Abteil nimmt immer 100% der Karten-Höhe ein */ height: 100%; - flex: 0 0 150px; + max-height: 100%; + + /* 'contain' sorgt dafür, dass das Apple-Produkt komplett sichtbar bleibt */ + object-fit: contain; + + /* Das ganze linke Abteil wird einheitlich weiß ausgefüllt */ + background-color: #ffffff; + + /* Innenabstand, damit das Bild nicht am Rand klebt */ + padding: 1rem; + border-bottom: none; border-right: 1px solid var(--border-subtle); border-radius: var(--radius-lg) 0 0 var(--radius-lg); + + /* Nimmt die eigene Hintergrundfarbe für den Hover-Effekt aus dem Weg */ + transition: transform var(--transition-smooth); } .wishlist-card.product-card .product-card__content { - justify-content: center; - padding: 1rem 1.5rem; + display: flex; + flex-direction: column; + justify-content: center; /* Zentriert den Text perfekt in der Mitte */ + padding: 0.5rem 1.5rem; + flex: 1; } .wishlist-card.product-card:hover { transform: translateX(6px) scale(1.01); } +/* Bild-Zoom beim Hovern */ .wishlist-card.product-card:hover img { - transform: scale(1.05); + transform: scale(1.08); } /* Stagger animation for wishlist items */