From 720c5cf6d9cdccbf5b567c65a527f559e90d4608 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 7 Jul 2026 14:42:15 +0200
Subject: [PATCH] Sync styleguide 2026.05.18.1

---
 docs/styleguide/foundations.html              |  2 ++
 docs/styleguide/patterns/object-card.html     | 18 ++++++++++
 docs/styleguide/patterns/portal-header.html   | 20 ++++++-----
 .../semantic-tokens-components.html           |  9 +++++
 docs/styleguide/styles/01-foundations.css     |  4 +++
 .../styles/20-patterns-portal-header.css      | 12 +++++++
 .../styles/22-patterns-object-card.css        | 18 ++++++++++
 public/assets/styleguide.upstream.css         | 34 +++++++++++++++++++
 public/assets/styleguide.upstream.meta.json   |  4 +--
 public/assets/styles.css                      | 34 +++++++++++++++++++
 10 files changed, 145 insertions(+), 10 deletions(-)

diff --git a/docs/styleguide/foundations.html b/docs/styleguide/foundations.html
index 8e5b0e2..8223008 100644
--- a/docs/styleguide/foundations.html
+++ b/docs/styleguide/foundations.html
@@ -32,6 +32,7 @@
         <tr><td>signal-green</td><td>#009101</td><td>Positive Score-Balken und positive Chart-Werte.</td></tr>
         <tr><td>signal-green-light</td><td>#65A665</td><td>Hellgrüne Variante für positive Signal- und Notification-Flächen.</td></tr>
         <tr><td>signal-yellow</td><td>#9C7A00</td><td>Neutrale Score-Balken, neutrale Chart-Werte und Warnwerte in Tabellen.</td></tr>
+        <tr><td>ampel-hellgelb</td><td>#D3B962</td><td>Untersegmente in der Pattern-Notification-Variante der Object Card.</td></tr>
         <tr><td>signal-red</td><td>#9B3B2F</td><td>Negative Score-Balken und negative Chart-Werte.</td></tr>
         <tr><td>font-dark</td><td>#414959</td><td>Standard-Schrift auf hellen Flächen, Achsen/Marker in Charts, Sandwich-Linien und Radio-Markierung.</td></tr>
         <tr><td>font-light</td><td>#FFFFFF</td><td>Schrift auf dunklen Flächen, Portalheader, Card-Headern, Prozessbuttons und ausgewählten Tab-Buttons.</td></tr>
@@ -158,6 +159,7 @@
         <tr><td>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr>
         <tr><td>content-card-margin-top-desktop</td><td>100px</td><td>Oberer Außenabstand der Content Card auf Desktop.</td></tr>
         <tr><td>content-card-margin-top-mobile</td><td>1rem</td><td>Oberer Außenabstand der Content Card auf Mobile; entspricht spacing-large.</td></tr>
+        <tr><td>notification-card-width</td><td>50%</td><td>Breite der Notification Card relativ zum übergeordneten Layout.</td></tr>
         <tr><td>public-content-width</td><td>100%</td><td>Standardbreite für wiederverwendbare Public-Content-Wrapper innerhalb der durch das jeweilige Page-Layout begrenzten Breite.</td></tr>
         <tr><td>object-group-card-min-width</td><td>450px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>object-group-card-max-width</td><td>650px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
diff --git a/docs/styleguide/patterns/object-card.html b/docs/styleguide/patterns/object-card.html
index 3162161..81ab36d 100644
--- a/docs/styleguide/patterns/object-card.html
+++ b/docs/styleguide/patterns/object-card.html
@@ -159,6 +159,24 @@
         </div>
       </article>
     </div>
+
+    <h2 class="sg-sub-heading sg-section-h2">Notification</h2>
+    <p class="sg-preview-label">Pattern: Notification</p>
+    <p class="sg-body">Hinweis: Diese Variante basiert auf Object Card Content Basic, ist auf 50% Breite ausgelegt und nutzt hellgelbe Untersegmente.</p>
+
+    <article class="sg-card sg-object-card sg-object-card--content-basic sg-object-card--notification" data-pattern="object-card-notification" aria-label="Notification Card">
+      <header class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-object-card__header" data-pattern-part="object-card-notification-header">
+        <div class="sg-strong">Benachrichtigung</div>
+      </header>
+      <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-notification-content">
+        <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Donec vitae sapien ut libero venenatis faucibus.</p>
+      </div>
+      <footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-notification-actions">
+        <div class="sg-object-card__actions sg-notification-card__actions">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button">Verstanden</button>
+        </div>
+      </footer>
+    </article>
   </section>
 
   <script>
diff --git a/docs/styleguide/patterns/portal-header.html b/docs/styleguide/patterns/portal-header.html
index 6ca3eca..4f422c7 100644
--- a/docs/styleguide/patterns/portal-header.html
+++ b/docs/styleguide/patterns/portal-header.html
@@ -69,7 +69,7 @@
       </p>
 
       <p class="sg-table-label sg-text-on-dark">
-        Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Navigationstasten in einer eigenen Zeile darunter.
+        Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Hauptmenüpunkte in einer eigenen Basic Card darunter.
       </p>
 
       <article class="sg-portal-header-pattern-variant" aria-label="Public Portal Header ohne Options Row">
@@ -92,16 +92,20 @@
 
           <div class="sg-portal-header__main" data-pattern-part="portal-header-main">
             <p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">Portalname</p>
-
-            <nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
-              <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Inhalt 1</button>
-              <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Inhalt 2</button>
-              <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Inhalt 3</button>
-              <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Inhalt 4</button>
-            </nav>
           </div>
         </header>
 
+        <article class="sg-card sg-portal-header-pattern-variant__links-card" data-component="basic-card" aria-label="Hauptnavigation">
+          <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
+            <nav class="sg-portal-header__tabs" aria-label="Hauptnavigation" data-pattern-part="portal-header-navigation">
+              <a class="sg-hyperlink" href="#" aria-current="page" data-component="hyperlink">Inhalt 1</a>
+              <a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 2</a>
+              <a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 3</a>
+              <a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 4</a>
+            </nav>
+          </div>
+        </article>
+
         <p class="sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark">
           Nächstes Element (Abstand nach unten: spacing-large)
         </p>
diff --git a/docs/styleguide/semantic-tokens-components.html b/docs/styleguide/semantic-tokens-components.html
index 0392b38..d2feeef 100644
--- a/docs/styleguide/semantic-tokens-components.html
+++ b/docs/styleguide/semantic-tokens-components.html
@@ -62,6 +62,15 @@
       </tbody>
     </table>
 
+    <h3 class="sg-sub-heading sg-section-h3">Notification</h3>
+    <table class="sg-foundation-table sg-table-label">
+      <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
+      <tbody>
+        <tr><td>layout-notification-card-width</td><td>dimension-notification-card-width</td><td>Breite der Notification Card im Pattern Notification relativ zum übergeordneten Layout.</td></tr>
+        <tr><td>surface-notification-card-lower-segment</td><td>color-ampel-hellgelb</td><td>Fläche der unteren Segmente in der Notification-Variante der Object Card.</td></tr>
+      </tbody>
+    </table>
+
     <h3 class="sg-sub-heading sg-section-h3">Text Group Box</h3>
     <table class="sg-foundation-table sg-table-label">
       <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css
index 7ca201a..961e118 100644
--- a/docs/styleguide/styles/01-foundations.css
+++ b/docs/styleguide/styles/01-foundations.css
@@ -17,6 +17,7 @@
   --color-signal-green: #009101;
   --color-signal-green-light: #65A665;
   --color-signal-yellow: #9C7A00;
+  --color-ampel-hellgelb: #D3B962;
   --color-signal-red: #9B3B2F;
   --color-font-dark: #414959;
   --color-font-light: #FFFFFF;
@@ -175,6 +176,7 @@
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
   --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
   --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
+  --layout-notification-card-width: var(--dimension-notification-card-width);
   --dimension-notifications-card-min-width: 445px;
   --layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
   --layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
@@ -187,6 +189,7 @@
   --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
   --layout-object-group-card-height: var(--dimension-object-group-card-height);
   --surface-object-card-lower-segment: var(--color-white);
+  --surface-notification-card-lower-segment: var(--color-ampel-hellgelb);
   --text-company-card-data-negative: var(--chart-value-negative);
   --text-company-card-moat-neutral: var(--chart-value-neutral);
   --layout-company-card-analysis-gap-after-moat: var(--spacing-large);
@@ -286,6 +289,7 @@
   --dimension-object-group-card-min-width: 450px;
   --dimension-object-group-card-max-width: 650px;
   --dimension-object-group-card-height: 700px;
+  --dimension-notification-card-width: 50%;
   --dimension-input-label-width: 9rem;
   --dimension-input-field-desktop-width: 400px;
   --dimension-input-field-max-width: 600px;
diff --git a/docs/styleguide/styles/20-patterns-portal-header.css b/docs/styleguide/styles/20-patterns-portal-header.css
index 4902eae..3aa6694 100644
--- a/docs/styleguide/styles/20-patterns-portal-header.css
+++ b/docs/styleguide/styles/20-patterns-portal-header.css
@@ -53,6 +53,10 @@
 
 .sg-portal-header__tabs {
   grid-area: tabs;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-small);
   width: 100%;
 }
 
@@ -77,6 +81,14 @@
   margin-top: var(--spacing-large);
 }
 
+.sg-portal-header-pattern-variant__links-card {
+  margin-top: var(--spacing-small);
+}
+
+.sg-portal-header-pattern-variant__links-card .sg-portal-header__tabs {
+  gap: var(--spacing-large);
+}
+
 @media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
   .sg-portal-header__main {
     gap: var(--spacing-small) var(--spacing-large);
diff --git a/docs/styleguide/styles/22-patterns-object-card.css b/docs/styleguide/styles/22-patterns-object-card.css
index 0cde2e0..ed53b23 100644
--- a/docs/styleguide/styles/22-patterns-object-card.css
+++ b/docs/styleguide/styles/22-patterns-object-card.css
@@ -77,6 +77,18 @@
   height: auto;
 }
 
+.sg-card.sg-object-card--notification {
+  width: var(--layout-notification-card-width);
+  min-width: 0;
+  max-width: none;
+  height: auto;
+  --surface-object-card-lower-segment: var(--surface-notification-card-lower-segment);
+}
+
+.sg-notification-card__actions {
+  justify-content: flex-end;
+}
+
 .sg-object-card-content-basic {
   margin-top: var(--layout-content-card-margin-top-desktop);
 }
@@ -88,6 +100,12 @@
     max-width: none;
   }
 
+  .sg-card.sg-object-card--notification {
+    width: var(--layout-object-card-mobile-width);
+    min-width: 0;
+    max-width: none;
+  }
+
   .sg-object-card-content-basic {
     margin-top: var(--layout-content-card-margin-top-mobile);
   }
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index 1d5a760..4334b44 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -17,6 +17,7 @@
   --color-signal-green: #009101;
   --color-signal-green-light: #65A665;
   --color-signal-yellow: #9C7A00;
+  --color-ampel-hellgelb: #D3B962;
   --color-signal-red: #9B3B2F;
   --color-font-dark: #414959;
   --color-font-light: #FFFFFF;
@@ -175,6 +176,7 @@
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
   --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
   --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
+  --layout-notification-card-width: var(--dimension-notification-card-width);
   --dimension-notifications-card-min-width: 445px;
   --layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
   --layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
@@ -187,6 +189,7 @@
   --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
   --layout-object-group-card-height: var(--dimension-object-group-card-height);
   --surface-object-card-lower-segment: var(--color-white);
+  --surface-notification-card-lower-segment: var(--color-ampel-hellgelb);
   --text-company-card-data-negative: var(--chart-value-negative);
   --text-company-card-moat-neutral: var(--chart-value-neutral);
   --layout-company-card-analysis-gap-after-moat: var(--spacing-large);
@@ -286,6 +289,7 @@
   --dimension-object-group-card-min-width: 450px;
   --dimension-object-group-card-max-width: 650px;
   --dimension-object-group-card-height: 700px;
+  --dimension-notification-card-width: 50%;
   --dimension-input-label-width: 9rem;
   --dimension-input-field-desktop-width: 400px;
   --dimension-input-field-max-width: 600px;
@@ -2129,6 +2133,10 @@ section + section {
 
 .sg-portal-header__tabs {
   grid-area: tabs;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-small);
   width: 100%;
 }
 
@@ -2153,6 +2161,14 @@ section + section {
   margin-top: var(--spacing-large);
 }
 
+.sg-portal-header-pattern-variant__links-card {
+  margin-top: var(--spacing-small);
+}
+
+.sg-portal-header-pattern-variant__links-card .sg-portal-header__tabs {
+  gap: var(--spacing-large);
+}
+
 @media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
   .sg-portal-header__main {
     gap: var(--spacing-small) var(--spacing-large);
@@ -2409,6 +2425,18 @@ section + section {
   height: auto;
 }
 
+.sg-card.sg-object-card--notification {
+  width: var(--layout-notification-card-width);
+  min-width: 0;
+  max-width: none;
+  height: auto;
+  --surface-object-card-lower-segment: var(--surface-notification-card-lower-segment);
+}
+
+.sg-notification-card__actions {
+  justify-content: flex-end;
+}
+
 .sg-object-card-content-basic {
   margin-top: var(--layout-content-card-margin-top-desktop);
 }
@@ -2420,6 +2448,12 @@ section + section {
     max-width: none;
   }
 
+  .sg-card.sg-object-card--notification {
+    width: var(--layout-object-card-mobile-width);
+    min-width: 0;
+    max-width: none;
+  }
+
   .sg-object-card-content-basic {
     margin-top: var(--layout-content-card-margin-top-mobile);
   }
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index b9c8d9e..136115b 100644
--- a/public/assets/styleguide.upstream.meta.json
+++ b/public/assets/styleguide.upstream.meta.json
@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "85f80a0",
-  "syncedAtUtc": "2026-06-27T05:53:58Z",
+  "styleguideCommit": "ec00d82",
+  "syncedAtUtc": "2026-07-07T12:42:15Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }
diff --git a/public/assets/styles.css b/public/assets/styles.css
index 1d5a760..4334b44 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -17,6 +17,7 @@
   --color-signal-green: #009101;
   --color-signal-green-light: #65A665;
   --color-signal-yellow: #9C7A00;
+  --color-ampel-hellgelb: #D3B962;
   --color-signal-red: #9B3B2F;
   --color-font-dark: #414959;
   --color-font-light: #FFFFFF;
@@ -175,6 +176,7 @@
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
   --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
   --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
+  --layout-notification-card-width: var(--dimension-notification-card-width);
   --dimension-notifications-card-min-width: 445px;
   --layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
   --layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
@@ -187,6 +189,7 @@
   --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
   --layout-object-group-card-height: var(--dimension-object-group-card-height);
   --surface-object-card-lower-segment: var(--color-white);
+  --surface-notification-card-lower-segment: var(--color-ampel-hellgelb);
   --text-company-card-data-negative: var(--chart-value-negative);
   --text-company-card-moat-neutral: var(--chart-value-neutral);
   --layout-company-card-analysis-gap-after-moat: var(--spacing-large);
@@ -286,6 +289,7 @@
   --dimension-object-group-card-min-width: 450px;
   --dimension-object-group-card-max-width: 650px;
   --dimension-object-group-card-height: 700px;
+  --dimension-notification-card-width: 50%;
   --dimension-input-label-width: 9rem;
   --dimension-input-field-desktop-width: 400px;
   --dimension-input-field-max-width: 600px;
@@ -2129,6 +2133,10 @@ section + section {
 
 .sg-portal-header__tabs {
   grid-area: tabs;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-small);
   width: 100%;
 }
 
@@ -2153,6 +2161,14 @@ section + section {
   margin-top: var(--spacing-large);
 }
 
+.sg-portal-header-pattern-variant__links-card {
+  margin-top: var(--spacing-small);
+}
+
+.sg-portal-header-pattern-variant__links-card .sg-portal-header__tabs {
+  gap: var(--spacing-large);
+}
+
 @media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
   .sg-portal-header__main {
     gap: var(--spacing-small) var(--spacing-large);
@@ -2409,6 +2425,18 @@ section + section {
   height: auto;
 }
 
+.sg-card.sg-object-card--notification {
+  width: var(--layout-notification-card-width);
+  min-width: 0;
+  max-width: none;
+  height: auto;
+  --surface-object-card-lower-segment: var(--surface-notification-card-lower-segment);
+}
+
+.sg-notification-card__actions {
+  justify-content: flex-end;
+}
+
 .sg-object-card-content-basic {
   margin-top: var(--layout-content-card-margin-top-desktop);
 }
@@ -2420,6 +2448,12 @@ section + section {
     max-width: none;
   }
 
+  .sg-card.sg-object-card--notification {
+    width: var(--layout-object-card-mobile-width);
+    min-width: 0;
+    max-width: none;
+  }
+
   .sg-object-card-content-basic {
     margin-top: var(--layout-content-card-margin-top-mobile);
   }