Scope pattern body styles to direct children

Fix CTA light body selector scope
Add green content card variant
2026-08-12 11:25:36 +02:00 · 2026-08-12 11:23:01 +02:00 · 2026-08-12 11:13:57 +02:00 · 2026-08-09 09:10:55 +02:00 · 2026-08-09 09:08:58 +02:00 · 2026-08-09 08:37:34 +02:00
31 changed files with 1408 additions and 357 deletions
@@ -105,6 +105,40 @@

  <div class="sg-preview-area">
    <article class="sg-card sg-card--content-card sg-card--content-card-dark" data-component="content-card" aria-label="Dark 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: 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">
+    <article class="sg-card sg-card--content-card sg-card--footer-card" data-component="content-card" aria-label="Footer 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">
@@ -29,6 +29,17 @@
    </div>
  </section>

+  <!-- Component: Call-to-action-Button -->
+  <section id="component-call-to-action-button">
+    <p class="sg-preview-label">Component: Call-to-action-Button</p>
+
+    <div class="sg-component-row">
+      <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>
+  </section>
+
  <!-- Component: Prozessbutton -->
  <section id="component-process-button">
    <p class="sg-preview-label">Component: Prozessbutton</p>
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Public Page Components</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body class="sg-page-public-page-components">
+
+  <h1 class="sg-main-heading">Components – Public Page Components</h1>
+
+  <div class="sg-page-layout-public__content-mirror">
+    <section id="component-content-group-box">
+      <p class="sg-preview-label">Component: Content Group Box</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box"></div>
+      </div>
+    </section>
+
+    <section id="component-text-block">
+      <p class="sg-preview-label">Component: Public Page Content left</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-text-block" data-component="text-block">
+          <p class="sg-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section id="component-call-to-action-card">
+      <p class="sg-preview-label">Component: Call to action Card</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" data-component="call-to-action-card" aria-label="Call to action Card">
+          <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>
+    </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>
+
+      <div class="sg-preview-area">
+        <img
+          class="sg-picture-full-width"
+          data-component="picture-full-width"
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXk9IjI0IDE2IiBvcGFjaXR5PSIwLjU1Ii8+PHRleHQgeD0iODAwIiB5PSI0NTAiIGZpbGw9IiNmM2Y0ZjYiIGZvbnQtZmFtaWx5PSJBcmlhbCwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjUyIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5QaWN0dXJlIGZ1bGwgd2lkdGg8L3RleHQ+PC9zdmc+"
+          alt="Platzhalterbild für die Picture Full Width Component"
+          width="1600"
+          height="900"
+        >
+      </div>
+    </section>
+  </div>
+
+</body>
+</html>
@@ -18,6 +18,11 @@
      <h1 class="sg-heading-h1" data-component-part="heading-h1">H1 Überschrift</h1>
      <h2 class="sg-heading-h2" data-component-part="heading-h2">H2 Überschrift</h2>
      <p class="sg-body" data-component-part="body-text">Body / Fließtext</p>
+      <ul class="sg-bullet-list" data-component-part="bullet-list">
+        <li>Bullet List Eintrag 1</li>
+        <li>Bullet List Eintrag 2</li>
+        <li>Bullet List Eintrag 3</li>
+      </ul>
      <p class="sg-strong" data-component-part="strong-text">Strong / hervorgehobener Text</p>
      <p class="sg-section-title" data-component-part="section-title">Section Title</p>
      <p class="sg-bar-label" data-component-part="bar-label">Bar Label</p>
@@ -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);
+}
@@ -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,8 @@
        <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>
        <tr><td>object-group-card-height</td><td>700px</td><td>Fixe Desktop-Höhe der Group Card im Pattern Object Group Card.</td></tr>
@@ -32,6 +32,7 @@
        <li><a href="./components/charts.html">Charts</a></li>
        <li><a href="./components/data-display.html">Data Display</a></li>
        <li><a href="./components/typography.html">Typography</a></li>
+        <li><a href="./components/public-page-components.html">Public Page Components</a></li>
      </ul>
    </section>

@@ -40,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>
@@ -53,6 +53,7 @@
        <li><a href="./patterns/multiselektions-pulldown.html">Multiselektions-Pulldown</a></li>
        <li><a href="./patterns/text-layouts.html">Text Layouts</a></li>
        <li><a href="./patterns/delete-confirmation-overlay.html">Overlay Card</a></li>
+        <li><a href="./patterns/public-page-patterns.html">Public Page Patterns</a></li>
      </ul>
    </section>

@@ -64,6 +65,7 @@
        <li><a href="./patterns/card-listen-seite.html">Card Listen Seite</a></li>
        <li><a href="./patterns/page-layout-app.html">Page Layout App</a></li>
        <li><a href="./patterns/page-layout-public.html">Page Layout Public</a></li>
+        <li><a href="./patterns/page-layout-public-2-column.html">Page Layout Public 2 Column</a></li>
        <li><a href="./patterns/card-listen-fundamentalanalyse-mobile.html">Card Listen Fundamentalanalyse Mobile</a></li>
      </ul>

@@ -81,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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Page Layout Public 2 Column</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body>
+
+  <h1 class="sg-main-heading">Layout – Page Layout Public 2 Column</h1>
+
+  <main aria-label="Page Layout Public 2 Column">
+    <header class="sg-portal-header sg-portal-header--auth-segment" aria-label="Public Portal Header" data-pattern="portal-header">
+      <div class="sg-portal-header__auth-row" 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>
+
+      <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>
+
+    <div class="sg-page-layout-public__content-mirror">
+      <div class="sg-page-layout-public__heading-block" aria-label="H1 Bereich">
+        <h1 class="sg-heading-h1 sg-text-on-dark">H1 Überschrift</h1>
+      </div>
+
+      <div class="sg-page-layout-public-2-column__columns">
+        <article class="sg-card sg-card--content-card sg-card--content-card-dark" data-component="content-card" aria-label="Fusszeile">
+          <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+            <p class="sg-body">
+              Footer links: Platzhaltertext fuer allgemeine Hinweise, Navigation oder Kontaktinformationen im Layout.
+            </p>
+          </div>
+        </article>
+
+        <div class="sg-page-layout-public-2-column__text-column">
+          <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>
+      </div>
+    </div>
+  </main>
+
+  <script src="../scripts/help-icon-overlays.js"></script>
+  <script>
+    document.querySelectorAll('.sg-portal-header__tabs, .sg-portal-header__auth-row .sg-tab-button-group, .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));
+      });
+    });
+
+  </script>
+
+</body>
+</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>
@@ -0,0 +1,356 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Public Page Patterns</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body class="sg-page-public-page-patterns">
+
+  <h1 class="sg-main-heading">Patterns – Public Page Patterns</h1>
+
+  <div class="sg-page-layout-public__content-mirror">
+    <section id="public-page-patterns">
+      <p class="sg-preview-label">pattern: Public Page Content left</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <div class="sg-text-block" data-component="text-block">
+            <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. Praesent eget sem vel lacus luctus blandit eu in massa.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <p class="sg-preview-label">pattern: Public Page Content right</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <div class="sg-text-block sg-text-block--align-right" data-component="text-block">
+            <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. Praesent eget sem vel lacus luctus blandit eu in massa.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <p class="sg-preview-label">Pattern: text and picture right</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <div class="sg-public-page-pattern-text-and-picture-right" data-pattern="text-and-picture-right">
+            <h2 class="sg-heading-h2">H2 Überschrift</h2>
+
+            <div class="sg-public-page-pattern-text-and-picture-right__text">
+              <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. Praesent eget sem vel lacus luctus blandit eu in massa.
+              </p>
+            </div>
+
+            <img
+              class="sg-picture-full-width"
+              data-component="picture-full-width"
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXJ5PSIyNCAxNiIgb3BhY2l0eT0iMC41NSIvPjx0ZXh0IHg9IjgwMCIgeT0iNDUwIiBmaWxsPSIjZjNmNGY2IiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI1MiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UGljdHVyZSBmdWxsIHdpZHRoPC90ZXh0Pjwvc3ZnPg=="
+              alt="Platzhalterbild für die Picture Full Width Component"
+              width="1600"
+              height="900"
+            >
+          </div>
+        </div>
+      </div>
+
+      <p class="sg-preview-label">Pattern: text and picture fullwidth</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <div class="sg-public-page-pattern-text-and-picture-fullwidth" data-pattern="text-and-picture-fullwidth">
+            <h2 class="sg-heading-h2">H2 Überschrift</h2>
+
+            <img
+              class="sg-picture-full-width"
+              data-component="picture-full-width"
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXJ5PSIyNCAxNiIgb3BhY2l0eT0iMC41NSIvPjx0ZXh0IHg9IjgwMCIgeT0iNDUwIiBmaWxsPSIjZjNmNGY2IiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI1MiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UGljdHVyZSBmdWxsIHdpZHRoPC90ZXh0Pjwvc3ZnPg=="
+              alt="Platzhalterbild für die Picture Full Width Component"
+              width="1600"
+              height="900"
+            >
+
+            <div class="sg-public-page-pattern-text-and-picture-fullwidth__text">
+              <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. Praesent eget sem vel lacus luctus blandit eu in massa.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <p class="sg-preview-label">Pattern: text and picture left</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <div class="sg-public-page-pattern-text-and-picture-left" data-pattern="text-and-picture-left">
+            <h2 class="sg-heading-h2">H2 Überschrift</h2>
+
+            <img
+              class="sg-picture-full-width"
+              data-component="picture-full-width"
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXJ5PSIyNCAxNiIgb3BhY2l0eT0iMC41NSIvPjx0ZXh0IHg9IjgwMCIgeT0iNDUwIiBmaWxsPSIjZjNmNGY2IiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI1MiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UGljdHVyZSBmdWxsIHdpZHRoPC90ZXh0Pjwvc3ZnPg=="
+              alt="Platzhalterbild für die Picture Full Width Component"
+              width="1600"
+              height="900"
+            >
+
+            <div class="sg-public-page-pattern-text-and-picture-left__text">
+              <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. Praesent eget sem vel lacus luctus blandit eu in massa.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <p class="sg-preview-label">pattern: Content Focus Box</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <article class="sg-card" data-component="basic-card">
+            <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
+              <div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig-gestacked" aria-label="Text Layout zweispaltig mobil gestacked">
+                <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column sg-text-layout-pattern__two-column--stacked-mobile" data-pattern-part="text-block-two-column-stacked-mobile">
+                  <p class="sg-body sg-text-layout-pattern__column">
+                    Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
+                  </p>
+                  <p class="sg-body sg-text-layout-pattern__column">
+                    Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+
+      <p class="sg-preview-label">pattern: CTA box left</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" data-component="call-to-action-card" aria-label="Call to action Card">
+            <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 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">
+      <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-call-to-action-card--align-right" data-component="call-to-action-card" aria-label="Call to action Card">
+          <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 small button box 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-call-to-action-card--align-right" data-component="call-to-action-card" aria-label="Call to action Card">
+            <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: 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">
+        <img
+          class="sg-picture-full-width"
+          data-component="picture-full-width"
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXk9IjI0IDE2IiBvcGFjaXR5PSIwLjU1Ii8+PHRleHQgeD0iODAwIiB5PSI0NTAiIGZpbGw9IiNmM2Y0ZjYiIGZvbnQtZmFtaWx5PSJBcmlhbCwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjUyIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5QaWN0dXJlIGZ1bGwgd2lkdGg8L3RleHQ+PC9zdmc+"
+          alt="Platzhalterbild für die Picture Full Width Component"
+          width="1600"
+          height="900"
+        >
+      </div>
+    </div>
+  </section>
+  </div>
+
+</body>
+</html>
@@ -6,31 +6,26 @@
  <title>Styleguide – Pattern Text Layouts</title>
  <link rel="stylesheet" href="../styleguide.css">
 </head>
-<body>
+<body class="sg-page-text-layouts">

  <h1 class="sg-main-heading">Pattern – Text Layouts</h1>
  <section id="pattern-text-layouts">
    <p class="sg-preview-label">Pattern: Text Layout ganze Breite</p>
    <div class="sg-text-layout-pattern" data-pattern="text-layout-ganze-breite" aria-label="Text Layout ganze Breite">
-      <div class="sg-text-layout-pattern__preview-surface">
      <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width">
        Text 100% Breite: Dieser Textblock nimmt die komplette verfügbare Breite des Containers ein und eignet sich für lineare Erklärungen, einleitende Kontexte und Fliesstext ohne Nebenspalte.
      </p>
    </div>
-    </div>

    <p class="sg-preview-label">Pattern: Text 60% Breite</p>
    <div class="sg-text-layout-pattern" data-pattern="text-layout-sechzig-prozent" aria-label="Text Layout 60 Prozent Breite">
-      <div class="sg-text-layout-pattern__preview-surface">
      <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width" data-pattern-part="text-block-sixty-width">
        Text 60% Breite: Dieser Textblock nutzt sechzig Prozent der Containerbreite und schafft dadurch bewusst mehr Luft für begleitende Inhalte wie Metriken, Visuals oder Kontextinformationen.
      </p>
    </div>
-    </div>

    <p class="sg-preview-label">Pattern: Text zweispaltig (mobil zweispaltig)</p>
    <div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig mobil zweispaltig">
-      <div class="sg-text-layout-pattern__preview-surface">
      <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">
          Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
@@ -40,11 +35,21 @@
        </p>
      </div>
    </div>
+
+    <p class="sg-preview-label">Pattern: Text zweispaltig (mobil gestacked)</p>
+    <div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig-gestacked" aria-label="Text Layout zweispaltig mobil gestacked">
+      <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column sg-text-layout-pattern__two-column--stacked-mobile" data-pattern-part="text-block-two-column-stacked-mobile">
+        <p class="sg-body sg-text-layout-pattern__column">
+          Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
+        </p>
+        <p class="sg-body sg-text-layout-pattern__column">
+          Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
+        </p>
+      </div>
    </div>

    <p class="sg-preview-label">Pattern: Dreispaltig verteilt (mobil dreispaltig)</p>
    <div class="sg-text-layout-pattern" data-pattern="text-layout-dreispaltig-verteilt" aria-label="Text Layout dreispaltig verteilt mobil dreispaltig">
-      <div class="sg-text-layout-pattern__preview-surface">
      <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" data-pattern-part="text-block-three-column-distributed">
        <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
          Linke Spalte linksbündig: Diese Spalte führt den Inhalt mit einer klaren Startkante und eignet sich für einleitende Aussagen oder Kontext, die direkt in den Lesefluss einsteigen sollen.
@@ -57,7 +62,6 @@
        </p>
      </div>
    </div>
-    </div>
  </section>

 </body>
@@ -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>
@@ -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>
@@ -84,6 +93,50 @@
    </table>
  </section>

+  <section id="semantic-public-page-components">
+    <h2 class="sg-sub-heading sg-section-h2">Public Page Components</h2>
+
+    <h3 class="sg-sub-heading sg-section-h3">Content 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>
+      <tbody>
+        <tr><td>surface-content-group-box</td><td>color-transparent</td><td>Transparente Fläche der Wrapper-Component.</td></tr>
+        <tr><td>layout-content-group-box-gap</td><td>spacing-large</td><td>Vertikaler Abstand zwischen den direkten Abschnitts-Containern innerhalb der Wrapper-Component.</td></tr>
+        <tr><td>layout-content-group-box-margin-block</td><td>spacing-large</td><td>Oberer und unterer Außenabstand der Wrapper-Component.</td></tr>
+      </tbody>
+    </table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Public Page Content left</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>surface-text-block</td><td>color-transparent</td><td>Transparente Fläche des Textblocks.</td></tr>
+        <tr><td>text-text-block</td><td>color-font-light</td><td>Standard-Textfarbe des Textblocks.</td></tr>
+        <tr><td>layout-text-block-width</td><td>dimension-public-content-width</td><td>Breite des Textblocks im Page-Layout.</td></tr>
+      </tbody>
+    </table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Call to action Card</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>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); 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>
+
+    <h3 class="sg-sub-heading sg-section-h3">Picture Full Width</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>radius-picture-full-width</td><td>radius-card</td><td>Border-Radius des Full-Width-Bildes.</td></tr>
+      </tbody>
+    </table>
+  </section>
+
  <section id="semantic-interactive">
    <h2 class="sg-sub-heading sg-section-h2">Interactive Elements</h2>

@@ -99,6 +152,16 @@
      </tbody>
    </table>

+    <h3 class="sg-sub-heading sg-section-h3">Call-to-action-Button</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>surface-button-cta</td><td>color-darkblue</td><td>Fläche des Call-to-action-Buttons.</td></tr>
+        <tr><td>text-button-cta</td><td>color-font-light</td><td>Textfarbe des Call-to-action-Buttons.</td></tr>
+        <tr><td>layout-button-cta-padding</td><td>spacing-large</td><td>Innenabstand des Call-to-action-Buttons auf allen Seiten.</td></tr>
+      </tbody>
+    </table>
+
    <h3 class="sg-sub-heading sg-section-h3">Tabs</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>surface-tab-selected</td><td>color-dark-grey</td><td>Fläche des ausgewählten Tabs.</td></tr>
@@ -30,6 +30,8 @@
      <tr><td>layout-object-card-shared-width</td><td>auto</td><td>Geteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen.</td></tr>
      <tr><td>layout-content-cards-group-gap</td><td>spacing-small</td><td>Abstand zwischen Inhaltsblock-Karten innerhalb der Gruppe.</td></tr>
      <tr><td>layout-card-list-drawer-width</td><td>dimension-card-list-drawer-width</td><td>Breite des ausziehbaren Card-Listenbereichs relativ zum Container.</td></tr>
+      <tr><td>layout-page-layout-public-2-column-columns</td><td>repeat(2, minmax(0, 1fr))</td><td>Spaltenraster des Layouts <code>Layout – Page Layout Public 2 Column</code>.</td></tr>
+      <tr><td>layout-page-layout-public-2-column-gap</td><td>spacing-large</td><td>Horizontaler Abstand zwischen den beiden Inhalts-Spalten im Layout <code>Layout – Page Layout Public 2 Column</code>.</td></tr>
    </tbody></table>

    <h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Layouts</h3>
@@ -13,6 +13,19 @@
  <section id="semantic-patterns">
    <h2 class="sg-sub-heading sg-section-h2">Patterns</h2>

+    <h3 class="sg-sub-heading sg-section-h3">Public Page Patterns</h3>
+    <table class="sg-foundation-table sg-table-label">
+      <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead>
+      <tbody>
+        <tr><td>layout-public-page-pattern-content-width</td><td>dimension-public-content-width</td><td>Gemeinsame Breite für Inhalte im Public-Page-Pattern-Kontext.</td></tr>
+        <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>
+
    <h3 class="sg-sub-heading sg-section-h3">Portal Header</h3>
    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
      <tr><td>surface-portal-header</td><td>color-darkblue</td><td>Header-Grundfläche.</td></tr>
@@ -24,3 +24,5 @@
@import "./styles/41-components-charts.css";
@import "./styles/42-components-data-display.css";
@import "./styles/43-components-typography.css";
+@import "./styles/44-components-public-page-components.css";
+@import "./styles/45-patterns-public-page-patterns.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,7 +197,12 @@
  --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);
  --text-content-block-card-title: var(--color-font-dark);
  --text-content-block-card-content: var(--color-font-dark);
@@ -280,10 +289,12 @@
  --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;
  --dimension-search-field-width: 15.3rem;
+  --dimension-public-content-width: 100%;
  --dimension-layer-pulldown-panel: 40;
  --dimension-multiselect-pulldown-panel-desktop-width: 500px;
  --dimension-options-row-mode-toggle-width: 7rem;
@@ -76,6 +76,12 @@ section + section {
  line-height: var(--line-height-base);
 }

+@media (max-width: 48rem) {
+  .sg-heading-h2 {
+    font-size: calc(var(--font-size-h2) * 0.9);
+  }
+}
+
 .sg-preview-label {
  margin: 0 0 var(--spacing-small) 0;
  font-family: var(--font-family-base);
@@ -142,6 +142,17 @@
      color: var(--text-button-process);
    }

+    .sg-button--cta {
+      --surface-button-cta: var(--color-darkblue);
+      --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);
+    }
+
    .sg-button--process-inactive {
      background: var(--surface-button-process-inactive);
      color: var(--text-button-process);
@@ -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);
@@ -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);
  }
@@ -2,20 +2,21 @@
 /* Patterns: Text Layouts                                    */
 /* ========================================================= */

+.sg-page-text-layouts {
+  background: var(--surface-form-preview);
+}
+
+.sg-page-text-layouts .sg-main-heading,
+.sg-page-text-layouts .sg-preview-label {
+  color: inherit;
+}
+
 .sg-text-layout-pattern {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
 }

-.sg-text-layout-pattern__preview-surface {
-  width: 100%;
-  box-sizing: border-box;
-  padding: var(--spacing-large);
-  border-radius: var(--radius-card);
-  background: var(--surface-text-layout-preview);
-}
-
 .sg-text-layout-pattern__sample {
  margin: 0;
 }
@@ -40,6 +41,11 @@
  column-gap: var(--layout-text-layout-column-gap);
 }

+.sg-text-layout-pattern__two-column--stacked-mobile {
+  width: 100%;
+  min-width: 0;
+}
+
 .sg-text-layout-pattern__three-column-distributed {
  width: 100%;
  min-width: 0;
@@ -73,7 +79,13 @@
  .sg-text-layout-pattern__sample--sixty-width,
  .sg-text-layout-pattern__sample--two-column,
  .sg-text-layout-pattern__two-column,
+  .sg-text-layout-pattern__two-column--stacked-mobile,
  .sg-text-layout-pattern__three-column-distributed {
    width: 100%;
  }
+
+  .sg-text-layout-pattern__two-column--stacked-mobile {
+    grid-template-columns: 1fr;
+    row-gap: var(--layout-text-layout-column-gap);
+  }
 }
@@ -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;
 }

@@ -28,6 +28,28 @@ main {
  flex: 1;
 }

+.sg-page-layout-public-2-column__columns {
+  display: grid;
+  grid-template-columns: var(--layout-page-layout-public-2-column-columns);
+  gap: var(--layout-page-layout-public-2-column-gap);
+  align-items: start;
+}
+
+.sg-page-layout-public-2-column__text-column {
+  min-width: 0;
+}
+
+@media (max-width: 48rem) {
+  .sg-page-layout-public__content-mirror {
+    width: min(calc(100% - (var(--spacing-small) * 2)), 1100px);
+  }
+
+  .sg-page-layout-public-2-column__columns {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
 .sg-page-layout-public__footer-card {
  margin-top: auto;
 }
@@ -38,6 +38,32 @@
  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);
+  margin-top: calc(var(--spacing-large) * 2);
+}
+
+.sg-card.sg-card--footer-card .sg-card-segment--body,
+.sg-card.sg-card--footer-card .sg-text-layout-pattern__column,
+.sg-card.sg-card--footer-card .sg-body {
+  color: var(--color-font-light);
+}
+
 .sg-card.sg-card--overlay-host {
  overflow: visible;
 }
@@ -118,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);
@@ -135,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);
@@ -15,3 +15,17 @@
  color: var(--text-typography-preview);
  margin-top: 0;
 }
+
+.sg-bullet-list {
+  margin: 0;
+  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);
+  line-height: var(--line-height-base);
+}
+
+.sg-bullet-list li + li {
+  margin-top: var(--spacing-small);
+}
@@ -0,0 +1,127 @@
+/* ========================================================= */
+/* Components: Public Page Components                        */
+/* ========================================================= */
+
+.sg-content-group-box {
+  --surface-content-group-box: var(--color-transparent);
+  --layout-content-group-box-gap: var(--spacing-large);
+  --layout-content-group-box-margin-block: var(--spacing-large);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  margin: var(--layout-content-group-box-margin-block) 0;
+  background: var(--surface-content-group-box);
+  gap: var(--layout-content-group-box-gap);
+}
+
+.sg-content-group-box > * {
+  margin: 0;
+}
+
+.sg-text-block {
+  --surface-text-block: var(--color-transparent);
+  --text-text-block: var(--color-font-light);
+  --layout-text-block-width: var(--dimension-public-content-width);
+  width: var(--layout-text-block-width);
+  box-sizing: border-box;
+  background: var(--surface-text-block);
+  color: var(--text-text-block);
+}
+
+.sg-text-block--align-right {
+  margin-left: auto;
+}
+
+.sg-text-block .sg-body {
+  margin: 0;
+  color: var(--text-text-block);
+}
+
+.sg-card--call-to-action-card {
+  --surface-call-to-action-card: var(--surface-card-group);
+  --text-call-to-action-card: var(--color-font-light);
+  --layout-call-to-action-card-width: calc(var(--dimension-public-content-width) * 0.5);
+  --layout-call-to-action-card-content-columns: minmax(0, 1fr) max-content;
+  --layout-call-to-action-card-content-gap: var(--spacing-large);
+  width: var(--layout-call-to-action-card-width);
+  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);
+  gap: var(--layout-call-to-action-card-content-gap);
+  align-items: center;
+  background: var(--surface-call-to-action-card);
+  color: var(--text-call-to-action-card);
+}
+
+.sg-call-to-action-card__text {
+  margin: 0;
+  min-width: 0;
+  color: var(--text-call-to-action-card);
+}
+
+.sg-call-to-action-card__action {
+  display: flex;
+  align-items: center;
+  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;
+}
+
+.sg-picture-full-width {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-picture-full-width);
+}
+
+.sg-page-public-page-components .sg-preview-area {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+@media (max-width: 48rem) {
+  .sg-text-block,
+  .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;
+  }
+}
@@ -0,0 +1,168 @@
+/* ========================================================= */
+/* Patterns: Public Page Patterns                            */
+/* ========================================================= */
+
+.sg-page-public-page-patterns .sg-preview-area {
+  display: flex;
+  flex-direction: column;
+  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);
+  --text-public-page-pattern-text-picture: var(--color-font-light);
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  grid-template-columns: var(--layout-public-page-pattern-text-picture-columns);
+  grid-template-areas:
+    "heading heading"
+    "text picture";
+  gap: var(--layout-public-page-pattern-text-picture-gap);
+  align-items: start;
+  color: var(--text-public-page-pattern-text-picture);
+}
+
+.sg-public-page-pattern-text-and-picture-fullwidth {
+  --text-public-page-pattern-text-picture: var(--color-font-light);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  gap: var(--spacing-large);
+  color: var(--text-public-page-pattern-text-picture);
+}
+
+.sg-public-page-pattern-text-and-picture-left {
+  --layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr));
+  --layout-public-page-pattern-text-picture-gap: var(--spacing-large);
+  --text-public-page-pattern-text-picture: var(--color-font-light);
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  grid-template-columns: var(--layout-public-page-pattern-text-picture-columns);
+  grid-template-areas:
+    "heading heading"
+    "picture text";
+  gap: var(--layout-public-page-pattern-text-picture-gap);
+  align-items: start;
+  color: var(--text-public-page-pattern-text-picture);
+}
+
+.sg-public-page-pattern-text-and-picture-right > .sg-heading-h2 {
+  grid-area: heading;
+  margin: 0;
+  color: var(--text-public-page-pattern-text-picture);
+}
+
+.sg-public-page-pattern-text-and-picture-fullwidth > .sg-heading-h2 {
+  margin: 0;
+  color: var(--text-public-page-pattern-text-picture);
+}
+
+.sg-public-page-pattern-text-and-picture-left > .sg-heading-h2 {
+  grid-area: heading;
+  margin: 0;
+  color: var(--text-public-page-pattern-text-picture);
+}
+
+.sg-public-page-pattern-text-and-picture-right__text {
+  grid-area: text;
+  min-width: 0;
+}
+
+.sg-public-page-pattern-text-and-picture-fullwidth__text {
+  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;
+}
+
+.sg-public-page-pattern-text-and-picture-right > .sg-picture-full-width {
+  grid-area: picture;
+  min-width: 0;
+}
+
+.sg-public-page-pattern-text-and-picture-left > .sg-picture-full-width {
+  grid-area: picture;
+  min-width: 0;
+}
+
+.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 {
+  margin: 0;
+  color: var(--text-public-page-pattern-text-picture);
+}
+
+.sg-public-page-pattern-text-and-picture-left__text > .sg-body {
+  margin: 0;
+  color: var(--text-public-page-pattern-text-picture);
+}
+
+@media (max-width: 48rem) {
+  .sg-public-page-pattern-text-and-picture-right {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "heading"
+      "picture"
+      "text";
+  }
+
+  .sg-public-page-pattern-text-and-picture-left {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "heading"
+      "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%;
+  }
+}
Author	SHA1	Message	Date
gitea_admin	0ad6f07efe	Scope pattern body styles to direct children	2026-08-12 11:25:36 +02:00
gitea_admin	ea0ef8e323	Fix CTA light body selector scope	2026-08-12 11:23:01 +02:00
gitea_admin	9d5f683557	Add green content card variant	2026-08-12 11:13:57 +02:00
gitea_admin	9ffe4d62f3	Restore intro text below email heading	2026-08-09 09:10:55 +02:00
gitea_admin	d214c21a4b	Restore black email footer with small text	2026-08-09 09:08:58 +02:00
gitea_admin	6e6d49f460	Add intro text below email heading	2026-08-09 08:37:34 +02:00
gitea_admin	4447f4c780	Add spacing above email footer card	2026-08-09 08:36:52 +02:00
gitea_admin	c7c6b34591	Apply dark content card to email footer	2026-08-09 08:35:38 +02:00
gitea_admin	7145bbd968	Apply gray segment to email footer	2026-08-09 08:34:31 +02:00
gitea_admin	239c5f8d2e	Apply light content card to email footer	2026-08-09 08:30:28 +02:00
gitea_admin	3bc4117bad	Use dark content card for email footer	2026-08-09 08:28:45 +02:00
gitea_admin	88785f6693	Set general email template page background to white	2026-08-09 08:24:59 +02:00
gitea_admin	33b1479e27	Update general email template pattern	2026-08-09 08:23:19 +02:00
gitea_admin	580ded6144	Adjust CTA wide variants to 70 percent	2026-08-07 13:05:05 +02:00
gitea_admin	6a9b3b1de3	Add full-width CTA pattern variants	2026-08-07 09:55:26 +02:00
gitea_admin	7c3b8b7c72	Remove buttons from small notifications pattern	2026-08-04 13:29:47 +02:00
gitea_admin	64272f55b5	Require email top-level domain	2026-08-03 16:57:25 +02:00
gitea_admin	51fc9b87e0	Validate newsletter email before activation	2026-08-03 16:55:29 +02:00
gitea_admin	26764625ac	Align mobile newsletter button right	2026-08-03 16:54:57 +02:00
gitea_admin	a1917120c5	Widen newsletter email field	2026-08-03 16:52:40 +02:00
gitea_admin	6cfb356cbc	Narrow newsletter email field	2026-08-03 16:51:25 +02:00
gitea_admin	63f0d01859	Fix newsletter form grid class	2026-08-03 16:50:35 +02:00
gitea_admin	3a7d744b3d	Add three-column newsletter form variant	2026-08-03 16:45:02 +02:00
gitea_admin	7151b6c669	Add newsletter form pattern	2026-08-03 16:39:45 +02:00
gitea_admin	2b175ea16e	Style active public header link	2026-07-07 14:47:04 +02:00
gitea_admin	ec00d82c43	Increase public header link spacing	2026-07-07 14:41:00 +02:00
gitea_admin	012cbfcd0e	Wrap public portal links in basic card	2026-07-07 14:39:41 +02:00
gitea_admin	1042c8449f	Use text links in public portal header	2026-07-07 14:37:03 +02:00
gitea_admin	080d65a684	Fix notification card width specificity	2026-06-29 13:13:05 +02:00
gitea_admin	7a7c40e5ec	Fix notification card width constraint	2026-06-29 13:11:14 +02:00
gitea_admin	d7f2d08a3f	Add notification object card pattern	2026-06-29 12:58:04 +02:00
gitea_admin	85f80a0e0f	Show notification variant labels in UI	2026-06-27 07:52:31 +02:00
gitea_admin	f658cfd738	Restore compatible notification pattern names	2026-06-27 07:52:05 +02:00
gitea_admin	74a8cf7840	Rename title notification pattern variants	2026-06-27 07:50:10 +02:00
gitea_admin	9844061bfa	Adjust light green foundation color	2026-06-27 07:48:44 +02:00
gitea_admin	27356b4a71	Tune light green foundation color	2026-06-27 07:48:21 +02:00
gitea_admin	328eeedf4b	Set light green notification text to white	2026-06-27 07:47:44 +02:00
gitea_admin	a161b44ff6	Add light green notification token	2026-06-27 07:47:21 +02:00
gitea_admin	2a667b4b92	Increase bullet list left indent	2026-06-26 16:24:42 +02:00
gitea_admin	e9b3cef101	Increase bullet list indentation	2026-06-26 16:21:55 +02:00
gitea_admin	a45c1d2974	Restore bullet list indentation	2026-06-26 16:15:48 +02:00
gitea_admin	3cd36d8842	Remove typography bullet indent	2026-06-26 15:50:38 +02:00
gitea_admin	12a94a503b	Fix light CTA box text contrast	2026-06-26 15:33:59 +02:00
gitea_admin	82276bb472	Add light public CTA box variant	2026-06-26 15:32:12 +02:00
gitea_admin	aa5c9d303a	Center wrapped CTA button text	2026-06-26 15:13:50 +02:00
gitea_admin	ef47af4561	Add CTA button segment to public box	2026-06-26 14:52:52 +02:00
gitea_admin	901077cfeb	Add public call to action box pattern	2026-06-26 14:47:26 +02:00
gitea_admin	2cb6214f4a	Restore fullwidth pattern image width	2026-06-25 09:33:34 +02:00
gitea_admin	d91a52ce4d	Center fullwidth pattern image	2026-06-25 09:21:44 +02:00
gitea_admin	19535784e7	Adjust fullwidth pattern image width	2026-06-25 09:20:33 +02:00
gitea_admin	63491caa74	Remove VSF Portal Header Public pattern	2026-06-25 09:13:58 +02:00
gitea_admin	9ef2a86ad6	Stack public layout columns on mobile	2026-06-24 19:56:19 +02:00
gitea_admin	7e4d92f445	Set public layout second column text light	2026-06-24 19:55:25 +02:00
gitea_admin	b6233c237a	Move public layout text to second column	2026-06-24 19:54:37 +02:00
gitea_admin	9b675916b5	Revert "Add lorem ipsum to public layout second column" This reverts commit `84a3841007`.	2026-06-24 19:54:00 +02:00
gitea_admin	84a3841007	Add lorem ipsum to public layout second column	2026-06-24 19:52:54 +02:00
gitea_admin	421bd0eafa	Keep only headline above public layout columns	2026-06-24 19:52:05 +02:00
gitea_admin	a7cb1f42d8	Keep public layout headline full width	2026-06-24 19:51:03 +02:00
gitea_admin	595cd6ec4e	Add public page layout two-column variant	2026-06-24 19:50:03 +02:00
gitea_admin	2b42e301f0	Add public page fullwidth text-picture pattern	2026-06-24 19:45:32 +02:00
gitea_admin	04565a993a	Add footer card top margin	2026-06-24 17:11:49 +02:00
gitea_admin	24d09c58d4	Add footer card variant	2026-06-24 16:52:43 +02:00
gitea_admin	3e0b2d3e1e	Adjust public layout mobile gutters	2026-06-24 16:43:06 +02:00
gitea_admin	dc6e563e05	Add public page text and picture left pattern	2026-06-24 15:49:32 +02:00
gitea_admin	382a52a3a7	Place public page pattern heading above columns	2026-06-24 15:47:33 +02:00
gitea_admin	77d69278e9	Fix public page pattern heading and image grid	2026-06-24 15:46:28 +02:00
gitea_admin	4cdb394758	Add heading to public page text and picture pattern	2026-06-24 15:44:15 +02:00
gitea_admin	57520565ef	Use picture full width component directly in public page pattern	2026-06-24 15:43:09 +02:00
gitea_admin	c51f74f215	Match public page pattern image alt to component	2026-06-24 15:36:29 +02:00
gitea_admin	5d38204c16	Make public page text and picture pattern text white	2026-06-24 15:23:00 +02:00
gitea_admin	7ea580ddb4	Add public page text and picture right pattern	2026-06-24 15:13:14 +02:00
gitea_admin	4f6456f9fb	Set CTA card width to half	2026-06-24 14:45:32 +02:00
gitea_admin	efdb027321	Set public content width to full	2026-06-24 14:43:30 +02:00
gitea_admin	6794dca728	Adjust CTA card width ratio	2026-06-24 14:36:49 +02:00
gitea_admin	67509db005	Halve CTA card width	2026-06-24 14:36:02 +02:00
gitea_admin	688307d5bb	Increase public content width	2026-06-24 14:29:18 +02:00
gitea_admin	1765d95957	Increase Content Group Box margin	2026-06-24 14:24:56 +02:00
gitea_admin	cf64ce0410	Remove Content Group Box border	2026-06-24 14:06:35 +02:00
gitea_admin	733c9c0e03	Clean up text layouts and picture radius tokens	2026-06-24 12:11:00 +02:00
gitea_admin	4b53f69891	Add radius to full width picture	2026-06-24 12:08:33 +02:00
gitea_admin	50746a365e	Wrap text layout in basic card	2026-06-24 12:06:31 +02:00
gitea_admin	230b82e2f3	Embed stacked text layout in content focus box	2026-06-24 12:05:26 +02:00
gitea_admin	833544d206	Use light page background for text layouts	2026-06-24 12:04:23 +02:00
gitea_admin	7df605aa4e	Remove preview surfaces from text layouts	2026-06-24 12:03:13 +02:00
gitea_admin	4f8e60e0ea	Add stacked mobile text layout pattern	2026-06-24 12:01:28 +02:00
gitea_admin	57874f9c37	Add content focus box pattern	2026-06-24 11:59:18 +02:00
gitea_admin	cedd1d76aa	Add CTA small button box right pattern	2026-06-24 11:56:47 +02:00
gitea_admin	c3c939f3a5	Adjust mobile H2 size	2026-06-24 11:33:37 +02:00
gitea_admin	f3347221d4	Bind public page right alignment globally	2026-06-24 11:14:02 +02:00
gitea_admin	063c8a678d	Add typography bullet list component	2026-06-24 11:05:15 +02:00
gitea_admin	749b787f53	Clean up public page component docs and alignment	2026-06-24 10:49:56 +02:00
gitea_admin	f0dbdadeae	Add picture full width pattern	2026-06-24 10:47:32 +02:00
gitea_admin	e24415d337	Remove picture component wrapper	2026-06-24 10:46:00 +02:00
gitea_admin	6887b36f8a	Add picture full width component	2026-06-24 10:45:15 +02:00
gitea_admin	8a3688c1f5	Decouple CTA right alignment from preview wrapper	2026-06-24 10:39:41 +02:00
gitea_admin	eac70d487d	Adjust public content width token	2026-06-24 10:30:29 +02:00
gitea_admin	39ed6474aa	Make public content width layout-relative	2026-06-24 10:23:26 +02:00
gitea_admin	547fe0cc1f	Add right CTA box pattern	2026-06-24 10:08:38 +02:00
gitea_admin	83b5500a23	Update public page patterns	2026-06-24 10:07:28 +02:00
gitea_admin	86592d5bc8	Fix public page content label in pattern	2026-06-24 10:01:13 +02:00
gitea_admin	2a99475091	Rename public page content component	2026-06-24 09:58:06 +02:00
gitea_admin	1824b478e4	Separate public page pattern layout from components	2026-06-24 09:57:25 +02:00
gitea_admin	2d34886338	Fix public page pattern preview width	2026-06-24 09:56:50 +02:00
gitea_admin	db690e2726	Add public page content left pattern	2026-06-24 09:55:03 +02:00
gitea_admin	8f77b40d81	Make public page components full width on mobile	2026-06-24 09:53:09 +02:00
gitea_admin	19634168db	Add public page patterns scaffold	2026-06-24 09:50:44 +02:00
gitea_admin	b88a75ef55	Add call to action card component	2026-06-24 09:47:02 +02:00
gitea_admin	a45975bd42	Add call to action button component	2026-06-24 09:40:32 +02:00
gitea_admin	6c5e555e86	Add public content width foundation token	2026-06-24 09:38:55 +02:00
gitea_admin	44e9a5b40f	Make text block text white	2026-06-24 09:36:41 +02:00
gitea_admin	ddb46dbac0	Add text block component	2026-06-24 09:35:31 +02:00
gitea_admin	98b2695d01	Clear content group box preview	2026-06-24 09:34:05 +02:00
gitea_admin	122eddbabf	Add content group box component	2026-06-24 09:32:29 +02:00
gitea_admin	bbd60cdb7e	Add public page components scaffold	2026-06-24 09:27:56 +02:00