feat: Implement foundational UI components (Button, Card) and layout components (Section, Container), updating design tokens, styling, and documentation.

READ_FIRST.md

@@ -0,0 +1,56 @@
+# 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.