docs(frontend): update to use production API, DB, SEO and consent

- Change all API URLs from pl.c2sgmbh.de (dev) to cms.c2sgmbh.de (prod)
- Add environment configuration section with production endpoints
- Add explanation why production data is used for development
- Add SEO integration section with production data examples
- Update Cookie-Consent section for production API
- Add Videos, Timelines, Workflows to API endpoints
- Add CORS configuration note
- Update tenant-specific features for current state

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

docs/anleitungen/FRONTEND.md

@@ -1,21 +1,53 @@
 # Frontend-Entwicklung - Payload CMS Multi-Tenant
 
 > **Server:** sv-frontend (LXC 704) - 10.10.181.104
-> **Backend API:** https://pl.c2sgmbh.de/api
+> **Backend API:** https://cms.c2sgmbh.de/api (Production)
 
 ## Übersicht
 
 Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS als Headless CMS über die REST-API.
 
+**Wichtig:** Die Frontend-Entwicklung verwendet die **Produktions-API und -Datenbank**, um mit echten Inhalten zu arbeiten. SEO-Einstellungen und Cookie-Consent-Konfigurationen werden ebenfalls aus der Produktionsumgebung geladen.
+
+---
+
+## Umgebungskonfiguration
+
+### Environment Variables (.env.local)
+
+```env
+# API-Endpunkte (PRODUKTION)
+NEXT_PUBLIC_PAYLOAD_URL=https://cms.c2sgmbh.de
+NEXT_PUBLIC_API_URL=https://cms.c2sgmbh.de/api
+
+# Analytics (optional)
+NEXT_PUBLIC_UMAMI_HOST=https://analytics.c2sgmbh.de
+NEXT_PUBLIC_UMAMI_WEBSITE_ID=<website-id>
+
+# Tenant-Konfiguration (je nach Projekt)
+NEXT_PUBLIC_TENANT_ID=4
+NEXT_PUBLIC_TENANT_SLUG=c2s
+```
+
+### Warum Production-Daten?
+
+| Aspekt | Grund |
+|--------|-------|
+| **Content** | Echte Inhalte für realistische Entwicklung |
+| **SEO** | Produktions-Meta-Tags und Structured Data |
+| **Cookie-Consent** | Live Cookie-Konfigurationen (DSGVO-relevant) |
+| **Media** | Produktions-Bilder mit allen Größen |
+| **Consistency** | Keine Sync-Probleme zwischen Dev/Prod |
+
 ---
 
 ## API-Dokumentation
 
 | Ressource | URL |
 |-----------|-----|
-| **Swagger UI** | https://pl.c2sgmbh.de/api/docs |
+| **Swagger UI** | https://cms.c2sgmbh.de/api/docs |
-| **OpenAPI JSON** | https://pl.c2sgmbh.de/api/openapi.json |
+| **OpenAPI JSON** | https://cms.c2sgmbh.de/api/openapi.json |
-| **REST API Base** | https://pl.c2sgmbh.de/api |
+| **REST API Base** | https://cms.c2sgmbh.de/api |
 
 ---
 
@@ -25,6 +57,7 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS
 
 - [ ] **Block-Komponenten entwickeln**
   - [ ] Hero Block
+  - [ ] Hero Slider Block
   - [ ] Text Block
   - [ ] Image Text Block
   - [ ] Card Grid Block
@@ -38,6 +71,9 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS
   - [ ] Testimonials Block
   - [ ] Newsletter Block
   - [ ] Process Steps Block
+  - [ ] FAQ Block
+  - [ ] Team Block
+  - [ ] Services Block
 
 - [ ] **Newsletter-Anmelde-Formular**
   - API: `POST /api/newsletter/subscribe`
@@ -45,7 +81,7 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS
   - Felder: email, firstName (optional), tenantId, source
 
 - [ ] **Cookie-Banner implementieren**
-  - Cookie Configurations aus API laden
+  - Cookie Configurations aus Production-API laden
   - Consent-Logs an Backend senden
   - DSGVO-konform mit Opt-In
 
@@ -57,9 +93,9 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS
   - Unterstützte Locales: `de` (default), `en`
 
 - [ ] **SEO-Integration**
-  - Meta-Tags aus Pages/Posts
+  - Meta-Tags aus Pages/Posts (Production)
   - Structured Data (JSON-LD)
-  - Sitemap: https://pl.c2sgmbh.de/sitemap.xml
+  - Sitemap: https://cms.c2sgmbh.de/sitemap.xml
 
 - [ ] **Suche implementieren**
   - API: `GET /api/search?q=...&locale=de`
@@ -69,26 +105,26 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS
 ### Tenant-spezifische Features
 
 #### porwoll.de
-- [ ] Immobilien-Listing
+- [ ] Portfolio-Galerie (Fotografie)
-- [ ] Objektsuche mit Filtern
+- [ ] Buchungsformular
-- [ ] Kontaktformular mit Objekt-Referenz
+- [ ] Before/After Bildvergleich
 
 #### complexcaresolutions.de (C2S)
 - [ ] Team-Übersicht
 - [ ] Leistungs-Seiten
+- [ ] Zertifizierungen
 - [ ] Karriere-Seite mit Stellenangeboten
 
-#### gunshin.de (Fotografin-Portfolio)
+#### gunshin.de (Game Development)
-- [ ] Portfolio-Galerie
+- [ ] Projekt-Galerie
-  - API: `GET /api/portfolios?where[tenant][equals]=5`
+  - API: `GET /api/projects?where[tenant][equals]=5`
-  - Kategorien: `GET /api/portfolio-categories`
+- [ ] Portfolio-Seiten
-- [ ] Projekt-Detailseiten mit Lightbox
 - [ ] Referenzen-Slider
 
 #### zweitmein.ng
-- [ ] Produkt-Übersicht (falls E-Commerce)
 - [ ] FAQ-Sektion
 - [ ] Preistabellen
+- [ ] Kontaktformular
 
 ---
 
@@ -107,14 +143,18 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS
 | FAQs | `GET /api/faqs` | FAQ-Einträge |
 | Portfolios | `GET /api/portfolios` | Portfolio-Projekte |
 | Media | `GET /api/media` | Medien/Bilder |
+| Videos | `GET /api/videos` | Video-Bibliothek |
+| Timelines | `GET /api/timelines` | Chronologische Events |
+| Workflows | `GET /api/workflows` | Prozess-Darstellungen |
 
-### Globals
+### Globals (SEO & Settings aus Production)
 
 | Global | Endpoint | Beschreibung |
 |--------|----------|--------------|
-| Site Settings | `GET /api/globals/site-settings` | Logo, Name, SEO |
+| Site Settings | `GET /api/globals/site-settings` | Logo, Name, Kontakt |
 | Navigation | `GET /api/globals/navigation` | Menü-Struktur |
-| SEO Settings | `GET /api/globals/seo-settings` | Default SEO |
+| SEO Settings | `GET /api/globals/seo-settings` | Default SEO (Production) |
+| Privacy Policy | `GET /api/globals/privacy-policy-settings` | Datenschutz |
 
 ### Spezielle Endpoints
 
@@ -123,6 +163,8 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS
 | `/api/search` | GET | Volltextsuche |
 | `/api/search/suggestions` | GET | Auto-Complete |
 | `/api/newsletter/subscribe` | POST | Newsletter-Anmeldung |
+| `/api/timelines` | GET | Timeline-Daten |
+| `/api/workflows` | GET | Workflow-Daten |
 
 ---
 
@@ -132,10 +174,13 @@ Alle Collection-Anfragen sollten nach Tenant gefiltert werden:
 
 ```typescript
 // Beispiel: Posts für Tenant "c2s" (ID: 4)
-fetch('https://pl.c2sgmbh.de/api/posts?where[tenant][equals]=4&locale=de')
+fetch('https://cms.c2sgmbh.de/api/posts?where[tenant][equals]=4&locale=de')
 
 // Beispiel: Pages für Tenant "gunshin" (ID: 5)
-fetch('https://pl.c2sgmbh.de/api/pages?where[tenant][equals]=5&locale=de')
+fetch('https://cms.c2sgmbh.de/api/pages?where[tenant][equals]=5&locale=de')
+
+// Beispiel: SEO-Settings (Global, kein Tenant-Filter)
+fetch('https://cms.c2sgmbh.de/api/globals/seo-settings')
 ```
 
 ### Tenant-IDs
@@ -181,10 +226,10 @@ Unterstützte Locales: `de` (default), `en`
 
 ```typescript
 // Deutsch (default)
-fetch('https://pl.c2sgmbh.de/api/posts?locale=de')
+fetch('https://cms.c2sgmbh.de/api/posts?locale=de')
 
 // Englisch
-fetch('https://pl.c2sgmbh.de/api/posts?locale=en')
+fetch('https://cms.c2sgmbh.de/api/posts?locale=en')
 
 // Fallback: Wenn EN nicht vorhanden, wird DE zurückgegeben
 ```
@@ -196,7 +241,7 @@ fetch('https://pl.c2sgmbh.de/api/posts?locale=en')
 ### Anmeldung
 
 ```typescript
-const response = await fetch('https://pl.c2sgmbh.de/api/newsletter/subscribe', {
+const response = await fetch('https://cms.c2sgmbh.de/api/newsletter/subscribe', {
   method: 'POST',
   headers: { 'Content-Type': 'application/json' },
   body: JSON.stringify({
@@ -219,18 +264,25 @@ const response = await fetch('https://pl.c2sgmbh.de/api/newsletter/subscribe', {
 
 ---
 
-## Cookie-Consent
+## Cookie-Consent (Production-Daten)
 
 ### Konfiguration laden
 
 ```typescript
-const config = await fetch('https://pl.c2sgmbh.de/api/cookie-configurations?where[tenant][equals]=4')
+// Cookie-Konfiguration aus Production laden
+const config = await fetch('https://cms.c2sgmbh.de/api/cookie-configurations?where[tenant][equals]=4')
+  .then(r => r.json())
+
+// config.docs enthält:
+// - Kategorien (necessary, analytics, marketing, etc.)
+// - Cookie-Details pro Kategorie
+// - Texte für Banner (lokalisiert)
 ```
 
 ### Consent loggen
 
 ```typescript
-await fetch('https://pl.c2sgmbh.de/api/consent-logs', {
+await fetch('https://cms.c2sgmbh.de/api/consent-logs', {
   method: 'POST',
   headers: { 'Content-Type': 'application/json' },
   body: JSON.stringify({
@@ -245,12 +297,49 @@ await fetch('https://pl.c2sgmbh.de/api/consent-logs', {
 
 ---
 
+## SEO-Integration (Production-Daten)
+
+### Global SEO-Settings
+
+```typescript
+// SEO-Defaults aus Production laden
+const seoSettings = await fetch('https://cms.c2sgmbh.de/api/globals/seo-settings')
+  .then(r => r.json())
+
+// Enthält:
+// - defaultTitle, titleTemplate
+// - defaultDescription
+// - defaultImage (OG-Image)
+// - robotsDefault
+```
+
+### Page-spezifische SEO
+
+```typescript
+// SEO-Daten aus Page laden
+const page = await fetch('https://cms.c2sgmbh.de/api/pages?where[slug][equals]=about&where[tenant][equals]=4')
+  .then(r => r.json())
+
+// page.docs[0].meta enthält:
+// - title, description
+// - image (OG-Image Override)
+// - noIndex, noFollow
+```
+
+### Sitemap
+
+Die Sitemap wird automatisch von Payload generiert:
+- **URL:** https://cms.c2sgmbh.de/sitemap.xml
+- Enthält alle publizierten Pages und Posts
+
+---
+
 ## Kontaktformular
 
 Formular-Submissions werden über die Forms-Collection verarbeitet:
 
 ```typescript
-await fetch('https://pl.c2sgmbh.de/api/form-submissions', {
+await fetch('https://cms.c2sgmbh.de/api/form-submissions', {
   method: 'POST',
   headers: { 'Content-Type': 'application/json' },
   body: JSON.stringify({
@@ -272,14 +361,14 @@ Falls User-Authentifizierung benötigt wird:
 
 ```typescript
 // Login
-const { token, user } = await fetch('https://pl.c2sgmbh.de/api/users/login', {
+const { token, user } = await fetch('https://cms.c2sgmbh.de/api/users/login', {
   method: 'POST',
   headers: { 'Content-Type': 'application/json' },
   body: JSON.stringify({ email, password })
 }).then(r => r.json())
 
 // Authentifizierte Requests
-fetch('https://pl.c2sgmbh.de/api/...', {
+fetch('https://cms.c2sgmbh.de/api/...', {
   headers: { 'Authorization': `JWT ${token}` }
 })
 ```
@@ -293,7 +382,9 @@ fetch('https://pl.c2sgmbh.de/api/...', {
 Die Payload-Typen können aus dem Backend exportiert werden:
 
 ```bash
-# Auf dem Payload-Server
+# Auf dem Payload-Server (Production)
+ssh payload@162.55.85.18
+cd ~/payload-cms
 pnpm payload generate:types
 
 # Datei: src/payload-types.ts
@@ -316,14 +407,60 @@ Diese Datei kann ins Frontend-Projekt kopiert werden für typsichere API-Calls.
 - TTL: 60 Sekunden für Suche
 - Cache wird bei Content-Änderungen invalidiert
 
+### CORS
+
+Die Production-API erlaubt Requests von:
+- `*.porwoll.tech` (Development)
+- `porwoll.de`, `complexcaresolutions.de`, `gunshin.de` (Production)
+
+---
+
+## Development Server (sv-frontend)
+
+### SSH-Zugang
+
+```bash
+ssh frontend@10.10.181.104
+```
+
+### Projekt starten
+
+```bash
+cd ~/frontend.porwoll.de
+pnpm dev
+# Läuft auf Port 3000 → https://porwoll-dev.porwoll.tech
+```
+
+### AI-Tools
+
+```bash
+claude      # Claude Code CLI
+codex       # Codex CLI
+gemini      # Gemini CLI
+```
+
+### Service-Management
+
+```bash
+# Systemd Service starten
+systemctl start frontend-porwoll
+
+# Service stoppen
+systemctl stop frontend-porwoll
+
+# Logs anzeigen
+journalctl -u frontend-porwoll -f
+```
+
 ---
 
 ## Ressourcen
 
 - **Payload CMS Docs:** https://payloadcms.com/docs
-- **API-Dokumentation:** https://pl.c2sgmbh.de/api/docs
+- **API-Dokumentation:** https://cms.c2sgmbh.de/api/docs
-- **Backend-Repository:** https://github.com/c2s-admin/cms.c2sgmbh.git
+- **Backend-Repository:** https://github.com/complexcaresolutions/cms.c2sgmbh.git
+- **Analytics:** https://analytics.c2sgmbh.de
 
 ---
 
-*Erstellt: 11.12.2025*
+*Letzte Aktualisierung: 18.12.2025*