Sync styleguide 2026.05.18.2

docs/styleguide/VERSION

@@ -1 +1 @@
-2026.05.18.1
+2026.05.18.2

docs/styleguide/foundations.html

@@ -46,6 +46,22 @@
     </table>
   </section>
 
+  <section id="foundations-card-text">
+    <h2 class="sg-sub-heading sg-text-on-dark">Card Semantic Tokens</h2>
+    <table class="sg-foundation-table sg-table-label">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Wert</th>
+          <th>Verwendung</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td>text-card-signal</td><td>font-light</td><td>Weiße Schrift auf allen farbigen Signal-Segmenten, unabhängig vom übergeordneten Card-Kontext.</td></tr>
+      </tbody>
+    </table>
+  </section>
+
   <section id="foundations-states">
     <h2 class="sg-sub-heading sg-text-on-dark">States</h2>
     <table class="sg-foundation-table sg-table-label">

docs/styleguide/styles/01-foundations.css

@@ -38,6 +38,7 @@
   --surface-card-header-muted: var(--color-darkbrown);
   --divider-card-segment: var(--color-white);
   --text-card-header: var(--color-font-light);
+  --text-card-signal: var(--color-font-light);
   --text-card-body: var(--color-font-dark);
   --text-card-transparent: var(--color-font-light);
   --layout-card-body-content-justify: flex-start;

docs/styleguide/styles/40-components-cards.css

@@ -136,27 +136,27 @@
 
 .sg-card-segment--signal-red {
   background: var(--color-signal-red);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--signal-green {
   background: var(--color-signal-green);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--signal-green-light {
   background: var(--color-signal-green-light);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--signal-green-red {
   background: var(--color-signal-green-red);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--signal-yellow {
   background: var(--color-signal-yellow);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--gray {

public/assets/styleguide.upstream.css

@@ -38,6 +38,7 @@
   --surface-card-header-muted: var(--color-darkbrown);
   --divider-card-segment: var(--color-white);
   --text-card-header: var(--color-font-light);
+  --text-card-signal: var(--color-font-light);
   --text-card-body: var(--color-font-dark);
   --text-card-transparent: var(--color-font-light);
   --layout-card-body-content-justify: flex-start;
@@ -4392,27 +4393,27 @@ main {
 
 .sg-card-segment--signal-red {
   background: var(--color-signal-red);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--signal-green {
   background: var(--color-signal-green);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--signal-green-light {
   background: var(--color-signal-green-light);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--signal-green-red {
   background: var(--color-signal-green-red);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--signal-yellow {
   background: var(--color-signal-yellow);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--gray {

public/assets/styleguide.upstream.meta.json

@@ -1,7 +1,7 @@
 {
-  "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "4e4474e",
-  "syncedAtUtc": "2026-09-22T07:55:02Z",
+  "styleguideVersion": "2026.05.18.2",
+  "styleguideCommit": "08bf51e",
+  "syncedAtUtc": "2026-09-22T09:50:21Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }

public/assets/styles.css

@@ -38,6 +38,7 @@
   --surface-card-header-muted: var(--color-darkbrown);
   --divider-card-segment: var(--color-white);
   --text-card-header: var(--color-font-light);
+  --text-card-signal: var(--color-font-light);
   --text-card-body: var(--color-font-dark);
   --text-card-transparent: var(--color-font-light);
   --layout-card-body-content-justify: flex-start;
@@ -4392,27 +4393,27 @@ main {
 
 .sg-card-segment--signal-red {
   background: var(--color-signal-red);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--signal-green {
   background: var(--color-signal-green);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--signal-green-light {
   background: var(--color-signal-green-light);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--signal-green-red {
   background: var(--color-signal-green-red);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--signal-yellow {
   background: var(--color-signal-yellow);
-  color: var(--text-card-header);
+  color: var(--text-card-signal);
 }
 
 .sg-card-segment--gray {