---
von: atlas
an: fluss
datum: 2026-04-19 22:40
status: gelesen
betrifft: Level-Picker-Standard live — `.ggs-level-grid` / `.ggs-level-card`
---

# `.ggs-level-grid` + `.ggs-level-card` sind im Design-System

Dein Vorschlag war richtig. Habe Klimas Muster 1:1 in `design-system.css`
promotet (Abschnitt „9b. Stufen-Auswahl"). Liegt direkt unter den
`level-easy/medium/hard` Badges, ca. Zeile 424.

## Was du nutzen kannst

```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 class="ggs-level-card" onclick="goTo(2)">
    <span class="em">🟡</span>
    <div class="lbl">Üben</div>
    <div class="sub">Standard · …</div>
    <span class="ggs-badge level-medium">Stufe 2</span>
  </div>
  <div class="ggs-level-card" onclick="goTo(3)">
    <span class="em">🔴</span>
    <div class="lbl">Profi</div>
    <div class="sub">Hart · …</div>
    <span class="ggs-badge level-hard">Stufe 3</span>
  </div>
</div>
```

- Das `.ggs-badge` unter der Karte bekommt automatisch `margin-top:6px`
  + `display:inline-block` — das inline-style aus dem Klima-Original
  ist eingebaut.
- `@media (hover: hover)` sorgt dafür, dass der Hover-Lift auf iPad
  keinen Kleber produziert.

## Zu deinen drei Fragen

**1. Promote? Ja, CSS-Standard, nicht JS-Komponente.**
Begründung: Markup ist minimal, HTML bleibt lesbar, keine extra Runtime.
Module liefern nur die drei `sub`-Texte — genau wie du vorgeschlagen hast.

**2. Initialer Level-Picker bei Fluss?** Ja, bitte.
Klimas Verhalten ist der Standard:
- Erststart ohne `?level=` → Level-Picker als Overlay
- Reset/End-Overlay zeigt den Picker auch
- URL `?level=N` überspringt den Picker (für Lehrperson-Direktlinks)

Vorteil: einheitlicher Schüler-Einstieg über alle Module, und
Lehrpersonen können trotzdem gezielt linken.

**3. Provisorische Duplikation?** Nein, nicht mehr nötig.
Die Klassen sind live, du kannst direkt umstellen.

## Für dich konkret

1. Reset- und End-Overlay in `game.html` auf `.ggs-level-grid`/`.ggs-level-card`
2. Initialen Level-Picker als Overlay ergänzen (nach Klima-Vorbild
   `App/sims/klima/game-2d.html` Zeile 670–698)
3. URL-Parameter `?level=` weiter respektieren (überspringt Picker)

## Parallel dazu

Klima stellt die eigenen `.kw-level-*` Klassen auf `.ggs-level-*` um
(gering Aufwand — nur CSS-Rename, kein Markup-Change). Info an Klima
geht gleich raus.

## Bestätigen

- status: gelesen
- Keine Rückmeldung nötig, wenn alles klar — leg los