# design.md – Designsystem für das Buchungssystem

## Übersicht

Dieses Dokument beschreibt das aktuelle Designsystem von CalBook. Es dient als Referenz für Konsistenz bei Weiterentwicklungen.

---

## 1) Produktkontext

Zwei Bereiche:

1. **Kundenansicht** (`/buchen`) – Öffentliche Buchungsoberfläche
   - Ablauf: Person wählen → Datum → Uhrzeit → Kontaktdaten → Bestätigung
   - Auto-Scroll zum nächsten Schritt
   - Framer-Motion-Animationen im Success-Screen

2. **Admin-Backend** (`/admin/*`) – Interne Verwaltungsoberfläche
   - 9 Seiten: Dashboard, Termine, Kalender, E-Mails, Branding, Rechtliches, Instant Meeting, Backup, Einstellungen
   - Seiten-Layout einheitlich: Sidebar (260px) + Content (`max-w-6xl`, zentriert)
   - Framer-Motion `AnimatedPage`-Wrapper für konsistente Page-Transitions

---

## 2) Farbstimmung

- **Kundenansicht**: slate-50 Hintergrund, indigo-600 als Akzentfarbe
- **Admin**: slate-50 Hintergrund, slate-900 für Header/Aktionen, indigo-600 für aktive Elemente
- **Statusfarben**: emerald (bestätigt/aktiv), amber (ausstehend/no-show), red (Fehler/storniert)
- **Text**: slate-900 (primär), slate-500 (sekundär), slate-400 (deaktiviert)

---

## 3) Typografie

- **Schrift**: System-UI-Stack (`font-sans`) via Tailwind
- **Hierarchie**: `text-3xl font-black` (Seitentitel) → `text-lg font-bold` (Sektionsheader) → `text-sm font-medium` (Fließtext) → `text-xs` (Metadaten)
- **Labels**: `text-xs font-bold uppercase tracking-wider text-slate-500`

---

## 4) Komponenten

### Cards
```
rounded-2xl border border-slate-200 bg-white shadow-sm
```

### Buttons
- **Primär**: `bg-slate-900 text-white hover:bg-slate-800 rounded-xl`
- **Sekundär**: `border border-slate-200 bg-white hover:bg-slate-50 rounded-xl`
- **Destruktiv**: `bg-red-600 text-white hover:bg-red-700 rounded-xl`

### Inputs
```
h-11 rounded-xl border border-slate-200 bg-slate-50 px-4
focus:border-indigo-600 focus:ring-1 focus:ring-indigo-600
```

### Tabs
```
rounded-t-2xl border border-b-0 bg-slate-50/80
Aktiv: border-b-2 border-slate-900 bg-white text-slate-900
Inaktiv: text-slate-500 hover:bg-white/50
```

---

## 5) Admin-Layout

- **Desktop**: Fixierte Sidebar links (260px), Content rechts (`lg:pl-60`)
- **Mobile**: Topbar mit Burger-Menü, Slide-Over-Navigation
- **Animation**: `AnimatedPage`-Wrapper (framer-motion, key={pathname}) für Page-Transitions
- **Loading**: `loading.tsx` mit Skeleton-Karten, erscheint sofort bei Navigation

---

## 6) Navigation

- **Sidebar**: 8 Items mit Icons (Dashboard, Termine, Kalender, E-Mails, Branding, Rechtliches, Instant Meeting, Backup, Einstellungen)
- **Bottom**: Link zur öffentlichen Buchung + Logout
- **Aktiver Zustand**: `bg-indigo-50 text-indigo-600`

---

## 7) Interaktionsmuster

- **Modale/Dialoge**: `ConfirmDialog`-Komponente mit Backdrop, Danger/Default-Variante
- **Inline-Edit**: Kalender-Personen bearbeiten direkt in der Zeile statt Modal
- **Expand/Collapse**: Chevron-Icons für Detail-Panels (Dashboard-Buchungen, Kalender-Ressourcen)
- **Toast**: `sonner`-Bibliothek, Position `top-right`, `richColors`

---

## 8) Buchungs-Flow

- **Schritte**: 1. Person → 2. Datum → 3. Uhrzeit → 4. Kontaktdaten
- **Auto-Scroll**: Nach jeder Auswahl scrollt die Seite zum nächsten Schritt
- **Kalender**: Monatsraster mit Verfügbarkeits-Indikatoren
- **Slots**: Flexible Buttons, 15-Minuten-Raster
- **Formular**: Name, E-Mail, Telefon (optional), Thema (optional)
- **Success**: Framer-Motion animierte Bestätigungskarte, ICS-Download, "Weiteren Termin"-Button

---

## 9) Email-Templates

- **Event-Typen**: 10 Kategorien (Bestätigung, Benachrichtigung, Stornierung, Erinnerungen, Instant Meeting, SMTP-Test)
- **Sidebar**: Gruppierte Event-Typ-Auswahl (Buchung/Stornierung/Erinnerungen/Spezial)
- **Live-Vorschau**: Immer sichtbar, aktualisiert bei Template-Wechsel
- **Design-Styles**: 9 vordefinierte Farbschemas (Minimal, Corporate, Startup, Serif, Mono, Glass, Ink, Warm, Soft)
- **Editor**: Inline unter der Template-Liste, Name/Betreff/Inhalt-Felder

---

## 10) Backup

- **Export**: JSON-Download mit allen Daten (inkl. CalDAV-Key für Re-Encryption)
- **Import**: Upload mit Vorschau, Schritt-für-Schritt-Roadmap, Fehler pro Kategorie sichtbar
- **URL-Filter**: PUBLIC_URL, NEXTAUTH_URL, APP_BASE_URL werden nicht exportiert/importiert
- **Standalone-Script**: `scripts/export-backup.sh` für ältere Versionen ohne API