From 07e4253d367b2b6a68fb8864906801462caeeea2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 18 Jun 2026 10:48:09 +0200
Subject: [PATCH] Sync styleguide 2026.05.18.1

---
 docs/styleguide/foundations.html              |   2 +
 docs/styleguide/index.html                    |   1 +
 docs/styleguide/patterns/object-card.html     |  14 +
 docs/styleguide/patterns/page-layout-app.html | 312 ++++++++++++++++++
 docs/styleguide/patterns/portal-header.html   |  51 ++-
 .../semantic-tokens-components.html           |   2 +
 docs/styleguide/styleguide.css                |   1 +
 docs/styleguide/styles/01-foundations.css     |   4 +
 .../styles/20-patterns-portal-header.css      |  16 +
 .../styles/22-patterns-object-card.css        |  22 ++
 .../styles/30-layouts-card-list-page.css      |   4 +-
 .../styles/36-layouts-page-layout-app.css     |   8 +
 public/assets/styleguide.upstream.css         |  53 ++-
 public/assets/styleguide.upstream.meta.json   |   4 +-
 public/assets/styles.css                      |  53 ++-
 15 files changed, 540 insertions(+), 7 deletions(-)
 create mode 100644 docs/styleguide/patterns/page-layout-app.html
 create mode 100644 docs/styleguide/styles/36-layouts-page-layout-app.css

diff --git a/docs/styleguide/foundations.html b/docs/styleguide/foundations.html
index 79eb4f1..06e9f46 100644
--- a/docs/styleguide/foundations.html
+++ b/docs/styleguide/foundations.html
@@ -155,6 +155,8 @@
         <tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
         <tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
         <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>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>
diff --git a/docs/styleguide/index.html b/docs/styleguide/index.html
index e0bf853..4d74d7d 100644
--- a/docs/styleguide/index.html
+++ b/docs/styleguide/index.html
@@ -62,6 +62,7 @@
       <h3 class="sg-sub-heading sg-section-h3">Generische Layouts</h3>
       <ul class="sg-index-list">
         <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/card-listen-fundamentalanalyse-mobile.html">Card Listen Fundamentalanalyse Mobile</a></li>
       </ul>
 
diff --git a/docs/styleguide/patterns/object-card.html b/docs/styleguide/patterns/object-card.html
index f55ab6a..3162161 100644
--- a/docs/styleguide/patterns/object-card.html
+++ b/docs/styleguide/patterns/object-card.html
@@ -104,6 +104,20 @@
       </article>
     </div>
 
+    <h2 class="sg-sub-heading sg-section-h2">Object Card Content Basic</h2>
+    <p class="sg-preview-label">Pattern: Object Card Content Basic</p>
+    <p class="sg-body">Hinweis: Diese Variante ist für spezifische Inhalte gedacht, die eine Nutzerinteraktion erfordern, zum Beispiel Zustimmungen oder Freigaben. Im Styleguide wird hier nur das Card-Layout gezeigt.</p>
+
+    <article class="sg-card sg-object-card sg-object-card--content-basic sg-object-card-content-basic" data-pattern="object-card-content-basic" aria-label="Objekt Card Content Basic">
+      <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-content-basic-header">
+        <div class="sg-strong">Zustimmung zu Geschäftsbedingungen</div>
+      </header>
+      <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content-basic-content">
+        <p class="sg-body">Bevor Sie fortfahren, prüfen Sie bitte die Inhalte der Geschäftsbedingungen und bestätigen Sie die Zustimmung im Zielsystem.</p>
+        <p class="sg-body">Die Karte ist bewusst kompakt gehalten und für lesbare, interaktionspflichtige Inhalte auf Desktop mittig ausgerichtet.</p>
+      </div>
+    </article>
+
     <h2 class="sg-sub-heading sg-section-h2">Object Card variable height</h2>
     <p class="sg-preview-label">Pattern: Object Card variable height</p>
     <p class="sg-body">Hinweis: In dieser Variante ist die komplette Karte in der Höhe flexibel. Die Segmenthöhen ergeben sich direkt aus dem Inhalt, dadurch sind die Karten im Grid bewusst unterschiedlich hoch.</p>
diff --git a/docs/styleguide/patterns/page-layout-app.html b/docs/styleguide/patterns/page-layout-app.html
new file mode 100644
index 0000000..0ec7fd0
--- /dev/null
+++ b/docs/styleguide/patterns/page-layout-app.html
@@ -0,0 +1,312 @@
+<!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 App</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body>
+
+  <h1 class="sg-main-heading">Layout – Page Layout App</h1>
+
+  <main aria-label="Page Layout App">
+    <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-app__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>
diff --git a/docs/styleguide/patterns/portal-header.html b/docs/styleguide/patterns/portal-header.html
index 420d879..6ca3eca 100644
--- a/docs/styleguide/patterns/portal-header.html
+++ b/docs/styleguide/patterns/portal-header.html
@@ -59,6 +59,55 @@
       </p>
     </article>
 
+    <section id="pattern-public-portal-header">
+      <h1 class="sg-main-heading">Pattern – Public Portal Header</h1>
+
+      <p class="sg-preview-label">Pattern: Public Portal Header</p>
+
+      <p class="sg-table-label sg-text-on-dark">
+        Desktop/Tablet: Header skaliert über die verfügbare Breite.
+      </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.
+      </p>
+
+      <article class="sg-portal-header-pattern-variant" aria-label="Public Portal Header ohne Options Row">
+        <p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
+          Variante: Public Portal Header ohne Options Row
+        </p>
+
+        <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>
+
+        <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>
+      </article>
+    </section>
+
     <article class="sg-portal-header-pattern-variant" aria-label="Portal Header mit Options Row">
       <p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
         Variante: Portal Header mit Options Row
@@ -197,7 +246,7 @@
 
   <script src="../scripts/help-icon-overlays.js"></script>
   <script>
-    document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
+    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) => {
diff --git a/docs/styleguide/semantic-tokens-components.html b/docs/styleguide/semantic-tokens-components.html
index c01f5a7..b7b5ff5 100644
--- a/docs/styleguide/semantic-tokens-components.html
+++ b/docs/styleguide/semantic-tokens-components.html
@@ -56,6 +56,8 @@
         <tr><td>layout-object-group-card-min-width</td><td>dimension-object-group-card-min-width</td><td>Mindestbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
         <tr><td>layout-object-group-card-max-width</td><td>dimension-object-group-card-max-width</td><td>Maximalbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
         <tr><td>layout-object-group-card-height</td><td>dimension-object-group-card-height</td><td>Fixe Desktop-Höhe der Karteninstanzen im Pattern Object Group Card.</td></tr>
+        <tr><td>layout-content-card-margin-top-desktop</td><td>dimension-content-card-margin-top-desktop</td><td>Oberer Außenabstand der Content Card auf Desktop.</td></tr>
+        <tr><td>layout-content-card-margin-top-mobile</td><td>dimension-content-card-margin-top-mobile</td><td>Oberer Außenabstand der Content Card auf Mobile.</td></tr>
         <tr><td>layout-notifications-text-segment-fixed-height</td><td>150px</td><td>Fixe Desktop-Höhe des ersten Text-Segments im Pattern Notifications; auf Mobile wird die Höhe wieder auf auto gesetzt.</td></tr>
       </tbody>
     </table>
diff --git a/docs/styleguide/styleguide.css b/docs/styleguide/styleguide.css
index 38f04e1..8ea3f8b 100644
--- a/docs/styleguide/styleguide.css
+++ b/docs/styleguide/styleguide.css
@@ -13,6 +13,7 @@
 @import "./styles/28-patterns-notifications.css";
 @import "./styles/29-patterns-left-navigation.css";
 @import "./styles/30-layouts-card-list-page.css";
+@import "./styles/36-layouts-page-layout-app.css";
 @import "./styles/33-layouts-vsf-list-detailseite.css";
 @import "./styles/34-layouts-vsf-listen-uebersicht-seite-v2.css";
 @import "./styles/35-layouts-vsf-register-step-1.css";
diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css
index 279379e..e02db44 100644
--- a/docs/styleguide/styles/01-foundations.css
+++ b/docs/styleguide/styles/01-foundations.css
@@ -172,6 +172,8 @@
   --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
   --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
   --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);
   --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);
@@ -273,6 +275,8 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
+  --dimension-content-card-margin-top-desktop: 100px;
+  --dimension-content-card-margin-top-mobile: 1rem;
   --dimension-object-group-card-min-width: 450px;
   --dimension-object-group-card-max-width: 650px;
   --dimension-object-group-card-height: 700px;
diff --git a/docs/styleguide/styles/20-patterns-portal-header.css b/docs/styleguide/styles/20-patterns-portal-header.css
index 9382804..4902eae 100644
--- a/docs/styleguide/styles/20-patterns-portal-header.css
+++ b/docs/styleguide/styles/20-patterns-portal-header.css
@@ -20,6 +20,18 @@
   background: var(--surface-portal-header);
 }
 
+.sg-portal-header--auth-segment {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-small);
+}
+
+.sg-portal-header--auth-segment .sg-portal-header__auth-row {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
 .sg-portal-header__main {
   display: grid;
   flex: 1 1 auto;
@@ -49,6 +61,10 @@
   justify-self: end;
 }
 
+.sg-portal-header--auth-segment .sg-portal-header__main {
+  width: 100%;
+}
+
 .sg-portal-header-pattern-variant {
   margin-bottom: var(--spacing-large);
 }
diff --git a/docs/styleguide/styles/22-patterns-object-card.css b/docs/styleguide/styles/22-patterns-object-card.css
index d426cb7..0cde2e0 100644
--- a/docs/styleguide/styles/22-patterns-object-card.css
+++ b/docs/styleguide/styles/22-patterns-object-card.css
@@ -70,3 +70,25 @@
 .sg-object-card--variable-height {
   height: auto;
 }
+
+.sg-object-card--content-basic {
+  width: min(70vw, var(--layout-object-card-max-width));
+  margin-inline: auto;
+  height: auto;
+}
+
+.sg-object-card-content-basic {
+  margin-top: var(--layout-content-card-margin-top-desktop);
+}
+
+@media (max-width: 767px) {
+  .sg-object-card--content-basic {
+    width: var(--layout-object-card-mobile-width);
+    min-width: 0;
+    max-width: none;
+  }
+
+  .sg-object-card-content-basic {
+    margin-top: var(--layout-content-card-margin-top-mobile);
+  }
+}
diff --git a/docs/styleguide/styles/30-layouts-card-list-page.css b/docs/styleguide/styles/30-layouts-card-list-page.css
index 94f8ba1..fac505d 100644
--- a/docs/styleguide/styles/30-layouts-card-list-page.css
+++ b/docs/styleguide/styles/30-layouts-card-list-page.css
@@ -60,7 +60,7 @@
 }
 
 .sg-card-list-page > .sg-options-row {
-  margin-top: var(--spacing-large);
+  margin-top: var(--layout-options-row-margin-top);
 }
 
 .sg-card-list-page > .sg-card-list-page__intro-block {
@@ -71,6 +71,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-large);
+  padding-bottom: calc(var(--spacing-large) - 0.25rem);
 }
 
 .sg-card-list-page__title-row {
@@ -183,4 +184,3 @@
   margin: 0;
   color: var(--text-vsf-drawer-object-card-body);
 }
-
diff --git a/docs/styleguide/styles/36-layouts-page-layout-app.css b/docs/styleguide/styles/36-layouts-page-layout-app.css
new file mode 100644
index 0000000..d5f9f57
--- /dev/null
+++ b/docs/styleguide/styles/36-layouts-page-layout-app.css
@@ -0,0 +1,8 @@
+/* ========================================================= */
+/* Layouts: Page Layout App                                  */
+/* ========================================================= */
+
+.sg-page-layout-app__heading-block {
+  margin-top: var(--spacing-large);
+  margin-bottom: var(--spacing-large);
+}
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index 119bc47..47be090 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -172,6 +172,8 @@
   --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
   --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
   --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);
   --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);
@@ -273,6 +275,8 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
+  --dimension-content-card-margin-top-desktop: 100px;
+  --dimension-content-card-margin-top-mobile: 1rem;
   --dimension-object-group-card-min-width: 450px;
   --dimension-object-group-card-max-width: 650px;
   --dimension-object-group-card-height: 700px;
@@ -2021,6 +2025,18 @@ section + section {
   background: var(--surface-portal-header);
 }
 
+.sg-portal-header--auth-segment {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-small);
+}
+
+.sg-portal-header--auth-segment .sg-portal-header__auth-row {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
 .sg-portal-header__main {
   display: grid;
   flex: 1 1 auto;
@@ -2050,6 +2066,10 @@ section + section {
   justify-self: end;
 }
 
+.sg-portal-header--auth-segment .sg-portal-header__main {
+  width: 100%;
+}
+
 .sg-portal-header-pattern-variant {
   margin-bottom: var(--spacing-large);
 }
@@ -2312,6 +2332,28 @@ section + section {
   height: auto;
 }
 
+.sg-object-card--content-basic {
+  width: min(70vw, var(--layout-object-card-max-width));
+  margin-inline: auto;
+  height: auto;
+}
+
+.sg-object-card-content-basic {
+  margin-top: var(--layout-content-card-margin-top-desktop);
+}
+
+@media (max-width: 767px) {
+  .sg-object-card--content-basic {
+    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);
+  }
+}
+
 /* ========================================================= */
 /* Patterns: Object Group Card                               */
 /* ========================================================= */
@@ -3196,7 +3238,7 @@ section + section {
 }
 
 .sg-card-list-page > .sg-options-row {
-  margin-top: var(--spacing-large);
+  margin-top: var(--layout-options-row-margin-top);
 }
 
 .sg-card-list-page > .sg-card-list-page__intro-block {
@@ -3207,6 +3249,7 @@ section + section {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-large);
+  padding-bottom: calc(var(--spacing-large) - 0.25rem);
 }
 
 .sg-card-list-page__title-row {
@@ -3320,6 +3363,14 @@ section + section {
   color: var(--text-vsf-drawer-object-card-body);
 }
 
+/* ========================================================= */
+/* Layouts: Page Layout App                                  */
+/* ========================================================= */
+
+.sg-page-layout-app__heading-block {
+  margin-top: var(--spacing-large);
+  margin-bottom: var(--spacing-large);
+}
 
 /* ========================================================= */
 /* Layouts: VSF List Detailseite                             */
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index ef05d42..cc1a744 100644
--- a/public/assets/styleguide.upstream.meta.json
+++ b/public/assets/styleguide.upstream.meta.json
@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "46a742f",
-  "syncedAtUtc": "2026-06-17T11:45:34Z",
+  "styleguideCommit": "e90e521",
+  "syncedAtUtc": "2026-06-18T08:48:09Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }
diff --git a/public/assets/styles.css b/public/assets/styles.css
index 119bc47..47be090 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -172,6 +172,8 @@
   --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
   --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
   --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);
   --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);
@@ -273,6 +275,8 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
+  --dimension-content-card-margin-top-desktop: 100px;
+  --dimension-content-card-margin-top-mobile: 1rem;
   --dimension-object-group-card-min-width: 450px;
   --dimension-object-group-card-max-width: 650px;
   --dimension-object-group-card-height: 700px;
@@ -2021,6 +2025,18 @@ section + section {
   background: var(--surface-portal-header);
 }
 
+.sg-portal-header--auth-segment {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-small);
+}
+
+.sg-portal-header--auth-segment .sg-portal-header__auth-row {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
 .sg-portal-header__main {
   display: grid;
   flex: 1 1 auto;
@@ -2050,6 +2066,10 @@ section + section {
   justify-self: end;
 }
 
+.sg-portal-header--auth-segment .sg-portal-header__main {
+  width: 100%;
+}
+
 .sg-portal-header-pattern-variant {
   margin-bottom: var(--spacing-large);
 }
@@ -2312,6 +2332,28 @@ section + section {
   height: auto;
 }
 
+.sg-object-card--content-basic {
+  width: min(70vw, var(--layout-object-card-max-width));
+  margin-inline: auto;
+  height: auto;
+}
+
+.sg-object-card-content-basic {
+  margin-top: var(--layout-content-card-margin-top-desktop);
+}
+
+@media (max-width: 767px) {
+  .sg-object-card--content-basic {
+    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);
+  }
+}
+
 /* ========================================================= */
 /* Patterns: Object Group Card                               */
 /* ========================================================= */
@@ -3196,7 +3238,7 @@ section + section {
 }
 
 .sg-card-list-page > .sg-options-row {
-  margin-top: var(--spacing-large);
+  margin-top: var(--layout-options-row-margin-top);
 }
 
 .sg-card-list-page > .sg-card-list-page__intro-block {
@@ -3207,6 +3249,7 @@ section + section {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-large);
+  padding-bottom: calc(var(--spacing-large) - 0.25rem);
 }
 
 .sg-card-list-page__title-row {
@@ -3320,6 +3363,14 @@ section + section {
   color: var(--text-vsf-drawer-object-card-body);
 }
 
+/* ========================================================= */
+/* Layouts: Page Layout App                                  */
+/* ========================================================= */
+
+.sg-page-layout-app__heading-block {
+  margin-top: var(--spacing-large);
+  margin-bottom: var(--spacing-large);
+}
 
 /* ========================================================= */
 /* Layouts: VSF List Detailseite                             */