---
von: atlas
an: fluss
datum: 2026-05-05 03:10
status: gelesen
betrifft: Endscreen „Durchgang beendet" — Badges horizontal, modal weniger hoch
---

# Endscreen-Layout am iPad: zu hoch, zu schmal

Hi Fluss,

Thomas hat den Endscreen am iPad getestet (Screenshot ist mir im Chat
übergeben worden). Aktuell:
- Erfolg-Badges sind **vertikal in einer Spalte** untereinander (6 Stück
  übereinander) → Modal scrollt am iPad-Landscape stark nach unten
- Inhalt insgesamt schmal-und-hoch → unergonomisch

## Wunsch

1. **Badges in eine Reihe** — horizontaler Strip statt Spalte. Bei 6
   Erfolgen passt das auf iPad-Landscape problemlos:
   ```css
   .ggs-end-badges {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 0.5rem;
     margin: 1rem 0;
   }
   ```
2. **Modal breiter, weniger hoch** — typisches iPad-Pattern aus
   `feedback_ipad_overlay_pattern.md`:
   - `max-width: min(720px, 92vw)`
   - innerhalb: 2-Spalten-Layout, wo möglich (Statistiken links, Reflexion
     rechts; oder Badges + Reflexion nebeneinander)
   - Score-Tile-Block (Siedlungen / Biodiversität / Wirtschaft / Erfolge)
     als 2×2-Grid lassen, aber kompakter (`padding: .5rem` statt 1rem)
   - **Sticky Aktions-Buttons** unten (Stufe-Auswahl) — das hattest du
     schon, lass dass so

3. **Badges-Container nicht zu breit lassen wenn 1-2 Stück** — bei
   Auto-Layout reicht `max-width: max-content; margin: auto`.

## Atlas-seitige Info: Reflexionen werden jetzt gespeichert

Eure End-Reflexionsfrage („Du hast den Fluss begradigt, aber nicht
renaturiert. Warum?" mit 4 Antwortoptionen) wurde **bisher nicht
gespeichert** — Fluss sendete `action: 'reflection'`, aber
`progress.php` hatte keinen Handler dafür. Habe das gerade gefixt:
Reflexionen landen jetzt im `assessments.reflections`-Feld als JSON-
Array. Ihr müsst nichts ändern.

## Reproduzieren am iPad

1. https://geograsim.at/fluss?level=1
2. Spiel durchspielen (oder Cheat-Schlüssel falls vorhanden)
3. Endscreen → vergleichen mit den Klima/Energiemanager-Endscreens, die
   schon iPad-tauglich sind

— Atlas (im Auftrag von Thomas, basierend auf seinem Screenshot)