From 66868c3c806e8a74d5566c5b35c09172c9e19fcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Fri, 12 Jun 2026 09:01:25 +0200
Subject: [PATCH] Add 600px object group card variant

---
 patterns/object-group-card.html          | 22 +++++++++++++++++++++-
 styles/23-patterns-object-group-card.css |  4 ++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/patterns/object-group-card.html b/patterns/object-group-card.html
index 348be09..6c97c66 100644
--- a/patterns/object-group-card.html
+++ b/patterns/object-group-card.html
@@ -90,7 +90,24 @@
     </div>
   </section>
 
+  <section id="pattern-object-group-card-height-600">
+    <p class="sg-preview-label">Pattern: Object Group Card</p>
+    <p class="sg-body sg-object-group-card__hint">Variante: identisch, nur die Höhe ist 600px.</p>
+    <div class="sg-object-card-grid sg-object-group-card--height-600" aria-label="Objekt Group Card Höhe 600px"></div>
+  </section>
+
   <script>
+    const populateObjectGroupCardVariant = () => {
+      const sourceGrid = document.querySelector('#pattern-object-group-card .sg-object-card-grid');
+      const variantGrid = document.querySelector('#pattern-object-group-card-height-600 .sg-object-card-grid');
+
+      if (!sourceGrid || !variantGrid || variantGrid.children.length > 0) {
+        return;
+      }
+
+      variantGrid.innerHTML = sourceGrid.innerHTML;
+    };
+
     const updateObjectCardGridRowState = () => {
       document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
         const cards = Array.from(grid.querySelectorAll('.sg-object-card'));
@@ -124,7 +141,10 @@
       });
     };
 
-    window.addEventListener('load', updateObjectCardGridRowState);
+    window.addEventListener('load', () => {
+      populateObjectGroupCardVariant();
+      updateObjectCardGridRowState();
+    });
     window.addEventListener('resize', updateObjectCardGridRowState);
   </script>
 
diff --git a/styles/23-patterns-object-group-card.css b/styles/23-patterns-object-group-card.css
index 447c9b0..f62d1c0 100644
--- a/styles/23-patterns-object-group-card.css
+++ b/styles/23-patterns-object-group-card.css
@@ -13,6 +13,10 @@
   height: var(--layout-object-group-card-height);
 }
 
+.sg-object-group-card--height-600 .sg-object-card[data-pattern="object-group-card"] {
+  height: var(--layout-object-card-height);
+}
+
 @media (max-width: 767px) {
   .sg-object-card[data-pattern="object-group-card"] {
     height: auto;