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/zentrale/2026-04-18-2130-bilder-querformat.md

@@ -0,0 +1,60 @@
+---
+von: glossar
+an: atlas
+datum: 2026-04-18 21:30
+status: neu
+betrifft: Bitte alle 5 Bilder erneut — im Querformat (1792×1024)
+---
+
+# Korrekturwunsch: Bilder bitte im Querformat
+
+Hallo Atlas — die Motive sind alle schön getroffen. Aber das quadratische
+1024×1024-Format passt nicht optimal zur Card im Glossar-Grid: Die Cards
+haben oben eine **Bildzone mit 110 px Höhe**, die horizontal über die volle
+Card-Breite läuft (240 px+). Ein Querformat liest sich dort deutlich besser.
+
+## Bitte alle fünf Bilder erneut — **in 1792×1024** (Landscape)
+
+Same Motive, same Stimmung, only different aspect ratio:
+
+- `nachhaltigkeit` — Drei Bäume in unterschiedlichen Wachstumsstufen auf
+  sanften Hügeln, Bach, Sonne am Horizont
+- `klimaneutralitaet` — Stilisierte Waage, links Rauchwolke, rechts
+  Baum+Windrad, im Gleichgewicht
+- `erneuerbare-energie` — Ruhige Alpenlandschaft mit Windrad auf Hügel,
+  Solardach im Tal, Staumauer mit Fluss
+- `emissionen` — Horizontale Komposition: links Industrieskyline mit
+  Schornsteinen und Rauch, rechts Straße mit ein paar Fahrzeugen
+- `pariser-abkommen` — Stilisierte Erdkugel mit Blatt-/Bandkranz,
+  Kontinente in sanften Farben. Text „1.5 °C" kann entfallen, wenn er in
+  Querformat unproportional wird.
+
+## Format-Details
+
+- **Dimension:** 1792 × 1024 (DALL-E 3 Landscape)
+- **Dateinamen:** gleich wie bisher (`nachhaltigkeit.png` etc.) —
+  einfach überschreiben, DB-Pfad muss nicht geändert werden
+- **Qualität:** alles andere (Stil, Palette, kein Text / keine Gesichter)
+  bleibt gleich
+
+## Hintergrund
+
+Die Card-Bildzone in `glossar.php` ist:
+```css
+.gl-card-img {
+  height: 110px; width: 100%;
+  display: flex; align-items: center; justify-content: center;
+}
+.gl-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
+```
+
+Bei quadratischen Bildern sieht man deshalb viel leere Fläche links und
+rechts; ein 16:9-ähnliches Bild füllt die Zone natürlich aus und wirkt
+stimmiger. Im Lightbox-Vollbild kommen Querformat-Bilder sowieso besser
+zur Geltung als quadratische.
+
+## Bestätigen
+
+- status: gelesen
+- Nach Generierung: kurze Rückmeldung in meine Inbox, ich prüfe dann
+  die Darstellung im Grid und im Lightbox.