Adjust overlay card dialog sizing

foundations.html

@@ -166,7 +166,7 @@
         <tr><td>object-group-card-max-width</td><td>650px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>object-group-card-height</td><td>700px</td><td>Fixe Desktop-Höhe der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>delete-confirmation-overlay-offset-block-start</td><td>10%</td><td>Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße.</td></tr>
-        <tr><td>delete-confirmation-overlay-max-height</td><td>calc(100vh - 10vh)</td><td>Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays.</td></tr>
+        <tr><td>delete-confirmation-overlay-max-height</td><td>100% minus 2 × offset-block-start</td><td>Maximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich.</td></tr>
         <tr><td>notifications-card-min-width</td><td>445px</td><td>Mindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns.</td></tr>
         <tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
         <tr><td>layer-pulldown-panel</td><td>40</td><td>Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen.</td></tr>

patterns/delete-confirmation-overlay.html

@@ -223,12 +223,6 @@
       );
       let draftListIds = new Set(committedListIds);
       let resetAddToListDraftState = () => {};
-      const updateFloatingCardHeight = (dialog) => {
-        const stageHeight = stage.getBoundingClientRect().height;
-        const floatingCardHeight = Math.max(0, Math.round(stageHeight * 0.9));
-        dialog.style.setProperty('--layout-delete-confirmation-overlay-height', `${floatingCardHeight}px`);
-      };
-
       const closeStageDialogs = ({ resetAddToListDraft = false } = {}) => {
         stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
           dialog.hidden = true;
@@ -389,7 +383,6 @@
 
           closeStageDialogs({ resetAddToListDraft: target === 'add-to-list' });
           dialog.hidden = false;
-          updateFloatingCardHeight(dialog);
           stage.dataset.dialogOpen = 'true';
 
           const menuWrap = link.closest('.sg-sandwich-menu-wrap');

semantic-tokens-patterns.html

@@ -134,7 +134,7 @@
       <tr><td>layout-delete-confirmation-target-max-width</td><td>35rem</td><td>Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo.</td></tr>
       <tr><td>layout-delete-confirmation-overlay-width-factor</td><td>0.8</td><td>Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%).</td></tr>
       <tr><td>layout-delete-confirmation-overlay-offset-block-start</td><td>10%</td><td>Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße.</td></tr>
-      <tr><td>layout-delete-confirmation-overlay-max-height</td><td>calc(100vh - 10vh)</td><td>Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays.</td></tr>
+      <tr><td>layout-delete-confirmation-overlay-max-height</td><td>100% minus 2 × offset-block-start</td><td>Maximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich.</td></tr>
       <tr><td>layout-delete-confirmation-content-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen den Inhaltsblöcken im Overlay.</td></tr>
       <tr><td>layout-delete-confirmation-actions-gap</td><td>spacing-small</td><td>Horizontaler Abstand zwischen Abbrechen- und Löschen-Button.</td></tr>
       <tr><td>layout-delete-confirmation-actions-offset-block-start</td><td>spacing-large</td><td>Zusätzlicher vertikaler Abstand zwischen Bestätigungs-Eingabefeld und Actions-Zeile.</td></tr>

styles/01-foundations.css

@@ -231,7 +231,7 @@
   --layout-delete-confirmation-target-max-width: 35rem;
   --layout-delete-confirmation-overlay-width-factor: 0.8;
   --layout-delete-confirmation-overlay-offset-block-start: 10%;
-  --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
+  --layout-delete-confirmation-overlay-max-height: calc(100% - var(--layout-delete-confirmation-overlay-offset-block-start) - var(--layout-delete-confirmation-overlay-offset-block-start));
   --layout-delete-confirmation-content-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);

styles/27-patterns-delete-confirmation.css

@@ -42,13 +42,14 @@
 
 .sg-delete-confirmation-pattern__floating-card {
   position: absolute;
-  top: 50%;
+  top: var(--layout-delete-confirmation-overlay-offset-block-start);
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
   box-sizing: border-box;
   max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
-  height: var(--layout-delete-confirmation-overlay-height, auto);
+  height: auto;
+  max-height: var(--layout-delete-confirmation-overlay-max-height);
   overflow: hidden;
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);

styles/33-layouts-vsf-list-detailseite.css

@@ -48,10 +48,10 @@
 
 .sg-vsf-list-detail-page__meldungen-overlay-pattern {
   max-width: 100%;
+  --layout-delete-confirmation-overlay-offset-block-start: calc(var(--spacing-large) * 5);
 }
 
 .sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card {
-  top: calc(var(--spacing-large) * 5);
   transform: translateX(-50%);
 }