Initial commit

skills/CLIENT_OVERRIDES.md

@@ -0,0 +1,208 @@
+# Client Overrides
+
+Optionaler Platz für kundenspezifische Ergänzungen und Präzisierungen.
+
+---
+
+## Scope
+
+Diese Datei ist für **kundenspezifische Zusätze**:
+- Brand Voice und Wording
+- Pflichtseiten und -inhalte
+- Verbote (kundenspezifisch)
+- Rechtliche Anforderungen
+- Assets und CI-Vorgaben
+- Konkurrenz und Referenzen
+
+**Geltungsbereich:** Gilt nur für dieses spezifische Kundenprojekt.
+
+---
+
+## Hierarchie-Regel
+
+**WICHTIG:** Diese Datei darf die globalen Skills NICHT überschreiben.
+
+| Priorität | Datei | Kann überschrieben werden? |
+|-----------|-------|---------------------------|
+| 1 (höchste) | SYSTEM_SKILLS.md | Nein |
+| 2 | UI_GUIDELINES.md | Nein |
+| 3 | DEFINITION_OF_DONE.md | Nein |
+| 4 (niedrigste) | CLIENT_OVERRIDES.md | — |
+
+### Erlaubt:
+- Globale Regeln **präzisieren** (z.B. "Buttons immer mit Icon")
+- Globale Regeln **erweitern** (z.B. "zusätzlich FAQ-Seite erforderlich")
+- Kundenspezifische **Zusatzanforderungen** definieren
+
+### Verboten:
+- Globale Regeln **widersprechen** (z.B. "Templates sind erlaubt")
+- Qualitätsstandards **absenken** (z.B. "Kontrast ist nicht wichtig")
+- Pflichten aus SYSTEM_SKILLS **aufheben**
+
+Bei Konflikten gilt: **Globale Skills > Client Overrides**
+
+---
+
+## Read Order
+
+Diese Datei wird zuletzt gelesen:
+
+1. `skills/SYSTEM_SKILLS.md`
+2. `skills/UI_GUIDELINES.md`
+3. `skills/DEFINITION_OF_DONE.md`
+4. `skills/CLIENT_OVERRIDES.md` (diese Datei)
+5. Dann: Projekt-Specs
+
+---
+
+## Non-Goals
+
+Diese Datei definiert **NICHT**:
+- Grundlegende Arbeitsweisen (siehe SYSTEM_SKILLS.md)
+- Allgemeine UI-Qualitätsstandards (siehe UI_GUIDELINES.md)
+- Abnahmekriterien (siehe DEFINITION_OF_DONE.md)
+- Konkrete visuelle Designs (kommen aus design_tokens.json)
+
+---
+
+## Brand Voice / Wording
+
+Sprache und Tonalität für Texte.
+
+**Standard:** Deutsch (Sie-Form), professionell, klar.
+
+<!-- TODO: Kundenspezifische Anpassungen hier eintragen -->
+
+```
+Tonalität:        [ ] formell  [ ] freundlich-professionell  [ ] locker
+Ansprache:        [ ] Sie      [ ] Du
+Sprache:          [ ] Deutsch  [ ] Englisch  [ ] Mehrsprachig
+Branchensprache:  (z.B. medizinisch, technisch, juristisch)
+Verbotene Wörter: (falls vorhanden)
+```
+
+---
+
+## Must-Have Seiten / Sektionen
+
+Seiten oder Inhalte, die für diesen Kunden Pflicht sind.
+
+<!-- TODO: Kundenspezifische Pflichtseiten hier eintragen -->
+
+```
+Pflichtseiten:
+- [ ] Startseite
+- [ ] Impressum
+- [ ] Datenschutzerklärung
+- [ ] ...
+
+Pflichtsektionen:
+- [ ] ...
+```
+
+---
+
+## Must-Not-Have (Verbote)
+
+Inhalte oder Elemente, die für diesen Kunden verboten sind.
+
+<!-- TODO: Kundenspezifische Verbote hier eintragen -->
+
+```
+Verboten:
+- [ ] Bestimmte Konkurrenzerwähnungen
+- [ ] Bestimmte Bildtypen
+- [ ] Bestimmte Formulierungen
+- [ ] ...
+```
+
+---
+
+## Legal (Rechtliches)
+
+Spezielle rechtliche Anforderungen.
+
+<!-- TODO: Kundenspezifische rechtliche Anforderungen hier eintragen -->
+
+```
+Impressum:
+- Firmenname:
+- Adresse:
+- Registergericht:
+- USt-IdNr:
+- Vertretungsberechtigte:
+
+Datenschutz:
+- Hosting-Anbieter:
+- Analyse-Tools:
+- Cookie-Consent erforderlich: [ ] Ja  [ ] Nein
+- Spezielle Anforderungen:
+
+Branchenspezifisch:
+- (z.B. Heilmittelwerbegesetz, Finanzdienstleistungen, etc.)
+```
+
+---
+
+## Assets
+
+Kundenspezifische Assets und CI-Elemente.
+
+<!-- TODO: Asset-Pfade und CI-Informationen hier eintragen -->
+
+```
+Logo:
+- Pfad: /public/...
+- Varianten: (light, dark, monochrom)
+
+CI-Dokument:
+- Pfad oder Link:
+
+Bildmaterial:
+- Pfad: /public/images/...
+- Lizenzen geklärt: [ ] Ja  [ ] Nein
+
+Schriften:
+- (falls nicht in design_tokens.json)
+```
+
+---
+
+## Konkurrenz / Referenzen
+
+Wettbewerber und Inspirationsquellen.
+
+<!-- TODO: Konkurrenz und Referenzen hier eintragen -->
+
+```
+Hauptkonkurrenten:
+1. ...
+2. ...
+3. ...
+
+Referenz-Websites (zur Inspiration, nicht zum Kopieren):
+1. ...
+2. ...
+
+Abgrenzung:
+- Was soll anders/besser sein als bei der Konkurrenz?
+```
+
+---
+
+## Sonstige kundenspezifische Anforderungen
+
+<!-- TODO: Weitere Anforderungen hier eintragen -->
+
+```
+Zusätzliche Anforderungen:
+- ...
+```
+
+---
+
+## Zusammenfassung
+
+> Diese Datei enthält kundenspezifische Ergänzungen.
+> Sie darf globale Regeln präzisieren und erweitern, aber niemals widersprechen.
+> Bei Konflikten gelten immer die globalen Skills.

skills/DEFINITION_OF_DONE.md

@@ -0,0 +1,199 @@
+# Definition of Done
+
+Harte Abnahmekriterien. Eine Aufgabe gilt erst als abgeschlossen, wenn alle Kriterien erfüllt sind.
+
+---
+
+## Scope
+
+Diese Datei definiert **verbindliche Abnahmekriterien** für:
+- Build und Deployment
+- Code-Qualität
+- Responsive Design
+- Accessibility
+- SEO
+- Projektspezifikation
+
+**Geltungsbereich:** Gilt global für jedes Projekt. Keine Aufgabe ist fertig, bis diese Checkliste erfüllt ist.
+
+---
+
+## Read Order
+
+Diese Datei wird nach den anderen Skills gelesen:
+
+1. `skills/SYSTEM_SKILLS.md`
+2. `skills/UI_GUIDELINES.md`
+3. `skills/DEFINITION_OF_DONE.md` (diese Datei)
+4. `skills/CLIENT_OVERRIDES.md`
+
+Die Definition of Done ist die finale Prüfinstanz vor Abschluss einer Aufgabe.
+
+---
+
+## Non-Goals
+
+Diese Datei definiert **NICHT**:
+- Wie das Design aussehen soll
+- Welche Farben oder Layouts verwendet werden
+- Konkrete UI-Vorgaben
+- Wie Code strukturiert sein soll (siehe SYSTEM_SKILLS.md)
+
+Diese Datei prüft nur, ob Qualitätsstandards eingehalten wurden.
+
+---
+
+## Build & Deployment
+
+### Pflicht
+
+- [ ] `npm run build` erfolgreich ohne Fehler
+- [ ] Keine TypeScript-Fehler
+- [ ] Keine ESLint-Fehler (Warnungen dokumentieren falls unvermeidbar)
+- [ ] Keine Runtime-Errors in der Console
+
+### Bei Fehlern
+
+Build-Fehler müssen vor Abschluss behoben werden. Keine Ausnahmen.
+
+---
+
+## Code-Qualität
+
+### Pflicht
+
+- [ ] Keine `any` Types in TypeScript
+- [ ] Keine auskommentierten Code-Blöcke
+- [ ] Keine `console.log` im Production-Code
+- [ ] Konsistente Namenskonventionen
+- [ ] Keine ungenutzten Imports oder Variablen
+- [ ] Keine Dead Code (ungenutzte Funktionen/Komponenten)
+
+### Abhängigkeiten
+
+- [ ] Keine ungenutzten Dependencies in `package.json`
+- [ ] Keine Sicherheitslücken in Dependencies (soweit bekannt)
+
+---
+
+## Responsive Design
+
+### Pflichtprüfung
+
+| Viewport | Bereich | Status |
+|----------|---------|--------|
+| Mobile | 320px - 767px | [ ] geprüft |
+| Tablet | 768px - 1023px | [ ] geprüft |
+| Desktop | 1024px+ | [ ] geprüft |
+
+### Kriterien
+
+- [ ] Keine horizontalen Scrollbars auf keinem Viewport
+- [ ] Keine abgeschnittenen oder überlagernden Inhalte
+- [ ] Touch-Targets mindestens 44x44px auf Touch-Geräten
+- [ ] Lesbare Schriftgrößen ohne Zoom
+
+---
+
+## Accessibility
+
+### Pflicht
+
+- [ ] Kontrast WCAG AA erfüllt (4.5:1 Text, 3:1 UI-Elemente)
+- [ ] Tastatur-Navigation funktioniert vollständig
+- [ ] Fokus-Indikatoren sind sichtbar
+- [ ] Semantisches HTML verwendet (keine `<div>` statt `<button>`)
+- [ ] Alt-Texte für alle informativen Bilder
+- [ ] Formular-Labels vorhanden und verknüpft
+
+### Bei Ausnahmen
+
+Kontrast-Ausnahmen müssen dokumentiert und begründet werden. Es muss ein Plan zur Behebung existieren.
+
+---
+
+## SEO Mindeststandard
+
+### Pflicht pro Seite
+
+- [ ] Eindeutiger `<title>` vorhanden
+- [ ] Meta-Description vorhanden
+- [ ] Korrekte Heading-Hierarchie (nur ein `h1`, dann `h2` > `h3`)
+- [ ] Open Graph Tags gesetzt
+- [ ] Alt-Texte für Bilder
+
+### Pflicht global
+
+- [ ] `robots.txt` vorhanden
+- [ ] Canonical URLs gesetzt (falls relevant)
+- [ ] Keine Blocking-Resources für Crawler
+
+---
+
+## Performance
+
+### Pflicht
+
+- [ ] Bilder optimiert (WebP/AVIF, responsive srcset)
+- [ ] Lazy Loading für Below-the-fold-Inhalte
+- [ ] Keine unnötigen Dependencies
+- [ ] Bundle-Größe im Budget (JS < 100kb gzip, CSS < 30kb gzip)
+
+### Empfohlen
+
+- [ ] Core Web Vitals im grünen Bereich (LCP < 2.5s, CLS < 0.1, INP < 200ms)
+
+---
+
+## Projektspezifikation
+
+### Pflicht
+
+- [ ] Alle Anforderungen aus `ProjectSpec.json` umgesetzt
+- [ ] Design entspricht `design_tokens.json` und `stylesheet.css`
+- [ ] Keine eigenmächtigen Design-Entscheidungen
+- [ ] CLIENT_OVERRIDES.md berücksichtigt (falls vorhanden)
+
+### Dokumentation
+
+- [ ] Änderungen in `generation_log.json` maschinell dokumentiert
+
+---
+
+## Browser-Kompatibilität
+
+Unterstützte Browser (letzte 2 Major-Versionen):
+
+- [ ] Chrome
+- [ ] Firefox
+- [ ] Safari
+- [ ] Edge
+
+Bei bekannten Inkompatibilitäten: dokumentieren und Workaround bereitstellen.
+
+---
+
+## Schnell-Checkliste
+
+Vor Abschluss jeder Aufgabe durchgehen:
+
+```
+[ ] 1. npm run build erfolgreich?
+[ ] 2. Mobile (320px) geprüft?
+[ ] 3. Tablet (768px) geprüft?
+[ ] 4. Desktop (1024px+) geprüft?
+[ ] 5. Kontrast WCAG AA erfüllt?
+[ ] 6. Tastatur-Navigation funktioniert?
+[ ] 7. SEO-Basics vorhanden (title, description, h1)?
+[ ] 8. Anforderungen aus ProjectSpec erfüllt?
+[ ] 9. Kein Dead Code oder ungenutzte Dependencies?
+[ ] 10. generation_log.json aktualisiert?
+```
+
+---
+
+## Zusammenfassung
+
+> Erst wenn alle Checkboxen erfüllt sind, gilt eine Aufgabe als erledigt.
+> Keine Ausnahmen ohne explizite Dokumentation und Begründung.
+> Build-Fehler sind Blocker. Accessibility-Verstöße sind Blocker.

skills/SYSTEM_SKILLS.md

@@ -0,0 +1,214 @@
+# System Skills
+
+Verbindliche Regeln für die KI-gestützte Website-Generierung im Agentur-Kontext.
+
+---
+
+## Scope
+
+Diese Datei definiert den **harten Rahmen** für:
+- Arbeitsweise und Workflow
+- Code-Qualität und Repo-Konventionen
+- Source of Truth für Design und Anforderungen
+- Verbote und Pflichten
+
+**Geltungsbereich:** Gilt global für jedes Projekt. CLIENT_OVERRIDES.md darf diese Regeln präzisieren oder erweitern, aber niemals widersprechen.
+
+---
+
+## Read Order
+
+Die KI muss Dateien in folgender Reihenfolge lesen:
+
+1. `skills/SYSTEM_SKILLS.md` (diese Datei)
+2. `skills/UI_GUIDELINES.md`
+3. `skills/DEFINITION_OF_DONE.md`
+4. `skills/CLIENT_OVERRIDES.md` (falls vorhanden)
+5. `spec/ProjectSpec.json`
+6. `spec/design_tokens.json`
+7. `theme/stylesheet.css` / `theme/globals.css`
+
+Bei Konflikten gilt: **Globale Skills > Client Overrides**
+
+---
+
+## Non-Goals
+
+Diese Datei definiert **NICHT**:
+- Konkrete Design-Vorgaben (Farben, Layouts, Abstände)
+- UI-Templates oder vorgefertigte Komponenten
+- Visuelle Entscheidungen jeglicher Art
+- Landingpage-Strukturen oder Section-Vorlagen
+
+Design entsteht ausschließlich aus den Projekt-Specs, nicht aus diesen Skills.
+
+---
+
+## Source of Truth
+
+Das Design und die Anforderungen einer Website basieren ausschließlich auf:
+
+| Quelle | Inhalt |
+|--------|--------|
+| `spec/ProjectSpec.json` | Projektanforderungen, Ziele, Inhalte |
+| `spec/design_tokens.json` | Farben, Typografie, Spacing-System |
+| `theme/stylesheet.css` | Projektspezifische Styles |
+| `theme/globals.css` | Globale CSS-Variablen und Resets |
+
+**Regel:** Keine Design-Entscheidung ohne Grundlage in diesen Quellen.
+
+---
+
+## Verbote
+
+### Absolut verboten:
+- **KEINE** Templates oder vorgefertigten Layouts
+- **KEINE** Copy-Paste-Strukturen aus anderen Projekten
+- **KEINE** Boilerplate-Landingpages
+- **KEINE** Standard-Hero/Feature/CTA-Sections ohne Spec-Grundlage
+- **KEINE** eigenmächtigen Design-Entscheidungen
+- **KEINE** hardcodierten Farben, Größen oder Abstände
+- **KEINE** UI-Libraries (shadcn, MUI, Chakra, Radix, etc.)
+- **KEINE** CSS-Frameworks außer Tailwind (falls im Projekt konfiguriert)
+- **KEINE** inline Styles (außer dynamische Werte)
+- **KEINE** `!important` (außer dokumentierte Ausnahmen)
+- **KEINE** Secrets im Repository (nur .env, .env.local)
+
+### Daten und Secrets:
+- Sensible Daten gehören in `.env` / `.env.local`
+- `.env*` Dateien sind in `.gitignore`
+- API-Keys, Passwörter, Tokens niemals committen
+
+---
+
+## Arbeitsprozess
+
+Jede Aufgabe folgt diesem Ablauf:
+
+### 1. Lesen
+- `/skills` vollständig lesen
+- `/spec` vollständig lesen
+- Bestehenden Code verstehen
+
+### 2. Planen
+- Anforderungen analysieren
+- Struktur und Komponenten konzipieren
+- Abhängigkeiten identifizieren
+
+### 3. Implementieren
+- Code schreiben
+- Design-Tokens verwenden
+- Keine eigenmächtigen Entscheidungen
+
+### 4. Self-Check
+- `npm run build` ausführen
+- Gegen Definition of Done validieren
+- Responsive und Accessibility prüfen
+
+### 5. Dokumentieren
+- Änderungen in `generation_log.json` maschinell festhalten
+- Keine manuellen Einträge im Log
+
+---
+
+## Coding-Standards
+
+### TypeScript
+
+- **Strict Mode** ist Pflicht
+- Keine `any` Types
+- Explizite Typdefinitionen für Props und State
+- Keine Type-Assertions ohne Notwendigkeit
+- Strict null checks beachten
+
+```typescript
+// Korrekt
+interface ComponentProps {
+  title: string;
+  items: ReadonlyArray<Item>;
+  onSelect?: (item: Item) => void;
+}
+
+// Falsch
+const props: any = { ... }
+```
+
+### React / Next.js
+
+- Funktionale Komponenten
+- Server Components wo möglich
+- Client Components nur wenn nötig (`"use client"`)
+- Keine unnötigen `useEffect` / `useState`
+- Keine Over-Abstraktionen
+
+### CSS
+
+- CSS-Variablen aus `globals.css` verwenden
+- Tailwind für Utility-Klassen (falls konfiguriert)
+- Eigene Klassen für wiederverwendbare Patterns
+- Mobile-first Breakpoints
+
+```css
+.element {
+  color: var(--color-foreground);
+  padding: var(--spacing-md);
+}
+```
+
+### Allgemein
+
+- Lesbarkeit > Cleverness
+- Keine unnötigen Abstraktionen
+- Keine Over-Engineering
+- Konsistente Namenskonventionen
+- Keine auskommentierten Code-Blöcke
+- Keine `console.log` im Production-Code
+
+---
+
+## Pflichten
+
+### Performance
+
+- Core Web Vitals optimieren
+- Lazy Loading für Below-the-fold-Inhalte
+- Kritisches CSS inline
+- JavaScript-Bundle minimieren
+- Fonts optimieren (`display: swap`)
+- Bildformate: WebP/AVIF bevorzugen
+- Keine unnötigen Dependencies
+
+### SEO
+
+- Semantisches HTML (`header`, `main`, `nav`, `article`, `section`, `footer`)
+- Korrekte Heading-Hierarchie (`h1` > `h2` > `h3`)
+- Meta-Tags (`title`, `description`)
+- Open Graph Tags
+- Alt-Texte für alle Bilder
+- Strukturierte Daten wo sinnvoll
+
+### Mobile-First
+
+- Responsive Design ist Pflicht
+- Touch-Targets mindestens 44x44px
+- Keine horizontalen Scrollbars
+- Lesbare Schriftgrößen ohne Zoom
+
+---
+
+## Logging
+
+### generation_log.json
+
+- Nur maschinell befüllen
+- Keine manuellen Einträge
+- Dokumentiert: was wurde generiert, wann, welche Dateien
+- Dient der Nachvollziehbarkeit
+
+---
+
+## Zusammenfassung
+
+> Jede Website ist einzigartig. Design kommt aus den Specs, nicht aus dem Bauch.
+> Code ist sauber, typisiert und wartbar. Build muss laufen.
+> Diese Regeln sind nicht verhandelbar.

skills/UI_GUIDELINES.md

@@ -0,0 +1,299 @@
+# UI Guidelines
+
+Qualitätsregeln für Benutzeroberflächen. Keine Designvorgaben.
+
+---
+
+## Scope
+
+Diese Datei definiert **Qualitätsanforderungen** für:
+- Accessibility (Barrierefreiheit)
+- Responsive Design (Mobile-First)
+- Performance-Budgets
+- SEO-Grundlagen
+- GEO/AI-Search-Optimierung
+- Interaktionsqualität
+
+**Geltungsbereich:** Gilt global für jedes Projekt. Definiert WIE UI gebaut wird, nicht WIE sie aussieht.
+
+---
+
+## Read Order
+
+Diese Datei wird nach `SYSTEM_SKILLS.md` gelesen:
+
+1. `skills/SYSTEM_SKILLS.md`
+2. `skills/UI_GUIDELINES.md` (diese Datei)
+3. `skills/DEFINITION_OF_DONE.md`
+4. `skills/CLIENT_OVERRIDES.md`
+5. Projekt-Specs
+
+---
+
+## Non-Goals
+
+Diese Datei definiert **NICHT**:
+- Welche Farben verwendet werden (kommt aus Tokens)
+- Welche Schriftarten verwendet werden (kommt aus Tokens)
+- Welche Layouts oder Sections erstellt werden (kommt aus ProjectSpec)
+- Konkrete visuelle Gestaltung
+- UI-Templates oder Komponenten-Vorlagen
+
+**Regel:** Alle visuellen Entscheidungen kommen aus `design_tokens.json` und `stylesheet.css`.
+
+---
+
+## Accessibility (Barrierefreiheit)
+
+### WCAG 2.1 Level AA
+
+Jede UI muss mindestens WCAG 2.1 Level AA erfüllen:
+
+| Anforderung | Kriterium |
+|-------------|-----------|
+| Kontrast (normaler Text) | mindestens 4.5:1 |
+| Kontrast (großer Text) | mindestens 3:1 |
+| Kontrast (UI-Elemente) | mindestens 3:1 |
+| Fokus-Indikator | sichtbar für alle interaktiven Elemente |
+| Tastatur-Navigation | vollständig ohne Maus bedienbar |
+| Screen Reader | alle Inhalte zugänglich |
+
+### Semantisches HTML
+
+```html
+<!-- Korrekt -->
+<button type="button">Aktion ausführen</button>
+<a href="/kontakt">Zum Kontaktformular</a>
+<nav aria-label="Hauptnavigation">...</nav>
+
+<!-- Falsch -->
+<div onclick="...">Aktion ausführen</div>
+<span class="link">Zum Kontaktformular</span>
+<div class="nav">...</div>
+```
+
+### ARIA-Attribute
+
+- ARIA nur verwenden, wenn natives HTML nicht ausreicht
+- `aria-label` für Icons ohne sichtbaren Text
+- `aria-expanded`, `aria-hidden` für dynamische Inhalte
+- `aria-live` für dynamische Updates (z.B. Fehlermeldungen)
+- `role` nur wenn semantisches HTML keine Option ist
+
+### Formulare
+
+- Jedes Eingabefeld braucht ein sichtbares `<label>`
+- Fehlermeldungen sind klar, hilfreich und programmatisch verknüpft
+- Pflichtfelder sind gekennzeichnet (`aria-required`)
+- Validierung sowohl visuell als auch für Screenreader
+- Autofill-Attribute (`autocomplete`) wo sinnvoll
+
+### Nicht nur Farbe
+
+- Informationen nie nur durch Farbe vermitteln
+- Zusätzliche Indikatoren: Icons, Text, Muster, Unterstreichungen
+
+---
+
+## Responsive Design
+
+### Mobile-First Pflicht
+
+Basis-Styles gelten für Mobile. Erweiterungen für größere Screens:
+
+```css
+/* Basis: Mobile (< 640px) */
+.element {
+  flex-direction: column;
+  padding: var(--spacing-sm);
+}
+
+/* Tablet und größer */
+@media (min-width: 768px) {
+  .element {
+    flex-direction: row;
+    padding: var(--spacing-md);
+  }
+}
+```
+
+### Breakpoints
+
+Breakpoints aus `design_tokens.json` verwenden:
+
+| Token | Wert | Gerät |
+|-------|------|-------|
+| `sm` | 640px | Große Smartphones |
+| `md` | 768px | Tablets |
+| `lg` | 1024px | Kleine Laptops |
+| `xl` | 1280px | Desktop |
+| `2xl` | 1536px | Große Screens |
+
+### Prüfpflicht
+
+- Minimum: 320px (kleine Smartphones)
+- Maximum: unbegrenzt (fluid bis Container-Max)
+- Keine horizontalen Scrollbars
+- Keine abgeschnittenen Inhalte
+- Touch-Targets: mindestens 44x44px
+
+### Fluid Typography
+
+Schriftgrößen skalieren responsiv (wenn in Tokens definiert):
+
+```css
+font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
+```
+
+---
+
+## SEO Basics
+
+### Pflicht-Elemente pro Seite
+
+- [ ] Eindeutiger `<title>` (50-60 Zeichen)
+- [ ] Meta-Description (150-160 Zeichen)
+- [ ] Korrekte Heading-Hierarchie (`h1` > `h2` > `h3`, nur ein `h1` pro Seite)
+- [ ] Alt-Texte für alle informativen Bilder
+- [ ] Open Graph Tags (`og:title`, `og:description`, `og:image`)
+- [ ] Canonical URL (bei Duplicate Content)
+
+### Strukturierte Inhalte
+
+- Semantische HTML-Elemente verwenden
+- Strukturierte Daten (JSON-LD) wo sinnvoll:
+  - Organization
+  - LocalBusiness
+  - FAQ
+  - BreadcrumbList
+  - Article
+
+### Technisches SEO
+
+- Sprechende URLs
+- `robots.txt` vorhanden
+- `sitemap.xml` generiert
+- Keine Duplicate Content ohne Canonical
+- Keine Blocking-Resources im Critical Path
+
+---
+
+## GEO / AI-Search-Optimierung
+
+### Klare Informationsarchitektur
+
+- Prägnante, gut strukturierte Abschnitte
+- Klare Überschriften, die den Inhalt beschreiben
+- Faktenbasierte, zitierbare Aussagen
+- Keine Marketing-Floskeln ohne Substanz
+
+### FAQ wo sinnvoll
+
+- FAQ-Schema für häufige Fragen
+- Klare Frage-Antwort-Struktur
+- Direkte, hilfreiche Antworten
+
+### Zitierbarkeit
+
+- Unique Content mit klarem Mehrwert
+- Quellenangaben wo relevant
+- Autorenschaft und Expertise zeigen (E-E-A-T)
+
+---
+
+## Performance Budget
+
+### Core Web Vitals Ziele
+
+| Metrik | Ziel | Beschreibung |
+|--------|------|--------------|
+| LCP | < 2.5s | Largest Contentful Paint |
+| INP | < 200ms | Interaction to Next Paint |
+| CLS | < 0.1 | Cumulative Layout Shift |
+
+### Asset-Limits
+
+| Asset-Typ | Maximum |
+|-----------|---------|
+| JavaScript Bundle (gzip) | < 100kb |
+| CSS Bundle (gzip) | < 30kb |
+| Einzelbild | < 200kb |
+| Gesamte Seite | < 1.5MB |
+
+### Optimierungspflichten
+
+- Bilder: WebP/AVIF, responsive `srcset`, Lazy Loading
+- Fonts: Subset, `display: swap`, Preload für kritische Fonts
+- JavaScript: Code-Splitting, Tree-Shaking, defer/async
+- CSS: Kritisches CSS inline, Rest async laden
+
+---
+
+## Interaktionen
+
+### Feedback-Pflicht
+
+- Hover-States für alle klickbaren Elemente
+- Focus-States sichtbar und deutlich
+- Loading-States für asynchrone Aktionen
+- Erfolgs- und Fehlermeldungen klar kommunizieren
+
+### Animationen
+
+- Subtil und zweckmäßig (nicht dekorativ)
+- `prefers-reduced-motion` respektieren
+- UI-Feedback-Animationen < 300ms
+- Keine automatisch startenden Videos/Animationen
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+---
+
+## Typografie (Qualität, nicht Design)
+
+### Lesbarkeit
+
+- Zeilenlänge: 45-75 Zeichen optimal
+- Zeilenabstand: 1.4-1.6 für Fließtext
+- Ausreichende Absatzabstände
+
+### Hierarchie
+
+- Klare visuelle Hierarchie durch Größen/Gewichte
+- Konsistente Heading-Levels
+- Logische Informationsstruktur
+
+**Hinweis:** Konkrete Schriftarten, -größen und -farben kommen aus `design_tokens.json`.
+
+---
+
+## Farben (Qualität, nicht Design)
+
+### Kontrastprüfung
+
+Alle Farbkombinationen müssen geprüft werden:
+- Tool: WebAIM Contrast Checker oder ähnlich
+- Dokumentierte Ausnahmen sind möglich, aber selten
+
+### Herkunft
+
+- Alle Farben kommen aus `design_tokens.json` oder `stylesheet.css`
+- Keine hardcodierten Hex/RGB-Werte im Code
+- CSS-Variablen verwenden
+
+---
+
+## Zusammenfassung
+
+> UI muss zugänglich, responsive, performant und suchmaschinenoptimiert sein.
+> Diese Guidelines definieren Qualitätsstandards, nicht visuelles Design.
+> Design-Entscheidungen kommen aus den Projekt-Specs.