chore: Docs umstrukturiert, Client-Updates, Scripts nach scripts/

2026-01-28 20:00:37 +01:00
parent 4b38da3b85
commit 5ba12cb738
70 changed files with 1240 additions and 284 deletions
--- a/docs/README.md
+++ b/docs/README.md
@@ -0,0 +1,60 @@
+# Dokumentation
+
+Diese Dokumentation ist in verschiedene Kategorien unterteilt:
+
+## 📁 Struktur
+
+```
+docs/
+├── setup/              # Setup-Anleitungen
+├── deployment/         # Deployment & Production
+├── development/        # Development-Dokumentation
+├── server/             # Server-spezifische Docs
+├── examples/           # Beispiel-Code
+└── legacy/             # Legacy-Dateien
+```
+
+## 📚 Kategorien
+
+### Setup (`docs/setup/`)
+- **APPWRITE_SETUP.md** - Appwrite Installation & Konfiguration
+- **APPWRITE_CORS_SETUP.md** - CORS-Konfiguration für Appwrite
+- **GOOGLE_OAUTH_SETUP.md** - Google OAuth Setup
+- **SETUP_GUIDE.md** - Allgemeine Setup-Anleitung
+- **FAVICON_SETUP.md** - Favicon-Konfiguration
+
+### Deployment (`docs/deployment/`)
+- **README.md** - Deployment-Übersicht
+- **GITEA_WEBHOOK_SETUP.md** - Vollständige Anleitung für automatisches Deployment via Gitea Webhook
+- **WEBHOOK_QUICK_START.md** - Schnellstart-Anleitung (5 Minuten)
+- **WEBHOOK_AUTHORIZATION.md** - Webhook-Authentifizierung und Sicherheit
+- **PRODUCTION_SETUP.md** - Production-Server Setup
+- **PRODUCTION_FIXES.md** - Production-Fixes & Troubleshooting
+- **DEPLOYMENT_INSTRUCTIONS.md** - Manuelle Deployment-Anleitungen
+
+### Development (`docs/development/`)
+- **GIT_AUTHENTICATION_FIX.md** - Git-Authentifizierung
+- **PROJECT_RENAME_GUIDE.md** - Projekt-Umbenennung
+- **PROJECT_REVIEW_SUMMARY.md** - Projekt-Review
+- **TASK_5_COMPLETION.md** - Task-Completion-Dokumentation
+- **TESTING_SUMMARY.md** - Testing-Zusammenfassung
+
+### Server (`docs/server/`)
+- **CORRECTNESS_VALIDATION.md** - Korrektheits-Validierung
+- **E2E_TEST_GUIDE.md** - End-to-End Test Guide
+- **ENDPOINT_VERIFICATION.md** - API-Endpoint-Verifikation
+- **FRONTEND_VERIFICATION.md** - Frontend-Verifikation
+- **MANUAL_TEST_CHECKLIST.md** - Manuelle Test-Checkliste
+- **TASK_4_COMPLETION_SUMMARY.md** - Task 4 Completion
+
+### Examples (`docs/examples/`)
+- **starter-for-react/** - React Starter Template (Beispiel)
+
+### Legacy (`docs/legacy/`)
+- **public/** - Alte Public-Dateien (falls noch benötigt)
+
+## 🚀 Schnellstart
+
+1. **Erstes Setup:** Siehe `docs/setup/SETUP_GUIDE.md`
+2. **Production Deployment:** Siehe `docs/deployment/PRODUCTION_SETUP.md`
+3. **Development:** Siehe `docs/development/` für Development-Dokumentation
--- a/docs/deployment/DEPLOYMENT_INSTRUCTIONS.md
+++ b/docs/deployment/DEPLOYMENT_INSTRUCTIONS.md
@@ -0,0 +1,51 @@
+# Deployment-Anleitung
+
+## Status
+✅ **Build erfolgreich erstellt** - `client/dist` ist bereit für Deployment
+
+## Git Commit & Push
+Da Git nicht automatisch gefunden werden kann, führe bitte diese Befehle manuell aus:
+
+```bash
+cd c:\Users\User\Documents\GitHub\ANDJJJJJJ
+git add .
+git commit -m "fix: TypeScript errors & build fixes for Control Panel Redesign
+
+- Fix unused imports (Trash, Filter, Bell, CategoryAdvanced)
+- Fix undefined checks for cleanup settings
+- Fix cleanupPreview undefined checks
+- Fix useTheme unused parameter
+- Fix companyLabels type safety
+- Build erfolgreich durchgeführt"
+git push
+```
+
+## Deployment des Builds
+
+### Option 1: Manuelles Upload
+1. Öffne den Ordner: `c:\Users\User\Documents\GitHub\ANDJJJJJJ\client\dist`
+2. Kopiere alle Dateien aus diesem Ordner
+3. Lade sie auf deinen Web-Server hoch (z.B. via FTP/SFTP zu `emailsorter.webklar.com`)
+
+### Option 2: SSH/SCP (falls verfügbar)
+```bash
+scp -r client/dist/* user@webklar.com:/path/to/webserver/emailsorter/
+```
+
+### Option 3: GitHub Actions / CI/CD
+Falls du CI/CD eingerichtet hast, sollte der Push automatisch deployen.
+
+## Nach dem Deployment
+1. Leere den Browser-Cache (Strg+Shift+R)
+2. Prüfe die Website: https://emailsorter.webklar.com
+3. Teste die neuen Features:
+   - Control Panel mit Card-Layout
+   - Side Panels für Category Configuration
+   - Cleanup Tab mit Slidern
+   - Labels Tab mit Tabelle
+   - Dark Mode Verbesserungen
+
+## Wichtige Hinweise
+- Stelle sicher, dass `.env.production` die richtigen Production-URLs hat
+- Backend-Server muss laufen
+- Appwrite CORS muss für `https://emailsorter.webklar.com` konfiguriert sein
--- a/docs/deployment/GITEA_WEBHOOK_SETUP.md
+++ b/docs/deployment/GITEA_WEBHOOK_SETUP.md
@@ -0,0 +1,219 @@
+# Gitea Webhook Setup - Automatisches Deployment
+
+Diese Anleitung erklärt, wie du einen Gitea-Webhook einrichtest, um automatisch zu deployen, wenn Code gepusht wird.
+
+## Übersicht
+
+Der Webhook funktioniert folgendermaßen:
+1. **Push auf Gitea** → Gitea sendet Webhook-Event an deinen Server
+2. **Webhook-Handler** empfängt das Event und verifiziert die Signatur
+3. **Deployment-Skript** wird ausgeführt:
+   - Git Pull (falls auf Server)
+   - Frontend Build (`npm run build`)
+   - Upload auf Production-Server (via SCP/SSH)
+   - Backend Neustart (optional, via PM2)
+
+## Voraussetzungen
+
+- ✅ Gitea-Repository mit deinem Code
+- ✅ Production-Server mit SSH-Zugriff
+- ✅ Node.js auf dem Server installiert
+- ✅ PM2 installiert (optional, für Backend-Neustart)
+
+## Schritt 1: Webhook-Secret generieren
+
+Generiere ein sicheres Secret für die Webhook-Signatur-Verification:
+
+```bash
+# Generiere ein zufälliges Secret (32 Zeichen)
+node -e "console.log(require('crypto').randomBytes(16).toString('hex'))"
+```
+
+**Wichtig:** Speichere dieses Secret sicher - du brauchst es in Schritt 3 und 4.
+
+## Schritt 2: Environment Variables konfigurieren
+
+Füge folgende Variablen zu deiner `server/.env` Datei hinzu:
+
+```bash
+# Gitea Webhook Secret (aus Schritt 1)
+GITEA_WEBHOOK_SECRET=dein_generiertes_secret_hier
+
+# Optional: Authorization Header Token
+GITEA_WEBHOOK_AUTH_TOKEN=dein_auth_token_hier
+
+# Server-Deployment (optional, nur wenn automatischer Upload gewünscht)
+DEPLOY_SERVER_HOST=91.99.156.85
+DEPLOY_SERVER_USER=root
+DEPLOY_SERVER_PATH=/var/www/emailsorter
+DEPLOY_SSH_KEY=/path/to/ssh/private/key  # Optional, falls SSH-Key benötigt wird
+DEPLOY_FRONTEND_PATH=/var/www/emailsorter/client/dist
+DEPLOY_BACKEND_PATH=/var/www/emailsorter/server
+
+# PM2 für Backend-Neustart (optional)
+USE_PM2=true
+```
+
+## Schritt 3: Webhook in Gitea konfigurieren
+
+1. **Öffne dein Repository** in Gitea
+2. Gehe zu **Settings** → **Webhooks**
+3. Klicke auf **Add Webhook** → **Gitea**
+4. Fülle die Felder aus:
+
+   - **Target URL:**
+     ```
+     https://emailsorter.webklar.com/api/webhook/gitea
+     ```
+     (Ersetze mit deiner tatsächlichen Domain)
+
+   - **HTTP Method:** `POST`
+
+   - **Post Content Type:** `application/json`
+
+   - **Secret:**
+     ```
+     dein_generiertes_secret_hier
+     ```
+     (Das gleiche Secret wie in Schritt 1)
+
+   - **Authorization Header:** (Optional)
+     ```
+     Bearer dein_auth_token_hier
+     ```
+
+   - **Trigger On:**
+     - ✅ **Push Events** (wichtig!)
+     - Optional: **Create**, **Delete** (falls gewünscht)
+
+   - **Branch Filter:** `main` oder `master` (je nach deinem Standard-Branch)
+
+5. Klicke auf **Add Webhook**
+
+## Schritt 4: Webhook testen
+
+### Option A: Test über Gitea UI
+
+1. Gehe zurück zu **Settings** → **Webhooks**
+2. Klicke auf deinen Webhook
+3. Klicke auf **Test Delivery** → **Push Events**
+4. Prüfe die Antwort:
+   - ✅ **Status 202** = Webhook empfangen, Deployment gestartet
+   - ❌ **Status 401** = Secret falsch
+   - ❌ **Status 500** = Server-Fehler (prüfe Server-Logs)
+
+### Option B: Test über Git Push
+
+1. Mache eine kleine Änderung (z.B. Kommentar in einer Datei)
+2. Committe und pushe:
+   ```bash
+   git add .
+   git commit -m "test: Webhook test"
+   git push
+   ```
+3. Prüfe die Server-Logs:
+   ```bash
+   # Auf dem Server
+   pm2 logs emailsorter-backend
+   # Oder
+   tail -f /var/log/emailsorter/webhook.log
+   ```
+4. Du solltest sehen:
+   ```
+   📥 Gitea Webhook empfangen
+   🚀 Starte Deployment...
+   📦 Baue Frontend...
+   ✅ Deployment erfolgreich abgeschlossen
+   ```
+
+## Schritt 5: Deployment-Logs prüfen
+
+Die Webhook-Handler loggen alle Schritte. Prüfe die Logs:
+
+```bash
+# PM2 Logs
+pm2 logs emailsorter-backend
+
+# Oder direkt im Server
+tail -f server/logs/webhook.log
+```
+
+## Fehlerbehebung
+
+### Webhook wird nicht ausgelöst
+
+- ✅ Prüfe, ob die **Target URL** korrekt ist
+- ✅ Prüfe, ob der Server erreichbar ist (`curl https://emailsorter.webklar.com/api/webhook/status`)
+- ✅ Prüfe Gitea-Logs: **Settings** → **Webhooks** → **Delivery Log**
+
+### "Ungültige Webhook-Signatur" (401)
+
+- ✅ Prüfe, ob `GITEA_WEBHOOK_SECRET` in `server/.env` gesetzt ist
+- ✅ Prüfe, ob das Secret in Gitea **genau gleich** ist (keine Leerzeichen!)
+- ✅ Prüfe, ob der Webhook **"application/json"** als Content-Type verwendet
+
+### Deployment schlägt fehl
+
+- ✅ Prüfe Server-Logs für detaillierte Fehlermeldungen
+- ✅ Prüfe, ob SSH-Zugriff funktioniert: `ssh root@91.99.156.85`
+- ✅ Prüfe, ob `npm` und `node` auf dem Server installiert sind
+- ✅ Prüfe, ob die Pfade (`DEPLOY_SERVER_PATH`) korrekt sind
+
+### Frontend-Build fehlgeschlagen
+
+- ✅ Prüfe, ob alle Dependencies installiert sind: `cd client && npm install`
+- ✅ Prüfe, ob `.env.production` korrekt konfiguriert ist
+- ✅ Prüfe Build-Logs für TypeScript/ESLint-Fehler
+
+### Backend startet nicht neu
+
+- ✅ Prüfe, ob PM2 installiert ist: `pm2 --version`
+- ✅ Prüfe, ob `USE_PM2=true` in `.env` gesetzt ist
+- ✅ Prüfe PM2-Status: `pm2 list`
+
+## Sicherheit
+
+### Best Practices
+
+1. **Webhook-Secret:** Verwende immer ein starkes, zufälliges Secret
+2. **HTTPS:** Stelle sicher, dass dein Server HTTPS verwendet (Let's Encrypt)
+3. **Firewall:** Beschränke Webhook-Endpoint auf Gitea-IPs (optional)
+4. **Rate Limiting:** Der Webhook-Endpoint ist bereits rate-limited
+5. **Logs:** Prüfe regelmäßig die Webhook-Logs auf verdächtige Aktivitäten
+
+## Alternative: Lokales Deployment ohne Server-Upload
+
+Falls du den automatischen Upload auf den Server nicht möchtest, kannst du:
+
+1. `DEPLOY_SERVER_HOST` **nicht** setzen
+2. Das Deployment-Skript erstellt nur den Build lokal
+3. Du lädst die Dateien manuell hoch oder verwendest ein anderes Tool
+
+Der Webhook wird trotzdem ausgelöst und erstellt den Build, aber überspringt den Upload-Schritt.
+
+## Manuelles Deployment auslösen
+
+Du kannst das Deployment auch manuell auslösen:
+
+```bash
+# Auf dem Server
+cd /var/www/emailsorter
+node scripts/deploy-to-server.mjs
+```
+
+## Nächste Schritte
+
+Nach erfolgreichem Setup:
+
+1. ✅ Teste den Webhook mit einem kleinen Push
+2. ✅ Prüfe, ob die Website aktualisiert wurde
+3. ✅ Überwache die Logs für die ersten Deployments
+4. ✅ Dokumentiere deine spezifische Konfiguration
+
+## Support
+
+Bei Problemen:
+- Prüfe die Server-Logs
+- Prüfe Gitea Webhook Delivery Logs
+- Prüfe die Environment Variables
+- Teste SSH-Verbindung manuell
--- a/docs/deployment/PRODUCTION_FIXES.md
+++ b/docs/deployment/PRODUCTION_FIXES.md
@@ -0,0 +1,51 @@
+# Production Fixes - Wichtige Schritte
+
+## ✅ Behoben
+
+1. **Debug-Logs entfernt** - Alle Debug-Logs zu `127.0.0.1:7242` wurden entfernt
+2. **Favicon-Problem behoben** - `site.webmanifest` verwendet jetzt vorhandene SVG-Dateien
+
+## ⚠️ Noch zu beheben (im Appwrite Dashboard)
+
+### 1. Appwrite CORS-Konfiguration
+
+**Problem:** Appwrite erlaubt nur `https://localhost` statt `https://emailsorter.webklar.com`
+
+**Lösung:**
+1. Gehe zu: https://appwrite.webklar.com
+2. Öffne dein Projekt
+3. Gehe zu **Settings** → **Platforms** (oder **Web**)
+4. Füge eine neue Platform hinzu:
+   - **Name:** Production
+   - **Hostname:** `emailsorter.webklar.com`
+   - **Origin:** `https://emailsorter.webklar.com`
+5. Speichere die Änderungen
+
+**ODER** bearbeite die existierende Platform und ändere den Hostname/Origin zu `https://emailsorter.webklar.com`
+
+### 2. Backend-Server (502 Bad Gateway)
+
+**Problem:** `/api/analytics/track` gibt 502 zurück - Backend-Server läuft nicht
+
+**Lösung:**
+1. SSH zum Server: `ssh user@webklar.com`
+2. Prüfe ob Server läuft: `pm2 list` oder `ps aux | grep node`
+3. Falls nicht: Starte den Server:
+   ```bash
+   cd /path/to/ANDJJJJJJ/server
+   pm2 start index.mjs --name emailsorter-api
+   pm2 save
+   ```
+4. Prüfe Logs: `pm2 logs emailsorter-api`
+
+### 3. Build deployen
+
+Nach dem Commit und Push:
+1. Kopiere den Inhalt von `client/dist` auf den Web-Server
+2. Stelle sicher, dass die Dateien unter `https://emailsorter.webklar.com` erreichbar sind
+
+## Nach allen Fixes
+
+1. Leere den Browser-Cache (Strg+Shift+R)
+2. Teste die Website
+3. Prüfe die Browser-Konsole - sollte keine Fehler mehr zeigen
--- a/docs/deployment/PRODUCTION_SETUP.md
+++ b/docs/deployment/PRODUCTION_SETUP.md
@@ -0,0 +1,155 @@
+# Production Setup - emailsorter.webklar.com
+
+## Probleme und Lösungen
+
+### 1. Appwrite CORS-Konfiguration
+
+**Problem:** Appwrite blockiert Requests von `https://emailsorter.webklar.com` weil nur `https://localhost` als Origin erlaubt ist.
+
+**Lösung:**
+1. Gehe zu deiner Appwrite-Konsole: https://appwrite.webklar.com
+2. Öffne dein Projekt
+3. Gehe zu **Settings** → **Platforms** (oder **Web**)
+4. Füge eine neue Platform hinzu oder bearbeite die existierende:
+   - **Name:** Production
+   - **Hostname:** `emailsorter.webklar.com`
+   - **Origin:** `https://emailsorter.webklar.com`
+5. Speichere die Änderungen
+
+**Alternative:** Wenn du mehrere Origins brauchst, kannst du auch in Appwrite die CORS-Einstellungen anpassen, um mehrere Origins zu erlauben.
+
+---
+
+### 2. Backend-Server (502 Fehler)
+
+**Problem:** Der Backend-Server läuft nicht oder ist nicht erreichbar.
+
+**Lösung:**
+
+#### Option A: Server auf demselben Server starten
+
+1. **SSH zum Server:**
+   ```bash
+   ssh user@webklar.com
+   ```
+
+2. **Zum Projekt-Verzeichnis navigieren:**
+   ```bash
+   cd /path/to/ANDJJJJJJ/server
+   ```
+
+3. **Environment-Variablen setzen:**
+   Erstelle oder bearbeite `.env`:
+   ```env
+   NODE_ENV=production
+   PORT=3000
+   BASE_URL=https://api.emailsorter.webklar.com
+   FRONTEND_URL=https://emailsorter.webklar.com
+   CORS_ORIGIN=https://emailsorter.webklar.com
+   
+   APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
+   APPWRITE_PROJECT_ID=deine_projekt_id
+   APPWRITE_API_KEY=dein_api_key
+   APPWRITE_DATABASE_ID=email_sorter_db
+   
+   # ... weitere Variablen
+   ```
+
+4. **Server starten:**
+   ```bash
+   npm install
+   npm start
+   ```
+
+#### Option B: Mit PM2 (empfohlen für Production)
+
+```bash
+npm install -g pm2
+cd /path/to/ANDJJJJJJ/server
+pm2 start index.mjs --name emailsorter-api
+pm2 save
+pm2 startup
+```
+
+#### Option C: Reverse Proxy konfigurieren (Nginx)
+
+Falls der Server auf einem anderen Port läuft, konfiguriere Nginx:
+
+```nginx
+server {
+    listen 80;
+    server_name api.emailsorter.webklar.com;
+    
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
+```
+
+---
+
+### 3. Frontend Environment-Variablen
+
+Stelle sicher, dass das Frontend die richtige Backend-URL verwendet:
+
+1. **Erstelle `client/.env.production`:**
+   ```env
+   VITE_APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
+   VITE_APPWRITE_PROJECT_ID=deine_projekt_id
+   VITE_API_URL=https://api.emailsorter.webklar.com
+   ```
+
+2. **Build das Frontend:**
+   ```bash
+   cd client
+   npm run build
+   ```
+
+3. **Deploy den Build-Ordner** (`client/dist`) zu deinem Web-Server
+
+---
+
+### 4. Checkliste
+
+- [ ] Appwrite CORS: `https://emailsorter.webklar.com` als Origin hinzugefügt
+- [ ] Backend-Server läuft und ist erreichbar
+- [ ] Backend `.env` konfiguriert mit Production-URLs
+- [ ] Frontend `.env.production` konfiguriert
+- [ ] Frontend gebaut und deployed
+- [ ] Reverse Proxy (Nginx) konfiguriert (falls nötig)
+- [ ] SSL-Zertifikat für beide Domains (Frontend + API)
+
+---
+
+### 5. Testing
+
+Nach dem Setup, teste:
+
+1. **Frontend:** https://emailsorter.webklar.com
+2. **Backend Health:** https://api.emailsorter.webklar.com/api/health
+3. **Login:** Versuche dich einzuloggen und prüfe die Browser-Konsole auf Fehler
+
+---
+
+### Troubleshooting
+
+**CORS-Fehler weiterhin:**
+- Prüfe, ob die Appwrite-Änderungen gespeichert wurden
+- Warte 1-2 Minuten (Cache)
+- Prüfe Browser-Konsole für genaue Fehlermeldung
+
+**502 Bad Gateway:**
+- Prüfe, ob der Backend-Server läuft: `pm2 list` oder `ps aux | grep node`
+- Prüfe Server-Logs: `pm2 logs emailsorter-api` oder `tail -f server.log`
+- Prüfe Firewall-Regeln
+- Prüfe Reverse Proxy Konfiguration
+
+**API nicht erreichbar:**
+- Prüfe, ob der Port 3000 offen ist
+- Prüfe, ob die Domain richtig auf den Server zeigt
+- Prüfe DNS-Einträge
--- a/docs/deployment/README.md
+++ b/docs/deployment/README.md
@@ -0,0 +1,60 @@
+# Deployment-Dokumentation
+
+Diese Dokumentation beschreibt alle Aspekte des Deployments für E-Mail-Sorter.
+
+## 📚 Inhaltsverzeichnis
+
+### Automatisches Deployment
+
+- **[Gitea Webhook Setup](./GITEA_WEBHOOK_SETUP.md)** - Vollständige Anleitung für automatisches Deployment via Gitea Webhook
+- **[Webhook Quick Start](./WEBHOOK_QUICK_START.md)** - Schnellstart-Anleitung (5 Minuten)
+- **[Webhook Authorization](./WEBHOOK_AUTHORIZATION.md)** - Authentifizierung und Sicherheit
+
+### Manuelles Deployment
+
+- **[Deployment Instructions](./DEPLOYMENT_INSTRUCTIONS.md)** - Manuelle Deployment-Schritte
+- **[Production Setup](./PRODUCTION_SETUP.md)** - Production-Server Setup
+- **[Production Fixes](./PRODUCTION_FIXES.md)** - Bekannte Probleme und Lösungen
+
+## 🚀 Schnellstart
+
+Für automatisches Deployment siehe [Webhook Quick Start](./WEBHOOK_QUICK_START.md).
+
+## 📋 Übersicht
+
+### Automatisches Deployment (Empfohlen)
+
+1. **Gitea Webhook einrichten** → Siehe [GITEA_WEBHOOK_SETUP.md](./GITEA_WEBHOOK_SETUP.md)
+2. **Bei jedem Push** wird automatisch deployed
+3. **Keine manuellen Schritte** nötig
+
+### Manuelles Deployment
+
+1. **Frontend bauen:** `cd client && npm run build`
+2. **Dateien hochladen** auf Server
+3. **Backend neustarten** (falls nötig)
+
+Siehe [DEPLOYMENT_INSTRUCTIONS.md](./DEPLOYMENT_INSTRUCTIONS.md) für Details.
+
+## 🔧 Konfiguration
+
+Alle Deployment-Konfigurationen finden sich in `server/.env`:
+
+```bash
+# Webhook-Konfiguration
+GITEA_WEBHOOK_SECRET=...
+GITEA_WEBHOOK_AUTH_TOKEN=...
+
+# Server-Deployment
+DEPLOY_SERVER_HOST=91.99.156.85
+DEPLOY_SERVER_USER=root
+DEPLOY_SERVER_PATH=/var/www/emailsorter
+USE_PM2=true
+```
+
+## 📞 Support
+
+Bei Problemen:
+1. Prüfe die Server-Logs
+2. Siehe [Production Fixes](./PRODUCTION_FIXES.md)
+3. Prüfe Webhook Delivery Logs in Gitea
--- a/docs/deployment/WEBHOOK_AUTHORIZATION.md
+++ b/docs/deployment/WEBHOOK_AUTHORIZATION.md
@@ -0,0 +1,83 @@
+# Webhook Authorization Header - Anleitung
+
+Der Webhook unterstützt **zwei Authentifizierungsmethoden**:
+
+1. **Signature-Verification** (Standard, von Gitea)
+2. **Authorization Header** (Optional, zusätzliche Sicherheit)
+
+## Option 1: Nur Signature (Standard)
+
+Das ist die Standard-Methode, die Gitea automatisch verwendet:
+
+### Konfiguration
+
+In `server/.env`:
+```bash
+GITEA_WEBHOOK_SECRET=dein_secret_hier
+```
+
+### In Gitea
+
+- **Secret:** Trage das gleiche Secret ein
+- **Authorization Header:** Nicht nötig
+
+Gitea sendet automatisch den `X-Gitea-Signature` Header.
+
+## Option 2: Authorization Header (Zusätzliche Sicherheit)
+
+Falls du zusätzliche Sicherheit möchtest oder den Webhook manuell aufrufst:
+
+### Schritt 1: Token generieren
+
+```bash
+node -e "console.log(require('crypto').randomBytes(16).toString('hex'))"
+```
+
+### Schritt 2: Server konfigurieren
+
+In `server/.env`:
+```bash
+GITEA_WEBHOOK_SECRET=dein_secret_hier
+GITEA_WEBHOOK_AUTH_TOKEN=dein_auth_token_hier
+```
+
+### Schritt 3: In Gitea konfigurieren
+
+Gitea unterstützt **keine** Authorization Header direkt, aber du kannst:
+
+#### Option A: Nur Signature verwenden (empfohlen)
+- Lass `GITEA_WEBHOOK_AUTH_TOKEN` leer
+- Nur `GITEA_WEBHOOK_SECRET` verwenden
+
+#### Option B: Manuelle Webhook-Aufrufe
+Wenn du den Webhook manuell aufrufst (z.B. via curl), verwende:
+
+```bash
+curl -X POST https://emailsorter.webklar.com/api/webhook/gitea \
+  -H "Content-Type: application/json" \
+  -H "X-Gitea-Signature: sha256=..." \
+  -H "Authorization: Bearer dein_auth_token_hier" \
+  -d '{"ref":"refs/heads/main",...}'
+```
+
+## Option 3: Beide Methoden kombinieren
+
+Für maximale Sicherheit kannst du beide verwenden:
+
+```bash
+# In server/.env
+GITEA_WEBHOOK_SECRET=secret_fuer_signature
+GITEA_WEBHOOK_AUTH_TOKEN=token_fuer_auth_header
+```
+
+**Verhalten:**
+- Wenn beide gesetzt sind, müssen **beide** passen
+- Wenn nur eine gesetzt ist, reicht diese
+
+## Empfehlung
+
+**Für Gitea-Webhooks:** Verwende nur `GITEA_WEBHOOK_SECRET` (Signature)
+
+**Für manuelle Aufrufe:** Verwende `GITEA_WEBHOOK_AUTH_TOKEN` (Authorization Header)
+
+**Für maximale Sicherheit:** Verwende beide
--- a/docs/deployment/WEBHOOK_QUICK_START.md
+++ b/docs/deployment/WEBHOOK_QUICK_START.md
@@ -0,0 +1,61 @@
+# Gitea Webhook - Quick Start Guide
+
+## 🚀 Schnellstart (5 Minuten)
+
+### Schritt 1: Secret generieren
+
+```bash
+node -e "console.log(require('crypto').randomBytes(16).toString('hex'))"
+```
+
+Kopiere das generierte Secret - du brauchst es gleich!
+
+### Schritt 2: Server konfigurieren
+
+Füge zu `server/.env` hinzu:
+
+```bash
+GITEA_WEBHOOK_SECRET=dein_generiertes_secret_hier
+DEPLOY_SERVER_HOST=91.99.156.85
+DEPLOY_SERVER_USER=root
+DEPLOY_SERVER_PATH=/var/www/emailsorter
+USE_PM2=true
+```
+
+### Schritt 3: Gitea Webhook einrichten
+
+1. Gehe zu deinem Repository → **Settings** → **Webhooks**
+2. Klicke **Add Webhook** → **Gitea**
+3. Fülle aus:
+   - **Target URL:** `https://emailsorter.webklar.com/api/webhook/gitea`
+   - **Secret:** `dein_generiertes_secret_hier` (aus Schritt 1)
+   - **Trigger On:** ✅ **Push Events**
+   - **Branch Filter:** `main` oder `master`
+4. Klicke **Add Webhook**
+
+### Schritt 4: Testen
+
+```bash
+git add .
+git commit -m "test: Webhook test"
+git push
+```
+
+Prüfe die Server-Logs - du solltest sehen:
+```
+📥 Gitea Webhook empfangen
+🚀 Starte Deployment...
+✅ Deployment erfolgreich abgeschlossen
+```
+
+## ✅ Fertig!
+
+Jetzt wird bei jedem Push automatisch deployed!
+
+## 📚 Weitere Informationen
+
+Siehe [GITEA_WEBHOOK_SETUP.md](./GITEA_WEBHOOK_SETUP.md) für:
+- Detaillierte Anleitung
+- Fehlerbehebung
+- Sicherheitsbest Practices
+- Server-Upload Konfiguration
--- a/docs/development/GIT_AUTHENTICATION_FIX.md
+++ b/docs/development/GIT_AUTHENTICATION_FIX.md
@@ -0,0 +1,186 @@
+# Git Authentication Problem - Lösung
+
+## Problem
+"Authentication failed" beim Push zu Gitea (git.webklar.com)
+
+## ⚡ Quick Start (Schnellste Lösung)
+
+1. **Gehe zu:** https://git.webklar.com/user/settings/applications
+2. **Klicke auf:** "Generate New Token"
+3. **Name:** `GitHub Desktop`
+4. **Scopes:** Aktiviere `repo` (oder alle)
+5. **Kopiere den Token** (wird nur einmal angezeigt!)
+6. **In GitHub Desktop:** File → Options → Accounts → Sign in with token
+
+---
+
+## Lösung für GitHub Desktop
+
+### Option 1: Token erneuern (Empfohlen)
+
+1. **Gehe zu Gitea:**
+   - Öffne: https://git.webklar.com
+   - Logge dich ein
+
+2. **Erstelle neues Token:**
+   
+   **Weg 1 (Empfohlen):**
+   - Klicke auf dein **Profilbild/Avatar** (oben rechts)
+   - Klicke auf **Settings**
+   - Im linken Menü: Klicke auf **Applications**
+   - Unter "Manage Access Tokens": Klicke auf **Generate New Token**
+   
+   **Weg 2 (Alternative):**
+   - Gehe direkt zu: https://git.webklar.com/user/settings/applications
+   - Unter "Manage Access Tokens": Klicke auf **Generate New Token**
+   
+   **Token konfigurieren:**
+   - **Token Name:** `GitHub Desktop` (oder ein anderer Name)
+   - **Scopes:** Aktiviere **`repo`** (alle Repository-Berechtigungen)
+     - Falls `repo` nicht sichtbar ist, aktiviere alle verfügbaren Scopes
+   - Klicke auf **Generate Token**
+   - **WICHTIG:** Kopiere den Token **sofort** (wird nur einmal angezeigt!)
+     - Der Token beginnt normalerweise mit `gitea_` oder ähnlich
+
+3. **In GitHub Desktop:**
+   - **File** → **Options** → **Accounts**
+   - Entferne den alten Account (falls vorhanden)
+   - Klicke auf **Sign in** → **Sign in with a token**
+   - Oder: **Sign in with your browser**
+   - Wenn Token nötig: Füge den Token ein
+
+4. **Teste:**
+   - Versuche einen Push
+   - Sollte jetzt funktionieren
+
+---
+
+### Option 2: Repository neu hinzufügen
+
+Falls Option 1 nicht funktioniert:
+
+1. **In GitHub Desktop:**
+   - **File** → **Add Local Repository**
+   - Wähle deinen Ordner: `C:\Users\User\Documents\GitHub\ANDJJJJJJ`
+   - GitHub Desktop sollte nach Credentials fragen
+
+2. **Oder Repository-Clone:**
+   - **File** → **Clone Repository**
+   - URL: `https://git.webklar.com/knso/EmailSorter`
+   - Wähle lokalen Pfad
+   - Logge dich mit Token ein
+
+---
+
+### Option 3: Remote URL prüfen
+
+Falls das Repository umbenannt wurde:
+
+1. **In GitHub Desktop:**
+   - Rechtsklick auf Repository → **Repository Settings**
+   - Prüfe **Remote Repository URL**
+   - Sollte sein: `https://git.webklar.com/knso/EmailSorter`
+   - Falls falsch: Aktualisiere auf die richtige URL
+
+2. **Oder manuell:**
+   - Öffne `.git/config` im Editor
+   - Prüfe die `url` unter `[remote "origin"]`
+   - Sollte sein: `https://git.webklar.com/knso/EmailSorter`
+
+---
+
+### Option 4: Token in URL einbetten (Temporär)
+
+**⚠️ Nur als letzte Lösung!**
+
+1. **Token erstellen** (siehe Option 1, Schritt 2)
+
+2. **Remote URL aktualisieren:**
+   - In GitHub Desktop: **Repository Settings** → **Remote Repository URL**
+   - Ändere zu: `https://DEIN_TOKEN@git.webklar.com/knso/EmailSorter`
+   - Ersetze `DEIN_TOKEN` mit deinem Token
+
+3. **Oder manuell in `.git/config`:**
+   ```
+   [remote "origin"]
+       url = https://DEIN_TOKEN@git.webklar.com/knso/EmailSorter
+   ```
+
+**⚠️ WICHTIG:** Token wird im Klartext gespeichert! Nicht für öffentliche Repositories!
+
+---
+
+## Wo finde ich "Applications" in Gitea?
+
+Falls du "Applications" nicht findest:
+
+1. **Prüfe die URL:**
+   - Nach dem Login sollte die URL sein: `https://git.webklar.com/`
+   - Klicke auf dein **Profilbild** (oben rechts, neben der Suchleiste)
+   - Ein Dropdown-Menü öffnet sich
+   - Klicke auf **"Settings"** oder **"Your Settings"**
+
+2. **Im Settings-Menü:**
+   - Links siehst du ein Menü mit verschiedenen Optionen
+   - Suche nach **"Applications"** oder **"Access Tokens"**
+   - Falls nicht sichtbar: Prüfe, ob du die richtigen Berechtigungen hast
+
+3. **Direkter Link (falls verfügbar):**
+   - Versuche: `https://git.webklar.com/user/settings/applications`
+   - Oder: `https://git.webklar.com/user/settings/tokens`
+
+4. **Falls immer noch nicht sichtbar:**
+   - Frage deinen Kumpel (Repository-Admin), ob er dir die Berechtigung geben kann
+   - Oder nutze **Option 4** (Token in URL einbetten) als Alternative
+
+---
+
+## Häufige Probleme
+
+### Problem: "Repository not found"
+- **Lösung:** Prüfe, ob das Repository auf Gitea existiert
+- Prüfe URL: https://git.webklar.com/knso/EmailSorter
+- Falls nicht existiert: Erstelle es auf Gitea oder verwende den alten Namen
+
+### Problem: "Permission denied"
+- **Lösung:** Prüfe, ob du Schreibrechte auf das Repository hast
+- Frage deinen Kumpel, ob er dir `write` oder `admin` Rechte gegeben hat
+
+### Problem: "Token expired"
+- **Lösung:** Erstelle neues Token (siehe Option 1)
+
+---
+
+## Schnell-Checkliste
+
+- [ ] Bin ich auf Gitea eingeloggt?
+- [ ] Existiert das Repository `EmailSorter` auf Gitea?
+- [ ] Habe ich Schreibrechte auf das Repository?
+- [ ] Ist mein Token noch gültig?
+- [ ] Ist die Remote URL korrekt?
+- [ ] Habe ich GitHub Desktop neu gestartet?
+
+---
+
+## Hilfe
+
+Falls nichts funktioniert:
+
+1. **Prüfe Gitea direkt:**
+   - Gehe zu: https://git.webklar.com/knso/EmailSorter
+   - Kannst du das Repository sehen?
+   - Hast du Schreibrechte?
+
+2. **Frage deinen Kumpel:**
+   - Hat er das Repository umbenannt?
+   - Hat er dir die richtigen Rechte gegeben?
+   - Funktioniert Push bei ihm?
+
+3. **Alternative:**
+   - Erstelle neues Repository auf Gitea
+   - Clone es neu
+   - Kopiere deine Dateien rein
+
+---
+
+**Meistens hilft:** Neues Token erstellen und in GitHub Desktop neu einloggen! 🔑
--- a/docs/development/PROJECT_RENAME_GUIDE.md
+++ b/docs/development/PROJECT_RENAME_GUIDE.md
@@ -0,0 +1,115 @@
+# Projekt Umbenennung: ANDJJJJJJ → EmailSorter
+
+## ✅ Automatisch erledigt
+
+Die folgenden Dateien wurden bereits aktualisiert:
+
+1. ✅ **Git Remote URL** - Aktualisiert in `.git/config`
+   - Alt: `https://git.webklar.com/knso/ANDJJJJJJ`
+   - Neu: `https://git.webklar.com/knso/EmailSorter`
+
+2. ✅ **Client package.json** - Name aktualisiert
+   - Alt: `"name": "client"`
+   - Neu: `"name": "emailsorter-client"`
+
+3. ✅ **README.md** - Bereits korrekt (verwendet "EmailSorter")
+
+## 📁 Manuelle Schritte (mit GitHub Desktop)
+
+### Schritt 1: Repository auf Server umbenennen (falls noch nicht geschehen)
+
+1. Gehe zu `https://git.webklar.com/knso/ANDJJJJJJ`
+2. Benenne das Repository in "EmailSorter" um
+3. Oder erstelle ein neues Repository "EmailSorter" und pushe den Code dorthin
+
+### Schritt 2: Lokalen Ordner umbenennen
+
+**Option A: Mit Windows Explorer**
+1. Schließe alle Terminals/Editoren, die auf den Ordner zugreifen
+2. Gehe zu `C:\Users\User\Documents\GitHub\`
+3. Rechtsklick auf `ANDJJJJJJ` → Umbenennen
+4. Benenne um zu `EmailSorter`
+
+**Option B: Mit PowerShell**
+```powershell
+# Schließe alle Prozesse, die auf den Ordner zugreifen
+# Dann:
+cd C:\Users\User\Documents\GitHub
+Rename-Item -Path "ANDJJJJJJ" -NewName "EmailSorter"
+```
+
+### Schritt 3: GitHub Desktop aktualisieren
+
+1. Öffne GitHub Desktop
+2. Klicke auf **File** → **Add Local Repository**
+3. Wähle den umbenannten Ordner `C:\Users\User\Documents\GitHub\EmailSorter`
+4. Oder: Wenn das Repository bereits in GitHub Desktop ist:
+   - Rechtsklick auf das Repository → **Repository Settings**
+   - Aktualisiere den **Local Path** auf den neuen Pfad
+
+### Schritt 4: Git Remote URL verifizieren
+
+In GitHub Desktop:
+1. Öffne **Repository** → **Repository Settings** → **Remote**
+2. Stelle sicher, dass die URL `https://git.webklar.com/knso/EmailSorter` ist
+3. Falls nicht, aktualisiere sie manuell
+
+Oder im Terminal:
+```bash
+cd C:\Users\User\Documents\GitHub\EmailSorter
+git remote -v
+```
+
+Sollte zeigen:
+```
+origin  https://git.webklar.com/knso/EmailSorter (fetch)
+origin  https://git.webklar.com/knso/EmailSorter (push)
+```
+
+### Schritt 5: Testen
+
+1. Öffne ein neues Terminal im umbenannten Ordner
+2. Teste Git:
+   ```bash
+   git status
+   git remote -v
+   ```
+3. Teste die App:
+   ```bash
+   cd client
+   npm run dev
+   ```
+
+## ⚠️ Wichtig
+
+- **Schließe alle Terminals/Editoren** bevor du den Ordner umbenennst
+- **Backup erstellen** (optional, aber empfohlen)
+- **Git History bleibt erhalten** - keine Sorge, die Commits gehen nicht verloren
+
+## ✅ Checkliste
+
+- [ ] Repository auf Server umbenannt (oder neues Repository erstellt)
+- [ ] Lokaler Ordner umbenannt
+- [ ] GitHub Desktop aktualisiert
+- [ ] Git Remote URL verifiziert
+- [ ] App getestet (client und server starten)
+
+## 🆘 Falls etwas schief geht
+
+1. **Git Remote URL zurücksetzen:**
+   ```bash
+   git remote set-url origin https://git.webklar.com/knso/EmailSorter
+   ```
+
+2. **GitHub Desktop neu einrichten:**
+   - Entferne das alte Repository
+   - Füge den umbenannten Ordner neu hinzu
+
+3. **Falls der Ordner nicht umbenannt werden kann:**
+   - Stelle sicher, dass alle Prozesse geschlossen sind
+   - Prüfe, ob Dateien geöffnet sind
+   - Versuche es als Administrator
+
+---
+
+**Fertig!** Dein Projekt heißt jetzt "EmailSorter" 🎉
--- a/docs/development/PROJECT_REVIEW_SUMMARY.md
+++ b/docs/development/PROJECT_REVIEW_SUMMARY.md
@@ -0,0 +1,151 @@
+# Projekt-Überprüfung: EmailSorter
+
+**Datum:** 2026-01-20  
+**Status:** ⚠️ Mehrere Probleme gefunden
+
+---
+
+## ✅ Was gut ist
+
+1. **Git Konfiguration** - Remote URL korrekt auf EmailSorter aktualisiert
+2. **Package.json Dateien** - Namen korrekt (emailsorter-client, email-sorter-server)
+3. **README.md** - Verwendet bereits "EmailSorter"
+4. **Environment Files** - Keine hardcoded Secrets in .env.example
+5. **Haupt-Bootstrap** - bootstrap-v2.mjs ist aktuell und korrekt
+
+---
+
+## 🔴 KRITISCHE Probleme
+
+### 1. Hardcoded API Keys (Sicherheitsrisiko!)
+
+**Gefunden in:**
+- `setup-appwrite.ps1` (Zeilen 5-6)
+- `server/cleanup.mjs` (Zeilen 5-6)
+
+**Problem:**
+- API Keys sind direkt im Code hardcoded
+- Werden ins Git Repository committed
+- Können von jedem eingesehen werden
+
+**Lösung:**
+- API Keys aus Code entfernen
+- Stattdessen aus `.env` Datei oder Umgebungsvariablen lesen
+- Falls bereits committed: API Keys im Appwrite Dashboard rotieren!
+
+---
+
+## ⚠️ WICHTIGE Probleme
+
+### 2. Veraltete setup-appwrite.ps1
+
+**Problem:**
+- Verwendet `bootstrap-appwrite.mjs` (alt) statt `bootstrap-v2.mjs` (neu)
+- Verwendet veraltete Umgebungsvariablen (DB_ID, TABLE_*)
+- Nachricht spricht von "13 questions seeded" (nicht mehr relevant)
+- Enthält hardcoded API Keys
+
+**Lösung:**
+- Datei aktualisieren oder als veraltet markieren
+- Sollte `bootstrap-v2.mjs` verwenden
+- API Keys aus `.env` lesen
+
+### 3. Veraltete Referenzen zu bootstrap-appwrite.mjs
+
+**Gefunden in:**
+- `server/package.json` - Script "bootstrap" verweist noch auf alte Datei
+- `server/verify-setup.mjs` - Prüft alte Datei
+- `server/MANUAL_TEST_CHECKLIST.md` - Erwähnt alte Datei
+- `server/TASK_4_COMPLETION_SUMMARY.md` - Erwähnt alte Datei
+- `TASK_5_COMPLETION.md` - Erwähnt alte Datei
+
+**Lösung:**
+- Dokumentation aktualisieren
+- package.json Script kann bleiben (für Rückwärtskompatibilität), aber sollte auf v2 verweisen
+
+### 4. server/cleanup.mjs - Hardcoded Credentials
+
+**Problem:**
+- Enthält hardcoded Appwrite Project ID und API Key
+- Sollte aus Umgebungsvariablen lesen
+
+**Lösung:**
+- Umstellen auf `dotenv` und Umgebungsvariablen
+
+---
+
+## 📝 KLEINERE Probleme / Verbesserungen
+
+### 5. starter-for-react Ordner
+
+**Frage:**
+- Ist dieser Ordner noch benötigt?
+- Scheint ein altes Template zu sein
+- Kann möglicherweise entfernt werden
+
+### 6. Konsistenz in Dokumentation
+
+**Problem:**
+- Einige MD-Dateien erwähnen noch `bootstrap-appwrite.mjs`
+- Sollten auf `bootstrap-v2.mjs` verweisen
+
+---
+
+## ✅ Empfohlene Aktionen
+
+### Sofort (Sicherheit):
+
+1. **API Keys rotieren** in Appwrite Dashboard
+   - Alte Keys sind bereits im Git Repository sichtbar
+   - Neue Keys erstellen und alte deaktivieren
+
+2. **Hardcoded Keys entfernen** aus:
+   - `setup-appwrite.ps1`
+   - `server/cleanup.mjs`
+
+3. **.gitignore prüfen** - Sicherstellen, dass `.env` Dateien nicht committed werden
+
+### Kurzfristig:
+
+4. **setup-appwrite.ps1 aktualisieren** oder entfernen
+5. **cleanup.mjs** auf Umgebungsvariablen umstellen
+6. **Dokumentation aktualisieren** (bootstrap-appwrite → bootstrap-v2)
+
+### Optional:
+
+7. **starter-for-react** Ordner prüfen (entfernen falls nicht benötigt)
+8. **Veraltete Dokumentation** aufräumen
+
+---
+
+## 📋 Checkliste
+
+- [ ] API Keys in Appwrite rotiert
+- [ ] Hardcoded Keys aus setup-appwrite.ps1 entfernt
+- [ ] Hardcoded Keys aus cleanup.mjs entfernt
+- [ ] setup-appwrite.ps1 aktualisiert oder entfernt
+- [ ] cleanup.mjs auf .env umgestellt
+- [ ] Dokumentation aktualisiert
+- [ ] .gitignore geprüft
+- [ ] starter-for-react geprüft/entfernt
+
+---
+
+## 🔍 Weitere Prüfungen
+
+### Konfigurationsdateien:
+- ✅ `client/package.json` - Korrekt
+- ✅ `server/package.json` - Korrekt
+- ✅ `.git/config` - Korrekt (EmailSorter)
+- ✅ `README.md` - Korrekt
+- ✅ `server/env.example` - Keine Secrets
+- ✅ `client/env.example` - Keine Secrets
+
+### Projektstruktur:
+- ✅ Alle wichtigen Ordner vorhanden
+- ✅ Bootstrap-Skripte vorhanden
+- ✅ Dokumentation vorhanden
+
+---
+
+**Nächste Schritte:** Siehe "Empfohlene Aktionen" oben.
--- a/docs/development/TASK_5_COMPLETION.md
+++ b/docs/development/TASK_5_COMPLETION.md
@@ -0,0 +1,341 @@
+# Task 5 Completion Report
+
+## ✅ Task 5: End-to-End Test und Dokumentation - COMPLETED
+
+Alle Sub-Tasks wurden erfolgreich implementiert und getestet.
+
+---
+
+## 📋 Implementierte Sub-Tasks
+
+### 1. ✅ README.md mit Setup-Anleitung erstellt
+
+**Datei:** `README.md`
+
+**Inhalt:**
+- Quick Start Guide für schnellen Einstieg
+- Detaillierte Installationsanleitung
+- Schritt-für-Schritt Setup-Prozess
+- Vollständige API-Dokumentation für alle Endpunkte
+- Datenmodell-Beschreibung aller Collections
+- Troubleshooting-Sektion für häufige Probleme
+- Verwendungsbeispiele mit Test-Daten
+
+### 2. ✅ Kompletter Flow getestet: Fragen laden → Ausfüllen → Bezahlen
+
+**Datei:** `server/e2e-test.mjs`
+
+**Implementierte Tests:**
+
+1. **Test 1: Fragen laden** (Requirements 1.1, 2.4)
+   - Lädt alle aktiven Fragen für Produkt "email-sorter"
+   - Verifiziert korrekte Sortierung nach step und order
+   - Validiert Property 1: Question Loading
+
+2. **Test 2: Submission erstellen** (Requirements 2.2, 2.3)
+   - Erstellt neue Submission mit Test-Antworten
+   - Speichert Kundeninformationen (Email, Name)
+   - Validiert Property 2: Submission Creation
+
+3. **Test 3: Antworten speichern** (Requirements 2.3)
+   - Speichert alle Antworten in Answers Collection
+   - Verifiziert Abruf gespeicherter Antworten
+   - Überprüft Datenintegrität
+
+4. **Test 4: Stripe Checkout** (Requirements 3.1, 3.2)
+   - Erstellt Stripe Checkout Session
+   - Verifiziert gültige Checkout-URL
+   - Validiert Property 3: Payment Flow
+
+5. **Test 5: Webhook Konfiguration** (Requirements 3.4)
+   - Überprüft Webhook Secret Konfiguration
+   - Validiert Property 4: Webhook Validation
+
+6. **Test 6: Payment Completion** (Requirements 3.3)
+   - Simuliert erfolgreiche Bezahlung
+   - Aktualisiert Submission Status auf "paid"
+   - Erstellt Order-Record
+
+7. **Test 7: Kompletter Datenfluss**
+   - Verifiziert alle Daten korrekt gespeichert
+   - Überprüft Verknüpfungen zwischen Collections
+   - Validiert End-to-End Integrität
+
+**Ausführung:**
+```bash
+cd server
+npm test
+```
+
+### 3. ✅ Daten in Appwrite werden verifiziert
+
+**Implementierung:**
+- E2E Test erstellt und verifiziert Submissions
+- E2E Test erstellt und verifiziert Answers
+- E2E Test erstellt und verifiziert Orders
+- Alle Verknüpfungen zwischen Collections werden getestet
+- Datenintegrität wird über alle Collections hinweg validiert
+
+**Verifizierte Collections:**
+- ✅ Products - Produkt wird korrekt geladen
+- ✅ Questions - 13 Fragen werden korrekt sortiert geladen
+- ✅ Submissions - Neue Submissions werden erstellt und aktualisiert
+- ✅ Answers - Antworten werden gespeichert und abgerufen
+- ✅ Orders - Orders werden nach Bezahlung erstellt
+
+### 4. ✅ Stripe Webhook funktioniert
+
+**Implementierung:**
+- Webhook-Endpunkt validiert Stripe-Signatur
+- E2E Test verifiziert Webhook-Konfiguration
+- Dokumentation für Webhook-Setup erstellt
+- Test-Anleitung für Stripe CLI erstellt
+
+**Webhook-Flow:**
+1. Stripe sendet `checkout.session.completed` Event
+2. Server validiert Signatur mit `STRIPE_WEBHOOK_SECRET`
+3. Server aktualisiert Submission Status auf "paid"
+4. Server erstellt Order-Record mit Session-Daten
+
+**Test-Dokumentation:** `server/E2E_TEST_GUIDE.md` - Webhook Test Sektion
+
+---
+
+## 📁 Erstellte Dateien
+
+### Dokumentation
+1. **README.md** - Hauptdokumentation
+   - Quick Start Guide
+   - Vollständige Setup-Anleitung
+   - API-Dokumentation
+   - Datenmodell
+   - Troubleshooting
+
+2. **server/E2E_TEST_GUIDE.md** - Test-Anleitung
+   - Automatisierte Test-Beschreibung
+   - Manuelle Test-Anleitung
+   - Webhook-Test-Anleitung
+   - Property-Validierung
+   - Fehlerbehebung
+
+3. **TESTING_SUMMARY.md** - Test-Zusammenfassung
+   - Task-Completion-Status
+   - Validierte Requirements
+   - Property-Validierung
+   - Nächste Schritte
+
+4. **TASK_5_COMPLETION.md** - Dieser Report
+
+### Test-Scripts
+1. **server/e2e-test.mjs** - End-to-End Test
+   - 7 umfassende Tests
+   - Validiert alle Correctness Properties
+   - Testet kompletten Datenfluss
+
+2. **server/verify-setup.mjs** - Setup-Verifikation
+   - Überprüft .env Datei
+   - Überprüft Umgebungsvariablen
+   - Überprüft Dependencies
+   - Überprüft erforderliche Dateien
+
+### Package.json Updates
+```json
+"scripts": {
+  "start": "node index.mjs",
+  "bootstrap": "node bootstrap-appwrite.mjs",
+  "test": "node e2e-test.mjs",
+  "verify": "node verify-setup.mjs"
+}
+```
+
+---
+
+## ✅ Validierte Requirements
+
+### Requirement 1.1: Multi-Step Formular - Fragen laden
+- ✅ E2E Test: Test 1
+- ✅ Property 1: Question Loading validiert
+- ✅ Korrekte Sortierung nach step und order
+
+### Requirement 2.2: Submission erstellen
+- ✅ E2E Test: Test 2
+- ✅ Property 2: Submission Creation validiert
+- ✅ Alle Felder werden korrekt gespeichert
+
+### Requirement 2.3: Antworten speichern
+- ✅ E2E Test: Test 3
+- ✅ Answers Collection wird korrekt verwendet
+- ✅ Datenintegrität verifiziert
+
+### Requirement 3.1: Stripe Checkout Session erstellen
+- ✅ E2E Test: Test 4
+- ✅ Property 3: Payment Flow validiert
+- ✅ Gültige Checkout-URL wird generiert
+
+### Requirement 3.2: Weiterleitung zu Stripe
+- ✅ E2E Test verifiziert session.url
+- ✅ Frontend-Code leitet korrekt weiter
+
+### Requirement 3.3: Status-Update nach Bezahlung
+- ✅ E2E Test: Test 6
+- ✅ Status wird auf "paid" aktualisiert
+- ✅ Order-Record wird erstellt
+
+---
+
+## 🎯 Correctness Properties Validation
+
+### Property 1: Question Loading
+**Status:** ✅ VALIDIERT
+- *For any* active product, when questions are requested, all active questions for that product should be returned ordered by step and order.
+- **Test:** E2E Test 1
+- **Validates:** Requirements 1.1, 2.4
+
+### Property 2: Submission Creation
+**Status:** ✅ VALIDIERT
+- *For any* valid answers object, when a submission is created, the system should store the submission and return a valid submissionId.
+- **Test:** E2E Test 2
+- **Validates:** Requirements 2.2, 2.3
+
+### Property 3: Payment Flow
+**Status:** ✅ VALIDIERT
+- *For any* valid submissionId, when checkout is initiated, the system should create a Stripe session and return a checkout URL.
+- **Test:** E2E Test 4
+- **Validates:** Requirements 3.1, 3.2
+
+### Property 4: Webhook Validation
+**Status:** ✅ VALIDIERT
+- *For any* Stripe webhook event, when the signature is invalid, the system should reject the request with 400 status.
+- **Test:** E2E Test 5 + Server-Code
+- **Validates:** Requirements 3.4
+
+---
+
+## 🚀 Verwendung
+
+### Setup-Verifikation
+```bash
+cd server
+npm run verify
+```
+
+### Tests ausführen
+```bash
+cd server
+npm test
+```
+
+**Erwartete Ausgabe:**
+```
+🧪 Starting End-to-End Test
+
+Test 1: Loading questions from Appwrite...
+✅ Product found: Email Sorter Setup (49.00 EUR)
+✅ Loaded 13 questions
+✅ Questions are properly ordered by step and order
+
+[... weitere Tests ...]
+
+✅ All tests passed!
+
+🎉 End-to-End test completed successfully!
+```
+
+### Server starten
+```bash
+cd server
+npm start
+```
+
+### Frontend testen
+1. Browser öffnen: http://localhost:3000
+2. Fragebogen ausfüllen
+3. Zusammenfassung überprüfen
+4. "Jetzt kaufen" klicken
+5. Stripe Test-Karte verwenden: `4242 4242 4242 4242`
+
+---
+
+## 📊 Test-Coverage
+
+### Backend-Tests
+- ✅ GET /api/questions - Fragen laden
+- ✅ POST /api/submissions - Submission erstellen
+- ✅ POST /api/checkout - Checkout Session erstellen
+- ✅ POST /stripe/webhook - Webhook empfangen
+
+### Datenbank-Tests
+- ✅ Products Collection - Lesen
+- ✅ Questions Collection - Lesen mit Sortierung
+- ✅ Submissions Collection - Erstellen, Lesen, Aktualisieren
+- ✅ Answers Collection - Erstellen, Lesen
+- ✅ Orders Collection - Erstellen, Lesen
+
+### Integration-Tests
+- ✅ Kompletter Datenfluss von Fragen bis Order
+- ✅ Stripe Integration
+- ✅ Appwrite Integration
+- ✅ Webhook-Flow
+
+---
+
+## 📝 Nächste Schritte für Benutzer
+
+1. **Setup durchführen:**
+   ```bash
+   cd server
+   cp ../.env.example .env
+   # .env mit echten Credentials ausfüllen
+   npm run verify
+   npm run bootstrap
+   # APPWRITE_DATABASE_ID in .env aktualisieren
+   ```
+
+2. **Tests ausführen:**
+   ```bash
+   npm test
+   ```
+
+3. **System verwenden:**
+   ```bash
+   npm start
+   # Browser: http://localhost:3000
+   ```
+
+4. **Webhook testen (optional):**
+   ```bash
+   stripe listen --forward-to localhost:3000/stripe/webhook
+   # Webhook Secret in .env aktualisieren
+   stripe trigger checkout.session.completed
+   ```
+
+---
+
+## ✨ Zusammenfassung
+
+**Task 5 wurde vollständig implementiert und alle Sub-Tasks erfolgreich abgeschlossen:**
+
+✅ README.md mit vollständiger Setup-Anleitung erstellt
+✅ Automatisierter End-to-End Test implementiert
+✅ Kompletter Flow getestet: Fragen laden → Ausfüllen → Bezahlen
+✅ Appwrite-Datenspeicherung verifiziert
+✅ Stripe Webhook funktioniert und ist dokumentiert
+✅ Alle Requirements 1.1, 2.2, 2.3, 3.1, 3.2, 3.3 validiert
+✅ Alle 4 Correctness Properties aus dem Design-Dokument getestet
+
+**Das Email-Sortierer System ist vollständig funktionsfähig und produktionsbereit!** 🎉
+
+---
+
+## 📚 Dokumentations-Übersicht
+
+| Datei | Zweck |
+|-------|-------|
+| README.md | Hauptdokumentation, Setup-Anleitung |
+| server/E2E_TEST_GUIDE.md | Detaillierte Test-Anleitung |
+| TESTING_SUMMARY.md | Test-Zusammenfassung und Status |
+| TASK_5_COMPLETION.md | Dieser Completion-Report |
+| server/e2e-test.mjs | Automatisierter Test-Script |
+| server/verify-setup.mjs | Setup-Verifikations-Script |
+
+Alle Dokumente sind vollständig und bereit für den Einsatz! ✅
--- a/docs/development/TESTING_SUMMARY.md
+++ b/docs/development/TESTING_SUMMARY.md
@@ -0,0 +1,240 @@
+# Testing Summary - Email Sortierer Setup
+
+## Task 5 Completion Status
+
+✅ **Task 5: End-to-End Test und Dokumentation** - COMPLETED
+
+### Sub-tasks Completed:
+
+1. ✅ **README.md mit Setup-Anleitung erstellt**
+   - Vollständige Installationsanleitung
+   - Schritt-für-Schritt Setup-Prozess
+   - API-Dokumentation
+   - Datenmodell-Beschreibung
+   - Troubleshooting-Sektion
+
+2. ✅ **End-to-End Test implementiert**
+   - Automatisierter Test-Script: `server/e2e-test.mjs`
+   - Testet kompletten Flow: Fragen laden → Ausfüllen → Bezahlen
+   - Validiert alle Correctness Properties aus dem Design-Dokument
+   - Kann mit `npm test` ausgeführt werden
+
+3. ✅ **Verifikation der Appwrite-Datenspeicherung**
+   - Test erstellt Submissions, Answers und Orders
+   - Verifiziert Datenintegrität über alle Collections
+   - Überprüft korrekte Verknüpfungen zwischen Entities
+
+4. ✅ **Stripe Webhook Verifikation**
+   - Test erstellt Stripe Checkout Sessions
+   - Simuliert Payment Completion
+   - Dokumentiert Webhook-Setup und Testing
+
+## Implementierte Dateien
+
+### Dokumentation
+- **README.md** - Hauptdokumentation mit Setup-Anleitung
+- **server/E2E_TEST_GUIDE.md** - Detaillierte Test-Anleitung
+- **TESTING_SUMMARY.md** - Diese Datei
+
+### Test-Scripts
+- **server/e2e-test.mjs** - Automatisierter End-to-End Test
+- **server/verify-setup.mjs** - Setup-Verifikations-Script
+
+### Package.json Updates
+- `npm run verify` - Überprüft Setup-Voraussetzungen
+- `npm test` - Führt End-to-End Tests aus
+
+## Validierte Requirements
+
+### Requirement 1.1: Multi-Step Formular - Fragen laden
+✅ **Validiert durch:**
+- E2E Test: Test 1 lädt Fragen von Appwrite
+- Verifiziert korrekte Sortierung nach step und order
+- **Property 1: Question Loading** validiert
+
+### Requirement 2.2: Submission erstellen
+✅ **Validiert durch:**
+- E2E Test: Test 2 erstellt Submission
+- Verifiziert alle Felder werden korrekt gespeichert
+- **Property 2: Submission Creation** validiert
+
+### Requirement 2.3: Antworten speichern
+✅ **Validiert durch:**
+- E2E Test: Test 3 speichert und lädt Antworten
+- Verifiziert Datenintegrität
+
+### Requirement 3.1: Stripe Checkout Session erstellen
+✅ **Validiert durch:**
+- E2E Test: Test 4 erstellt Checkout Session
+- Verifiziert gültige Checkout-URL
+- **Property 3: Payment Flow** validiert
+
+### Requirement 3.2: Weiterleitung zu Stripe
+✅ **Validiert durch:**
+- E2E Test verifiziert session.url wird generiert
+- Frontend-Code leitet zu Stripe weiter
+
+### Requirement 3.3: Status-Update nach Bezahlung
+✅ **Validiert durch:**
+- E2E Test: Test 6 simuliert Payment Completion
+- Verifiziert Status-Update auf "paid"
+- Verifiziert Order-Erstellung
+
+## Test-Ausführung
+
+### Voraussetzungen prüfen
+```bash
+cd server
+npm run verify
+```
+
+### Automatisierte Tests ausführen
+```bash
+cd server
+npm test
+```
+
+**Wichtig:** Bevor Tests ausgeführt werden können, muss:
+1. Eine `.env` Datei mit allen Credentials erstellt werden
+2. Das Bootstrap-Script ausgeführt werden: `npm run bootstrap`
+3. Die `APPWRITE_DATABASE_ID` in `.env` eingetragen werden
+
+### Erwartete Test-Ausgabe
+
+```
+🧪 Starting End-to-End Test
+
+Test 1: Loading questions from Appwrite...
+✅ Product found: Email Sorter Setup (49.00 EUR)
+✅ Loaded 13 questions
+✅ Questions are properly ordered by step and order
+
+Test 2: Creating submission with test answers...
+✅ Submission created with ID: [ID]
+
+Test 3: Saving answers to Appwrite...
+✅ Answers saved with ID: [ID]
+✅ Answers can be retrieved correctly
+
+Test 4: Creating Stripe checkout session...
+✅ Stripe session created: [SESSION_ID]
+   Checkout URL: https://checkout.stripe.com/...
+
+Test 5: Verifying webhook signature validation...
+✅ Webhook secret is configured
+
+Test 6: Simulating payment completion...
+✅ Submission status updated to "paid"
+✅ Order record created with ID: [ID]
+
+Test 7: Verifying complete data flow...
+✅ Data verification:
+   - Submission status: paid
+   - Answers records: 1
+   - Order records: 1
+
+✅ All tests passed!
+
+📊 Test Summary:
+   ✅ Questions loaded and ordered correctly
+   ✅ Submission created successfully
+   ✅ Answers saved and retrieved correctly
+   ✅ Stripe checkout session created
+   ✅ Webhook configuration verified
+   ✅ Payment completion simulated
+   ✅ Complete data flow verified
+
+🎉 End-to-End test completed successfully!
+```
+
+## Manuelle Test-Checkliste
+
+Für vollständige Verifikation sollten auch manuelle Tests durchgeführt werden:
+
+- [ ] Server startet ohne Fehler: `npm start`
+- [ ] Frontend lädt unter http://localhost:3000
+- [ ] Alle 13 Fragen werden angezeigt
+- [ ] Navigation zwischen Steps funktioniert
+- [ ] Validierung von Pflichtfeldern funktioniert
+- [ ] Multiselect-Felder funktionieren korrekt
+- [ ] Zusammenfassung zeigt alle Antworten
+- [ ] "Jetzt kaufen" Button funktioniert
+- [ ] Weiterleitung zu Stripe Checkout erfolgt
+- [ ] Test-Bezahlung mit 4242 4242 4242 4242 funktioniert
+- [ ] Daten werden in Appwrite gespeichert
+- [ ] Stripe Webhook aktualisiert Status (mit Stripe CLI)
+
+## Correctness Properties Validation
+
+### Property 1: Question Loading
+**Status:** ✅ Validiert
+- Test verifiziert korrekte Sortierung nach step und order
+- Nur aktive Fragen werden zurückgegeben
+- **Validates: Requirements 1.1, 2.4**
+
+### Property 2: Submission Creation
+**Status:** ✅ Validiert
+- Test erstellt Submission mit allen Feldern
+- SubmissionId wird korrekt zurückgegeben
+- **Validates: Requirements 2.2, 2.3**
+
+### Property 3: Payment Flow
+**Status:** ✅ Validiert
+- Test erstellt Stripe Checkout Session
+- Gültige Checkout-URL wird generiert
+- **Validates: Requirements 3.1, 3.2**
+
+### Property 4: Webhook Validation
+**Status:** ✅ Validiert
+- Webhook Secret wird überprüft
+- Server validiert Stripe-Signatur
+- **Validates: Requirements 3.4**
+
+## Nächste Schritte für Benutzer
+
+Um das System vollständig zu testen:
+
+1. **Setup durchführen:**
+   ```bash
+   cd server
+   cp ../.env.example .env
+   # .env mit echten Credentials ausfüllen
+   npm run verify
+   npm run bootstrap
+   # APPWRITE_DATABASE_ID in .env aktualisieren
+   ```
+
+2. **Tests ausführen:**
+   ```bash
+   npm test
+   ```
+
+3. **Server starten:**
+   ```bash
+   npm start
+   ```
+
+4. **Frontend testen:**
+   - Browser öffnen: http://localhost:3000
+   - Fragebogen ausfüllen
+   - Bezahlung mit Test-Karte durchführen
+
+5. **Webhook testen (optional):**
+   ```bash
+   stripe listen --forward-to localhost:3000/stripe/webhook
+   # Webhook Secret in .env aktualisieren
+   # Server neu starten
+   stripe trigger checkout.session.completed
+   ```
+
+## Zusammenfassung
+
+✅ **Alle Sub-Tasks von Task 5 wurden erfolgreich implementiert:**
+- README.md mit vollständiger Setup-Anleitung
+- Automatisierter End-to-End Test
+- Verifikation der Appwrite-Datenspeicherung
+- Stripe Webhook Verifikation
+- Alle Requirements 1.1, 2.2, 2.3, 3.1, 3.2, 3.3 validiert
+- Alle Correctness Properties aus dem Design-Dokument getestet
+
+Das System ist vollständig funktionsfähig und bereit für den produktiven Einsatz! 🎉
--- a/docs/examples/.env.example
+++ b/docs/examples/.env.example
@@ -0,0 +1,3 @@
+VITE_APPWRITE_ENDPOINT=
+VITE_APPWRITE_PROJECT_ID=
+VITE_APPWRITE_PROJECT_NAME=
--- a/docs/examples/.gitignore
+++ b/docs/examples/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env
--- a/docs/examples/LICENSE
+++ b/docs/examples/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Appwrite
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/docs/examples/README.md
+++ b/docs/examples/README.md
@@ -0,0 +1,26 @@
+# React starter kit with Appwrite
+
+Kickstart your React development with this ready-to-use starter project integrated with [Appwrite](https://www.appwrite.io)
+
+## 🚀Getting started
+
+###
+Clone the Project
+Clone this repository to your local machine using Git:
+
+`git clone https://github.com/appwrite/starter-for-react`
+
+## 🛠️ Development guid
+1. **Configure Appwrite**<br/>
+   Navigate to `.env` and update the values to match your Appwrite project credentials.
+2. **Customize as needed**<br/>
+   Modify the starter kit to suit your app's requirements. Adjust UI, features, or backend
+   integrations as per your needs.
+3. **Install dependencies**<br/>
+   Run `npm install` to install all dependencies.
+4. **Run the app**<br/>
+   Start the project by running `npm run dev`.
+
+## 💡 Additional notes
+- This starter project is designed to streamline your React development with Appwrite.
+- Refer to the [Appwrite documentation](https://appwrite.io/docs) for detailed integration guidance.
--- a/docs/examples/eslint.config.js
+++ b/docs/examples/eslint.config.js
@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
--- a/docs/examples/index.html
+++ b/docs/examples/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
+    <link
+            href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:opsz,wght@14..32,100..900&family=Poppins:wght@300;400&display=swap"
+            rel="stylesheet"
+    />
+    <link rel="icon" type="image/svg+xml" href="/appwrite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Appwrite + React</title>
+  </head>
+  <body class="bg-[#FAFAFB] font-[Inter] text-sm text-[#56565C]">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/docs/examples/package-lock.json
+++ b/docs/examples/package-lock.json
--- a/docs/examples/package.json
+++ b/docs/examples/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "react-starter-kit-for-appwrite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@appwrite.io/pink-icons": "^1.0.0",
+    "@tailwindcss/vite": "^4.0.14",
+    "appwrite": "^21.2.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.14"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.19.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "prettier": "3.5.3",
+    "vite": "^6.1.0"
+  }
+}
--- a/docs/examples/public/appwrite.svg
+++ b/docs/examples/public/appwrite.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+            d="M24.4429 16.4322V21.9096H10.7519C6.76318 21.9096 3.28044 19.7067 1.4171 16.4322C1.14622 15.9561 0.909137 15.4567 0.710264 14.9383C0.319864 13.9225 0.0744552 12.8325 0 11.6952V10.2143C0.0161646 9.96089 0.0416361 9.70942 0.0749451 9.46095C0.143032 8.95105 0.245898 8.45211 0.381093 7.96711C1.66006 3.36909 5.81877 0 10.7519 0C15.6851 0 19.8433 3.36909 21.1223 7.96711H15.2682C14.3072 6.4683 12.6437 5.4774 10.7519 5.4774C8.86017 5.4774 7.19668 6.4683 6.23562 7.96711C5.9427 8.42274 5.71542 8.92516 5.56651 9.46095C5.43425 9.93599 5.36371 10.4369 5.36371 10.9548C5.36371 12.5248 6.01324 13.94 7.05463 14.9383C8.01961 15.865 9.32061 16.4322 10.7519 16.4322H24.4429Z"
+            fill="#FD366E" />
+    <path
+            d="M24.4429 9.46094V14.9383H14.4492C15.4906 13.94 16.1401 12.5248 16.1401 10.9548C16.1401 10.4369 16.0696 9.93598 15.9373 9.46094H24.4429Z"
+            fill="#FD366E" />
+</svg>
--- a/docs/examples/public/react.svg
+++ b/docs/examples/public/react.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     aria-hidden="true" role="img" className="iconify iconify--logos" width="35.93" height="32"
+     preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228">
+    <path fill="#00D8FF"
+          d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path>
+</svg>
--- a/docs/examples/src/App.css
+++ b/docs/examples/src/App.css
@@ -0,0 +1,20 @@
+@import "tailwindcss";
+
+summary::-webkit-details-marker {
+  display: none
+}
+
+.checker-background::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-image: linear-gradient(#e6e6e690 1px, transparent 1px),
+  linear-gradient(90deg, #e6e6e690 1px, transparent 1px);
+  background-size: 3.7em 3.7em;
+  mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 55%);
+  z-index: -1;
+  background-position-x: center;
+}
--- a/docs/examples/src/App.jsx
+++ b/docs/examples/src/App.jsx
@@ -0,0 +1,311 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import "./App.css";
+import { client } from "./lib/appwrite";
+import { AppwriteException } from "appwrite";
+import AppwriteSvg from "../public/appwrite.svg";
+import ReactSvg from "../public/react.svg";
+
+function App() {
+  const [detailHeight, setDetailHeight] = useState(55);
+  const [logs, setLogs] = useState([]);
+  const [status, setStatus] = useState("idle");
+  const [showLogs, setShowLogs] = useState(false);
+
+  const detailsRef = useRef(null);
+
+  const updateHeight = useCallback(() => {
+    if (detailsRef.current) {
+      setDetailHeight(detailsRef.current.clientHeight);
+    }
+  }, [logs, showLogs]);
+
+  useEffect(() => {
+    updateHeight();
+    window.addEventListener("resize", updateHeight);
+    return () => window.removeEventListener("resize", updateHeight);
+  }, [updateHeight]);
+
+  useEffect(() => {
+    if (!detailsRef.current) return;
+    detailsRef.current.addEventListener("toggle", updateHeight);
+
+    return () => {
+      if (!detailsRef.current) return;
+      detailsRef.current.removeEventListener("toggle", updateHeight);
+    };
+  }, []);
+
+  async function sendPing() {
+    if (status === "loading") return;
+    setStatus("loading");
+    try {
+      const result = await client.ping();
+      const log = {
+        date: new Date(),
+        method: "GET",
+        path: "/v1/ping",
+        status: 200,
+        response: JSON.stringify(result),
+      };
+      setLogs((prevLogs) => [log, ...prevLogs]);
+      setStatus("success");
+    } catch (err) {
+      const log = {
+        date: new Date(),
+        method: "GET",
+        path: "/v1/ping",
+        status: err instanceof AppwriteException ? err.code : 500,
+        response:
+          err instanceof AppwriteException
+            ? err.message
+            : "Something went wrong",
+      };
+      setLogs((prevLogs) => [log, ...prevLogs]);
+      setStatus("error");
+    }
+    setShowLogs(true);
+  }
+
+  return (
+    <main
+      className="checker-background flex flex-col items-center p-5"
+      style={{ marginBottom: `${detailHeight}px` }}
+    >
+      <div className="mt-25 flex w-full max-w-[40em] items-center justify-center lg:mt-34">
+        <div className="rounded-[25%] border border-[#19191C0A] bg-[#F9F9FA] p-3 shadow-[0px_9.36px_9.36px_0px_hsla(0,0%,0%,0.04)]">
+          <div className="rounded-[25%] border border-[#FAFAFB] bg-white p-5 shadow-[0px_2px_12px_0px_hsla(0,0%,0%,0.03)] lg:p-9">
+            <img
+              alt={"React logo"}
+              src={ReactSvg}
+              className="h-14 w-14"
+              width={56}
+              height={56}
+            />
+          </div>
+        </div>
+        <div
+          className={`flex w-38 items-center transition-opacity duration-2500 ${status === "success" ? "opacity-100" : "opacity-0"}`}
+        >
+          <div className="to-[rgba(253, 54, 110, 0.15)] h-[1px] flex-1 bg-gradient-to-l from-[#f02e65]"></div>
+          <div className="icon-check flex h-5 w-5 items-center justify-center rounded-full border border-[#FD366E52] bg-[#FD366E14] text-[#FD366E]"></div>
+          <div className="to-[rgba(253, 54, 110, 0.15)] h-[1px] flex-1 bg-gradient-to-r from-[#f02e65]"></div>
+        </div>
+        <div className="rounded-[25%] border border-[#19191C0A] bg-[#F9F9FA] p-3 shadow-[0px_9.36px_9.36px_0px_hsla(0,0%,0%,0.04)]">
+          <div className="rounded-[25%] border border-[#FAFAFB] bg-white p-5 shadow-[0px_2px_12px_0px_hsla(0,0%,0%,0.03)] lg:p-9">
+            <img
+              alt={"Appwrite logo"}
+              src={AppwriteSvg}
+              className="h-14 w-14"
+              width={56}
+              height={56}
+            />
+          </div>
+        </div>
+      </div>
+
+      <section className="mt-12 flex h-52 flex-col items-center">
+        {status === "loading" ? (
+          <div className="flex flex-row gap-4">
+            <div role="status">
+              <svg
+                aria-hidden="true"
+                className="h-5 w-5 animate-spin fill-[#FD366E] text-gray-200 dark:text-gray-600"
+                viewBox="0 0 100 101"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                  fill="currentFill"
+                />
+              </svg>
+              <span className="sr-only">Loading...</span>
+            </div>
+            <span>Waiting for connection...</span>
+          </div>
+        ) : status === "success" ? (
+          <h1 className="font-[Poppins] text-2xl font-light text-[#2D2D31]">
+            Congratulations!
+          </h1>
+        ) : (
+          <h1 className="font-[Poppins] text-2xl font-light text-[#2D2D31]">
+            Check connection
+          </h1>
+        )}
+
+        <p className="mt-2 mb-8">
+          {status === "success" ? (
+            <span>You connected your app successfully.</span>
+          ) : status === "error" || status === "idle" ? (
+            <span>Send a ping to verify the connection</span>
+          ) : null}
+        </p>
+
+        <button
+          onClick={sendPing}
+          className={`cursor-pointer rounded-md bg-[#FD366E] px-2.5 py-1.5 ${status === "loading" ? "hidden" : "visible"}`}
+        >
+          <span className="text-white">Send a ping</span>
+        </button>
+      </section>
+
+      <div className="grid grid-rows-3 gap-7 lg:grid-cols-3 lg:grid-rows-none">
+        <div className="flex h-full w-72 flex-col gap-2 rounded-md border border-[#EDEDF0] bg-white p-4">
+          <h2 className="text-xl font-light text-[#2D2D31]">Edit your app</h2>
+          <p>
+            Edit{" "}
+            <code className="rounded-sm bg-[#EDEDF0] p-1">app/page.js</code> to
+            get started with building your app.
+          </p>
+        </div>
+        <a
+          href="https://cloud.appwrite.io"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <div className="flex h-full w-72 flex-col gap-2 rounded-md border border-[#EDEDF0] bg-white p-4">
+            <div className="flex flex-row items-center justify-between">
+              <h2 className="text-xl font-light text-[#2D2D31]">
+                Go to console
+              </h2>
+              <span className="icon-arrow-right text-[#D8D8DB]"></span>
+            </div>
+            <p>
+              Navigate to the console to control and oversee the Appwrite
+              services.
+            </p>
+          </div>
+        </a>
+
+        <a
+          href="https://appwrite.io/docs"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <div className="flex h-full w-72 flex-col gap-2 rounded-md border border-[#EDEDF0] bg-white p-4">
+            <div className="flex flex-row items-center justify-between">
+              <h2 className="text-xl font-light text-[#2D2D31]">
+                Explore docs
+              </h2>
+              <span className="icon-arrow-right text-[#D8D8DB]"></span>
+            </div>
+            <p>
+              Discover the full power of Appwrite by diving into our
+              documentation.
+            </p>
+          </div>
+        </a>
+      </div>
+
+      <aside className="fixed bottom-0 flex w-full cursor-pointer border-t border-[#EDEDF0] bg-white">
+        <details open={showLogs} ref={detailsRef} className={"w-full"}>
+          <summary className="flex w-full flex-row justify-between p-4 marker:content-none">
+            <div className="flex gap-2">
+              <span className="font-semibold">Logs</span>
+              {logs.length > 0 && (
+                <div className="flex items-center rounded-md bg-[#E6E6E6] px-2">
+                  <span className="font-semibold">{logs.length}</span>
+                </div>
+              )}
+            </div>
+            <div className="icon">
+              <span className="icon-cheveron-down" aria-hidden="true"></span>
+            </div>
+          </summary>
+          <div className="flex w-full flex-col lg:flex-row">
+            <div className="flex flex-col border-r border-[#EDEDF0]">
+              <div className="border-y border-[#EDEDF0] bg-[#FAFAFB] px-4 py-2 text-[#97979B]">
+                Project
+              </div>
+              <div className="grid grid-cols-2 gap-4 p-4">
+                <div className="flex flex-col">
+                  <span className="text-[#97979B]">Endpoint</span>
+                  <span className="truncate">
+                    {import.meta.env.VITE_APPWRITE_ENDPOINT}
+                  </span>
+                </div>
+                <div className="flex flex-col">
+                  <span className="text-[#97979B]">Project-ID</span>
+                  <span className="truncate">
+                    {import.meta.env.VITE_APPWRITE_PROJECT_ID}
+                  </span>
+                </div>
+                <div className="flex flex-col">
+                  <span className="text-[#97979B]">Project name</span>
+                  <span className="truncate">
+                    {import.meta.env.VITE_APPWRITE_PROJECT_NAME}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div className="flex-grow">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-y border-[#EDEDF0] bg-[#FAFAFB] text-[#97979B]">
+                    {logs.length > 0 ? (
+                      <>
+                        <td className="w-52 py-2 pl-4">Date</td>
+                        <td>Status</td>
+                        <td>Method</td>
+                        <td className="hidden lg:table-cell">Path</td>
+                        <td className="hidden lg:table-cell">Response</td>
+                      </>
+                    ) : (
+                      <>
+                        <td className="py-2 pl-4">Logs</td>
+                      </>
+                    )}
+                  </tr>
+                </thead>
+                <tbody>
+                  {logs.length > 0 ? (
+                    logs.map((log) => (
+                      <tr>
+                        <td className="py-2 pl-4 font-[Fira_Code]">
+                          {log.date.toLocaleString("en-US", {
+                            month: "short",
+                            day: "numeric",
+                            hour: "2-digit",
+                            minute: "2-digit",
+                          })}
+                        </td>
+                        <td>
+                          {log.status > 400 ? (
+                            <div className="w-fit rounded-sm bg-[#FF453A3D] px-1 text-[#B31212]">
+                              {log.status}
+                            </div>
+                          ) : (
+                            <div className="w-fit rounded-sm bg-[#10B9813D] px-1 text-[#0A714F]">
+                              {log.status}
+                            </div>
+                          )}
+                        </td>
+                        <td>{log.method}</td>
+                        <td className="hidden lg:table-cell">{log.path}</td>
+                        <td className="hidden font-[Fira_Code] lg:table-cell">
+                          {log.response}
+                        </td>
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td className="py-2 pl-4 font-[Fira_Code]">
+                        There are no logs to show
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </details>
+      </aside>
+    </main>
+  );
+}
+
+export default App;
--- a/docs/examples/src/lib/appwrite.js
+++ b/docs/examples/src/lib/appwrite.js
@@ -0,0 +1,10 @@
+import { Client, Account, Databases } from "appwrite";
+
+const client = new Client()
+    .setEndpoint(import.meta.env.VITE_APPWRITE_ENDPOINT)
+    .setProject(import.meta.env.VITE_APPWRITE_PROJECT_ID);
+
+const account = new Account(client);
+const databases = new Databases(client);
+
+export { client, account, databases };
--- a/docs/examples/src/main.jsx
+++ b/docs/examples/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import "@appwrite.io/pink-icons";
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/docs/examples/vite.config.js
+++ b/docs/examples/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})
--- a/docs/legacy/cancel.html
+++ b/docs/legacy/cancel.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zahlung Abgebrochen - EmailSorter</title>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg: #0a0a0f;
+            --warning: #f59e0b;
+            --warning-glow: rgba(245, 158, 11, 0.2);
+            --text: #e4e4e7;
+            --text-muted: #71717a;
+            --accent: #6366f1;
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            background: var(--bg);
+            color: var(--text);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+        }
+        .bg {
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: radial-gradient(circle at 50% 50%, var(--warning-glow) 0%, transparent 50%);
+            pointer-events: none;
+        }
+        .container {
+            position: relative;
+            z-index: 1;
+            padding: 2rem;
+        }
+        .icon {
+            width: 100px;
+            height: 100px;
+            background: rgba(245, 158, 11, 0.2);
+            border: 3px solid var(--warning);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 2rem;
+            font-size: 3rem;
+        }
+        h1 {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+        }
+        p {
+            color: var(--text-muted);
+            margin-bottom: 2rem;
+            max-width: 400px;
+        }
+        .buttons {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .btn {
+            display: inline-block;
+            padding: 1rem 2rem;
+            border-radius: 8px;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.2s;
+        }
+        .btn-primary {
+            background: var(--accent);
+            color: white;
+        }
+        .btn-secondary {
+            background: transparent;
+            color: var(--text-muted);
+            border: 1px solid var(--text-muted);
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+        }
+    </style>
+</head>
+<body>
+    <div class="bg"></div>
+    <div class="container">
+        <div class="icon">✕</div>
+        <h1>Zahlung Abgebrochen</h1>
+        <p>Die Zahlung wurde abgebrochen. Keine Sorge, es wurde nichts berechnet. Du kannst jederzeit erneut versuchen.</p>
+        <div class="buttons">
+            <a href="/" class="btn btn-primary">Erneut Versuchen</a>
+            <a href="/" class="btn btn-secondary">Zur Startseite</a>
+        </div>
+    </div>
+</body>
+</html>
--- a/docs/legacy/index.html
+++ b/docs/legacy/index.html
@@ -0,0 +1,701 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EmailSorter API</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-dark: #0a0a0f;
+            --bg-card: #12121a;
+            --bg-hover: #1a1a25;
+            --border: #2a2a3a;
+            --text: #e4e4e7;
+            --text-muted: #71717a;
+            --accent: #6366f1;
+            --accent-glow: rgba(99, 102, 241, 0.3);
+            --success: #10b981;
+            --warning: #f59e0b;
+            --error: #ef4444;
+            --get: #22c55e;
+            --post: #3b82f6;
+            --delete: #ef4444;
+            --patch: #f59e0b;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            background: var(--bg-dark);
+            color: var(--text);
+            min-height: 100vh;
+            line-height: 1.6;
+        }
+
+        /* Animated background */
+        .bg-pattern {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: 
+                radial-gradient(circle at 20% 20%, var(--accent-glow) 0%, transparent 40%),
+                radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.15) 0%, transparent 40%);
+            pointer-events: none;
+            z-index: 0;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+            position: relative;
+            z-index: 1;
+        }
+
+        /* Header */
+        header {
+            text-align: center;
+            padding: 4rem 0 3rem;
+        }
+
+        .logo {
+            display: inline-flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .logo-icon {
+            width: 64px;
+            height: 64px;
+            background: linear-gradient(135deg, var(--accent), #8b5cf6);
+            border-radius: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            box-shadow: 0 0 40px var(--accent-glow);
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, var(--text), var(--accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .subtitle {
+            color: var(--text-muted);
+            font-size: 1.1rem;
+            margin-top: 0.5rem;
+        }
+
+        /* Status Cards */
+        .status-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 3rem;
+        }
+
+        .status-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 1.5rem;
+            transition: all 0.3s ease;
+        }
+
+        .status-card:hover {
+            border-color: var(--accent);
+            transform: translateY(-2px);
+        }
+
+        .status-card h3 {
+            font-size: 0.875rem;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-bottom: 0.5rem;
+        }
+
+        .status-value {
+            font-size: 1.5rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+
+        .status-dot.healthy { background: var(--success); }
+        .status-dot.warning { background: var(--warning); }
+        .status-dot.error { background: var(--error); }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+
+        /* API Endpoints */
+        .section-title {
+            font-size: 1.5rem;
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+
+        .section-title::before {
+            content: '';
+            width: 4px;
+            height: 24px;
+            background: var(--accent);
+            border-radius: 2px;
+        }
+
+        .endpoint-group {
+            margin-bottom: 2rem;
+        }
+
+        .endpoint-group-title {
+            font-size: 1rem;
+            color: var(--text-muted);
+            margin-bottom: 1rem;
+            padding-left: 1rem;
+            border-left: 2px solid var(--border);
+        }
+
+        .endpoint {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            margin-bottom: 0.75rem;
+            overflow: hidden;
+            transition: all 0.2s ease;
+        }
+
+        .endpoint:hover {
+            border-color: var(--accent);
+        }
+
+        .endpoint-header {
+            padding: 1rem 1.25rem;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            cursor: pointer;
+        }
+
+        .method {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.75rem;
+            font-weight: 600;
+            padding: 0.25rem 0.75rem;
+            border-radius: 6px;
+            min-width: 70px;
+            text-align: center;
+        }
+
+        .method.get { background: rgba(34, 197, 94, 0.2); color: var(--get); }
+        .method.post { background: rgba(59, 130, 246, 0.2); color: var(--post); }
+        .method.delete { background: rgba(239, 68, 68, 0.2); color: var(--delete); }
+        .method.patch { background: rgba(245, 158, 11, 0.2); color: var(--patch); }
+
+        .endpoint-path {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.9rem;
+            flex: 1;
+        }
+
+        .endpoint-desc {
+            color: var(--text-muted);
+            font-size: 0.875rem;
+        }
+
+        .endpoint-details {
+            display: none;
+            padding: 1rem 1.25rem;
+            background: var(--bg-hover);
+            border-top: 1px solid var(--border);
+        }
+
+        .endpoint.open .endpoint-details {
+            display: block;
+        }
+
+        .endpoint-details pre {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.8rem;
+            background: var(--bg-dark);
+            padding: 1rem;
+            border-radius: 8px;
+            overflow-x: auto;
+        }
+
+        .endpoint-details h4 {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            margin-bottom: 0.5rem;
+            margin-top: 1rem;
+        }
+
+        .endpoint-details h4:first-child {
+            margin-top: 0;
+        }
+
+        /* Features */
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 1.5rem;
+            margin-top: 3rem;
+        }
+
+        .feature-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 1.5rem;
+        }
+
+        .feature-card h3 {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 0.75rem;
+        }
+
+        .feature-card p {
+            color: var(--text-muted);
+            font-size: 0.9rem;
+        }
+
+        /* Footer */
+        footer {
+            text-align: center;
+            padding: 3rem 0;
+            color: var(--text-muted);
+            font-size: 0.875rem;
+        }
+
+        footer a {
+            color: var(--accent);
+            text-decoration: none;
+        }
+
+        /* Loading animation */
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--border);
+            border-top-color: var(--accent);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* Try button */
+        .try-btn {
+            background: var(--accent);
+            color: white;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 6px;
+            font-size: 0.8rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .try-btn:hover {
+            background: #4f46e5;
+            transform: scale(1.05);
+        }
+    </style>
+</head>
+<body>
+    <div class="bg-pattern"></div>
+    
+    <div class="container">
+        <header>
+            <div class="logo">
+                <div class="logo-icon">📧</div>
+                <div>
+                    <h1>EmailSorter API</h1>
+                    <p class="subtitle">KI-gestützte E-Mail-Sortierung</p>
+                </div>
+            </div>
+        </header>
+
+        <!-- Status Cards -->
+        <div class="status-grid">
+            <div class="status-card">
+                <h3>Status</h3>
+                <div class="status-value">
+                    <span class="status-dot healthy" id="status-dot"></span>
+                    <span id="status-text">Wird geladen...</span>
+                </div>
+            </div>
+            <div class="status-card">
+                <h3>Version</h3>
+                <div class="status-value" id="version">-</div>
+            </div>
+            <div class="status-card">
+                <h3>Uptime</h3>
+                <div class="status-value" id="uptime">-</div>
+            </div>
+            <div class="status-card">
+                <h3>Environment</h3>
+                <div class="status-value" id="environment">-</div>
+            </div>
+        </div>
+
+        <!-- API Endpoints -->
+        <h2 class="section-title">API Endpoints</h2>
+
+        <div class="endpoint-group">
+            <div class="endpoint-group-title">🔧 System</div>
+            
+            <div class="endpoint">
+                <div class="endpoint-header" onclick="toggleEndpoint(this)">
+                    <span class="method get">GET</span>
+                    <span class="endpoint-path">/api/health</span>
+                    <span class="endpoint-desc">Server Status prüfen</span>
+                    <button class="try-btn" onclick="event.stopPropagation(); tryEndpoint('/api/health')">Testen</button>
+                </div>
+                <div class="endpoint-details">
+                    <h4>Response</h4>
+                    <pre id="health-response">{ "success": true, "data": { "status": "healthy", ... } }</pre>
+                </div>
+            </div>
+
+            <div class="endpoint">
+                <div class="endpoint-header" onclick="toggleEndpoint(this)">
+                    <span class="method get">GET</span>
+                    <span class="endpoint-path">/api/config</span>
+                    <span class="endpoint-desc">Öffentliche Konfiguration</span>
+                    <button class="try-btn" onclick="event.stopPropagation(); tryEndpoint('/api/config')">Testen</button>
+                </div>
+                <div class="endpoint-details">
+                    <h4>Response</h4>
+                    <pre id="config-response">Klicke auf "Testen"</pre>
+                </div>
+            </div>
+        </div>
+
+        <div class="endpoint-group">
+            <div class="endpoint-group-title">🔐 OAuth</div>
+            
+            <div class="endpoint">
+                <div class="endpoint-header" onclick="toggleEndpoint(this)">
+                    <span class="method get">GET</span>
+                    <span class="endpoint-path">/api/oauth/status</span>
+                    <span class="endpoint-desc">OAuth Provider Status</span>
+                    <button class="try-btn" onclick="event.stopPropagation(); tryEndpoint('/api/oauth/status')">Testen</button>
+                </div>
+                <div class="endpoint-details">
+                    <h4>Response</h4>
+                    <pre id="oauth-response">Klicke auf "Testen"</pre>
+                </div>
+            </div>
+
+            <div class="endpoint">
+                <div class="endpoint-header" onclick="toggleEndpoint(this)">
+                    <span class="method get">GET</span>
+                    <span class="endpoint-path">/api/oauth/gmail/connect</span>
+                    <span class="endpoint-desc">Gmail OAuth starten</span>
+                </div>
+                <div class="endpoint-details">
+                    <h4>Query Parameter</h4>
+                    <pre>userId: string (required)</pre>
+                    <h4>Response</h4>
+                    <pre>{ "success": true, "data": { "url": "https://accounts.google.com/..." } }</pre>
+                </div>
+            </div>
+
+            <div class="endpoint">
+                <div class="endpoint-header" onclick="toggleEndpoint(this)">
+                    <span class="method get">GET</span>
+                    <span class="endpoint-path">/api/oauth/outlook/connect</span>
+                    <span class="endpoint-desc">Outlook OAuth starten</span>
+                </div>
+                <div class="endpoint-details">
+                    <h4>Query Parameter</h4>
+                    <pre>userId: string (required)</pre>
+                    <h4>Response</h4>
+                    <pre>{ "success": true, "data": { "url": "https://login.microsoftonline.com/..." } }</pre>
+                </div>
+            </div>
+        </div>
+
+        <div class="endpoint-group">
+            <div class="endpoint-group-title">📬 E-Mail</div>
+            
+            <div class="endpoint">
+                <div class="endpoint-header" onclick="toggleEndpoint(this)">
+                    <span class="method get">GET</span>
+                    <span class="endpoint-path">/api/email/accounts</span>
+                    <span class="endpoint-desc">Verbundene E-Mail-Konten</span>
+                </div>
+                <div class="endpoint-details">
+                    <h4>Query Parameter</h4>
+                    <pre>userId: string (required)</pre>
+                    <h4>Response</h4>
+                    <pre>{
+  "success": true,
+  "data": [
+    { "id": "...", "email": "user@gmail.com", "provider": "gmail", "connected": true }
+  ]
+}</pre>
+                </div>
+            </div>
+
+            <div class="endpoint">
+                <div class="endpoint-header" onclick="toggleEndpoint(this)">
+                    <span class="method post">POST</span>
+                    <span class="endpoint-path">/api/email/sort</span>
+                    <span class="endpoint-desc">E-Mails sortieren (KI)</span>
+                </div>
+                <div class="endpoint-details">
+                    <h4>Request Body</h4>
+                    <pre>{
+  "userId": "string (required)",
+  "accountId": "string (required)",
+  "maxEmails": 50
+}</pre>
+                    <h4>Response</h4>
+                    <pre>{
+  "success": true,
+  "data": {
+    "sorted": 42,
+    "categories": { "vip": 5, "newsletters": 20, ... },
+    "timeSaved": { "minutes": 10, "formatted": "10 Minuten" }
+  }
+}</pre>
+                </div>
+            </div>
+
+            <div class="endpoint">
+                <div class="endpoint-header" onclick="toggleEndpoint(this)">
+                    <span class="method get">GET</span>
+                    <span class="endpoint-path">/api/email/stats</span>
+                    <span class="endpoint-desc">Sortier-Statistiken</span>
+                </div>
+                <div class="endpoint-details">
+                    <h4>Query Parameter</h4>
+                    <pre>userId: string (required)</pre>
+                    <h4>Response</h4>
+                    <pre>{
+  "success": true,
+  "data": {
+    "totalSorted": 1250,
+    "todaySorted": 45,
+    "weekSorted": 312,
+    "timeSaved": 312
+  }
+}</pre>
+                </div>
+            </div>
+
+            <div class="endpoint">
+                <div class="endpoint-header" onclick="toggleEndpoint(this)">
+                    <span class="method delete">DELETE</span>
+                    <span class="endpoint-path">/api/email/accounts/:accountId</span>
+                    <span class="endpoint-desc">E-Mail-Konto trennen</span>
+                </div>
+                <div class="endpoint-details">
+                    <h4>Query Parameter</h4>
+                    <pre>userId: string (required)</pre>
+                    <h4>Response</h4>
+                    <pre>{ "success": true, "message": "Konto erfolgreich getrennt" }</pre>
+                </div>
+            </div>
+        </div>
+
+        <div class="endpoint-group">
+            <div class="endpoint-group-title">💳 Subscription</div>
+            
+            <div class="endpoint">
+                <div class="endpoint-header" onclick="toggleEndpoint(this)">
+                    <span class="method post">POST</span>
+                    <span class="endpoint-path">/api/subscription/checkout</span>
+                    <span class="endpoint-desc">Checkout Session erstellen</span>
+                </div>
+                <div class="endpoint-details">
+                    <h4>Request Body</h4>
+                    <pre>{
+  "userId": "string (required)",
+  "plan": "basic | pro | business (required)",
+  "email": "string (optional)"
+}</pre>
+                    <h4>Response</h4>
+                    <pre>{ "success": true, "data": { "url": "https://checkout.stripe.com/...", "sessionId": "..." } }</pre>
+                </div>
+            </div>
+
+            <div class="endpoint">
+                <div class="endpoint-header" onclick="toggleEndpoint(this)">
+                    <span class="method get">GET</span>
+                    <span class="endpoint-path">/api/subscription/status</span>
+                    <span class="endpoint-desc">Subscription Status</span>
+                </div>
+                <div class="endpoint-details">
+                    <h4>Query Parameter</h4>
+                    <pre>userId: string (required)</pre>
+                    <h4>Response</h4>
+                    <pre>{
+  "success": true,
+  "data": {
+    "status": "active",
+    "plan": "pro",
+    "features": { "emailAccounts": 3, ... },
+    "currentPeriodEnd": "2026-02-15T00:00:00Z"
+  }
+}</pre>
+                </div>
+            </div>
+
+            <div class="endpoint">
+                <div class="endpoint-header" onclick="toggleEndpoint(this)">
+                    <span class="method post">POST</span>
+                    <span class="endpoint-path">/api/subscription/portal</span>
+                    <span class="endpoint-desc">Stripe Kundenportal</span>
+                </div>
+                <div class="endpoint-details">
+                    <h4>Request Body</h4>
+                    <pre>{ "userId": "string (required)" }</pre>
+                    <h4>Response</h4>
+                    <pre>{ "success": true, "data": { "url": "https://billing.stripe.com/..." } }</pre>
+                </div>
+            </div>
+
+            <div class="endpoint">
+                <div class="endpoint-header" onclick="toggleEndpoint(this)">
+                    <span class="method post">POST</span>
+                    <span class="endpoint-path">/api/subscription/cancel</span>
+                    <span class="endpoint-desc">Subscription kündigen</span>
+                </div>
+                <div class="endpoint-details">
+                    <h4>Request Body</h4>
+                    <pre>{ "userId": "string (required)" }</pre>
+                </div>
+            </div>
+        </div>
+
+        <!-- Features -->
+        <h2 class="section-title">Features</h2>
+        <div class="features">
+            <div class="feature-card">
+                <h3>🤖 Mistral AI</h3>
+                <p>Intelligente E-Mail-Kategorisierung mit modernster KI-Technologie.</p>
+            </div>
+            <div class="feature-card">
+                <h3>📧 Multi-Provider</h3>
+                <p>Unterstützt Gmail und Outlook mit OAuth 2.0 Authentifizierung.</p>
+            </div>
+            <div class="feature-card">
+                <h3>💳 Stripe Billing</h3>
+                <p>Sichere Zahlungsabwicklung mit Subscriptions und Kundenportal.</p>
+            </div>
+            <div class="feature-card">
+                <h3>🔒 Rate Limiting</h3>
+                <p>Schutz vor Missbrauch mit intelligenten Request-Limits.</p>
+            </div>
+            <div class="feature-card">
+                <h3>📊 Statistiken</h3>
+                <p>Detaillierte Einblicke in sortierte E-Mails und gesparte Zeit.</p>
+            </div>
+            <div class="feature-card">
+                <h3>🌐 Webhooks</h3>
+                <p>Real-time Updates für Gmail und Outlook Benachrichtigungen.</p>
+            </div>
+        </div>
+
+        <footer>
+            <p>EmailSorter API v2.0.0 &bull; <a href="/api/health">Health Check</a> &bull; Powered by Node.js + Express</p>
+        </footer>
+    </div>
+
+    <script>
+        // Load server status
+        async function loadStatus() {
+            try {
+                const res = await fetch('/api/health');
+                const data = await res.json();
+                
+                if (data.success) {
+                    document.getElementById('status-text').textContent = 'Online';
+                    document.getElementById('status-dot').className = 'status-dot healthy';
+                    document.getElementById('version').textContent = data.data.version;
+                    document.getElementById('uptime').textContent = formatUptime(data.data.uptime);
+                    document.getElementById('environment').textContent = data.data.environment;
+                    document.getElementById('health-response').textContent = JSON.stringify(data, null, 2);
+                }
+            } catch (e) {
+                document.getElementById('status-text').textContent = 'Offline';
+                document.getElementById('status-dot').className = 'status-dot error';
+            }
+        }
+
+        function formatUptime(seconds) {
+            if (seconds < 60) return `${seconds}s`;
+            if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
+            if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;
+            return `${Math.floor(seconds / 86400)}d ${Math.floor((seconds % 86400) / 3600)}h`;
+        }
+
+        function toggleEndpoint(header) {
+            header.parentElement.classList.toggle('open');
+        }
+
+        async function tryEndpoint(path) {
+            const responseId = path.replace('/api/', '').replace('/', '-') + '-response';
+            const pre = document.getElementById(responseId) || document.querySelector('.endpoint.open pre');
+            
+            if (pre) {
+                pre.textContent = 'Wird geladen...';
+            }
+
+            try {
+                const res = await fetch(path);
+                const data = await res.json();
+                if (pre) {
+                    pre.textContent = JSON.stringify(data, null, 2);
+                }
+            } catch (e) {
+                if (pre) {
+                    pre.textContent = `Error: ${e.message}`;
+                }
+            }
+        }
+
+        // Initial load
+        loadStatus();
+        
+        // Refresh every 30 seconds
+        setInterval(loadStatus, 30000);
+    </script>
+</body>
+</html>
--- a/docs/legacy/success.html
+++ b/docs/legacy/success.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zahlung Erfolgreich - EmailSorter</title>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg: #0a0a0f;
+            --success: #10b981;
+            --success-glow: rgba(16, 185, 129, 0.3);
+            --text: #e4e4e7;
+            --text-muted: #71717a;
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            background: var(--bg);
+            color: var(--text);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+        }
+        .bg {
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: radial-gradient(circle at 50% 50%, var(--success-glow) 0%, transparent 50%);
+            pointer-events: none;
+        }
+        .container {
+            position: relative;
+            z-index: 1;
+            padding: 2rem;
+        }
+        .icon {
+            width: 100px;
+            height: 100px;
+            background: var(--success);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 2rem;
+            font-size: 3rem;
+            animation: pop 0.5s ease-out;
+            box-shadow: 0 0 60px var(--success-glow);
+        }
+        @keyframes pop {
+            0% { transform: scale(0); }
+            70% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        h1 {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+        }
+        p {
+            color: var(--text-muted);
+            margin-bottom: 2rem;
+            max-width: 400px;
+        }
+        .btn {
+            display: inline-block;
+            background: var(--success);
+            color: white;
+            padding: 1rem 2rem;
+            border-radius: 8px;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.2s;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px var(--success-glow);
+        }
+        .confetti {
+            position: fixed;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    </style>
+</head>
+<body>
+    <div class="bg"></div>
+    <div class="container">
+        <div class="icon">✓</div>
+        <h1>Zahlung Erfolgreich!</h1>
+        <p>Vielen Dank für dein Vertrauen. Dein EmailSorter Account wurde aktiviert. Du kannst jetzt deine E-Mail-Konten verbinden.</p>
+        <a href="/" class="btn">Zum Dashboard →</a>
+    </div>
+    <script>
+        // Simple confetti effect
+        function createConfetti() {
+            const colors = ['#10b981', '#6366f1', '#f59e0b', '#3b82f6', '#ec4899'];
+            for (let i = 0; i < 50; i++) {
+                setTimeout(() => {
+                    const confetti = document.createElement('div');
+                    confetti.style.cssText = `
+                        position: fixed;
+                        width: 10px;
+                        height: 10px;
+                        background: ${colors[Math.floor(Math.random() * colors.length)]};
+                        top: -10px;
+                        left: ${Math.random() * 100}vw;
+                        border-radius: 2px;
+                        animation: fall ${2 + Math.random() * 2}s linear forwards;
+                    `;
+                    document.body.appendChild(confetti);
+                    setTimeout(() => confetti.remove(), 4000);
+                }, i * 50);
+            }
+        }
+        
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes fall {
+                to {
+                    transform: translateY(100vh) rotate(720deg);
+                    opacity: 0;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+        createConfetti();
+    </script>
+</body>
+</html>
--- a/docs/server/CORRECTNESS_VALIDATION.md
+++ b/docs/server/CORRECTNESS_VALIDATION.md
@@ -0,0 +1,203 @@
+# Correctness Properties Validation
+
+## Property 1: Question Loading ✅
+**Property:** *For any* active product, when questions are requested, all active questions for that product should be returned ordered by step and order.
+**Validates: Requirements 1.1, 2.4**
+
+**Implementation Check:**
+```javascript
+// GET /api/questions endpoint
+const questionsResponse = await databases.listDocuments(
+    process.env.APPWRITE_DATABASE_ID,
+    'questions',
+    [
+        Query.equal('productId', product.$id),      // ✅ Filters by product
+        Query.equal('isActive', true),              // ✅ Only active questions
+        Query.orderAsc('step'),                     // ✅ Ordered by step
+        Query.orderAsc('order')                     // ✅ Then by order
+    ]
+);
+```
+
+**Status:** ✅ VALIDATED
+- Correctly filters by productId
+- Correctly filters by isActive
+- Correctly orders by step then order
+- Returns all matching questions
+
+---
+
+## Property 2: Submission Creation ✅
+**Property:** *For any* valid answers object, when a submission is created, the system should store the submission and return a valid submissionId.
+**Validates: Requirements 2.2, 2.3**
+
+**Implementation Check:**
+```javascript
+// POST /api/submissions endpoint
+const submission = await databases.createDocument(
+    process.env.APPWRITE_DATABASE_ID,
+    'submissions',
+    'unique()',
+    {
+        productId: product.$id,
+        status: 'draft',
+        customerEmail: answers.email || null,
+        customerName: answers.name || null,
+        finalSummaryJson: JSON.stringify(answers),
+        priceCents: product.priceCents,
+        currency: product.currency
+    }
+);
+
+await databases.createDocument(
+    process.env.APPWRITE_DATABASE_ID,
+    'answers',
+    'unique()',
+    {
+        submissionId: submission.$id,
+        answersJson: JSON.stringify(answers)
+    }
+);
+
+res.json({ submissionId: submission.$id });
+```
+
+**Status:** ✅ VALIDATED
+- Creates submission document with all required fields
+- Creates answers document linked to submission
+- Returns valid submissionId
+- Stores answers in both finalSummaryJson and answersJson
+
+---
+
+## Property 3: Payment Flow ✅
+**Property:** *For any* valid submissionId, when checkout is initiated, the system should create a Stripe session and return a checkout URL.
+**Validates: Requirements 3.1, 3.2**
+
+**Implementation Check:**
+```javascript
+// POST /api/checkout endpoint
+if (!submissionId) {
+    return res.status(400).json({ error: 'Missing submissionId' });
+}
+
+const submission = await databases.getDocument(
+    process.env.APPWRITE_DATABASE_ID,
+    'submissions',
+    submissionId
+);
+
+const session = await stripe.checkout.sessions.create({
+    payment_method_types: ['card'],
+    line_items: [
+        {
+            price_data: {
+                currency: submission.currency,
+                product_data: {
+                    name: 'Email Sortierer Service',
+                },
+                unit_amount: submission.priceCents,
+            },
+            quantity: 1,
+        },
+    ],
+    mode: 'payment',
+    success_url: `${process.env.BASE_URL || 'http://localhost:3000'}/success.html`,
+    cancel_url: `${process.env.BASE_URL || 'http://localhost:3000'}/cancel.html`,
+    metadata: {
+        submissionId: submissionId
+    }
+});
+
+res.json({ url: session.url });
+```
+
+**Status:** ✅ VALIDATED
+- Validates submissionId is provided
+- Fetches submission to get price and currency
+- Creates Stripe checkout session
+- Includes submissionId in metadata for webhook
+- Returns checkout URL for redirect
+
+---
+
+## Property 4: Webhook Validation ✅
+**Property:** *For any* Stripe webhook event, when the signature is invalid, the system should reject the request with 400 status.
+**Validates: Requirements 3.4**
+
+**Implementation Check:**
+```javascript
+// POST /stripe/webhook endpoint
+app.post('/stripe/webhook', express.raw({ type: 'application/json' }), async (req, res) => {
+    const sig = req.headers['stripe-signature'];
+    
+    try {
+        const event = stripe.webhooks.constructEvent(
+            req.body,
+            sig,
+            process.env.STRIPE_WEBHOOK_SECRET
+        );
+        
+        // Process event...
+        
+        res.json({ received: true });
+    } catch (err) {
+        console.error('Webhook error:', err.message);
+        res.status(400).send(`Webhook Error: ${err.message}`);  // ✅ Returns 400
+    }
+});
+```
+
+**Status:** ✅ VALIDATED
+- Uses express.raw() middleware to preserve raw body for signature verification
+- Extracts signature from headers
+- Uses stripe.webhooks.constructEvent() which validates signature
+- Returns 400 status on invalid signature (caught in catch block)
+- Processes checkout.session.completed event
+- Updates submission status to 'paid'
+- Creates order record
+
+---
+
+## Additional Validation
+
+### Error Handling ✅
+- Missing environment variables → Server exits with error
+- Missing product → 404 response
+- Missing submissionId → 400 response
+- Invalid webhook signature → 400 response
+- Database errors → 500 response with error message
+- Stripe errors → 500 response with error message
+
+### API Design ✅
+- Consistent error response format: `{ error: 'message' }`
+- Consistent success response format
+- Proper HTTP status codes
+- Proper middleware ordering (raw body for webhook, JSON for API)
+
+### Security ✅
+- Environment variable validation on startup
+- Webhook signature verification
+- No sensitive data in error messages
+- Proper error logging
+
+---
+
+## Conclusion
+
+All four correctness properties are validated and correctly implemented:
+- ✅ Property 1: Question Loading
+- ✅ Property 2: Submission Creation
+- ✅ Property 3: Payment Flow
+- ✅ Property 4: Webhook Validation
+
+All requirements are met:
+- ✅ Requirement 1.1: Questions loaded from Appwrite
+- ✅ Requirement 2.2: Submission created
+- ✅ Requirement 2.3: Answers saved
+- ✅ Requirement 3.1: Stripe Checkout Session created
+- ✅ Requirement 3.2: Customer redirected to Stripe
+- ✅ Requirement 3.3: Submission status updated to 'paid'
+- ✅ Requirement 3.4: Webhook signature validated
+
+**Task 3 is COMPLETE.**
--- a/docs/server/E2E_TEST_GUIDE.md
+++ b/docs/server/E2E_TEST_GUIDE.md
@@ -0,0 +1,258 @@
+# End-to-End Test Guide
+
+Dieses Dokument beschreibt, wie Sie das Email-Sortierer System vollständig testen können.
+
+## Voraussetzungen
+
+Bevor Sie die Tests durchführen können, müssen Sie:
+
+1. ✅ Alle Dependencies installiert haben (`npm install` in server/)
+2. ✅ Eine `.env` Datei mit allen erforderlichen Credentials erstellt haben
+3. ✅ Das Bootstrap-Script ausgeführt haben (`npm run bootstrap`)
+4. ✅ Den Server gestartet haben (`npm start`)
+
+## Automatisierter End-to-End Test
+
+Der automatisierte Test überprüft alle Backend-Komponenten:
+
+```bash
+cd server
+npm test
+```
+
+### Was wird getestet?
+
+1. **Fragen laden** (Requirements 1.1, 2.4)
+   - Lädt alle aktiven Fragen für das Produkt "email-sorter"
+   - Verifiziert, dass Fragen korrekt nach Step und Order sortiert sind
+   - Validiert Property 1: Question Loading
+
+2. **Submission erstellen** (Requirements 2.2, 2.3)
+   - Erstellt eine neue Submission mit Test-Antworten
+   - Speichert Kundeninformationen (Email, Name)
+   - Validiert Property 2: Submission Creation
+
+3. **Antworten speichern** (Requirements 2.3)
+   - Speichert alle Antworten in der Answers Collection
+   - Verifiziert, dass Antworten korrekt abgerufen werden können
+
+4. **Stripe Checkout Session** (Requirements 3.1, 3.2)
+   - Erstellt eine Stripe Checkout Session
+   - Verifiziert, dass eine gültige Checkout-URL zurückgegeben wird
+   - Validiert Property 3: Payment Flow
+
+5. **Webhook Konfiguration** (Requirements 3.4)
+   - Überprüft, dass Webhook Secret konfiguriert ist
+   - Validiert Property 4: Webhook Validation
+
+6. **Payment Completion** (Requirements 3.3)
+   - Simuliert erfolgreiche Bezahlung
+   - Aktualisiert Submission Status auf "paid"
+   - Erstellt Order-Record
+
+7. **Kompletter Datenfluss**
+   - Verifiziert, dass alle Daten korrekt gespeichert wurden
+   - Überprüft Verknüpfungen zwischen Collections
+
+### Erwartete Ausgabe
+
+```
+🧪 Starting End-to-End Test
+
+Test 1: Loading questions from Appwrite...
+✅ Product found: Email Sorter Setup (49.00 EUR)
+✅ Loaded 13 questions
+✅ Questions are properly ordered by step and order
+
+Test 2: Creating submission with test answers...
+✅ Submission created with ID: [ID]
+
+Test 3: Saving answers to Appwrite...
+✅ Answers saved with ID: [ID]
+✅ Answers can be retrieved correctly
+
+Test 4: Creating Stripe checkout session...
+✅ Stripe session created: [SESSION_ID]
+   Checkout URL: https://checkout.stripe.com/...
+
+Test 5: Verifying webhook signature validation...
+✅ Webhook secret is configured
+
+Test 6: Simulating payment completion...
+✅ Submission status updated to "paid"
+✅ Order record created with ID: [ID]
+
+Test 7: Verifying complete data flow...
+✅ Data verification:
+   - Submission status: paid
+   - Answers records: 1
+   - Order records: 1
+
+✅ All tests passed!
+
+📊 Test Summary:
+   ✅ Questions loaded and ordered correctly
+   ✅ Submission created successfully
+   ✅ Answers saved and retrieved correctly
+   ✅ Stripe checkout session created
+   ✅ Webhook configuration verified
+   ✅ Payment completion simulated
+   ✅ Complete data flow verified
+
+🎉 End-to-End test completed successfully!
+```
+
+## Manueller Frontend Test
+
+Um das Frontend manuell zu testen:
+
+1. **Server starten:**
+   ```bash
+   cd server
+   npm start
+   ```
+
+2. **Browser öffnen:**
+   - Navigieren Sie zu http://localhost:3000
+
+3. **Fragebogen ausfüllen:**
+   - Schritt 1: Kontaktinformationen
+     - Email: test@example.com
+     - Name: Test User
+     - Firma: Test Company
+   
+   - Schritt 2: Unternehmensgröße
+     - Mitarbeiter: 1-10
+     - Email-Volumen: 100-500
+   
+   - Schritt 3: Aktueller Anbieter
+     - Provider: Gmail
+   
+   - Schritt 4: Probleme (Multiselect)
+     - Wählen Sie: Spam, Organization
+   
+   - Schritt 5: Budget
+     - Budget: 50-100
+   
+   - Schritt 6: Timeline
+     - Timeline: Sofort
+   
+   - Schritt 7: Gewünschte Features (Multiselect)
+     - Wählen Sie: Auto-Sorting, Priority Inbox
+   
+   - Schritt 8: Integration
+     - Integration: Ja
+   
+   - Schritt 9: Datenschutz
+     - Datenschutz: Sehr wichtig
+   
+   - Schritt 10: Zusätzliche Informationen
+     - Text: "Test submission"
+
+4. **Zusammenfassung überprüfen:**
+   - Alle Antworten sollten korrekt angezeigt werden
+   - "Jetzt kaufen" Button sollte sichtbar sein
+
+5. **Bezahlung testen:**
+   - Klicken Sie auf "Jetzt kaufen"
+   - Sie werden zu Stripe Checkout weitergeleitet
+   - Verwenden Sie Test-Kreditkarte: `4242 4242 4242 4242`
+   - Ablaufdatum: Beliebiges zukünftiges Datum
+   - CVC: Beliebige 3 Ziffern
+
+6. **Daten in Appwrite überprüfen:**
+   - Öffnen Sie Ihr Appwrite Dashboard
+   - Navigieren Sie zur EmailSorter Database
+   - Überprüfen Sie die Collections:
+     - **Submissions**: Sollte einen neuen Eintrag mit status "paid" haben
+     - **Answers**: Sollte die gespeicherten Antworten enthalten
+     - **Orders**: Sollte einen Order-Record haben
+
+## Webhook Test
+
+Um den Stripe Webhook zu testen:
+
+1. **Stripe CLI installieren:**
+   ```bash
+   stripe login
+   ```
+
+2. **Webhook forwarding starten:**
+   ```bash
+   stripe listen --forward-to localhost:3000/stripe/webhook
+   ```
+
+3. **Webhook Secret kopieren:**
+   - Kopieren Sie das angezeigte Secret (whsec_...)
+   - Fügen Sie es in Ihre `.env` als `STRIPE_WEBHOOK_SECRET` ein
+   - Starten Sie den Server neu
+
+4. **Test-Event senden:**
+   ```bash
+   stripe trigger checkout.session.completed
+   ```
+
+5. **Logs überprüfen:**
+   - Server-Logs sollten "Webhook received" zeigen
+   - Appwrite sollte eine neue Order haben
+
+## Validierung der Correctness Properties
+
+### Property 1: Question Loading
+**Test:** Fragen werden korrekt geladen und sortiert
+- ✅ Automatischer Test verifiziert Sortierung nach step und order
+- ✅ Nur aktive Fragen werden zurückgegeben
+
+### Property 2: Submission Creation
+**Test:** Submissions werden korrekt erstellt
+- ✅ Automatischer Test erstellt Submission mit allen Feldern
+- ✅ SubmissionId wird zurückgegeben
+
+### Property 3: Payment Flow
+**Test:** Checkout-Flow funktioniert
+- ✅ Automatischer Test erstellt Stripe Session
+- ✅ Checkout URL wird generiert
+
+### Property 4: Webhook Validation
+**Test:** Webhook-Signatur wird validiert
+- ✅ Server prüft Stripe-Signatur
+- ✅ Ungültige Signaturen werden mit 400 abgelehnt
+
+## Fehlerbehebung
+
+### Test schlägt fehl: "Missing required environment variable"
+- Überprüfen Sie, dass alle Variablen in `.env` gesetzt sind
+- Kopieren Sie `.env.example` zu `.env` und füllen Sie alle Werte aus
+
+### Test schlägt fehl: "No active product found"
+- Führen Sie das Bootstrap-Script aus: `npm run bootstrap`
+- Überprüfen Sie, dass `APPWRITE_DATABASE_ID` korrekt gesetzt ist
+
+### Test schlägt fehl: "Stripe error"
+- Überprüfen Sie, dass `STRIPE_SECRET_KEY` korrekt ist
+- Verwenden Sie einen Test-Key (sk_test_...)
+
+### Frontend lädt keine Fragen
+- Öffnen Sie die Browser-Konsole (F12)
+- Überprüfen Sie auf Netzwerkfehler
+- Stellen Sie sicher, dass der Server läuft
+
+### Webhook funktioniert nicht
+- Stellen Sie sicher, dass Stripe CLI läuft
+- Überprüfen Sie, dass `STRIPE_WEBHOOK_SECRET` korrekt ist
+- Überprüfen Sie Server-Logs auf Fehler
+
+## Erfolgreiche Test-Checkliste
+
+- [ ] Automatischer E2E-Test läuft ohne Fehler durch
+- [ ] Frontend lädt alle 13 Fragen
+- [ ] Navigation zwischen Steps funktioniert
+- [ ] Validierung von Pflichtfeldern funktioniert
+- [ ] Zusammenfassung zeigt alle Antworten
+- [ ] Stripe Checkout wird korrekt erstellt
+- [ ] Submission wird in Appwrite gespeichert
+- [ ] Answers werden in Appwrite gespeichert
+- [ ] Webhook aktualisiert Submission Status
+- [ ] Order wird nach Bezahlung erstellt
+
+Wenn alle Punkte erfüllt sind, ist das System vollständig funktionsfähig! 🎉
--- a/docs/server/ENDPOINT_VERIFICATION.md
+++ b/docs/server/ENDPOINT_VERIFICATION.md
@@ -0,0 +1,180 @@
+# Server Endpoint Verification
+
+## Implementation Status: ✅ COMPLETE
+
+All four required endpoints have been implemented in `server/index.mjs`:
+
+### 1. GET /api/questions ✅
+**Requirements: 1.1, 2.4**
+
+**Implementation:**
+- Accepts `productSlug` query parameter
+- Queries Appwrite for active product by slug
+- Returns 404 if product not found
+- Queries questions collection with:
+  - `Query.equal('productId', product.$id)`
+  - `Query.equal('isActive', true)`
+  - `Query.orderAsc('step')`
+  - `Query.orderAsc('order')`
+- Returns ordered list of active questions
+
+**Validation:**
+- ✅ Uses correct Appwrite Query API (not deprecated listRows)
+- ✅ Filters by productId and isActive
+- ✅ Orders by step and order
+- ✅ Error handling for missing product
+- ✅ Error handling for database errors
+
+---
+
+### 2. POST /api/submissions ✅
+**Requirements: 2.2, 2.3**
+
+**Implementation:**
+- Accepts `productSlug` and `answers` in request body
+- Looks up product by slug
+- Creates submission document with:
+  - productId
+  - status: 'draft'
+  - customerEmail (from answers.email)
+  - customerName (from answers.name)
+  - finalSummaryJson (stringified answers)
+  - priceCents (from product)
+  - currency (from product)
+- Creates answers document with:
+  - submissionId
+  - answersJson (stringified answers)
+- Returns submissionId
+
+**Validation:**
+- ✅ Uses createDocument (not deprecated createRow)
+- ✅ Creates both submission and answers records
+- ✅ Stores all required data
+- ✅ Returns submissionId for checkout
+- ✅ Error handling for missing product
+- ✅ Error handling for database errors
+
+---
+
+### 3. POST /api/checkout ✅
+**Requirements: 3.1, 3.2**
+
+**Implementation:**
+- Accepts `submissionId` in request body
+- Validates submissionId is provided (400 if missing)
+- Fetches submission from Appwrite
+- Creates Stripe Checkout Session with:
+  - Payment method: card
+  - Line item with price from submission
+  - Success/cancel URLs
+  - Metadata containing submissionId
+- Returns checkout URL
+
+**Validation:**
+- ✅ Validates submissionId presence
+- ✅ Fetches submission data
+- ✅ Creates Stripe session with correct parameters
+- ✅ Includes submissionId in metadata for webhook
+- ✅ Returns URL for redirect
+- ✅ Error handling for missing submission
+- ✅ Error handling for Stripe errors
+
+---
+
+### 4. POST /stripe/webhook ✅
+**Requirements: 3.3, 3.4**
+
+**Implementation:**
+- Uses `express.raw()` middleware for signature verification
+- Extracts Stripe signature from headers
+- Validates webhook signature using `stripe.webhooks.constructEvent()`
+- Returns 400 if signature invalid
+- Handles `checkout.session.completed` event
+- Extracts submissionId from session metadata
+- Updates submission status to 'paid'
+- Creates order document with session data
+- Returns success response
+
+**Validation:**
+- ✅ Signature validation (returns 400 on invalid signature)
+- ✅ Handles checkout.session.completed event
+- ✅ Updates submission status to 'paid'
+- ✅ Creates order record
+- ✅ Uses updateDocument (not deprecated updateRow)
+- ✅ Error handling with proper status codes
+
+---
+
+## Environment Variables Validation ✅
+
+The server validates all required environment variables on startup:
+- APPWRITE_ENDPOINT
+- APPWRITE_PROJECT_ID
+- APPWRITE_API_KEY
+- APPWRITE_DATABASE_ID
+- STRIPE_SECRET_KEY
+- STRIPE_WEBHOOK_SECRET
+
+If any are missing, the server exits with an error message.
+
+---
+
+## Middleware Configuration ✅
+
+- Static file serving for public directory
+- JSON parsing for /api routes
+- Raw body parsing for /stripe/webhook (required for signature verification)
+
+---
+
+## All Requirements Met ✅
+
+- ✅ Requirement 1.1: Questions loaded from Appwrite
+- ✅ Requirement 2.2: Submission created
+- ✅ Requirement 2.3: Answers saved
+- ✅ Requirement 3.1: Stripe Checkout Session created
+- ✅ Requirement 3.2: Customer redirected to Stripe (via URL)
+- ✅ Requirement 3.3: Submission status updated to 'paid'
+- ✅ Requirement 3.4: Webhook signature validated
+
+---
+
+## Testing Notes
+
+To test these endpoints manually:
+
+1. **Setup Environment:**
+   ```bash
+   cd server
+   cp ../.env.example .env
+   # Edit .env with real credentials
+   npm run bootstrap
+   ```
+
+2. **Start Server:**
+   ```bash
+   npm start
+   ```
+
+3. **Test GET /api/questions:**
+   ```bash
+   curl "http://localhost:3000/api/questions?productSlug=email-sorter"
+   ```
+
+4. **Test POST /api/submissions:**
+   ```bash
+   curl -X POST http://localhost:3000/api/submissions \
+     -H "Content-Type: application/json" \
+     -d '{"productSlug":"email-sorter","answers":{"email":"test@example.com","name":"Test User"}}'
+   ```
+
+5. **Test POST /api/checkout:**
+   ```bash
+   curl -X POST http://localhost:3000/api/checkout \
+     -H "Content-Type: application/json" \
+     -d '{"submissionId":"<submission-id-from-step-4>"}'
+   ```
+
+6. **Test Stripe Webhook:**
+   - Use Stripe CLI: `stripe listen --forward-to localhost:3000/stripe/webhook`
+   - Trigger test event: `stripe trigger checkout.session.completed`
--- a/docs/server/FRONTEND_VERIFICATION.md
+++ b/docs/server/FRONTEND_VERIFICATION.md
@@ -0,0 +1,358 @@
+# Frontend Integration Verification
+
+## Overview
+This document verifies that the frontend implementation in `public/index.html` correctly handles all form types, navigation, validation, and summary functionality as specified in Requirements 1.1, 1.2, 1.3, and 1.4.
+
+## Verification Results
+
+### ✅ Test 1: All Form Types Render Correctly
+
+**Requirement:** Stelle sicher dass index.html alle Formular-Typen korrekt rendert
+
+**Code Analysis:**
+
+1. **Text Input** (lines 62-64):
+```javascript
+default:
+    input = document.createElement('input');
+    input.type = question.type;
+```
+✅ Correctly creates text inputs with dynamic type attribute
+
+2. **Email Input** (lines 62-64):
+```javascript
+input.type = question.type;
+```
+✅ Email type is set from question.type property
+
+3. **Textarea** (lines 48-50):
+```javascript
+case 'textarea':
+    input = document.createElement('textarea');
+    input.rows = 4;
+```
+✅ Correctly creates textarea with 4 rows
+
+4. **Select (Single)** (lines 51-59):
+```javascript
+case 'select':
+    input = document.createElement('select');
+    const options = JSON.parse(question.optionsJson || '[]');
+    options.forEach(opt => {
+        const option = document.createElement('option');
+        option.value = opt;
+        option.textContent = opt;
+        input.appendChild(option);
+    });
+```
+✅ Correctly creates select dropdown with options from JSON
+
+5. **Multiselect** (lines 60-70):
+```javascript
+case 'multiselect':
+    input = document.createElement('select');
+    input.multiple = true;
+    input.size = 5;
+    const multiOptions = JSON.parse(question.optionsJson || '[]');
+    multiOptions.forEach(opt => {
+        const option = document.createElement('option');
+        option.value = opt;
+        option.textContent = opt;
+        input.appendChild(option);
+    });
+```
+✅ Correctly creates multiselect with multiple=true and size=5
+
+6. **Required Field Markers** (lines 38-40):
+```javascript
+const label = document.createElement('label');
+label.textContent = question.label + (question.required ? ' *' : '');
+```
+✅ Adds asterisk (*) to required field labels
+
+7. **Help Text** (lines 43-48):
+```javascript
+if (question.helpText) {
+    const help = document.createElement('small');
+    help.textContent = question.helpText;
+    help.style.display = 'block';
+    help.style.marginBottom = '5px';
+    div.appendChild(help);
+}
+```
+✅ Displays help text when available
+
+8. **Multiselect Value Restoration** (lines 105-113):
+```javascript
+if (question.type === 'multiselect' && Array.isArray(answers[question.key])) {
+    // For multiselect, select all previously selected options
+    Array.from(input.options).forEach(option => {
+        if (answers[question.key].includes(option.value)) {
+            option.selected = true;
+        }
+    });
+} else {
+    input.value = answers[question.key] || '';
+}
+```
+✅ Correctly restores multiselect values as selected options
+✅ Handles array values properly for multiselect
+
+**Validates: Requirements 1.1**
+
+---
+
+### ✅ Test 2: Navigation Between Steps Works
+
+**Requirement:** Teste Navigation zwischen Steps
+
+**Code Analysis:**
+
+1. **Initial Navigation State** (lines 85-91):
+```javascript
+function updateNavigation() {
+    const prevBtn = document.getElementById('prev-btn');
+    const nextBtn = document.getElementById('next-btn');
+    
+    prevBtn.style.display = currentStep > 1 ? 'inline-block' : 'none';
+    nextBtn.style.display = 'inline-block';
+    nextBtn.textContent = hasMoreSteps() ? 'Weiter' : 'Zur Zusammenfassung';
+}
+```
+✅ Previous button hidden on step 1
+✅ Next button always visible
+✅ Button text changes on last step
+
+2. **Step Detection** (lines 93-96):
+```javascript
+function hasMoreSteps() {
+    const maxStep = Math.max(...questions.map(q => q.step));
+    return currentStep < maxStep;
+}
+```
+✅ Correctly calculates if more steps exist
+
+3. **Previous Button Handler** (lines 155-159):
+```javascript
+document.getElementById('prev-btn').addEventListener('click', () => {
+    saveCurrentStep();
+    currentStep--;
+    renderStep();
+});
+```
+✅ Saves current answers before going back
+✅ Decrements step counter
+✅ Re-renders the form
+
+4. **Next Button Handler** (lines 161-167):
+```javascript
+document.getElementById('next-btn').addEventListener('click', () => {
+    if (!validateCurrentStep()) return;
+    
+    saveCurrentStep();
+    currentStep++;
+    renderStep();
+});
+```
+✅ Validates before proceeding
+✅ Saves current answers
+✅ Increments step counter
+✅ Re-renders the form
+
+5. **Answer Persistence** (lines 119-129):
+```javascript
+function saveCurrentStep() {
+    const stepQuestions = questions.filter(q => q.step === currentStep);
+    stepQuestions.forEach(question => {
+        const input = document.getElementById(question.key);
+        if (question.type === 'multiselect') {
+            answers[question.key] = Array.from(input.selectedOptions).map(opt => opt.value);
+        } else {
+            answers[question.key] = input.value;
+        }
+    });
+}
+```
+✅ Saves answers to global state
+✅ Handles multiselect specially (array of values)
+✅ Preserves answers when navigating
+
+6. **Answer Restoration** (lines 73-74):
+```javascript
+input.value = answers[question.key] || '';
+```
+✅ Restores previously entered values when returning to a step
+
+**Validates: Requirements 1.2**
+
+---
+
+### ✅ Test 3: Required Field Validation Works
+
+**Requirement:** Teste Validierung von Pflichtfeldern
+
+**Code Analysis:**
+
+1. **Validation Function** (lines 140-158):
+```javascript
+function validateCurrentStep() {
+    const stepQuestions = questions.filter(q => q.step === currentStep);
+    
+    for (const question of stepQuestions) {
+        const input = document.getElementById(question.key);
+        if (question.required) {
+            // For multiselect, check if at least one option is selected
+            if (question.type === 'multiselect') {
+                if (input.selectedOptions.length === 0) {
+                    alert(`Bitte wählen Sie mindestens eine Option für "${question.label}" aus.`);
+                    return false;
+                }
+            } else if (!input.value) {
+                alert(`Bitte füllen Sie das Feld "${question.label}" aus.`);
+                return false;
+            }
+        }
+    }
+    return true;
+}
+```
+✅ Checks all questions in current step
+✅ Validates required fields are not empty
+✅ Handles multiselect validation (checks selectedOptions.length)
+✅ Shows alert with field name
+✅ Returns false to prevent navigation
+
+2. **Validation Integration** (line 162):
+```javascript
+if (!validateCurrentStep()) return;
+```
+✅ Validation called before proceeding to next step
+✅ Navigation blocked if validation fails
+
+3. **Required Attribute** (line 72):
+```javascript
+input.required = question.required;
+```
+✅ Sets HTML5 required attribute on inputs
+
+**Validates: Requirements 1.3, 1.4**
+
+---
+
+### ✅ Test 4: Summary and Buy Button Work
+
+**Requirement:** Teste Zusammenfassung und Kaufen-Button
+
+**Code Analysis:**
+
+1. **Summary Display** (lines 131-147):
+```javascript
+function showSummary() {
+    document.getElementById('form-container').style.display = 'none';
+    document.getElementById('navigation').style.display = 'none';
+    document.getElementById('summary').style.display = 'block';
+    
+    const summaryContent = document.getElementById('summary-content');
+    summaryContent.innerHTML = '';
+    
+    questions.forEach(question => {
+        const div = document.createElement('div');
+        div.style.marginBottom = '10px';
+        div.innerHTML = `<strong>${question.label}:</strong> ${formatAnswer(answers[question.key])}`;
+        summaryContent.appendChild(div);
+    });
+}
+```
+✅ Hides form and navigation
+✅ Shows summary section
+✅ Displays all questions and answers
+✅ Formats answers appropriately
+
+2. **Answer Formatting** (lines 149-153):
+```javascript
+function formatAnswer(answer) {
+    if (Array.isArray(answer)) {
+        return answer.join(', ');
+    }
+    return answer || '-';
+}
+```
+✅ Handles array answers (multiselect)
+✅ Shows dash for empty answers
+
+3. **Buy Button Handler** (lines 169-191):
+```javascript
+document.getElementById('buy-btn').addEventListener('click', async () => {
+    try {
+        const submitResponse = await fetch('/api/submissions', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                productSlug: 'email-sorter',
+                answers: answers
+            })
+        });
+        
+        const submitData = await submitResponse.json();
+        submissionId = submitData.submissionId;
+        
+        const checkoutResponse = await fetch('/api/checkout', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ submissionId })
+        });
+        
+        const checkoutData = await checkoutResponse.json();
+        window.location.href = checkoutData.url;
+    } catch (error) {
+        console.error('Error during checkout:', error);
+        alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
+    }
+});
+```
+✅ Submits answers to backend
+✅ Creates checkout session
+✅ Redirects to Stripe
+✅ Handles errors gracefully
+
+**Validates: Requirements 1.1, 1.2, 1.3**
+
+---
+
+## Summary
+
+All frontend integration requirements have been verified:
+
+| Requirement | Status | Details |
+|-------------|--------|---------|
+| 1.1 - Load questions from Appwrite | ✅ PASS | `loadQuestions()` fetches from `/api/questions` |
+| 1.2 - Cache answers between steps | ✅ PASS | `saveCurrentStep()` and answer restoration work correctly |
+| 1.3 - Show summary after all steps | ✅ PASS | `showSummary()` displays all answers |
+| 1.4 - Validate required fields | ✅ PASS | `validateCurrentStep()` prevents navigation with empty required fields |
+
+### Additional Verified Features:
+- ✅ All 5 form types render correctly (text, email, textarea, select, multiselect)
+- ✅ Required field markers (*) display properly
+- ✅ Help text displays when available
+- ✅ Navigation buttons show/hide appropriately
+- ✅ Multiselect values saved as arrays
+- ✅ Multiselect values restored correctly when navigating back
+- ✅ Multiselect validation checks for at least one selected option
+- ✅ Summary formats arrays with commas
+- ✅ Buy button triggers submission and checkout flow
+- ✅ Error handling with user-friendly messages
+
+## Code Improvements Made
+
+During verification, the following improvements were implemented:
+
+1. **Multiselect Value Restoration**: Added proper logic to restore previously selected options in multiselect fields when navigating back to a step
+2. **Multiselect Validation**: Enhanced validation to check `selectedOptions.length` for multiselect fields instead of just checking `input.value`
+
+These improvements ensure that multiselect fields work correctly throughout the entire user journey.
+
+## Conclusion
+
+The frontend implementation in `public/index.html` is **complete and correct**. All form types render properly, navigation works bidirectionally with answer persistence, required field validation prevents invalid submissions, and the summary/checkout flow is fully functional.
+
+**Task 4 Status: ✅ COMPLETE**
--- a/docs/server/MANUAL_TEST_CHECKLIST.md
+++ b/docs/server/MANUAL_TEST_CHECKLIST.md
@@ -0,0 +1,101 @@
+# Manual Frontend Test Checklist
+
+## Prerequisites
+1. Ensure `.env` file is configured with valid Appwrite and Stripe credentials
+2. Run `node bootstrap-appwrite.mjs` to seed the database
+3. Start the server with `node index.mjs`
+4. Open browser to `http://localhost:3000`
+
+## Test Checklist
+
+### ✅ Test 1: Form Type Rendering
+- [ ] Page loads without errors
+- [ ] Step 1 displays with question fields
+- [ ] Text input fields render correctly
+- [ ] Email input field has email validation
+- [ ] Required fields show asterisk (*) marker
+- [ ] Help text displays below labels (if present)
+
+### ✅ Test 2: Select and Multiselect
+Navigate to step with select/multiselect fields:
+- [ ] Single select dropdown shows all options
+- [ ] Can select one option from dropdown
+- [ ] Multiselect shows as list box (size=5)
+- [ ] Can select multiple options in multiselect (Ctrl+Click)
+
+### ✅ Test 3: Textarea
+Navigate to step with textarea:
+- [ ] Textarea renders with multiple rows
+- [ ] Can type multi-line text
+- [ ] Text persists when navigating away and back
+
+### ✅ Test 4: Navigation - Forward
+- [ ] "Zurück" button is hidden on step 1
+- [ ] "Weiter" button is visible
+- [ ] Clicking "Weiter" advances to next step
+- [ ] Button text changes to "Zur Zusammenfassung" on last step
+
+### ✅ Test 5: Navigation - Backward
+- [ ] Fill some fields on step 1
+- [ ] Click "Weiter" to go to step 2
+- [ ] "Zurück" button is now visible
+- [ ] Click "Zurück" to return to step 1
+- [ ] Previously entered values are still present
+
+### ✅ Test 6: Required Field Validation
+- [ ] Leave a required field empty
+- [ ] Click "Weiter"
+- [ ] Alert message appears with field name
+- [ ] Navigation is blocked (stays on same step)
+- [ ] Fill the required field
+- [ ] Click "Weiter" again
+- [ ] Navigation proceeds to next step
+
+### ✅ Test 7: Answer Persistence
+- [ ] Fill out step 1 completely
+- [ ] Navigate to step 2
+- [ ] Fill out step 2 completely
+- [ ] Navigate back to step 1
+- [ ] Verify all step 1 answers are preserved
+- [ ] Navigate forward to step 2
+- [ ] Verify all step 2 answers are preserved
+
+### ✅ Test 8: Summary Display
+- [ ] Complete all steps with valid data
+- [ ] Click "Zur Zusammenfassung"
+- [ ] Form and navigation buttons disappear
+- [ ] Summary section appears
+- [ ] All questions and answers are displayed
+- [ ] Multiselect answers show as comma-separated list
+- [ ] Empty answers show as "-"
+- [ ] "Jetzt kaufen" button is visible
+
+### ✅ Test 9: Checkout Flow
+- [ ] Click "Jetzt kaufen" button
+- [ ] Browser redirects to Stripe checkout page
+- [ ] Stripe page shows correct product and price
+- [ ] (Optional) Complete test payment
+- [ ] (Optional) Verify webhook updates submission status
+
+### ✅ Test 10: Error Handling
+- [ ] Disconnect from internet or stop server
+- [ ] Try to load page or submit
+- [ ] Verify error message appears
+- [ ] Verify user-friendly error handling
+
+## Expected Results
+
+All checkboxes should be checked (✅) for the frontend to be considered fully functional.
+
+## Notes
+
+- This checklist validates Requirements 1.1, 1.2, 1.3, and 1.4
+- All form types (text, email, textarea, select, multiselect) must work
+- Navigation must be bidirectional with answer persistence
+- Validation must prevent invalid submissions
+- Summary must display all answers correctly
+- Checkout flow must redirect to Stripe
+
+## Test Status: ✅ READY FOR MANUAL TESTING
+
+The code has been verified through static analysis. Manual testing can be performed once the environment is configured.
--- a/docs/server/TASK_4_COMPLETION_SUMMARY.md
+++ b/docs/server/TASK_4_COMPLETION_SUMMARY.md
@@ -0,0 +1,131 @@
+# Task 4 Completion Summary
+
+## Task: Frontend-Integration vervollständigen
+
+**Status:** ✅ COMPLETED
+
+## What Was Done
+
+### 1. Code Review and Verification
+- Performed comprehensive static analysis of `public/index.html`
+- Verified all form types render correctly (text, email, textarea, select, multiselect)
+- Verified navigation logic works bidirectionally
+- Verified validation prevents invalid submissions
+- Verified summary displays all answers correctly
+
+### 2. Bug Fixes and Improvements
+
+#### Bug Fix 1: Multiselect Value Restoration
+**Problem:** When navigating back to a step with a multiselect field, previously selected values were not restored because the code used `input.value = answers[question.key]` which doesn't work for multiselect (expects array).
+
+**Solution:** Added proper multiselect restoration logic:
+```javascript
+if (question.type === 'multiselect' && Array.isArray(answers[question.key])) {
+    Array.from(input.options).forEach(option => {
+        if (answers[question.key].includes(option.value)) {
+            option.selected = true;
+        }
+    });
+} else {
+    input.value = answers[question.key] || '';
+}
+```
+
+#### Bug Fix 2: Multiselect Validation
+**Problem:** Validation checked `!input.value` which doesn't work for multiselect fields (always returns empty string even when options are selected).
+
+**Solution:** Added specific multiselect validation:
+```javascript
+if (question.type === 'multiselect') {
+    if (input.selectedOptions.length === 0) {
+        alert(`Bitte wählen Sie mindestens eine Option für "${question.label}" aus.`);
+        return false;
+    }
+} else if (!input.value) {
+    alert(`Bitte füllen Sie das Feld "${question.label}" aus.`);
+    return false;
+}
+```
+
+### 3. Documentation Created
+
+Created three comprehensive documentation files:
+
+1. **FRONTEND_VERIFICATION.md** - Detailed code analysis proving all requirements are met
+2. **MANUAL_TEST_CHECKLIST.md** - Step-by-step manual testing guide for when server is running
+3. **TASK_4_COMPLETION_SUMMARY.md** - This summary document
+
+## Requirements Validated
+
+| Requirement | Status | Validation Method |
+|-------------|--------|-------------------|
+| 1.1 - Load questions from Appwrite | ✅ PASS | Code review of `loadQuestions()` function |
+| 1.2 - Cache answers between steps | ✅ PASS | Code review of `saveCurrentStep()` and restoration logic |
+| 1.3 - Show summary after all steps | ✅ PASS | Code review of `showSummary()` function |
+| 1.4 - Validate required fields | ✅ PASS | Code review of `validateCurrentStep()` function |
+
+## All Form Types Verified
+
+- ✅ **Text Input** - Renders with `<input type="text">`
+- ✅ **Email Input** - Renders with `<input type="email">`
+- ✅ **Textarea** - Renders with `<textarea rows="4">`
+- ✅ **Select (Single)** - Renders with `<select>` and options from JSON
+- ✅ **Multiselect** - Renders with `<select multiple size="5">` and options from JSON
+
+## Navigation Verified
+
+- ✅ Previous button hidden on step 1
+- ✅ Previous button visible on steps 2+
+- ✅ Next button always visible
+- ✅ Next button text changes to "Zur Zusammenfassung" on last step
+- ✅ Answers persist when navigating backward
+- ✅ Answers persist when navigating forward
+- ✅ Multiselect selections properly restored
+
+## Validation Verified
+
+- ✅ Required fields show asterisk (*) marker
+- ✅ Empty required text/email/textarea fields trigger alert
+- ✅ Empty required select fields trigger alert
+- ✅ Empty required multiselect fields trigger alert (new fix)
+- ✅ Alert message includes field name
+- ✅ Navigation blocked until validation passes
+
+## Summary and Checkout Verified
+
+- ✅ Summary section displays after all steps
+- ✅ Form and navigation hidden in summary
+- ✅ All questions and answers displayed
+- ✅ Multiselect answers formatted as comma-separated list
+- ✅ Empty answers show as "-"
+- ✅ Buy button present and functional
+- ✅ Buy button submits to `/api/submissions`
+- ✅ Buy button creates checkout session via `/api/checkout`
+- ✅ Redirects to Stripe checkout URL
+- ✅ Error handling with user-friendly messages
+
+## Files Modified
+
+1. `public/index.html` - Fixed multiselect restoration and validation
+
+## Files Created
+
+1. `server/FRONTEND_VERIFICATION.md` - Comprehensive verification document
+2. `server/MANUAL_TEST_CHECKLIST.md` - Manual testing guide
+3. `server/TASK_4_COMPLETION_SUMMARY.md` - This summary
+4. `server/test-frontend.mjs` - Automated test script (for reference)
+
+## Next Steps
+
+The frontend is now fully functional and ready for integration testing. The next task (Task 5) will perform end-to-end testing with a live server and database.
+
+To manually test the frontend:
+1. Configure `.env` file with Appwrite and Stripe credentials
+2. Run `node bootstrap-appwrite.mjs` to seed the database
+3. Run `node index.mjs` to start the server
+4. Open `http://localhost:3000` in a browser
+5. Follow the checklist in `MANUAL_TEST_CHECKLIST.md`
+
+## Conclusion
+
+Task 4 is complete. All form types render correctly, navigation works bidirectionally with proper answer persistence, validation prevents invalid submissions, and the summary/checkout flow is fully functional. Two critical bugs related to multiselect handling were identified and fixed during verification.
--- a/docs/setup/APPWRITE_CORS_SETUP.md
+++ b/docs/setup/APPWRITE_CORS_SETUP.md
@@ -0,0 +1,111 @@
+# Appwrite CORS Setup - Schritt für Schritt
+
+## Problem
+Appwrite blockiert Requests von `https://emailsorter.webklar.com` weil nur `https://localhost` als Origin erlaubt ist.
+
+## Lösung: Platform in Appwrite hinzufügen
+
+### Schritt 1: Appwrite-Konsole öffnen
+1. Gehe zu: **https://appwrite.webklar.com**
+2. Logge dich ein
+
+### Schritt 2: Projekt öffnen
+1. Klicke auf dein **EmailSorter Projekt** (oder das Projekt, das du verwendest)
+
+### Schritt 3: Settings öffnen
+1. Klicke auf **Settings** im linken Menü
+2. Oder suche nach **"Platforms"** oder **"Web"** in den Einstellungen
+
+### Schritt 4: Platform hinzufügen
+1. Klicke auf **"Add Platform"** oder **"Create Platform"**
+2. Wähle **"Web"** als Platform-Typ
+
+### Schritt 5: Platform konfigurieren
+Fülle die Felder aus:
+
+- **Name:** `Production` (oder ein anderer Name)
+- **Hostname:** `emailsorter.webklar.com`
+- **Origin:** `https://emailsorter.webklar.com`
+
+**WICHTIG:** 
+- Verwende **https://** (nicht http://)
+- Kein Slash am Ende
+- Genau so wie oben geschrieben
+
+### Schritt 6: Speichern
+1. Klicke auf **"Create"** oder **"Save"**
+2. Warte 1-2 Minuten (Cache)
+
+### Schritt 7: Testen
+1. Gehe zu https://emailsorter.webklar.com
+2. Versuche dich einzuloggen
+3. Prüfe die Browser-Konsole (F12) - sollte keine CORS-Fehler mehr geben
+
+---
+
+## Alternative: Mehrere Origins
+
+Falls du mehrere Domains brauchst (z.B. localhost für Development und Production):
+
+1. Erstelle **zwei separate Platforms:**
+   - **Development:** Hostname: `localhost`, Origin: `http://localhost:5173`
+   - **Production:** Hostname: `emailsorter.webklar.com`, Origin: `https://emailsorter.webklar.com`
+
+2. Oder verwende **Wildcard** (falls von Appwrite unterstützt):
+   - Origin: `https://*.webklar.com`
+
+---
+
+## Troubleshooting
+
+### CORS-Fehler bleibt bestehen
+1. **Cache leeren:** Warte 2-3 Minuten nach dem Speichern
+2. **Browser-Cache:** Strg+Shift+R (Hard Refresh)
+3. **Prüfe Origin:** Muss **genau** `https://emailsorter.webklar.com` sein (kein Slash, kein Port)
+4. **Prüfe Appwrite-Version:** Manche Versionen haben die Platform-Einstellungen an einem anderen Ort
+
+### Platform-Option nicht sichtbar
+- In manchen Appwrite-Versionen heißt es **"Web"** statt "Platforms"
+- Suche nach **"Client"** oder **"SDK"** in den Settings
+- Prüfe die Appwrite-Dokumentation für deine Version
+
+### 404 oder 403 Fehler
+- Prüfe, ob die Appwrite-URL korrekt ist: `https://appwrite.webklar.com`
+- Prüfe, ob du die richtigen Berechtigungen hast
+- Prüfe, ob das Projekt existiert und aktiv ist
+
+---
+
+## Screenshots (Beispiel)
+
+Die Platform-Einstellungen sollten etwa so aussehen:
+
+```
+┌─────────────────────────────────────┐
+│ Add Platform                        │
+├─────────────────────────────────────┤
+│ Type: [Web ▼]                      │
+│                                     │
+│ Name: Production                   │
+│ Hostname: emailsorter.webklar.com   │
+│ Origin: https://emailsorter.webklar │
+│         .com                        │
+│                                     │
+│         [Cancel]  [Create]         │
+└─────────────────────────────────────┘
+```
+
+---
+
+## Nach dem Setup
+
+Nachdem du die Platform hinzugefügt hast:
+
+1. ✅ CORS-Fehler sollten verschwinden
+2. ✅ Login/Register sollte funktionieren
+3. ✅ API-Calls sollten durchgehen
+
+**Falls es immer noch nicht funktioniert:**
+- Prüfe die Browser-Konsole für genaue Fehlermeldungen
+- Prüfe die Appwrite-Logs (falls verfügbar)
+- Stelle sicher, dass der Backend-Server läuft (502-Fehler beheben)
--- a/docs/setup/APPWRITE_SETUP.md
+++ b/docs/setup/APPWRITE_SETUP.md
@@ -0,0 +1,97 @@
+# Appwrite Neu-Einrichtung - Schritt für Schritt
+
+## Schritt 1: Neues Projekt in Appwrite erstellen
+
+1. **Gehe zu Appwrite Dashboard:**
+   - Falls du cloud.appwrite.io nutzt: https://cloud.appwrite.io
+   - Falls du webklar.com nutzt: https://appwrite.webklar.com
+
+2. **Erstelle ein neues Projekt:**
+   - Klicke auf "Create Project"
+   - Name: `EmailSorter` (oder ein anderer Name)
+   - Kopiere die **Project ID** (wird angezeigt)
+
+## Schritt 2: API Key erstellen
+
+1. **Gehe zu Settings → API Credentials**
+2. **Klicke auf "Create API Key"**
+3. **Konfiguration:**
+   - Name: `EmailSorter Backend`
+   - Scopes: Wähle **alle Berechtigungen** (Full Access)
+   - Expiration: Optional (oder leer lassen für kein Ablaufdatum)
+4. **Kopiere den API Key** (wird nur einmal angezeigt!)
+
+## Schritt 3: Datenbank erstellen
+
+1. **Gehe zu Databases**
+2. **Klicke auf "Create Database"**
+3. **Konfiguration:**
+   - Database ID: `email_sorter_db` (oder ein anderer Name)
+   - Name: `EmailSorter Database`
+4. **Kopiere die Database ID**
+
+## Schritt 4: .env Dateien aktualisieren
+
+### server/.env aktualisieren:
+
+```env
+APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
+# ODER falls cloud.appwrite.io:
+# APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
+
+APPWRITE_PROJECT_ID=DEINE_NEW_PROJECT_ID_HIER
+APPWRITE_API_KEY=DEIN_NEW_API_KEY_HIER
+APPWRITE_DATABASE_ID=email_sorter_db
+```
+
+### client/.env aktualisieren:
+
+```env
+VITE_APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
+# ODER falls cloud.appwrite.io:
+# VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
+
+VITE_APPWRITE_PROJECT_ID=DEINE_NEW_PROJECT_ID_HIER
+```
+
+## Schritt 5: Bootstrap ausführen
+
+Nachdem du die .env Dateien aktualisiert hast:
+
+```powershell
+cd server
+npm run bootstrap:v2
+```
+
+Dies erstellt automatisch alle benötigten Collections:
+- `products`
+- `questions`
+- `submissions`
+- `answers`
+- `orders`
+- `email_accounts`
+- `email_stats`
+- `subscriptions`
+- `user_preferences`
+- `email_digests`
+
+## Schritt 6: Verifizierung
+
+Nach erfolgreichem Bootstrap solltest du sehen:
+- ✓ Database created/exists
+- ✓ Alle Collections wurden erstellt
+- ✓ Alle Attribute wurden hinzugefügt
+
+## Troubleshooting
+
+**Fehler: "Project not found"**
+- Prüfe, ob die PROJECT_ID korrekt ist
+- Prüfe, ob du den richtigen Endpoint verwendest
+
+**Fehler: "Unauthorized"**
+- Prüfe, ob der API_KEY korrekt ist
+- Stelle sicher, dass der API Key alle Berechtigungen hat
+
+**Fehler: "Database not found"**
+- Stelle sicher, dass die DATABASE_ID korrekt ist
+- Das Bootstrap-Skript erstellt die Datenbank automatisch, wenn sie nicht existiert
--- a/docs/setup/FAVICON_SETUP.md
+++ b/docs/setup/FAVICON_SETUP.md
@@ -0,0 +1,105 @@
+# Favicon Setup Anleitung
+
+Die Favicon-Dateien wurden erstellt. Um alle Formate zu generieren, folge diesen Schritten:
+
+## Erstellte Dateien
+
+✅ `favicon.svg` - Modernes SVG Favicon (bereits erstellt)
+✅ `apple-touch-icon.svg` - SVG für Apple Touch Icon (bereits erstellt)
+✅ `site.webmanifest` - Web App Manifest (bereits erstellt)
+
+## Noch zu erstellen (PNG/ICO)
+
+Du musst die folgenden PNG/ICO-Dateien aus dem SVG erstellen:
+
+### Option 1: Online Converter verwenden
+
+1. Gehe zu einem dieser Tools:
+   - https://realfavicongenerator.net/ (Empfohlen - generiert alle Formate)
+   - https://www.zenlytools.com/svg-to-ico
+   - https://svg-to-ico.org/
+
+2. Lade `favicon.svg` hoch
+
+3. Generiere folgende Dateien:
+   - `favicon.ico` (16x16, 32x32, 48x48)
+   - `favicon-16x16.png`
+   - `favicon-32x32.png`
+   - `apple-touch-icon.png` (180x180)
+   - `favicon-192x192.png` (für Web Manifest)
+   - `favicon-512x512.png` (für Web Manifest)
+
+4. Speichere alle generierten Dateien im `client/public/` Ordner
+
+### Option 2: Mit ImageMagick (Command Line)
+
+```bash
+# Installiere ImageMagick (falls nicht vorhanden)
+# Windows: choco install imagemagick
+# Mac: brew install imagemagick
+# Linux: sudo apt-get install imagemagick
+
+cd client/public
+
+# Erstelle PNG-Varianten
+magick favicon.svg -resize 16x16 favicon-16x16.png
+magick favicon.svg -resize 32x32 favicon-32x32.png
+magick apple-touch-icon.svg -resize 180x180 apple-touch-icon.png
+magick favicon.svg -resize 192x192 favicon-192x192.png
+magick favicon.svg -resize 512x512 favicon-512x512.png
+
+# Erstelle ICO (mehrere Größen)
+magick favicon.svg -define icon:auto-resize=16,32,48 favicon.ico
+```
+
+### Option 3: Mit Online Favicon Generator (Empfohlen)
+
+1. Gehe zu: https://realfavicongenerator.net/
+2. Klicke auf "Select your Favicon image"
+3. Lade `favicon.svg` hoch
+4. Konfiguriere die Optionen:
+   - iOS: Apple Touch Icon aktivieren
+   - Android Chrome: Manifest aktivieren
+   - Windows Metro: Optional
+5. Klicke auf "Generate your Favicons and HTML code"
+6. Lade das ZIP herunter
+7. Extrahiere alle Dateien in `client/public/`
+8. Kopiere die generierten `<link>` Tags in `index.html` (falls nötig)
+
+## Verifizierung
+
+Nach dem Erstellen aller Dateien:
+
+1. Starte den Dev-Server: `npm run dev`
+2. Öffne die Seite im Browser
+3. Prüfe den Browser-Tab - das Favicon sollte angezeigt werden
+4. Teste auf Mobile:
+   - iOS Safari: Zum Home-Bildschirm hinzufügen → Icon sollte erscheinen
+   - Android Chrome: Installiere als PWA → Icon sollte erscheinen
+
+## Dateien im public/ Ordner
+
+Nach Abschluss sollten folgende Dateien vorhanden sein:
+
+```
+client/public/
+├── favicon.svg ✅
+├── favicon.ico (zu erstellen)
+├── favicon-16x16.png (zu erstellen)
+├── favicon-32x32.png (zu erstellen)
+├── apple-touch-icon.png (zu erstellen)
+├── favicon-192x192.png (zu erstellen)
+├── favicon-512x512.png (zu erstellen)
+├── apple-touch-icon.svg ✅
+└── site.webmanifest ✅
+```
+
+## Browser-Kompatibilität
+
+- **Chrome/Edge**: Verwendet `favicon.svg` oder `favicon.ico`
+- **Firefox**: Verwendet `favicon.svg` oder `favicon.ico`
+- **Safari (Desktop)**: Verwendet `favicon.ico` oder PNG
+- **Safari (iOS)**: Verwendet `apple-touch-icon.png`
+- **Android Chrome**: Verwendet Icons aus `site.webmanifest`
+
+Die aktuelle Konfiguration in `index.html` unterstützt alle modernen Browser!
--- a/docs/setup/GOOGLE_OAUTH_SETUP.md
+++ b/docs/setup/GOOGLE_OAUTH_SETUP.md
@@ -0,0 +1,75 @@
+# Google OAuth Setup - Test Users hinzufügen
+
+## Problem
+Wenn du Google OAuth für Gmail verwendest, musst du während der Entwicklung **Test Users** hinzufügen, damit diese die App verwenden können.
+
+## Lösung: Test Users hinzufügen
+
+### Schritt 1: Google Cloud Console öffnen
+1. Gehe zu [console.cloud.google.com](https://console.cloud.google.com)
+2. Wähle dein Projekt aus
+
+### Schritt 2: OAuth Consent Screen öffnen
+1. Gehe zu **APIs & Services** → **OAuth consent screen**
+2. Scroll nach unten zu **Test users**
+
+### Schritt 3: Test Users hinzufügen
+1. Klicke auf **+ ADD USERS**
+2. Füge die E-Mail-Adressen hinzu, die die App verwenden sollen:
+   - Deine eigene E-Mail-Adresse
+   - E-Mail-Adressen von anderen Entwicklern/Test-Usern
+3. Klicke auf **ADD**
+
+### Schritt 4: Wichtig!
+- **Jede E-Mail-Adresse**, die Gmail verbinden möchte, **muss** als Test User hinzugefügt sein
+- Ohne Test User bekommst du den Fehler: `access_denied` oder `invalid_grant`
+
+## App veröffentlichen (für Produktion) ✅
+
+**Sobald die App veröffentlicht ist, müssen KEINE User mehr manuell hinzugefügt werden!**
+
+### Veröffentlichungsschritte:
+
+1. **Gehe zu OAuth consent screen**
+   - APIs & Services → OAuth consent screen
+
+2. **Klicke auf "PUBLISH APP"**
+   - Die App wechselt von "Testing" zu "In production"
+
+3. **Verifizierung (falls erforderlich)**
+   - Google kann zusätzliche Informationen anfordern
+   - Meist nur bei bestimmten Scopes oder vielen Nutzern nötig
+
+4. **Fertig!**
+   - ✅ Alle Google-Nutzer können die App jetzt verwenden
+   - ✅ Keine Test Users mehr nötig
+   - ✅ Keine manuelle E-Mail-Eingabe mehr erforderlich
+
+### Wichtig:
+
+- **Während der Entwicklung:** Test Users müssen manuell hinzugefügt werden
+- **Nach Veröffentlichung:** Alle können die App verwenden, keine manuelle Eingabe nötig!
+
+**⚠️ Hinweis:** Wenn du die App wieder auf "Testing" zurücksetzt, müssen wieder Test Users hinzugefügt werden.
+
+## Aktuelle Konfiguration prüfen
+
+Deine Redirect URI sollte sein:
+- Entwicklung: `http://localhost:3000/api/oauth/gmail/callback`
+- Produktion: `https://deine-domain.de/api/oauth/gmail/callback`
+
+Diese muss in **Credentials** → **OAuth 2.0 Client IDs** → **Authorized redirect URIs** eingetragen sein.
+
+## Troubleshooting
+
+**Fehler: "access_denied"**
+- → Test User nicht hinzugefügt
+- → Lösung: E-Mail als Test User hinzufügen
+
+**Fehler: "invalid_grant"**
+- → Redirect URI stimmt nicht überein
+- → Lösung: Redirect URI in Google Cloud Console prüfen
+
+**Fehler: "redirect_uri_mismatch"**
+- → Redirect URI in .env stimmt nicht mit Google Cloud Console überein
+- → Lösung: Beide prüfen und angleichen
--- a/docs/setup/SETUP_GUIDE.md
+++ b/docs/setup/SETUP_GUIDE.md
@@ -0,0 +1,373 @@
+# EmailSorter - Einrichtungsanleitung
+
+Diese Anleitung führt dich durch die komplette Einrichtung von EmailSorter.
+
+---
+
+## Inhaltsverzeichnis
+
+1. [Voraussetzungen](#voraussetzungen)
+2. [Appwrite einrichten](#1-appwrite-einrichten)
+3. [Stripe einrichten](#2-stripe-einrichten)
+4. [Google OAuth einrichten](#3-google-oauth-einrichten-gmail)
+5. [Microsoft OAuth einrichten](#4-microsoft-oauth-einrichten-outlook)
+6. [Mistral AI einrichten](#5-mistral-ai-einrichten)
+7. [Projekt starten](#6-projekt-starten)
+8. [Fehlerbehebung](#fehlerbehebung)
+
+---
+
+## Voraussetzungen
+
+- Node.js 18+ installiert
+- npm oder yarn
+- Git
+
+---
+
+## 1. Appwrite einrichten
+
+### 1.1 Account erstellen
+
+1. Gehe zu [cloud.appwrite.io](https://cloud.appwrite.io)
+2. Erstelle einen kostenlosen Account
+3. Erstelle ein neues Projekt (z.B. "EmailSorter")
+
+### 1.2 API Key erstellen
+
+1. Gehe zu **Settings** → **API Credentials**
+2. Klicke auf **Create API Key**
+3. Name: `EmailSorter Backend`
+4. Wähle **alle Berechtigungen** aus (Full Access)
+5. Kopiere den API Key
+
+### 1.3 Datenbank erstellen
+
+1. Gehe zu **Databases**
+2. Klicke auf **Create Database**
+3. Name: `email_sorter_db`
+4. Kopiere die **Database ID**
+
+### 1.4 Bootstrap ausführen
+
+```bash
+cd server
+npm run bootstrap:v2
+```
+
+Dies erstellt automatisch alle benötigten Collections:
+- `products`
+- `questions`
+- `submissions`
+- `answers`
+- `orders`
+- `email_accounts`
+- `email_stats`
+- `subscriptions`
+- `user_preferences`
+
+### 1.5 .env konfigurieren
+
+```env
+# server/.env
+APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
+APPWRITE_PROJECT_ID=deine_projekt_id
+APPWRITE_API_KEY=dein_api_key
+APPWRITE_DATABASE_ID=email_sorter_db
+```
+
+```env
+# client/.env
+VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
+VITE_APPWRITE_PROJECT_ID=deine_projekt_id
+```
+
+---
+
+## 2. Stripe einrichten
+
+### 2.1 Account erstellen
+
+1. Gehe zu [dashboard.stripe.com](https://dashboard.stripe.com)
+2. Erstelle einen Account
+3. Wechsle in den **Test Mode** (Toggle oben rechts)
+
+### 2.2 API Keys kopieren
+
+1. Gehe zu **Developers** → **API keys**
+2. Kopiere den **Secret key** (beginnt mit `sk_test_`)
+
+### 2.3 Produkte erstellen
+
+Gehe zu **Products** → **Add product**:
+
+#### Basic Plan
+- Name: `EmailSorter Basic`
+- Preis: `9.00 EUR` / Monat
+- Kopiere die **Price ID** (beginnt mit `price_`)
+
+#### Pro Plan
+- Name: `EmailSorter Pro`
+- Preis: `19.00 EUR` / Monat
+- Kopiere die **Price ID**
+
+#### Business Plan
+- Name: `EmailSorter Business`
+- Preis: `49.00 EUR` / Monat
+- Kopiere die **Price ID**
+
+### 2.4 Webhook einrichten
+
+1. Gehe zu **Developers** → **Webhooks**
+2. Klicke auf **Add endpoint**
+3. URL: `https://deine-domain.de/api/subscription/webhook`
+   - Für lokale Tests: Nutze [Stripe CLI](https://stripe.com/docs/stripe-cli)
+4. Events auswählen:
+   - `checkout.session.completed`
+   - `customer.subscription.updated`
+   - `customer.subscription.deleted`
+   - `invoice.payment_failed`
+   - `invoice.payment_succeeded`
+5. Kopiere das **Signing Secret** (beginnt mit `whsec_`)
+
+### 2.5 Lokaler Webhook-Test mit Stripe CLI
+
+```bash
+# Installieren
+# Windows: scoop install stripe
+# Mac: brew install stripe/stripe-cli/stripe
+
+# Login
+stripe login
+
+# Webhook forwarden
+stripe listen --forward-to localhost:3000/api/subscription/webhook
+```
+
+### 2.6 .env konfigurieren
+
+```env
+# server/.env
+STRIPE_SECRET_KEY=sk_test_...
+STRIPE_WEBHOOK_SECRET=whsec_...
+STRIPE_PRICE_BASIC=price_...
+STRIPE_PRICE_PRO=price_...
+STRIPE_PRICE_BUSINESS=price_...
+```
+
+---
+
+## 3. Google OAuth einrichten (Gmail)
+
+### 3.1 Google Cloud Projekt erstellen
+
+1. Gehe zu [console.cloud.google.com](https://console.cloud.google.com)
+2. Erstelle ein neues Projekt (oder wähle ein bestehendes)
+
+### 3.2 Gmail API aktivieren
+
+1. Gehe zu **APIs & Services** → **Library**
+2. Suche nach "Gmail API"
+3. Klicke auf **Enable**
+
+### 3.3 OAuth Consent Screen
+
+1. Gehe zu **APIs & Services** → **OAuth consent screen**
+2. Wähle **External**
+3. Fülle aus:
+   - App name: `EmailSorter`
+   - User support email: Deine E-Mail
+   - Developer contact: Deine E-Mail
+4. **Scopes** hinzufügen:
+   - `https://www.googleapis.com/auth/gmail.modify`
+   - `https://www.googleapis.com/auth/gmail.labels`
+   - `https://www.googleapis.com/auth/userinfo.email`
+5. **Test users** hinzufügen (während der Entwicklung)
+
+### 3.4 OAuth Credentials erstellen
+
+1. Gehe zu **APIs & Services** → **Credentials**
+2. Klicke auf **Create Credentials** → **OAuth client ID**
+3. Typ: **Web application**
+4. Name: `EmailSorter Web`
+5. **Authorized redirect URIs**:
+   - `http://localhost:3000/api/oauth/gmail/callback` (Entwicklung)
+   - `https://deine-domain.de/api/oauth/gmail/callback` (Produktion)
+6. Kopiere **Client ID** und **Client Secret**
+
+### 3.5 .env konfigurieren
+
+```env
+# server/.env
+GOOGLE_CLIENT_ID=xxx.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=GOCSPX-xxx
+GOOGLE_REDIRECT_URI=http://localhost:3000/api/oauth/gmail/callback
+```
+
+---
+
+## 4. Microsoft OAuth einrichten (Outlook)
+
+### 4.1 Azure App Registration
+
+1. Gehe zu [portal.azure.com](https://portal.azure.com)
+2. Suche nach "App registrations"
+3. Klicke auf **New registration**
+4. Name: `EmailSorter`
+5. Supported account types: **Accounts in any organizational directory and personal Microsoft accounts**
+6. Redirect URI: `Web` → `http://localhost:3000/api/oauth/outlook/callback`
+
+### 4.2 Client Secret erstellen
+
+1. Gehe zu **Certificates & secrets**
+2. Klicke auf **New client secret**
+3. Description: `EmailSorter Backend`
+4. Expires: `24 months`
+5. Kopiere den **Value** (wird nur einmal angezeigt!)
+
+### 4.3 API Permissions
+
+1. Gehe zu **API permissions**
+2. Klicke auf **Add a permission** → **Microsoft Graph** → **Delegated permissions**
+3. Füge hinzu:
+   - `Mail.ReadWrite`
+   - `User.Read`
+   - `offline_access`
+4. Klicke auf **Grant admin consent** (falls möglich)
+
+### 4.4 .env konfigurieren
+
+```env
+# server/.env
+MICROSOFT_CLIENT_ID=xxx-xxx-xxx
+MICROSOFT_CLIENT_SECRET=xxx
+MICROSOFT_REDIRECT_URI=http://localhost:3000/api/oauth/outlook/callback
+```
+
+---
+
+## 5. Mistral AI einrichten
+
+### 5.1 Account erstellen
+
+1. Gehe zu [console.mistral.ai](https://console.mistral.ai)
+2. Erstelle einen Account
+3. Gehe zu **API Keys**
+4. Klicke auf **Create new key**
+5. Kopiere den API Key
+
+### 5.2 .env konfigurieren
+
+```env
+# server/.env
+MISTRAL_API_KEY=dein_mistral_api_key
+```
+
+---
+
+## 6. Projekt starten
+
+### 6.1 Dependencies installieren
+
+```bash
+# Backend
+cd server
+npm install
+
+# Frontend
+cd ../client
+npm install
+```
+
+### 6.2 Environment Files erstellen
+
+```bash
+# Server
+cp server/env.example server/.env
+# Fülle die Werte aus!
+
+# Client
+cp client/env.example client/.env
+# Fülle die Werte aus!
+```
+
+### 6.3 Datenbank initialisieren
+
+```bash
+cd server
+npm run bootstrap:v2
+```
+
+### 6.4 Server starten
+
+```bash
+# Terminal 1 - Backend
+cd server
+npm run dev
+
+# Terminal 2 - Frontend
+cd client
+npm run dev
+```
+
+### 6.5 Öffnen
+
+- **Frontend**: http://localhost:5173
+- **Backend API**: http://localhost:3000
+- **API Docs**: http://localhost:3000
+
+---
+
+## Fehlerbehebung
+
+### "APPWRITE_PROJECT_ID is not defined"
+
+Stelle sicher, dass die `.env` Datei existiert und die Variablen gesetzt sind.
+
+### "Invalid OAuth redirect URI"
+
+Die Redirect URI in der OAuth-Konfiguration muss **exakt** mit der in der `.env` übereinstimmen.
+
+### "Rate limit exceeded"
+
+- Gmail: Max 10.000 Requests/Tag
+- Outlook: Max 10.000 Requests/App/Tag
+
+### "Mistral AI: Model not found"
+
+Prüfe, ob der API Key gültig ist und das Guthaben ausreicht.
+
+### "Stripe webhook signature invalid"
+
+- Nutze das korrekte Webhook Secret (`whsec_...`)
+- Bei lokalem Test: Nutze die Stripe CLI
+
+### Microsoft OAuth: "Client credential must not be empty"
+
+Stelle sicher, dass `MICROSOFT_CLIENT_ID` und `MICROSOFT_CLIENT_SECRET` gesetzt sind. Falls du Outlook nicht nutzen möchtest, kannst du diese leer lassen - der Server startet trotzdem.
+
+---
+
+## Checkliste
+
+- [ ] Appwrite Projekt erstellt
+- [ ] Appwrite API Key erstellt
+- [ ] Appwrite Database erstellt
+- [ ] Bootstrap ausgeführt (`npm run bootstrap:v2`)
+- [ ] Stripe Account erstellt
+- [ ] Stripe Produkte erstellt (Basic, Pro, Business)
+- [ ] Stripe Webhook eingerichtet
+- [ ] Google OAuth Credentials erstellt (optional)
+- [ ] Microsoft App Registration erstellt (optional)
+- [ ] Mistral AI API Key erstellt
+- [ ] Alle `.env` Dateien konfiguriert
+- [ ] Server startet ohne Fehler
+- [ ] Frontend startet ohne Fehler
+
+---
+
+## Support
+
+Bei Fragen oder Problemen:
+- GitHub Issues
+- support@emailsorter.de