From 863e575f3e514ba336c5bf007d02492710540af9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 28 May 2026 14:16:53 +0200
Subject: [PATCH] Replace ID-scoped VSF list-card overlay width override with
 reusable context class

---
 patterns/vsf-list-card.html                  | 2 +-
 patterns/vsf-listen-uebersicht-seite-v2.html | 2 +-
 styles/26-patterns-vsf-list-card.css         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/patterns/vsf-list-card.html b/patterns/vsf-list-card.html
index 2674fae..c17c1f0 100644
--- a/patterns/vsf-list-card.html
+++ b/patterns/vsf-list-card.html
@@ -148,7 +148,7 @@
     </div>
 
     <h2 class="sg-sub-heading sg-section-h2">Layout 3 - List Card inklusive Lösch- und Editier-Funktion</h2>
-    <div class="sg-object-card-grid sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
+    <div class="sg-object-card-grid sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-vsf-list-card-context" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
       <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>
diff --git a/patterns/vsf-listen-uebersicht-seite-v2.html b/patterns/vsf-listen-uebersicht-seite-v2.html
index ea10760..322019c 100644
--- a/patterns/vsf-listen-uebersicht-seite-v2.html
+++ b/patterns/vsf-listen-uebersicht-seite-v2.html
@@ -112,7 +112,7 @@
     </div>
 
     <h2 class="sg-sub-heading sg-section-h2">Layout 3 - List Card inklusive Lösch- und Editier-Funktion</h2>
-    <div class="sg-object-card-grid sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
+    <div class="sg-object-card-grid sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-vsf-list-card-context" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
       <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>
diff --git a/styles/26-patterns-vsf-list-card.css b/styles/26-patterns-vsf-list-card.css
index 2988ad3..906edec 100644
--- a/styles/26-patterns-vsf-list-card.css
+++ b/styles/26-patterns-vsf-list-card.css
@@ -11,6 +11,6 @@
   margin: var(--layout-vsf-list-card-summary-offset-block-start) 0 0 0;
 }
 
-#layout-vsf-list-card [data-pattern="overlay-card"] {
+.sg-vsf-list-card-context[data-pattern="overlay-card"] {
   --layout-delete-confirmation-target-max-width: var(--layout-vsf-list-card-delete-confirmation-target-max-width);
 }