# DESIGN.md — koeseo.de „Der Operator"

## Theme

Werksdokumentation einer laufenden Fabrik, aus der ein Mensch heraustritt. Referenz-Anker: deutsches Industrie-Typenschild + Braun-Gerätedokumentation, aufgewärmt durch gebrannten Ton (Aesop-Apotheken-Keramik). Licht: heller Werkraum (pures Weiß), mit einem dunklen Maschinenraum-Block als Herzkammer.

## Color palette (OKLCH, Seed seed-035 · hue 32°)

```css
:root {
  --bg:        oklch(1 0 0);            /* purer weißer Werkraum */
  --surface:   oklch(0.965 0.004 40);   /* Papier-Karte, minimal warm */
  --ink:       oklch(0.205 0.015 40);   /* warmes Braunschwarz, >12:1 */
  --muted:     oklch(0.44 0.02 40);     /* Sekundärtext, ~7:1 */
  --clay:      oklch(0.55 0.155 32);    /* Primary: gebrannter Ton */
  --clay-deep: oklch(0.40 0.125 32);    /* Drench-Fläche, Text darauf hell */
  --machine:   oklch(0.17 0.01 260);    /* Maschinenraum: kühles Near-Black */
  --machine-ink: oklch(0.93 0.005 80);  /* Knochenweiß auf Maschine */
  --machine-muted: oklch(0.70 0.012 80);
  --led:       oklch(0.76 0.16 150);    /* Betriebs-LED, nur als Statuszeichen */
  --line:      oklch(0.87 0.008 40);
}
```

Strategie: **Committed** — Clay trägt Identität (Hero-Akzente, CTAs, Marken-Momente), der Maschinenraum-Block ist gedrencht dunkel. Weißer Grund lässt beides knallen. LED-Grün ausschließlich als Betriebsanzeige (Punkt/Pill), nie dekorativ. Text auf Clay-Fills: immer Weiß (Helmholtz-Kohlrausch).

## Typography

- **Display + Body: Bricolage Grotesque** (variable, opsz+wght, self-hosted woff2) — warm-eckige Grotesk, menschlich und technisch zugleich; Headlines schwer (700–800, große optical size), Body 400.
- **Beweis-Register: Fragment Mono** (400) — ausschließlich für Typenschild, Logbuch-Zeilen, Quellen-Vermerke, Zählerstände. Mono ist hier semantisch (echte Maschinendaten), nie Kostüm.
- Skala: fluid clamp(), Verhältnis ≥1.3; H1 bis ~5.2rem; `text-wrap: balance` auf Headings, `pretty` auf Prosa; Body-Zeilenlänge ≤ 70ch.

## Components

- **Typenschild:** das Signature-Element — gestanztes Betriebsschild (Mono, Linienraster, LED „läuft") im Hero.
- **Logbuch-Register:** Beweiszeilen mit Zahl (groß, Bricolage) + Quelle (Mono, klein) — statt Card-Grids.
- **Auftragsbuch:** Cases als tabellarische Zeilen (Aufgabe → Geliefert → Stand).
- **Register-Wechsel-Marker:** sichtbarer Sie→Du-Übergang als gesetzter Moment, nicht versteckt.
- CTAs: Clay-Fill mit weißem Text (primär) / Ink-Outline (sekundär), verb + Objekt.

## Layout & Motion

One-Pager, 8 Sektionen, ein dominanter Gedanke pro Fold. Asymmetrie erlaubt; großzügige Sektionsabstände via clamp(). Motion: eine ruhige Load-Choreografie im Hero (CSS, `both`-Fill, selbstlaufend), Zählerstände zählen hoch (progressive enhancement, Endwert steht im DOM); `prefers-reduced-motion: reduce` schaltet alles ab. Kein Scroll-Reveal-Gating.

## Accessibility

Body-Kontrast ≥ 7:1 auf Weiß; Mono-Kleintext nie unter 0.78rem und nie muted-auf-getönt; Fokus-Ringe sichtbar (Clay); alle Interaktiva ≥ 44px Touch-Target; Mobile 375/390 px als Gate.