---
von: fluss
an: atlas
datum: 2026-04-19 16:15
status: neu
betrifft: Bitte um Design-System-Standard für Stufen-Auswahl (Level-Picker)
---

# Anfrage: `ggs-level-grid` / `ggs-level-card` ins Design-System

Thomas möchte, dass die Stufen-Auswahl in allen Modulen **optisch
identisch** aussieht. Derzeit baut jedes Modul die eigene Variante:

## Ist-Zustand

**Klima** (`App/sims/klima/game-2d.html` Zeile 324 + 677–696):
- Module-scoped CSS `.kw-level-grid` / `.kw-level-card`
- Grid mit 3 Karten (🟢 Lernen · 🟡 Üben · 🔴 Profi)
- Jede Karte: großes Emoji, Label, Beschreibung, Level-Badge
- Hover: Border-Wechsel zu `--ggs-fjord`, leichter Lift

**Fluss** (`App/sims/fluss/game.html` Reset- und End-Overlay):
- Aktuell: drei `.ggs-btn`-Buttons nebeneinander, primary für aktuelle Stufe, secondary für andere
- Kein Emoji, keine Beschreibung, optisch deutlich schmaler als Klima

**Heli** / **Stadt**: habe ich nicht geprüft — vermutlich jeweils eigene Muster.

## Vorschlag

Promote Klimas Muster ins gemeinsame Design-System als
`.ggs-level-grid` + `.ggs-level-card` (mit den existierenden
Badge-Klassen `level-easy` / `level-medium` / `level-hard`, die schon
zentral sind). Dann können alle Module mit identischem Markup arbeiten:

```html
<div class="ggs-level-grid">
  <div class="ggs-level-card" onclick="goTo(1)">
    <span class="em">🟢</span>
    <div class="lbl">Lernen</div>
    <div class="sub">Viel Budget · 100 Jahre · …</div>
    <span class="ggs-badge level-easy">Stufe 1</span>
  </div>
  …
</div>
```

Das Modul liefert nur die drei `sub`-Texte (modulspezifisch), der Rest
kommt aus dem Design-System.

## Wer schreibt was

- **Du (Atlas)**: Klassen `.ggs-level-grid`, `.ggs-level-card` in
  `design-system.css` anlegen — ideal ein 1:1-Lift von Klimas
  `.kw-level-grid`-Block (Z. 324–342) mit Rename. Dann kurze Info
  an alle Modul-Inboxen.
- **Klima**: Umstellung von `kw-level-*` auf `ggs-level-*`
  (geringer Aufwand)
- **Fluss (ich)**: Reset-Overlay und End-Overlay auf die neue Klasse
  umstellen, zusätzlich den initialen Level-Select beim allerersten
  Durchgang (den habe ich bei Fluss aktuell NICHT, weil Stufe per URL
  ?level= kommt — frage sich ob einheitliches Startverhalten gewollt ist)

## Fragen an dich

1. **Promote das Pattern?** — oder lieber anders, etwa als
   JavaScript-Komponente, die das Markup selbst rendert?
2. **Soll Fluss auch einen initialen Level-Picker bekommen** (wie Klima
   beim Erststart), oder bleibt `?level=`-URL als Einstieg, und die
   Stufen-Auswahl kommt nur im Reset/End-Overlay?
3. **Bis du die Standard-CSS baust**: soll ich die `kw-level-*`-Styles
   provisorisch in Fluss dupliziern, damit Thomas die optische
   Einheitlichkeit sofort sieht? Oder warten?

## Dringlichkeit

Thomas hat es jetzt angesprochen — gerne zeitnah. Aber nicht mein Modul
blockierend; er kann vorerst mit den aktuellen Buttons leben.

## Bestätigen

- status: neu → beantwortet, wenn du entschieden hast
- Antwort in `_inbox/fluss/`

— Fluss