# System Rules

## Nicht verhandelbare Prinzipien

Diese Regeln gelten für jede generierte Website. Sie sind keine Empfehlungen, sondern harte Anforderungen.

---

### 1. Kein Inline-Styling

Styles gehören in Tailwind-Klassen oder CSS-Module. Niemals `style={{ }}` in JSX.

**Warum**: Wartbarkeit, Konsistenz, Performance.

---

### 2. Accessibility ist Pflicht

- Semantisches HTML (`<nav>`, `<main>`, `<article>`, etc.)
- Alle interaktiven Elemente per Tastatur erreichbar
- Bilder haben aussagekräftige `alt`-Texte
- Ausreichende Farbkontraste
- ARIA-Labels wo nötig

**Warum**: Rechtliche Anforderungen, Nutzerfreundlichkeit, SEO.

---

### 3. Responsive Design

Jede Seite muss auf allen Bildschirmgrößen funktionieren:

- Mobile (ab 320px)
- Tablet
- Desktop (bis 1920px+)

**Warum**: Moderne Nutzergewohnheiten.

---

### 4. Saubere Typografie

- Klare Hierarchie (h1 → h6)
- Angemessene Zeilenhöhe
- Lesbare Schriftgrößen
- Konsistente Schriftfamilien

**Warum**: Professionalität, Lesbarkeit.

---

### 5. Kein "HTML-Look"

Die Website darf niemals aussehen wie:

- Unstyled HTML
- Bootstrap-Standard-Theme
- Template aus 2010

Sie muss zeitgemäß, poliert und einzigartig wirken.

---

### 6. Der Build muss funktionieren

- Keine TypeScript-Fehler
- Keine ungenutzten Imports
- Keine fehlenden Dependencies
- `npm run build` muss durchlaufen

---

### 7. Autonome Verbesserung

Wenn die KI einen besseren Weg findet, etwas umzusetzen, **soll sie ihn wählen** – solange die anderen Regeln eingehalten werden.

Die Kundenangaben sind Richtlinien, keine unantastbaren Befehle.