From b71544d95fb92b83c8ece6db6866a8b61d063a78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 28 May 2026 11:34:37 +0200
Subject: [PATCH] Add group-card h2 variant sandwich menu and align VSF page to
 component template

---
 components/cards.html                      | 14 ++++++++++++++
 patterns/vsf-list-detailseite.html         |  2 +-
 styles/33-layouts-vsf-list-detailseite.css | 21 ---------------------
 styles/40-components-cards.css             | 21 +++++++++++++++++++++
 4 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/components/cards.html b/components/cards.html
index eaea0b4..5bb7298 100644
--- a/components/cards.html
+++ b/components/cards.html
@@ -170,7 +170,21 @@
     <p class="sg-preview-label">Variante: Group Card mit H2 Überschrift</p>
 
     <div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
+      <div class="sg-group-card__header-row">
       <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Gruppenüberschrift</h2>
+      <div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
+        <button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Gruppenmenü öffnen" data-component-part="sandwich-trigger">
+          <span class="sg-sandwich-button__icon" aria-hidden="true">
+            <span class="sg-sandwich-button__line"></span>
+            <span class="sg-sandwich-button__line"></span>
+            <span class="sg-sandwich-button__line"></span>
+          </span>
+        </button>
+        <div class="sg-sandwich-menu-panel" aria-label="Gruppenmenü" data-component-part="sandwich-panel">
+          <a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Gruppenüberschrift anpassen</a>
+        </div>
+      </div>
+    </div>
 
       <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/patterns/vsf-list-detailseite.html b/patterns/vsf-list-detailseite.html
index be510ab..92bad93 100644
--- a/patterns/vsf-list-detailseite.html
+++ b/patterns/vsf-list-detailseite.html
@@ -110,7 +110,7 @@
     <div class="sg-vsf-list-detail-page__content">
       <aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen">
         <div class="sg-group-card" data-component="group-card">
-          <div class="sg-vsf-list-detail-page__group-card-header">
+          <div class="sg-group-card__header-row">
             <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Meldungen</h2>
             <div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
               <button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Meldungsmenü öffnen" data-component-part="sandwich-trigger">
diff --git a/styles/33-layouts-vsf-list-detailseite.css b/styles/33-layouts-vsf-list-detailseite.css
index 5241734..4a2cf61 100644
--- a/styles/33-layouts-vsf-list-detailseite.css
+++ b/styles/33-layouts-vsf-list-detailseite.css
@@ -64,27 +64,6 @@
   width: 100%;
 }
 
-.sg-vsf-list-detail-page__group-card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-small);
-  width: 100%;
-  margin-bottom: var(--spacing-small);
-}
-
-.sg-vsf-list-detail-page__group-card-header .sg-group-card__heading {
-  flex: 1 1 auto;
-  margin-top: 0;
-  margin-right: 0;
-  margin-bottom: 0;
-  margin-left: var(--card-segment-padding-horizontal);
-}
-
-.sg-vsf-list-detail-page__group-card-header .sg-sandwich-menu-wrap {
-  margin-right: var(--card-segment-padding-horizontal);
-}
-
 .sg-vsf-list-detail-page__notification-card.sg-vsf-list-detail-page__notification-card--hidden {
   display: none;
 }
diff --git a/styles/40-components-cards.css b/styles/40-components-cards.css
index 573b380..8e39050 100644
--- a/styles/40-components-cards.css
+++ b/styles/40-components-cards.css
@@ -171,6 +171,15 @@
   margin-bottom: var(--spacing-large);
 }
 
+.sg-group-card__header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-small);
+  width: 100%;
+  margin-bottom: var(--spacing-small);
+}
+
 .sg-group-card__heading {
   flex: 0 0 100%;
   margin-top: 0;
@@ -179,6 +188,18 @@
   margin-left: var(--card-segment-padding-horizontal);
 }
 
+.sg-group-card__header-row .sg-group-card__heading {
+  flex: 1 1 auto;
+  margin-top: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: var(--card-segment-padding-horizontal);
+}
+
+.sg-group-card__header-row .sg-sandwich-menu-wrap {
+  margin-right: var(--card-segment-padding-horizontal);
+}
+
 .sg-page-cards .sg-preview-area {
   display: flex;
   flex-direction: column;