From b59ecd40e184619aae5b45fb9ae499472000a490 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:38:18 +0200
Subject: [PATCH] Refactor VSF overlay layout to token-based pattern cascade

---
 patterns/vsf-list-card.html          |  6 +++---
 styles/26-patterns-vsf-list-card.css | 13 ++-----------
 2 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/patterns/vsf-list-card.html b/patterns/vsf-list-card.html
index e2dce25..6ad9aa5 100644
--- a/patterns/vsf-list-card.html
+++ b/patterns/vsf-list-card.html
@@ -190,7 +190,7 @@
             </p>
           </div>
         </div>
-        <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-vsf-list-card__content-grow" data-pattern-part="company-card-content">
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-object-card__content" data-pattern-part="company-card-content">
           <p class="sg-table-label sg-company-card__analysis-title">Median-Subscores:</p>
           <div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" data-component="score-bar-list">
             <div class="sg-score-bar-item" data-component="score-bar">
@@ -229,7 +229,7 @@
     </div>
 
     <h2 class="sg-sub-heading sg-section-h2">Layout 4: Liste löschen</h2>
-    <div class="sg-object-card-grid sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" aria-label="VSF List Card Layout Liste löschen">
+    <div class="sg-object-card-grid sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" aria-label="VSF List Card Layout Liste löschen">
       <article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
           <div class="sg-strong">NAME DER LISTE</div>
@@ -271,7 +271,7 @@
             </p>
           </div>
         </div>
-        <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-vsf-list-card__content-grow" data-pattern-part="company-card-content">
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-object-card__content" data-pattern-part="company-card-content">
           <p class="sg-table-label sg-company-card__analysis-title">Median-Subscores:</p>
           <div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" data-component="score-bar-list">
             <div class="sg-score-bar-item" data-component="score-bar">
diff --git a/styles/26-patterns-vsf-list-card.css b/styles/26-patterns-vsf-list-card.css
index 356d6c5..269082a 100644
--- a/styles/26-patterns-vsf-list-card.css
+++ b/styles/26-patterns-vsf-list-card.css
@@ -15,15 +15,6 @@
   margin: var(--layout-company-card-analysis-gap-after-moat) 0 0 0;
 }
 
-#layout-vsf-list-card .sg-vsf-list-card__content-grow {
-  flex: var(--layout-object-card-content-grow) 1 auto;
-}
-
-#layout-vsf-list-card .sg-object-card-grid.sg-delete-confirmation-pattern__stage {
-  display: block;
-  width: min(100%, var(--layout-object-group-card-max-width));
-}
-
-#layout-vsf-list-card .sg-object-card-grid.sg-delete-confirmation-pattern__stage > .sg-object-card {
-  width: 100%;
+#layout-vsf-list-card [data-pattern="overlay-card"] {
+  --layout-delete-confirmation-target-max-width: var(--layout-object-group-card-max-width);
 }