Scope pattern body styles to direct children

This reverts commit 84a3841007.

.claude/settings.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Write",
+      "Edit",
+      "Bash"
+    ]
+  }
+}

.codex/skills/styleguide-erstellung/SKILL.md

@@ -1,144 +1,137 @@
-
 ---
-name: styleguide erstellung
-description: Verwenden für jede Weiterentwicklung oder Prüfung des zentralen Styleguides: CSS, HTML, Tokens, Components, Patterns, Layouts, Templates, Doku oder Styleguide-Struktur. Erzwingt ein kaskadierendes, portalübergreifendes Design-System ohne lokale Insellösungen, Workarounds, Hardcoded Design Values oder redundante UI-Bausteine.
+name: styleguide-erstellung
+description: Verwenden für Arbeiten am zentralen Styleguide: CSS, HTML, Foundation Tokens, semantische Tokens, Components, Patterns, Layouts, Templates, Pages, Doku oder Styleguide-Struktur. Erzwingt ein kaskadierendes, portalübergreifendes Design-System. Keine lokalen Styles, Insel-Tokens, Overrides, Workarounds, hardcoded Design Values, redundanten UI-Bausteine oder visuellen Nachbauten.
 ---
 
 # Styleguide-Erstellung
 
 ## Ziel
 
-Pflege den Styleguide als zentrales Design-System für mehrere modulare Webportale.
+Den Styleguide als zentrales Design-System für mehrere Webportale pflegen.
 
-- Core: allgemeine Foundations, semantische Tokens, Components, Patterns und Guidelines für alle Portale.
-- Portal-spezifisch: nur klar benannte Layouts/Templates/Pages, z. B. mit Portalname im Dateinamen.
-- Ergebnis: cleanes, produktionsreifes Template ohne lokale Styles, Overrides, Workarounds, Legacy-Reste oder visuelle Nachbauten.
+Zwingende Kaskade:
 
-## Kaskade
+`Foundation Tokens → semantische Tokens → Components → Patterns → Layouts → Templates/Pages → Usage Guidelines`
 
-Immer diese Ebene wählen und einhalten:
+Ergebnis muss clean, produktionsreif und frei von lokalen Insellösungen, Legacy-Resten und visuellen Nachbauten sein.
 
-```text
-Foundations → semantische Tokens → Components → Patterns → Layouts → Templates/Pages → Usage Guidelines
-```
+Downstream-Portale sollen Layout und Variation so weit wie möglich über CSS, semantische Tokens und vorhandene Bausteine lösen. HTML-Struktur nur ändern, wenn Semantik, Accessibility, Component-Grenzen oder fachliche Datenstruktur es erfordern.
 
-Regeln:
+## Token-Kaskade
 
-- Foundations sind die einzige Quelle konkreter Designwerte: Farben, Typografie, Spacing, Radius, Shadows, Motion, Breakpoints, Z-Index, Containergrößen.
-- Neue Foundation Tokens nur nach expliziter Freigabe; bestehende Foundation Tokens bevorzugt wiederverwenden.
-- Semantische Tokens sind Aliase/Kaskaden auf Foundation Tokens; nie hardcoded Design Values.
-- Components, Patterns, Layouts, Templates, Pages und HTML dürfen keine eigenen Foundation Tokens, lokalen `:root`-Blöcke oder hardcoded Design Values enthalten.
-- Jede neue/geänderte CSS-Datei muss in `styleguide.css` importiert sein; `styleguide.css` ist der einzige CSS-Einstiegspunkt.
+- Foundation Tokens sind die einzige Quelle roher Designwerte: Farben, Typografie, Spacing, Radius, Shadows, Motion, Breakpoints, Z-Index, Containergrößen.
+- Neue Foundation Tokens nur nach expliziter Freigabe; bestehende bevorzugt wiederverwenden.
+- Semantische Tokens kontextualisieren Foundation Tokens für konkrete Verwendung, z. B. Component, Pattern, Layout oder Page.
+- Semantische Tokens müssen immer auf Foundation Tokens verweisen; nie auf hardcoded Design Values.
+- Components, Patterns, Layouts, Templates, Pages und HTML dürfen keine direkten Foundation-Token-Zugriffe, lokalen `:root`-Blöcke, Insel-Tokens oder hardcoded Design Values enthalten.
+- Lokale Tokens sind nur erlaubt, wenn sie echte semantische Tokens der passenden Ebene sind, zentral in der zuständigen CSS-Datei gepflegt und über `styleguide.css` importiert werden.
+
+Technische CSS-Werte ohne Designentscheidung sind erlaubt, z. B. `display`, `position`, `overflow`, `width: 100%`, `height: auto`, `flex`, `min-width: 0`.
+
+## Core vs. Portal
+
+- Core: Foundations, globale semantische Tokens, Components und generische Patterns.
+- Portal-spezifisch: nur klar benannte Layouts, Templates oder Pages mit Portalname im Dateinamen.
+- Portal-spezifische Dateien dürfen Core-Bausteine komponieren, aber nicht duplizieren, überschreiben oder visuell nachbauen.
+- Wird eine portal-spezifische Lösung mehrfach relevant, in den Core abstrahieren.
+- Fachlogik und Dateninterpretation gehören ins jeweilige Portal/Fachmodul, nicht in den Styleguide.
 
 ## Ebenenregeln
 
-### Core vs. Portal
-
-- Foundations, globale semantische Tokens, Components und generische Patterns sind portalübergreifend.
-- Portal-spezifische Layouts/Templates/Pages dürfen Core-Bausteine komponieren, aber nicht duplizieren, überschreiben oder visuell nachbauen.
-- Portal-spezifische Dateien müssen eindeutig nach Portal benannt sein.
-- Wird eine portal-spezifische Lösung für mehrere Portale relevant, abstrahiere sie in den Core.
-- Fachliche Bedeutung oder Dateninterpretation gehört ins jeweilige Portal/owning Fachmodul, nicht in den Styleguide.
-
 ### Components
 
 - Components sind kanonische UI-Bausteine.
-- Ohne Freigabe nicht verändern: HTML, Klassen, Nesting, Semantik, Varianten.
+- Ohne Freigabe keine Änderung an HTML, Klassen, Nesting, Semantik oder Varianten.
 - Component-Internals nie von außen überschreiben.
 - Components nie visuell nachbauen.
+- Component-spezifische semantische Tokens in der zuständigen Component-Datei definieren; keine Insel-Tokens im Markup oder in Pages.
 
 ### Patterns
 
-- Patterns komponieren bestehende Components für Anwendungsfälle.
-- Erlaubt: Pattern-Klassen, Wrapper, Layout, Responsiveness.
+- Patterns komponieren bestehende Components für wiederkehrende Anwendungsfälle.
+- Erlaubt: Wrapper, Pattern-Klassen, Layout, Responsiveness.
 - Verboten: Component-Optik duplizieren, Component-Internals stylen, Components ersetzen.
-- Falls ein Pattern Component-Internals stylen müsste: stoppen und Component-Token/-Variante oder andere Architekturentscheidung vorschlagen.
+- Pattern-spezifische semantische Tokens nur für Pattern-Kontext definieren und aus Foundations ableiten.
+- Wenn ein Pattern Component-Internals stylen müsste: stoppen und Component-Token, Variante oder Architekturentscheidung vorschlagen.
 
-### Layouts und Templates/Pages
+### Layouts, Templates und Pages
 
 - Layouts regeln Struktur, Container, Raster, Anordnung und Responsiveness.
-- Templates/Pages sind reine Komposition aus Layouts, Patterns und Components.
-- Sie dürfen keine neuen Foundations, Token-Logiken, Component-Varianten, lokalen Styles oder visuellen Regeln einführen.
-
-### Dokumentation
-
-Nachführen, wenn betroffen:
-
-- `index.html` bei neuen HTML-Seiten
-- `foundations.html` bei Foundation-Änderungen
-- semantische Token-Seiten bei Token-Änderungen
-- betroffene Component-, Pattern-, Layout-, Template- oder Page-Doku
+- Templates/Pages sind Komposition aus Layouts, Patterns und Components.
+- Layout, Abstände und Varianten primär über CSS und semantische Tokens lösen, nicht über zusätzliche HTML-Struktur.
+- HTML-Struktur nur für Semantik, Accessibility, Component-Grenzen oder fachliche Datenstruktur erweitern.
+- Keine neuen Foundations, Component-Varianten, lokalen Styles, Insel-Tokens oder visuellen Regeln einführen.
 
 ## CSS-Struktur
 
-- Foundation Tokens: nur in vorgesehenen Foundation-/Base-Dateien, insbesondere `01-foundations.css` und, falls vorhanden/strukturell vorgesehen, `02-base.css`.
-- Semantische Tokens: nur in vorgesehenen zentralen Token-Bereichen oder klar zugeordneten Component-/Pattern-/Layout-/Template-Dateien; immer über `styleguide.css` importiert.
-- Components, Patterns, Layouts und Templates liegen in eigenen Dateien der passenden Ebene; keine Ebenen vermischen.
-- Neue CSS-Datei nur bei klar neuer Verantwortung; sonst bestehende Datei erweitern.
-- Portal-spezifische CSS-Dateien nur für klar abgegrenzte Layouts/Templates/Pages und mit Portalname im Dateinamen.
-- Import-Reihenfolge: Foundations/Base → globale semantische Tokens → Components → Patterns → allgemeine Layouts → portal-spezifische Layouts → allgemeine Templates/Pages → portal-spezifische Templates/Pages.
+- `styleguide.css` ist der einzige CSS-Einstiegspunkt. Jede neue/geänderte CSS-Datei muss dort importiert sein.
+- Foundation Tokens nur in vorgesehenen Foundation-/Base-Dateien, insbesondere `01-foundations.css` und ggf. `02-base.css`.
+- Semantische Tokens nur in zentralen Token-Bereichen oder in der zuständigen Component-/Pattern-/Layout-/Template-Datei.
+- Components, Patterns, Layouts und Templates liegen in Dateien der passenden Ebene; keine Ebenen vermischen.
+- Neue CSS-Dateien nur bei klar neuer Verantwortung; sonst bestehende Datei erweitern.
+- Keine verwaisten oder unimportierten CSS-Dateien stehen lassen.
+
+Import-Reihenfolge:
+
+`Foundations/Base → globale semantische Tokens → Components → Patterns → allgemeine Layouts → portal-spezifische Layouts → allgemeine Templates/Pages → portal-spezifische Templates/Pages`
 
 ## Arbeitsablauf
 
 Vor Umsetzung:
 
-1. Task-Scope bestimmen.
-2. Relevanten Code und Doku im Scope prüfen.
-3. Ebene bestimmen.
-4. Core oder portal-spezifische Erweiterung bestimmen.
-5. Bestehende Tokens, Components, Patterns, Layouts und Templates auf Wiederverwendung prüfen.
-6. Nötige Doku-Nachführung bestimmen.
-7. Bei nicht belegten Punkten Rückfrage stellen.
+1. Scope bestimmen.
+2. Relevanten Code und Doku prüfen.
+3. Richtige Ebene bestimmen.
+4. Core oder portal-spezifisch entscheiden.
+5. Bestehende Foundations, semantische Tokens, Components, Patterns, Layouts und Templates auf Wiederverwendung prüfen.
+6. Prüfen, ob Layout per CSS statt zusätzlicher HTML-Struktur lösbar ist.
+7. Betroffene Doku bestimmen.
+8. Nicht belegte Punkte nicht umsetzen; bei Bedarf Rückfrage stellen.
 
-Nicht belegte Punkte nicht umsetzen. Aussagen klassifizieren als: belegt, plausibel, nicht belegt.
+Aussagen bei Unsicherheit klassifizieren als: belegt, plausibel, nicht belegt.
+
+## Dokumentation
+
+Nachführen, wenn betroffen:
+
+- `index.html` bei neuen HTML-Seiten
+- `foundations.html` bei Foundation-Änderungen
+- Token-Doku bei semantischen Token-Änderungen
+- betroffene Component-, Pattern-, Layout-, Template- oder Page-Doku
 
 ## Verbote
 
 Nie einführen oder stehen lassen:
 
-- lokale Styles, lokale `:root`-Blöcke, lokale Token-Blöcke
+- lokale Styles, lokale `:root`-Blöcke oder lokale Token-Blöcke
+- Insel-Tokens in Components, Patterns, Layouts, Templates, Pages oder HTML
+- direkte Foundation-Token-Zugriffe außerhalb semantischer Token-Definitionen
 - hardcoded Design Values außerhalb Foundations
-- überlagernde Korrektur-Styles statt Ursachenbehebung
+- Overrides statt Ursachenbehebung
+- Workarounds, Quickfixes oder Legacy-Fehlmuster
 - visuelle Nachbauten bestehender Components/Patterns
 - portal-spezifische Duplikate von Core-Bausteinen
-- Workarounds, Quickfixes, Legacy-Fehlmuster
+- unnötige HTML-Wrapper nur für Optik/Layout
 - unimportierte oder verwaiste CSS-Dateien
 - Refactorings außerhalb Scope ohne Freigabe
 
-Technische CSS-Werte ohne Designentscheidung sind erlaubt, z. B. `display`, `position`, `overflow`, `width: 100%`, `height: auto`, `flex`, `min-width: 0`.
+## Abschluss
 
-## Selbstbereinigung vor Abschluss
+Vor Abschluss den bearbeiteten Scope aktiv bereinigen:
 
-Vor jeder Abschlussmeldung aktiv bereinigen:
-
-- lokale Insellösungen, Overrides, Workarounds, Legacy-Reste und unsaubere Zwischenlösungen im bearbeiteten Scope entfernen
-- lokale Korrekturen auf die richtige Ebene zurückführen: Foundation, semantischer Token, Component, Pattern, Layout oder Template
-- keine Aufgabe als fertig melden, solange lokale Styles, hardcoded Werte, visuelle Nachbauten, doppelte Token, unimportierte CSS-Dateien oder veraltete Doku vorhanden sind
-
-## Abschlusscheck
-
-Vor Abschluss bestätigen:
-
-- `AGENTS.md` und dieser Skill beachtet
-- richtige Ebene und Core/Portal-Zuordnung gewählt
-- Kaskade eingehalten
-- keine lokalen Styles, Overrides, Workarounds, Legacy-Reste oder hardcoded Design Values
-- neue/geänderte Foundation Tokens korrekt gepflegt und freigegeben
-- neue/geänderte semantische Tokens korrekt gepflegt, importiert und dokumentiert
-- alle relevanten CSS-Dateien in `styleguide.css` importiert
-- Components unverändert bzw. nur mit Freigabe geändert
-- Patterns bauen auf Components; Layouts/Templates/Pages bauen auf Patterns/Components
-- betroffene Doku nachgeführt
-- bearbeiteter Scope ist clean und produktionsreif
-
-## Ergebnisbericht
+- Insellösungen, Insel-Tokens, Overrides, Workarounds und Legacy-Reste entfernen.
+- lokale Korrekturen auf die richtige Ebene zurückführen: Foundation Token, semantischer Token, Component, Pattern, Layout oder Template.
+- Doku und `styleguide.css` aktualisieren.
+- sicherstellen, dass Layout-Änderungen primär über CSS und semantische Tokens gelöst sind.
+- erst fertig melden, wenn der Scope clean und produktionsreif ist.
 
 Kurz berichten:
 
-- geänderte und geprüfte Dateien
-- Ebene und Core/Portal-Einordnung
-- verwendete/ergänzte Tokens und Bausteine
+- geänderte/geprüfte Dateien
+- gewählte Ebene und Core/Portal-Zuordnung
+- verwendete oder ergänzte Foundation/semantische Tokens
+- verwendete oder ergänzte Bausteine
+- ob Layout per CSS statt Struktur gelöst wurde
 - nachgeführte Doku
-- entfernte Insellösungen/Workarounds, falls vorhanden
-- Bestätigung von Abschlusscheck und Selbstbereinigung
-- offene Punkte/Freigaben
+- entfernte Insellösungen/Workarounds
+- offene Punkte oder nötige Freigaben

components/cards.html

@@ -101,6 +101,57 @@
     </div>
   </section>
 
+  <p class="sg-preview-label">Variante: Dark Content Card</p>
+
+  <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">
+            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 sekundäre Footer-Inhalte im gleichen Raster.
+          </p>
+        </div>
+      </div>
+    </article>
+  </div>
+
   <!-- Component: Group Card -->
   <section id="component-group-card">
     <p class="sg-preview-label">Component: Group Card</p>

components/interactive-elements.html

@@ -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>
@@ -149,6 +160,46 @@
         </div>
       </div>
 
+      <div class="sg-state-example">
+        <p class="sg-state-example__label sg-table-label">form-invalid</p>
+
+        <div class="sg-labeled-input-row">
+          <span class="sg-label">Label</span>
+          <div class="sg-input-validation-stack">
+            <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-state="invalid">
+              <button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown mit Validierung" aria-invalid="true" aria-describedby="pulldown-invalid-feedback" data-component-part="pulldown-trigger">
+                Auswahl
+              </button>
+
+              <div class="sg-pulldown-panel" aria-label="Geöffnetes invalides Pulldown" data-component-part="pulldown-panel">
+                <ul class="sg-pulldown-option-list" aria-label="Verfügbare Optionen im invaliden Pulldown">
+                  <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                    <span>Menüpunkt 1</span>
+                  </li>
+
+                  <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                    <span>Menüpunkt 2</span>
+                  </li>
+
+                  <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                    <span>Menüpunkt 3</span>
+                  </li>
+
+                  <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                    <span>Menüpunkt 4</span>
+                  </li>
+
+                  <li class="sg-pulldown-option sg-pulldown-option--disabled">
+                    <span>Menüpunkt 5</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <span class="sg-form-validation-text" id="pulldown-invalid-feedback">Bitte eine gültige Auswahl treffen.</span>
+          </div>
+        </div>
+      </div>
+
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
 
@@ -181,7 +232,7 @@
               Interactive styleguide variant:
               The panel opens and closes via the pulldown button above.
               It closes when clicking outside, when another pulldown opens, or when a sandwich menu opens.
-              If the panel would overflow the viewport, it aligns from the opposite side of the trigger.
+              If the panel is wider than the trigger or would overflow the viewport, it aligns from the opposite side of the trigger.
               Cross-dependencies between pulldowns are application logic and are not defined in this component.
             -->
 
@@ -493,6 +544,19 @@
         </button>
         <span>Option nicht verfügbar</span>
       </label>
+
+      <div class="sg-state-example">
+        <p class="sg-state-example__label sg-table-label">form-invalid</p>
+        <div class="sg-input-validation-stack sg-input-validation-stack--checkbox-invalid">
+          <label class="sg-checkbox-field-option" data-component="checkbox-field" data-component-state="default">
+            <button class="sg-checkbox-field" type="button" role="checkbox" aria-checked="false" aria-label="Standard Checkbox mit Validierung" aria-invalid="true" aria-describedby="checkbox-invalid-feedback">
+              <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
+            </button>
+            <span>Standard Checkbox</span>
+          </label>
+          <span class="sg-form-validation-text" id="checkbox-invalid-feedback">Bitte mindestens eine Option auswählen.</span>
+        </div>
+      </div>
     </div>
   </section>
 
@@ -568,6 +632,30 @@
         </span>
       </label>
 
+      <div class="sg-state-example">
+        <p class="sg-state-example__label sg-table-label">form-invalid</p>
+        <div class="sg-labeled-input-row sg-labeled-input-row--radio-invalid">
+          <span class="sg-label">Label</span>
+          <span class="sg-radio-field-row">
+            <span class="sg-radio-activatable-group__choices">
+              <span class="sg-radio-activatable-group__choice">
+                <button class="sg-radio-field" type="button" role="radio" aria-checked="false" aria-label="Radio 1 mit Validierung" aria-invalid="true" aria-describedby="radio-invalid-feedback">
+                  <span class="sg-radio-field__mark" aria-hidden="true"></span>
+                </button>
+                <span>Radio 1</span>
+              </span>
+              <span class="sg-radio-activatable-group__choice">
+                <button class="sg-radio-field" type="button" role="radio" aria-checked="false" aria-label="Radio 2 mit Validierung" aria-invalid="true" aria-describedby="radio-invalid-feedback">
+                  <span class="sg-radio-field__mark" aria-hidden="true"></span>
+                </button>
+                <span>Radio 2</span>
+              </span>
+            </span>
+          </span>
+          <span class="sg-form-validation-text" id="radio-invalid-feedback">Bitte eine Option auswählen.</span>
+        </div>
+      </div>
+
       <div class="sg-checkbox-field-option sg-body" data-component="radio-field" data-component-state="default">
         <span class="sg-state-example__label sg-table-label">Variante ohne Gesamtlabel</span>
         <span class="sg-radio-field-row sg-radio-field-row--without-label">
@@ -1094,7 +1182,7 @@
 
     // Pulldown behavior: pulldown demos open their panel below the trigger.
     // Opening one closes all sandwich menus and any other open pulldown demo.
-    // If the panel would overflow the viewport, it aligns from the opposite trigger edge.
+    // If the panel is wider than the trigger or would overflow the viewport, it aligns from the opposite trigger edge.
     document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
       const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
 
@@ -1138,8 +1226,9 @@
           return;
         }
 
+        const triggerRect = trigger.getBoundingClientRect();
         const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > window.innerWidth) {
+        if (panelRect.width > triggerRect.width || panelRect.right > window.innerWidth) {
           demo.dataset.align = 'right';
         }
 

components/public-page-components.html

@@ -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>

components/typography.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>

docs/skill-styleguide-anwendung.md

@@ -1,58 +0,0 @@
-# AGENTS.md — Skill: styleguide-anwendung
-
-## Zweck
-
-Dieser Skill regelt verbindlich die fachlich korrekte Anwendung des zentralen Styleguides in konsumierenden Portalen.
-
-## Scope
-
-- Gilt nur fuer konsumierende Portal-Repositories.
-- Gilt fuer die Anwendung von Tokens, Components, Patterns, Layouts und Templates aus dem Styleguide.
-
-## Verbindliche Regeln
-
-1. Reuse first: Styleguide-Bausteine MUESSEN 1:1 angewendet werden; visuelle Nachbauten sind verboten.
-2. Components MUESSEN in Struktur, Klassenlogik und Semantik unveraendert bleiben.
-3. Wenn ein passender Baustein existiert, SIND lokale Sondervarianten und Inselloesungen verboten.
-4. Lokale Designentscheidungen ausserhalb des Styleguide-Systems sind verboten (Farben, Spacing, Typography, Radius, Shadow, States).
-5. Ueberschreibungen von Component-Internals aus dem Portal-Kontext sind verboten.
-6. Portal-spezifische Regeln sind nur zulaessig, wenn kein passender Baustein existiert, der Need fachlich belegt ist und keine Duplikation entsteht.
-7. Jede lokale Abweichung MUSS minimal, rueckbaubar, klar begruendet und auf den konkreten Portal-Kontext begrenzt sein.
-8. `public/assets/styles.css` ist read-only; manuelle Portal-Styles darin sind verboten.
-9. `public/assets/styleguide.upstream.css` ist read-only; Upstream wird nie lokal gepatcht.
-10. Eigene Portal-Styles duerfen ausschliesslich in `public/assets/styles.portal.css` gepflegt werden.
-
-## 1:1-Uebernahmepflicht (kritisch)
-
-Wenn ein Pattern oder Component aus dem Styleguide vorgegeben ist, gilt:
-
-1. HTML-Struktur wird 1:1 uebernommen (kein vereinfachtes oder umgebautes Markup).
-2. Klassenbezeichnungen werden 1:1 uebernommen (keine Umbenennungen, keine Teilmengen).
-3. Alle dokumentierten States werden umgesetzt (z. B. default, hover, focus, active, disabled, selected).
-4. Alle dokumentierten Interaktionen/Funktionalitaeten werden umgesetzt (keine Teilimplementierung).
-5. Accessibility-Merkmale werden 1:1 uebernommen (ARIA, Labels, Keyboard-Fokus, semantische Elemente).
-6. "Sinngemaesse" Nachimplementierung ist unzulaessig; erlaubt ist nur die vollstaendige Uebernahme oder eine explizit freigegebene Abweichung.
-
-## Guardrails
-
-- Keine Umgehung des Styleguides durch Inline-Styles oder seitenlokale Ad-hoc-CSS-Dateien.
-- Keine erneute Einfuehrung von Legacy-CSS-Bloecken oder lokalen Vollkopien von Styleguide-Regeln.
-- Keine Mischung von Upstream-Logik und Portal-Logik in derselben Quelldatei.
-- Konflikte mit Upstream werden nicht durch Hotfixes in Output-Dateien geloest.
-
-## Arbeitsmodus bei Aenderungen
-
-1. Zuerst pruefen: Deckt ein bestehender Styleguide-Baustein den Fall ab.
-2. Wenn ja: unveraendert uebernehmen (Pfad endet hier).
-3. Wenn nein: minimalen Portal-Zusatz in `styles.portal.css` umsetzen, ohne Component-Internals zu beruehren.
-4. Betroffene Views auf visuelle und funktionale Regressionen testen.
-5. Lokale Abweichung im Commit mit kurzer fachlicher Begruendung dokumentieren.
-
-## Abnahmekriterien
-
-- Vorhandene Styleguide-Bausteine wurden priorisiert und nicht lokal dupliziert.
-- Keine Portalregel greift in Component-Internals ein.
-- Alle lokalen Regeln sind auf das notwendige Minimum begrenzt.
-- `styles.css` und `styleguide.upstream.css` sind frei von manuellen Portal-Handedits.
-- Lokale Regeln in `styles.portal.css` sind fachlich begruendet und rueckbaubar dokumentiert.
-- Vorgegebene Patterns/Components sind in HTML, Klassen, States, Interaktionen und A11y vollstaendig 1:1 uebernommen.

docs/styleguide-integration-strategy.md

@@ -1,136 +0,0 @@
-# Integrationsstrategie Styleguide -> WebApp_Aktienberater
-
-Stand: 18. Mai 2026
-Scope: Nur Einbindungsstrategie und Migrationsvorgehen fuer CSS. Keine Frontend-Umbauten in diesem Dokument.
-
-## 1. Zielbild
-
-`public/assets/styles.css` bleibt die produktiv eingebundene Datei, wird aber kuenftig deterministisch aus zwei klar getrennten Schichten erzeugt:
-
-1. `styleguide` (upstream, read-only im Projektkontext)
-2. `portal` (lokale App-spezifische Regeln)
-
-Es gibt keine weitere manuelle Vollkopie von CSS-Bloecken in die Produktionsdatei.
-
-## 2. Aktueller Ist-Zustand (belegt)
-
-- Produktivseiten binden `public/assets/styles.css` ein.
-- Es gibt keine lokale Styleguide-Kopie mehr im Zielrepo.
-- `public/assets/styles.css` enthaelt derzeit einen Mischstand aus Styleguide-Teil plus Legacy-Teil.
-
-Konsequenz: Updates und Debugging sind aktuell fehleranfaellig, weil keine harte Trennung zwischen upstream und lokal besteht.
-
-## 3. Verbindliche Struktur (Soll)
-
-Neue Quellstruktur im Zielrepo:
-
-- `public/assets/styleguide.upstream.css`  
-  Upstream-Quelle (aus dem Styleguide-Repo uebernommen, im Zielrepo read-only behandeln)
-- `public/assets/styles.portal.css`  
-  Lokale Portal-Ergaenzungen/Overrides (einzige lokale CSS-Quelle fuer App-spezifische Abweichungen)
-- `public/assets/styles.css`  
-  Build-Output fuer Produktivbetrieb (generiert, nicht manuell gepflegt)
-
-## 4. Build-Reihenfolge (verbindlich)
-
-Die Reihenfolge ist fix:
-
-1. `public/assets/styleguide.upstream.css`
-2. `public/assets/styles.portal.css`
-3. Ausgabe nach `public/assets/styles.css`
-
-Damit gilt:
-
-- Standard liegt im Styleguide.
-- Lokale Abweichungen liegen nur im Portal-Layer.
-- Keine dritte Ebene mit ad-hoc CSS in Produktivdateien.
-
-## 5. Migrationsphasen
-
-### Phase A: Freeze und Trennung
-
-- Bestehenden Zustand einfrieren (Baseline-Commit).
-- Legacy-Abschnitte in `public/assets/styles.css` identifizieren.
-- Lokale, weiterhin benoetigte Regeln nach `public/assets/styles.portal.css` verschieben.
-
-### Phase B: Build-Einfuehrung
-
-- Build-Skript einfuehren, das die zwei Quellen in fixer Reihenfolge zusammenfuehrt.
-- `public/assets/styles.css` nur noch als Build-Output behandeln.
-
-### Phase C: Bereinigung
-
-- Doppelte `:root`-Definitionen und ueberschneidende Token schrittweise entfernen.
-- Jede entfernte Legacy-Regel gegen produktive Screens verifizieren.
-
-### Phase D: Regelbetrieb
-
-- Neue UI-Änderungen nur noch in:
-  - Styleguide-Repo (globale Patterns/Tokens) oder
-  - `styles.portal.css` (projektlokale Spezifika)
-
-## 5a. Verbindliche Migrationsreihenfolge
-
-Die Ablösung erfolgt in fester Reihenfolge:
-
-1. Login
-2. Hauptliste
-3. Detail
-4. Admin
-
-Pro Schritt gilt:
-
-- Legacy-Regeln nur fuer den jeweiligen Bereich ablösen.
-- Smoke-Test direkt nach jeder Ablösung.
-- Erst nach bestandenem Test den naechsten Bereich migrieren.
-
-## 5b. Verbindliche Exit-Kriterien (Legacy entfernt)
-
-Die Migration ist erst abgeschlossen, wenn alle Punkte erfuellt sind:
-
-1. `public/assets/styles.css` ist reiner Build-Output aus:
-   - `public/assets/styleguide.upstream.css`
-   - `public/assets/styles.portal.css`
-2. In `public/assets/styles.css` existiert kein Legacy-Blockmarker mehr:
-   - `LEGACY STYLES`
-   - `To be migrated step by step to styleguide system`
-3. Keine manuellen Produktivregeln mehr direkt in `public/assets/styles.css`.
-4. Alle weiterhin benoetigten lokalen Abweichungen liegen ausschliesslich in `public/assets/styles.portal.css`.
-5. Doppelte oder konkurrierende `:root`-Definitionen aus Legacy wurden entfernt.
-
-## 6. Update-Prozess bei Styleguide-Änderungen
-
-Ja, es braucht regulaere Updates im Zielrepo, sobald der Styleguide geaendert wurde.
-
-Minimalprozess:
-
-1. Neuen Styleguide-Stand nach `public/assets/styleguide.upstream.css` uebernehmen.
-2. `public/assets/styles.css` neu bauen.
-3. Kurztest der betroffenen Seiten (mindestens: Login, Hauptliste, Detail, Admin).
-4. Falls Konflikte auftreten: nur `styles.portal.css` anpassen, nicht upstream patchen.
-
-## 7. Guardrails
-
-- Keine manuellen Hotfixes direkt in `public/assets/styles.css`.
-- Keine Vermischung von Upstream-Regeln und Portalregeln in derselben Quelldatei.
-- Keine erneute Vollkopie alter Legacy-Bloecke.
-- Jede Portal-Abweichung braucht kurze Begruendung im Commit.
-
-## 7a. Verbindliche Abnahme-Checkliste je Migrationsschritt
-
-Vor dem Abschluss eines jeden Schritts:
-
-1. Seite rendert ohne visuelle Regressionen in den betroffenen Hauptbereichen.
-2. Interaktive Elemente bleiben funktionsfaehig (Buttons, Tabs, Filter, States).
-3. Keine neuen direkten Anpassungen in `public/assets/styles.css`.
-4. Diff zeigt nur:
-   - Upstream-Update (`styleguide.upstream.css`) und/oder
-   - lokale Portal-Regeln (`styles.portal.css`) und Build-Output.
-5. Commit-Text dokumentiert kurz, welcher Legacy-Abschnitt abgeloest wurde.
-
-## 8. Verantwortungsgrenze
-
-- Styleguide-Repo: Design-System-Wahrheit (Tokens, Components, Patterns).
-- WebApp_Aktienberater: Integration, lokale Komposition, produktive Einbindung.
-
-Damit bleibt das System updatefaehig und driftarm, ohne laufende Frontend-Umsetzung zu blockieren.

email-styleguide.css

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

foundations.html

@@ -30,7 +30,9 @@
         <tr><td>black</td><td>#000000</td><td>Neutrale Vollton-Overlay-Farbe für starke visuelle Deaktivierung von Hintergrundobjekten.</td></tr>
         <tr><td>white</td><td>#FFFFFF</td><td>Standardfläche von Buttons, Eingabefeldern, Pulldown-Triggern, Checkboxen, Radios, Toggle-Tracks und Card-Trennern.</td></tr>
         <tr><td>signal-green</td><td>#009101</td><td>Positive Score-Balken und positive Chart-Werte.</td></tr>
+        <tr><td>signal-green-light</td><td>#65A665</td><td>Hellgrüne Variante für positive Signal- und Notification-Flächen.</td></tr>
         <tr><td>signal-yellow</td><td>#9C7A00</td><td>Neutrale Score-Balken, neutrale Chart-Werte und Warnwerte in Tabellen.</td></tr>
+        <tr><td>ampel-hellgelb</td><td>#D3B962</td><td>Untersegmente in der Pattern-Notification-Variante der Object Card.</td></tr>
         <tr><td>signal-red</td><td>#9B3B2F</td><td>Negative Score-Balken und negative Chart-Werte.</td></tr>
         <tr><td>font-dark</td><td>#414959</td><td>Standard-Schrift auf hellen Flächen, Achsen/Marker in Charts, Sandwich-Linien und Radio-Markierung.</td></tr>
         <tr><td>font-light</td><td>#FFFFFF</td><td>Schrift auf dunklen Flächen, Portalheader, Card-Headern, Prozessbuttons und ausgewählten Tab-Buttons.</td></tr>
@@ -77,8 +79,8 @@
       <tbody>
         <tr><td>body</td><td>Open Sans, 1rem, Regular</td><td>Standardtext im Portal.</td></tr>
         <tr><td>brand</td><td>Open Sans, 1.6rem, Regular</td><td>Portal-Brand im Portal Header.</td></tr>
-        <tr><td>h1</td><td>Open Sans, 1.5rem, Regular</td><td>Hauptüberschriften; kleiner als Portal-Brand und 50% größer als Fließtext.</td></tr>
-        <tr><td>h2</td><td>Open Sans, 1.25rem, Regular</td><td>Zwischenüberschriften; kleiner als H1 und 25% größer als Fließtext.</td></tr>
+        <tr><td>h1</td><td>Open Sans, 1.8rem, Regular</td><td>Hauptüberschriften; kleiner als Portal-Brand und 80% größer als Fließtext.</td></tr>
+        <tr><td>h2</td><td>Open Sans, 1.5rem, Regular</td><td>Zwischenüberschriften; kleiner als H1 und 50% größer als Fließtext.</td></tr>
         <tr><td>strong</td><td>Open Sans, 1rem, Semibold</td><td>Hervorgehobener Text, Labels und Button-Text.</td></tr>
         <tr><td>section-title</td><td>Open Sans, 1rem, Regular</td><td>Section-Titel; aktuell identisch mit body, aber separat benannt.</td></tr>
         <tr><td>bar-label</td><td>Open Sans, 1rem, Semibold</td><td>Labels bei Score-Balken.</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>

index.html

@@ -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>

patterns/general-email-template.html

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

patterns/notifications.html

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

patterns/object-card.html

@@ -159,6 +159,24 @@
         </div>
       </article>
     </div>
+
+    <h2 class="sg-sub-heading sg-section-h2">Notification</h2>
+    <p class="sg-preview-label">Pattern: Notification</p>
+    <p class="sg-body">Hinweis: Diese Variante basiert auf Object Card Content Basic, ist auf 50% Breite ausgelegt und nutzt hellgelbe Untersegmente.</p>
+
+    <article class="sg-card sg-object-card sg-object-card--content-basic sg-object-card--notification" data-pattern="object-card-notification" aria-label="Notification Card">
+      <header class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-object-card__header" data-pattern-part="object-card-notification-header">
+        <div class="sg-strong">Benachrichtigung</div>
+      </header>
+      <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-notification-content">
+        <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Donec vitae sapien ut libero venenatis faucibus.</p>
+      </div>
+      <footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-notification-actions">
+        <div class="sg-object-card__actions sg-notification-card__actions">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button">Verstanden</button>
+        </div>
+      </footer>
+    </article>
   </section>
 
   <script>

patterns/options-row.html

@@ -264,13 +264,14 @@
           return;
         }
 
+        const triggerRect = trigger.getBoundingClientRect();
         const panel = demo.querySelector('.sg-pulldown-panel');
         if (!panel) {
           return;
         }
 
         const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > window.innerWidth) {
+        if (panelRect.width > triggerRect.width || panelRect.right > window.innerWidth) {
           demo.dataset.align = 'right';
         }
 

patterns/page-layout-basic.html

@@ -1,312 +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 – Page Layout Basic</title>
-  <link rel="stylesheet" href="../styleguide.css">
-</head>
-<body>
-
-  <h1 class="sg-main-heading">Layout – Page Layout Basic</h1>
-
-  <main aria-label="Page Layout Basic">
-    <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 sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
-          <button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
-            <span class="sg-sandwich-button__icon" aria-hidden="true">
-              <span class="sg-sandwich-button__line"></span>
-              <span class="sg-sandwich-button__line"></span>
-              <span class="sg-sandwich-button__line"></span>
-            </span>
-          </button>
-
-          <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-            <a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
-            <a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
-          </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="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
-          <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Titel</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">Gruppen</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">Listen</button>
-        </nav>
-      </div>
-    </header>
-
-    <div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
-      <div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
-        <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
-          <button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Sortierung" data-component-part="pulldown-trigger" data-label-base="Sortierung">
-            Sortierung
-          </button>
-
-          <div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Sortierung" data-component-part="pulldown-panel">
-            <ul class="sg-pulldown-option-list" aria-label="Sortierungsoptionen">
-              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
-                <span>Menüpunkt 1</span>
-              </li>
-              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
-                <span>Menüpunkt 2</span>
-              </li>
-              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
-                <span>Menüpunkt 3</span>
-              </li>
-              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
-                <span>Menüpunkt 4</span>
-              </li>
-              <li class="sg-pulldown-option sg-pulldown-option--disabled">
-                <span>Menüpunkt 5</span>
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
-          <button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Region" data-component-part="pulldown-trigger" data-label-base="Region">
-            Region
-          </button>
-
-          <div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Region" data-component-part="pulldown-panel">
-            <ul class="sg-pulldown-option-list" aria-label="Regionsoptionen">
-              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
-                <span>Menüpunkt 1</span>
-              </li>
-              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
-                <span>Menüpunkt 2</span>
-              </li>
-              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
-                <span>Menüpunkt 3</span>
-              </li>
-              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
-                <span>Menüpunkt 4</span>
-              </li>
-              <li class="sg-pulldown-option sg-pulldown-option--disabled">
-                <span>Menüpunkt 5</span>
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        <div class="sg-search-field-row">
-          <span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
-            <input
-              class="sg-interaction-element sg-input-single-line"
-              type="text"
-              placeholder="Suche"
-              aria-label="Suche"
-            >
-            <button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
-          </span>
-          <span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
-        </div>
-      </div>
-
-      <div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
-        <button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
-          <span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
-
-          <span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
-            <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
-          </span>
-
-          <span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
-        </button>
-
-        <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="options-row">
-          <button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button>
-
-          <span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
-          </span>
-        </span>
-      </div>
-    </div>
-
-    <div class="sg-transparent-card sg-page-layout-basic__heading-block" aria-label="H1 Bereich" data-component="transparent-card">
-      <h1 class="sg-heading-h1 sg-text-on-dark">H1 Überschrift</h1>
-      <p class="sg-body">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum.
-      </p>
-    </div>
-
-    <div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
-      <div class="sg-group-card__header-row">
-        <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Seiteninhalt</h2>
-      </div>
-
-      <article class="sg-card" data-component="card" data-component-context="group-card">
-        <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
-          <div class="sg-strong">Inhalt</div>
-        </div>
-
-        <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
-          <p class="sg-body">
-            Zeile 01<br>
-            Zeile 02<br>
-            Zeile 03<br>
-            Zeile 04<br>
-            Zeile 05<br>
-            Zeile 06<br>
-            Zeile 07<br>
-            Zeile 08<br>
-            Zeile 09<br>
-            Zeile 10<br>
-            Zeile 11<br>
-            Zeile 12<br>
-            Zeile 13<br>
-            Zeile 14<br>
-            Zeile 15<br>
-            Zeile 16<br>
-            Zeile 17<br>
-            Zeile 18<br>
-            Zeile 19<br>
-            Zeile 20<br>
-            Zeile 21<br>
-            Zeile 22<br>
-            Zeile 23<br>
-            Zeile 24<br>
-            Zeile 25<br>
-            Zeile 26<br>
-            Zeile 27<br>
-            Zeile 28<br>
-            Zeile 29<br>
-            Zeile 30
-          </p>
-        </div>
-      </article>
-    </div>
-  </main>
-
-  <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');
-
-      if (!button) {
-        return;
-      }
-
-      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));
-      });
-    });
-
-    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));
-        updatePulldownSelectionState(demo);
-      });
-
-      demo.querySelectorAll('[data-pulldown-option]').forEach((option) => {
-        option.addEventListener('click', (event) => {
-          event.stopPropagation();
-          const nextChecked = option.getAttribute('aria-checked') !== 'true';
-          option.setAttribute('aria-checked', String(nextChecked));
-          updatePulldownSelectionState(demo);
-        });
-      });
-
-      updatePulldownSelectionState(demo);
-    });
-
-    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`
-        );
-      });
-    });
-  </script>
-
-</body>
-</html>

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

@@ -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>

patterns/page-layout-public.html

@@ -37,23 +37,25 @@
     </header>
 
     <div class="sg-page-layout-public__content-mirror">
-      <div class="sg-transparent-card sg-page-layout-public__heading-block" aria-label="H1 Bereich" data-component="transparent-card">
+      <div class="sg-page-layout-public__heading-block" aria-label="H1 Bereich">
         <h1 class="sg-heading-h1 sg-text-on-dark">H1 Überschrift</h1>
-        <p class="sg-body sg-text-layout-pattern__sample">
+        <p class="sg-body sg-text-on-dark sg-text-layout-pattern__sample">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum.
         </p>
       </div>
 
-      <div class="sg-text-layout-pattern__preview-surface sg-page-layout-public__footer-card" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig mobil zweispaltig">
-        <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 sekundäre Footer-Inhalte im gleichen Raster.
-          </p>
+      <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-page-layout-public__footer-card" data-component="content-card" aria-label="Fusszeile">
+        <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 sekundäre Footer-Inhalte im gleichen Raster.
+            </p>
+          </div>
         </div>
-      </div>
+      </article>
     </div>
   </main>
 

patterns/portal-header.html

@@ -69,7 +69,7 @@
       </p>
 
       <p class="sg-table-label sg-text-on-dark">
-        Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Navigationstasten in einer eigenen Zeile darunter.
+        Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Hauptmenüpunkte in einer eigenen Basic Card darunter.
       </p>
 
       <article class="sg-portal-header-pattern-variant" aria-label="Public Portal Header ohne Options Row">
@@ -92,16 +92,20 @@
 
           <div class="sg-portal-header__main" data-pattern-part="portal-header-main">
             <p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">Portalname</p>
-
-            <nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
-              <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Inhalt 1</button>
-              <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Inhalt 2</button>
-              <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Inhalt 3</button>
-              <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Inhalt 4</button>
-            </nav>
           </div>
         </header>
 
+        <article class="sg-card sg-portal-header-pattern-variant__links-card" data-component="basic-card" aria-label="Hauptnavigation">
+          <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
+            <nav class="sg-portal-header__tabs" aria-label="Hauptnavigation" data-pattern-part="portal-header-navigation">
+              <a class="sg-hyperlink" href="#" aria-current="page" data-component="hyperlink">Inhalt 1</a>
+              <a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 2</a>
+              <a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 3</a>
+              <a class="sg-hyperlink" href="#" data-component="hyperlink">Inhalt 4</a>
+            </nav>
+          </div>
+        </article>
+
         <p class="sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark">
           Nächstes Element (Abstand nach unten: spacing-large)
         </p>

patterns/public-page-patterns.html

@@ -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 fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlä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 Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen fü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>

patterns/text-layouts.html

@@ -6,56 +6,60 @@
   <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 verfügbare Breite des Containers ein und eignet sich für lineare Erklärungen, einleitende Kontexte und Fliesstext ohne Nebenspalte.
-        </p>
-      </div>
+      <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 verfügbare Breite des Containers ein und eignet sich für lineare Erklärungen, einleitende Kontexte und Fliesstext ohne Nebenspalte.
+      </p>
     </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 für begleitende Inhalte wie Metriken, Visuals oder Kontextinformationen.
-        </p>
-      </div>
+      <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 für begleitende Inhalte wie Metriken, Visuals oder Kontextinformationen.
+      </p>
     </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 fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlä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 Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
-          </p>
-        </div>
+      <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 fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlä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 Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
+        </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 fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlä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 Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen fü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.
-          </p>
-          <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
-            Mittlere Spalte mittelachsig: Diese Spalte zentriert den Text auf der Mittelachse und eignet sich für vergleichende Kernaussagen, die visuell als Schwerpunkt zwischen den Randspalten stehen sollen.
-          </p>
-          <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
-            Rechte Spalte rechtsbündig: Diese Spalte schließt den Abschnitt mit einer klaren Endkante ab und eignet sich für ergänzende Hinweise oder abschließende Perspektiven im gleichen Inhaltsblock.
-          </p>
-        </div>
+      <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.
+        </p>
+        <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
+          Mittlere Spalte mittelachsig: Diese Spalte zentriert den Text auf der Mittelachse und eignet sich für vergleichende Kernaussagen, die visuell als Schwerpunkt zwischen den Randspalten stehen sollen.
+        </p>
+        <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
+          Rechte Spalte rechtsbündig: Diese Spalte schließt den Abschnitt mit einer klaren Endkante ab und eignet sich für ergänzende Hinweise oder abschließende Perspektiven im gleichen Inhaltsblock.
+        </p>
       </div>
     </div>
   </section>

patterns/vsf-meldungen.html

@@ -202,7 +202,7 @@
 
           <div class="sg-navigation-card-layout sg-navigation-card-block">
             <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
-              <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+              <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
                 <div class="sg-navigation-card-center">
                   <a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
                 </div>
@@ -272,7 +272,7 @@
 
           <div class="sg-navigation-card-layout sg-navigation-card-block">
             <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
-              <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+              <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
                 <div class="sg-navigation-card-center">
                   <a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
                 </div>
@@ -342,7 +342,7 @@
 
           <div class="sg-navigation-card-layout sg-navigation-card-block">
             <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
-              <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+              <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
                 <div class="sg-navigation-card-center">
                   <a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
                 </div>
@@ -402,7 +402,7 @@
 
               <div class="sg-navigation-card-layout sg-navigation-card-block">
                 <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
-                  <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+                  <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
                     <div class="sg-navigation-card-center">
                       <a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
                     </div>
@@ -452,7 +452,7 @@
 
               <div class="sg-navigation-card-layout sg-navigation-card-block">
                 <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
-                  <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+                  <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
                     <div class="sg-navigation-card-center">
                       <a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
                     </div>
@@ -502,7 +502,7 @@
 
               <div class="sg-navigation-card-layout sg-navigation-card-block">
                 <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
-                  <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+                  <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
                     <div class="sg-navigation-card-center">
                       <a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
                     </div>
@@ -624,13 +624,14 @@
           return;
         }
 
+        const triggerRect = trigger.getBoundingClientRect();
         const panel = demo.querySelector('.sg-pulldown-panel');
         if (!panel) {
           return;
         }
 
         const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > window.innerWidth) {
+        if (panelRect.width > triggerRect.width || panelRect.right > window.innerWidth) {
           demo.dataset.align = 'right';
         }
 

patterns/vsf-portal-header-public.html

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

semantic-tokens-components.html

@@ -62,6 +62,15 @@
       </tbody>
     </table>
 
+    <h3 class="sg-sub-heading sg-section-h3">Notification</h3>
+    <table class="sg-foundation-table sg-table-label">
+      <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
+      <tbody>
+        <tr><td>layout-notification-card-width</td><td>dimension-notification-card-width</td><td>Breite der Notification Card im Pattern Notification relativ zum übergeordneten Layout.</td></tr>
+        <tr><td>surface-notification-card-lower-segment</td><td>color-ampel-hellgelb</td><td>Fläche der unteren Segmente in der Notification-Variante der Object Card.</td></tr>
+      </tbody>
+    </table>
+
     <h3 class="sg-sub-heading sg-section-h3">Text Group Box</h3>
     <table class="sg-foundation-table sg-table-label">
       <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
@@ -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>

semantic-tokens-layouts.html

@@ -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>

semantic-tokens-patterns.html

@@ -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>

styleguide.css

@@ -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";

styles/01-foundations.css

@@ -15,7 +15,9 @@
   --color-white: #FFFFFF;
   --color-process-inactive: #FFAE79;
   --color-signal-green: #009101;
+  --color-signal-green-light: #65A665;
   --color-signal-yellow: #9C7A00;
+  --color-ampel-hellgelb: #D3B962;
   --color-signal-red: #9B3B2F;
   --color-font-dark: #414959;
   --color-font-light: #FFFFFF;
@@ -174,6 +176,7 @@
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
   --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
   --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
+  --layout-notification-card-width: var(--dimension-notification-card-width);
   --dimension-notifications-card-min-width: 445px;
   --layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
   --layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
@@ -186,6 +189,7 @@
   --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
   --layout-object-group-card-height: var(--dimension-object-group-card-height);
   --surface-object-card-lower-segment: var(--color-white);
+  --surface-notification-card-lower-segment: var(--color-ampel-hellgelb);
   --text-company-card-data-negative: var(--chart-value-negative);
   --text-company-card-moat-neutral: var(--chart-value-neutral);
   --layout-company-card-analysis-gap-after-moat: var(--spacing-large);
@@ -193,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);
@@ -233,8 +242,8 @@
   --font-size-base: 1rem;
   --font-size-small: 0.8rem;
   --font-size-brand: 1.6rem;
-  --font-size-h1: 1.5rem;
-  --font-size-h2: 1.25rem;
+  --font-size-h1: 1.8rem;
+  --font-size-h2: 1.5rem;
   --font-weight-regular: 400;
   --font-weight-semibold: 600;
   --line-height-base: 1.5;
@@ -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;

styles/02-base.css

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

styles/10-components-interactive-elements.css

@@ -101,7 +101,25 @@
     }
 
     .sg-interaction-element:focus,
-    .sg-interaction-element:focus-visible {
+    .sg-interaction-element:focus-visible,
+    .sg-mode-toggle:focus,
+    .sg-mode-toggle:focus-visible,
+    .sg-sandwich-button:focus,
+    .sg-sandwich-button:focus-visible,
+    .sg-input-clear-button:focus,
+    .sg-input-clear-button:focus-visible,
+    .sg-help-icon:focus,
+    .sg-help-icon:focus-visible,
+    .sg-sandwich-menu-link:focus,
+    .sg-sandwich-menu-link:focus-visible,
+    .sg-checkbox-field:focus,
+    .sg-checkbox-field:focus-visible,
+    .sg-radio-field:focus,
+    .sg-radio-field:focus-visible,
+    .sg-pulldown-option:focus,
+    .sg-pulldown-option:focus-visible,
+    .sg-hyperlink:focus,
+    .sg-hyperlink:focus-visible {
       outline: none;
     }
 
@@ -124,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);
@@ -407,10 +436,44 @@
       box-shadow: 0 0 0 1px var(--color-signal-red) inset;
     }
 
+    .sg-pulldown[aria-invalid="true"],
+    .sg-checkbox-field[aria-invalid="true"],
+    .sg-radio-field[aria-invalid="true"] {
+      box-shadow: 0 0 0 1px var(--color-signal-red) inset;
+    }
+
     .sg-labeled-input-row:has(.sg-input-multi-line) {
       align-items: flex-start;
     }
 
+    #component-radio-field .sg-labeled-input-row--radio-invalid {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      column-gap: var(--spacing-large);
+      row-gap: var(--spacing-small);
+      align-items: start;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-label {
+      grid-column: 1;
+      grid-row: 1;
+      margin-right: 0;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-radio-field-row {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-form-validation-text {
+      grid-column: 1 / -1;
+      grid-row: 2;
+    }
+
+    #component-checkbox-field .sg-input-validation-stack--checkbox-invalid {
+      gap: 0;
+    }
+
     .sg-input-multi-line {
       box-sizing: border-box;
       min-height: calc(var(--interaction-height) * 2.75);
@@ -619,11 +682,6 @@
       cursor: pointer;
     }
 
-    .sg-mode-toggle:focus,
-    .sg-mode-toggle:focus-visible {
-      outline: none;
-    }
-
     .sg-mode-toggle__label {
       font-family: var(--font-family-base);
       font-size: var(--font-size-base);

styles/20-patterns-portal-header.css

@@ -53,6 +53,10 @@
 
 .sg-portal-header__tabs {
   grid-area: tabs;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-small);
   width: 100%;
 }
 
@@ -77,6 +81,19 @@
   margin-top: var(--spacing-large);
 }
 
+.sg-portal-header-pattern-variant__links-card {
+  margin-top: var(--spacing-small);
+}
+
+.sg-portal-header-pattern-variant__links-card .sg-portal-header__tabs {
+  gap: var(--spacing-large);
+}
+
+.sg-portal-header-pattern-variant__links-card .sg-hyperlink[aria-current="page"] {
+  color: var(--text-control-default);
+  font-weight: var(--font-weight-semibold);
+}
+
 @media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
   .sg-portal-header__main {
     gap: var(--spacing-small) var(--spacing-large);

styles/22-patterns-object-card.css

@@ -77,6 +77,18 @@
   height: auto;
 }
 
+.sg-card.sg-object-card--notification {
+  width: var(--layout-notification-card-width);
+  min-width: 0;
+  max-width: none;
+  height: auto;
+  --surface-object-card-lower-segment: var(--surface-notification-card-lower-segment);
+}
+
+.sg-notification-card__actions {
+  justify-content: flex-end;
+}
+
 .sg-object-card-content-basic {
   margin-top: var(--layout-content-card-margin-top-desktop);
 }
@@ -88,6 +100,12 @@
     max-width: none;
   }
 
+  .sg-card.sg-object-card--notification {
+    width: var(--layout-object-card-mobile-width);
+    min-width: 0;
+    max-width: none;
+  }
+
   .sg-object-card-content-basic {
     margin-top: var(--layout-content-card-margin-top-mobile);
   }

styles/25-patterns-form-sections.css

@@ -41,7 +41,7 @@
 }
 
 .sg-form-sections-card__chapter + .sg-form-sections-card__chapter {
-  margin-top: var(--spacing-large);
+  margin-top: calc(var(--spacing-large) * 2);
 }
 
 .sg-form-sections-card__chapter-title,

styles/31-patterns-text-layouts.css

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

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

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

styles/36-layouts-page-layout-basic.css

@@ -1,8 +0,0 @@
-/* ========================================================= */
-/* Layouts: Page Layout Basic                                */
-/* ========================================================= */
-
-.sg-page-layout-basic__heading-block {
-  margin-top: var(--spacing-large);
-  margin-bottom: var(--spacing-large);
-}

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

@@ -15,12 +15,12 @@ main {
 }
 
 .sg-page-layout-public__heading-block {
-  margin-top: var(--spacing-large);
+  margin-top: calc(var(--spacing-large) * 2);
   margin-bottom: var(--spacing-large);
 }
 
 .sg-page-layout-public__content-mirror {
-  width: 70vw;
+  width: min(calc(100% - (var(--spacing-large) * 2)), 1100px);
   max-width: 1100px;
   margin-inline: auto;
   display: flex;
@@ -28,7 +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;
-  background: var(--surface-card-group);
 }

styles/40-components-cards.css

@@ -23,6 +23,47 @@
   background: var(--surface-card);
 }
 
+.sg-card.sg-card--content-card-dark {
+  --surface-card: var(--surface-card-group);
+  --surface-card-body: var(--surface-card-group);
+  --text-card-body: var(--text-card-header);
+}
+
+.sg-card.sg-card--content-card-dark .sg-card-segment--body {
+  color: var(--color-font-light);
+}
+
+.sg-card.sg-card--content-card-dark .sg-text-layout-pattern__column,
+.sg-card.sg-card--content-card-dark .sg-body {
+  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;
 }
@@ -103,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);
@@ -120,6 +166,11 @@
   --text-card-header: var(--text-card-body);
 }
 
+.sg-card.sg-card--notification-signal-green-light {
+  --text-card-header: var(--color-font-light);
+  --text-card-body: var(--color-font-light);
+}
+
 .sg-card--content-card {
   --surface-card-header-primary: var(--surface-content-block-card-title);
   --surface-card-body: var(--surface-content-block-card-content);

styles/43-components-typography.css

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

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

@@ -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;
+  }
+}

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

@@ -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%;
+  }
+}