# CLAUDE.md · Website Friseur-Team VK

Architekturfakten für Agenten und Entwickler. Gestaltung: `DESIGN.md`. Entscheidungen: `DECISIONS.md`.

## Überblick

- Statische Website für Friseur-Team VK (Kastanienallee 1, 21255 Tostedt), gebaut von Heidrich Digital.
- **Astro 5**, `output: 'static'`, Vanilla CSS, kein Framework, kein Tailwind. Zwei kleine Skripte (Menü-Escape, Anfrageformular, Vorher/Nachher-Regler).
- Vorschau: https://vk-friseur.heidrich-digital.de (noindex). Repo: `till/vk-friseur` auf git.heidrich-digital.de.
- Deployment: Coolify-App `n101smck3800u4ajngvm2yjg`, Build über `Dockerfile` (node:22-alpine baut, nginx:1.27-alpine liefert auf Port 80).

## Befehle

```bash
npm ci
npm run dev      # http://localhost:4321
npm run build    # nach dist/
```

## Struktur

```
src/
  data/site.ts        EINZIGE Quelle für Adresse, Telefon, Öffnungszeiten, Team, Preise, Anliegen, Endpunkte
  styles/tokens.css   Farben (OKLCH), Schrift, Skala, Abstände, Bewegung
  styles/global.css   Grundlage, Typo, Knöpfe, Layout-Helfer, Scroll-Einblendung
  styles/form.css     Formular-Bausteine (nur Anfrage-Seite)
  layouts/Base.astro  <head>, Meta, noindex, JSON-LD (HairSalon + Breadcrumb + seiteneigene), Header/Footer/Leiste
  components/         Header, Footer, MobileBar, Shot (Fotofläche), Reels, Rating, CtaBand, PageHero,
                      Steps, Faq, PriceList, LoyaltyCard, BeforeAfter, Hours, Pic, Icon, Logo, DraftNote
  scripts/anfrage.ts  Formularlogik (schrittweise, Prüfung, fetch, Bestätigung)
  pages/              index, brautservice, balayage-farbe, haarverlaengerung, team, leistungen-preise,
                      kundenkarte, anfrage/index, anfrage/danke, kontakt, impressum, datenschutz, 404
  assets/img, assets/logo   Ausgangsbilder, werden von astro:assets zu AVIF/WebP/JPG in mehreren Breiten
public/
  fonts/              Bodoni Moda + Archivo, selbst gehostet, beschnitten (LICENSE-FONTS.txt)
  robots.txt, llms.txt, og.jpg, favicon.svg, favicon-32.png, apple-touch-icon.png, logo-vk.png
deploy/security-headers.conf   CSP, HSTS, nosniff, Referrer-Policy, X-Robots-Tag
nginx.conf                     Caching, 301 alter Adressen, ohne Schrägstrich am Ende, 404
```

## Regeln

- Fakten nur in `src/data/site.ts` ändern. Footer, Kontakt, Impressum, Schema und Formular lesen von dort.
- Preise sind „ab“-Richtwerte (Platzhalter). Ein Wert in `priceGroups` ändert Preisliste und Premium-Seiten. Die Hinweise im Formular stehen in `anliegen[].hint` und müssen mitgezogen werden.
- Keine Inline-Styles und keine Inline-Skripte: Die CSP erlaubt nur `'self'`. Werte zur Laufzeit per `el.style.setProperty()` (CSSOM ist erlaubt). `build.inlineStylesheets: 'never'`, CSS als eine Datei (`cssCodeSplit: false`).
- Keine Fremdanfragen. Karten, Instagram, Google-Bewertungen sind nur Links. Neue Fremdquellen erfordern CSP- und Datenschutz-Änderung.
- Bilder immer über `Pic.astro` (astro:assets) mit `sizes`; Hero mit `eager`.
- Fehlende Arbeitsfotos über `Shot.astro` mit Motiv und Bildidee. Wenn Fotos kommen: Datei nach `src/assets/img/`, `Shot` durch `Pic` in `.frame` ersetzen (Bogen: Klasse `arch`).
- Texte: Stimme des Salons („wir“, „Sie“), konkret, keine Superlative, keine erfundenen Zahlen oder Zitate, keine Gedankenstriche.

## Anfrageformular

- `POST https://vk-karte.heidrich-digital.de/api/anfrage`, `multipart/form-data`. Feldnamen exakt wie im Backend: `anliegen, kundenstatus, haarlaenge, ausgangslage, wunsch, zeitraum, hochzeitsdatum, ort, personen, warteliste, preis_ok, name*, telefon*, email, rueckruf, datenschutz*, fotos (0 bis 3, je ≤ 6 MB), website (Honeypot)`.
- Ohne JS: normaler Submit, Backend antwortet mit 303 auf `/anfrage/danke`.
- Mit JS: Prüfung im Browser, `fetch` mit `Accept: application/json`, Antwort `{ok:true,id}` oder `{ok:false,error}`. Honeypot gefüllt: nichts senden, Bestätigung zeigen.
- Vorauswahl per `?anliegen=braut|balayage|verlaengerung|typveraenderung|schnitt|sonstiges`.
- Backend muss CORS für `https://vk-friseur.heidrich-digital.de` erlauben (und später für die Live-Domain).

## Livegang (Checkliste)

1. In `src/layouts/Base.astro` die Zeile `<meta name="robots" content="noindex, nofollow" />` löschen.
2. In `deploy/security-headers.conf` die Zeile `add_header X-Robots-Tag ...` löschen.
3. `site` in `astro.config.mjs` und `SITE_URL` in `src/data/site.ts` auf die Live-Domain setzen; `robots.txt` und `llms.txt` anpassen.
4. CORS und CSP (`connect-src`, `form-action`) für die Live-Domain prüfen.
5. Footer-Hinweis „Vorschau der neuen Website …“ in `Footer.astro` entfernen, Entwurfshinweise in Impressum und Datenschutz durch geprüfte Texte ersetzen.
6. 301-Weiterleitungen in `nginx.conf` mit der URL-Liste der Altseite abgleichen.
7. Preise, Öffnungszeiten, Team, WhatsApp-Nummer und Bildrechte vom Salon bestätigen lassen.