Sync styleguide 2026.05.18.1

docs/styleguide/foundations.html

@@ -155,8 +155,9 @@
         <tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
         <tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
         <tr><td>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr>
-        <tr><td>object-group-card-min-width</td><td>550px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
+        <tr><td>object-group-card-min-width</td><td>450px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
-        <tr><td>object-group-card-max-width</td><td>800px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
+        <tr><td>object-group-card-max-width</td><td>650px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
+        <tr><td>object-group-card-height</td><td>700px</td><td>Fixe Desktop-Höhe der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>notifications-card-min-width</td><td>445px</td><td>Mindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns.</td></tr>
         <tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
         <tr><td>layer-pulldown-panel</td><td>40</td><td>Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen.</td></tr>

docs/styleguide/patterns/object-group-card.html

@@ -117,7 +117,9 @@
         }
 
         const referenceWidth = referenceCard.getBoundingClientRect().width;
-        grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`);
+        const maxWidth = parseFloat(getComputedStyle(referenceCard).maxWidth);
+        const sharedWidth = Number.isFinite(maxWidth) ? Math.min(referenceWidth, maxWidth) : referenceWidth;
+        grid.style.setProperty('--layout-object-card-shared-width', `${sharedWidth}px`);
         grid.classList.add('sg-object-card-grid--multi-row');
       });
     };

docs/styleguide/semantic-tokens-components.html

@@ -55,6 +55,7 @@
       <tbody>
         <tr><td>layout-object-group-card-min-width</td><td>dimension-object-group-card-min-width</td><td>Mindestbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
         <tr><td>layout-object-group-card-max-width</td><td>dimension-object-group-card-max-width</td><td>Maximalbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
+        <tr><td>layout-object-group-card-height</td><td>dimension-object-group-card-height</td><td>Fixe Desktop-Höhe der Karteninstanzen im Pattern Object Group Card.</td></tr>
         <tr><td>layout-notifications-text-segment-fixed-height</td><td>150px</td><td>Fixe Desktop-Höhe des ersten Text-Segments im Pattern Notifications; auf Mobile wird die Höhe wieder auf auto gesetzt.</td></tr>
       </tbody>
     </table>

docs/styleguide/semantic-tokens-patterns.html

@@ -52,6 +52,7 @@
     <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
       <tr><td>layout-object-group-card-min-width</td><td>dimension-object-group-card-min-width</td><td>Mindestbreite der einzelnen Karten im Pattern Object Group Card.</td></tr>
       <tr><td>layout-object-group-card-max-width</td><td>dimension-object-group-card-max-width</td><td>Maximalbreite der einzelnen Karten im Pattern Object Group Card.</td></tr>
+      <tr><td>layout-object-group-card-height</td><td>dimension-object-group-card-height</td><td>Fixe Desktop-Höhe der einzelnen Karten im Pattern Object Group Card.</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Notifications</h3>

docs/styleguide/styles/01-foundations.css

@@ -182,6 +182,7 @@
   --layout-notifications-text-segment-fixed-height-small: var(--dimension-notifications-text-segment-fixed-height-small);
   --layout-object-group-card-min-width: var(--dimension-object-group-card-min-width);
   --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
+  --layout-object-group-card-height: var(--dimension-object-group-card-height);
   --surface-object-card-lower-segment: var(--color-white);
   --text-company-card-data-negative: var(--chart-value-negative);
   --text-company-card-moat-neutral: var(--chart-value-neutral);
@@ -271,8 +272,9 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
-  --dimension-object-group-card-min-width: 550px;
+  --dimension-object-group-card-min-width: 450px;
-  --dimension-object-group-card-max-width: 800px;
+  --dimension-object-group-card-max-width: 650px;
+  --dimension-object-group-card-height: 700px;
   --dimension-input-label-width: 9rem;
   --dimension-input-field-desktop-width: 400px;
   --dimension-input-field-max-width: 600px;

docs/styleguide/styles/23-patterns-object-group-card.css

@@ -10,6 +10,13 @@
   flex: 1 1 var(--layout-object-group-card-min-width);
   min-width: var(--layout-object-group-card-min-width);
   max-width: var(--layout-object-group-card-max-width);
+  height: var(--layout-object-group-card-height);
+}
+
+@media (max-width: 767px) {
+  .sg-object-card[data-pattern="object-group-card"] {
+    height: auto;
+  }
 }
 
 .sg-object-group-card__hint {

public/assets/styleguide.upstream.css

@@ -182,6 +182,7 @@
   --layout-notifications-text-segment-fixed-height-small: var(--dimension-notifications-text-segment-fixed-height-small);
   --layout-object-group-card-min-width: var(--dimension-object-group-card-min-width);
   --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
+  --layout-object-group-card-height: var(--dimension-object-group-card-height);
   --surface-object-card-lower-segment: var(--color-white);
   --text-company-card-data-negative: var(--chart-value-negative);
   --text-company-card-moat-neutral: var(--chart-value-neutral);
@@ -271,8 +272,9 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
-  --dimension-object-group-card-min-width: 550px;
+  --dimension-object-group-card-min-width: 450px;
-  --dimension-object-group-card-max-width: 800px;
+  --dimension-object-group-card-max-width: 650px;
+  --dimension-object-group-card-height: 700px;
   --dimension-input-label-width: 9rem;
   --dimension-input-field-desktop-width: 400px;
   --dimension-input-field-max-width: 600px;
@@ -2330,6 +2332,13 @@ section + section {
   flex: 1 1 var(--layout-object-group-card-min-width);
   min-width: var(--layout-object-group-card-min-width);
   max-width: var(--layout-object-group-card-max-width);
+  height: var(--layout-object-group-card-height);
+}
+
+@media (max-width: 767px) {
+  .sg-object-card[data-pattern="object-group-card"] {
+    height: auto;
+  }
 }
 
 .sg-object-group-card__hint {

public/assets/styleguide.upstream.meta.json

@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "436eb55",
+  "styleguideCommit": "5b2e0ff",
-  "syncedAtUtc": "2026-06-11T09:20:37Z",
+  "syncedAtUtc": "2026-06-12T06:53:40Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }

public/assets/styles.css

@@ -182,6 +182,7 @@
   --layout-notifications-text-segment-fixed-height-small: var(--dimension-notifications-text-segment-fixed-height-small);
   --layout-object-group-card-min-width: var(--dimension-object-group-card-min-width);
   --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
+  --layout-object-group-card-height: var(--dimension-object-group-card-height);
   --surface-object-card-lower-segment: var(--color-white);
   --text-company-card-data-negative: var(--chart-value-negative);
   --text-company-card-moat-neutral: var(--chart-value-neutral);
@@ -271,8 +272,9 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
-  --dimension-object-group-card-min-width: 550px;
+  --dimension-object-group-card-min-width: 450px;
-  --dimension-object-group-card-max-width: 800px;
+  --dimension-object-group-card-max-width: 650px;
+  --dimension-object-group-card-height: 700px;
   --dimension-input-label-width: 9rem;
   --dimension-input-field-desktop-width: 400px;
   --dimension-input-field-max-width: 600px;
@@ -2330,6 +2332,13 @@ section + section {
   flex: 1 1 var(--layout-object-group-card-min-width);
   min-width: var(--layout-object-group-card-min-width);
   max-width: var(--layout-object-group-card-max-width);
+  height: var(--layout-object-group-card-height);
+}
+
+@media (max-width: 767px) {
+  .sg-object-card[data-pattern="object-group-card"] {
+    height: auto;
+  }
 }
 
 .sg-object-group-card__hint {