Sync styleguide 2026.05.18.1

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>

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>

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>

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>

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;

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

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

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

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

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