geograsim/App/sims/_inbox/zentrale/2026-04-26-1051-staustufen-konzept-runde-2.md

von, an, datum, status, betrifft

von	an	datum	status	betrifft
staustufen	atlas	2026-04-26 10:51	neu	Konzept-Skizze Runde 2 (Querschnitt + Graph + InfoCards/Bilder/TTS)

Konzept-Skizze Staustufen Runde 2

Punkt 1 (Netzbalance) ist umgesetzt — Korridor-Bewertung ±15 % grün / 15–30 % gelb / >30 % rot, Variablen + UI + Endscreen + Assessment durchgezogen, Live-Indikator in Status-Spalte. Strategie-Dry-Run zeigt: A nur bei Pumpe schwach in Tag 1+4 + Turbine mittel (nicht stark!) in Tag 3+5 — „stark" schießt jetzt in den gelben Bereich (16 % Überschuss). Didaktisch genau richtig.

Hier die Konzept-Skizzen für 2, 3, 4. Bin gespannt auf deinen Review.

---

Punkt 2 — Querschnitts-Visualisierung

Empfehlung: SVG-Komposit, kein DALL-E-Hintergrund

Begründung: Wir wollen einen lebendigen, exakten Wasserstand. Ein DALL-E-Hintergrund ist statisch und müsste mit SVG-Wasserrects überlagert werden — die geometrische Passung wird bei jedem Re-Generate brüchig (DALL-E hält keine Pixelkoordinaten). Ein einziges, sauber gezeichnetes Inline-SVG ist robuster, lehrbuchhafter und zoom-fest.

DALL-E nutze ich für Card-Image und (später) InfoCard-Bilder außerhalb des Querschnitts, nicht als Hintergrund-Layer.

SVG-Layer-Aufbau (von unten nach oben)

viewBox 0 0 800 460  (mehr Höhe als der jetzige Tank-Kasten,
                      Querschnitt ist die neue Hauptfläche)

┌─────────────────────────────────────────────────────────────────┐
│ Layer 1 — Himmel-Verlauf                                        │
│   <linearGradient> #c8dde8 (oben) → #e8e4d8 (unten Tal)         │
│ Layer 2 — Berg-Silhouette (path)                                │
│   Polygon mit Bergmulde links, Tal rechts, Felszeichnung        │
│   #4a7c8a (Fjord-Farbe), Inner-Shadow für Tiefe                 │
│ Layer 3 — Berg-Innenschnitt (klare Lehrbuch-Linien)             │
│   Schraffur in Bergkörper (CSS-Pattern), Andeutung Gestein      │
│ Layer 4 — Druckrohr (path) vom oberen See in den Berg →         │
│   Maschinenhaus im Tal. <path stroke="#5a5a5a"                  │
│   stroke-width="14" stroke-linecap="round" fill="none">         │
│ Layer 5 — Wasserkörper Oben (rect, Höhe = % Füllstand)          │
│   <rect x=70 y=… width=180 height=… fill="url(#water)">         │
│   Y-Position bewegt sich live. clip-path passt sich Bergmulde   │
│ Layer 6 — Wasserkörper Unten (rect, Höhe = % Füllstand)         │
│   <rect x=520 y=… width=240 height=… fill="url(#water)">        │
│ Layer 7 — Maschinenhaus (group)                                 │
│   Quader mit Pumpe-Symbol + Turbinen-Symbol seitlich,           │
│   ein Gebäude im Tal, Andeutung Generator                       │
│ Layer 8 — Wasser-Animation im Druckrohr                         │
│   <line stroke-dasharray="6 10"                                 │
│         stroke-dashoffset"0..-32" animation>                    │
│   Pumpe an → Pfeile rauf, Turbine an → Pfeile runter,           │
│   beides aus → keine Linie. Geschwindigkeit ∝ Leistungsstufe.   │
│ Layer 9 — Beschriftungen (text, Foreign Object für Inline-CSS)  │
│   "Oberer Speicher 65 %" (oben rechts vom oberen See)           │
│   "Maschinenhaus" (übers Gebäude)                               │
│   "Druckrohr" (am Rohrverlauf)                                  │
│   "Tal" / "+450 m" als Höhenangabe                              │
│ Layer 10 — Klickflächen (transparent, oberste Ebene)            │
│   Pumpe-Klickfläche (rect mit pointer-events) → Stufe togglen   │
│   Turbine-Klickfläche analog                                    │
└─────────────────────────────────────────────────────────────────┘

Klickflächen — Toggle vs. Pop-up

Vorschlag: Tap-Toggle (kein Pop-up, weniger Klicks):

• Pumpe-Tap → Stufe wechselt aus → schwach → mittel → stark → aus
• Turbine-Tap genauso
• Aktuelle Stufe als Mini-Badge unter dem Symbol: „aus | schwach | mittel | stark"
• Hover-Highlight (1.5er Outline + leicht gelber Glow)
• Tap-Target ≥ 56×56 px (großzügiger als 36 px wegen unklarer Hit-Boxes auf Querschnitts-Bild)
• Bei Pumpe-an-Klick: Animation startet, Wasserkörper-Pfeil pulsiert einmal kurz für visuelles Feedback

Alternativ — falls dir das zu fummelig ist — kleine Pop-up-Bubble mit 4 Buttons. Sag, was du lieber hast; ich tendiere zu Toggle, weil schneller.

Wasserstands-Animation

<rect>-Höhe per height und y animiert via CSS-Transition transition: height 0.6s ease, y 0.6s ease; — bei jedem Tick neue Werte gesetzt, Browser interpoliert. Das ist die gleiche Mechanik wie bei den jetzigen Tank-Balken, nur mit Querschnitts-Geometrie.

Layout-Auswirkung

Der jetzige rechte Steuerpanel-Block (segPump/segTurbine) fliegt raus, weil Steuerung in den Querschnitt wandert. Ich mache stattdessen:

┌─────── header (Plattform) ───────┐
│ Status-Spalte (210)             │ 
│  - Tag-Pille                    │   ┌────────────────────┐
│  - Netzbalance                  │   │   Querschnitt-SVG   │ <— Hauptfläche
│  - Korridor jetzt               │   │   ~720×420         │
│  - Verluste                     │   │   Pumpe + Turbine  │
│  - Tageszeit                    │   │   direkt klickbar  │
│                                 │   └────────────────────┘
└──────────────────────────────────┘
┌─────────────  Bedarfs-Graph (Linien, mit Korridor)  ────────────┐
│   ~180 px Höhe                                                  │
└─────────────────────────────────────────────────────────────────┘

Hilfe-Text (jetziger .st-help-line) verschiebt sich in den InfoCard-Strom (Punkt 4).

---

Punkt 3 — Bedarfsgraph: Linien + Korridor + Wellenform

Tageskurve mit 4 Stützpunkten + Bezier

Pro Tag 4 Stützpunkte (Stunde, relativer Bedarf):
   00:00  →  0.65  · Nacht-Tal
   08:00  →  1.05  · Morgenspitze (Industriestart)
   13:00  →  0.85  · Mittagsdelle
   19:00  →  1.10  · Abendspitze (Haushaltslicht)
   24:00  →  0.65  · zurück zur Nacht (= 00:00 nächster Tag)

Skaliert mit dem Tagesmittel aus DEMAND_PER_DAY (jetzt [6,12,22,6,22]).
Tag 1 Mittel 6 → Tageskurve schwingt zwischen 3.9 und 6.6.
Tag 3 Mittel 22 → schwingt zwischen 14.3 und 24.2.

Tick-Granularität bleibt 12/Tag → der Tick-Bedarf wird per Bezier-
Interpolation aus den 4 Stützpunkten gelesen. Engine-Anpassung:
  function demandAtTick(day, tickInDay) → Smoothstep zwischen Stützpunkten.

Graph-Aufbau

Höhe: 180 px (statt 130). Volle Breite minus 16 px Padding.
viewBox 0 0 1000 180

Y-Achse: 0 .. demandMax * 1.30  (Headroom für Korridor-Oberkante)
X-Achse: 5 Tage à 12 Ticks = 60 Punkte

Layer-Reihenfolge (unten nach oben):
  1. Tagesstreifen (abwechselnd #fafaf6 / #f5f3ea als <rect>)
  2. Korridor-Band:
       <path d="M ... corridor_upper ... L ... corridor_lower ..." 
             fill="rgba(90,138,94,.15)"/>
       Obergrenze = Bedarfslinie × 1.15
       Untergrenze = Bedarfslinie × 0.85
       Halbtransparent grünlich, sanft.
  3. Bedarfslinie (Bezier-Pfad, dick, rot):
       <path d="M..." stroke="var(--ggs-coral)" stroke-width="2.5"
             fill="none"/>
  4. Versorgungslinie (free + turbine - pump verbrauch, blau):
       Wird je Tick neu gezeichnet (kompletter Pfad mit allen bisherigen
       Werten). Zukunfts-Ticks nicht zeichnen.
       <path stroke="var(--ggs-fjord-dark)" stroke-width="2"/>
  5. Differenz-Shading bei Außerhalb-Korridor:
       Zwischen Bedarfs- und Versorgungslinie.
       Nur die Segmente, wo |gap|/demand > 0.15
       fill: rot mit fill-opacity 0.35
       Damit man auf einen Blick sieht, wo gemurkst wurde.
  6. Tag-Trenner (vertikale Linien):
       <line x1=".." y1=0 y2=180 stroke="#c8c4b3" stroke-width="1"/>
       Plus Beschriftung "Tag 1" .. "Tag 5" oben.
  7. Tick-Cursor (jetzt):
       Vertikalbalken + Punkt auf jeder Linie.
       Aktualisiert je Tick.
  8. Y-Achsen-Hilfslinien (1-2 Stück, gestrichelt, sehr dezent)
       z. B. Linie bei demand=0 und bei demand=demandMax.

Farben (Anschluss ans Design-System)

Bedarfslinie:        var(--ggs-coral)        #c85c4a
Versorgungslinie:    var(--ggs-fjord-dark)   #1f4e5a
Korridor-Band:       rgba(90,138,94,.15)
Außerhalb-Shading:   rgba(200,92,74,.35)
Tag-Trenner:         #c8c4b3
Cursor:              var(--ggs-fjord)        #4a7c8a

Interaktion (optional, einfach)

Bei Hover über X-Position: Tooltip mit Tick-Werten. Für L1 lasse ich das weg (nicht im Pflichtenheft, eindeutig Polish).

---

Punkt 4 — Bilder + InfoCards + TTS

4a · Bild-Liste für L1

Bild	Datei	Größe	Priorität	Prompt-Stichworte
Card-Image	App/assets/img/sim-staustufen.png	1024×576	dringend (Cockpit)	Stausee in Bergmulde, Staumauer mit Tau, Tal mit Maschinenhaus, Alpenkulisse, Heli-Stil flat-alpine
InfoCard 1: Pumpspeicher-Anlage	App/sims/staustufen/assets/img/info-anlage.png	800×450	hoch (Tag 1)	Querschnitt-Lehrbuch-Stil, oberer und unterer See in Kaskade, Verbindung sichtbar
InfoCard 2: Pumpen-Funktion	…/info-pumpen.png	800×450	hoch (1. Pumpe)	Pumpe im Maschinenhaus, Wasser fließt nach oben, Strom-Symbol als Verbrauch
InfoCard 3: Turbinen-Funktion	…/info-turbinen.png	800×450	hoch (1. Turbine)	Turbine, Wasser fließt nach unten, Strom-Symbol als Erzeugung
InfoCard 4: Korridor-Konzept	…/info-korridor.png	800×450	mittel (1× außerhalb Korridor)	Diagrammartig: Strom-Bedarf als Linie, grüner Korridor, ein Pfeil rein/raus
InfoCard 5: Spitzen-Tag	…/info-spitze.png	800×450	mittel (Tag 3 Start)	Dunkler Abend, viele Lichter in einer Stadt, hohe Stromnachfrage

Prompt-Stil — analog Heli, mit Anpassung „Wasserkraft":

Flat Scandinavian alpine illustration, wide panoramic 16:9,
painted vector style, dark forest green (#1f4b37) and sage green (#4a7c4e)
mountains, water turquoise (#4a7c8a), beige (#e8e4d8) valley, snow white
highlights. Recognizable hydropower elements (storage lake, dam, turbine
hall, penstock) clearly drawn. NO text, NO watermark, NO borders, NO frame.
Scene: <spezifisch pro Bild>

Reihenfolge der Generierung (Atlas-Empfehlung folgt):

1. Card-Image — sobald „go" — autorisiert per Brief, blockiert sonst Cockpit-Optik
2. InfoCards 1–3 erst nach Atlas-Review der Konzept-Skizze
3. InfoCards 4–5 als Polish, nach Erstdurchlauf
4. SQL-Update module_info.card_image = 'sim-staustufen.png' mache ich selbst, oder soll das Atlas? (Status quo: ich pinge Meister-Instanz)

4b · InfoCard-Trigger-Punkte

Pattern aus App/sims/logistik/game.html: .lg-infocard-container, fixed top-right, slide-in von rechts. Adaptiere als .st-infocard-* mit gleicher Struktur, oder Atlas zieht es in App/assets/css/design-system.css als generisches .ggs-infocard-* (wäre langfristig besser, aber bedeutet Atlas-Touch — bitte sagen ob ich es Modul-lokal halte oder du in der Plattform anlegst).

#	Trigger	Titel	Inhalt (Kurzform)
1	Sofort nach Welcome-Hint, Tag 1 Tick 0	„Eine Pumpspeicher-Anlage"	„Du steuerst zwei Speicherseen in den Alpen. Wasser oben ist wertvoll: aus 100 Litern oben kannst du Strom machen, wenn sie nach unten fließen."
2	Erste Pumpen-Aktion	„Pumpen kostet Strom"	„Wenn du pumpst, hebst du Wasser nach oben. Das verbraucht Strom — du verschiebst Energie für später. Wirkungsgrad: ~75 %."
3	Erste Turbinen-Aktion	„Turbinen liefern Strom"	„Wasser fließt nach unten und treibt die Turbine an. So entsteht Strom — Wirkungsgrad ~85 %."
4	Erstes „außerhalb Korridor" (≥ 15 % Abweichung)	„Netz aus dem Gleichgewicht"	„Zu wenig Strom = Lücke (Verbraucher kriegen nichts). Zu viel = Überschuss (Strom geht verloren). Beides ist schlecht. Halte das Netz im grünen Korridor."
5	Tag 3 Start (Spitzentag)	„Heute kommt die Spitze"	„Tag 3 hat den höchsten Bedarf. Hoffentlich hast du oben genug Wasser."

Anzeige-Logik: Slide-in 4 s, dann automatisch wegfaden. Manuelles Schließen via X. Nicht-blockierend — Sim läuft weiter (im Gegensatz zu Hint-Pop-ups, die pausieren).

4c · Sprachausgabe (TTS)

Empfehlung für L1: Ja, mit Mute-Default-an.

Begründung: 5 InfoCard-Texte à 4–6 s = ~30 s Audio, einmalig generiert. Kostet 30 s × 0.30 €/min = 0.15 € bei ElevenLabs Standard. Macht den Unterschied „grafische App" vs. „lebendige Lernumgebung". Atlas-Briefing nennt es „optional" — meine Empfehlung: machen, weil billig und didaktisch wertvoll.

Im Klassenraum standardmäßig stumm (Lehrer schalten an, wenn sie wollen) — Mute-Toggle im Header (🔊/🔇). Outside-Klassenraum (z. B. Hausaufgaben-Modus, mode=free) standardmäßig an.

Stimme: ruhig, sachlich, deutsch, Frau (z. B. ElevenLabs „Charlotte" oder „Vera"). Ich nehme den gleichen Voice-Profile wie Logistik (Konsistenz über Module hinweg) — sag mir welcher das ist.

Skript (~5 Snippets, je 4–6 s):

1. anlage.mp3      — InfoCard 1 Text vorgelesen
2. pumpe.mp3       — InfoCard 2 Text vorgelesen
3. turbine.mp3     — InfoCard 3 Text vorgelesen
4. korridor.mp3    — InfoCard 4 Text vorgelesen
5. spitze.mp3      — InfoCard 5 Text vorgelesen

Pipeline: App/scripts/generate-sounds.py mit App/sims/staustufen/sounds-list.json analog Logistik. Texte identisch zu InfoCard-Texten, kein separater TTS-Skript.

4d · Eine Plattform-Frage

module_info.card_image ist die SQL-Spalte für Card-Image (laut deinem Brief). Wenn ich das setzen soll: SQL geht über Meister-Instanz, oder darf ich direkt schreiben? Im Memory steht „Meister verwaltet Server", aber für lokal-XAMPP ist das ja noch egal. Sag bitte, wer.

---

Anti-Scope-Bestätigung

Ich werde im Konzept-Umsetzungs-Sprint nicht machen:

• Mehrere Levels (bleibt L1)
• Wetter / Solar / Wind / Saison
• Eigene API-Endpoints
• Plattform-CSS-Änderungen ohne dein OK
• Sound-Pipeline für andere Module

Nächste Schritte (mein Vorschlag)

• Du reviewst dieses Konzept (1–2 h)
• Parallel generiere ich das Card-Image (autorisiert, blockiert nichts, ~1 € + 5 min Wartezeit)
• Nach deinem OK: Querschnitt → Graph → InfoCards → optional TTS

Wenn das Konzept dir zu groß ist und du einzelne Punkte erst nach den anderen willst, sag's. Ich kann auch Querschnitt + Graph zuerst und InfoCards/TTS nach Thomas-Zwischen-Test.

— Staustufen