Scope pattern body styles to direct children

components/cards.html

@@ -118,6 +118,23 @@
     </article>
   </div>
 
+  <p class="sg-preview-label">Variante: Green Content Card</p>
+
+  <div class="sg-preview-area">
+    <article class="sg-card sg-card--content-card sg-card--content-card-green" data-component="content-card" aria-label="Green Content Card">
+      <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+        <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
+          <p class="sg-body sg-text-layout-pattern__column">
+            Footer links: Platzhaltertext fuer allgemeine Hinweise, Navigation oder Kontaktinformationen im zweispaltigen Layout.
+          </p>
+          <p class="sg-body sg-text-layout-pattern__column">
+            Footer rechts: Platzhaltertext fuer ergaenzende Angaben, rechtliche Hinweise oder sekundaere Footer-Inhalte im gleichen Raster.
+          </p>
+        </div>
+      </div>
+    </article>
+  </div>
+
   <p class="sg-preview-label">Variante: Footer Card</p>
 
   <div class="sg-preview-area">

components/public-page-components.html

@@ -51,6 +51,24 @@
       </div>
     </section>
 
+    <section id="component-call-to-action-card-three-column">
+      <p class="sg-preview-label">Component: Call to action Card – Drei-Spalten-Variante</p>
+
+      <div class="sg-preview-area">
+        <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-card--call-to-action-card--three-column" data-component="call-to-action-card" data-component-variant="three-column" aria-label="Call to action Card Drei-Spalten-Variante">
+          <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
+            <p class="sg-body sg-call-to-action-card__text">Mit dem Newsletter immer über neue Inhalte informiert bleiben.</p>
+            <div class="sg-labeled-input-row" data-component="single-line-input" data-component-state="inactive-selectable">
+              <input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="email" placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse" pattern="[^\s@]+@[^\s@]+\.[^\s@]{2,}" required>
+            </div>
+            <div class="sg-call-to-action-card__action">
+              <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" data-component="button" data-component-variant="process" data-component-state="inactive" disabled aria-disabled="true">Prozess Button</button>
+            </div>
+          </div>
+        </article>
+      </div>
+    </section>
+
     <section id="component-picture-full-width">
       <p class="sg-preview-label">Component: Picture Full Width</p>
 

email-styleguide.css

@@ -0,0 +1,74 @@
+@import "./styles/01-foundations.css";
+
+/* E-Mail-Komponenten: separater Einstiegspunkt, nicht Teil des Portal-CSS */
+.sg-email-template-page {
+  background: var(--surface-object-card-lower-segment);
+}
+
+.sg-email-template-page .sg-main-heading,
+.sg-email-template-page .sg-preview-label {
+  color: var(--text-card-body);
+}
+
+.sg-email-preview-viewport {
+  width: var(--dimension-email-body-max-width);
+  background: var(--surface-object-card-lower-segment);
+}
+
+.sg-email-preview-body {
+  width: 100%;
+}
+
+.sg-email-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding:
+    var(--card-segment-padding-vertical)
+    var(--layout-page-content-inset-inline);
+  border: var(--border-none);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-none);
+  background: var(--surface-portal-header);
+}
+
+.sg-email-header__main {
+  width: 100%;
+}
+
+.sg-email-header__brand {
+  margin: 0;
+  color: var(--text-portal-header-brand);
+  font-size: var(--font-size-portal-header-brand);
+}
+
+.sg-email-card,
+.sg-email-footer-card {
+  width: calc(100% + (2 * var(--card-segment-padding-horizontal)));
+  margin-inline: calc(-1 * var(--card-segment-padding-horizontal));
+}
+
+.sg-email-footer-card {
+  margin-top: calc(var(--spacing-large) * 2);
+}
+
+.sg-email-footer-card .sg-body {
+  font-size: var(--font-size-small);
+}
+
+.sg-email-card .sg-card-segment--body > .sg-body {
+  color: var(--text-card-body);
+}
+
+.sg-email-card-action-segment {
+  align-items: flex-end;
+}
+
+.sg-email-template > .sg-heading-h1 {
+  color: var(--text-card-body);
+}
+
+.sg-email-template > .sg-email-template__intro {
+  color: var(--text-card-body);
+}

foundations.html

@@ -30,7 +30,9 @@
         <tr><td>black</td><td>#000000</td><td>Neutrale Vollton-Overlay-Farbe für starke visuelle Deaktivierung von Hintergrundobjekten.</td></tr>
         <tr><td>white</td><td>#FFFFFF</td><td>Standardfläche von Buttons, Eingabefeldern, Pulldown-Triggern, Checkboxen, Radios, Toggle-Tracks und Card-Trennern.</td></tr>
         <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>
@@ -157,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>

index.html

@@ -41,7 +41,6 @@
 
       <ul class="sg-index-list">
         <li><a href="./patterns/portal-header.html">Portal Header</a></li>
-        <li><a href="./patterns/vsf-portal-header-public.html">VSF Portal Header Public</a></li>
         <li><a href="./patterns/options-row.html">Options Row</a></li>
         <li><a href="./patterns/object-card.html">Object Card</a></li>
         <li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
@@ -84,6 +83,27 @@
       </ul>
     </section>
 
+    <section class="sg-index-section">
+      <h2 class="sg-sub-heading">E-Mail-Templates</h2>
+
+      <h3 class="sg-sub-heading sg-section-h3">Foundations</h3>
+      <ul class="sg-index-list"></ul>
+
+      <h3 class="sg-sub-heading sg-section-h3">Komponenten</h3>
+      <ul class="sg-index-list">
+        <li><a href="./components/email-header.html">E-Mail Header</a></li>
+        <li><a href="./components/email-footer.html">E-Mail Footer</a></li>
+      </ul>
+
+      <h3 class="sg-sub-heading sg-section-h3">Patterns</h3>
+      <ul class="sg-index-list">
+        <li><a href="./patterns/general-email-template.html">General E-Mail-Template</a></li>
+      </ul>
+
+      <h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Templates</h3>
+      <ul class="sg-index-list"></ul>
+    </section>
+
   </main>
 
 </body>

patterns/general-email-template.html

@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – General E-Mail-Template</title>
+  <link rel="stylesheet" href="../styleguide.css">
+  <link rel="stylesheet" href="../email-styleguide.css">
+</head>
+<body class="sg-email-template-page">
+
+  <h1 class="sg-main-heading">General E-Mail-Template</h1>
+
+  <section id="pattern-general-email-template">
+    <p class="sg-preview-label">General E-Mail-Template</p>
+
+    <div class="sg-preview-area">
+      <div class="sg-email-preview-viewport">
+        <div class="sg-email-preview-body">
+          <header
+            class="sg-email-header"
+            aria-label="E-Mail Header"
+            data-component="email-header"
+            data-component-variant="logo-only"
+            data-derived-from="portal-header-without-options-row"
+          >
+            <div class="sg-email-header__main" data-component-part="main">
+              <p class="sg-email-header__brand" data-component-part="brand">ValueStockFinder</p>
+            </div>
+          </header>
+
+          <article
+            class="sg-transparent-card sg-page-layout-app__heading-block sg-email-template"
+            aria-label="E-Mail Inhalt"
+            data-pattern="general-email-template"
+            data-email-subject="Bitte bestätige deine Anmeldung"
+            data-email-preheader="Bestätige deine E-Mail-Adresse, um Updates von ValueStockFinder zu erhalten."
+          >
+            <h1 class="sg-heading-h1">Fast geschafft</h1>
+            <p class="sg-body sg-email-template__intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Integer nec odio. Praesent libero.<br>Sed cursus ante dapibus diam.</p>
+            <article class="sg-card sg-email-card" data-component="card" data-pattern-part="confirmation-card">
+              <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+                <div class="sg-strong">Bitte bestätige deine Anmeldung</div>
+              </div>
+
+              <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
+                <p class="sg-body">Bitte bestätige jetzt deine E-Mail-Adresse. Erst danach dürfen wir dir die gewünschten Informationen per E-Mail senden.</p>
+                <p class="sg-body">Falls du dich nicht selbst angemeldet hast, musst du nichts weiter tun.</p>
+              </div>
+
+              <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray sg-email-card-action-segment" data-component-part="card-action">
+                <button class="sg-interaction-element sg-button sg-button--process" type="button" data-component="button" data-component-variant="process" data-component-state="active">
+                  Anmeldung bestätigen
+                </button>
+              </div>
+            </article>
+
+            <article
+              class="sg-card sg-card--content-card sg-card--footer-card sg-email-footer-card"
+              data-component="content-card"
+              data-component-context="email-footer"
+              data-component-variant="not-subscribed"
+              data-pattern-part="email-footer"
+              aria-label="E-Mail Footer not subscribed"
+            >
+              <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+                <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
+                  <p class="sg-body sg-text-layout-pattern__column">
+                    © 2026 Valuestockfinder<br>
+                    Im Hochrain 2<br>
+                    8102 Oberengstringen<br>
+                    Switzerland
+                  </p>
+                  <div class="sg-text-layout-pattern__column">
+                    <p class="sg-body"><a class="sg-hyperlink" href="https://valuestockfinder.com/terms/" data-component="hyperlink">Allgemeine Geschäftsbedingungen</a></p>
+                    <p class="sg-body"><a class="sg-hyperlink" href="https://valuestockfinder.com/privacypolicy/" data-component="hyperlink">Datenschutz</a></p>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </article>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</body>
+</html>

patterns/notifications.html

@@ -79,7 +79,8 @@
 
     <div class="sg-preview-area sg-notifications-pattern">
 
-      <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
+      <p class="sg-preview-label">Pattern: Notification with title - reg</p>
+      <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="reg" data-component="notification-card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
           <p class="sg-body">
             <span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
@@ -99,7 +100,8 @@
         </div>
       </article>
 
-      <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
+      <p class="sg-preview-label">Pattern: Notification with title - green</p>
+      <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="green" data-component="notification-card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
           <p class="sg-body">
             <span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
@@ -119,7 +121,29 @@
         </div>
       </article>
 
-      <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
+      <p class="sg-preview-label">Pattern: Notification with title - light green</p>
+      <article class="sg-card sg-card--notification-signal-green-light sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="light-green" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green-light sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
+          <p class="sg-body">
+            <span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
+          </p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green-light sg-notifications-pattern__text-segment" data-component-part="card-header">
+          <p class="sg-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
+          </p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green-light" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+            zum Unternehmen
+          </button>
+        </div>
+      </article>
+
+      <p class="sg-preview-label">Pattern: Notification with title - yellow</p>
+      <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="yellow" data-component="notification-card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
           <p class="sg-body">
             <span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
@@ -139,7 +163,8 @@
         </div>
       </article>
 
-      <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
+      <p class="sg-preview-label">Pattern: Notification with title - white</p>
+      <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="white" data-component="notification-card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
           <p class="sg-body">
             <span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
@@ -174,11 +199,6 @@
           </p>
         </div>
 
-        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
-          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
-            zum Unternehmen
-          </button>
-        </div>
       </article>
 
       <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
@@ -188,11 +208,6 @@
           </p>
         </div>
 
-        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
-          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
-            zum Unternehmen
-          </button>
-        </div>
       </article>
 
       <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
@@ -202,11 +217,6 @@
           </p>
         </div>
 
-        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
-          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
-            zum Unternehmen
-          </button>
-        </div>
       </article>
 
       <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
@@ -216,11 +226,6 @@
           </p>
         </div>
 
-        <div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
-          <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>

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>

patterns/page-layout-public-2-column.html

@@ -51,7 +51,7 @@
         </article>
 
         <div class="sg-page-layout-public-2-column__text-column">
-          <p class="sg-body">
+          <p class="sg-body sg-text-on-dark">
             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. Praesent eget sem vel lacus luctus blandit eu in
           </p>
         </div>

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>

patterns/public-page-patterns.html

@@ -152,6 +152,26 @@
         </div>
       </div>
 
+      <p class="sg-preview-label">pattern: CTA box left wide right</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-card--call-to-action-card--wide" data-component="call-to-action-card" data-component-variant="wide" aria-label="Call to action Card wide right">
+            <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
+              <p class="sg-body sg-call-to-action-card__text">
+                Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
+              </p>
+
+              <div class="sg-call-to-action-card__action">
+                <button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
+                  Call-to-action-Button
+                </button>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+
       <p class="sg-preview-label">pattern: CTA box right</p>
 
     <div class="sg-preview-area">
@@ -192,7 +212,130 @@
         </div>
       </div>
 
-    <p class="sg-preview-label">pattern: picture full width</p>
+      <p class="sg-preview-label">pattern: CTA small button box right wide</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-card--call-to-action-card--wide sg-call-to-action-card--align-right" data-component="call-to-action-card" data-component-variant="wide" aria-label="CTA small button box right wide">
+            <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
+              <p class="sg-body sg-call-to-action-card__text">
+                Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
+              </p>
+
+              <div class="sg-call-to-action-card__action">
+                <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+                  Link-Button aktiv
+                </button>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+
+      <p class="sg-preview-label">Pattern: Newsletter Form</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-card--call-to-action-card--three-column" data-component="call-to-action-card" data-component-variant="three-column" aria-label="Newsletter Form">
+            <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
+              <p class="sg-body sg-call-to-action-card__text">
+                Mit dem Newsletter immer über neue Inhalte informiert bleiben.
+              </p>
+
+              <div class="sg-labeled-input-row" data-component="single-line-input" data-component-state="inactive-selectable">
+                <input
+                  class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                  type="email"
+                  placeholder="E-Mail-Adresse"
+                  aria-label="E-Mail-Adresse"
+                  pattern="[^\s@]+@[^\s@]+\.[^\s@]{2,}"
+                  required
+                >
+              </div>
+
+              <div class="sg-call-to-action-card__action">
+                <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="submit" data-component="button" data-component-variant="process" data-component-state="inactive" disabled aria-disabled="true">
+                  Prozess Button
+                </button>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+
+      <script>
+        (() => {
+          const newsletterForm = document.querySelector('.sg-card--call-to-action-card--three-column');
+          if (!newsletterForm) {
+            return;
+          }
+
+          const input = newsletterForm.querySelector('input[type="email"]');
+          const processButton = newsletterForm.querySelector('.sg-button--process');
+          if (!input || !processButton) {
+            return;
+          }
+
+          const updateProcessButtonState = () => {
+            const isActive = input.checkValidity();
+            processButton.disabled = !isActive;
+            processButton.setAttribute('aria-disabled', String(!isActive));
+            processButton.setAttribute('data-component-state', isActive ? 'active' : 'inactive');
+            processButton.classList.toggle('sg-button--process-inactive', !isActive);
+          };
+
+          input.addEventListener('input', updateProcessButtonState);
+          updateProcessButtonState();
+        })();
+      </script>
+
+      <p class="sg-preview-label">pattern: Public Call to Action Box</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-public-page-pattern-call-to-action-box" data-pattern="public-call-to-action-box" aria-label="Public Call to Action Box">
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+              <ul class="sg-bullet-list">
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</li>
+                <li>Lorem ipsum dolor sit amet, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</li>
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod ut labore et dolore.</li>
+                <li>Lorem ipsum dolor sit amet, reprehenderit in voluptate velit esse cillum dolore eu fugiat.</li>
+                <li>Lorem ipsum dolor sit amet, cupidatat non proident, sunt in culpa qui officia deserunt mollit.</li>
+              </ul>
+            </div>
+            <div class="sg-card-segment sg-card-segment--body sg-public-page-pattern-call-to-action-box__action" data-component-part="card-action">
+              <button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
+                Call-to-action-Button
+              </button>
+            </div>
+          </article>
+        </div>
+      </div>
+
+      <p class="sg-preview-label">pattern: Public Call to Action Box light</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <article class="sg-card sg-card--content-card sg-public-page-pattern-call-to-action-box sg-public-page-pattern-call-to-action-box--light" data-pattern="public-call-to-action-box-light" aria-label="Public Call to Action Box light">
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+              <ul class="sg-bullet-list">
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</li>
+                <li>Lorem ipsum dolor sit amet, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</li>
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod ut labore et dolore.</li>
+                <li>Lorem ipsum dolor sit amet, reprehenderit in voluptate velit esse cillum dolore eu fugiat.</li>
+                <li>Lorem ipsum dolor sit amet, cupidatat non proident, sunt in culpa qui officia deserunt mollit.</li>
+              </ul>
+            </div>
+            <div class="sg-card-segment sg-card-segment--body sg-public-page-pattern-call-to-action-box__action" data-component-part="card-action">
+              <button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
+                Call-to-action-Button
+              </button>
+            </div>
+          </article>
+        </div>
+      </div>
+
+      <p class="sg-preview-label">pattern: picture full width</p>
 
     <div class="sg-preview-area">
       <div class="sg-content-group-box" data-component="content-group-box">

patterns/vsf-portal-header-public.html

@@ -1,283 +0,0 @@
-<!doctype html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Styleguide – Pattern VSF Portal Header Public</title>
-  <link rel="stylesheet" href="../styleguide.css">
-</head>
-<body>
-
-  <h1 class="sg-main-heading">Pattern – VSF Portal Header Public</h1>
-
-  <section id="pattern-portal-header">
-    <article class="sg-portal-header-pattern-variant" aria-label="Portal Header ohne Options Row">
-      <header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">
-        <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">ValueStockFinder</p>
-
-          <div class="sg-portal-header__menu-wrap" data-pattern-part="portal-header-action">
-            <div class="sg-tab-button-group" role="tablist" aria-label="Anmeldung" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header">
-              <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
-                Login
-              </button>
-
-              <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
-                Registrieren
-              </button>
-            </div>
-          </div>
-
-          <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">Übersicht</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">Features</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">Preise</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">Firma der Woche</button>
-          </nav>
-        </div>
-      </header>
-
-      <div class="sg-transparent-card sg-portal-header-pattern-variant__next-element" aria-label="Willkommen bei ValueStockFinder" data-component="transparent-card">
-        <h1 class="sg-heading-h1 sg-text-on-dark">Willkommen bei ValueStockFinder</h1>
-      </div>
-    </article>
-
-  </section>
-
-  <script src="../scripts/help-icon-overlays.js"></script>
-  <script>
-    document.querySelectorAll('.sg-portal-header__tabs, .sg-portal-header__menu-wrap .sg-tab-button-group').forEach((group) => {
-      group.querySelectorAll('.sg-tab-button').forEach((button) => {
-        button.addEventListener('click', () => {
-          group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
-            const isActive = otherButton === button;
-            otherButton.setAttribute('aria-selected', String(isActive));
-            otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
-          });
-        });
-      });
-    });
-
-    document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
-      const button = wrap.querySelector('.sg-sandwich-button');
-
-      button.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const nextState = wrap.dataset.open !== 'true';
-        document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
-          const otherButton = otherWrap.querySelector('.sg-sandwich-button');
-          otherWrap.dataset.open = 'false';
-          if (otherButton) {
-            otherButton.setAttribute('aria-expanded', 'false');
-          }
-        });
-        wrap.dataset.open = String(nextState);
-        button.setAttribute('aria-expanded', String(nextState));
-      });
-    });
-
-    document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
-      toggle.addEventListener('click', () => {
-        const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';
-        toggle.dataset.active = nextState;
-        toggle.dataset.componentState = nextState;
-        toggle.setAttribute(
-          'aria-label',
-          `Modus Schieber global: ${nextState === 'relative' ? 'relativ' : 'absolut'} aktiv`
-        );
-      });
-    });
-
-    const updatePulldownSelectionState = (demo) => {
-      const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
-      const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
-
-      if (!trigger || selectableOptions.length === 0) {
-        return;
-      }
-
-      const selectedCount = Array.from(selectableOptions).filter((option) => {
-        return option.getAttribute('aria-checked') === 'true';
-      }).length;
-
-      selectableOptions.forEach((option) => {
-        const optionRow = option.closest('.sg-pulldown-option');
-        if (!optionRow) {
-          return;
-        }
-
-        optionRow.classList.toggle(
-          'sg-pulldown-option--selected',
-          option.getAttribute('aria-checked') === 'true'
-        );
-      });
-
-      const labelBase = trigger.dataset.labelBase || 'Auswahl';
-
-      trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
-      trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
-      trigger.classList.toggle('sg-form-active', selectedCount > 0);
-      trigger.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
-      demo.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
-      trigger.setAttribute(
-        'aria-label',
-        selectedCount > 0 ? `Pulldown ${labelBase} mit aktiver Auswahl` : `Pulldown ${labelBase} ohne aktive Auswahl`
-      );
-    };
-
-    document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
-      const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
-
-      if (!trigger) {
-        return;
-      }
-
-      trigger.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const nextState = demo.dataset.open !== 'true';
-
-        document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
-          const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
-          otherDemo.dataset.open = 'false';
-          if (otherTrigger) {
-            otherTrigger.setAttribute('aria-expanded', 'false');
-          }
-        });
-
-        demo.dataset.align = 'left';
-        demo.dataset.open = String(nextState);
-        trigger.setAttribute('aria-expanded', String(nextState));
-
-        if (!nextState) {
-          return;
-        }
-
-        const panel = demo.querySelector('.sg-pulldown-panel');
-        if (!panel) {
-          return;
-        }
-
-        const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > window.innerWidth) {
-          demo.dataset.align = 'right';
-        }
-
-        const alignedPanelRect = panel.getBoundingClientRect();
-        if (alignedPanelRect.left < 0) {
-          demo.dataset.align = 'left';
-        }
-      });
-    });
-
-    document.querySelectorAll('.sg-checkbox-field').forEach((checkbox) => {
-      checkbox.addEventListener('click', (event) => {
-        event.stopPropagation();
-        if (checkbox.disabled) {
-          return;
-        }
-
-        const nextState = checkbox.getAttribute('aria-checked') !== 'true';
-        checkbox.setAttribute('aria-checked', String(nextState));
-
-        const pulldownDemo = checkbox.closest('.sg-pulldown-demo');
-        if (pulldownDemo) {
-          updatePulldownSelectionState(pulldownDemo);
-          pulldownDemo.dataset.open = 'true';
-          const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
-          if (trigger) {
-            trigger.setAttribute('aria-expanded', 'true');
-          }
-        }
-      });
-    });
-
-    document.querySelectorAll('.sg-pulldown-option[data-pulldown-option]').forEach((option) => {
-      option.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const pulldownDemo = option.closest('.sg-pulldown-demo');
-        if (pulldownDemo) {
-          const selectionMode = pulldownDemo.dataset.selectionMode || 'single';
-          if (selectionMode === 'multiple') {
-            const nextState = option.getAttribute('aria-checked') !== 'true';
-            option.setAttribute('aria-checked', String(nextState));
-          } else {
-            pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
-              otherOption.setAttribute('aria-checked', String(otherOption === option));
-            });
-          }
-
-          updatePulldownSelectionState(pulldownDemo);
-          const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
-          if (selectionMode === 'multiple') {
-            pulldownDemo.dataset.open = 'true';
-            if (trigger) {
-              trigger.setAttribute('aria-expanded', 'true');
-            }
-          } else {
-            pulldownDemo.dataset.open = 'false';
-            if (trigger) {
-              trigger.setAttribute('aria-expanded', 'false');
-            }
-          }
-        }
-      });
-    });
-
-    document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
-
-    window.sgInitHelpIconOverlays({
-      closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
-      outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
-    });
-
-    document.querySelectorAll('.sg-input-single-line-wrap').forEach((wrap) => {
-      const input = wrap.querySelector('.sg-input-single-line');
-      const clearButton = wrap.querySelector('.sg-input-clear-button');
-
-      if (!input || !clearButton) {
-        return;
-      }
-
-      const updateState = () => {
-        wrap.dataset.hasValue = String(input.value.length > 0);
-        wrap.dataset.componentState = input.value.length > 0 ? 'active' : 'inactive-selectable';
-      };
-
-      input.addEventListener('input', updateState);
-
-      clearButton.addEventListener('click', () => {
-        input.value = '';
-        updateState();
-        input.focus();
-      });
-
-      updateState();
-    });
-
-    document.addEventListener('click', (event) => {
-      if (!event.target.closest('.sg-sandwich-menu-wrap')) {
-        document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
-          const button = wrap.querySelector('.sg-sandwich-button');
-          wrap.dataset.open = 'false';
-          if (button) {
-            button.setAttribute('aria-expanded', 'false');
-          }
-        });
-      }
-
-      if (event.target.closest('.sg-pulldown-demo')) {
-        return;
-      }
-
-      document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
-        const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
-        demo.dataset.open = 'false';
-        if (trigger) {
-          trigger.setAttribute('aria-expanded', 'false');
-        }
-      });
-    });
-  </script>
-
-</body>
-</html>

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>
@@ -113,8 +122,8 @@
       <tbody>
         <tr><td>surface-call-to-action-card</td><td>surface-card-group</td><td>Fläche der Call-to-action-Card als dunkle Content-Card-Variante.</td></tr>
         <tr><td>text-call-to-action-card</td><td>color-font-light</td><td>Textfarbe in der Call-to-action-Card.</td></tr>
-        <tr><td>layout-call-to-action-card-width</td><td>calc(var(--dimension-public-content-width) * 0.5)</td><td>Breite der Card im Page-Layout.</td></tr>
-        <tr><td>layout-call-to-action-card-content-columns</td><td>minmax(0, 1fr) max-content</td><td>Zweispaltiges Layout mit flexibler Textspalte und Buttonspalte in Buttonbreite.</td></tr>
+        <tr><td>layout-call-to-action-card-width</td><td>calc(var(--dimension-public-content-width) * 0.5); calc(var(--dimension-public-content-width) * 0.7) in der Wide-Variante; dimension-public-content-width in der Drei-Spalten-Variante</td><td>Breite der Card im Page-Layout; die Wide-Variante nutzt 70&nbsp;% der Content-Breite und ist rechtsbündig ausgerichtet, die Drei-Spalten-Variante nutzt die volle Content-Breite.</td></tr>
+        <tr><td>layout-call-to-action-card-content-columns</td><td>minmax(0, 1fr) max-content; minmax(0, 1fr) 30% max-content in der Drei-Spalten-Variante</td><td>Zweispaltiges Standardlayout oder dreispaltiges Layout mit flexibler Textspalte, 30% Formularfeldspalte und Inhaltsbreite der Aktion; auf kleinen Viewports einspaltig.</td></tr>
         <tr><td>layout-call-to-action-card-content-gap</td><td>spacing-large</td><td>Abstand zwischen Text und Button.</td></tr>
       </tbody>
     </table>

semantic-tokens-patterns.html

@@ -21,6 +21,8 @@
         <tr><td>layout-public-page-pattern-text-picture-columns</td><td>repeat(2, minmax(0, 1fr))</td><td>Spaltenraster des Patterns <code>Pattern: text and picture right</code> mit zwei gleich breiten Spalten.</td></tr>
         <tr><td>layout-public-page-pattern-text-picture-gap</td><td>spacing-large</td><td>Spaltenabstand zwischen Text und Bild im Pattern <code>Pattern: text and picture right</code>.</td></tr>
         <tr><td>text-public-page-pattern-text-picture</td><td>color-font-light</td><td>Textfarbe des Patterns <code>Pattern: text and picture right</code>.</td></tr>
+        <tr><td>layout-public-page-pattern-call-to-action-box-width</td><td>calc(var(--dimension-public-content-width) * 0.5)</td><td>Breite der dunklen Public Call to Action Box im Public-Page-Pattern-Kontext.</td></tr>
+        <tr><td>surface-public-page-pattern-call-to-action-box-light</td><td>color-light-grey</td><td>Hintergrundfläche der Variante <code>Pattern: Public Call to Action Box light</code>.</td></tr>
       </tbody>
     </table>
 

styles/01-foundations.css

@@ -15,7 +15,9 @@
   --color-white: #FFFFFF;
   --color-process-inactive: #FFAE79;
   --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;
@@ -174,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);
@@ -186,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);
@@ -193,8 +197,10 @@
   --surface-navigation-card-body: var(--color-white);
   --surface-content-block-card-title: var(--color-light-grey);
   --surface-content-block-card-content: var(--color-white);
+  --surface-public-page-pattern-call-to-action-box-light: var(--color-light-grey);
   --radius-picture-full-width: var(--radius-card);
   --layout-content-cards-group-gap: var(--spacing-small);
+  --layout-public-page-pattern-call-to-action-box-width: calc(var(--dimension-public-content-width) * 0.5);
   --layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr));
   --layout-page-layout-public-2-column-gap: var(--spacing-large);
   --surface-card-list-drawer: var(--color-background-purple);
@@ -283,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;

styles/10-components-interactive-elements.css

@@ -147,6 +147,7 @@
       --text-button-cta: var(--color-font-light);
       height: auto;
       min-height: var(--interaction-height);
+      text-align: center;
       background: var(--surface-button-cta);
       color: var(--text-button-cta);
       padding: var(--spacing-large);

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,19 @@
   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);
+}
+
+.sg-portal-header-pattern-variant__links-card .sg-hyperlink[aria-current="page"] {
+  color: var(--text-control-default);
+  font-weight: var(--font-weight-semibold);
+}
+
 @media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
   .sg-portal-header__main {
     gap: var(--spacing-small) var(--spacing-large);

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

styles/32-patterns-card-group-keyboard-nav.css

@@ -34,7 +34,7 @@
   background: var(--surface-content-block-card-content);
 }
 
-.sg-content-block-card-group__content .sg-body {
+.sg-content-block-card-group__content > .sg-body {
   margin: 0;
 }
 

styles/37-layouts-page-layout-public.css

@@ -45,7 +45,8 @@ main {
   }
 
   .sg-page-layout-public-2-column__columns {
-    grid-template-columns: 1fr;
+    display: flex;
+    flex-direction: column;
   }
 }
 

styles/40-components-cards.css

@@ -38,6 +38,20 @@
   color: var(--color-font-light);
 }
 
+.sg-card.sg-card--content-card-green {
+  --surface-content-card-green: var(--color-signal-green);
+  --surface-card: var(--surface-content-card-green);
+  --surface-card-body: var(--surface-content-card-green);
+  --text-card-header: var(--color-font-light);
+  --text-card-body: var(--color-font-light);
+}
+
+.sg-card.sg-card--content-card-green .sg-card-segment--body,
+.sg-card.sg-card--content-card-green .sg-text-layout-pattern__column,
+.sg-card.sg-card--content-card-green .sg-body {
+  color: var(--text-card-body);
+}
+
 .sg-card.sg-card--footer-card {
   --surface-card: var(--color-black);
   --surface-card-body: var(--color-black);
@@ -130,6 +144,11 @@
   color: var(--text-card-header);
 }
 
+.sg-card-segment--signal-green-light {
+  background: var(--color-signal-green-light);
+  color: var(--text-card-header);
+}
+
 .sg-card-segment--signal-yellow {
   background: var(--color-signal-yellow);
   color: var(--text-card-header);
@@ -147,6 +166,11 @@
   --text-card-header: var(--text-card-body);
 }
 
+.sg-card.sg-card--notification-signal-green-light {
+  --text-card-header: var(--color-font-light);
+  --text-card-body: var(--color-font-light);
+}
+
 .sg-card--content-card {
   --surface-card-header-primary: var(--surface-content-block-card-title);
   --surface-card-body: var(--surface-content-block-card-content);

styles/43-components-typography.css

@@ -18,7 +18,8 @@
 
 .sg-bullet-list {
   margin: 0;
-  padding-inline-start: var(--spacing-large);
+  padding-inline-start: calc(var(--spacing-large) * 2.5);
+  list-style-position: outside;
   color: var(--text-typography-preview);
   font-family: var(--font-family-base);
   font-size: var(--font-size-base);

styles/44-components-public-page-components.css

@@ -48,6 +48,16 @@
   max-width: 100%;
 }
 
+.sg-card--call-to-action-card--three-column {
+  --layout-call-to-action-card-width: var(--dimension-public-content-width);
+  --layout-call-to-action-card-content-columns: minmax(0, 1fr) 30% max-content;
+}
+
+.sg-card--call-to-action-card--wide {
+  --layout-call-to-action-card-width: calc(var(--dimension-public-content-width) * 0.7);
+  margin-left: auto;
+}
+
 .sg-card--call-to-action-card .sg-card-segment--body {
   display: grid;
   grid-template-columns: var(--layout-call-to-action-card-content-columns);
@@ -69,6 +79,16 @@
   justify-content: flex-end;
 }
 
+.sg-card--call-to-action-card--three-column .sg-labeled-input-row {
+  min-width: 0;
+}
+
+.sg-card--call-to-action-card--three-column .sg-input-single-line {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
 .sg-call-to-action-card--align-right {
   margin-left: auto;
 }
@@ -92,4 +112,16 @@
   .sg-card--call-to-action-card {
     width: 100%;
   }
+
+  .sg-card--call-to-action-card--three-column {
+    --layout-call-to-action-card-content-columns: minmax(0, 1fr);
+  }
+
+  .sg-card--call-to-action-card--wide {
+    width: 100%;
+  }
+
+  .sg-card--call-to-action-card--three-column .sg-call-to-action-card__action {
+    justify-content: flex-end;
+  }
 }

styles/45-patterns-public-page-patterns.css

@@ -8,6 +8,35 @@
   width: 100%;
 }
 
+.sg-public-page-pattern-call-to-action-box {
+  width: var(--layout-public-page-pattern-call-to-action-box-width);
+  max-width: 100%;
+  margin-inline: auto;
+}
+
+.sg-public-page-pattern-call-to-action-box--light {
+  background: var(--surface-public-page-pattern-call-to-action-box-light);
+  color: var(--color-font-dark);
+}
+
+.sg-public-page-pattern-call-to-action-box--light
+> .sg-card-segment--body {
+  background: var(--surface-public-page-pattern-call-to-action-box-light);
+  color: var(--color-font-dark);
+}
+
+.sg-public-page-pattern-call-to-action-box--light .sg-bullet-list {
+  color: var(--color-font-dark);
+}
+
+.sg-public-page-pattern-call-to-action-box__action {
+  display: flex;
+}
+
+.sg-public-page-pattern-call-to-action-box__action .sg-button--cta {
+  width: 100%;
+}
+
 .sg-public-page-pattern-text-and-picture-right {
   --layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr));
   --layout-public-page-pattern-text-picture-gap: var(--spacing-large);
@@ -76,6 +105,12 @@
   min-width: 0;
 }
 
+.sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width {
+  width: 100%;
+  margin-inline: auto;
+  min-width: 0;
+}
+
 .sg-public-page-pattern-text-and-picture-left__text {
   grid-area: text;
   min-width: 0;
@@ -91,17 +126,17 @@
   min-width: 0;
 }
 
-.sg-public-page-pattern-text-and-picture-right__text .sg-body {
+.sg-public-page-pattern-text-and-picture-right__text > .sg-body {
   margin: 0;
   color: var(--text-public-page-pattern-text-picture);
 }
 
-.sg-public-page-pattern-text-and-picture-fullwidth__text .sg-body {
+.sg-public-page-pattern-text-and-picture-fullwidth__text > .sg-body {
   margin: 0;
   color: var(--text-public-page-pattern-text-picture);
 }
 
-.sg-public-page-pattern-text-and-picture-left__text .sg-body {
+.sg-public-page-pattern-text-and-picture-left__text > .sg-body {
   margin: 0;
   color: var(--text-public-page-pattern-text-picture);
 }
@@ -122,4 +157,12 @@
       "picture"
       "text";
   }
+
+  .sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width {
+    width: 100%;
+  }
+
+  .sg-public-page-pattern-call-to-action-box {
+    width: 100%;
+  }
 }