Enhance wishlist card styling for improved layout and hover effects

assets/css/compcard.css

@@ -335,31 +335,62 @@
 }
 
 .wishlist-card.product-card {
+    display: flex;
     flex-direction: row;
-    min-height: auto;
+    width: 100%;
-    height: 120px;
+    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;
+    display: flex;
-    padding: 1rem 1.5rem;
+    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 */