# Hochzeitswebseite – Projekt-Briefing für neue Chat-Session

## Wichtigste Arbeitsregel
**Nimm immer nur die von mir hochgeladenen Dateien oder die finalen von dir bereit gestellten Dateien als Basis für Änderungen. Nie zwischengespeicherte Versionen.**

---

## Projekt-Übersicht
Browser-basierter Page-Builder für Hochzeitswebseiten.
- **Stack:** Vue 3 (CDN, kein Build-Step) + PHP 8.4 + JSON-Storage
- **CSS:** core-framework.css (eigenes Framework, kein Tailwind)
- **Deployment:** Self-Hosted, Hetzner, ein Paar pro Installation
- **Test-URL:** howe.27pixel.de (All-Inkl Subdomain)
- **Lokal:** howe.local (LocalWP, Windows)

Vollständiges Manifest: siehe MANIFEST_v04.md (wird separat hochgeladen)

---

## Ordnerstruktur
```
/
├── index.php                    → Öffentliche Frontend-Seite ✅
├── impressum.php                → Impressum (AUSSTEHEND)
├── datenschutz.php              → Datenschutz (AUSSTEHEND)
├── backstage/
│   └── index.php                → Editor-App (Login-geschützt) ✅
├── api/
│   ├── index.php                → REST-Router ✅
│   ├── Auth.php                 → Login/Logout/Session ✅
│   ├── Sections.php             → Abschnitte CRUD ✅
│   ├── Design.php               → Design-Einstellungen ✅
│   ├── Gallery.php              → Galerie Upload/Sort/Album/Delete ✅
│   ├── Guests.php               → Gästeliste CRUD + Gruppen ✅
│   ├── Rsvp.php                 → RSVP-Formular (öffentlich) ✅
│   ├── Languages.php            → Sprachkonfiguration ✅
│   ├── Settings.php             → Globale Einstellungen + Legal-Daten ✅
│   ├── Mailer.php               → Batch-Mailer ✅
│   ├── SmtpMailer.php           → SMTP-Wrapper (custom) ✅
│   ├── Honeypot.php             → IP-Sperr-Logik ✅
│   ├── Kuchenliste.php          → Kuchenliste CRUD ✅
│   ├── Geschenketisch.php       → Geschenketisch CRUD ✅
│   ├── Navigation.php           → Navigation CRUD ✅
│   ├── Media.php                → Media-Verwaltung ✅
│   └── Updater.php              → Version/Update ✅
├── config/
│   ├── credentials.php          → SMTP-Credentials
│   └── app.php                  → APP_URL, ASSETS_URL, API_URL Konstanten
├── data/
│   ├── config.json
│   ├── sections.json
│   ├── gallery.json
│   ├── guests.json
│   ├── languages.json
│   ├── legal.json               → Impressum + Datenschutz-Daten (war: impressum.json)
│   ├── mail_config.json         → SMTP-Config (nie über UI editierbar)
│   ├── mail_status.json         → Batch-Mail Fortschritt
│   └── blocked_ips.json
├── uploads/
│   ├── gallery/thumbs/
│   ├── sections/
│   └── user/
└── assets/
    ├── css/
    │   ├── core-framework.css
    │   ├── editor.css
    │   └── frontend.css ✅
    ├── js/
    │   ├── editor-app.js ✅
    │   └── frontend-app.js ✅
    ├── lang/
    │   ├── de.js
    │   └── en.js
    └── img/
        └── samples/             → Beispielbilder (jpg/png/webp + thumbs/)
```

---

## API – Wichtige Details

### URL-Schema
Alle API-Calls gehen an `/api/index.php/{resource}`, z.B.:
- `GET /api/index.php/sections`
- `POST /api/index.php/sections`
- `PUT /api/index.php/sections/{id}`

### apiBase in editor-app.js
```js
const apiBase = window.location.origin + '/api/index.php';
```

### APP_BASE für Asset-URLs
```js
const APP_BASE = window.HW_APP_BASE || window.location.origin;
// HW_APP_BASE wird von backstage/index.php injiziert:
// <script>window.HW_APP_BASE = '<?= APP_URL ?>';</script>
```

---

## Aktueller Stand (Phase 7 fast abgeschlossen)

### Was funktioniert ✅
- Login/Logout (webadmin + couple Rollen, kein Username-Feld)
- Dashboard-Tab: Einstellungen, Impressum-Card, Teilen, Editor-Sprache
- Sections-Tab: alle 20 Typen, Formfield-Engine, Gruppen, Repeater, adv-Props, Sortierung
- Design-Tab: Schriftwelt, Farbwelt mit Presets + „Eigene Farbwelt"
- Galerie-Tab: Upload, AVIF-Pipeline, Alben, Sortierung
- Gästeliste-Tab: CRUD, Gruppen, CSV-Export, Token-URL, meal_persons, Batch-Mail
- Sprachen-Tab: Multilang addon (3 aktive Sprachen: de/en/es)
- Media-Modal: Beispielbilder + Uploads, AVIF-Thumbnails, lazy loading
- Frontend: index.php + frontend-app.js + frontend.css (alle 20 Section-Typen, Token-URL, Passwortschutz, Countdown, Lightbox, Sprachumschalter)
- Globale Save/Discard-Logik (useEditorDraft Composable)
- Panel-Resize

### Ausstehend ❌
- `impressum.php` (wird gerade gebaut – AKTUELLER TASK)
- `datenschutz.php` (wird gerade gebaut – AKTUELLER TASK)
- `data/legal.json` (umbenennen von impressum.json + hosting_provider Feld)
- Phase 8: api/setup, api/status unklar ob implementiert
- Phase 9: CSRF, Rate-Limiting RSVP

---

## Aktueller Task (läuft)
**Impressum + Datenschutz Seiten (Phase 7 Abschluss)**

Plan: `data/impressum.json` → `data/legal.json` + `hosting_provider` Feld.
API-Endpunkt bleibt `/api/impressum`.
`impressum.php` + `datenschutz.php` als PHP-Templates (statisch, kein API-Push).
Datenschutz: DSGVO Art. 13 Standardtext, Platzhalter aus `legal.json` + `config.json`.

---

## Bekannte Besonderheiten / Fixes die drin sein müssen
1. **APP_BASE** – nie `window.HW_APP_BASE` direkt im Vue-Template. Immer als Variable aus `setup()` returnen oder `absUrl()` nutzen.
2. **editorDraft** – `_editorDraft` ist module-level reactive. In HwPanel als `const editorDraft = _editorDraft` aliased (Vue erlaubt keine `_`-Präfixe im return).
3. **onTabSwitch** – referenziert `_editorDraft` direkt (module-scope), nicht den Alias.
4. **isCustom** – `computed(() => design.preset === 'custom')` in DesignTab.setup(), im return exponiert.
5. **font-size in :where()** – font-size-Options-CSS immer in `:where()` wickeln.
6. **Grid-Utilities** – `.grid-N` + `.grid-1--on-m` statt eigenem Grid-CSS und @media-Blöcken.
7. **adv:true** – nur für Layout-Props (min_height, padding, text_align), nicht für element-direkte Props.
8. **last:true** – Gruppen mit last:true kommen nach ungrouped-Feldern; adv-Gruppe immer last:true.
9. **colorToRgba** statt hexToRgba – unterstützt CSS-Variablen als Farbeingabe.
10. **hw-btn/hw-btn--primary** für `<a>`-Links; core button-Klassen für `<button>`.
11. **SMTP-Config** (mail_config.json) ist niemals über das Paar-UI editierbar.

### Vue CDN
```html
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
```

---

## Dateien die zu Beginn der neuen Session hochgeladen werden sollten
- `MANIFEST_v04.md`
- `assets/js/editor-app.js` (aktuellste Version)
- `assets/css/editor.css` (aktuellste Version)
- `assets/css/core-framework.css`
- `api/index.php`
- je nach Task: relevante PHP-Dateien, frontend-app.js, frontend.css

---

## Tech-Konventionen
- PHP 8.4, `declare(strict_types=1)`, JSON atomar schreiben (tmp + rename + LOCK_EX)
- Vue 3 CDN, Plain Objects (keine .vue SFC), Composables für geteilte Logik
- BEM-Präfix `hw-`, nur Framework-Tokens (`--space-*`, `--text-*`, `--primary` etc.)
- Kein Tailwind, kein inline-style außer dynamisch berechnete Werte
- Hugeicons via CDN: `<i class="hgi-stroke hgi-{name}"></i>`
- SortableJS via CDN für Drag & Drop
