diff --git a/foundations.html b/foundations.html
index 735cb29..79eb4f1 100644
--- a/foundations.html
+++ b/foundations.html
@@ -158,6 +158,8 @@
| object-group-card-min-width | 450px | Mindestbreite der Group Card im Pattern Object Group Card. |
| object-group-card-max-width | 650px | Maximale Breite der Group Card im Pattern Object Group Card. |
| object-group-card-height | 700px | Fixe Desktop-Höhe der Group Card im Pattern Object Group Card. |
+ | delete-confirmation-overlay-offset-block-start | 10% | Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße. |
+ | delete-confirmation-overlay-max-height | calc(100vh - 10vh) | Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays. |
| notifications-card-min-width | 445px | Mindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns. |
| search-field-width | 15.3rem | Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. |
| layer-pulldown-panel | 40 | Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen. |
diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html
index 2f46f10..b4d466c 100644
--- a/semantic-tokens-patterns.html
+++ b/semantic-tokens-patterns.html
@@ -116,7 +116,8 @@
| text-delete-confirmation-overlay | color-font-dark | Textfarbe im Bestätigungsfenster. |
| layout-delete-confirmation-target-max-width | 35rem | Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo. |
| layout-delete-confirmation-overlay-width-factor | 0.8 | Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%). |
- | layout-delete-confirmation-overlay-offset-block-start | spacing-large | Abstand des Overlays von der oberen Kante des Zielobjekts. |
+ | layout-delete-confirmation-overlay-offset-block-start | 10% | Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße. |
+ | layout-delete-confirmation-overlay-max-height | calc(100vh - 10vh) | Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays. |
| layout-delete-confirmation-content-gap | spacing-small | Vertikaler Abstand zwischen den Inhaltsblöcken im Overlay. |
| layout-delete-confirmation-actions-gap | spacing-small | Horizontaler Abstand zwischen Abbrechen- und Löschen-Button. |
| layout-delete-confirmation-actions-offset-block-start | spacing-large | Zusätzlicher vertikaler Abstand zwischen Bestätigungs-Eingabefeld und Actions-Zeile. |
diff --git a/styles/01-foundations.css b/styles/01-foundations.css
index 288ba7e..279379e 100644
--- a/styles/01-foundations.css
+++ b/styles/01-foundations.css
@@ -217,7 +217,8 @@
--text-delete-confirmation-overlay: var(--color-font-dark);
--layout-delete-confirmation-target-max-width: 35rem;
--layout-delete-confirmation-overlay-width-factor: 0.8;
- --layout-delete-confirmation-overlay-offset-block-start: var(--spacing-large);
+ --layout-delete-confirmation-overlay-offset-block-start: 10%;
+ --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
--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);
diff --git a/styles/27-patterns-delete-confirmation.css b/styles/27-patterns-delete-confirmation.css
index 06f9f9e..3652f34 100644
--- a/styles/27-patterns-delete-confirmation.css
+++ b/styles/27-patterns-delete-confirmation.css
@@ -40,12 +40,15 @@
.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));
+ min-height: calc(100% - var(--layout-delete-confirmation-overlay-offset-block-start));
+ max-height: var(--layout-delete-confirmation-overlay-max-height);
+ overflow: auto;
z-index: var(--layer-delete-confirmation-overlay);
box-shadow: var(--shadow-overlay);
}