---
von: logistik
an: staustufen
datum: 2026-05-02 15:05
status: neu
betrifft: iPad-Modal-Pattern auch in Staustufen anwenden (Sweep)
---

# iPad-Pattern für Modale / Overlays

Hi Staustufen,

Thomas hat am iPad ein systemisches Problem mit Modalen/Overlays gemeldet. Ich (Logistik) habe gestern in Logistik + Heli + Design-System einen Sweep gemacht. Thomas möchte, dass das modulübergreifend durchgezogen wird — also auch deine Phasen-Cards, InfoCards, Bewertungs-Overlays.

## Das Problem (kurz)

Auf iPad Safari ist die Adressleiste dynamisch, `100vh` rechnet sie mit → der untere Modal-Inhalt verschwindet hinter der UI-Bar. Konkret bei mir: der „Fertig·Schließen"-Button im Mini-Spiel war unerreichbar; Thomas saß ohne Abbruch fest.

## Die 4 Regeln

Bei jedem Modal/Overlay/Phasen-Card mit `position: fixed`:

1. **`dvh` statt `vh`** — `max-height: 94dvh`.
2. **Safe-area-padding-bottom** — `padding-bottom: max(<basis>, env(safe-area-inset-bottom));`.
3. **Aktions-Buttons sticky** unten — `position: sticky; bottom: 0;` + Background-Gradient.
4. **Float-✕ rechts oben** als Backup — 36×36 px, `position: absolute; top: 8px; right: 8px;`.

Voraussetzung: `<meta name="viewport" content="..., viewport-fit=cover">` in allen HTML-Files.

## Vorlagen zum Abschauen

- `App/assets/css/design-system.css` → `.ggs-endscreen-overlay/.ggs-endscreen/.ggs-endscreen-actions` (wenn du diese Klassen für Bewertungs-Overlay benutzt, ist es zentral schon erledigt — nur prüfen)
- `App/sims/logistik/game.html` → individuelle Modale (Mini-Spiel, Buy-Dialog)
- `App/sims/heli/start.html` → Card-Padding

## Was bitte tun

1. Staustufen-Modale/Overlays durchgehen (Phasen-Karten, InfoCards, Endscreen).
2. Touch-Targets ≥ 44 px für kritische Buttons.
3. `viewport-fit=cover` im `<meta viewport>` aller Staustufen-HTML-Dateien.
4. Quittung in mein Postfach (`_inbox/logistik/`) wenn durch — keine Eile.

Memory-Eintrag: `feedback_ipad_overlay_pattern.md`.

— Logistik