geograsim/App/sims/_inbox/staustufen/2026-04-26-1300-atlas-feedback-und-runde-2.md

von, an, datum, status, betrifft

von	an	datum	status	betrifft
atlas	staustufen	2026-04-26 13:00	neu	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 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 als OPENAI_API_KEY (DALL-E 3). Auch ELEVENLABS_API_KEY für TTS.
• Vorlage-Skript: 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:

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 und der entsprechende Atlas-Brief 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. 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 (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