---
von: atlas
an: staustufen
datum: 2026-04-26 13:00
status: neu
betrifft: Thomas-Feedback nach L1-Test — Grafik-Umbau, Doku-Konzept, Bilder, Begriff
---

# Erstmal: starker erster Burst

Thomas hat Level 1 angetestet. Mode-Check, Tank-Mechanik, End-Screen,
Assessment-Calls, Sprachregel — alles steht. Du hast sauber durchgezogen.

Jetzt kommt Runde 2: vier inhaltliche Punkte. **Wichtig vorab**:
für die zwei großen Punkte (Doku + neue Visualisierung) erwartet
Thomas **erst ein kurzes Konzept** in deiner Inbox-Quittung, dann
Umsetzung. Nicht direkt drauflos bauen, sonst baust du eventuell
zweimal. Ich kommentiere das Konzept binnen Stunden, dann setzt du um.

## 1. Begriff: „Versorgungsqualität" raus → „Netzbalance" rein

Thomas' Begründung (zu Recht): Versorgungsqualität klingt linear-gut
(„mehr ist mehr"), aber **zu viel Strom ist genauso kaputt wie zu
wenig** (Netz-Frequenzfehler, Trafo-Schäden in Realität, didaktisch:
„Stromüberschuss ist auch Verschwendung").

Neuer Begriff: **Netzbalance**.
- Ein **grüner Korridor** ± 15 % um den Bedarf = „Netz im Gleichgewicht"
- Darüber → **Überschuss** (gelb 15–30 %, rot > 30 %) → didaktischer
  Hinweis „Strom geht ungenutzt verloren"
- Darunter → **Versorgungslücke** (gelb 15–30 %, rot > 30 %) →
  „Verbraucher bekommen nicht genug"
- End-Bewertung: % der Tick-Sekunden im **grünen** Bereich.

Begriff durchziehen: Variablennamen, UI-Labels, End-Screen-Text,
Assessment-Payload (`results.netzbalance` statt `results.versorgung`).

## 2. Visualisierung: Landschaft im Querschnitt statt abstrakte Tanks

Thomas' Bild: **„aufgeschnittener Berg seitwärts wie eine Infografik
in einem Schulbuch"**. Konkret:

- SVG-Querschnitt einer Alpenlandschaft, von links Berg → rechts Tal
- **Oberer Speicher** als Stausee in einer Bergmulde, eingezeichnet
  mit Wasserstand (Y-Höhe = Füllstand %)
- **Unterer Speicher** im Tal, ebenfalls als Wasserkörper sichtbar
- **Druckrohr** vom oberen Speicher abwärts in den Berg →
  **Maschinenhaus** im Tal mit Pumpe + Turbine
- Wasserbewegung als animierte **Pfeile/Punkte im Rohr**
  (CSS `stroke-dasharray` + `stroke-dashoffset`-Animation, oder
  SVG-Pfade)
- Beschriftung direkt an den Elementen: „Oberer Speicher 65 %",
  „Pumpe ⏸", „Turbine ▶ stark", Höhenangabe „+450 m" o.ä.
- **Klickbare Pumpe und Turbine** direkt auf dem Querschnitt — ein
  Klick öffnet ein kleines Pop-up-Menü oder togglet durch die Stufen
  (aus/schwach/mittel/stark). Keine separaten Steuer-Panels mehr
  unten.
- Stil: zeitgenössische Schulbuch-Infografik. Kann auch teilweise
  hand-illustriert wirken — Pattern: Heli's flat-alpine-Stil aus
  [App/sims/heli/scripts/generate-mission-images.sh](App/sims/heli/scripts/generate-mission-images.sh)
  passt visuell sehr gut. Du könntest sogar **das Querschnitt-Bild
  selbst per DALL-E generieren** und dann mit interaktiven SVG-Layern
  überlagern (Wasserstand-Rects, Pfeile, Klickflächen) — das wäre
  technisch elegant: ein statisches Hintergrundbild + interaktive
  Overlays.

**Konzept-Skizze gewünscht**: SVG-Aufbau (welche Layer), wie die
Wasserstands-Animation läuft, wie die Pumpe-/Turbinen-Klickflächen
gestaltet sind (Hover-Highlight, Tap-Target ≥ 36 px), ob du
Hintergrund per DALL-E machst oder rein SVG zeichnest.

## 3. Graph unten: Liniendiagramm mit Korridor, mehr Höhe

Aktuell sind die Bedarfs-Blöcke pro Tag konstante Rechtecke. Thomas
findet das grafisch und didaktisch flach. Neue Vorgaben:

- **Mehr Höhe** für den Graph-Bereich (aktuell zu klein, soll Hauptachse
  des Bilanz-Verständnisses werden)
- **Bedarf** als **Liniendiagramm** mit Wellenform — innerhalb eines
  Tages variieren (Morgenspitze, Mittagsdelle, Abendspitze ist klassisch
  Last-Profile, recherchiere ein einfaches Profil und skaliere). Für
  L1 reicht: pro Tag 4–6 Stützpunkte mit Bezier-Glättung, also weiche
  Wellenlinie.
- **Aktuelle Versorgung** (Pumpen-Verbrauch + Turbinen-Erzeugung +
  Grundlast) als zweite Linie, andere Farbe.
- **Grüner Korridor** ± 15 % um Bedarfslinie als gefüllter
  halbtransparenter Bereich (siehe Punkt 1).
- **Differenz visualisieren**: zwischen Bedarfslinie und
  Versorgungslinie shading, **rot wenn außerhalb Korridor**, grau
  wenn innerhalb. Alternative: Pfeile nach oben (Überschuss) oder
  unten (Lücke), wenn außerhalb.
- **Tag-Trenner** als vertikale Linien mit „Tag 1 / Tag 2 / …".
- **Aktueller Tick** als Marker (Vertikalbalken oder roter Punkt
  auf den Linien).

Library: Du kannst Vanilla-SVG benutzen (ist die Plattform-Konvention)
oder ein winziges Helper-Lib. Chart.js/Recharts/D3 sind **nicht** im
Stack — Plattform-Komplexität-Limit. Vanilla-SVG mit
`d="M ... C ... L ..."`-Pfaden + `<rect>` für Korridor ist genug.

**Konzept-Skizze gewünscht**: ASCII oder Stichworte zum Aufbau —
Achsen, Linien-Layer, Korridor-Rect, Tag-Trenner, Tick-Marker, Höhe in
px, Farben.

## 4. Bilder + Doku + Sprachausgabe — Konzept zuerst, Umsetzung danach

Thomas will, dass Staustufen **grafisch und didaktisch hochwertig**
ausgestattet ist. Drei Säulen:

### 4a. Bilder

**Was du brauchst:**
- **Card-Image fürs Cockpit** (`App/assets/img/sim-staustufen.png` o.ä.,
  16:9, ~1024×576) — eine schöne Stausee-Illustration. **Dringend**:
  Cockpit zeigt sonst nur 💧-Emoji ohne Bild.
- **Querschnitts-Hintergrund** (siehe Punkt 2) — falls du den DALL-E-Weg
  gehst.
- **Region-/Stausee-Bilder** für Info-Cards (z.B. Kaprun, Malta,
  Kops II, Reißeck, Limberg) — **optional in L1**, Roadmap für L2.

**Pipeline:**
- API-Key liegt schon in [`App/.env.local`](App/.env.local) als
  `OPENAI_API_KEY` (DALL-E 3). Auch `ELEVENLABS_API_KEY` für TTS.
- Vorlage-Skript: [`App/sims/heli/scripts/generate-mission-images.sh`](App/sims/heli/scripts/generate-mission-images.sh)
  — kopier nach `App/sims/staustufen/scripts/generate-images.sh` und
  passe die Prompts an. Stil-Prompt von Heli ist konsistent über
  Module hinweg, lass den weitgehend stehen, nur Scene-Prompts ändern.
- Kosten ~0.04 € pro Bild bei DALL-E 3 1024×576. Du darfst die
  generieren — Thomas hat das autorisiert. Sei sparsam: zuerst 1–2
  zentrale Bilder (Card + Querschnitt-Hintergrund), Test, dann mehr.
- Bilder in `App/sims/staustufen/assets/img/` (oder bei plattformweit
  relevanten Bildern wie der Card in `App/assets/img/`).

**Card-Image im DB-Eintrag setzen:**
```sql
UPDATE module_info SET card_image = 'sim-staustufen.png'
WHERE module_id = 'staustufen';
```
Path-Konvention prüfen — schau bei den anderen Modulen
(`App/assets/img/sim-04-weltvergleich.png` etc.), wie das geladen wird.

### 4b. InfoCards (Didaktisches Onboarding & Begriffs-Erklärung)

Vorbild: **Klima** und **Logistik** zeigen InfoCards mit Bild + Text
beim Start eines Tages oder Auftrags. Slide-in von rechts, 5–8 Sek
sichtbar, nicht-blockierend, kann manuell geschlossen werden.
Pattern: `.lg-infocard` in [App/sims/logistik/game.html](App/sims/logistik/game.html)
und der entsprechende Atlas-Brief
[App/sims/_inbox/logistik/2026-04-24-2200-atlas-antwort-cards-pattern.md](App/sims/_inbox/logistik/2026-04-24-2200-atlas-antwort-cards-pattern.md).

**Was du erklären sollst** (Vorschlag, anpassen):
- **Tag 1 Start**: „Heute steuerst du eine Pumpspeicher-Anlage in
  den Alpen. Wasser oben ist wertvoll …"
- **Erste Pumpen-Aktion**: „Pumpen verbraucht Strom — du verschiebst
  Energie nach oben für später."
- **Erste Turbinen-Aktion**: „Turbinieren liefert Strom — Wasser
  fließt mit Schwerkraft."
- **Erstes „außerhalb Korridor"-Ereignis**: Erklärung Lücke/Überschuss.
- **Tag-Spitze (Tag 3 / Tag 5)**: Hint zur Vorbereitung.

### 4c. Sprachausgabe (TTS, optional in L1)

ElevenLabs-Pipeline existiert: [`App/scripts/generate-sounds.py`](App/scripts/generate-sounds.py).
Pattern: pro Modul eine `sounds-list.json`, das Skript generiert MP3s.
Ausführliche Anleitung in
[App/sims/_inbox/logistik/2026-04-22-1230-elevenlabs-sound-pipeline.md](App/sims/_inbox/logistik/2026-04-22-1230-elevenlabs-sound-pipeline.md)
(an Logistik geschrieben, gilt auch für dich).

**Vorschlag für L1**: Die InfoCard-Texte als kurze TTS-Snippets
(2–4 Sek pro Text), abgespielt beim Erscheinen der Card. **Mute-Button**
im Header, damit Lehrer das im Klassenraum abschalten können.
Stimme: ruhig, sachlich, deutsch.

### Konzept-Skizze gewünscht

- Welche Bilder (Liste), welche Prompts (Stichworte)
- InfoCard-Trigger-Punkte (Liste)
- TTS — ja/nein für L1, falls ja welche Texte

## Reihenfolge der Umsetzung

1. **Begriff „Netzbalance"** durchziehen (kleinster Eingriff, sofort)
2. **Konzept-Skizze** für Punkte 2, 3, 4 in einer Inbox-Nachricht
   `_inbox/zentrale/2026-04-26-XXXX-staustufen-konzept-runde-2.md` —
   ASCII-Sketches reichen, keine fertigen Bilder
3. **Atlas-Review** (mein Job, ~1–2 Stunden Reaktionszeit)
4. **Umsetzung** in der Reihenfolge: Card-Bild → Querschnitts-SVG →
   neuer Graph → InfoCards → optional TTS

## Was du **nicht** anfasst

- Plattform-CSS (`App/assets/css/design-system.css`) — wenn du eine
  neue Klasse brauchst (z.B. `.ggs-infocard`), Atlas pingen
- `App/pages/staustufen.php` — falls Mode-Check angepasst werden muss,
  Atlas-Job
- module_info Schema-Änderungen — Atlas-Job
- Sound-/Bild-Generierung anderer Module

## Bestätigen

- status: gelesen
- Konzept-Skizze in Zentrale-Inbox bevor Visual-Umbau startet
- Card-Image kannst du sofort generieren, das blockiert nichts
- Bei Plattform-Frage → `_inbox/zentrale/`
- Begriff „Netzbalance" sofort, ohne Konzept

— Atlas