From 75ebbddcb52e66b3070b107fb32fd13418f7ca9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 21 May 2026 16:20:04 +0200
Subject: [PATCH] Decouple gray card segment surface from card body token

---
 patterns/vsf-card-listen-fundamentalanalyse-drawer.html | 2 +-
 semantic-tokens-components.html                         | 1 +
 styleguide.css                                          | 7 ++-----
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
index 36cab21..82f5a6d 100644
--- a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+++ b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
@@ -77,7 +77,7 @@
         <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-1" role="tabpanel" aria-labelledby="vsf-fundamental-tab-1">
           <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Gesamtbewertung">
             <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Gesamtbewertung</div></div>
-            <div class="sg-card-segment sg-card-segment--gray sg-vsf-fundamental-score-segment" data-component-part="card-body">
+            <div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
               <div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list">
                 <div class="sg-score-bar-item" data-component="score-bar">
                   <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p>
diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index ba94405..32799c2 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -19,6 +19,7 @@
       <tbody>
         <tr><td>surface-card</td><td>color-light-grey</td><td>Grundfläche der Card.</td></tr>
         <tr><td>surface-card-body</td><td>color-light-grey</td><td>Fläche im Body-Segment der Card.</td></tr>
+        <tr><td>surface-card-segment-neutral</td><td>color-light-grey</td><td>Neutrale Segmentfläche für gezielte hellgraue Card-Segmente (z. B. <code>sg-card-segment--gray</code>).</td></tr>
         <tr><td>surface-card-header-primary</td><td>color-darkblue</td><td>Primärer Header-Hintergrund.</td></tr>
         <tr><td>surface-card-header-alternative</td><td>color-darkgreen</td><td>Alternativer Header-Hintergrund.</td></tr>
         <tr><td>surface-card-header-muted</td><td>color-darkbrown</td><td>Zweite alternative Header-Fläche.</td></tr>
diff --git a/styleguide.css b/styleguide.css
index 1d0de78..d9e0d14 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -26,6 +26,7 @@
   /* Semantic component tokens: Cards */
   --surface-card: var(--color-light-grey);
   --surface-card-body: var(--color-light-grey);
+  --surface-card-segment-neutral: var(--color-light-grey);
   --surface-card-group: var(--color-background-purple-light);
   --surface-card-transparent: var(--color-transparent);
   --surface-card-header-primary: var(--color-darkblue);
@@ -2312,7 +2313,7 @@ section + section {
 }
 
 .sg-card-segment--gray {
-  background: var(--surface-card-body);
+  background: var(--surface-card-segment-neutral);
 }
 
 .sg-card-segment--white {
@@ -2348,10 +2349,6 @@ section + section {
   background: var(--surface-object-card-lower-segment);
 }
 
-.sg-card-segment.sg-card-segment--body.sg-vsf-fundamental-score-segment {
-  background: var(--surface-content-block-card-title);
-}
-
 .sg-card-segment.sg-vsf-drawer-card__actions-segment {
   flex-direction: column;
   align-items: flex-start;