From b1af9b3e6b2dd70829d1fff04d446f92a0c17979 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 3 Jun 2026 14:02:28 +0200
Subject: [PATCH] Fix VSF meldungen overflow on small viewports

---
 patterns/vsf-meldungen.html | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/patterns/vsf-meldungen.html b/patterns/vsf-meldungen.html
index 981b0b0..6c111a6 100644
--- a/patterns/vsf-meldungen.html
+++ b/patterns/vsf-meldungen.html
@@ -148,7 +148,7 @@
 
         <div class="sg-content-block-card-group__panels">
           <div class="sg-content-block-card-group__panel" id="vsf-meldungen-panel-updates" role="tabpanel" aria-labelledby="vsf-meldungen-tab-updates">
-            <div class="sg-preview-area sg-notifications-pattern sg-group-card" aria-label="Updates Meldungen" data-component="group-card">
+            <div class="sg-preview-area sg-notifications-pattern" aria-label="Updates Meldungen">
                 <article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
                   <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
                     <p class="sg-body">Update-Hinweis mit hoher Priorität zur Illustration.</p>
@@ -202,20 +202,20 @@
                     <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
                   </div>
                 </article>
-              <div class="sg-navigation-card-layout sg-navigation-card-block">
-                <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
-                  <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
-                    <div class="sg-navigation-card-center">
-                      <a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
-                    </div>
+            </div>
+            <div class="sg-navigation-card-layout sg-navigation-card-block">
+              <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
+                <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+                  <div class="sg-navigation-card-center">
+                    <a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
                   </div>
-                </article>
-              </div>
+                </div>
+              </article>
             </div>
           </div>
 
           <div class="sg-content-block-card-group__panel" id="vsf-meldungen-panel-termine" role="tabpanel" aria-labelledby="vsf-meldungen-tab-termine" hidden>
-            <div class="sg-preview-area sg-notifications-pattern sg-group-card" aria-label="Termine Meldungen" data-component="group-card">
+            <div class="sg-preview-area sg-notifications-pattern" aria-label="Termine Meldungen">
                 <article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
                   <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
                     <p class="sg-body">Terminwarnung mit hoher Priorität zur Illustration.</p>
@@ -242,15 +242,15 @@
                     <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
                   </div>
                 </article>
-              <div class="sg-navigation-card-layout sg-navigation-card-block">
-                <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
-                  <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
-                    <div class="sg-navigation-card-center">
-                      <a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
-                    </div>
+            </div>
+            <div class="sg-navigation-card-layout sg-navigation-card-block">
+              <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
+                <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+                  <div class="sg-navigation-card-center">
+                    <a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
                   </div>
-                </article>
-              </div>
+                </div>
+              </article>
             </div>
           </div>
         </div>