diff --git a/patterns/delete-confirmation-overlay.html b/patterns/delete-confirmation-overlay.html
index 1395d4c..44e25a2 100644
--- a/patterns/delete-confirmation-overlay.html
+++ b/patterns/delete-confirmation-overlay.html
@@ -41,7 +41,7 @@
         </footer>
       </article>
 
-      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="delete-confirmation-title" data-overlay-dialog="delete" hidden>
+      <article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="delete-confirmation-title" data-overlay-dialog="delete" hidden>
         <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
           <p class="sg-body sg-delete-confirmation-pattern__text" id="delete-confirmation-title"><strong>Möchtest du Alcon Inc. wirklich löschen?</strong></p>
           <p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
diff --git a/patterns/vsf-list-card.html b/patterns/vsf-list-card.html
index c17c1f0..ca12f84 100644
--- a/patterns/vsf-list-card.html
+++ b/patterns/vsf-list-card.html
@@ -227,7 +227,7 @@
         </footer>
       </article>
 
-      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-overlay-dialog="edit" hidden>
+      <article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-overlay-dialog="edit" hidden>
         <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
           <p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-edit-title"><strong>Liste editieren</strong></p>
           <div class="sg-form-sections-card__field-group">
@@ -249,7 +249,7 @@
         </div>
       </article>
 
-      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-overlay-dialog="delete" hidden>
+      <article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-overlay-dialog="delete" hidden>
         <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
           <p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-delete-title"><strong>Möchtest du NAME DER LISTE wirklich löschen?</strong></p>
           <p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
diff --git a/patterns/vsf-list-detailseite.html b/patterns/vsf-list-detailseite.html
index 8cbc2d8..de3a72e 100644
--- a/patterns/vsf-list-detailseite.html
+++ b/patterns/vsf-list-detailseite.html
@@ -162,7 +162,7 @@
               </article>
             </div>
 
-            <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Meldungen anpassen" role="dialog" aria-modal="true" aria-labelledby="vsf-meldungen-overlay-title" data-overlay-dialog="meldungen" hidden>
+            <article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Meldungen anpassen" role="dialog" aria-modal="true" aria-labelledby="vsf-meldungen-overlay-title" data-overlay-dialog="meldungen" hidden>
               <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
                 <p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-meldungen-overlay-title"><strong>Wähle, welche Meldungen angezeigt werden sollen</strong></p>
                 <section class="sg-form-sections-card__chapter" aria-labelledby="vsf-meldungen-kapitel-1">
diff --git a/patterns/vsf-listen-uebersicht-seite-v2.html b/patterns/vsf-listen-uebersicht-seite-v2.html
index 97bb618..366cc8f 100644
--- a/patterns/vsf-listen-uebersicht-seite-v2.html
+++ b/patterns/vsf-listen-uebersicht-seite-v2.html
@@ -194,7 +194,7 @@
         </footer>
       </article>
 
-      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-overlay-dialog="edit" hidden>
+      <article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-overlay-dialog="edit" hidden>
         <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
           <p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-edit-title"><strong>Liste editieren</strong></p>
           <div class="sg-form-sections-card__field-group">
@@ -216,7 +216,7 @@
         </div>
       </article>
 
-      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-overlay-dialog="delete" hidden>
+      <article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-overlay-dialog="delete" hidden>
         <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
           <p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-delete-title"><strong>Möchtest du NAME DER LISTE wirklich löschen?</strong></p>
           <p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>