vk-friseur/CLAUDE.md

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

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.