Add group-card h2 variant sandwich menu and align VSF page to component template

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">

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">

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;
 }

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;