add vertical list layout for wishlist with responsive design and animations

assets/css/compcard.css

@@ -320,3 +320,109 @@
         display: none;
     }
 }
+
+/* ==========================================================
+   WISHLIST – Vertical List Layout
+   ========================================================== */
+.wishlist-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0.5rem 2rem 2.5rem;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+.wishlist-card.product-card {
+    flex-direction: row;
+    min-height: auto;
+    height: 120px;
+}
+
+.wishlist-card.product-card img {
+    width: 150px;
+    height: 100%;
+    flex: 0 0 150px;
+    border-bottom: none;
+    border-right: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+}
+
+.wishlist-card.product-card .product-card__content {
+    justify-content: center;
+    padding: 1rem 1.5rem;
+}
+
+.wishlist-card.product-card:hover {
+    transform: translateX(6px) scale(1.01);
+}
+
+.wishlist-card.product-card:hover img {
+    transform: scale(1.05);
+}
+
+/* Stagger animation for wishlist items */
+.wishlist-grid .wishlist-card:nth-child(1) { animation-delay: 0.05s; }
+.wishlist-grid .wishlist-card:nth-child(2) { animation-delay: 0.1s; }
+.wishlist-grid .wishlist-card:nth-child(3) { animation-delay: 0.15s; }
+.wishlist-grid .wishlist-card:nth-child(4) { animation-delay: 0.2s; }
+.wishlist-grid .wishlist-card:nth-child(5) { animation-delay: 0.25s; }
+.wishlist-grid .wishlist-card:nth-child(6) { animation-delay: 0.3s; }
+.wishlist-grid .wishlist-card:nth-child(7) { animation-delay: 0.35s; }
+.wishlist-grid .wishlist-card:nth-child(8) { animation-delay: 0.4s; }
+
+@media (max-width: 768px) {
+    .wishlist-grid {
+        padding: 0.5rem 1rem 1.5rem;
+        gap: 0.8rem;
+    }
+
+    .wishlist-card.product-card {
+        height: 100px;
+    }
+
+    .wishlist-card.product-card img {
+        width: 110px;
+        flex: 0 0 110px;
+        padding: 10px;
+    }
+
+    .wishlist-card.product-card .product-card__content {
+        padding: 0.75rem 1rem;
+    }
+
+    .wishlist-card .product-card__content h3 {
+        font-size: 0.85rem;
+    }
+
+    .wishlist-card .product-card__content p {
+        font-size: 0.72rem;
+        -webkit-line-clamp: 2;
+    }
+}
+
+@media (max-width: 480px) {
+    .wishlist-card.product-card {
+        height: 90px;
+    }
+
+    .wishlist-card.product-card img {
+        width: 90px;
+        flex: 0 0 90px;
+        padding: 8px;
+    }
+
+    .wishlist-card.product-card .product-card__content {
+        padding: 0.5rem 0.75rem;
+    }
+
+    .wishlist-card .product-card__content h3 {
+        font-size: 0.78rem;
+        -webkit-line-clamp: 1;
+    }
+
+    .wishlist-card .product-card__content p {
+        display: none;
+    }
+}
+

wunschliste.php

@@ -40,10 +40,10 @@ $result = $stmt->get_result();
     <main>
     <section class="product-section">
         <h2>Deine Wunschliste</h2>
-        <div class="product-scroll">
+        <div class="wishlist-grid">
             <?php while ($product = $result->fetch_assoc()): ?>
                 <?php $productId = (int)$product['productID']; ?>
-                <a class="product-card" href="productpage.php?id=<?= $productId ?>">
+                <a class="product-card wishlist-card" href="productpage.php?id=<?= $productId ?>">
                     <img
                             src="<?= isset($product['imagePath']) ? $product['imagePath'] : 'assets/images/placeholder.png' ?>"
                             alt="<?= htmlspecialchars($product['model']) ?>">