Sync styleguide 2026.05.18.1

docs/styleguide/patterns/object-card.html

@@ -103,6 +103,48 @@
         </footer>
       </article>
     </div>
+
+    <h2 class="sg-sub-heading sg-section-h2">Object Card variable height</h2>
+    <p class="sg-preview-label">Pattern: Object Card variable height</p>
+    <p class="sg-body">Hinweis: In dieser Variante ist die komplette Karte in der Höhe flexibel. Die Segmenthöhen ergeben sich direkt aus dem Inhalt, dadurch sind die Karten im Grid bewusst unterschiedlich hoch.</p>
+
+    <div class="sg-object-card-grid">
+      <article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
+          <div class="sg-strong">Alcon Inc.</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
+          <p class="sg-body">Kurzer Inhalt für eine kompakte Karte mit wenig vertikalem Platzbedarf.</p>
+        </div>
+      </article>
+
+      <article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
+          <div class="sg-strong">Meyer Optik AG</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
+          <p class="sg-body">Etwas längerer Text mit mehr Inhalt. Die Karte wächst hier sichtbar mit dem Segment, weil der Body bewusst mehr Umbruchzeilen erzeugt und damit die Höhe definiert.</p>
+        </div>
+      </article>
+
+      <article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
+          <div class="sg-strong">Nordwind Therapeutics Holding</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
+          <p class="sg-body">Der Inhalt ist hier knapp, aber die Karte bleibt flexibel und nimmt nur so viel Höhe ein wie die Segmente tatsächlich benötigen.</p>
+        </div>
+      </article>
+
+      <article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
+          <div class="sg-strong">Valencia Holding Group International</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
+          <p class="sg-body">Dies ist die längste Variante in der Demo. Sie zeigt, dass der Body die Kartenhöhe direkt mitprägt, ohne dass ein fixer Kartenrahmen die Inhalte begrenzt oder künstlich streckt.</p>
+        </div>
+      </article>
+    </div>
   </section>
 
   <script>