From 1d0c6b4cf06ac1645c08f6e24a6f3c809cd17290 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 1 Jun 2026 17:14:25 +0200
Subject: [PATCH] Match Meldungen notification behavior to notifications
 pattern

---
 patterns/vsf-meldungen.html | 56 +++++++++++++++++++++++++++++--------
 1 file changed, 44 insertions(+), 12 deletions(-)

diff --git a/patterns/vsf-meldungen.html b/patterns/vsf-meldungen.html
index 4b2af0b..f84ba17 100644
--- a/patterns/vsf-meldungen.html
+++ b/patterns/vsf-meldungen.html
@@ -150,8 +150,8 @@
           <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" aria-label="Updates Meldungen">
               <div class="sg-group-card" data-component="group-card">
-                <article class="sg-card" data-pattern="notification" data-component="notification-card">
-                  <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
+                <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>
                   </div>
                   <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
@@ -159,8 +159,8 @@
                   </div>
                 </article>
 
-                <article class="sg-card" data-pattern="notification" data-component="notification-card">
-                  <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
+                <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-green sg-notifications-pattern__text-segment" data-component-part="card-header">
                     <p class="sg-body">Update-Hinweis im positiven Bereich zur Illustration.</p>
                   </div>
                   <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
@@ -168,8 +168,8 @@
                   </div>
                 </article>
 
-                <article class="sg-card sg-card--notification-white" data-pattern="notification" data-component="notification-card">
-                  <div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
+                <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
+                  <div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
                     <p class="sg-body">Neutraler Update-Hinweis zur Illustration.</p>
                   </div>
                   <div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
@@ -183,8 +183,8 @@
           <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" aria-label="Termine Meldungen">
               <div class="sg-group-card" data-component="group-card">
-                <article class="sg-card" data-pattern="notification" data-component="notification-card">
-                  <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
+                <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>
                   </div>
                   <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
@@ -192,8 +192,8 @@
                   </div>
                 </article>
 
-                <article class="sg-card" data-pattern="notification" data-component="notification-card">
-                  <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
+                <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-green sg-notifications-pattern__text-segment" data-component-part="card-header">
                     <p class="sg-body">Terminhinweis im positiven Bereich zur Illustration.</p>
                   </div>
                   <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
@@ -201,8 +201,8 @@
                   </div>
                 </article>
 
-                <article class="sg-card sg-card--notification-white" data-pattern="notification" data-component="notification-card">
-                  <div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
+                <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
+                  <div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
                     <p class="sg-body">Neutraler Terminhinweis zur Illustration.</p>
                   </div>
                   <div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
@@ -452,6 +452,38 @@
     });
   </script>
   <script>
+    const updateNotificationsPatternRowState = () => {
+      document.querySelectorAll('.sg-notifications-pattern').forEach((grid) => {
+        const cards = Array.from(grid.querySelectorAll('.sg-notifications-pattern__card'));
+        grid.classList.remove('sg-notifications-pattern--multi-row');
+        grid.style.removeProperty('--layout-object-card-shared-width');
+
+        if (cards.length <= 1) {
+          return;
+        }
+
+        const firstTop = cards[0].offsetTop;
+        const hasMultipleRows = cards.some((card) => card.offsetTop !== firstTop);
+
+        if (!hasMultipleRows) {
+          return;
+        }
+
+        const firstRowCards = cards.filter((card) => card.offsetTop === firstTop);
+        const referenceCard = firstRowCards[0];
+        if (!referenceCard) {
+          return;
+        }
+
+        const referenceWidth = referenceCard.getBoundingClientRect().width;
+        grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`);
+        grid.classList.add('sg-notifications-pattern--multi-row');
+      });
+    };
+
+    window.addEventListener('load', updateNotificationsPatternRowState);
+    window.addEventListener('resize', updateNotificationsPatternRowState);
+
     const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation-vsf-meldungen"]');
 
     if (tabGroup) {