refactor product card layout and enhance accessibility

assets/css/compcard.css

@@ -24,6 +24,14 @@
     transition:
             transform 0.25s ease,
             box-shadow 0.25s ease;
+
+    /* Einheitliche Card-Größe */
+    display: flex;
+    flex-direction: column;
+    height: 250px;
+
+    text-decoration: none;
+    color: inherit;
 }
 
 /* Hover – Apple-like Lift */
@@ -33,17 +41,31 @@
             0 20px 50px rgba(0, 0, 0, 0.12);
 }
 
+.product-card:focus-visible {
+    outline: 2px solid #0071e3;
+    outline-offset: 3px;
+}
+
 /* Bild */
 .product-card img {
     width: 100%;
-    height: 180px;
+    height: 160px;
-    object-fit: cover;
+    object-fit: contain;
+    object-position: center;
     display: block;
+    flex: 0 0 auto;
+    background-color: #ffffff;
 }
 
 /* Content */
 .product-card__content {
-    padding: 1.25rem 1.5rem;
+    padding: 1rem 1.25rem;
+
+    /* sorgt dafür, dass der Content-Bereich den Rest der Card füllt */
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
 }
 
 /* Titel */
@@ -52,13 +74,25 @@
     font-weight: 600;
     margin-bottom: 0.4rem;
     color: #ffffff; /* Apple Schwarz */
+
+    /* verhindert, dass lange Titel die Card-Höhe sprengen */
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
 }
 
 /* Beschreibung */
 .product-card__content p {
     font-size: 0.85rem;
     color: #ffffff;
-    margin-bottom: 0.75rem;
+    margin-bottom: 0;
+
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
 }
 
 /* Preis */
@@ -68,9 +102,6 @@
     color: #0071e3; /* Apple Blau */
 }
 
-
-
-
 /* =============================== */
 /* PRODUCT SECTIONS (Vertical)     */
 /* =============================== */
@@ -107,7 +138,12 @@
     scrollbar-width: none;
 }
 
+/* fixe Breite pro Card im horizontalen Scroll */
+.product-scroll .product-card {
+    flex: 0 0 260px;
+    scroll-snap-align: start;
+}
+
 .product-scroll::-webkit-scrollbar {
     display: none;
 }
-

compcards.php

@@ -62,7 +62,8 @@ $categories = [
 
                 <div class="product-scroll">
                     <?php while ($product = $result->fetch_assoc()): ?>
-                        <div class="product-card">
+                        <?php $productId = (int)$product['productID']; ?>
+                        <a class="product-card" href="productpage.php?id=<?= $productId ?>">
                             <img
                                     src="<?= isset($product['imagePath']) ? $product['imagePath'] : 'assets/images/placeholder.png' ?>"
                                     alt="<?= htmlspecialchars($product['model']) ?>">
@@ -71,7 +72,7 @@ $categories = [
                                 <h3><?= htmlspecialchars($product['model']) ?></h3>
                                 <p><?= htmlspecialchars($product['description']) ?></p>
                             </div>
-                        </div>
+                        </a>
                     <?php endwhile; ?>
                 </div>
             </section>