# Zieltracker — Refactor & Design-Update

**Datum:** 2026-04-17

## Überblick

Refactoring der Single-File-App in separate Dateien, neue einklappbare Karten, überarbeitete Stats, Desktop-Layout und Sortierung nach Tagesstatus.

---

## 1. Dateistruktur

Aus `index.html` (alles inline) werden drei Dateien:

- `index.html` — nur HTML-Gerüst + `<link>` + `<script>`
- `style.css` — alle Styles
- `app.js` — gesamte Logik

---

## 2. Layout — Desktop max-width

```css
.main-wrap {
  max-width: 480px;
  margin: 0 auto;
}
```

- Header und Content-Bereich beide im `max-width`-Container
- Außerhalb: `background: var(--bg)` bleibt sichtbar als grauer Rand
- Auf Handy ändert sich nichts (412px Breite des OnePlus 9 Pro passt rein)

---

## 3. Einklappbare Karten

### Standardverhalten
- Alle Karten starten **eingeklappt** beim Laden
- Kein Persist in localStorage — jeder Reload beginnt komplett eingeklappt
- Klick auf Karte (Header-Bereich) klappt auf/zu
- Pfeil: `▸` eingeklappt, `▴` ausgeklappt

### Sortierung
1. **Offen** (heute noch nicht erledigt) — oben, normale Opazität
2. **Heute erledigt** — unten, leicht abgedunkelt (`opacity: 0.7`)

Trennlabels zwischen den Gruppen: `OFFEN` / `HEUTE ERLEDIGT` (10px, monospace, uppercase, grau)

### Eingeklappt zeigt
```
[Name]  [✎]
[Noch XT · endet DD. Mon · heute: GEMACHT/TAGESZIEL · total: DONE/TOTAL]
[Badge]  [▸]
[Fortschrittsbalken]
```

- `heute: X/Y` farbkodiert: rot (0), amber (teilweise), grün (erreicht), blau (über Ziel)
- Fortschrittsbalken ohne Beschriftung darunter

### Ausgeklappt zeigt
```
[Name]  [✎]
[Noch XT · endet DD. Mon]
[Badge]  [▴]
[Fortschrittsbalken]
[X Stück gemacht          62% von 500]   ← prog-row
[Heute-Stats-Block]
[Dots + Legende]
[Eingabe-Panel (wenn Tag auswählbar)]
[Ziel löschen]
```

---

## 4. Stats — Umbau

### Alt (4 Blöcke, immer sichtbar)
Heute noch · Gemacht · Puffer · Täglich

### Neu (1 Gruppe "Heute", 3 Blöcke, nur ausgeklappt)
| Gemacht | Tagesziel | Noch |
|---------|-----------|------|
| 30 Stk  | 50 Stk    | 20 Stk (farbig) |

- Gruppe hat Label "HEUTE" (9px monospace uppercase)
- `Noch` farbkodiert identisch zu `heute:` in der Meta-Zeile
- Puffer und Täglich entfallen als eigene Blöcke (Badge zeigt Puffer/Rückstand bereits)

---

## 5. Eingabe

Bleibt unverändert: Freie Zahleingabe + `+ Satz` Button.

---

## 6. Zusammenfassung der Änderungen

| Was | Vorher | Nachher |
|-----|--------|---------|
| Dateistruktur | 1 HTML-Datei | index.html + style.css + app.js |
| Desktop-Breite | volle Breite | max-width 480px, zentriert |
| Karten | immer ausgeklappt | eingeklappt, aufklappbar |
| Sortierung | Erstellungsreihenfolge | Offen zuerst, Erledigt unten |
| Stats | 4 Blöcke (Heute noch/Gemacht/Puffer/Täglich) | 3 Blöcke Gruppe "Heute" |
| Meta-Zeile (eingeklappt) | Noch XT · endet DD | + heute: X/Y · total: X/Y |