Initialize client project from skeleton

Client: test
Generated: 2026-02-03T14:52:51.711Z

meta/generation_log.json

@@ -1,4 +1,18 @@
-{
-  "version": "1.0.0",
-  "entries": []
-}
+[
+  {
+    "projectId": "78a9bea6-8b19-4684-8460-fd710d71d5ce",
+    "generatedAt": "2026-02-03T14:52:51.711Z",
+    "generator": "website-prototype-generator",
+    "specVersion": "1.0",
+    "llmUsed": true,
+    "artifacts": [
+      "design_tokens.json",
+      "CLIENT_OVERRIDES.md",
+      "master_prompt.md",
+      "globals.css",
+      "stylesheet.css",
+      "READ_FIRST.md",
+      "ProjectSpec.json"
+    ]
+  }
+]

prompts/master_prompt.md

@@ -1,107 +1,486 @@
-# Master Prompt
+# Website-Build Masterprompt v2
 
-Anweisungen für die KI zur Website-Generierung.
+> Projekt: **test** | Branche: Digitale Dienstleistungen | Sprache: de
+
+## 0. Research & Kontext
+
+> **Nutze diese Insights als Fundament für alle Design- und Content-Entscheidungen.**
+
+### Branchen-Insights
+1. Digitalisierung: Unternehmen in Österreich setzen verstärkt auf digitale Transformation, um Prozesse zu optimieren und Kunden besser zu erreichen. 2. Nachhaltigkeit: Es gibt einen wachsenden Trend zu nachhaltigen Geschäftspraktiken, der auch die Online-Präsenz beeinflusst. 3. Personalisierung: Websites in der Branche bieten zunehmend personalisierte Inhalte und Erlebnisse, um die Kundenbindung zu stärken. 4. Mobile-First-Design: Da immer mehr Nutzer über mobile Geräte auf Websites zugreifen, ist ein responsives Design unerlässlich. 5. Datenschutz: Strengere Datenschutzbestimmungen erfordern transparente und sichere Datenverarbeitungspraktiken.
+
+### Wettbewerbsanalyse
+Typische Websites in der Branche zeichnen sich durch klare, strukturierte Layouts mit einfacher Navigation aus. Häufige Features sind detaillierte Produkt- oder Dienstleistungsbeschreibungen, Kundenbewertungen und Kontaktformulare. Wettbewerber punkten oft mit ansprechendem Design und klaren Call-to-Actions, jedoch gibt es oft Lücken in der Personalisierung und Interaktivität.
+
+### Zielgruppen-Analyse
+Die Zielgruppe besteht aus Personen im Alter von 25-55 Jahren mit fortgeschrittenem Wissensstand. Sie sind rational und treffen Entscheidungen basierend auf Fakten und logischen Argumenten. Ihre Bedürfnisse umfassen zuverlässige Informationen, Transparenz und effiziente Lösungen. Einwände könnten sich auf Preis-Leistungs-Verhältnisse und Servicequalität beziehen. Entscheidungskriterien sind oft Kosten, Nutzen und Zuverlässigkeit.
+
+### UX-Empfehlungen
+Die Navigation sollte intuitiv und einfach sein, mit klaren Menüpunkten und einer logischen Struktur. Interaktive Elemente wie Chatbots oder FAQ-Bereiche können den fortgeschrittenen Wissensstand der Zielgruppe unterstützen. Eine klare und schnelle Informationsvermittlung ist entscheidend.
+
+### Conversion-Strategie
+Um die rationale Zielgruppe zu überzeugen, sollten CTAs klar und direkt sein, wie z.B. 'Mehr erfahren' oder 'Jetzt kontaktieren'. Vertrauenselemente wie Kundenbewertungen, Zertifikate und Fallstudien sind wichtig. Die Argumentationsstruktur sollte auf Fakten, Nutzen und Effizienz basieren.
+
+### Vorgeschlagene Alleinstellungsmerkmale (USPs)
+- Regionale Expertise in Österreich
+- Nachhaltige und innovative Lösungen
+- Personalisierte Dienstleistungen
+- Hohe Effizienz und Zuverlässigkeit
+- Starke Kundenorientierung
+
+### SEO-Keywords
+Dienstleistungen Österreich, digitale Transformation, nachhaltige Geschäftspraktiken, Personalisierung, Mobile-First-Design, Datenschutz Österreich, KMU Österreich, regionale Dienstleistungen, kundenorientierte Lösungen, effiziente Prozesse, innovative Technologien, lokale Unternehmen, Österreich Markt, digitale Lösungen, kundenfreundliche Services
+
+### Content-Richtlinien
+Die Kommunikation sollte freundlich und prägnant sein, mit einer klaren Ansprache in der Sie-Form. Die Botschaften sollten den Nutzen und die Effizienz der Dienstleistungen hervorheben, Vertrauen schaffen und die Rationalität der Zielgruppe ansprechen.
 
 ---
 
-## Kontext
+## 🚨 KI-KONTEXT (HÖCHSTE GEWICHTUNG)
 
-Du arbeitest mit einem minimalistischen Website-Skeleton. Dieses Repository enthält:
+> **KRITISCH:** Diese Vorgaben haben die **höchste Priorität** und überschreiben ALLE anderen Regeln, sofern nicht mit SYSTEM_SKILLS kollidierend.
 
-- Keine fertigen Layouts
-- Keine UI-Komponenten
-- Keine Design-Vorgaben
+### ✅ Was bei dieser Website BESONDERS WICHTIG ist:
 
-Alles muss von Grund auf neu erstellt werden.
+Kundenorientierung, Effizienz, Nachhaltigkeit
+
+### ❌ Was AUF KEINEN FALL passieren darf:
+
+Komplexität, Unklarheit
+
+### 👍 Positive Referenzen (SO soll es sein):
+
+- Klar strukturierte Navigation
+- Personalisierte Inhalte
+
+### 👎 Negative Referenzen (SO NICHT):
+
+- Überladene Seiten
+- Langsame Ladezeiten
+
+**WICHTIG:** Prüfe bei JEDER Designentscheidung, ob sie mit diesem KI-Kontext übereinstimmt. Bei Konflikten: KI-Kontext hat Vorrang vor generischen Regeln.
 
 ---
 
-## Vor dem Start
+## 1. Lesereihenfolge (PFLICHT)
 
-**Pflichtlektüre** (in dieser Reihenfolge):
+**Du MUSST die folgenden Dateien in dieser EXAKTEN Reihenfolge lesen**, bevor du irgendeine Zeile Code schreibst:
 
-1. `/skills/SYSTEM_SKILLS.md` - Grundregeln
-2. `/skills/UI_GUIDELINES.md` - Qualitätsstandards
-3. `/skills/DEFINITION_OF_DONE.md` - Abnahmekriterien
-4. `/spec/ProjectSpec.json` - Projektanforderungen
-5. `/spec/design_tokens.json` - Design-System
+1. `READ_FIRST.md` (Projektübersicht & Regeln)
+2. `skills/SYSTEM_SKILLS.md` (globale System-Skills – **nicht überschreibbar**)
+3. `skills/UI_GUIDELINES.md` (UI-Richtlinien – **nicht überschreibbar**)
+4. `skills/DEFINITION_OF_DONE.md` (Definition of Done – **nicht überschreibbar**)
+5. `skills/CLIENT_OVERRIDES.md` (kundenspezifische Ergänzungen)
+6. `spec/ProjectSpec.json` (Projektspezifikation)
+7. `spec/design_tokens.json` (Design-Token – **Single Source of Truth**)
+8. `theme/globals.css` (CSS Custom Properties – **Single Source of Truth**)
+9. `theme/stylesheet.css` (Strukturelles CSS-Framework)
 
----
+**Erst nach dem Lesen aller Dateien darfst du mit der Implementierung beginnen.**
 
-## Workflow
+## 2. Strikte Regeln (Non-Negotiable)
 
-### 1. Analyse
+### VERBOTEN (sofortige Verletzung)
 
-- ProjectSpec.json vollständig lesen und verstehen
-- Design Tokens studieren
-- Zielgruppe und Ziele identifizieren
-- Technische Anforderungen erfassen
+Die folgenden Praktiken sind **absolut verboten** und führen zu einem ungültigen Build:
 
-### 2. Konzeption
+1. **Keine Inline-Styles:** `style={{ ... }}` oder `style="..."` ist in JEDER Komponente verboten. Ausnahme: Dynamische Werte, die nur zur Laufzeit bekannt sind (z.B. `style={{ '--progress': value }}`). Alle anderen Styles kommen aus CSS-Klassen oder Tailwind-Utilities.
+2. **Keine harten Pixelwerte:** Kein `fontSize: 24px`, kein `padding: 40px`, kein `margin: 16px` in Styles oder Tailwind-Klassen wie `p-[40px]`. Nutze IMMER Design-Token-Variablen.
+3. **Kein Content ohne Struktur:** Kein Content darf direkt in `<main>`, `<div>` oder Root-Level landen. JEDER Content-Block MUSS in `<section className="section">` → `<div className="container">` eingebettet sein.
+4. **Keine wilde Button-Erstellung:** Buttons dürfen NICHT mit eigenen bg/text-Farbkombinationen erzeugt werden. NUR die definierten Button-Varianten aus `stylesheet.css` verwenden: `.btn-primary`, `.btn-secondary`, `.btn-outline`, `.btn-ghost`.
+5. **Kein Lorem Ipsum:** Niemals `Lorem ipsum` oder andere Dummy-Texte verwenden. Nutze stattdessen branchenspezifische, professionelle Platzhalter-Texte in der Sprache des Projekts.
+6. **Keine chaotischen Tailwind-Klassen:** Keine Kombinationen, die Text- und Hintergrundfarbe kollidieren oder Kontrast zerstören. Keine `className`-Strings mit mehr als 10 Utility-Klassen – extrahiere in CSS-Klassen.
 
-- Seitenstruktur planen
-- Komponenten identifizieren (keine vorgefertigten!)
-- Responsive Breakpoints berücksichtigen
-- Performance-Budget einplanen
+### Strukturelle Pflichten
 
-### 3. Umsetzung
+#### Section/Container-System (PFLICHT)
+Jede Seite MUSS dieser Struktur folgen:
 
-- Mobile-First entwickeln
-- Semantisches HTML verwenden
-- CSS Variables aus globals.css nutzen
-- Tailwind für Utility-Klassen
-- TypeScript strict mode
-
-### 4. Qualitätssicherung
-
-- Definition of Done prüfen
-- Alle Breakpoints testen
-- Accessibility validieren
-- Performance messen
-
-### 5. Dokumentation
-
-- Änderungen in `generation_log.json` festhalten
-- Entscheidungen dokumentieren
-
----
-
-## Beispiel-Prompt für neue Website
-
-```
-Erstelle eine Website für [Kunde] basierend auf:
-
-1. ProjectSpec.json wurde aktualisiert mit:
-   - Firmenname: [Name]
-   - Branche: [Branche]
-   - Zielgruppe: [Zielgruppe]
-   - Gewünschte Seiten: [Liste]
-
-2. design_tokens.json wurde aktualisiert mit:
-   - Primärfarbe: [Farbe]
-   - Schriftart: [Font]
-   - [weitere Anpassungen]
-
-Bitte lies zuerst /skills und /spec vollständig.
+```tsx
+<main>
+  <section className="section section--hero">
+    <div className="container">
+      {/* Hero-Content */}
+    </div>
+  </section>
+  <section className="section">
+    <div className="container">
+      {/* Weitere Section */}
+    </div>
+  </section>
+</main>
 ```
 
----
+Verfügbare Section-Varianten:
+- `.section` – Standard (padding: `--spacing-section`)
+- `.section--sm` – Kompakt (padding: `--spacing-2xl`)
+- `.section--lg` – Großzügig (padding: `--spacing-5xl`)
+- `.section--hero` – Hero-Bereich (min-height: 80vh, vertikal zentriert)
+- `.section--flush` – Kein Padding (für Bilder, Maps etc.)
 
-## Verbote (Wiederholung)
+Container-Varianten:
+- `.container` – Standard (max-width: `--spacing-container`)
+- `.container--narrow` – Schmaler (max-width: 48rem, für Text-Content)
+- `.container--wide` – Breiter (max-width: 90rem, für Galerien)
 
-- KEINE UI-Libraries
-- KEINE Templates kopieren
-- KEINE eigenmächtigen Design-Entscheidungen
-- KEINE hardcodierten Werte
-- KEIN Over-Engineering
+#### Button-System (PFLICHT)
+Buttons werden AUSSCHLIESSLICH über das Variant-System erzeugt:
+
+```tsx
+// RICHTIG:
+<button className="btn btn-primary">Jetzt starten</button>
+<button className="btn btn-secondary btn-lg">Mehr erfahren</button>
+<button className="btn btn-outline">Kontakt</button>
+<a href="/kontakt" className="btn btn-ghost">Details →</a>
+
+// FALSCH (VERBOTEN):
+<button className="bg-blue-500 text-white px-4 py-2 rounded">Klick</button>
+<button style={{ backgroundColor: "blue" }}>Klick</button>
+```
+
+Verfügbare Button-Varianten:
+- `.btn.btn-primary` – Hauptaktion / CTA
+- `.btn.btn-secondary` – Sekundäre Aktion
+- `.btn.btn-outline` – Umrandung, transparent
+- `.btn.btn-ghost` – Minimal, text-artig
+- Größen: `.btn-sm`, `.btn-lg`
+
+#### Typografie-System (PFLICHT)
+Headlines und Texte MÜSSEN über das definierte System gestylt werden:
+
+```tsx
+// RICHTIG: Nutze HTML-Heading-Tags (automatisch gestylt)
+<h1>Hauptüberschrift</h1>
+<h2>Unterüberschrift</h2>
+<p className="lead">Einleitungstext</p>
+<p className="text-muted">Ergänzender Text</p>
+
+// Oder Klassen, wenn semantisches Level abweicht:
+<h3 className="heading-2">Visuell groß, semantisch h3</h3>
+
+// FALSCH (VERBOTEN):
+<p style={{ fontSize: "32px" }}>Groß</p>
+<span className="text-[42px]">Riesig</span>
+```
+
+#### Vertikale Abstände (PFLICHT)
+Verwende IMMER die Spacing-Utilities:
+- `.stack-xs` bis `.stack-2xl` für vertikale Abstände zwischen Kind-Elementen
+- Tailwind spacing mit Token-Werten: `gap-[var(--spacing-md)]`, `mb-[var(--spacing-lg)]`
+- NIEMALS: `mb-[47px]`, `gap-[23px]`, `mt-[100px]`
+
+### Design & Styling
+- **Keine Templates:** Verwende KEINE vorgefertigten UI-Templates, Themes oder Section-Bibliotheken (kein shadcn, kein tailwindui, keine Copy-Paste-Sections).
+- **Design nur aus Tokens:** Jede Farbe, jedes Spacing, jede Schriftgröße MUSS aus `globals.css` Custom Properties kommen. KEINE Hardcoded-Werte im Code.
+- **Keine UI-Libraries:** Kein shadcn/ui, kein Material UI, kein Chakra UI, kein daisyUI. Nur native Tailwind CSS v4 + Custom Components.
+- **Tailwind v4:** Nutze die neuen v4 Features (CSS-first config, `@theme` directive).
+- **Card-Komponente:** Nutze `.card` aus stylesheet.css für Karten-Layouts. Keine eigenen border/shadow-Kombinationen.
+
+### Architecture
+- **Skill-Hierarchie:** `SYSTEM_SKILLS > UI_GUIDELINES > DEFINITION_OF_DONE > CLIENT_OVERRIDES`
+  - CLIENT_OVERRIDES dürfen globale Regeln NICHT brechen, nur ergänzen.
+- **TypeScript strict:** Alle Dateien in TypeScript. `strict: true` in tsconfig. Keine `any` Types (außer bei externen Libraries ohne Types).
+- **Stack:** Next.js 16 App Router, React 19, TypeScript 5+, Tailwind CSS v4, framer-motion (sparsam), lucide-react.
+- **File Structure:** Folge der Next.js 16 App Router Convention. Routes in `app/`, Components in `components/`.
+- **No New Dependencies:** Füge KEINE neuen npm packages ohne explizite Begründung hinzu. Nutze den vorhandenen Stack.
+
+### Qualitätsstandard: Launch-Ready
+
+Die generierte Website MUSS so aussehen, als wäre sie **90 % fertig und bereit für den Go-Live** – NICHT wie ein Prototyp oder eine Demo:
+
+- **Sinnvolle Abstände:** Großzügiges Whitespace zwischen Sections. Keine gedrängten Inhalte.
+- **Professionelle Platzhalter:** Wenn Inhalte fehlen, nutze branchenspezifische, realistische Texte. KEIN Lorem Ipsum, KEIN "Placeholder".
+- **Keine leeren Sections:** Jede Section MUSS visuellen Wert bieten. Keine Sections mit nur einer Zeile Text.
+- **Visuelle Ruhe:** Maximal 2 verschiedene Schriftgrößen pro Section. Einheitliche Ausrichtung. Konsistente Farbanwendung.
+- **Professionelle Bilder:** Verwende hochwertige Placeholder-Bilder (Unsplash/Pexels via next/image mit blur placeholder).
+
+### Performance & Accessibility
+- **framer-motion sparsam:** Nur für key interactions. Keine Animationen auf jedem Element.
+- **Lenis:** NICHT aktivieren, es sei denn CLIENT_OVERRIDES fordert es explizit.
+- **Accessibility:** Semantisches HTML5, ARIA-Labels wo nötig, Keyboard-Navigation, WCAG AA minimum.
+- **Performance:** Keine unnötigen Client Components. Nutze Server Components wo möglich. Next.js Image für alle Bilder.
+
+## 3. Projekt-Parameter & Identität
+
+### A) Unternehmensidentität & Kontext
+
+- **Kunde:** test
+- **Slug:** test
+- **Beschreibung:** test
+- **Branche:** Digitale Dienstleistungen
+- **Standort:** Wien, Wien, Österreich
+- **Einzugsgebiet:** regional
+- **Unternehmensgröße:** kmu
+- **Reifegrad:** etabliert
+- **Locale:** de-AT
+- **Sprache:** de (Alle Texte in dieser Sprache!)
+
+### B) Zielgruppe & Psychografie
+
+- **Hauptzielgruppe:** Unternehmen und Fachkräfte im Bereich digitale Transformation
+- **Altersbereich:** 25–55 Jahre
+- **Geschlecht:** egal
+- **Entscheidertyp:** rational
+- **Wissensstand:** fortgeschritten
+- **Typische Einwände:**
+  - Preis-Leistungs-Verhältnis
+  - Servicequalität
+- **Hauptprobleme der Zielgruppe:**
+  - Effizienzsteigerung
+  - Nachhaltige Lösungen
+
+### C) Tonalität & Kommunikation
+
+- **Ansprache:** sie
+- **Tonalität:** freundlich
+- **Schreibstil:** kurz_praegnant
+- **Emotionales Gefühl:** vertrauensvoll
+
+### D) Angebot & Leistungsstruktur
+
+- **Angebotstyp:** dienstleistung
+- **Anzahl Leistungen:** 2
+- **Leistungen:**
+  - **undefined**: undefined
+    - Nutzen: Optimierung von Geschäftsprozessen durch innovative digitale Lösungen
+  - **undefined**: undefined
+    - Nutzen: Reduzierung des ökologischen Fußabdrucks durch umweltfreundliche Technologien
+- **Preissensitivität:** mittel
+
+### F) Marken- & Stilparameter
+
+- **Primärfarbe:** #2563eb
+- **Sekundärfarbe:** #64748b
+- **Akzentfarbe:** #f59e0b
+- **Hintergrund:** #ffffff
+- **Vordergrund:** #0f172a
+- **Heading Font:** Inter
+- **Body Font:** Inter
+- **Stil-Adjektive:** modern, klar, vertrauenswürdig
+- **Stil-Verbote:** überladen, veraltet
+
+### G) UX & Interaktion
+
+- **Interaktionsniveau:** moderat
+- **Animationen:** dezent
+- **Scroll-Verhalten:** smooth
+
+### H) Conversion & Vertrauen
+
+- **Primärer CTA:** "Jetzt kontaktieren" → #kontakt
+- **Sekundärer CTA:** "Mehr erfahren" → #leistungen
+- **Kontaktmethoden:** formular, telefon
+- **Vertrauenselemente:** Kundenbewertungen, Zertifikate, Fallstudien
+
+## 4. Seitenstruktur & Anforderungen
+
+### Startseite (`/`)
+
+**Zweck:** Informieren | **Priorität:** Hoch
+
+**Beschreibung:** Entdecken Sie unsere digitalen Dienstleistungen für nachhaltige Transformation.
+
+**Content-Strategie:** Fokus auf Wissensvermittlung, klare Struktur, leicht verständliche Sprache. Informationen vor CTAs.
+
+**Sections:**
+- Hero
+- Leistungen
+- Kundenbewertungen
+- Kontakt
+
+**Route:** `app/page.tsx`
+
+**Mindestanforderungen:**
+- Responsive (Mobile-first)
+- Semantisches HTML (header, main, section, footer)
+- SEO Meta Tags (title, description, og:tags)
+- Call-to-Actions mit "Jetzt kontaktieren" und "Mehr erfahren"
+- Accessibility (ARIA labels, alt texts, keyboard nav)
+
+### Über Uns (`/ueber-uns`)
+
+**Zweck:** Informieren | **Priorität:** Mittel
+
+**Beschreibung:** Erfahren Sie mehr über unser erfahrenes Team und unsere Mission.
+
+**Content-Strategie:** Fokus auf Wissensvermittlung, klare Struktur, leicht verständliche Sprache. Informationen vor CTAs.
+
+**Sections:**
+- Team
+- Geschichte
+- Vision
+
+**Route:** `app/ueber-uns/page.tsx`
+
+**Mindestanforderungen:**
+- Responsive (Mobile-first)
+- Semantisches HTML (header, main, section, footer)
+- SEO Meta Tags (title, description, og:tags)
+- Call-to-Actions mit "Jetzt kontaktieren" und "Mehr erfahren"
+- Accessibility (ARIA labels, alt texts, keyboard nav)
+
+### Leistungen (`/leistungen`)
+
+**Zweck:** Überzeugen | **Priorität:** Hoch
+
+**Beschreibung:** Unsere Dienstleistungen für Ihre digitale Transformation.
+
+**Content-Strategie:** Fokus auf Argumentation & Nutzen, USPs hervorheben, Social Proof einbinden. Emotionale + rationale Ansprache.
+
+**Sections:**
+- Digitale Transformation
+- Nachhaltige IT-Lösungen
+- Personalisierte Beratung
+
+**Route:** `app/leistungen/page.tsx`
+
+**Mindestanforderungen:**
+- Responsive (Mobile-first)
+- Semantisches HTML (header, main, section, footer)
+- SEO Meta Tags (title, description, og:tags)
+- Call-to-Actions mit "Jetzt kontaktieren" und "Mehr erfahren"
+- Accessibility (ARIA labels, alt texts, keyboard nav)
+
+### Kontakt (`/kontakt`)
+
+**Zweck:** Konvertieren | **Priorität:** Hoch
+
+**Beschreibung:** Kontaktieren Sie uns für maßgeschneiderte digitale Lösungen.
+
+**Content-Strategie:** Fokus auf Handlungsaufforderung, prominente CTAs, Einwände adressieren, Conversion-Elemente (Trust, Urgency).
+
+**Sections:**
+- Kontaktformular
+- Standort
+- Öffnungszeiten
+
+**Route:** `app/kontakt/page.tsx`
+
+**Mindestanforderungen:**
+- Responsive (Mobile-first)
+- Semantisches HTML (header, main, section, footer)
+- SEO Meta Tags (title, description, og:tags)
+- Call-to-Actions mit "Jetzt kontaktieren" und "Mehr erfahren"
+- Accessibility (ARIA labels, alt texts, keyboard nav)
+
+## 5. Technische Anforderungen
+
+**Features:**
+- Responsive Design
+- SEO-Optimierung
+- SSL-Verschlüsselung
+
+**Domain:** www.test.at
+**Analytics:** Google Analytics
+**Hosting:** AWS
+
+## 6. Implementierungs-Reihenfolge
+
+Befolge diese Schritte in exakter Reihenfolge:
+
+1. **Plan erstellen:** Kurzer Plan (3-5 Bullet Points) mit deinem Implementierungsansatz.
+2. **Layout-Components:** Header, Footer, Navigation (in `components/layout/`). Header und Footer nutzen `<div className="container">` für Content-Begrenzung.
+3. **Shared Components:** Button-Komponente (nutzt `.btn` + Varianten-Klassen aus stylesheet.css), Card (nutzt `.card`), Form-Elemente (in `components/ui/`). KEINE eigenen Farb-/Spacing-Kombinationen.
+4. **Seiten implementieren:** In der Reihenfolge der Seitenstruktur (Abschnitt 4). JEDE Seite folgt dem Section/Container-Muster. Jede Section nutzt `<section className="section">` → `<div className="container">`.
+5. **Platzhalter-Inhalte:** Fehlende Texte durch branchenspezifische, professionelle Platzhalter ersetzen. Fehlende Bilder durch thematisch passende Unsplash-URLs.
+6. **SEO & Metadata:** Für jede Seite `metadata` export mit title, description, og:tags.
+7. **Accessibility Check:** Semantisches HTML, ARIA, Keyboard-Navigation prüfen.
+8. **Qualitätscheck:** Prüfe jede Seite auf: (a) Keine Inline-Styles, (b) Alle Sections in Section/Container, (c) Buttons nur über Varianten, (d) Typografie nur über System-Klassen, (e) Konsistente Abstände.
+9. **Performance Check:** Unnötige Client Components zu Server Components refactoren.
+10. **Build & Lint:** `npm run build && npm run lint` fehlerfrei. Bei Fehler: `.next`-Ordner löschen, erneut bauen.
+
+## 7. Offene Fragen (mit Client klären)
+
+**Die folgenden Informationen fehlen und müssen mit dem Client geklärt werden:**
+
+- **client.contact.email** (contact): Wie lautet die offizielle Kontakt-E-Mail-Adresse?
+
+**WICHTIG:** Für diese Felder darfst du NICHT raten. Frage den Client oder nutze Platzhalter-Werte mit klarer Kennzeichnung (z.B. "PLACEHOLDER: ...").
 
 ---
 
-## Ausgabe-Erwartung
+## 8. Definition of Done (Abnahme-Checkliste)
 
-Nach erfolgreicher Generierung:
+**Bevor du die Implementierung als fertig markierst, MÜSSEN alle diese Punkte erfüllt sein:**
 
-- Lauffähige Website unter `npm run dev`
-- Build erfolgreich unter `npm run build`
-- Alle DoD-Kriterien erfüllt
-- generation_log.json aktualisiert
+### Build & Code Quality
+- [ ] `npm run build` läuft fehlerfrei durch (0 Errors, 0 Warnings)
+- [ ] `npm run lint` meldet keine Fehler (0 Errors, Warnings OK)
+- [ ] TypeScript strict mode aktiv, keine `any` types
+- [ ] Alle Imports funktionieren, keine broken imports
+
+### Funktionalität
+- [ ] Alle Seiten aus Seitenstruktur (Abschnitt 4) existieren und sind erreichbar
+- [ ] Navigation funktioniert zwischen allen Seiten
+- [ ] Alle CTAs ("Jetzt kontaktieren", "Mehr erfahren") funktional
+- [ ] Kontaktformular (falls vorhanden) validiert Eingaben
+
+### Strukturelle Integrität
+- [ ] KEINE Inline-Styles (`style={{ }}` / `style=""`) im gesamten Code (Ausnahme: dynamische CSS-Variablen)
+- [ ] JEDE Section nutzt `<section className="section ...">` → `<div className="container ...">`
+- [ ] KEIN Content direkt in `<main>` oder `<div>` ohne Section/Container-Wrapper
+- [ ] ALLE Buttons nutzen `.btn` + Variante (`.btn-primary`, `.btn-secondary`, `.btn-outline`, `.btn-ghost`)
+- [ ] KEINE eigenen bg/text-Farbkombinationen auf Buttons
+- [ ] KEIN Lorem Ipsum – nur branchenspezifische Platzhalter-Texte
+
+### Design & Styling
+- [ ] Alle Farben kommen aus `globals.css` Custom Properties (keine Hardcoded Colors)
+- [ ] Alle Spacings nutzen Design Tokens (keine Magic Numbers, keine `p-[47px]`)
+- [ ] Typography nutzt Heading-Tags (h1–h6) oder `.heading-*` Klassen – KEINE harten Pixelwerte
+- [ ] Brand-konform (Farben, Fonts, Tonalität)
+- [ ] Visuelle Ruhe: Großzügige Abstände, keine gedrängten Sections
+- [ ] Maximal 10 Tailwind-Klassen pro Element (sonst in CSS-Klasse extrahieren)
+
+### Responsive & Cross-Browser
+- [ ] Mobile (320px - 767px): Layout funktioniert, Navigation collapsed
+- [ ] Tablet (768px - 1023px): Layout angepasst
+- [ ] Desktop (1024px+): Volle Breite, optimales Layout
+- [ ] Touch-Targets mindestens 44x44px (Mobile)
+
+### Accessibility (WCAG AA)
+- [ ] Semantisches HTML5 (header, nav, main, section, article, footer)
+- [ ] Alle Bilder haben alt-Texte
+- [ ] Farbkontraste min. 4.5:1 für Text, 3:1 für UI (automatisch geprüft)
+- [ ] Keyboard-Navigation funktioniert (Tab, Enter, Escape)
+- [ ] Focus-States sichtbar
+- [ ] ARIA-Labels wo semantisches HTML nicht ausreicht
+
+### Performance
+- [ ] Unnötige Client Components zu Server Components refactored
+- [ ] Bilder nutzen Next.js `<Image>` Component
+- [ ] Keine blocking Scripts in `<head>`
+- [ ] framer-motion nur sparsam eingesetzt (nicht überall)
+
+### SEO
+- [ ] Jede Seite hat `metadata` export (title, description)
+- [ ] Open Graph Tags gesetzt (og:title, og:description, og:image)
+- [ ] Strukturierte Daten (JSON-LD) für Organisation (Homepage)
+
+### Legal & Content
+- [ ] Impressum-Seite vorhanden (falls in Seitenstruktur)
+- [ ] Datenschutz-Seite vorhanden (falls in Seitenstruktur)
+- [ ] Alle Texte auf de
+
+## 9. Stop Conditions
+
+**In folgenden Situationen MUSST du stoppen und NICHT weitermachen:**
+
+1. **Unklare Anforderungen:** Wenn Spec-Felder "Nicht angegeben" enthalten oder unklar sind → Frage den Client (siehe Abschnitt 7).
+2. **Widersprüche:** Wenn CLIENT_OVERRIDES gegen SYSTEM_SKILLS/UI_GUIDELINES verstoßen → Melde das Problem.
+3. **Fehlende Assets:** Wenn Logo, Bilder oder andere Assets fehlen → Nutze Platzhalter mit klarer Kennzeichnung.
+4. **Build Errors:** Wenn `npm run build` fehlschlägt und du es nicht beheben kannst → Melde den Fehler mit Stack Trace.
+
+**NIEMALS:**
+- Raten bei unklaren Requirements
+- Globale Skills (SYSTEM_SKILLS/UI_GUIDELINES/DEFINITION_OF_DONE) ignorieren
+- Neue Dependencies ohne Begründung hinzufügen
+- UI-Templates oder Copy-Paste-Code nutzen
+- Inline-Styles verwenden (`style={{ }}`)
+- Content ohne Section/Container-Struktur platzieren
+- Buttons mit eigenen Farb-Kombinationen statt `.btn`-Varianten erzeugen
+- Harte Pixelwerte für Schriftgrößen oder Abstände verwenden
+- Lorem Ipsum oder generische Dummy-Texte einsetzen
+
+---
+
+*Generiert von website-prototype-generator v2 am 2026-02-03.*

skills/CLIENT_OVERRIDES.md

@@ -1,152 +1,186 @@
-# CLIENT_OVERRIDES (Project-Specific)
+# CLIENT_OVERRIDES.md
 
-Kundenspezifische Ergänzungen. Diese Datei darf globale Skills nicht überschreiben.
+> **WICHTIG:** Diese Overrides ergänzen die globalen Skills.
+> Sie dürfen SYSTEM_SKILLS, UI_GUIDELINES und DEFINITION_OF_DONE **nicht** überschreiben.
+> Hierarchie: SYSTEM_SKILLS > UI_GUIDELINES > DEFINITION_OF_DONE > CLIENT_OVERRIDES
+
+## 🚨 KI-KONTEXT (HÖCHSTE GEWICHTUNG)
+
+> **KRITISCH:** Diese Vorgaben haben die **höchste Priorität** bei allen Implementierungsentscheidungen.
+
+### ✅ Was BESONDERS WICHTIG ist:
+
+Kundenorientierung, Effizienz, Nachhaltigkeit
+
+### ❌ Was AUF KEINEN FALL passieren darf:
+
+Komplexität, Unklarheit
+
+### 👍 Positive Referenzen:
+
+- Klar strukturierte Navigation
+- Personalisierte Inhalte
+
+### 👎 Negative Referenzen:
+
+- Überladene Seiten
+- Langsame Ladezeiten
 
 ---
 
-## Scope
+## Kunde & Kontext
 
-**Kunde:** TBD
-**Marke:** TBD
-**Branche:** TBD
-**Geschäftsmodell:** TBD
-**Kernleistung:** TBD
-**Zielgruppe (primär):** TBD
-**Zielgruppe (sekundär):** TBD
-**Kundentyp:** TBD
-**Region:** TBD
+- **Name:** test
+- **Slug:** test
+- **Beschreibung:** test
+- **Branche:** Digitale Dienstleistungen
+- **Standort:** Wien, Wien, Österreich
+- **Einzugsgebiet:** regional
+- **Unternehmensgröße:** kmu
+- **Reifegrad:** etabliert
+- **Locale:** de-AT
+- **Sprache:** de
+- **Kontakt:** Max Mustermann (kontakt@test.at, +43 1 2345678)
+
+## Zielgruppe & Psychografie
+
+- **Hauptzielgruppe:** Unternehmen und Fachkräfte im Bereich digitale Transformation
+- **Alter:** 25–55 Jahre
+- **Geschlecht:** egal
+- **Entscheidertyp:** rational
+- **Wissensstand:** fortgeschritten
+- **Typische Einwände:** Preis-Leistungs-Verhältnis, Servicequalität
+- **Hauptprobleme:** Effizienzsteigerung, Nachhaltige Lösungen
+
+## Kommunikation & Tonalität
+
+- **Ansprache:** sie
+- **Tonalität:** freundlich
+- **Schreibstil:** kurz_praegnant
+- **Emotionales Gefühl:** vertrauensvoll
+
+## Angebot & Leistungen
+
+- **Angebotstyp:** dienstleistung
+- **Anzahl Leistungen:** 2
+- **Leistungen:**
+  - **undefined**: undefined
+    - *Nutzen:* Optimierung von Geschäftsprozessen durch innovative digitale Lösungen
+  - **undefined**: undefined
+    - *Nutzen:* Reduzierung des ökologischen Fußabdrucks durch umweltfreundliche Technologien
+- **Preissensitivität:** mittel
+
+## UX & Interaktion
+
+- **Interaktionsniveau:** moderat
+- **Animationen:** dezent
+- **Scroll-Verhalten:** smooth
+
+## Conversion & Vertrauen
+
+- **Primärer CTA:** "Jetzt kontaktieren" → #kontakt
+- **Sekundärer CTA:** "Mehr erfahren" → #leistungen
+- **Kontaktmethoden:** formular, telefon
+- **Vertrauenselemente:** Kundenbewertungen, Zertifikate, Fallstudien
+
+## Marken- & Stilparameter
+
+- **Primärfarbe:** #2563eb
+- **Sekundärfarbe:** #64748b
+- **Akzentfarbe:** #f59e0b
+- **Hintergrund:** #ffffff
+- **Vordergrund:** #0f172a
+- **Schrift Heading:** Inter (700)
+- **Schrift Body:** Inter (400)
+- **Logo:** https://www.test.at/logo.png
+- **Stil-Adjektive:** modern, klar, vertrauenswürdig
+- **Stil-Verbote:** überladen, veraltet
+
+## Research-Insights
+
+### Branchen-Insights
+1. Digitalisierung: Unternehmen in Österreich setzen verstärkt auf digitale Transformation, um Prozesse zu optimieren und Kunden besser zu erreichen. 2. Nachhaltigkeit: Es gibt einen wachsenden Trend zu nachhaltigen Geschäftspraktiken, der auch die Online-Präsenz beeinflusst. 3. Personalisierung: Websites in der Branche bieten zunehmend personalisierte Inhalte und Erlebnisse, um die Kundenbindung zu stärken. 4. Mobile-First-Design: Da immer mehr Nutzer über mobile Geräte auf Websites zugreifen, ist ein responsives Design unerlässlich. 5. Datenschutz: Strengere Datenschutzbestimmungen erfordern transparente und sichere Datenverarbeitungspraktiken.
+
+### Wettbewerbsanalyse
+Typische Websites in der Branche zeichnen sich durch klare, strukturierte Layouts mit einfacher Navigation aus. Häufige Features sind detaillierte Produkt- oder Dienstleistungsbeschreibungen, Kundenbewertungen und Kontaktformulare. Wettbewerber punkten oft mit ansprechendem Design und klaren Call-to-Actions, jedoch gibt es oft Lücken in der Personalisierung und Interaktivität.
+
+### Zielgruppen-Analyse
+Die Zielgruppe besteht aus Personen im Alter von 25-55 Jahren mit fortgeschrittenem Wissensstand. Sie sind rational und treffen Entscheidungen basierend auf Fakten und logischen Argumenten. Ihre Bedürfnisse umfassen zuverlässige Informationen, Transparenz und effiziente Lösungen. Einwände könnten sich auf Preis-Leistungs-Verhältnisse und Servicequalität beziehen. Entscheidungskriterien sind oft Kosten, Nutzen und Zuverlässigkeit.
+
+### UX-Empfehlungen
+Die Navigation sollte intuitiv und einfach sein, mit klaren Menüpunkten und einer logischen Struktur. Interaktive Elemente wie Chatbots oder FAQ-Bereiche können den fortgeschrittenen Wissensstand der Zielgruppe unterstützen. Eine klare und schnelle Informationsvermittlung ist entscheidend.
+
+### Conversion-Strategie
+Um die rationale Zielgruppe zu überzeugen, sollten CTAs klar und direkt sein, wie z.B. 'Mehr erfahren' oder 'Jetzt kontaktieren'. Vertrauenselemente wie Kundenbewertungen, Zertifikate und Fallstudien sind wichtig. Die Argumentationsstruktur sollte auf Fakten, Nutzen und Effizienz basieren.
+
+### Vorgeschlagene USPs
+- Regionale Expertise in Österreich
+- Nachhaltige und innovative Lösungen
+- Personalisierte Dienstleistungen
+- Hohe Effizienz und Zuverlässigkeit
+- Starke Kundenorientierung
+
+**SEO-Keywords:** Dienstleistungen Österreich, digitale Transformation, nachhaltige Geschäftspraktiken, Personalisierung, Mobile-First-Design, Datenschutz Österreich, KMU Österreich, regionale Dienstleistungen, kundenorientierte Lösungen, effiziente Prozesse, innovative Technologien, lokale Unternehmen, Österreich Markt, digitale Lösungen, kundenfreundliche Services
+
+### Content-Richtlinien
+Die Kommunikation sollte freundlich und prägnant sein, mit einer klaren Ansprache in der Sie-Form. Die Botschaften sollten den Nutzen und die Effizienz der Dienstleistungen hervorheben, Vertrauen schaffen und die Rationalität der Zielgruppe ansprechen.
+
+## Seitenstruktur
+
+### Startseite (`/`)
+- **Zweck:** Informieren | **Priorität:** Hoch
+- **Beschreibung:** Entdecken Sie unsere digitalen Dienstleistungen für nachhaltige Transformation.
+- **Sections:** Hero, Leistungen, Kundenbewertungen, Kontakt
+
+### Über Uns (`/ueber-uns`)
+- **Zweck:** Informieren | **Priorität:** Mittel
+- **Beschreibung:** Erfahren Sie mehr über unser erfahrenes Team und unsere Mission.
+- **Sections:** Team, Geschichte, Vision
+
+### Leistungen (`/leistungen`)
+- **Zweck:** Überzeugen | **Priorität:** Hoch
+- **Beschreibung:** Unsere Dienstleistungen für Ihre digitale Transformation.
+- **Sections:** Digitale Transformation, Nachhaltige IT-Lösungen, Personalisierte Beratung
+
+### Kontakt (`/kontakt`)
+- **Zweck:** Konvertieren | **Priorität:** Hoch
+- **Beschreibung:** Kontaktieren Sie uns für maßgeschneiderte digitale Lösungen.
+- **Sections:** Kontaktformular, Standort, Öffnungszeiten
+
+
+## Technische Anforderungen & Recht
+
+- **Domain:** www.test.at
+- **Hosting:** AWS
+- **Analytics:** Google Analytics
+- **Features:** Responsive Design, SEO-Optimierung, SSL-Verschlüsselung
+
+### Rechtliche Pflichtangaben (Impressum)
+
+- **Firmenname:** test GmbH
+- **Straße:** Musterstraße 1
+- **PLZ:** 1010
+- **Stadt:** Wien
+- **Land:** Österreich
+- **E-Mail:** impressum@test.at
+- **Telefon:** +43 1 2345678
+- **UID-Nummer:** ATU12345678
+- **Firmenbuch:** FN 123456a
+
+### Integrationen
+
+- **Newsletter:** Ja
+- **Buchungstool:** Calendly
+- **Externe Integrationen:** LinkedIn, Facebook
+
+## Offene Fragen
+
+- **client.contact.email** (contact): Wie lautet die offizielle Kontakt-E-Mail-Adresse?
+
+## Sonstige Hinweise
+
+Die Website sollte besonders auf die Bedürfnisse von KMUs eingehen.
 
 ---
 
-## Read Order
-
-1. `skills/SYSTEM_SKILLS.md`
-2. `skills/UI_GUIDELINES.md`
-3. `skills/DEFINITION_OF_DONE.md`
-4. `skills/CLIENT_OVERRIDES.md` ← diese Datei
-5. `spec/project_spec.json`
-
----
-
-## Non-Goals
-
-Diese Datei definiert **NICHT**:
-- Globale Arbeitsweisen (siehe SYSTEM_SKILLS.md)
-- UI-Qualitätsstandards (siehe UI_GUIDELINES.md)
-- Abnahmekriterien (siehe DEFINITION_OF_DONE.md)
-- Konkrete Farbwerte, Layouts, Komponenten (kommen aus design_tokens.json)
-
----
-
-## Brand Voice (Deutsch)
-
-| Eigenschaft | Wert |
-|-------------|------|
-| Sprache | Deutsch |
-| Ansprache | TBD |
-| Formalität | TBD |
-| Markenpersönlichkeit | TBD |
-
-**USPs:**
-- TBD
-
----
-
-## Must-Haves
-
-### Pflichtseiten
-- TBD
-
-### Pflichtinhalte
-- TBD
-
-### Pflicht-CTAs
-| Label | Ziel | Priorität |
-|-------|------|-----------|
-| TBD | TBD | TBD |
-
----
-
-## Must-Not-Haves
-
-### Verbotene Inhalte
-- TBD
-
-### Verbotene Stilmittel
-- TBD
-
-### Verbotene Technologien
-- TBD
-
----
-
-## Content & SEO Notes
-
-### SEO-Fokus-Keywords
-- TBD
-
-### GEO-Fokus
-- TBD
-
-### Content-Richtung
-- TBD
-
----
-
-## Legal (DACH)
-
-### Impressum
-- **Erforderlich:** Ja
-- **Details:** TBD
-
-### Datenschutzerklärung
-- **Erforderlich:** Ja
-- **Details:** TBD
-
-### Zusätzliche rechtliche Hinweise
-- TBD
-
----
-
-## Assets & Links
-
-### Logo
-- **Verfügbar:** TBD
-- **Pfad:** TBD
-- **Format:** TBD
-
-### Brand Guidelines
-- **Verfügbar:** TBD
-- **Pfad:** TBD
-
-### Weitere Assets
-- TBD
-
----
-
-## References (Liked / Disliked)
-
-### Gefällt (Inspiration)
-| URL | Grund |
-|-----|-------|
-| TBD | TBD |
-
-### Gefällt nicht (Abgrenzung)
-| URL | Grund |
-|-----|-------|
-| TBD | TBD |
-
----
-
-## Open Questions (TBD)
-
-- TBD
-- Kundenname und Kontaktperson klären
-- Branche und Geschäftsmodell definieren
-- Zielgruppe spezifizieren
-- Tonalität festlegen (Du/Sie, formal/locker)
-- Seitenstruktur und Prioritäten bestimmen
-- CTAs und Conversion-Ziele definieren
-- Rechtliche Daten für Impressum sammeln
-- Assets (Logo, CI) bereitstellen
-- Referenz-Websites sammeln
+*Generiert von website-prototype-generator v2 am 2026-02-03.*

spec/ProjectSpec.json

@@ -1,50 +1,320 @@
 {
-  "$schema": "./ProjectSpec.schema.json",
   "meta": {
-    "projectName": "",
-    "client": "",
-    "version": "1.0.0",
-    "createdAt": "",
-    "updatedAt": ""
+    "specVersion": "1.0",
+    "status": "draft",
+    "projectId": "78a9bea6-8b19-4684-8460-fd710d71d5ce",
+    "createdAt": "2026-02-03T14:52:50.307Z",
+    "updatedAt": "2026-02-03T14:52:51.712Z"
   },
-  "brand": {
-    "name": "",
-    "tagline": "",
-    "description": "",
-    "tone": [],
-    "values": []
-  },
-  "target": {
-    "audience": [],
-    "goals": [],
-    "competitors": []
-  },
-  "pages": [],
-  "features": [],
-  "integrations": [],
-  "seo": {
-    "primaryKeywords": [],
-    "secondaryKeywords": [],
-    "localSeo": {
-      "enabled": false,
-      "regions": []
+  "client": {
+    "name": "test",
+    "slug": "test",
+    "description": "test",
+    "industry": "Digitale Dienstleistungen",
+    "location": {
+      "city": "Wien",
+      "region": "Wien",
+      "country": "Österreich"
+    },
+    "marketScope": "regional",
+    "companySize": "kmu",
+    "maturityLevel": "etabliert",
+    "locale": "de-AT",
+    "language": "de",
+    "contact": {
+      "name": "Max Mustermann",
+      "email": "kontakt@test.at",
+      "phone": "+43 1 2345678"
     }
   },
-  "technical": {
-    "hosting": "",
-    "domain": "",
-    "analytics": [],
-    "thirdParty": []
+  "audience": {
+    "primaryTarget": "Unternehmen und Fachkräfte im Bereich digitale Transformation",
+    "ageRange": {
+      "min": 25,
+      "max": 55
+    },
+    "gender": "egal",
+    "decisionMakerType": [
+      "rational"
+    ],
+    "knowledgeLevel": "fortgeschritten",
+    "typicalObjections": [
+      "Preis-Leistungs-Verhältnis",
+      "Servicequalität"
+    ],
+    "mainProblems": [
+      "Effizienzsteigerung",
+      "Nachhaltige Lösungen"
+    ]
+  },
+  "communication": {
+    "formality": "sie",
+    "baseTone": [
+      "freundlich"
+    ],
+    "writingStyle": [
+      "kurz_praegnant"
+    ],
+    "emotionalFeeling": "vertrauensvoll"
+  },
+  "offering": {
+    "type": "dienstleistung",
+    "services": [
+      {
+        "name": "Digitale Transformation",
+        "benefit": "Optimierung von Geschäftsprozessen durch innovative digitale Lösungen"
+      },
+      {
+        "name": "Nachhaltige IT-Lösungen",
+        "benefit": "Reduzierung des ökologischen Fußabdrucks durch umweltfreundliche Technologien"
+      }
+    ],
+    "priceSensitivity": "mittel",
+    "upsells": [
+      {
+        "name": "Personalisierte Beratung",
+        "benefit": "Individuelle Strategien zur Maximierung der Effizienz"
+      }
+    ]
   },
   "content": {
-    "languages": ["de"],
-    "defaultLanguage": "de",
-    "contentSources": []
+    "siteType": "multipage",
+    "pages": [
+      {
+        "slug": "/",
+        "title": "Startseite",
+        "description": "Entdecken Sie unsere digitalen Dienstleistungen für nachhaltige Transformation.",
+        "purpose": "informieren",
+        "priority": "hoch",
+        "sections": [
+          "Hero",
+          "Leistungen",
+          "Kundenbewertungen",
+          "Kontakt"
+        ]
+      },
+      {
+        "slug": "/ueber-uns",
+        "title": "Über Uns",
+        "description": "Erfahren Sie mehr über unser erfahrenes Team und unsere Mission.",
+        "purpose": "informieren",
+        "priority": "mittel",
+        "sections": [
+          "Team",
+          "Geschichte",
+          "Vision"
+        ]
+      },
+      {
+        "slug": "/leistungen",
+        "title": "Leistungen",
+        "description": "Unsere Dienstleistungen für Ihre digitale Transformation.",
+        "purpose": "ueberzeugen",
+        "priority": "hoch",
+        "sections": [
+          "Digitale Transformation",
+          "Nachhaltige IT-Lösungen",
+          "Personalisierte Beratung"
+        ]
+      },
+      {
+        "slug": "/kontakt",
+        "title": "Kontakt",
+        "description": "Kontaktieren Sie uns für maßgeschneiderte digitale Lösungen.",
+        "purpose": "konvertieren",
+        "priority": "hoch",
+        "sections": [
+          "Kontaktformular",
+          "Standort",
+          "Öffnungszeiten"
+        ]
+      }
+    ],
+    "internalLinks": [
+      {
+        "from": "/",
+        "to": "/leistungen"
+      },
+      {
+        "from": "/",
+        "to": "/kontakt"
+      }
+    ],
+    "tone": "professionell, freundlich",
+    "language": "de",
+    "cta": {
+      "primary": "Jetzt kontaktieren",
+      "secondary": "Mehr erfahren"
+    }
   },
-  "timeline": {
-    "kickoff": "",
-    "milestones": [],
-    "launch": ""
+  "brand": {
+    "colors": {
+      "primary": "#2563eb",
+      "secondary": "#64748b",
+      "accent": "#f59e0b",
+      "neutral": "#6b7280",
+      "background": "#ffffff",
+      "foreground": "#0f172a",
+      "muted": "#f3f4f6",
+      "mutedForeground": "#6b7280",
+      "border": "#e5e7eb",
+      "success": "#10b981",
+      "warning": "#f59e0b",
+      "error": "#ef4444"
+    },
+    "fonts": {
+      "heading": {
+        "family": "Inter",
+        "fallback": "sans-serif",
+        "weight": "700"
+      },
+      "body": {
+        "family": "Inter",
+        "fallback": "sans-serif",
+        "weight": "400"
+      }
+    },
+    "logo": {
+      "url": "https://www.test.at/logo.png",
+      "alt": "test"
+    },
+    "styleAdjectives": [
+      "modern",
+      "klar",
+      "vertrauenswürdig"
+    ],
+    "styleProhibitions": [
+      "überladen",
+      "veraltet"
+    ]
   },
-  "notes": ""
-}
+  "interaction": {
+    "level": "moderat",
+    "animations": "dezent",
+    "scrollBehavior": "smooth"
+  },
+  "conversion": {
+    "primaryCTA": {
+      "text": "Jetzt kontaktieren",
+      "target": "#kontakt"
+    },
+    "secondaryCTA": {
+      "text": "Mehr erfahren",
+      "target": "#leistungen"
+    },
+    "contactMethod": [
+      "formular",
+      "telefon"
+    ],
+    "trustElements": [
+      "Kundenbewertungen",
+      "Zertifikate",
+      "Fallstudien"
+    ]
+  },
+  "technical": {
+    "domain": "www.test.at",
+    "hosting": "AWS",
+    "tracking": "Google Analytics",
+    "analytics": "Google Analytics",
+    "legal": {
+      "impressum": {
+        "companyName": "test GmbH",
+        "street": "Musterstraße 1",
+        "postalCode": "1010",
+        "city": "Wien",
+        "country": "Österreich",
+        "email": "impressum@test.at",
+        "phone": "+43 1 2345678",
+        "vatId": "ATU12345678",
+        "register": "FN 123456a"
+      },
+      "datenschutz": {
+        "companyName": "test GmbH",
+        "street": "Musterstraße 1",
+        "postalCode": "1010",
+        "city": "Wien",
+        "country": "Österreich",
+        "email": "datenschutz@test.at",
+        "phone": "+43 1 2345678",
+        "vatId": "ATU12345678",
+        "register": "FN 123456a"
+      }
+    },
+    "features": [
+      "Responsive Design",
+      "SEO-Optimierung",
+      "SSL-Verschlüsselung"
+    ],
+    "integrations": {
+      "newsletter": true,
+      "bookingTool": "Calendly",
+      "external": [
+        "LinkedIn",
+        "Facebook"
+      ]
+    }
+  },
+  "aiContext": {
+    "whatIsImportant": "Kundenorientierung, Effizienz, Nachhaltigkeit",
+    "whatToAvoid": "Komplexität, Unklarheit",
+    "comparisons": {
+      "good": [
+        "Klar strukturierte Navigation",
+        "Personalisierte Inhalte"
+      ],
+      "bad": [
+        "Überladene Seiten",
+        "Langsame Ladezeiten"
+      ]
+    }
+  },
+  "notes": {
+    "userNotes": "Die Website sollte besonders auf die Bedürfnisse von KMUs eingehen.",
+    "openQuestions": [
+      {
+        "field": "client.contact.email",
+        "question": "Wie lautet die offizielle Kontakt-E-Mail-Adresse?",
+        "category": "contact"
+      }
+    ],
+    "llmResearch": {
+      "industryInsights": "1. Digitalisierung: Unternehmen in Österreich setzen verstärkt auf digitale Transformation, um Prozesse zu optimieren und Kunden besser zu erreichen. 2. Nachhaltigkeit: Es gibt einen wachsenden Trend zu nachhaltigen Geschäftspraktiken, der auch die Online-Präsenz beeinflusst. 3. Personalisierung: Websites in der Branche bieten zunehmend personalisierte Inhalte und Erlebnisse, um die Kundenbindung zu stärken. 4. Mobile-First-Design: Da immer mehr Nutzer über mobile Geräte auf Websites zugreifen, ist ein responsives Design unerlässlich. 5. Datenschutz: Strengere Datenschutzbestimmungen erfordern transparente und sichere Datenverarbeitungspraktiken.",
+      "competitorAnalysis": "Typische Websites in der Branche zeichnen sich durch klare, strukturierte Layouts mit einfacher Navigation aus. Häufige Features sind detaillierte Produkt- oder Dienstleistungsbeschreibungen, Kundenbewertungen und Kontaktformulare. Wettbewerber punkten oft mit ansprechendem Design und klaren Call-to-Actions, jedoch gibt es oft Lücken in der Personalisierung und Interaktivität.",
+      "audienceAnalysis": "Die Zielgruppe besteht aus Personen im Alter von 25-55 Jahren mit fortgeschrittenem Wissensstand. Sie sind rational und treffen Entscheidungen basierend auf Fakten und logischen Argumenten. Ihre Bedürfnisse umfassen zuverlässige Informationen, Transparenz und effiziente Lösungen. Einwände könnten sich auf Preis-Leistungs-Verhältnisse und Servicequalität beziehen. Entscheidungskriterien sind oft Kosten, Nutzen und Zuverlässigkeit.",
+      "seoKeywords": [
+        "Dienstleistungen Österreich",
+        "digitale Transformation",
+        "nachhaltige Geschäftspraktiken",
+        "Personalisierung",
+        "Mobile-First-Design",
+        "Datenschutz Österreich",
+        "KMU Österreich",
+        "regionale Dienstleistungen",
+        "kundenorientierte Lösungen",
+        "effiziente Prozesse",
+        "innovative Technologien",
+        "lokale Unternehmen",
+        "Österreich Markt",
+        "digitale Lösungen",
+        "kundenfreundliche Services"
+      ],
+      "contentGuidelines": "Die Kommunikation sollte freundlich und prägnant sein, mit einer klaren Ansprache in der Sie-Form. Die Botschaften sollten den Nutzen und die Effizienz der Dienstleistungen hervorheben, Vertrauen schaffen und die Rationalität der Zielgruppe ansprechen.",
+      "uxRecommendations": "Die Navigation sollte intuitiv und einfach sein, mit klaren Menüpunkten und einer logischen Struktur. Interaktive Elemente wie Chatbots oder FAQ-Bereiche können den fortgeschrittenen Wissensstand der Zielgruppe unterstützen. Eine klare und schnelle Informationsvermittlung ist entscheidend.",
+      "conversionStrategy": "Um die rationale Zielgruppe zu überzeugen, sollten CTAs klar und direkt sein, wie z.B. 'Mehr erfahren' oder 'Jetzt kontaktieren'. Vertrauenselemente wie Kundenbewertungen, Zertifikate und Fallstudien sind wichtig. Die Argumentationsstruktur sollte auf Fakten, Nutzen und Effizienz basieren.",
+      "suggestedUSPs": [
+        "Regionale Expertise in Österreich",
+        "Nachhaltige und innovative Lösungen",
+        "Personalisierte Dienstleistungen",
+        "Hohe Effizienz und Zuverlässigkeit",
+        "Starke Kundenorientierung"
+      ],
+      "targetAudience": "Die Zielgruppe umfasst Personen im Alter von 25-55 Jahren, die in Österreich leben und arbeiten. Sie suchen nach effizienten, zuverlässigen und personalisierten Dienstleistungen, die ihre rationalen Entscheidungskriterien erfüllen.",
+      "generatedAt": "2026-02-03T14:53:31.638Z"
+    }
+  },
+  "repository": {
+    "visibility": "public",
+    "autoInit": false
+  }
+}

spec/design_tokens.json

@@ -1,44 +1,29 @@
 {
-  "$schema": "./design_tokens.schema.json",
+  "specVersion": "1.0",
   "colors": {
-    "primary": "#000000",
-    "secondary": "#666666",
-    "accent": "#0066cc",
+    "primary": "#2563eb",
+    "secondary": "#64748b",
+    "accent": "#f59e0b",
+    "neutral": "#6b7280",
     "background": "#ffffff",
-    "foreground": "#000000",
-    "muted": "#f5f5f5",
-    "border": "#e5e5e5",
-    "error": "#dc2626",
-    "success": "#16a34a",
-    "warning": "#ca8a04"
+    "foreground": "#0f172a",
+    "muted": "#f3f4f6",
+    "mutedForeground": "#4b505a",
+    "border": "#e5e7eb",
+    "success": "#10b981",
+    "warning": "#f59e0b",
+    "error": "#ef4444"
   },
-  "typography": {
-    "fontFamilies": {
-      "sans": "system-ui, -apple-system, sans-serif",
-      "serif": "Georgia, serif",
-      "mono": "ui-monospace, monospace"
+  "fonts": {
+    "heading": {
+      "family": "Inter",
+      "fallback": "sans-serif",
+      "weight": "700"
     },
-    "fontSizes": {
-      "xs": "0.75rem",
-      "sm": "0.875rem",
-      "base": "1rem",
-      "lg": "1.125rem",
-      "xl": "1.25rem",
-      "2xl": "1.5rem",
-      "3xl": "1.875rem",
-      "4xl": "2.25rem",
-      "5xl": "3rem"
-    },
-    "fontWeights": {
-      "normal": 400,
-      "medium": 500,
-      "semibold": 600,
-      "bold": 700
-    },
-    "lineHeights": {
-      "tight": 1.25,
-      "normal": 1.5,
-      "relaxed": 1.75
+    "body": {
+      "family": "Inter",
+      "fallback": "sans-serif",
+      "weight": "400"
     }
   },
   "spacing": {
@@ -48,20 +33,79 @@
     "lg": "1.5rem",
     "xl": "2rem",
     "2xl": "3rem",
-    "3xl": "4rem"
+    "3xl": "4rem",
+    "4xl": "6rem",
+    "5xl": "8rem",
+    "section": "5rem",
+    "container": "1200px",
+    "containerPadding": "2rem",
+    "6xl": "10rem"
   },
   "borderRadius": {
     "none": "0",
     "sm": "0.25rem",
     "md": "0.5rem",
-    "lg": "1rem",
+    "lg": "0.75rem",
+    "xl": "1rem",
     "full": "9999px"
   },
   "shadows": {
-    "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-    "md": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
-    "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1)",
-    "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1)"
+    "sm": "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+    "md": "0 4px 8px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    "lg": "0 10px 20px -3px rgb(0 0 0 / 0.1), 0 4px 8px -4px rgb(0 0 0 / 0.1)",
+    "xl": "0 20px 30px -5px rgb(0 0 0 / 0.1), 0 8px 12px -6px rgb(0 0 0 / 0.1)"
+  },
+  "typography": {
+    "xs": {
+      "size": "0.75rem",
+      "lineHeight": "1.125rem",
+      "letterSpacing": "0"
+    },
+    "sm": {
+      "size": "0.875rem",
+      "lineHeight": "1.25rem",
+      "letterSpacing": "0"
+    },
+    "base": {
+      "size": "1rem",
+      "lineHeight": "1.5rem",
+      "letterSpacing": "0"
+    },
+    "lg": {
+      "size": "1.125rem",
+      "lineHeight": "1.75rem",
+      "letterSpacing": "0"
+    },
+    "xl": {
+      "size": "1.25rem",
+      "lineHeight": "1.75rem",
+      "letterSpacing": "-0.01em"
+    },
+    "2xl": {
+      "size": "1.5rem",
+      "lineHeight": "2rem",
+      "letterSpacing": "-0.015em"
+    },
+    "3xl": {
+      "size": "1.875rem",
+      "lineHeight": "2.25rem",
+      "letterSpacing": "-0.02em"
+    },
+    "4xl": {
+      "size": "2.25rem",
+      "lineHeight": "2.5rem",
+      "letterSpacing": "-0.025em"
+    },
+    "5xl": {
+      "size": "3rem",
+      "lineHeight": "1.1",
+      "letterSpacing": "-0.03em"
+    },
+    "6xl": {
+      "size": "3.75rem",
+      "lineHeight": "1.1",
+      "letterSpacing": "-0.03em"
+    }
   },
   "breakpoints": {
     "sm": "640px",
@@ -69,37 +113,5 @@
     "lg": "1024px",
     "xl": "1280px",
     "2xl": "1536px"
-  },
-  "transitions": {
-    "duration": {
-      "fast": "150ms",
-      "normal": "300ms",
-      "slow": "500ms"
-    },
-    "easing": {
-      "default": "cubic-bezier(0.4, 0, 0.2, 1)",
-      "in": "cubic-bezier(0.4, 0, 1, 1)",
-      "out": "cubic-bezier(0, 0, 0.2, 1)",
-      "inOut": "cubic-bezier(0.4, 0, 0.2, 1)"
-    }
-  },
-  "zIndex": {
-    "base": 0,
-    "dropdown": 100,
-    "sticky": 200,
-    "fixed": 300,
-    "modal": 400,
-    "popover": 500,
-    "tooltip": 600
-  },
-  "letterSpacing": {
-    "tight": "-0.01em",
-    "normal": "0em",
-    "wide": "0.05em"
-  },
-  "layout": {
-    "containerMaxWidth": "80rem",
-    "containerPaddingX": "clamp(1rem, 5vw, 2rem)",
-    "sectionSpacingY": "4rem"
   }
-}
+}

theme/globals.css

@@ -1,54 +1,63 @@
-@import "tailwindcss";
-@import "./stylesheet.css";
-
-/*
- * CSS Variables - Single Source of Truth
- * These variables are placeholders. Override them per project via design_tokens.json
- */
+/* ═══════════════════════════════════════════════════════════ */
+/*  globals.css – Single Source of Truth (CSS Custom Props)   */
+/*  Generated by website-prototype-generator                 */
+/*  DO NOT add layout or component styles here.              */
+/* ═══════════════════════════════════════════════════════════ */
 
 :root {
-  /* Colors - Placeholders */
-  --color-primary: #000000;
-  --color-secondary: #666666;
-  --color-accent: #0066cc;
+  /* ── Colors ──────────────────────────────────────── */
+  --color-primary: #2563eb;
+  --color-secondary: #64748b;
+  --color-accent: #f59e0b;
+  --color-neutral: #6b7280;
   --color-background: #ffffff;
-  --color-foreground: #000000;
-  --color-muted: #f5f5f5;
-  --color-border: #e5e5e5;
-  --color-error: #dc2626;
-  --color-success: #16a34a;
-  --color-warning: #ca8a04;
+  --color-foreground: #0f172a;
+  --color-muted: #f3f4f6;
+  --color-muted-foreground: #4b505a;
+  --color-border: #e5e7eb;
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
 
-  /* Typography - Placeholders */
-  --font-sans: system-ui, -apple-system, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: ui-monospace, monospace;
+  /* ── Typography – Families ────────────────────────── */
+  --font-heading: 'Inter', sans-serif;
+  --font-body: 'Inter', sans-serif;
+  --font-heading-weight: 700;
+  --font-body-weight: 400;
 
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 1.875rem;
-  --font-size-4xl: 2.25rem;
-  --font-size-5xl: 3rem;
+  /* ── Typography – Scale ───────────────────────────── */
+  --text-xs: 0.75rem;
+  --text-xs-line-height: 1.125rem;
+  --text-xs-letter-spacing: 0;
+  --text-sm: 0.875rem;
+  --text-sm-line-height: 1.25rem;
+  --text-sm-letter-spacing: 0;
+  --text-base: 1rem;
+  --text-base-line-height: 1.5rem;
+  --text-base-letter-spacing: 0;
+  --text-lg: 1.125rem;
+  --text-lg-line-height: 1.75rem;
+  --text-lg-letter-spacing: 0;
+  --text-xl: 1.25rem;
+  --text-xl-line-height: 1.75rem;
+  --text-xl-letter-spacing: -0.01em;
+  --text-2xl: 1.5rem;
+  --text-2xl-line-height: 2rem;
+  --text-2xl-letter-spacing: -0.015em;
+  --text-3xl: 1.875rem;
+  --text-3xl-line-height: 2.25rem;
+  --text-3xl-letter-spacing: -0.02em;
+  --text-4xl: 2.25rem;
+  --text-4xl-line-height: 2.5rem;
+  --text-4xl-letter-spacing: -0.025em;
+  --text-5xl: 3rem;
+  --text-5xl-line-height: 1.1;
+  --text-5xl-letter-spacing: -0.03em;
+  --text-6xl: 3.75rem;
+  --text-6xl-line-height: 1.1;
+  --text-6xl-letter-spacing: -0.03em;
 
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  --line-height-tight: 1.25;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
-
-  /* Letter Spacing - Placeholders */
-  --letter-spacing-tight: -0.01em;
-  --letter-spacing-normal: 0em;
-  --letter-spacing-wide: 0.05em;
-
-  /* Spacing - Placeholders */
+  /* ── Spacing ─────────────────────────────────────── */
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
   --spacing-md: 1rem;
@@ -56,80 +65,31 @@
   --spacing-xl: 2rem;
   --spacing-2xl: 3rem;
   --spacing-3xl: 4rem;
+  --spacing-4xl: 6rem;
+  --spacing-5xl: 8rem;
+  --spacing-section: 5rem;
+  --spacing-container: 1200px;
+  --spacing-container-padding: 2rem;
+  --spacing-6xl: 10rem;
 
-  /* Border Radius - Placeholders */
+  /* ── Border Radius ───────────────────────────────── */
   --radius-none: 0;
   --radius-sm: 0.25rem;
   --radius-md: 0.5rem;
-  --radius-lg: 1rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
   --radius-full: 9999px;
 
-  /* Shadows - Placeholders */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+  /* ── Shadows ─────────────────────────────────────── */
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 20px -3px rgb(0 0 0 / 0.1), 0 4px 8px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 30px -5px rgb(0 0 0 / 0.1), 0 8px 12px -6px rgb(0 0 0 / 0.1);
 
-  /* Transitions - Placeholders */
-  --duration-fast: 150ms;
-  --duration-normal: 300ms;
-  --duration-slow: 500ms;
-  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* Z-Index Scale */
-  --z-base: 0;
-  --z-dropdown: 100;
-  --z-sticky: 200;
-  --z-fixed: 300;
-  --z-modal: 400;
-  --z-popover: 500;
-  --z-tooltip: 600;
-
-  /* Layout - Placeholders */
-  --container-max-width: 80rem;
-  --container-padding-x: clamp(1rem, 5vw, 2rem);
-  --section-spacing-y: var(--spacing-3xl);
-}
-
-/*
- * Base Resets
- */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: var(--font-sans);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-normal);
-  color: var(--color-foreground);
-  background-color: var(--color-background);
-}
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-button {
-  font: inherit;
-  cursor: pointer;
+  /* ── Breakpoints (reference) ─────────────────────── */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
 }

theme/stylesheet.css

@@ -1,164 +1,294 @@
-/*
- * Stylesheet
- *
- * Typography & structural rules only.
- * NO component styles. NO layout sections.
- * This file is imported by globals.css.
- *
- * Structure:
- * 1. Typography
- * 2. Structural Rules
- * 3. Utility Classes
- * 4. Animations
- */
+/* ═══════════════════════════════════════════════════════════ */
+/*  stylesheet.css – Structural framework                    */
+/*  Uses variables from globals.css (Single Source of Truth)  */
+/*  Generated by website-prototype-generator                 */
+/*                                                           */
+/*  REGELN:                                                  */
+/*  - Jede Section MUSS .section nutzen                      */
+/*  - Content MUSS in .container eingebettet sein            */
+/*  - Buttons NUR über .btn + Variante                       */
+/*  - Typografie NUR über definierte Klassen/Heading-Tags    */
+/*  - KEINE Inline-Styles, KEINE harten Pixelwerte          */
+/* ═══════════════════════════════════════════════════════════ */
 
-/* ==========================================================================
-   1. Typography
-   ========================================================================== */
+@import "tailwindcss";
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-tight);
-  letter-spacing: var(--letter-spacing-tight);
-  margin-top: 0;
-  margin-bottom: var(--spacing-md);
+/* ── Base Resets ───────────────────────────────────── */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
-h1 {
-  font-size: var(--font-size-4xl);
+html {
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-h2 {
-  font-size: var(--font-size-3xl);
+body {
+  font-family: var(--font-body);
+  font-weight: var(--font-body-weight);
+  color: var(--color-foreground);
+  background-color: var(--color-background);
+  line-height: var(--text-base-line-height);
+  font-size: var(--text-base);
 }
 
-h3 {
-  font-size: var(--font-size-2xl);
+/* ── Section & Container (PFLICHT-Bausteine) ────── */
+/*  Jede Seite MUSS aus <section class="section"> bestehen.  */
+/*  Innerhalb jeder Section MUSS ein <div class="container"> */
+/*  den Content umschließen.                                 */
+
+.section {
+  position: relative;
+  width: 100%;
+  padding-block: var(--spacing-section);
 }
 
-h4 {
-  font-size: var(--font-size-xl);
+.section--sm {
+  padding-block: var(--spacing-2xl);
 }
 
-h5 {
-  font-size: var(--font-size-lg);
+.section--lg {
+  padding-block: var(--spacing-5xl);
 }
 
-h6 {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
+.section--hero {
+  padding-block: var(--spacing-5xl) var(--spacing-section);
+  min-height: 80vh;
+  display: flex;
+  align-items: center;
 }
 
-p {
-  margin-top: 0;
-  margin-bottom: var(--spacing-md);
-  line-height: var(--line-height-normal);
+.section--flush {
+  padding-block: 0;
 }
 
-small {
-  font-size: var(--font-size-sm);
+.container {
+  width: 100%;
+  max-width: var(--spacing-container);
+  margin-inline: auto;
+  padding-inline: var(--spacing-container-padding);
 }
 
-strong,
-b {
-  font-weight: var(--font-weight-bold);
+.container--narrow {
+  max-width: 48rem;
 }
 
-/* Prevent orphans and widows in text blocks */
-p,
-li,
-dd {
-  orphans: 2;
-  widows: 2;
+.container--wide {
+  max-width: 90rem;
 }
 
-/* Lists */
-ul,
-ol {
-  margin-top: 0;
-  margin-bottom: var(--spacing-md);
-  padding-left: var(--spacing-lg);
+/* ── Headings (Typography System) ─────────────────── */
+/*  Headlines MÜSSEN über HTML-Tags (h1–h6) oder     */
+/*  .heading-* Klassen gestylt werden.                */
+/*  VERBOTEN: style={{ fontSize: ... }} oder harte px */
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading);
+  font-weight: var(--font-heading-weight);
+  color: var(--color-foreground);
 }
 
-li {
-  margin-bottom: var(--spacing-xs);
+h1, .heading-1 {
+  font-size: var(--text-5xl);
+  line-height: var(--text-5xl-line-height);
+  letter-spacing: var(--text-5xl-letter-spacing);
 }
 
-/* Blockquote */
-blockquote {
-  margin: 0 0 var(--spacing-md);
-  padding-left: var(--spacing-lg);
-  border-left: 3px solid var(--color-border);
-  font-style: italic;
+h2, .heading-2 {
+  font-size: var(--text-4xl);
+  line-height: var(--text-4xl-line-height);
+  letter-spacing: var(--text-4xl-letter-spacing);
 }
 
-/* Code */
-code {
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
+h3, .heading-3 {
+  font-size: var(--text-3xl);
+  line-height: var(--text-3xl-line-height);
+  letter-spacing: var(--text-3xl-letter-spacing);
 }
 
-pre {
-  margin-top: 0;
-  margin-bottom: var(--spacing-md);
-  overflow-x: auto;
+h4, .heading-4 {
+  font-size: var(--text-2xl);
+  line-height: var(--text-2xl-line-height);
+  letter-spacing: var(--text-2xl-letter-spacing);
 }
 
-pre code {
-  font-size: var(--font-size-sm);
+h5, .heading-5 {
+  font-size: var(--text-xl);
+  line-height: var(--text-xl-line-height);
+  letter-spacing: var(--text-xl-letter-spacing);
 }
 
-/* ==========================================================================
-   2. Structural Rules
-   ========================================================================== */
+h6, .heading-6 {
+  font-size: var(--text-lg);
+  line-height: var(--text-lg-line-height);
+  letter-spacing: var(--text-lg-letter-spacing);
+}
+
+/* ── Body Text Utilities ───────────────────────────── */
+
+.text-xs   { font-size: var(--text-xs);   line-height: var(--text-xs-line-height); }
+.text-sm   { font-size: var(--text-sm);   line-height: var(--text-sm-line-height); }
+.text-base { font-size: var(--text-base); line-height: var(--text-base-line-height); }
+.text-lg   { font-size: var(--text-lg);   line-height: var(--text-lg-line-height); }
+.text-xl   { font-size: var(--text-xl);   line-height: var(--text-xl-line-height); }
+
+.text-muted {
+  color: var(--color-muted-foreground);
+}
+
+.lead {
+  font-size: var(--text-xl);
+  line-height: var(--text-xl-line-height);
+  color: var(--color-muted-foreground);
+}
+
+/* ── Button System (EINZIGER erlaubter Weg) ──────── */
+/*  Buttons MÜSSEN eine der folgenden Klassen nutzen: */
+/*  .btn-primary  – Hauptaktion (CTA)                 */
+/*  .btn-secondary – Sekundäraktion                   */
+/*  .btn-outline  – Umrandeter Button                 */
+/*  .btn-ghost    – Textartig, minimal                */
+/*  VERBOTEN: Eigene bg/text-Kombinationen auf <button> */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-lg);
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  font-weight: 500;
+  line-height: var(--text-base-line-height);
+  border-radius: var(--radius-md);
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.btn:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background-color: var(--color-primary);
+  color: var(--color-background);
+  border-color: var(--color-primary);
+}
+
+.btn-primary:hover {
+  filter: brightness(0.9);
+}
+
+.btn-secondary {
+  background-color: var(--color-secondary);
+  color: var(--color-background);
+  border-color: var(--color-secondary);
+}
+
+.btn-secondary:hover {
+  filter: brightness(0.9);
+}
+
+.btn-outline {
+  background-color: transparent;
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.btn-outline:hover {
+  background-color: var(--color-primary);
+  color: var(--color-background);
+}
+
+.btn-ghost {
+  background-color: transparent;
+  color: var(--color-foreground);
+  border-color: transparent;
+}
+
+.btn-ghost:hover {
+  background-color: var(--color-muted);
+}
+
+.btn-sm {
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-size: var(--text-sm);
+}
+
+.btn-lg {
+  padding: var(--spacing-md) var(--spacing-xl);
+  font-size: var(--text-lg);
+}
+
+/* ── Card Component ─────────────────────────────── */
+
+.card {
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-xl);
+  box-shadow: var(--shadow-sm);
+}
+
+/* ── Links ───────────────────────────────────────── */
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* ── Images ──────────────────────────────────────── */
+
+img, video, svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* ── Focus ───────────────────────────────────────── */
 
-/* Focus styles for keyboard navigation */
 :focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
 
-/* Selection */
+/* ── Selection ──────────────────────────────────── */
+
 ::selection {
   background-color: var(--color-primary);
   color: var(--color-background);
 }
 
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
+/* ── Spacing Utilities ──────────────────────────── */
+
+.stack-xs > * + * { margin-top: var(--spacing-xs); }
+.stack-sm > * + * { margin-top: var(--spacing-sm); }
+.stack-md > * + * { margin-top: var(--spacing-md); }
+.stack-lg > * + * { margin-top: var(--spacing-lg); }
+.stack-xl > * + * { margin-top: var(--spacing-xl); }
+.stack-2xl > * + * { margin-top: var(--spacing-2xl); }
+
+/* ── Divider ───────────────────────────────────── */
+
+.divider {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin-block: var(--spacing-2xl);
 }
-
-/* ==========================================================================
-   3. Utility Classes
-   ========================================================================== */
-
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* ==========================================================================
-   4. Animations
-   ========================================================================== */
-
-/* Animations are added per project */