# Klarbild — Gestaltung

> Aus dem Code gelesen, nicht erfunden. Quelle der Wahrheit bleibt
> `src/styles/tokens.css`; diese Datei erklärt, **warum** die Werte so sind und wo sie
> hingehören.

## Haltung

Technisch-editorial. Das Vorbild ist der Andruckbogen, nicht das Dashboard: warmes
Papier, scharfe Ecken, feine Linien, eine Passermarke als Zeichen. Die Oberfläche soll
aussehen wie etwas, mit dem man **arbeitet** — nicht wie etwas, das verkauft werden will.

Farbstrategie: **restrained**. Getönte Neutrale tragen die Fläche, ein einziges kräftiges
Blau markiert das, was man anfassen soll. Der Akzent bleibt deutlich unter 10 % der
Fläche. Bewusst: Auf dem Bildschirm liegen ständig **Fotos**, und die sollen die
einzigen bunten Dinge sein.

## Theme

**Hell, ohne Alternative.** Die Szene: Till oder Lea am Küchentisch oder im Büro, Tageslicht,
ein Foto von Phoenix auf dem Schirm, gleich soll es auf Papier. Wer Bilder beurteilt, die
auf hellem Papier landen, braucht einen hellen Untergrund — auf Dunkel wirkt jedes Bild
heller und wärmer, als es gedruckt wird. Ein Dunkelmodus wäre hier kein Komfort, sondern
eine Fehlerquelle.

## Farben

Alle Werte in OKLCH, alle Neutralen zum Papierton hin getönt (Hue 95, Chroma 0.004–0.01).
Kein `#000`, kein `#fff` — nirgends.

| Rolle | Token | Verwendung |
|---|---|---|
| Papier | `--paper` | Seitengrund, vertiefte Flächen, Eingabefelder |
| Karte | `--card` | erhobene Flächen, Kopfleiste |
| Linie | `--line` | 1-px-Trennung; **nie** dicker als Zierde |
| Schrift | `--ink` / `--ink-soft` | Haupttext / Nebentext |
| Akzent | `--accent` | genau eine Sache je Ansicht: die Handlung, die weiterführt |
| Akzentgrund | `--accent-bg` | aktiver Zustand, 6 % Deckung |
| Zustände | `--ok` `--warn` `--err` | nur für Zustände, nie zur Zierde |

**Regel für den Akzent:** Pro Ansicht ein blauer Knopf. Steht ein zweiter daneben, ist
einer davon falsch eingestuft. (Genau dieser Fehler stand kurz im Teilen-Dialog —
„Per E-Mail schicken" und „Fertig" waren beide blau.)

## Typografie

- **Space Grotesk** für alles Gelesene, **Space Mono** für Marken, Maße, Kennungen.
  Beide selbst gehostet (`@fontsource`) — keine Anfrage an einen fremden Server.
- `.mono-label`: 10 px, `letter-spacing: .18em`, Großbuchstaben, `--soft`. Das ist die
  **einzige** Art, Abschnitte zu betiteln. Sie kommt aus der Druckvorstufe und hält die
  Oberfläche ruhig, weil sie nie mit dem Inhalt konkurriert.
- Fließtext 15–16 px, Zeilenhöhe 1.55–1.6, Zeilenlänge höchstens ~68ch.
- Überschriften mit `letter-spacing: -0.02em`; Stufenverhältnis mindestens 1.25.
- **16 px in jedem Eingabefeld** — darunter zoomt iOS beim Fokus hinein. Steht als Regel
  in `tokens.css` und gilt ohne Ausnahme.

## Form

- Radius **4 px** (`--radius`), innen 3 px. Nie mehr. Weiche Ecken erzählen „App-Store",
  scharfe erzählen „Werkzeug".
- Schatten praktisch unsichtbar (`0 1px 2px` bei 5 % Deckung). Tiefe entsteht über
  Fläche und Linie, nicht über Weichzeichner.
- **Glasoptik nirgends.** Einzige Ausnahme: der Hintergrund hinter einem Dialog, damit
  klar ist, was gerade nicht anfassbar ist.

## Layout

- `--maxw: 1060px` für Textseiten. Arbeitsansichten dürfen breiter werden, wenn sie den
  Platz auch nutzen.
- Karten gruppieren, sie dekorieren nicht. **Nie verschachtelt.**
- Umbruchpunkte, die tatsächlich benutzt werden: **1200** (Einstellungen zweispaltig),
  **1080** (eine Spalte, Vorschau nach vorn), **768** (Kopfleiste → Tab-Leiste unten),
  **720** (Bildkarten werden zu Zeilen), **640/560** (Dialoge werden zu Blättern von unten).
- Geprüft wird bei **390 / 820 / 1440 / 1680 px**. Kein waagerechtes Scrollen, nirgends.

## Bewegung

Sparsam. `transition` auf Farbe und Hintergrund (0.15 s), `transform: scale(0.97)` beim
Drücken (0.06 s). Kein Federn, kein Nachwippen. `prefers-reduced-motion` schaltet alles ab.

## Muster

- **Dialog**: mittig am Rechner, **Blatt von unten** am Handy. Fokus wird eingefangen,
  Hintergrund festgehalten, Escape schließt.
- **Zustandsmarke**: Mono, 9–10 px, Großbuchstaben, gerundete Pille, getönter Grund.
  Für „aktiv / abgeschaltet / abgelaufen / geschützt".
- **Leerer Zustand**: Passermarke, eine Überschrift, ein Satz, der sagt, was zu tun ist,
  und ein Weg dorthin. Nie nur „Keine Einträge".
- **Gefahr**: Rot **nur** in der Schrift, nie als gefüllter Knopf. Ein rotes Rechteck lädt
  zum Draufklicken ein; genau das will man beim Löschen nicht.

## Was hier nicht vorkommt

Farbverläufe. Farbige Seitenstreifen an Karten. Glasoptik als Deko. Verlaufstext.
Illustrationen. Emoji in der Oberfläche. Gleich große Icon-Karten in Reihe.
Em-Gedankenstriche in der Oberflächensprache.