diff --git a/docs/styleguide/styles/30-layouts-card-list-page.css b/docs/styleguide/styles/30-layouts-card-list-page.css
index 94f8ba1..dd0e6e2 100644
--- a/docs/styleguide/styles/30-layouts-card-list-page.css
+++ b/docs/styleguide/styles/30-layouts-card-list-page.css
@@ -7,6 +7,21 @@
   flex-direction: column;
 }
 
+.sg-card-list-page-drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 220ms ease;
+  z-index: 999;
+}
+
+.sg-card-list-page-drawer-backdrop[data-open="true"] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .sg-card-list-page-drawer {
   position: fixed;
   top: 0;
@@ -183,4 +198,3 @@
   margin: 0;
   color: var(--text-vsf-drawer-object-card-body);
 }
-
diff --git a/modules/shared/auth/ui/home.php b/modules/shared/auth/ui/home.php
index a60d40e..f98cf25 100644
--- a/modules/shared/auth/ui/home.php
+++ b/modules/shared/auth/ui/home.php
@@ -162,6 +162,7 @@ function auth_render_bestellungen_large_table(array $bestellungenTable): string
     $html[] = '</article>';
     $html[] = '</section>';
 
+    $html[] = '<div class="sg-card-list-page-drawer-backdrop" aria-hidden="true" data-bestellungen-drawer-backdrop="true" data-open="false"></div>';
     $html[] = '<aside class="sg-card-list-page-drawer" aria-label="Bestell-Details" aria-hidden="true" data-bestellungen-drawer="true" data-open="false">';
     $html[] = '<div class="sg-card-list-page-drawer__header">';
     $html[] = '<h2 class="sg-heading-h2 sg-card-list-page-drawer__title" data-order-drawer-title>Bestellung</h2>';
@@ -551,17 +552,25 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "    wrap.setAttribute('data-has-value', String(hasValue));";
     echo "    wrap.dataset.componentState = hasValue ? 'active' : 'inactive-selectable';";
     echo "  };";
+    echo "  const getDrawer = () => contentRoot.querySelector('[data-bestellungen-drawer]');";
+    echo "  const getDrawerBackdrop = () => contentRoot.querySelector('[data-bestellungen-drawer-backdrop]');";
+    echo "  const setDrawerState = (open) => {";
+    echo "    const drawer = getDrawer();";
+    echo "    const backdrop = getDrawerBackdrop();";
+    echo "    if (!drawer || !backdrop) { return; }";
+    echo "    drawer.dataset.open = String(open);";
+    echo "    drawer.setAttribute('aria-hidden', String(!open));";
+    echo "    backdrop.dataset.open = String(open);";
+    echo "    backdrop.setAttribute('aria-hidden', String(!open));";
+    echo "  };";
     echo "  const closeDrawer = () => {";
-    echo "    const drawer = contentRoot.querySelector('[data-bestellungen-drawer]');";
-    echo "    if (!drawer) { return; }";
-    echo "    drawer.dataset.open = 'false';";
-    echo "    drawer.setAttribute('aria-hidden', 'true');";
+    echo "    setDrawerState(false);";
     echo "    contentRoot.querySelectorAll('[data-order-drawer-open]').forEach((trigger) => {";
     echo "      trigger.setAttribute('aria-expanded', 'false');";
     echo "    });";
     echo "  };";
     echo "  const openDrawer = (trigger) => {";
-    echo "    const drawer = contentRoot.querySelector('[data-bestellungen-drawer]');";
+    echo "    const drawer = getDrawer();";
     echo "    if (!drawer) { return; }";
     echo "    const drawerTitle = drawer.querySelector('[data-order-drawer-title]');";
     echo "    const drawerOrderNumber = drawer.querySelector('[data-order-drawer-order-number]');";
@@ -580,8 +589,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "    const country = trigger.dataset.orderCountry || '';";
     echo "    const streetLine = [street, houseNumber].filter((part) => part && part.length > 0).join(' ').trim();";
     echo "    const cityLine = [zip, city].filter((part) => part && part.length > 0).join(' ').trim();";
-    echo "    drawer.dataset.open = 'true';";
-    echo "    drawer.setAttribute('aria-hidden', 'false');";
+    echo "    setDrawerState(true);";
     echo "    if (drawerTitle) { drawerTitle.textContent = orderNumber !== '' ? 'Bestellung ' + orderNumber : 'Bestellung'; }";
     echo "    if (drawerOrderNumber) { drawerOrderNumber.textContent = orderNumber; }";
     echo "    if (drawerOrderDate) { drawerOrderDate.textContent = orderDate; }";
@@ -684,6 +692,12 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "        closeDrawer();";
     echo "        return;";
     echo "      }";
+    echo "      const backdrop = event.target.closest('[data-bestellungen-drawer-backdrop]');";
+    echo "      if (backdrop) {";
+    echo "        event.preventDefault();";
+    echo "        closeDrawer();";
+    echo "        return;";
+    echo "      }";
     echo "      const sortButton = event.target.closest('[data-bestellungen-sort-button]');";
     echo "      if (sortButton) {";
     echo "        event.preventDefault();";
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index bacd364..f0ebe08 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -3137,6 +3137,21 @@ section + section {
   flex-direction: column;
 }
 
+.sg-card-list-page-drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 220ms ease;
+  z-index: 999;
+}
+
+.sg-card-list-page-drawer-backdrop[data-open="true"] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .sg-card-list-page-drawer {
   position: fixed;
   top: 0;
@@ -4369,4 +4384,3 @@ section + section {
   color: var(--text-typography-preview);
   margin-top: 0;
 }
-