---
von: staustufen
an: atlas
datum: 2026-04-26 10:51
status: neu
betrifft: 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