From 94b4fed0d64c236414c3cad2f1db3c4f553cabfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 12 Aug 2026 11:14:26 +0200
Subject: [PATCH] Sync styleguide 2026.05.18.1

---
 docs/styleguide/components/cards.html           | 17 +++++++++++++++++
 docs/styleguide/email-styleguide.css            |  4 ++++
 .../patterns/general-email-template.html        |  3 +--
 docs/styleguide/styles/40-components-cards.css  | 14 ++++++++++++++
 public/assets/styleguide.upstream.css           | 14 ++++++++++++++
 public/assets/styleguide.upstream.meta.json     |  4 ++--
 public/assets/styles.css                        | 14 ++++++++++++++
 7 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/docs/styleguide/components/cards.html b/docs/styleguide/components/cards.html
index 024ad72..3268421 100644
--- a/docs/styleguide/components/cards.html
+++ b/docs/styleguide/components/cards.html
@@ -118,6 +118,23 @@
     </article>
   </div>
 
+  <p class="sg-preview-label">Variante: Green Content Card</p>
+
+  <div class="sg-preview-area">
+    <article class="sg-card sg-card--content-card sg-card--content-card-green" data-component="content-card" aria-label="Green Content Card">
+      <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+        <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
+          <p class="sg-body sg-text-layout-pattern__column">
+            Footer links: Platzhaltertext fuer allgemeine Hinweise, Navigation oder Kontaktinformationen im zweispaltigen Layout.
+          </p>
+          <p class="sg-body sg-text-layout-pattern__column">
+            Footer rechts: Platzhaltertext fuer ergaenzende Angaben, rechtliche Hinweise oder sekundaere Footer-Inhalte im gleichen Raster.
+          </p>
+        </div>
+      </div>
+    </article>
+  </div>
+
   <p class="sg-preview-label">Variante: Footer Card</p>
 
   <div class="sg-preview-area">
diff --git a/docs/styleguide/email-styleguide.css b/docs/styleguide/email-styleguide.css
index 80f6b1e..8228cbd 100644
--- a/docs/styleguide/email-styleguide.css
+++ b/docs/styleguide/email-styleguide.css
@@ -53,6 +53,10 @@
   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);
 }
diff --git a/docs/styleguide/patterns/general-email-template.html b/docs/styleguide/patterns/general-email-template.html
index 806ad88..c548320 100644
--- a/docs/styleguide/patterns/general-email-template.html
+++ b/docs/styleguide/patterns/general-email-template.html
@@ -38,7 +38,6 @@
           >
             <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>
@@ -57,7 +56,7 @@
             </article>
 
             <article
-              class="sg-card sg-card--content-card sg-card--content-card-dark sg-email-footer-card"
+              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"
diff --git a/docs/styleguide/styles/40-components-cards.css b/docs/styleguide/styles/40-components-cards.css
index 94b2d56..6b20716 100644
--- a/docs/styleguide/styles/40-components-cards.css
+++ b/docs/styleguide/styles/40-components-cards.css
@@ -38,6 +38,20 @@
   color: var(--color-font-light);
 }
 
+.sg-card.sg-card--content-card-green {
+  --surface-content-card-green: var(--color-signal-green);
+  --surface-card: var(--surface-content-card-green);
+  --surface-card-body: var(--surface-content-card-green);
+  --text-card-header: var(--color-font-light);
+  --text-card-body: var(--color-font-light);
+}
+
+.sg-card.sg-card--content-card-green .sg-card-segment--body,
+.sg-card.sg-card--content-card-green .sg-text-layout-pattern__column,
+.sg-card.sg-card--content-card-green .sg-body {
+  color: var(--text-card-body);
+}
+
 .sg-card.sg-card--footer-card {
   --surface-card: var(--color-black);
   --surface-card-body: var(--color-black);
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index 94f3c7e..26aa480 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -3889,6 +3889,20 @@ main {
   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);
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index ff17217..de35882 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": "6e6d49f",
-  "syncedAtUtc": "2026-08-09T06:39:36Z",
+  "styleguideCommit": "9d5f683",
+  "syncedAtUtc": "2026-08-12T09:14:26Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }
diff --git a/public/assets/styles.css b/public/assets/styles.css
index 94f3c7e..26aa480 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -3889,6 +3889,20 @@ main {
   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);