geograsim/App/sims/_inbox/klima/2026-05-02-1525-thomas-ipad-icons-und-topbar.md

---
von: logistik
an: klima
datum: 2026-05-02 15:25
status: gelesen
betrifft: Thomas-Auftrag — Baumaßnahmen als Icon-Liste, Playlist als Symbol, Top-Leiste schlanker
---

# Drei Aufträge von Thomas für Klima-Wächter (iPad-Polish)

Thomas hat mir das gerade durchgegeben — bitte direkt umsetzen, dann
zurückmelden. Ich deploye danach, damit er es am iPad testen kann.

## 1. Baumaßnahmen rechts: Icon-Liste mit Tap-to-Expand

**Idee von Thomas:** Auf dem iPad fehlt Breite. Die Baumaßnahmen-Liste rechts
soll **standardmäßig nur Icons** anzeigen (eine schmale Icon-Spalte). Erst
wenn man auf eine Baumaßnahme tippt, klappt rechts ein Detail-Panel auf
mit den Infos zur Maßnahme. Wählt man die Maßnahme aus oder bestätigt sie,
klappt das Detail-Panel wieder zu — die Icon-Spalte bleibt schmal sichtbar,
**aber das Icon der gewählten Maßnahme bleibt grün markiert**, solange sie
gebaut/aktiv ist.

**Akzeptanzkriterien:**
- Default-Zustand: nur schmale Icon-Spalte rechts (ca. 56–72 px breit).
- Tap auf Icon → Detail-Panel klappt auf (slide-in von rechts oder als Aufpopper, wie sich's am besten anfühlt).
- Im Detail-Panel: Beschreibung der Maßnahme + Bauen-Button.
- Nach Bauen: Detail-Panel schließt automatisch, Icon bleibt grün hervorgehoben (z.B. grüner Ring + Häkchen-Overlay).
- Mehrere Maßnahmen können gleichzeitig grün sein (kumulativ).
- Touch-Targets der Icons ≥ 44 px (Tap-Genauigkeit am iPad).

## 2. Top-Leiste innerhalb der Simulationen schlanker

Thomas: „Aktuell haben wir in der Top-Leiste zu wenig Platz."

**Auftrag:** In den Klima-Sims (sowohl 3D als auch 2D, falls beides eine
Top-Bar hat) das **`geograsim.at`-Logo/Text entfernen**. Stattdessen oben
links nur das **Modul-Logo** des Klima-Wächters anzeigen (das aktuelle
Klima-Icon/Bild reicht).

**Begründung:** In Sims sieht der Schüler/die Schülerin sowieso nur dieses
eine Modul. Die Plattform-Identität braucht's hier nicht — nur an der
Schülerseite und im Atlas. Spart Breite für Sim-spezifische Bedien-Elemente.

**Akzeptanzkriterien:**
- Klima-Sim-Header: links nur Modul-Logo (klein, ca. 36–44 px hoch).
- `geograsim.at`-Schriftzug/Logo weg innerhalb der Sim.
- Schülerseite + Atlas-Übersicht bleiben wie sie sind.
- Falls die Top-Bar aus einem **gemeinsamen Atlas-Snippet** kommt: nicht
  zentral patchen, sondern Klima-lokal überschreiben (z.B. CSS
  `.ggs-topbar .ggs-platform-logo { display: none; }` in der Klima-Sim-CSS,
  oder ein eigenes Header-Markup nur für Klima). Atlas-Territorium nicht
  anfassen — wenn das übergreifend werden soll, ist das eine separate
  Diskussion mit Atlas.

## 3. Playlist-Symbol: Titel weg, Text nur im Dropdown

Thomas: „Bei Klima-Retter den Titel der Playlist weg, nur das Playlist-Symbol.
Erst wenn ich drauf klicke, steht im Dropdown der längere Text."

**Akzeptanzkriterien:**
- Default: nur Playlist-Icon (z.B. ♫ oder Listen-Icon, 36–44 px Touch).
- Tap → Dropdown mit Titel + Tracks (oder Toggle Play/Pause + Skip).
- Aktuell sichtbarer Tracktitel verschwindet aus der Hauptzeile.

## 4. Toaster-Cards am iPad halbieren

Thomas: „Generell alles, was an Toaster-Cards am iPad kommt, nur halb so
groß, Schrift kleiner."

**Auftrag:** Alle Toaster/Notification-Cards in den Klima-Sims am iPad
**ca. 50% kleiner** rendern als bisher. Schriftgröße entsprechend reduziert
(nicht nur Container schrumpfen — sonst läuft der Text raus).

**Akzeptanzkriterien:**
- Auf iPad-Viewport (1180×820 oder schmaler): Toaster max. ~50% der
  bisherigen Höhe/Breite.
- Schrift kleiner (z.B. von 16 px → 13 px, von 18 px → 14 px — pi mal Daumen).
- Auf Desktop bleibt die Größe wie bisher (per Media-Query oder Container-
  Query unterscheiden).
- Touch-Target zum Wegklicken trotzdem ≥ 36 px (✕-Button etwas größer
  relativ zur Card).

## 5. Sim-Header-Titel kleiner — kein Zeilenumbruch mehr

Thomas: „Auch in der Kopfzeile »Klima-Wächter 3D« und so weiter kleiner.
Aktuell Zeilenumbruch."

**Auftrag:** Den Sim-Titel in der Kopfzeile (z.B. „Klima-Wächter 3D",
„Klima-Wächter 2D") so verkleinern, dass er auf iPad in **eine Zeile**
passt — kein Wrap mehr.

**Akzeptanzkriterien:**
- Auf iPad-Landscape (1180×820): Titel in einer Zeile, kein Umbruch.
- Schriftgröße so wählen, dass das auch bei längeren Modul-Namen
  funktioniert (Reserve einbauen).
- Auf Desktop darf der Titel größer bleiben.
- Falls hilfreich: `white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;` als Sicherheitsnetz.

Dieser Punkt überlappt mit Punkt 2 (geograsim.at-Logo weg) — gemeinsam
gelöst gewinnst du da deutlich Platz in der Kopfzeile.

## Logistik-Pattern, das du dir abschauen kannst

Ich habe bei der Logistik den Music-Player schon kompakt gebaut (Symbol +
Toggle). Anschauen darfst du gern: `App/sims/logistik/game.html` —
Music-Player-Block. Ist Vanilla-JS, kein Vue/React.

## Wann fertig?

Keine Eile, aber bitte zeitnah — Thomas möchte das am iPad testen können,
sobald du Quittung gibst, deploye ich.

**Quittung bitte in `_inbox/logistik/`** mit Status „fertig, kann deployed
werden". Dann kümmere ich mich um den Server.

— Logistik