trainingsplan/DESIGN.md

# REKORD - Design-Sprache

Normative Design-Doku für REKORD (Trainings-Tracker). Sie beschreibt die
Design-Entscheidungen so präzise, dass sie auch in anderen Projekten
wiederverwendbar sind. Wo ein Punkt geklärt wird, gilt er verbindlich - mit
der einen Ausnahme: **Nutzbarkeit schlägt Stil.** Eine Regel, die die Software
unbrauchbar macht, darf gebrochen werden - dann aber bewusst und begründet.

---

## 1. Philosophie

REKORD ist ein Werkzeug für den täglichen Gebrauch, kein Schaufenster. Daraus
folgt:

- **Erst Funktion, dann Form.** Die App reibt sich nicht zwischen dich und die
  Übung. Kompaktheit und Bedienbarkeit gehen jedem ästhetischen Detail voraus.
- **Ehrliche Fläche.** Alles ist flach, kantig, offen. Kein Schein, keine
  Tiefe, kein Verlauf. Eine Kante ist eine Kante (2px), ein Zustand ist ein
  Zustand (klar unterscheidbar).
- **Konfiguration statt Auftrag.** Der Nicht-Programmierer pflegt
  `config.json`; das Design muss das widerspiegeln: ruhig, vorhersehbar,
  nicht überraschend.
- **Daten bleiben Daten.** Zahlen sind Daten und werden in einer Daten-Schrift
  gesetzt; Einheiten sind immer sichtbar (kg, km, min - nie nackte Zahlen).
- **Weniger ist mehr.** Ein Akzent. Eine Karte. Eine Idee pro Bildschirm.

## 2. Leitprinzipien

1. **0px Radius.** Keine abgerundeten Ecken. Kanten sind hart.
2. **2px-Border.** Trennungen und Rahmen sind durchgängig 2px, nie schlanker.
3. **Dunkler Grund.** Dunkle Themes sind der Default. Schwarz bleibt Schwarz
   (OLED), Hell ist eine Option, nie der Standard.
4. **Ein Akzent.** Eine Akzentfarbe pro Sitzung, flach eingesetzt für aktive/
   gewählte Zustände. Kein zweiter Akzent, kein Farbverlauf.
5. **Zustände denken.** Hover, Fokus, Aktiv, Deaktiviert, "Erledigt" - jeder
   Zustand ist visuell eindeutig.
6. **Zwei Schriften, zwei Aufgaben.** Sans für UI und Fließtext, Mono für
   Zahlen und Daten. Kein unreflektierter System-Stack als einzige Schrift.
7. **Bewegung nur, wenn sie dient.** Und dann `prefers-reduced-motion`
   respektieren.

## 3. Tokens

Die Tokens leben als CSS-Variablen in `:root` und werden über
`data-theme` / `data-accent` auf `<html>` gewechselt. Komponenten nutzen **nur**
Tokens - keine hartkodierten Farben.

### 3.1 Farbe (Dunkel, Default)

| Token | Wert | Verwendung |
|---|---|---|
| `--bg` | `#0e0e0e` | Seitenhintergrund |
| `--bg-panel` | `#161616` | Karten, Panels, Modals |
| `--bg-input` | `#0a0a0a` | Eingabefelder |
| `--bg-hover` | `#202020` | Hover-Hintergrund |
| `--bg-subtle` | `#1d1d1d` | Zebra, Header, Done-Zeilen |
| `--border` | `#333` | Standardrahmen |
| `--border-hover` | `#4d4d4d` | Rahmen im Hover |
| `--text` | `#e8e8e8` | Primärtext |
| `--muted` | `#a0a0a0` | Sekundärtext (Kontrast >= 7:1 auf Panel) |
| `--danger` | `#c0392b` | destruktive Aktionen |
| `--ok` | `#6fae5c` | Erfolg |

### 3.2 Akzent-Palette

Zehn flache Akzentfarben, alle mit **einer einheitlichen dunklen Tinte**
(`--accent-ink: #141414`, Kontrast >= 4,2:1 überall - mathematisch geprüft).
Jede Farbe hat `--accent-hover` (heller) und `--accent-active` (dunkler).

| Akzent | Wert | Hover | Active |
|---|---|---|---|
| amber | `#e0a33c` | `#e9b257` | `#cf9130` |
| orange | `#e4582e` | `#ed6a36` | `#ca4a22` |
| red | `#d64541` | `#e1514c` | `#be3a37` |
| green | `#3fae5a` | `#4ebc68` | `#36984b` |
| teal | `#2aa198` | `#39afa5` | `#258d84` |
| cyan | `#25b8cc` | `#39c5d8` | `#219fb2` |
| blue | `#4a86c8` | `#5a96d6` | `#4073b0` |
| violet | `#9a6fd0` | `#ab80e0` | `#875db7` |
| pink | `#e0567f` | `#eb6890` | `#c74b6e` |
| **white** | `#ffffff` | `#f2f2f2` | `#e6e6e6` |

Sonderfall weißer Akzent: auf hellem Theme braucht er eine sichtbare
Umrandung (`--accent-border: #9a9a9a`), sonst verschwinden Buttons
weiß-auf-weiß. Gleiches gilt für Fortschrittssegmente (auf hellem Theme
schwarz statt unsichtbar-weiß).

### 3.3 Themes

| Theme | `--bg` | `--bg-panel` | `--bg-input` | `--border` | `--text` | `--muted` |
|---|---|---|---|---|---|---|
| dark | `#0e0e0e` | `#161616` | `#0a0a0a` | `#333` | `#e8e8e8` | `#a0a0a0` |
| light | `#f2f2f0` | `#ffffff` | `#ffffff` | `#c6c6c2` | `#1c1c1c` | `#5c5c59` |
| oled | `#000000` | `#050505` | `#000000` | `#232323` | `#e8e8e8` | `#a0a0a0` |

- `system` folgt `prefers-color-scheme` (mit Live-Watch über Media Query).
- `oled` ist eine **Eigenschaft** des dunklen Modus (Schalter), kein eigenes
  Theme: Wenn `oled` aktiv und die Auflösung dunkel, gelten reines-Schwarz-
  Tokens.
- `color-scheme` wird pro Theme gesetzt (native Formulare folgen).

### 3.4 Typografie

- `--font-ui`: System-Sans für UI, Labels, Fließtext.
- `--font-data`: Mono (tabular-nums) für Zahlen, Gewichte, Zeiten, Datums-,
  Statistik- und Eingabefelder.
- Hierarchie über **Gewicht und Abstand**, nicht über Größen-Vielfalt:
  h1 > h2 > h3, bei begrenzter Größenspreizung. Kein "alles gleich".
- Kein webfont-Download nötig - offline-fähig.

### 3.5 Form, Abstand, Bewegung

- Radius: **0**.
- Border: **2px** (Buttons, Karten, Inputs, Tabs, Segmente).
- Abstand: konsistente Raster (8/10/12/14/16/20px), Modals großzügig
  (Padding >= 32px, min-height fuer konstante Groesse).
- Schatten: **keine**. Trennung über Kanten und Abstand.
- Motion: höchstens kurzzeitige Transitions (Farbwechsel); nichts Animiertes
  ohne `prefers-reduced-motion`-Schutz.

## 4. Komponenten & Regeln

### 4.1 Buttons

- **Primary** (`.btn-primary`): Akzent-Hintergrund + `--accent-ink`-Tinte.
  Hover = `--accent-hover`, Active = `--accent-active` (Border bleibt
  `--accent-border`). Nur für die eine Hauptaktion.
- **Secondary** (`.btn`): transparent, 2px-Border, `--text`. Für Nebenaktionen.
- **Danger** (`.btn-danger-ghost`): rote Border/Tinte. Destruktiv.
- **`min-width`** (96px / 64px bei `.btn-small`): Buttons springen nicht in
  der Breite, wenn die Sprache wechselt.
- **Disabled**: Opacity 0.45 + `not-allowed`.
- Icons statt Text bei platzsparenden Aktionen (Reset = SVG-Pfeilkreislauf,
  Loeschen = ×). Keine Emojis als Icons.

### 4.2 Eingabefelder (Field-Box)

Eine zusammengehoerige Box: **Zahl links, Einheit rechts als festes Suffix in
derselben Box** (z.B. `[18,5 | kg]`). Klick auf die ganze Box fokussiert den
Input. Einheiten sind nie nackt. `:focus-within` faerbt die Border im Akzent.
Leer bleibt leer - nie 0.

### 4.3 Set-Zeile

Kompakte 5-Spalten-Grid: `auto auto auto auto auto` (Check | kg | reps |
Reset-Icon | X-Icon). Check = "Set n [ ]", ganzer Button klickbar, Kette ohne
Luecken. Die Zeile muss auf ein normales Handy-Display passen - ohne
horizontales Scrollen.

### 4.4 Karten & Panels

2px-Border, `--bg-panel`, Radius 0. Keine Schatten, keine `rounded-2xl`-Karten.
Karten durch Trennlinien/Kanten strukturieren statt durch Abstaende allein.

### 4.5 Tabellen

2px-Border auf allen Zellen, Header auf `--bg-subtle`, Zahlen rechtsbündig in
Mono. Balken (Statistik) als flache Akzent-Rechtecke.

### 4.6 Modals / Setup-Wizard

- Feste Mindesthoehe (konstante Groesse zwischen Schritten), Navigation unten
  verankert, Inhalt intern scrollbar.
- Fortschritt = **segmentierter Balken** oben rechts (Striche mit gap).
  Erledigt = gefuellt, aktuell = nur Umrandung, kommend = ausgegraut.
- Explizite Navigation (Zurueck / Weiter / Abschliessen), Auswahl springt
  nie automatisch weiter.

### 4.7 Toasts

Fixiert unten, 2px-Border. Fehler = `--danger`, Erfolg = `--ok`, und
**Einstellungs-Bestaetigungen in der Akzentfarbe** (nicht fix gruen).

## 5. Zustände

| Zustand | Regel |
|---|---|
| hover | `--bg-hover` / `--border-hover`; bei Akzent-Buttons `--accent-hover` |
| focus | `:focus-visible` 2px Akzent-Outline (nie `outline: none` ohne Ersatz) |
| active/pressed | `--accent-active` bei Primary, `--bg-hover` bei Secondary |
| disabled | Opacity 0.45, `cursor: not-allowed` |
| done/selected | Akzent-Hintergrund + `--accent-ink` (Check, aktiver Tab, Toggle) |
| error | `--danger` (Border + Text), nie nur Farb-Luecke |

## 6. i18n & Sprache

- Alle UI-Texte über `t(key)` aus einem `LANG`-Dictionary (de/en). Keine
  hartkodierten Strings in Views.
- Buttons bekommen `min-width`, damit Sprachwechsel die Groesse nicht
  aendern.
- Server-Fehlermeldungen werden ueber `eMsg()` lokalisiert.
- Der Login-Screen erscheint in der Server-Standardsprache (aus `/api/meta`).

## 7. Accessibility & Responsive

- Tastatur: alles bedienbar, sichtbarer Fokus.
- Kontrast: `--muted` auf Panel >= 7:1; Akzent-Tinte >= 4,2:1.
- `aria-label`/`aria-pressed` an interaktiven Icons/Checks.
- `prefers-reduced-motion` schaltet Transitions aus.
- Mobil: keine horizontalen Scrollleisten fuer Inhalte; Tabs wrappen statt
  abzuschneiden; Eingaben flexibel-schrumpfbar mit `min-width: 0`.

## 8. Verboten (Anti-Patterns)

- Verlaeufe (auch subtile), Glow, Glassmorphism, `backdrop-filter`.
- Schatten statt Kanten.
- Mehr als ein Akzent gleichzeitig; Lila-zu-Blau-Heroes.
- Emojis als Icons, rohe Unicode-Pfeile in Labels, Em-Dashes als Stilmittel.
- Abgerundete Pillen/Buttons ohne Grund.
- "Nahtlos", "Leistungsstark", "Elevate" - Vage-Floskel-Copy.
- Zentrierter Hero + 3-Karten-SaaS-Skelett.
- Eingaben, die bei jedem Tastendruck neu gerendert werden (Fokus-Verlust).
- Nackte Zahlen ohne Einheit.

## 9. Abschluss-Check (vor dem Shippen)

1. Diff gegen die Tokens: keine hartkodierten Farben in Komponenten.
2. Scan auf Em-Dashes, Verlaeufe, rohe Pfeile, Emojis, Bannwoerter.
3. Einheiten/Labels ueberall sichtbar?
4. Zustaende (hover/focus/active/disabled/done) durchgeklickt?
5. Mobil ohne horizontales Scrollen geprueft?
6. Sprachwechsel (de/en) auf Button-Groessen getestet?