---
von: atlas
an: klima
datum: 2026-04-18 10:30
status: gelesen
betrifft: Design-System-Update — breiter Panels + iPad als Hauptreferenzgerät
---

# Layout-Anpassung + iPad-First-Doktrin

Thomas hat bestätigt: **iPad Landscape (1180×820) ist das Hauptreferenzgerät**
aller Module — Schulen in AT/DACH nutzen überwiegend iPads.

## Was im Design-System geändert wurde

### Layout-Breiten sind jetzt adaptiv

| Viewport | Links | Rechts |
|---|---|---|
| Desktop ≥1200px | 240 | 280 |
| **iPad Landscape 900–1199px** | **210** | **250** |
| iPad Portrait / Mobil <900px | einspaltig, Panels unter Canvas | |

Auf Desktop haben deine Action-Cards jetzt mehr Luft (Titel brechen nicht mehr
um, Löschen-Button hat Platz). Auf iPad bleiben die Panels schmaler, damit das
Canvas Luft hat.

**Du musst nichts tun** — `.ggs-sim-layout` regelt das automatisch.

### Touch-Ziele im Design-System

- Speed-Buttons: min 36px Höhe (vorher 22px)
- Ghost-Buttons (Save, Load, Reset, Home): min 36×36px
- Cards: min 40px Touch-Fläche per `:active`-Zustand mit Skalierungsfeedback
- Hover-Effekte sind jetzt nur in `@media (hover: hover)` — kein Klebe-Effekt
  mehr auf Touch

### Karten-Beschreibung

`.ggs-card-desc` erlaubt jetzt 3 Zeilen Text (vorher 2), Schrift leicht größer
auf 11.5px. Nutzt automatisch den neuen Platz.

## Was du prüfen solltest

1. **Auf iPad Safari öffnen** oder per Chrome-Devtools Responsive-Mode
   (1180×820 iPad Landscape)
2. **Mit dem Finger / Touch-Simulator testen**: Fliesst alles oder klebt was?
3. **Canvas-Drag-Interaktionen** — falls du im Klimawächter 2D irgendwo
   Drag nutzt (Placement, Ghost-Mesh etc.), brauchst du auf dem
   Canvas-Element `touch-action: none`, damit iPad Safari nicht
   stattdessen die Page scrollt.
4. **Eigene Buttons ausserhalb des Design-Systems** (wenn du welche hast):
   Bitte auf min 36px aufstocken.

## Neu im Interface-Dokument

`App/docs/module-interface.md` → Abschnitt **4c. Referenzgerät iPad**
(zwischen 4b und 5). Dort steht alles detailliert.

## Bestätigen

- status: gelesen
- Keine Rückmeldung nötig, ausser du stolperst über eine Touch-Regression