From 442d90520ac06eae38ada128786ca39f0cca6688 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 28 May 2026 10:49:21 +0200
Subject: [PATCH] Replace inline group-card heading spacing with component CSS
 class

---
 components/cards.html          | 2 +-
 styles/40-components-cards.css | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/cards.html b/components/cards.html
index 1c8ee27..be2a31c 100644
--- a/components/cards.html
+++ b/components/cards.html
@@ -170,7 +170,7 @@
     <p class="sg-preview-label">Variante: Group Card mit H2 Überschrift</p>
 
     <div class="sg-group-card" data-component="group-card">
-      <h2 class="sg-heading-h2 sg-text-on-dark" style="margin-left: var(--card-segment-padding-horizontal);">Gruppenüberschrift</h2>
+      <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Gruppenüberschrift</h2>
 
       <article class="sg-card" data-component="card" data-component-context="group-card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
diff --git a/styles/40-components-cards.css b/styles/40-components-cards.css
index 421b2d8..ead2dbc 100644
--- a/styles/40-components-cards.css
+++ b/styles/40-components-cards.css
@@ -167,6 +167,14 @@
   width: calc(50% - var(--spacing-small));
 }
 
+.sg-group-card__heading {
+  flex: 0 0 100%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-bottom: var(--spacing-small);
+  margin-left: var(--card-segment-padding-horizontal);
+}
+
 .sg-page-cards .sg-preview-area {
   display: flex;
   flex-direction: column;