From ee8f4225a749790646c9e9e2b630b62e15308077 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Fri, 19 Jun 2026 12:46:43 +0200
Subject: [PATCH] Sync styleguide 2026.05.18.1

---
 docs/styleguide/components/cards.html         | 17 ++++++++++++++++
 .../patterns/page-layout-public.html          | 20 ++++++++++---------
 .../styles/37-layouts-page-layout-public.css  |  1 -
 .../styleguide/styles/40-components-cards.css | 15 ++++++++++++++
 public/assets/styleguide.upstream.css         | 16 ++++++++++++++-
 public/assets/styleguide.upstream.meta.json   |  4 ++--
 public/assets/styles.css                      | 16 ++++++++++++++-
 7 files changed, 75 insertions(+), 14 deletions(-)

diff --git a/docs/styleguide/components/cards.html b/docs/styleguide/components/cards.html
index 694bbb0..daa5e68 100644
--- a/docs/styleguide/components/cards.html
+++ b/docs/styleguide/components/cards.html
@@ -101,6 +101,23 @@
     </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 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>
diff --git a/docs/styleguide/patterns/page-layout-public.html b/docs/styleguide/patterns/page-layout-public.html
index ef2ed9e..9010fa3 100644
--- a/docs/styleguide/patterns/page-layout-public.html
+++ b/docs/styleguide/patterns/page-layout-public.html
@@ -44,16 +44,18 @@
         </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>
 
diff --git a/docs/styleguide/styles/37-layouts-page-layout-public.css b/docs/styleguide/styles/37-layouts-page-layout-public.css
index 2803bbd..9c73406 100644
--- a/docs/styleguide/styles/37-layouts-page-layout-public.css
+++ b/docs/styleguide/styles/37-layouts-page-layout-public.css
@@ -30,5 +30,4 @@ main {
 
 .sg-page-layout-public__footer-card {
   margin-top: auto;
-  background: var(--surface-card-group);
 }
diff --git a/docs/styleguide/styles/40-components-cards.css b/docs/styleguide/styles/40-components-cards.css
index fce5486..bc02601 100644
--- a/docs/styleguide/styles/40-components-cards.css
+++ b/docs/styleguide/styles/40-components-cards.css
@@ -23,6 +23,21 @@
   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--overlay-host {
   overflow: visible;
 }
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index c950be1..407af6b 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -3390,7 +3390,6 @@ main {
 
 .sg-page-layout-public__footer-card {
   margin-top: auto;
-  background: var(--surface-card-group);
 }
 
 /* ========================================================= */
@@ -3729,6 +3728,21 @@ main {
   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--overlay-host {
   overflow: visible;
 }
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index 985a3d0..cff18d2 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": "72ab0f5",
-  "syncedAtUtc": "2026-06-18T10:22:31Z",
+  "styleguideCommit": "6f6dd21",
+  "syncedAtUtc": "2026-06-19T10:46:43Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }
diff --git a/public/assets/styles.css b/public/assets/styles.css
index c950be1..407af6b 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -3390,7 +3390,6 @@ main {
 
 .sg-page-layout-public__footer-card {
   margin-top: auto;
-  background: var(--surface-card-group);
 }
 
 /* ========================================================= */
@@ -3729,6 +3728,21 @@ main {
   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--overlay-host {
   overflow: visible;
 }