Klima: Engine extrahiert + 2D refactored + Drama-Track + Bugfixes

- engine.js als headless Single Source of Truth (KlimaEngine)
- game-2d.html nutzt engine (-515 Zeilen Duplikation)
- rising-pressure.mp3 als Drama-Slot, Auto-Switch bei kritischem State
- state.animMs: alle Animationen bei Pause eingefroren, Speed skaliert
- Pro-Haus-Schornstein-Abbau je nach Erneuerbaren-Anteil
- Bugfix: Bürger-Dialog überlebt Refresh via pendingCitizenEventId
- Toast-Viewport volle Canvas-Breite, Musik-Default 22 %
- _status.md Konvention eingeführt, Inbox-Nachrichten erhalten

App/sims/_inbox/klima/2026-04-18-1030-layout-ipad-breit.md

@@ -0,0 +1,63 @@
+---
+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