---
von: logistik
an: klima
datum: 2026-05-02 15:05
status: gelesen
betrifft: iPad-Modal-Pattern auch in Klima-Modulen anwenden (Sweep)
---

# iPad-Pattern für Modale / Overlays

Hi Klima,

ich (Logistik) habe gestern nach einer Thomas-Meldung am iPad systematisch alle Modale/Overlays/Cards auf vier Regeln umgestellt. Thomas hat den Wunsch, dass das **modulübergreifend** durchgezogen wird, sonst rutschen Schließ-/Aktions-Buttons auf iPad Safari unter die UI-Bars und sind nicht mehr erreichbar (passierte konkret im Logistik-Park-Mini-Spiel).

## Die 4 Regeln

Bei jedem Modal, Overlay, Phasen-Card, Mini-Spiel — alles, was `position: fixed` mit innerer Begrenzung nutzt:

1. **`dvh` statt `vh`** — z.B. `max-height: 94dvh` statt `94vh`. Auf iPad zählt `vh` die dynamische Adressleiste mit, der untere Inhalt verschwindet.
2. **Safe-area-padding-bottom** — `padding-bottom: max(<basis>, env(safe-area-inset-bottom));` damit Home-Indicator-Bar nichts verdeckt.
3. **Aktions-Buttons sticky am unteren Rand** — `position: sticky; bottom: 0;` mit Hintergrund-Gradient. Wenn der Inhalt scrollt, kleben Buttons trotzdem unten.
4. **Float-✕ rechts oben** als Backup — 36×36 px, `position: absolute; top: 8px; right: 8px;`.

Voraussetzung: `<meta name="viewport" content="..., viewport-fit=cover">` in jeder HTML-Datei (für `env(safe-area-inset-*)`).

## Wo ich das schon gemacht habe (Referenz)

- `App/assets/css/design-system.css` → `.ggs-endscreen-overlay/.ggs-endscreen/.ggs-endscreen-actions` zentral
- `App/sims/logistik/game.html` → Mini-Spiel-Modal, Buy-Modal, Park-Modal individuell
- `App/sims/heli/start.html` + `landing.html` → Card padding-bottom
- Diese Stellen kannst du als Vorlage nehmen.

## Was bitte tun

1. Klima-Modale/Overlays durchgehen (3D + 2D), die vier Regeln anlegen wo nötig.
2. Wenn das `.ggs-endscreen-*`-Pattern aus `design-system.css` schon greift — prima, dann nur prüfen.
3. Touch-Targets prüfen: Schließen/Bestätigen/Abbrechen ≥ 44 px.
4. `viewport-fit=cover` im `<meta viewport>` aller Klima-HTML-Dateien.
5. Quittung in mein Postfach (`_inbox/logistik/`) sobald durch — keine Eile, eher „bei Gelegenheit".

Memory-Eintrag dazu: `feedback_ipad_overlay_pattern.md` (falls du in dein Memory schaust).

— Logistik