telenetsystems-2026-02-03-v1/skills/DEFINITION_OF_DONE.md

# Definition of Done

Harte Abnahmekriterien. Eine Aufgabe gilt erst als abgeschlossen, wenn alle Kriterien erfüllt sind.

---

## Scope

Diese Datei definiert **verbindliche Abnahmekriterien** für:
- Build und Deployment
- Code-Qualität
- Responsive Design
- Accessibility
- SEO
- Projektspezifikation
- **9 Parameter-Kategorien (A–J)**

**Geltungsbereich:** Gilt global für jedes Projekt. Keine Aufgabe ist fertig, bis diese Checkliste erfüllt ist.

---

## Read Order

Diese Datei wird nach den anderen Skills gelesen:

1. `skills/SYSTEM_SKILLS.md`
2. `skills/UI_GUIDELINES.md`
3. `skills/DEFINITION_OF_DONE.md` (diese Datei)
4. `skills/CLIENT_OVERRIDES.md`

Die Definition of Done ist die finale Prüfinstanz vor Abschluss einer Aufgabe.

---

## Non-Goals

Diese Datei definiert **NICHT**:
- Wie das Design aussehen soll
- Welche Farben oder Layouts verwendet werden
- Konkrete UI-Vorgaben
- Wie Code strukturiert sein soll (siehe SYSTEM_SKILLS.md)

Diese Datei prüft nur, ob Qualitätsstandards eingehalten wurden.

---

## 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

### Pflicht

- [ ] `npm run build` erfolgreich ohne Fehler
- [ ] Keine TypeScript-Fehler
- [ ] Keine ESLint-Fehler (Warnungen dokumentieren falls unvermeidbar)
- [ ] Keine Runtime-Errors in der Console

### Bei Fehlern

Build-Fehler müssen vor Abschluss behoben werden. Keine Ausnahmen.

---

## Code-Qualität

### Pflicht

- [ ] Keine `any` Types in TypeScript
- [ ] Keine auskommentierten Code-Blöcke
- [ ] Keine `console.log` im Production-Code
- [ ] Konsistente Namenskonventionen
- [ ] Keine ungenutzten Imports oder Variablen
- [ ] Keine Dead Code (ungenutzte Funktionen/Komponenten)

### Abhängigkeiten

- [ ] Keine ungenutzten Dependencies in `package.json`
- [ ] Keine Sicherheitslücken in Dependencies (soweit bekannt)

---

## Responsive Design

### Pflichtprüfung

| Viewport | Bereich | Status |
|----------|---------|--------|
| Mobile | 320px - 767px | [ ] geprüft |
| Tablet | 768px - 1023px | [ ] geprüft |
| Desktop | 1024px+ | [ ] geprüft |

### Kriterien

- [ ] Keine horizontalen Scrollbars auf keinem Viewport
- [ ] Keine abgeschnittenen oder überlagernden Inhalte
- [ ] Touch-Targets mindestens 44x44px auf Touch-Geräten
- [ ] Lesbare Schriftgrößen ohne Zoom

---

## Accessibility

### Pflicht

- [ ] Kontrast WCAG AA erfüllt (4.5:1 Text, 3:1 UI-Elemente)
- [ ] Tastatur-Navigation funktioniert vollständig
- [ ] Fokus-Indikatoren sind sichtbar
- [ ] Semantisches HTML verwendet (keine `<div>` statt `<button>`)
- [ ] Alt-Texte für alle informativen Bilder
- [ ] Formular-Labels vorhanden und verknüpft

### Bei Ausnahmen

Kontrast-Ausnahmen müssen dokumentiert und begründet werden. Es muss ein Plan zur Behebung existieren.

---

## SEO Mindeststandard

### Pflicht pro Seite

- [ ] Eindeutiger `<title>` vorhanden
- [ ] Meta-Description vorhanden
- [ ] Korrekte Heading-Hierarchie (nur ein `h1`, dann `h2` > `h3`)
- [ ] Open Graph Tags gesetzt
- [ ] Alt-Texte für Bilder

### Pflicht global

- [ ] `robots.txt` vorhanden
- [ ] Canonical URLs gesetzt (falls relevant)
- [ ] Keine Blocking-Resources für Crawler

---

## Performance

### Pflicht

- [ ] Bilder optimiert (WebP/AVIF, responsive srcset)
- [ ] Lazy Loading für Below-the-fold-Inhalte
- [ ] Keine unnötigen Dependencies
- [ ] Bundle-Größe im Budget (JS < 100kb gzip, CSS < 30kb gzip)

### Empfohlen

- [ ] Core Web Vitals im grünen Bereich (LCP < 2.5s, CLS < 0.1, INP < 200ms)

---

## Browser-Kompatibilität

Unterstützte Browser (letzte 2 Major-Versionen):

- [ ] Chrome
- [ ] Firefox
- [ ] Safari
- [ ] Edge

Bei bekannten Inkompatibilitäten: dokumentieren und Workaround bereitstellen.

---

## Projektspezifikation

### Pflicht

- [ ] Alle Anforderungen aus `ProjectSpec.json` umgesetzt
- [ ] Design entspricht `design_tokens.json` und `stylesheet.css`
- [ ] Keine eigenmächtigen Design-Entscheidungen
- [ ] CLIENT_OVERRIDES.md berücksichtigt (falls vorhanden)

### Dokumentation

- [ ] Änderungen in `generation_log.json` maschinell dokumentiert

---

## Schnell-Checkliste

Vor Abschluss jeder Aufgabe durchgehen:

```
[ ] 1. npm run build erfolgreich?
[ ] 2. Mobile (320px) geprüft?
[ ] 3. Tablet (768px) geprüft?
[ ] 4. Desktop (1024px+) geprüft?
[ ] 5. Kontrast WCAG AA erfüllt?
[ ] 6. Tastatur-Navigation funktioniert?
[ ] 7. SEO-Basics vorhanden (title, description, h1)?
[ ] 8. Anforderungen aus ProjectSpec erfüllt?
[ ] 9. Kein Dead Code oder ungenutzte Dependencies?
[ ] 10. generation_log.json aktualisiert?
```

### 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

> Erst wenn alle Checkboxen erfüllt sind, gilt eine Aufgabe als erledigt.
> Keine Ausnahmen ohne explizite Dokumentation und Begründung.
> Build-Fehler sind Blocker. Accessibility-Verstöße sind Blocker.
> KI-Kontext-Verstöße (Kat. J `whatToAvoid`) sind Blocker.