Haarverlängerung
+Für mehr Länge, zum Beispiel nach einem zu kurzen Schnitt oder für einen besonderen Anlass. Die Strähnen werden farblich an Ihr Haar angepasst.
+ab 650 €*
+diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..6b989d9 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,6 @@ +node_modules +dist +.astro +.git +*.md +!README.md diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..b25bb45 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,68 @@ +# 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
, 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 `` 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. diff --git a/DECISIONS.md b/DECISIONS.md new file mode 100644 index 0000000..bd4851f --- /dev/null +++ b/DECISIONS.md @@ -0,0 +1,23 @@ +# DECISIONS.md + +Entscheidungen mit Begründung. Neueste oben. + +## 2026-10-09 · Neuaufbau der Website (ersetzt Juni-Entwurf) + +**Ziel:** Portfolio und hochwertigere Kundschaft statt mehr Masse. Der Salon ist oft ausgebucht und hat 4,9 Sterne bei 193 Google-Bewertungen. + +1. **Keine Online-Buchung, vorqualifizierte Anfrage.** Der Salon will e-cut als Terminbuch behalten. Das Formular fragt Anliegen, Haar, Fotos, Zeitraum, bei Braut Datum/Ort/Personen und Rückrufzeit ab; der Salon ruft zurück und trägt selbst ein. Der Juni-Stand mit e-cut-Buchungsanbindung wurde entfernt. +2. **Preisrahmen im Formular sichtbar** plus Häkchen „Preisrahmen gesehen“. Filtert reine Preisanfragen, ohne Pflichtfeld zu sein (das Backend erwartet es optional). +3. **Warteliste als Häkchen** („Ich kann auch kurzfristig“) statt eigener Seite: nutzt Absagen, ohne einen zweiten Prozess zu bauen. +4. **Telefon und WhatsApp für Bestandskundschaft, Anfrage für Neukundschaft.** Mobile Leiste unten: „Anrufen“ und „Anfragen“; auf Anfrage- und Kontaktseite „Anrufen“ und „WhatsApp“. +5. **Hero-Satz „Schön von außen, glücklich von innen.“** Er steht im Salon auf dem Aufsteller (Foto salon-innen-2) und stammt damit vom Salon, nicht von uns. Ersetzt „Für Ihre Haare das Beste“. +6. **Schriften Bodoni Moda + Archivo, selbst gehostet.** Bodoni für den Beauty-Magazin-Charakter, Archivo, weil die schmalen Schnitte die Logo-Groteske aufgreifen. Beschnitten auf Latin-1 und genutzte Achsen: 109 KB für drei Dateien, zwei davon vorgeladen. +7. **Bogen und Wandpaneel als einzige Motive**, beide aus der Architektur des Salons abgeleitet. Keine Karten-Raster. +8. **Fotoflächen statt Stockfotos.** Jede Fläche nennt Motiv und Bildidee und ist damit die Shotliste fürs Shooting. +9. **Keine erfundenen Bewertungstexte.** Nur 4,9 / 193 mit Link aufs Google-Profil. `aggregateRating` bewusst nicht im Schema (Richtlinien zu selbst bereitgestellten Bewertungen). +10. **Keine Fremdanfragen, kein Cookie-Banner nötig.** Karten nur als Link (Google Maps, Apple Karten), keine Einbettung. CSP nur `'self'` plus `vk-karte.heidrich-digital.de` für Formular. +11. **Strenge CSP ohne `'unsafe-inline'`.** Dafür CSS als eine externe Datei (`cssCodeSplit: false`, 10 KB gzip) und keine Inline-Styles. +12. **Preise als „ab“-Richtwerte mit Fußnote.** Platzhalter, bis der Salon echte Preise liefert. Werte bewusst moderat und in `src/data/site.ts` zentral. +13. **Noindex doppelt** (Meta und `X-Robots-Tag`), `robots.txt` erlaubt Crawling, damit das Noindex gelesen wird. +14. **Impressum und Datenschutz als ehrliche Entwürfe** mit sichtbarem Hinweis „vor Livegang prüfen“. Steuernummer aus dem alten Impressum nicht übernommen (nicht Pflicht); Hinweis auf die abgeschaltete EU-OS-Plattform entfernt. +15. **Teamzahl 8 laut Inhaltsliste**, obwohl auf dem Gruppenfoto mehr Personen zu sehen sind. Vom Salon bestätigen lassen. diff --git a/DESIGN.md b/DESIGN.md new file mode 100644 index 0000000..a293a1f --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,68 @@ +# DESIGN.md · Friseur-Team VK + +Gestaltungsregeln für die Website. Die Tokens stehen in `src/styles/tokens.css`; diese Datei erklärt, warum sie so sind. + +## Haltung + +Ruhiges Premium, wie ein gutes Magazin über einen echten Salon. Hell, handwerklich, selbstbewusst. Die Seite soll Menschen ansprechen, die gezielt für Brautstyling, Balayage und Great Lengths kommen, und Stammkundschaft den kurzen Weg zum Telefon lassen. + +Szene: Eine Frau Anfang dreißig sitzt abends auf dem Sofa, das Handy in der Hand, und vergleicht Salons für ihre Hochzeit im nächsten Sommer. Daraus folgt: helles Thema, große Bilder, kurze Wege zu Preis und Anfrage, nichts, was nach Rabatt aussieht. + +Drei Wörter für die Marke: **hell, präzise, nahbar**. + +## Farbe + +Alle Farben stammen aus dem Logo und aus dem Salon selbst (weiße Räume, blaue Wandpaneele). Strategie: **Restrained mit einer Committed-Fläche pro Seite**. Grund ist Papier-Weiß, Petrol trägt Akzente und genau eine vollflächige Zone (Anfrage-Band am Seitenende). + +| Rolle | Token | OKLCH | Hex (Quelle) | Einsatz | +|---|---|---|---|---| +| Anthrazit | `--c-anthrazit` | `oklch(33.8% 0.012 140.5)` | #343933 | Text, Footer | +| Petrol | `--c-petrol` | `oklch(50.7% 0.105 234)` | #036E98 | Links, Knöpfe, Akzentwörter, Anfrage-Band | +| Hellblau | `--c-hellblau` | `oklch(64.9% 0.076 224.9)` | #5899B2 | nur Deko, nie für Text auf Weiß (3,2:1) | +| Silbergrau | `--c-silber` | `oklch(71.1% 0.009 225.1)` | #9CA3A6 | Rahmen, Formularränder | +| Nebelgrau | `--c-nebel` | `oklch(88.4% 0.008 216.6)` | #D3DADC | Bildgrund, Flächen | +| Papier | `--c-papier` | `oklch(98.7% 0.003 220)` | abgeleitet | Seitengrund, kein reines Weiß | +| Petrol tief | `--c-petrol-tief` | `oklch(36% 0.075 236)` | abgeleitet | Hover, Wandpaneel im Anfrage-Band | +| Text leise | `--c-text-leise` | `oklch(46% 0.012 200)` | abgeleitet | Nebentext, ≥ 4,5:1 auf Papier | + +Kontraste (WCAG 2.1 AA): Anthrazit auf Papier 11,8:1, Petrol auf Papier 5,7:1, Papier auf Petrol 5,7:1. Hellblau und Silbergrau tragen nie Fließtext. + +## Schrift + +Selbst gehostet unter `public/fonts/` (OFL), auf Latin-1 beschnitten, Achsen begrenzt. Keine Anfragen an Google Fonts oder CDNs. + +- **Bodoni Moda** (variabel, Optical Size 11 bis 96): Überschriften, Zahlen, Zitate. Hoher Kontrast wie im Mode- und Beauty-Magazin; bei großen Größen schaltet die optische Größe automatisch auf feine Haarstriche. Kursiv nur für das Akzentwort einer Überschrift (in Petrol). +- **Archivo** (variabel, Breite 68 bis 100 %, Gewicht 350 bis 700): Fließtext, Formulare. Labels in Großbuchstaben laufen schmal (72 % Breite) und greifen damit die schmale Groteskschrift des Logos („FRISEUR TEAM“) auf. + +Skala (fließend, Verhältnis ca. 1,25 bis 1,33): Label 13 px · Klein 15 px · Text 17 px · Lead 19 bis 23 px · H4 20 bis 24 px · H3 24 bis 34 px · H2 34 bis 60 px · H1 44 bis 96 px. Untergrenze überall 12 px. Zeilenlänge Fließtext höchstens 38 rem (rund 70 Zeichen). + +## Form und Motive + +- **Bogen**: Bilder und Fotoflächen der Premium-Leistungen haben oben einen Halbkreis (`--arch`). Vorbild ist der Rundbogen-Durchgang im Salon (sichtbar auf salon-innen-2 und -3). +- **Wandpaneel**: Ein senkrechter Petrol-Block hinter Hero-Bildern und im Anfrage-Band, wie die blauen Wandflächen zwischen den Spiegeln. +- **Haarlinien**: Listen und Preise stehen auf 1 px Linien, Abschnittsanfänge auf 1,5 px Anthrazit. Keine Karten-Raster. +- **Knöpfe**: Pille, ein Hauptknopf pro Abschnitt (Petrol), Nebenknopf als Kontur. +- **Fotoflächen (Shotliste)**: Solange Arbeitsfotos fehlen, zeigt `Shot.astro` eine beschriftete Fläche mit Motiv und Bildidee. Das ist die Liste für das Shooting. + +## Abstände + +4-px-Raster (`--s-1` bis `--s-9`). Abschnitte atmen mit `--section` (72 bis 152 px). Seitenrand `--gutter` (20 bis 56 px). Rhythmus bewusst wechselnd: enge Gruppen, große Abstände zwischen Abschnitten. + +## Bewegung + +Ein Auftritt beim Laden (Hero-Text steigt, Wandpaneel wächst), dazu dezentes Einblenden beim Scrollen über CSS `animation-timeline: view()`. Kurve ease-out-quint, keine Federn. Bei `prefers-reduced-motion: reduce` ist alles aus. Die H1 wird nur verschoben, nie ausgeblendet (LCP). + +## Barrierefreiheit + +WCAG 2.1 AA. Fokus sichtbar (2 px Petrol), Touch-Ziele mindestens 44 px, Formularfelder 52 px hoch und 17 px Schrift (kein Zoom auf iOS), Fehlermeldungen als Text mit Fehlerübersicht, Menü und FAQ funktionieren ohne JavaScript (`{detail}
} + +Anfrage
+{text}
+Schon Kundin oder Kunde bei uns? Rufen Sie einfach an oder schreiben Sie uns per WhatsApp.
+Entwurf · vor Livegang prüfen
+{text}
+Fragen
+{it.a}
| {compact ? h.short : h.day} | +{h.open ? `${fmtTime(h.open)}–${fmtTime(h.close!)} Uhr` : 'geschlossen'} | +
|---|
{label}
+ + {lead &&{lead}
} +{g.lead}
} +* Richtwerte. Preise werden mit dem Salon abgestimmt. Der genaue Preis hängt von Haarlänge, Haardichte und Aufwand ab; wir nennen ihn Ihnen vor der Behandlung.
+{g.count} Menschen haben uns auf Google bewertet, im Schnitt mit {g.rating} von 5 Sternen.
+Stand {g.asOf}. Die einzelnen Bewertungen finden Sie bei Google.
+ Bewertungen auf Google lesenReels · {salon.instagramHandle}
+{s.text}
+Fehler 404
+Vielleicht hat sich die Adresse geändert, die Website ist neu. Von hier aus finden Sie alles Wichtige:
+ +Oder rufen Sie uns an: {salon.phoneDisplay}
+Anfrage gesendet
+Wir melden uns telefonisch zu der Zeit, die Sie angegeben haben, und besprechen alles Weitere. Den Termin tragen wir dann für Sie ein.
+Falls Sie noch etwas ergänzen möchten, erreichen Sie uns unter {salon.phoneDisplay} oder per WhatsApp.
+ +Anfrage
+Wir vergeben Termine nicht online, sondern im Gespräch. Mit diesen Angaben können wir vorab einschätzen, wie viel Zeit wir einplanen und wer aus dem Team am besten passt.
+Wir rufen Sie zurück, um alles Weitere zu besprechen.
+ + Zur StartseiteTechniken
+Vorher und nachher
+Ziehen Sie den Regler, um vorher und nachher zu vergleichen. Die Bildpaare entstehen beim Shooting mit echten Kundinnen, die zugestimmt haben.
+Produkte
+Mit diesen beiden Marken färben und pflegen wir im Salon. Welche Pflege zu Ihrer neuen Farbe passt, besprechen wir am Ende des Termins.
+Preise
+Richtwerte für die häufigsten Farbbehandlungen. Bei langem oder sehr dichtem Haar wird es mehr, das sagen wir Ihnen vorher.
+Weiche Verläufe, feine Strähnen, lebendiger Glanz. Wir mischen Ihre Farbe individuell – schonend, hochwertig und so natürlich, dass der Ansatz mitwächst statt aufzufallen.
-
- Frei Hand gemalte Highlights für natürliche Tiefe – pflegeleicht, weil der Ansatz weich herauswächst.
Präzise Aufhellung für mehr Kontrast und Leuchtkraft – klassisch oder modern abgestuft.
Farbauffrischung und Glanz-Veredelung – für gesunde, spiegelnde Haaroberfläche.
Vom Probetermin bis zum großen Moment: Wir planen Ihr Brautstyling in Ruhe, stimmen jedes Detail ab und sorgen dafür, dass am Hochzeitstag alles sitzt – ohne Stress.
-
- Wir testen Frisur und Styling in Ruhe – mit Zeit für Wünsche, Accessoires und Anpassungen.
Pünktlich, entspannt und perfekt vorbereitet – auf Wunsch auch früh morgens vor der Trauung.
Wir stylen so, dass es den ganzen Tag und auf jedem Foto hält.
Ablauf
+Galerie
+Die Fotos entstehen beim Shooting mit dem Team. Bis dahin zeigen diese Flächen, welche Motive hier stehen werden.
+Preise
+Damit Sie vorher wissen, womit Sie rechnen können: Das sind unsere Richtwerte. Den genauen Preis nennen wir nach der Beratung.
+Rechtliches
+{salon.legalName}, Inhaberin {salon.owner}
{salon.street}, {salon.zip} {salon.city}
Telefon {salon.phoneIntl}, E-Mail {salon.email}
Die Website liegt auf einem Server in Deutschland, betrieben von Heidrich Digital (Anbieter des Rechenzentrums vor Livegang eintragen). Beim Aufruf speichert der Server technisch notwendige Angaben: IP-Adresse, Datum und Uhrzeit, aufgerufene Seite, Browsertyp. Das dient der sicheren Bereitstellung (Art. 6 Abs. 1 lit. f DSGVO). Die Protokolle werden nach spätestens 14 Tagen gelöscht (Frist bitte bestätigen).
+ +Wenn Sie eine Anfrage senden, verarbeiten wir die Angaben, die Sie eintragen: Name, Telefonnummer, freiwillig E-Mail, Ihr Anliegen, Angaben zu Haar und Wunschtermin, bei Brautstyling Datum, Ort und Personenzahl sowie bis zu drei Fotos. Wir nutzen diese Daten nur, um Sie zurückzurufen und einen Termin abzusprechen (Art. 6 Abs. 1 lit. b DSGVO, vorvertragliche Maßnahmen). Fotos laden Sie freiwillig hoch, auf Grundlage Ihrer Einwilligung (Art. 6 Abs. 1 lit. a DSGVO).
+Die Anfrage wird über einen Dienst von Heidrich Digital auf einem Server in Deutschland entgegengenommen und an den Salon weitergegeben. Heidrich Digital handelt dabei als Auftragsverarbeiter. Anfragen ohne Termin löschen wir nach sechs Monaten, Fotos spätestens nach dem Termin (Fristen bitte bestätigen).
+Wenn Sie „Ich kann auch kurzfristig“ ankreuzen, speichern wir Ihre Anfrage auf einer Warteliste und rufen Sie an, wenn ein Termin frei wird. Sie können das jederzeit telefonisch beenden.
+ +Für die digitale Stempelkarte gelten eigene Hinweise, die Sie bei der Anmeldung sehen. Gespeichert werden Name und Stempelstand, Telefon und E-Mail nur freiwillig. Nachrichten erhalten Sie nur mit gesonderter Einwilligung.
+ +Wenn Sie uns anrufen oder schreiben, verarbeiten wir Ihre Angaben, um Ihr Anliegen zu bearbeiten. Bei WhatsApp gelten zusätzlich die Datenschutzbestimmungen von WhatsApp (Meta). Wenn Sie das nicht möchten, nutzen Sie bitte Telefon oder E-Mail.
+ +Sie haben das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung, Datenübertragbarkeit und Widerspruch. Eine Einwilligung können Sie jederzeit für die Zukunft widerrufen. Schreiben Sie dazu an {salon.email}. Außerdem können Sie sich bei einer Datenschutz-Aufsichtsbehörde beschweren, in Niedersachsen bei der Landesbeauftragten für den Datenschutz Niedersachsen.
+ +Stand: Entwurf Oktober 2026
+Haarverlängerung und Haarverdichtung sind unser Steckenpferd. Mit hochwertigem Echthaar, ehrlicher Beratung und viel Erfahrung holen wir das Beste aus Ihrem Haar – so, dass niemand es sieht und jeder es bemerkt.
-
+Zwei Möglichkeiten
+Wir schauen uns Ihr Haar an, klären Wünsche, Methode, Pflege und Budget – unverbindlich und transparent.
Schonende Anbringung mit Echthaar, abgestimmt auf Farbe und Struktur – für ein Ergebnis, das sich echt anfühlt.
Sie bekommen einen klaren Pflegeplan und Folgetermine – damit das Ergebnis lange schön bleibt.
Für mehr Länge, zum Beispiel nach einem zu kurzen Schnitt oder für einen besonderen Anlass. Die Strähnen werden farblich an Ihr Haar angepasst.
+ab 650 €*
+Für mehr Fülle bei gleicher Länge, etwa bei feinem Haar oder lichten Stellen. Oft reichen dafür weniger Strähnen als bei einer Verlängerung.
+ab 350 €*
+