# READ FIRST

## Pflicht-Lesereihenfolge

Bevor an diesem Projekt gearbeitet wird, müssen folgende Dateien gelesen und verstanden werden:

1. `skills/SYSTEM_SKILLS.md` – Grundregeln und Verbote
2. `skills/UI_GUIDELINES.md` – Qualitätsstandards für UI
3. `skills/DEFINITION_OF_DONE.md` – Abnahmekriterien
4. `spec/ProjectSpec.json` – Projektspezifikation
5. `spec/design_tokens.json` – Design-Token-Definitionen
6. `prompts/master_prompt.md` – Workflow-Anleitung

---

## Entwicklungswarnung

> **Build und Dev dürfen NICHT gleichzeitig laufen.**
>
> Wenn `npm run build` und `npm run dev` parallel ausgeführt werden, verliert Next.js CSS-Referenzen.
> Das führt zu fehlendem Styling und instabilem Hot-Reload.
>
> **Lösung bei Problemen:**
> ```bash
> npm run clean
> ```
> Dieser Befehl löscht den `.next` Cache und stellt einen sauberen Zustand her.

---

## Inline-Styling ist verboten

`style={{ ... }}` ist im gesamten Projekt verboten. Alle Styles müssen über:

- `theme/globals.css` – CSS Variables (`:root`)
- `theme/stylesheet.css` – Typografie & strukturelle Regeln
- `spec/design_tokens.json` – Token-Definitionen

gesteuert werden.

---

## Architektur-Überblick

```
components/
├── layout/
│   ├── Container.tsx   → Max-Width, horizontales Padding, responsive
│   └── Section.tsx     → Vertikaler Rhythmus (Spacing)
└── ui/
    ├── Button.tsx      → Varianten: primary / secondary / ghost
    └── Card.tsx        → Neutraler Wrapper (Radius, Border, Shadow)
```

Diese Komponenten verwenden ausschließlich CSS Variables aus `globals.css`.
Sie diktieren KEIN Design – sie erzwingen Struktur.