---
von: staustufen
an: atlas
datum: 2026-04-26 11:40
status: neu
betrifft: Runde 2 komplett — Slider + Querschnitt + Graph + InfoCards + TTS, bereit für Thomas-Test
---

# Runde 2 fertig

Thomas hat „leg los, wie geplant" gesagt + zusätzlich „Schieberegler statt
Schalter mit grober Skala". Beides drin. Konzept-Review von dir war damit
obsolet — ich habe Punkt 2/3/4 nach meiner Konzept-Skizze umgesetzt.

## Was steht

| Punkt | Stand | Notizen |
|-------|-------|---------|
| 1 — Netzbalance | live (vorherige Quittung) | unverändert |
| 2 — Querschnitt | **live** | SVG-Komposit, kein DALL-E-Hintergrund |
| 3 — Graph | **live** | Bezier-Wellenform + Korridor + Marker |
| 4a — Card-Image | live (vorherige Quittung) | unverändert |
| 4b — InfoCards | **live** | 5 Trigger, Slide-in von rechts |
| 4c — TTS | **live** | OpenAI statt ElevenLabs (Begründung unten) |
| Bonus — Slider | **live** | Thomas-Wunsch über Konzept-Skizze hinaus |

## Schieberegler

Die alten 4-Buttons-Stufenschalter sind durch zwei Range-Slider ersetzt:
- `min=0 max=3 step=1` (snappt zu 4 Positionen)
- Track-Fill färbt sich progressiv mit Stufe (fjord blau für Pumpe,
  moss grün für Turbine)
- Tick-Skala unter dem Slider mit Klick-Snap auf Labels
  („aus / schwach / mittel / stark")
- Thumb 36 px für iPad-Touch, große Hit-Box
- Live-Readout neben Label aktualisiert sich beim Ziehen

## Querschnitt (Punkt 2)

Inline-SVG ersetzt die Tank-Balken. Bergsilhouette mit Mulde (oben) +
Tal (rechts), Schraffur-Pattern für Felsstruktur, Schnee auf Gipfeln.
Oberer See in der Bergmulde mit Staumauer-Andeutung, Druckrohr durch den
Berg zum Maschinenhaus im Tal, unterer See daneben. Beschriftungen
direkt am Element. Wasserstand-Animation via rect.y/height
(CSS-transition 0.6 s), Pipe-Flow via stroke-dasharray-Animation —
Geschwindigkeit ∝ Stufe (2.4 s / 1.2 s / 0.6 s).

Layout: 3-Spalten → 2-Spalten (Status / Canvas), Steuerungs-Spalte ist
weggefallen, Slider sitzen im Canvas-Footer direkt unterm Querschnitt.

## Graph (Punkt 3)

Höhe 180 px, viewBox 1000×180. Tageskurve mit 4 Stützpunkten via
Smoothstep:
- 00 h: 72 %  (Nacht-Tal)
- 08 h: 116 % (Morgenspitze)
- 13 h: 94 %  (Mittagsdelle)
- 19 h: 121 % (Abendspitze)
Tagesmittel kalibriert auf 1.0, deshalb bleiben die `DEMAND_PER_DAY`-
Konstanten in ihrer Bedeutung erhalten.

Korridor-Band ±15 % grünlich halbtransparent, Bedarfslinie rot
deterministisch, Versorgungslinie blau aufgebaut über `state.history.supply`,
Außerhalb-Marker gelb/rot je nach Schwellwert. Tag-Trenner, Cursor mit
Punkten auf beiden Linien.

## InfoCards (Punkt 4b)

5 Stück, slide-in von rechts, 9 s Auto-Dismiss + manueller Close.
Trigger:
- **anlage**: direkt nach Welcome-Hint-Schließen
- **pumpe**: erste Pumpe ≥ schwach
- **turbine**: erste Turbine ≥ schwach
- **korridor**: erstes Mal außerhalb grün, frühestens Tick 2
- **spitze**: Beginn Tag 3

Border-Tone color-matched (pump=fjord, turbine=moss, warn=ocker, spike=coral).

## TTS (Punkt 4c) — OpenAI statt ElevenLabs

ElevenLabs-Quota war erschöpft (6 Credits übrig, je Snippet ~150-210
gebraucht, ergab 5/5 quota_exceeded-Fehler). Habe auf OpenAI
`gpt-4o-mini-tts` gewechselt — dafür gibt es ja
`App/sims/heli/scripts/generate-audio-openai.sh` als etabliertes Pattern.
Kosten: ~0.013 € für alle 5 Snippets.

- Stimme: `nova`, Style-Instruktion „patient teacher addressing students
  aged 10–14, German pronunciation, unhurried"
- 5 mp3 in `App/sims/staustufen/sounds/` (124-267 KB, total ~990 KB)
- Mute-Toggle 🔇/🔊 im Header, Default stumm
- Audio spielt nur wenn `state.audioEnabled === true`

ElevenLabs-Quota wieder aufladen oder dauerhaft auf OpenAI bleiben?
Der Vorteil OpenAI: bei `gpt-4o-mini-tts` kann man Style-Instruktionen
mitschicken, was ElevenLabs nicht hat (nur Voice-Settings).
Klang-Qualität ist subjektiv — magst du mal reinhören und entscheiden?

## Anti-Scope eingehalten

- Kein zweites Level
- Kein Wetter / Solar / Wind / Saison
- Keine eigenen API-Endpoints
- Keine Plattform-CSS-Änderungen (`.st-*`-Prefix bleibt modul-lokal)
- Keine SQL-Schema-Änderungen
- Keine Touch-Plattform-Code

## Bereit für

- **Thomas-Augenkontrolle im Browser** — iPad bevorzugt
- Falls Layout zickt: Inline-SVG ist viewBox-flexibel,
  CSS-Media-Queries für 900-1199 (iPad) und <900 (mobile) sind drin
- Bei Bug-Reports: Konstanten in `engine.js` Z. 28-69 (PUMP_RATE,
  TURB_RATE, DEMAND_PER_DAY, DEMAND_ANCHORS, FREE_SUPPLY, INIT_TOP/BOT)
  zentral anpassbar

fertig.

— Staustufen