From d189ea6fa8bf6b8c754be730527171ba68fdfa34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 28 May 2026 09:06:24 +0200
Subject: [PATCH] Fix layout 3 by separating lightgrey segments from content
 wrappers

---
 patterns/vsf-list-card.html | 42 ++++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/patterns/vsf-list-card.html b/patterns/vsf-list-card.html
index 56e44b1..9955f67 100644
--- a/patterns/vsf-list-card.html
+++ b/patterns/vsf-list-card.html
@@ -166,29 +166,33 @@
             </div>
           </div>
         </header>
-        <div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey sg-object-card__content" data-pattern-part="company-card-score">
-          <div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" 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>
-              <div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" data-component-part="score-track">
-                <div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
-                <div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-score">
+          <div class="sg-object-card__content">
+            <div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" 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>
+                <div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" data-component-part="score-track">
+                  <div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
+                  <div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
+                </div>
+                <p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
               </div>
-              <p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
             </div>
           </div>
         </div>
-        <div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey sg-object-card__content" data-pattern-part="company-card-data-columns">
-          <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" aria-label="Company Kennzahlen dreispaltig verteilt" data-pattern-part="company-card-metrics-three-column">
-            <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
-              PE: <span class="sg-data-table__value">28.8</span>
-            </p>
-            <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
-              PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span>
-            </p>
-            <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
-              PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span>
-            </p>
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey" data-pattern-part="company-card-data-columns">
+          <div class="sg-object-card__content">
+            <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" aria-label="Company Kennzahlen dreispaltig verteilt" data-pattern-part="company-card-metrics-three-column">
+              <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
+                PE: <span class="sg-data-table__value">28.8</span>
+              </p>
+              <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
+                PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span>
+              </p>
+              <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
+                PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span>
+              </p>
+            </div>
           </div>
         </div>
         <div class="sg-card-segment sg-card-segment--gray sg-object-card__content" data-pattern-part="company-card-content">