feat: Implement the 9-category parameter system by updating the root layout for dynamic configuration and enhancing the Definition of Done with detailed checklists.
This commit is contained in:
1elle1
2
.gitignore
vendored
2
.gitignore
vendored
@@ -24,6 +24,8 @@ yarn-debug.log*
|
|||||||
ts-debug.log*
|
ts-debug.log*
|
||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
.env*.local
|
.env*.local
|
||||||
|
|
||||||
# vercel
|
# vercel
|
||||||
|
|||||||
@@ -1,6 +1,27 @@
|
|||||||
import type { Metadata, Viewport } from "next";
|
import type { Metadata, Viewport } from "next";
|
||||||
import "@/theme/globals.css";
|
import "@/theme/globals.css";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Root Layout
|
||||||
|
*
|
||||||
|
* This layout is designed to work with the 9-category parameter system.
|
||||||
|
* It supports:
|
||||||
|
* - Dynamic locale (from spec.client.locale or content.defaultLanguage)
|
||||||
|
* - Google Fonts loading (from spec.brand.fonts)
|
||||||
|
* - Scroll behavior (from spec.interaction.scrollBehavior)
|
||||||
|
* - Meta tags for SEO
|
||||||
|
*
|
||||||
|
* CUSTOMIZATION INSTRUCTIONS:
|
||||||
|
* 1. Update `lang` attribute based on spec.client.locale (e.g., "de", "de-AT", "en")
|
||||||
|
* 2. Add Google Fonts import based on spec.brand.fonts.heading.family and body.family
|
||||||
|
* 3. Set scroll-behavior in globals.css based on spec.interaction.scrollBehavior
|
||||||
|
* 4. Update metadata based on spec.brand and spec.seo
|
||||||
|
*/
|
||||||
|
|
||||||
|
// TODO: Update these values based on ProjectSpec.json
|
||||||
|
// - title: from spec.brand.name or spec.meta.projectName
|
||||||
|
// - description: from spec.brand.description
|
||||||
|
// - keywords: from spec.seo.primaryKeywords
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Website",
|
title: "Website",
|
||||||
description: "Generated website",
|
description: "Generated website",
|
||||||
@@ -8,21 +29,69 @@ export const metadata: Metadata = {
|
|||||||
index: true,
|
index: true,
|
||||||
follow: true,
|
follow: true,
|
||||||
},
|
},
|
||||||
|
// Open Graph tags - update based on spec
|
||||||
|
openGraph: {
|
||||||
|
type: "website",
|
||||||
|
locale: "de_DE",
|
||||||
|
// title, description, images will be set per project
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const viewport: Viewport = {
|
export const viewport: Viewport = {
|
||||||
width: "device-width",
|
width: "device-width",
|
||||||
initialScale: 1,
|
initialScale: 1,
|
||||||
|
// TODO: Update themeColor from spec.brand.colors.primary or design_tokens
|
||||||
themeColor: "#ffffff",
|
themeColor: "#ffffff",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Font Loading
|
||||||
|
*
|
||||||
|
* To add Google Fonts based on spec.brand.fonts:
|
||||||
|
*
|
||||||
|
* 1. Import from next/font/google:
|
||||||
|
* import { Inter, Playfair_Display } from "next/font/google";
|
||||||
|
*
|
||||||
|
* 2. Configure fonts:
|
||||||
|
* const headingFont = Playfair_Display({
|
||||||
|
* subsets: ["latin"],
|
||||||
|
* variable: "--font-heading",
|
||||||
|
* display: "swap",
|
||||||
|
* });
|
||||||
|
*
|
||||||
|
* const bodyFont = Inter({
|
||||||
|
* subsets: ["latin"],
|
||||||
|
* variable: "--font-body",
|
||||||
|
* display: "swap",
|
||||||
|
* });
|
||||||
|
*
|
||||||
|
* 3. Apply to html element:
|
||||||
|
* <html lang="de" className={`${headingFont.variable} ${bodyFont.variable}`}>
|
||||||
|
*
|
||||||
|
* 4. Update globals.css to use the variables:
|
||||||
|
* --font-sans: var(--font-body), system-ui, sans-serif;
|
||||||
|
* --font-heading: var(--font-heading), Georgia, serif;
|
||||||
|
*/
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
|
// TODO: Update lang attribute based on spec.client.locale
|
||||||
|
// Examples: "de", "de-AT", "de-CH", "en", "en-US"
|
||||||
|
const locale = "de";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<html lang="de">
|
<html lang={locale}>
|
||||||
|
{/*
|
||||||
|
Scroll Behavior:
|
||||||
|
- If spec.interaction.scrollBehavior === "smooth", add className="scroll-smooth"
|
||||||
|
- Or set scroll-behavior: smooth in globals.css on html element
|
||||||
|
|
||||||
|
Example with smooth scrolling:
|
||||||
|
<html lang={locale} className="scroll-smooth">
|
||||||
|
*/}
|
||||||
<body>{children}</body>
|
<body>{children}</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
2
components/sections/.gitkeep
Normal file
2
components/sections/.gitkeep
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
# This file keeps the sections folder in git
|
||||||
|
# Remove this file once you add actual section components
|
||||||
@@ -13,6 +13,7 @@ Diese Datei definiert **verbindliche Abnahmekriterien** für:
|
|||||||
- Accessibility
|
- Accessibility
|
||||||
- SEO
|
- SEO
|
||||||
- Projektspezifikation
|
- Projektspezifikation
|
||||||
|
- **9 Parameter-Kategorien (A–J)**
|
||||||
|
|
||||||
**Geltungsbereich:** Gilt global für jedes Projekt. Keine Aufgabe ist fertig, bis diese Checkliste erfüllt ist.
|
**Geltungsbereich:** Gilt global für jedes Projekt. Keine Aufgabe ist fertig, bis diese Checkliste erfüllt ist.
|
||||||
|
|
||||||
@@ -43,6 +44,220 @@ Diese Datei prüft nur, ob Qualitätsstandards eingehalten wurden.
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Kategorie A — Unternehmensidentität
|
||||||
|
|
||||||
|
### Pflicht
|
||||||
|
|
||||||
|
- [ ] Client-Name erscheint im Seitentitel
|
||||||
|
- [ ] Client-Name erscheint im Footer
|
||||||
|
- [ ] Client-Name erscheint im Impressum
|
||||||
|
- [ ] `lang`-Attribut entspricht dem definierten Locale (z.B. `de`, `de-AT`, `en`)
|
||||||
|
- [ ] Standort korrekt im Footer/Kontaktbereich dargestellt (falls definiert)
|
||||||
|
- [ ] Kontaktdaten korrekt dargestellt (falls definiert)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Kategorie B — Zielgruppe
|
||||||
|
|
||||||
|
### Pflicht
|
||||||
|
|
||||||
|
- [ ] Content ist auf das Wissensniveau der Zielgruppe abgestimmt
|
||||||
|
- [ ] Typische Einwände werden auf Überzeugungsseiten adressiert (falls definiert)
|
||||||
|
- [ ] Hauptprobleme der Zielgruppe werden in Hero/Intro angesprochen (falls definiert)
|
||||||
|
- [ ] Sprachniveau passt zum definierten Entscheidertyp
|
||||||
|
|
||||||
|
### Bei Zielgruppen-spezifischen Inhalten
|
||||||
|
|
||||||
|
- [ ] Fachbegriffe erklärt (wenn Zielgruppe = Laien)
|
||||||
|
- [ ] Fachbegriffe verwendet (wenn Zielgruppe = Experten)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Kategorie C — Kommunikation
|
||||||
|
|
||||||
|
### Pflicht
|
||||||
|
|
||||||
|
- [ ] Ansprache (du/sie) ist konsistent auf ALLEN Seiten
|
||||||
|
- [ ] Ansprache ist konsistent in ALLEN UI-Elementen (Buttons, Labels, Microcopy)
|
||||||
|
- [ ] Tonalität entspricht den definierten `baseTone`-Werten
|
||||||
|
- [ ] Schreibstil entspricht den definierten `writingStyle`-Werten
|
||||||
|
- [ ] Emotionales Gefühl spiegelt sich im Gesamtdesign wider
|
||||||
|
|
||||||
|
### Konsistenz-Check
|
||||||
|
|
||||||
|
```
|
||||||
|
[ ] Alle Buttons mit korrekter Ansprache?
|
||||||
|
[ ] Alle Formular-Labels mit korrekter Ansprache?
|
||||||
|
[ ] Alle Microcopy-Elemente mit korrekter Ansprache?
|
||||||
|
[ ] Keine Mischung von Du und Sie?
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Kategorie D — Angebot
|
||||||
|
|
||||||
|
### Pflicht
|
||||||
|
|
||||||
|
- [ ] Alle definierten Leistungen sind auf der Website dargestellt
|
||||||
|
- [ ] Jede Leistung hat Titel
|
||||||
|
- [ ] Jede Leistung hat Beschreibung
|
||||||
|
- [ ] Jede Leistung hat Nutzen-Kommunikation (falls definiert)
|
||||||
|
- [ ] Angebotstyp bestimmt das Layout:
|
||||||
|
- Dienstleistung → Services-Grid oder Liste
|
||||||
|
- Produkt → Produkt-Karten
|
||||||
|
- Beratung → Prozess-Darstellung
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Kategorie E — Seitenarchitektur
|
||||||
|
|
||||||
|
### Pflicht
|
||||||
|
|
||||||
|
- [ ] Alle definierten Seiten existieren als Routes unter `app/`
|
||||||
|
- [ ] Jede Seite erfüllt ihren definierten Zweck:
|
||||||
|
- `informieren`: Fakten-First, klare Struktur, CTAs dezent
|
||||||
|
- `ueberzeugen`: USPs prominent, Social Proof, Argumentation
|
||||||
|
- `konvertieren`: CTAs above-the-fold, Trust-Elemente, Einwand-Behandlung
|
||||||
|
- [ ] Seiten mit Priorität `hoch` sind am detailliertesten umgesetzt
|
||||||
|
- [ ] Navigation enthält alle Seiten in logischer Reihenfolge
|
||||||
|
- [ ] Interne Verlinkungswünsche umgesetzt (falls definiert)
|
||||||
|
|
||||||
|
### Seiten-Zweck-Check
|
||||||
|
|
||||||
|
| Seite | Purpose | Priority | Umgesetzt |
|
||||||
|
|-------|---------|----------|-----------|
|
||||||
|
| (aus Spec) | (aus Spec) | (aus Spec) | [ ] |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Kategorie F — Marke & Stil
|
||||||
|
|
||||||
|
### Pflicht
|
||||||
|
|
||||||
|
- [ ] Alle Farben kommen aus Design-Tokens (`globals.css`)
|
||||||
|
- [ ] Keine hardcodierten Hex/RGB-Werte im Code
|
||||||
|
- [ ] Heading-Font entspricht `brand.fonts.heading.family`
|
||||||
|
- [ ] Body-Font entspricht `brand.fonts.body.family`
|
||||||
|
- [ ] Visueller Stil entspricht den Stil-Adjektiven
|
||||||
|
- [ ] **Keines der Stil-Verbote wurde verletzt**
|
||||||
|
|
||||||
|
### Stil-Check
|
||||||
|
|
||||||
|
```
|
||||||
|
[ ] Passt jedes UI-Element zu den Stil-Adjektiven?
|
||||||
|
[ ] Verstößt kein Element gegen die Stil-Verbote?
|
||||||
|
[ ] Logo korrekt eingebunden (falls vorhanden)?
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Kategorie G — UX & Interaktion
|
||||||
|
|
||||||
|
### Pflicht
|
||||||
|
|
||||||
|
- [ ] Interaktionsniveau entspricht dem definierten Level (`ruhig`/`moderat`/`dynamisch`)
|
||||||
|
- [ ] Animations-Level ist korrekt (`keine`/`dezent`/`praesent`)
|
||||||
|
- [ ] Scroll-Verhalten ist korrekt konfiguriert (`normal`/`smooth`)
|
||||||
|
|
||||||
|
### Level-spezifische Checks
|
||||||
|
|
||||||
|
**Bei `ruhig`:**
|
||||||
|
- [ ] Keine framer-motion Animationen vorhanden
|
||||||
|
- [ ] Kein Parallax
|
||||||
|
- [ ] Maximal 1 CTA pro Viewport
|
||||||
|
- [ ] Große Whitespace-Blöcke
|
||||||
|
|
||||||
|
**Bei `moderat`:**
|
||||||
|
- [ ] Nur dezente Fade-In Animationen
|
||||||
|
- [ ] Subtile Hover-Effekte
|
||||||
|
- [ ] framer-motion sparsam eingesetzt
|
||||||
|
|
||||||
|
**Bei `dynamisch`:**
|
||||||
|
- [ ] Scroll-Animationen vorhanden
|
||||||
|
- [ ] Micro-Interactions implementiert
|
||||||
|
- [ ] framer-motion aktiv eingesetzt
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Kategorie H — Conversion
|
||||||
|
|
||||||
|
### Pflicht
|
||||||
|
|
||||||
|
- [ ] Primärer CTA-Text korrekt implementiert
|
||||||
|
- [ ] Primärer CTA-Ziel korrekt verlinkt
|
||||||
|
- [ ] Sekundärer CTA-Text korrekt implementiert (falls definiert)
|
||||||
|
- [ ] Sekundärer CTA-Ziel korrekt verlinkt (falls definiert)
|
||||||
|
|
||||||
|
### Kontaktmethoden
|
||||||
|
|
||||||
|
- [ ] `formular`: Kontaktformular auf Kontaktseite vorhanden
|
||||||
|
- [ ] `telefon`: Telefonnummer im Header sichtbar
|
||||||
|
- [ ] `buchung`: Buchungstool-Embed vorhanden (oder Platzhalter)
|
||||||
|
|
||||||
|
### Vertrauenselemente
|
||||||
|
|
||||||
|
- [ ] `bewertungen`: Bewertungs-Widgets oder Zitat-Karten platziert
|
||||||
|
- [ ] `zertifikate`: Logo-Leiste mit Zertifizierungen vorhanden
|
||||||
|
- [ ] `referenzen`: Kundenlogos oder Case-Studies eingebunden
|
||||||
|
- [ ] `community`: Mitglieder-Zahlen oder Social-Feeds vorhanden
|
||||||
|
|
||||||
|
### Conversion-Seiten-Check
|
||||||
|
|
||||||
|
- [ ] Konvertierungsseiten haben prominente CTAs above-the-fold
|
||||||
|
- [ ] Trust-Section direkt unter Hero auf Conversion-Seiten
|
||||||
|
- [ ] Einwand-Entkräftung vor Kontaktformular
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Kategorie I — Technik & Recht
|
||||||
|
|
||||||
|
### Impressum
|
||||||
|
|
||||||
|
- [ ] Impressum-Seite unter `/impressum` vorhanden
|
||||||
|
- [ ] `companyName` korrekt
|
||||||
|
- [ ] `street` korrekt
|
||||||
|
- [ ] `postalCode` + `city` korrekt
|
||||||
|
- [ ] `country` korrekt
|
||||||
|
- [ ] `email` korrekt
|
||||||
|
- [ ] `phone` korrekt (falls definiert)
|
||||||
|
- [ ] `vatId` korrekt (falls definiert)
|
||||||
|
- [ ] `register` korrekt (falls definiert)
|
||||||
|
|
||||||
|
### Datenschutz
|
||||||
|
|
||||||
|
- [ ] Datenschutz-Seite unter `/datenschutz` vorhanden
|
||||||
|
- [ ] Cookie-Hinweis enthalten
|
||||||
|
- [ ] Hosting-Info enthalten (aus `spec.technical.hosting`)
|
||||||
|
- [ ] Analytics-Angabe enthalten (aus `spec.technical.tracking`)
|
||||||
|
|
||||||
|
### Integrationen
|
||||||
|
|
||||||
|
- [ ] Newsletter-Integration vorhanden (wenn `newsletter: true`)
|
||||||
|
- [ ] Newsletter-Signup im Footer
|
||||||
|
- [ ] Buchungstool-Embed vorhanden (wenn `bookingTool` definiert)
|
||||||
|
- [ ] Externe Integrationen als TODO-Kommentare markiert
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Kategorie J — KI-Kontext
|
||||||
|
|
||||||
|
### Pflicht
|
||||||
|
|
||||||
|
- [ ] `whatIsImportant` wurde bei JEDER Designentscheidung berücksichtigt
|
||||||
|
- [ ] `whatToAvoid` wurde nirgendwo verletzt
|
||||||
|
- [ ] Positive Referenzen wurden als Inspiration erkennbar einbezogen (falls definiert)
|
||||||
|
- [ ] Negative Referenzen wurden bewusst vermieden (falls definiert)
|
||||||
|
|
||||||
|
### KI-Kontext-Check
|
||||||
|
|
||||||
|
```
|
||||||
|
[ ] Was ist besonders wichtig? → Umgesetzt?
|
||||||
|
[ ] Was darf auf keinen Fall passieren? → Vermieden?
|
||||||
|
[ ] Bei Konflikten: Kat. J priorisiert?
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Build & Deployment
|
## Build & Deployment
|
||||||
|
|
||||||
### Pflicht
|
### Pflicht
|
||||||
@@ -145,6 +360,19 @@ Kontrast-Ausnahmen müssen dokumentiert und begründet werden. Es muss ein Plan
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Browser-Kompatibilität
|
||||||
|
|
||||||
|
Unterstützte Browser (letzte 2 Major-Versionen):
|
||||||
|
|
||||||
|
- [ ] Chrome
|
||||||
|
- [ ] Firefox
|
||||||
|
- [ ] Safari
|
||||||
|
- [ ] Edge
|
||||||
|
|
||||||
|
Bei bekannten Inkompatibilitäten: dokumentieren und Workaround bereitstellen.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Projektspezifikation
|
## Projektspezifikation
|
||||||
|
|
||||||
### Pflicht
|
### Pflicht
|
||||||
@@ -160,19 +388,6 @@ Kontrast-Ausnahmen müssen dokumentiert und begründet werden. Es muss ein Plan
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Browser-Kompatibilität
|
|
||||||
|
|
||||||
Unterstützte Browser (letzte 2 Major-Versionen):
|
|
||||||
|
|
||||||
- [ ] Chrome
|
|
||||||
- [ ] Firefox
|
|
||||||
- [ ] Safari
|
|
||||||
- [ ] Edge
|
|
||||||
|
|
||||||
Bei bekannten Inkompatibilitäten: dokumentieren und Workaround bereitstellen.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Schnell-Checkliste
|
## Schnell-Checkliste
|
||||||
|
|
||||||
Vor Abschluss jeder Aufgabe durchgehen:
|
Vor Abschluss jeder Aufgabe durchgehen:
|
||||||
@@ -190,6 +405,21 @@ Vor Abschluss jeder Aufgabe durchgehen:
|
|||||||
[ ] 10. generation_log.json aktualisiert?
|
[ ] 10. generation_log.json aktualisiert?
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Kategorie-Schnellcheck
|
||||||
|
|
||||||
|
```
|
||||||
|
[ ] A. Unternehmensidentität korrekt?
|
||||||
|
[ ] B. Zielgruppe berücksichtigt?
|
||||||
|
[ ] C. Ansprache konsistent?
|
||||||
|
[ ] D. Alle Leistungen dargestellt?
|
||||||
|
[ ] E. Alle Seiten mit richtigem Purpose?
|
||||||
|
[ ] F. Stil-Adjektive eingehalten, Verbote vermieden?
|
||||||
|
[ ] G. Interaktionsniveau korrekt?
|
||||||
|
[ ] H. CTAs und Trust-Elemente platziert?
|
||||||
|
[ ] I. Impressum und Datenschutz vollständig?
|
||||||
|
[ ] J. KI-Kontext beachtet?
|
||||||
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Zusammenfassung
|
## Zusammenfassung
|
||||||
@@ -197,3 +427,4 @@ Vor Abschluss jeder Aufgabe durchgehen:
|
|||||||
> Erst wenn alle Checkboxen erfüllt sind, gilt eine Aufgabe als erledigt.
|
> Erst wenn alle Checkboxen erfüllt sind, gilt eine Aufgabe als erledigt.
|
||||||
> Keine Ausnahmen ohne explizite Dokumentation und Begründung.
|
> Keine Ausnahmen ohne explizite Dokumentation und Begründung.
|
||||||
> Build-Fehler sind Blocker. Accessibility-Verstöße sind Blocker.
|
> Build-Fehler sind Blocker. Accessibility-Verstöße sind Blocker.
|
||||||
|
> KI-Kontext-Verstöße (Kat. J `whatToAvoid`) sind Blocker.
|
||||||
|
|||||||
@@ -44,6 +44,271 @@ Design entsteht ausschließlich aus den Projekt-Specs, nicht aus diesen Skills.
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Parameter-Interpreter-Modus
|
||||||
|
|
||||||
|
Das System arbeitet mit **9 strukturierten Parameter-Kategorien (A–J)**. Diese Kategorien sind in `CLIENT_OVERRIDES.md` und `master_prompt.md` vollständig aufbereitet.
|
||||||
|
|
||||||
|
### Die 9 Kategorien
|
||||||
|
|
||||||
|
| Kat. | Name | Beschreibung |
|
||||||
|
|------|------|--------------|
|
||||||
|
| A | Unternehmensidentität & Kontext | Name, Slug, Beschreibung, Branche, Standort, Einzugsgebiet, Unternehmensgröße, Reifegrad, Locale, Kontaktdaten |
|
||||||
|
| B | Zielgruppe & Psychografie | Hauptzielgruppe, Altersbereich, Geschlecht, Entscheidertyp, Wissensstand, typische Einwände, Hauptprobleme |
|
||||||
|
| C | Tonalität & Kommunikation | Ansprache (Du/Sie), Basis-Tonalität, Schreibstil, emotionales Gefühl |
|
||||||
|
| D | Angebot & Leistungsstruktur | Angebotstyp, Leistungen mit Titel/Beschreibung/Nutzen, Preissensitivität, Upsells |
|
||||||
|
| E | Seitenarchitektur | Website-Typ (Onepager/Multipage), Seiten mit Slug/Titel/Beschreibung/Zweck/Priorität/Sections |
|
||||||
|
| F | Marken- & Stilparameter | Farben (12 Token), Fonts, Logo, Stil-Adjektive (max 5), Stil-Verbote |
|
||||||
|
| G | UX & Interaktion | Interaktionsniveau, Animationen, Scroll-Verhalten |
|
||||||
|
| H | Vertrauen & Conversion | Primärer & Sekundärer CTA, Kontaktmethoden, Vertrauenselemente |
|
||||||
|
| I | Technik & Recht | Domain, Hosting, Tracking, Legal-Daten, Features, Integrationen |
|
||||||
|
| J | KI-Kontext | Freitext: Was ist BESONDERS WICHTIG, was darf AUF KEINEN FALL passieren, Referenzen |
|
||||||
|
|
||||||
|
### Arbeitsweise
|
||||||
|
|
||||||
|
- Jede Kategorie enthält fertig aufbereitete Parameter
|
||||||
|
- **Keine Interpretation nötig** — die Parameter werden 1:1 umgesetzt
|
||||||
|
- Bei fehlenden Parametern: Sinnvolle Defaults verwenden, aber dokumentieren
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## KI-Kontext Gewichtungshierarchie
|
||||||
|
|
||||||
|
Die Priorität bei Konflikten folgt dieser Hierarchie (höchste zuerst):
|
||||||
|
|
||||||
|
```
|
||||||
|
1. SYSTEM_SKILLS.md
|
||||||
|
2. UI_GUIDELINES.md
|
||||||
|
3. DEFINITION_OF_DONE.md
|
||||||
|
4. KI-KONTEXT (Kategorie J)
|
||||||
|
5. CLIENT_OVERRIDES (Kategorien A–I)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Spezielle Regeln für Kategorie J
|
||||||
|
|
||||||
|
- **Kategorie J hat die höchste Gewichtung innerhalb der Client-Parameter**
|
||||||
|
- Bei Konflikten zwischen Kat. J und Kat. A–I: **Kat. J gewinnt**
|
||||||
|
- Bei Konflikten zwischen Kat. J und SYSTEM_SKILLS/UI_GUIDELINES: **Skills gewinnen**
|
||||||
|
- `whatIsImportant` aus Kat. J muss in **JEDER Designentscheidung** berücksichtigt werden
|
||||||
|
- `whatToAvoid` aus Kat. J sind **harte Verbote** — keine Ausnahmen
|
||||||
|
|
||||||
|
### Beispiel
|
||||||
|
|
||||||
|
Wenn Kat. J sagt "Keine Animationen" und Kat. G sagt "Interaktionsniveau: dynamisch", dann gilt: **Keine Animationen**.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Seiten-Zweck-System
|
||||||
|
|
||||||
|
Jede Seite in Kat. E hat einen definierten `purpose` und eine `priority`.
|
||||||
|
|
||||||
|
### Purpose-Typen
|
||||||
|
|
||||||
|
| Purpose | Beschreibung | Content-Strategie |
|
||||||
|
|---------|--------------|-------------------|
|
||||||
|
| `informieren` | Fakten vermitteln | Fakten zuerst, klare Struktur, erklärende Sprache, CTAs dezent |
|
||||||
|
| `ueberzeugen` | Überzeugungsarbeit leisten | USPs hervorheben, Social Proof, emotionale + rationale Argumentation |
|
||||||
|
| `konvertieren` | Zur Handlung bewegen | Prominente CTAs, Einwände adressieren, Trust-Elemente, Urgency |
|
||||||
|
|
||||||
|
### Priority-Levels
|
||||||
|
|
||||||
|
| Priority | Beschreibung |
|
||||||
|
|----------|--------------|
|
||||||
|
| `hoch` | Maximaler Detailgrad, höchste Aufmerksamkeit bei der Implementierung |
|
||||||
|
| `mittel` | Solide Umsetzung mit allen wesentlichen Elementen |
|
||||||
|
| `niedrig` | Basis-Umsetzung, funktional aber ohne Extras |
|
||||||
|
|
||||||
|
### Umsetzung
|
||||||
|
|
||||||
|
- **Informieren:** H2-Struktur für Scanability, Inhaltsverzeichnis bei langen Seiten, CTAs am Ende von Sektionen
|
||||||
|
- **Überzeugen:** Problem → Lösung → Beweis → CTA Flow, USP-Cards/Feature-Grid, Social Proof prominent
|
||||||
|
- **Konvertieren:** Above-the-fold CTA, Trust-Section direkt unter Hero, Einwand-Entkräftung vor Kontaktformular
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Kommunikations-Parameter
|
||||||
|
|
||||||
|
Die Kommunikation wird durch Kategorie C definiert und muss **konsistent auf ALLEN Seiten** umgesetzt werden.
|
||||||
|
|
||||||
|
### Ansprache (address)
|
||||||
|
|
||||||
|
| Wert | Verwendung | Beispiel |
|
||||||
|
|------|------------|----------|
|
||||||
|
| `du` | Informelle Ansprache | "Schick uns eine Nachricht", "Dein Name" |
|
||||||
|
| `sie` | Formelle Ansprache | "Senden Sie uns eine Nachricht", "Ihr Name" |
|
||||||
|
|
||||||
|
**Pflicht:** Die gewählte Ansprache gilt für:
|
||||||
|
- Alle Fließtexte
|
||||||
|
- Alle Button-Labels
|
||||||
|
- Alle Formular-Labels und Placeholders
|
||||||
|
- Alle Microcopy-Elemente
|
||||||
|
- Alle CTAs
|
||||||
|
|
||||||
|
### Tonalität (baseTone)
|
||||||
|
|
||||||
|
| Wert | Beschreibung |
|
||||||
|
|------|--------------|
|
||||||
|
| `sachlich` | Neutral, faktenbasiert, nüchtern |
|
||||||
|
| `freundlich` | Warm, einladend, zugänglich |
|
||||||
|
| `beratend` | Kompetent, hilfsbereit, lösungsorientiert |
|
||||||
|
| `motivierend` | Energetisch, inspirierend, aktivierend |
|
||||||
|
| `exklusiv` | Premium, distinguiert, hochwertig |
|
||||||
|
|
||||||
|
### Schreibstil (writingStyle)
|
||||||
|
|
||||||
|
| Wert | Beschreibung |
|
||||||
|
|------|--------------|
|
||||||
|
| `kurz_praegnant` | Kurze Sätze, auf den Punkt, keine Füllwörter |
|
||||||
|
| `erklaerend` | Ausführlicher, didaktisch, schrittweise |
|
||||||
|
| `emotional` | Gefühlsbetont, storytelling, persönlich |
|
||||||
|
| `technisch` | Fachsprachlich, präzise, detailliert |
|
||||||
|
|
||||||
|
### Emotionales Gefühl (emotionalFeeling)
|
||||||
|
|
||||||
|
Beschreibt das gewünschte Gesamtgefühl der Website (z.B. "vertrauenswürdig und modern", "dynamisch und innovativ"). Muss sich im Gesamtdesign widerspiegeln.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Vertrauens- & Conversion-Elemente
|
||||||
|
|
||||||
|
Kategorie H definiert, wie Vertrauen aufgebaut und Conversions erzielt werden.
|
||||||
|
|
||||||
|
### Vertrauenselemente (trustElements)
|
||||||
|
|
||||||
|
| Element | Implementierung |
|
||||||
|
|---------|-----------------|
|
||||||
|
| `bewertungen` | Google/Trustpilot-Widgets oder Zitat-Karten mit Sternebewertung |
|
||||||
|
| `zertifikate` | Logo-Leiste mit Zertifizierungen (TÜV, ISO, etc.) |
|
||||||
|
| `referenzen` | Kundenlogos oder Case-Study-Snippets |
|
||||||
|
| `community` | Mitglieder-Zahlen, Social-Media-Feeds, Follower-Counts |
|
||||||
|
|
||||||
|
### Kontaktmethoden (contactMethods)
|
||||||
|
|
||||||
|
| Methode | Implementierung |
|
||||||
|
|---------|-----------------|
|
||||||
|
| `formular` | Kontaktformular prominent auf Kontaktseite, ggf. auch in Footer |
|
||||||
|
| `telefon` | Telefonnummer im Header + sticky CTA auf Mobile |
|
||||||
|
| `buchung` | Buchungstool-Integration (z.B. Calendly-Embed) auf Kontaktseite |
|
||||||
|
|
||||||
|
### CTA-Implementierung
|
||||||
|
|
||||||
|
- **Primärer CTA:** Haupthandlungsaufforderung, prominent platziert (Hero, Header, Sticky)
|
||||||
|
- **Sekundärer CTA:** Alternative Handlung, weniger prominent aber sichtbar
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Interaktions-Level
|
||||||
|
|
||||||
|
Kategorie G definiert das Interaktionsniveau der Website.
|
||||||
|
|
||||||
|
### Level-Definitionen
|
||||||
|
|
||||||
|
| Level | Beschreibung | Regeln |
|
||||||
|
|-------|--------------|--------|
|
||||||
|
| `ruhig` | Maximale visuelle Ruhe | Keine Animationen, kein Parallax, statisches Layout, **framer-motion NICHT verwenden**, maximal 1 CTA pro Viewport |
|
||||||
|
| `moderat` | Ausgewogenes Layout | Dezente Fade-In Animationen, subtile Hover-Effekte, **framer-motion sparsam einsetzen**, IntersectionObserver-basierte Reveals |
|
||||||
|
| `dynamisch` | Lebendige Interaktion | Scroll-Animationen, Parallax erlaubt, Micro-Interactions, **framer-motion aktiv eingesetzt**, Sticky CTAs |
|
||||||
|
|
||||||
|
### Animations-Einstellung (animations)
|
||||||
|
|
||||||
|
| Wert | Beschreibung |
|
||||||
|
|------|--------------|
|
||||||
|
| `keine` | Absolut keine Animationen, auch keine Hover-Transitions |
|
||||||
|
| `dezent` | Nur subtile Transitions (opacity, transform), max. 300ms |
|
||||||
|
| `praesent` | Auffälligere Animationen, Scroll-triggered, Stagger-Effekte |
|
||||||
|
|
||||||
|
### Scroll-Verhalten (scrollBehavior)
|
||||||
|
|
||||||
|
| Wert | CSS-Umsetzung |
|
||||||
|
|------|---------------|
|
||||||
|
| `normal` | `scroll-behavior: auto` |
|
||||||
|
| `smooth` | `scroll-behavior: smooth` (auf `html` Element) |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Integrationen
|
||||||
|
|
||||||
|
Kategorie I definiert technische Integrationen.
|
||||||
|
|
||||||
|
### Newsletter
|
||||||
|
|
||||||
|
Wenn `newsletter: true`:
|
||||||
|
- Newsletter-Signup-Formular im Footer
|
||||||
|
- Dedizierte Section auf der Startseite (optional)
|
||||||
|
- Platzhalter für Newsletter-Provider (Mailchimp, etc.)
|
||||||
|
|
||||||
|
### Buchungstool
|
||||||
|
|
||||||
|
Wenn `bookingTool` gesetzt:
|
||||||
|
- Als iframe/embed auf der Kontaktseite einbinden
|
||||||
|
- Platzhalter-Embed wenn kein konkreter Anbieter angegeben:
|
||||||
|
```html
|
||||||
|
<!-- TODO: Buchungstool-Integration hier einfügen -->
|
||||||
|
<div class="booking-placeholder">Buchungstool wird hier eingebunden</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Externe Integrationen
|
||||||
|
|
||||||
|
Externe Integrationen als Platzhalter-Kommentare im Code markieren:
|
||||||
|
```typescript
|
||||||
|
// TODO: Integration ${name} - ${description}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Impressum & Datenschutz
|
||||||
|
|
||||||
|
### Impressum
|
||||||
|
|
||||||
|
Legal-Daten kommen aus `spec.technical.legal.impressum` mit folgender Struktur:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"companyName": "Firmenname GmbH",
|
||||||
|
"street": "Musterstraße 1",
|
||||||
|
"postalCode": "12345",
|
||||||
|
"city": "Musterstadt",
|
||||||
|
"country": "Deutschland",
|
||||||
|
"email": "info@example.com",
|
||||||
|
"phone": "+49 123 456789",
|
||||||
|
"vatId": "DE123456789",
|
||||||
|
"register": "HRB 12345, Amtsgericht Musterstadt"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Pflicht:** Die KI generiert aus diesen Daten automatisch eine korrekte Impressum-Seite gemäß DACH-Recht.
|
||||||
|
|
||||||
|
### Datenschutz
|
||||||
|
|
||||||
|
Datenschutz-Seite enthält mindestens:
|
||||||
|
- Cookie-Hinweis
|
||||||
|
- Hosting-Info (aus `spec.technical.hosting`)
|
||||||
|
- Analytics-Angabe (aus `spec.technical.tracking`)
|
||||||
|
- Kontaktdaten des Verantwortlichen
|
||||||
|
- Hinweis auf Rechte der Betroffenen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Research-Insights Nutzung
|
||||||
|
|
||||||
|
Die `llmResearch`-Daten im ProjectSpec enthalten wertvolle Insights.
|
||||||
|
|
||||||
|
### Verfügbare Research-Daten
|
||||||
|
|
||||||
|
| Feld | Verwendung |
|
||||||
|
|------|------------|
|
||||||
|
| `audienceAnalysis` | Bei Content-Erstellung für Kat. B berücksichtigen |
|
||||||
|
| `uxRecommendations` | Bei Layout-Entscheidungen berücksichtigen |
|
||||||
|
| `conversionStrategy` | Bei CTA-Platzierung und Funnel-Design berücksichtigen |
|
||||||
|
| `suggestedUSPs` | Auf Startseite und Überzeugungsseiten prominent platzieren |
|
||||||
|
|
||||||
|
### Umsetzung
|
||||||
|
|
||||||
|
- USPs aus `suggestedUSPs` als Feature-Cards oder Hero-Bullet-Points
|
||||||
|
- `conversionStrategy` bestimmt den Aufbau von Conversion-Seiten
|
||||||
|
- `uxRecommendations` fließen in Layout-Entscheidungen ein
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Source of Truth
|
## Source of Truth
|
||||||
|
|
||||||
Das Design und die Anforderungen einer Website basieren ausschließlich auf:
|
Das Design und die Anforderungen einer Website basieren ausschließlich auf:
|
||||||
|
|||||||
@@ -43,6 +43,208 @@ Diese Datei definiert **NICHT**:
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Stil-Adjektive & Stil-Verbote
|
||||||
|
|
||||||
|
Die visuellen Grundprinzipien werden durch Kategorie F definiert.
|
||||||
|
|
||||||
|
### Stil-Adjektive (styleAdjectives)
|
||||||
|
|
||||||
|
Maximal 5 Wörter, die den visuellen Charakter definieren (z.B. "modern", "sportlich", "seriös", "elegant", "minimalistisch").
|
||||||
|
|
||||||
|
**Pflicht:** Bei JEDER visuellen Entscheidung prüfen:
|
||||||
|
- Passt diese Entscheidung zu den definierten Adjektiven?
|
||||||
|
- Verstärkt sie den gewünschten Charakter?
|
||||||
|
|
||||||
|
### Stil-Verbote (styleProhibitions)
|
||||||
|
|
||||||
|
Definieren No-Gos (z.B. "verspielt", "comic", "laut", "kitschig").
|
||||||
|
|
||||||
|
**Pflicht:** Keine Designentscheidung darf gegen ein Stil-Verbot verstoßen.
|
||||||
|
|
||||||
|
### Prüfschema
|
||||||
|
|
||||||
|
Vor jeder UI-Entscheidung:
|
||||||
|
1. ✓ Passt es zu den Stil-Adjektiven?
|
||||||
|
2. ✓ Verstößt es gegen kein Stil-Verbot?
|
||||||
|
3. ✓ Ist es konsistent mit bisherigen Entscheidungen?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Adaptive Layout-Regeln nach Interaktionsniveau
|
||||||
|
|
||||||
|
Das Layout passt sich dem definierten Interaktionsniveau aus Kategorie G an.
|
||||||
|
|
||||||
|
### Level: ruhig
|
||||||
|
|
||||||
|
- Maximale visuelle Ruhe
|
||||||
|
- Große Whitespace-Blöcke (min. `--spacing-2xl` zwischen Sections)
|
||||||
|
- Keine Animationen
|
||||||
|
- Maximal 1 CTA pro Viewport
|
||||||
|
- Keine Sticky-Elemente außer minimaler Header
|
||||||
|
- Klare vertikale Rhythmik
|
||||||
|
- Keine Parallax-Effekte
|
||||||
|
|
||||||
|
### Level: moderat
|
||||||
|
|
||||||
|
- Ausgewogenes Layout
|
||||||
|
- Dezente Hover-Effekte (opacity, subtle scale)
|
||||||
|
- IntersectionObserver-basierte Fade-Ins
|
||||||
|
- Moderate Whitespace (`--spacing-xl` bis `--spacing-2xl`)
|
||||||
|
- CTAs dürfen wiederholt werden, aber nicht aufdringlich
|
||||||
|
- Subtile Scroll-Progress-Indikatoren erlaubt
|
||||||
|
|
||||||
|
### Level: dynamisch
|
||||||
|
|
||||||
|
- Scroll-triggered Animationen erlaubt
|
||||||
|
- Parallax-Effekte möglich
|
||||||
|
- Interaktive Elemente (Hover-Reveals, Micro-Interactions)
|
||||||
|
- Sticky CTAs auf Mobile
|
||||||
|
- Stagger-Animationen für Listen
|
||||||
|
- Visuelle Überraschungsmomente erlaubt
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Conversion-optimiertes Layout
|
||||||
|
|
||||||
|
Das Layout richtet sich nach dem Seiten-Zweck aus Kategorie E.
|
||||||
|
|
||||||
|
### Seiten mit purpose: konvertieren
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ Hero mit primärem CTA above-the-fold │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ Trust-Section (direkt unter Hero) │
|
||||||
|
│ - Bewertungen, Zertifikate, Logos │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ Nutzen / USPs │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ Einwand-Entkräftung │
|
||||||
|
│ - FAQ oder "Häufige Fragen" │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ Kontaktformular / Buchung │
|
||||||
|
│ - Mit sekundärem CTA │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
- Above-the-fold CTA mit primärer Handlungsaufforderung
|
||||||
|
- Trust-Section direkt unter dem Hero
|
||||||
|
- Einwand-Entkräftung vor dem Kontaktformular
|
||||||
|
- Sticky CTA-Bar auf Mobile
|
||||||
|
|
||||||
|
### Seiten mit purpose: informieren
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ Klare H1 + Einleitung │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ Inhaltsverzeichnis (bei langen │
|
||||||
|
│ Seiten > 3 Sections) │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ Content-Sections mit H2-Struktur │
|
||||||
|
│ - Scanbare Absätze │
|
||||||
|
│ - Listen und Tabellen │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ CTA am Ende (nicht dominant) │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
- Klare H2-Struktur für Scanability
|
||||||
|
- Inhaltsverzeichnis bei langen Seiten (>3 Sections)
|
||||||
|
- CTAs am Ende von Sektionen, nicht dominant
|
||||||
|
- Fokus auf Lesbarkeit und Navigation
|
||||||
|
|
||||||
|
### Seiten mit purpose: ueberzeugen
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ Problem-Statement (Identifikation) │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ Lösung präsentieren │
|
||||||
|
│ - USP-Cards / Feature-Grid │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ Beweis (Social Proof) │
|
||||||
|
│ - Testimonials, Case Studies │
|
||||||
|
│ - Zahlen und Fakten │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ CTA mit klarer Handlungsaufforderung │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
- Problem → Lösung → Beweis → CTA Flow
|
||||||
|
- USP-Cards/Feature-Grid prominent
|
||||||
|
- Social Proof zwischen Content-Sections
|
||||||
|
- Emotionale + rationale Argumentation
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ansprache-konsistente UI-Texte
|
||||||
|
|
||||||
|
Alle UI-Texte müssen die Ansprache aus Kategorie C widerspiegeln.
|
||||||
|
|
||||||
|
### Ansprache: du
|
||||||
|
|
||||||
|
| Element | Beispiel |
|
||||||
|
|---------|----------|
|
||||||
|
| Button | "Jetzt starten", "Schick uns eine Nachricht" |
|
||||||
|
| Formular-Label | "Dein Name", "Deine E-Mail" |
|
||||||
|
| Placeholder | "Wie können wir dir helfen?" |
|
||||||
|
| Microcopy | "Wir melden uns bei dir zurück" |
|
||||||
|
| Fehlertext | "Bitte gib deine E-Mail an" |
|
||||||
|
| Erfolgstext | "Danke! Wir haben deine Nachricht erhalten." |
|
||||||
|
|
||||||
|
### Ansprache: sie
|
||||||
|
|
||||||
|
| Element | Beispiel |
|
||||||
|
|---------|----------|
|
||||||
|
| Button | "Jetzt starten", "Senden Sie uns eine Nachricht" |
|
||||||
|
| Formular-Label | "Ihr Name", "Ihre E-Mail" |
|
||||||
|
| Placeholder | "Wie können wir Ihnen helfen?" |
|
||||||
|
| Microcopy | "Wir melden uns bei Ihnen" |
|
||||||
|
| Fehlertext | "Bitte geben Sie Ihre E-Mail an" |
|
||||||
|
| Erfolgstext | "Vielen Dank! Wir haben Ihre Nachricht erhalten." |
|
||||||
|
|
||||||
|
### Konsistenz-Regel
|
||||||
|
|
||||||
|
**Pflicht:** Die gewählte Ansprache muss auf ALLEN Seiten und in ALLEN UI-Elementen konsistent sein. Mischformen sind verboten.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Responsive Breakpoints
|
||||||
|
|
||||||
|
### Konkrete Viewports
|
||||||
|
|
||||||
|
| Viewport | Bereich | Verhalten |
|
||||||
|
|----------|---------|-----------|
|
||||||
|
| Mobile | 320px – 767px | Hamburger Navigation, Stack-Layout, Touch-Targets 44×44px |
|
||||||
|
| Tablet | 768px – 1023px | Collapsed Navigation erlaubt, 2-Column-Grids |
|
||||||
|
| Desktop | 1024px+ | Full Navigation, bis zu 4-Column-Grids |
|
||||||
|
|
||||||
|
### Mobile (320px – 767px)
|
||||||
|
|
||||||
|
- Hamburger-Navigation mit Slide-Out oder Fullscreen-Overlay
|
||||||
|
- Einspaltiges Layout (Stack)
|
||||||
|
- Touch-Targets mindestens 44×44px
|
||||||
|
- Keine Hover-Only-Interaktionen
|
||||||
|
- Sticky Header (optional, je nach Interaktionsniveau)
|
||||||
|
- Bottom-Sticky CTAs bei Conversion-Seiten
|
||||||
|
|
||||||
|
### Tablet (768px – 1023px)
|
||||||
|
|
||||||
|
- Navigation kann collapsed bleiben oder aufklappen
|
||||||
|
- 2-Column-Grids möglich
|
||||||
|
- Touch und Hover coexistieren
|
||||||
|
- Seitlicher Padding erhöht
|
||||||
|
|
||||||
|
### Desktop (1024px+)
|
||||||
|
|
||||||
|
- Volle Navigation sichtbar
|
||||||
|
- Bis zu 4-Column-Grids
|
||||||
|
- Hover-Effekte aktiv
|
||||||
|
- Container-Max-Width greift
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Accessibility (Barrierefreiheit)
|
## Accessibility (Barrierefreiheit)
|
||||||
|
|
||||||
### WCAG 2.1 Level AA
|
### WCAG 2.1 Level AA
|
||||||
|
|||||||
1
tsconfig.tsbuildinfo
Normal file
1
tsconfig.tsbuildinfo
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user