Redesign auf Basis Claude-Design + Landingpages (HV/Balayage/Braut/Treuekarte) + echtes Logo

This commit is contained in:
till committed 2026-06-24 11:13:37 +00:00
1 parent 16109dcfc2
commit bbae83f0d5
11 files changed
+842 -5876

No files matched your search

+252 -390
View File
@@ -1,418 +1,280 @@
---
import "../styles/global.css";
import Base from "../layouts/Base.astro";
const scissors = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><line x1="20" y1="4" x2="8.12" y2="15.88"></line><line x1="14.47" y1="14.48" x2="20" y2="20"></line><line x1="8.12" y1="8.12" x2="12" y2="12"></line></svg>`;
const services = [
{ ico: "✂️", h: "Damenhaarschnitt", p: "Beratung, Waschen, Schnitt & Styling – abgestimmt auf Haar und Typ.", tag: "Schnitt & Styling" },
{ ico: "🧔", h: "Herren & Barbershop", p: "Klassischer Schnitt, Bartpflege, Konturen und heiße Rasur.", tag: "Barbershop" },
{ ico: "🧒", h: "Kinder", p: "Geduldig, schnell und mit einem Lächeln – der erste Salonbesuch wird schön.", tag: "Familienfreundlich" },
{ ico: "🎨", h: "Balayage & Farbe", p: "Sanfte Übergänge, Foliensträhnen, Glossing – mit Redken & Paul Mitchell.", tag: "Coloration" },
{ ico: "💍", h: "Braut & Event", p: "Probetermin, Hochsteckfrisuren und Styling für euren großen Tag.", tag: "Hochzeitsservice" },
];
const team = [
{ n: "Veronika Sprangel", r: "Inhaberin & Friseurmeisterin", i: "VS" },
{ n: "Iris Winterstein", r: "Stylistin", i: "IW" },
{ n: "Christin Gottschlich", r: "Stylistin", i: "CG" },
{ n: "Marco Gollnast-Heise", r: "Barber & Stylist", i: "MG" },
{ n: "Tina Sahling", r: "Stylistin", i: "TS" },
{ n: "Ella Schizipin", r: "Stylistin", i: "ES" },
{ n: "Fabian Gidom", r: "Auszubildender", i: "FG" },
{ n: "Dennis Sprangel", r: "Organisation", i: "DS" },
];
const hours = [
{ d: "Montag", t: "Geschlossen", closed: true },
{ d: "Dienstag", t: "09:00 – 18:00" },
{ d: "Mittwoch", t: "09:00 – 20:00" },
{ d: "Donnerstag", t: "09:00 – 18:00" },
{ d: "Freitag", t: "09:00 – 20:00" },
{ d: "Samstag", t: "09:00 – 14:00" },
{ img: "/img/g4.webp", h: "Damen – Schnitt & Föhnen", p: "Waschen, individueller Schnitt und Styling – abgestimmt auf Haarstruktur und Typ.", price: "ab 42 €", href: "#buchen" },
{ img: "/img/g5.webp", h: "Herren & Barbershop", p: "Präziser Schnitt, saubere Übergänge, Bartpflege und klassische Rasur.", price: "ab 24 €", href: "#buchen" },
{ img: "/img/g1.webp", h: "Coloration & Strähnen", p: "Glanzvolle Farben und feine Strähnen – schonend mit Redken & Paul Mitchell.", price: "ab 59 €", href: "#buchen" },
{ img: "/img/g3.webp", h: "Balayage & Highlights", p: "Natürliche Farbverläufe und sonnige Akzente für mehr Tiefe und Dimension.", price: "ab 89 €", href: "/balayage" },
{ img: "/img/hv.jpg", h: "Haarverlängerung & -verdichtung", p: "Unsere Spezialität: mehr Länge und Fülle, natürlich schön – mit ausführlicher Beratung.", price: "auf Anfrage", href: "/haarverlaengerung", feature: true },
{ img: "/img/g6.webp", h: "Braut & Hochsteckfrisuren", p: "Festliche Stylings für Hochzeit und besondere Anlässe – inkl. Probetermin.", price: "ab 95 €", href: "/braut" },
];
---
<Base>
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Friseur-Team VK · Veronika Sprangel · Friseur in Tostedt</title>
<meta name="description" content="Friseur-Team VK in Tostedt – euer Salon für Schnitt, Farbe, Balayage, Barbershop, Braut & Haarverlängerung. Online Termin buchen, rund um die Uhr." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body>
<header class="nav" id="nav">
<div class="wrap nav-inner">
<a href="#top" class="logo">Friseur-Team <b>VK</b></a>
<nav class="nav-links">
<a href="#leistungen">Leistungen</a>
<a href="#team">Team</a>
<a href="#galerie">Galerie</a>
<a href="#preise">Preise</a>
<a href="#kontakt">Kontakt</a>
</nav>
<div class="nav-cta">
<a href="#buchen" class="btn btn-primary">Termin buchen</a>
</div>
</div>
</header>
<!-- HERO -->
<section class="hero" id="top">
<div class="hero-bg"><img src="/img/hero.webp" alt="Friseur-Team VK Salon in Tostedt" fetchpriority="high" /></div>
<div class="wrap hero-inner">
<span class="eyebrow">Friseur in Tostedt · seit 2017</span>
<h1>Mehr als ein Haarschnitt. <em>Euer Salon</em> in Tostedt.</h1>
<p class="lead">Großes Meisterteam, Premium-Produkte und ein helles Wohlfühl-Ambiente in der Kastanienallee. Von Balayage bis Braut – wir kümmern uns um euren Look.</p>
<div class="hero-actions">
<a href="#buchen" class="btn btn-accent">Termin buchen →</a>
<a href="#leistungen" class="btn btn-ghost" style="color:#fff;border-color:rgba(255,255,255,.4)">Leistungen ansehen</a>
</div>
<div class="hero-trust">
<span>● 8-köpfiges Meisterteam</span>
<span>● Redken &amp; Paul Mitchell</span>
<span>● Damen · Herren · Kinder</span>
</div>
</div>
</section>
<!-- TRUST STRIP -->
<div class="strip">
<div class="wrap strip-inner">
<div><span class="num">2017</span><span class="lbl">seit</span></div>
<div><span class="num">8</span><span class="lbl">Profis im Team</span></div>
<div><span class="num">2</span><span class="lbl">Premium-Marken</span></div>
<div><span class="num">24/7</span><span class="lbl">online buchbar</span></div>
</div>
</div>
<!-- LEISTUNGEN -->
<section id="leistungen">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Leistungen</span>
<h2>Alles rund um euer Haar – aus einer Hand.</h2>
<p>Vom schnellen Schnitt bis zum großen Auftritt. Unser Team berät euch ehrlich und findet den Look, der zu euch passt.</p>
</div>
<div class="bento">
<div class="card-svc feature reveal">
<div>
<div class="ico">💆‍♀️</div>
<h3>Haarverlängerung &amp; Haarverdichtung</h3>
<p>Unser Premium-Segment: mehr Länge, mehr Fülle, natürlich schön. Mit ausführlicher Beratung und hochwertigen Echthaar-Tressen.</p>
<!-- HERO -->
<section class="hero" id="top">
<div class="container grid">
<div>
<span class="eyebrow"><span class="ln"></span>Ihr Friseur in Tostedt</span>
<h1>Zeit für schöne Haare.</h1>
<p class="lead">Persönliche Beratung, präzise Schnitte und moderne Farbtechniken – mitten in Tostedt. Unser 8-köpfiges Meisterteam nimmt sich Zeit für Sie, Ihren Typ und Ihren Alltag.</p>
<div class="actions">
<a href="#buchen" class="btn btn-dark">Termin buchen</a>
<a href="#leistungen" class="btn btn-outline">Unsere Leistungen</a>
</div>
<span class="tag">Spezialität des Hauses →</span>
</div>
{services.map((s) => (
<div class="card-svc reveal">
<div class="ico">{s.ico}</div>
<h3>{s.h}</h3>
<p>{s.p}</p>
<span class="tag">{s.tag}</span>
</div>
))}
</div>
</div>
</section>
<!-- GALERIE -->
<section id="galerie" style="background:var(--cream-2)">
<div class="wrap">
<div class="sec-head center reveal">
<span class="eyebrow">Galerie</span>
<h2>Ergebnisse, die für sich sprechen.</h2>
<p>Ein Einblick in Salon und Handwerk. Bald hier: euer eigenes Foto-Shooting.</p>
</div>
<div class="gallery reveal">
<figure class="big"><img src="/img/salon.webp" alt="Salon-Ambiente" loading="lazy" /></figure>
<figure><img src="/img/g1.webp" alt="Coloration" loading="lazy" /></figure>
<figure class="tall"><img src="/img/g2.webp" alt="Styling" loading="lazy" /></figure>
<figure><img src="/img/g3.webp" alt="Schnitt" loading="lazy" /></figure>
<figure><img src="/img/g4.webp" alt="Im Salon" loading="lazy" /></figure>
<figure><img src="/img/g5.webp" alt="Detail" loading="lazy" /></figure>
</div>
<div class="reels-head reveal">
<h3>Reels &amp; Motion · 9:16</h3>
<span>Hochformat-Content fürs Handy – direkt für Instagram &amp; TikTok.</span>
</div>
<div class="reels reveal">
<figure class="reel"><img src="/img/g1.webp" alt="Reel Coloration" loading="lazy" /><span class="rlabel">Vorher / Nachher</span></figure>
<figure class="reel"><img src="/img/hero.webp" alt="Reel Salon" loading="lazy" /><span class="rlabel">Salon-Tour</span></figure>
<figure class="reel"><img src="/img/g3.webp" alt="Reel Styling" loading="lazy" /><span class="rlabel">Styling-Clip</span></figure>
<figure class="reel"><img src="/img/g2.webp" alt="Reel Behind the scenes" loading="lazy" /><span class="rlabel">Behind the Scenes</span></figure>
</div>
<div class="insta-cta reveal" style="margin-top:1.6rem">
<span class="demo-flag">Demo · hier laufen später echte 9:16-Clips</span>
<div style="margin-top:1rem"><a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener" class="btn btn-ghost">📸 Folgt uns @friseur.team_vk</a></div>
</div>
</div>
</section>
<!-- TEAM -->
<section id="team">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Das Team</span>
<h2>8 Profis. Eine Leidenschaft.</h2>
<p>Das größte Friseurteam in Tostedt – von der Meisterin bis zum Azubi. <span class="demo-flag">Demo · echte Mitarbeiterfotos folgen</span></p>
</div>
<div class="team-grid">
{team.map((m) => (
<div class="member reveal">
<div class="avatar"><span class="ini">{m.i}</span><span class="ph">Foto folgt</span></div>
<div class="mname">{m.n}</div>
<div class="mrole">{m.r}</div>
</div>
))}
</div>
</div>
</section>
<!-- WALLET / STEMPELKARTE -->
<section class="wallet-sec" id="treue">
<div class="wrap wallet-layout">
<div class="reveal">
<span class="eyebrow">Treuekarte – digital</span>
<h2 style="font-size:clamp(2rem,4vw,3rem);margin:.8rem 0 1rem">Die Stempelkarte, die man nie vergisst.</h2>
<p style="color:var(--soft);margin-bottom:1rem">Eure Papier-Stempelkarte – jetzt direkt auf dem Handy. Ein Klick, und die Karte liegt in Apple Wallet oder Google Wallet. Kein Verlieren, kein Suchen. Beim Bezahlen einfach zeigen, wir stempeln digital.</p>
<p style="color:var(--soft)">Optional mit Push-Nachricht, sobald die Karte voll ist – ein sanfter Grund, wiederzukommen.</p>
<div class="wallet-btns">
<button class="wallet-btn" data-wallet> Zu Apple Wallet</button>
<button class="wallet-btn g" data-wallet>Zu Google Wallet</button>
</div>
</div>
<div class="reveal">
<div class="pass">
<div class="pass-top">
<span class="pass-brand">Friseur-Team <b>VK</b></span>
<span class="pass-chip">Treuekarte</span>
</div>
<span class="pass-label">Deine Stempel</span>
<div class="pass-reward">Jeder 10. Schnitt – Pflege gratis 🎁</div>
<div class="stamps">
<div class="stamp on">✂️</div><div class="stamp on">✂️</div><div class="stamp on">✂️</div><div class="stamp on">✂️</div><div class="stamp on">✂️</div>
<div class="stamp on">✂️</div><div class="stamp on">✂️</div><div class="stamp">✂️</div><div class="stamp">✂️</div><div class="stamp">🎁</div>
</div>
<div class="pass-foot"><span>7 / 10 Stempel</span><span>Kastanienallee 1, Tostedt</span></div>
</div>
</div>
</div>
</section>
<!-- BUCHEN -->
<section class="book-sec" id="buchen">
<div class="wrap">
<div class="sec-head center reveal">
<span class="eyebrow" style="color:var(--terracotta)">Online buchen</span>
<h2>Termin buchen – rund um die Uhr.</h2>
<p>In drei Schritten zum Wunschtermin. Eure Anfrage landet direkt bei euch im Salon – ihr bestätigt wie gewohnt, die Erinnerung läuft automatisch.</p>
</div>
<div class="booker reveal">
<div class="steps-nav">
<div class="step-dot active" data-dot="0"></div>
<div class="step-dot" data-dot="1"></div>
<div class="step-dot" data-dot="2"></div>
</div>
<div class="step active" data-step="0">
<h3>1 · Leistung wählen</h3>
<div class="opt-grid">
<div class="opt" data-pick="svc" data-val="Damenschnitt"><span class="o-name">Damenschnitt</span><span class="o-meta">ca. 60 Min</span></div>
<div class="opt" data-pick="svc" data-val="Herren / Barber"><span class="o-name">Herren / Barber</span><span class="o-meta">ca. 40 Min</span></div>
<div class="opt" data-pick="svc" data-val="Balayage & Farbe"><span class="o-name">Balayage &amp; Farbe</span><span class="o-meta">ca. 150 Min</span></div>
<div class="opt" data-pick="svc" data-val="Beratung Verlängerung"><span class="o-name">Beratung Verlängerung</span><span class="o-meta">ca. 30 Min</span></div>
<div class="stats">
<span>Meisterbetrieb seit 2017</span>
<span class="sep"></span>
<span>Redken &amp; Paul Mitchell</span>
<span class="sep"></span>
<span>Damen · Herren · Kinder</span>
</div>
</div>
<div class="step" data-step="1">
<h3>2 · Termin wählen</h3>
<p style="color:rgba(255,255,255,.6);font-size:.85rem;margin-bottom:1rem">Freie Zeiten · Mittwoch</p>
<div class="slots">
<div class="slot" data-pick="time" data-val="09:30">09:30</div>
<div class="slot" data-pick="time" data-val="11:00">11:00</div>
<div class="slot" data-pick="time" data-val="13:30">13:30</div>
<div class="slot" data-pick="time" data-val="15:00">15:00</div>
<div class="slot" data-pick="time" data-val="16:30">16:30</div>
<div class="slot" data-pick="time" data-val="17:15">17:15</div>
<div class="slot" data-pick="time" data-val="18:00">18:00</div>
<div class="slot" data-pick="time" data-val="19:00">19:00</div>
<div class="hero-media">
<img src="/img/hero.webp" alt="Friseur-Team VK Salon in Tostedt" fetchpriority="high" />
<div class="float-card">
<span class="ic" set:html={scissors}></span>
<span style="line-height:1.2"><span style="display:block;font-weight:700;color:var(--ink);font-size:15px">Größtes Team in Tostedt</span><span style="font-size:13px;color:var(--muted)">8 Profis · seit 2017</span></span>
</div>
</div>
</div>
</section>
<div class="step" data-step="2">
<div class="confirm-box">
<div class="ok">✓</div>
<h3 style="text-align:center">Fast geschafft!</h3>
<p style="color:rgba(255,255,255,.7)">Eure Anfrage <b style="color:var(--terracotta)" id="sumLine">…</b> geht an den Salon. Ihr bekommt die Bestätigung per WhatsApp – und 24 h vorher eine Erinnerung zum Bestätigen oder Absagen.</p>
<!-- INFO STRIP -->
<section class="infostrip">
<div class="container">
<div class="grid">
<div class="col"><h4>Kontakt</h4><p>04182 / 28 89 535<br>info@friseur-team-vk.de</p></div>
<div class="col"><h4>Öffnungszeiten</h4><p>Di–Sa geöffnet<br>Mi &amp; Fr bis 20 Uhr · Mo geschlossen</p></div>
<div class="col"><h4>Standort</h4><p>Kastanienallee 1<br>21255 Tostedt</p></div>
</div>
</div>
</section>
<!-- ABOUT -->
<section id="ueber" class="section">
<div class="container split reveal">
<img class="media" src="/img/salon.webp" alt="Im Salon von Friseur-Team VK" />
<div>
<span class="eyebrow"><span class="ln"></span>Warum Friseur-Team VK?</span>
<h2>Mehr als ein Friseursalon – ein Ort zum Wohlfühlen</h2>
<p class="bodytext">Bei uns stehen Sie im Mittelpunkt. In heller, ruhiger Atmosphäre beraten wir Sie ehrlich, hören zu und finden gemeinsam Schnitt und Farbe, die wirklich zu Ihnen passen. Unser eingespieltes Team aus acht Profis bildet sich regelmäßig weiter – für Handwerk, das man sieht und fühlt.</p>
<div class="checks">
<div class="check"><span class="tick">✓</span>Persönliche Typberatung</div>
<div class="check"><span class="tick">✓</span>Redken &amp; Paul Mitchell</div>
<div class="check"><span class="tick">✓</span>Experten für Haarverlängerung</div>
<div class="check"><span class="tick">✓</span>Damen · Herren · Kinder</div>
</div>
</div>
<div class="book-foot">
<div class="book-summary">Auswahl: <b id="sumSvc">–</b> · <b id="sumTime">–</b></div>
<div>
<button class="btn btn-ghost" id="backBtn" style="color:#fff;border-color:rgba(255,255,255,.3);display:none">Zurück</button>
<button class="btn btn-accent" id="nextBtn">Weiter</button>
</div>
</div>
<p class="note-line">Demo-Ablauf · echte Buchung später self-hosted (Cal.com) + WhatsApp-Bestätigung</p>
</div>
</div>
</section>
<!-- REVIEWS -->
<section id="bewertungen">
<div class="wrap">
<div class="sec-head center reveal">
<span class="eyebrow">Bewertungen</span>
<h2>Was unsere Gäste sagen.</h2>
<p><span class="demo-flag">Demo-Texte · später echte Google-Bewertungen</span></p>
</div>
<div class="reviews">
<div class="review reveal"><div class="stars">★★★★★</div><p>„Endlich ein Salon, in dem man sich wohlfühlt. Veronika und ihr Team beraten ehrlich – meine Balayage ist ein Traum."</p><div class="who">— Sandra K.</div></div>
<div class="review reveal"><div class="stars">★★★★★</div><p>„Mein Sohn war zum ersten Mal entspannt beim Friseur. Schnell, freundlich, total geduldig mit Kindern."</p><div class="who">— Markus T.</div></div>
<div class="review reveal"><div class="stars">★★★★★</div><p>„Brautstyling war perfekt. Probetermin, alles abgestimmt, am großen Tag hat alles gesessen. Danke!"</p><div class="who">— Lena & Tim</div></div>
</div>
</div>
</section>
<!-- PREISE -->
<section id="preise" style="background:var(--cream-2)">
<div class="wrap">
<div class="sec-head center reveal">
<span class="eyebrow">Preise</span>
<h2>Transparente Richtwerte.</h2>
<p>Damit ihr wisst, woran ihr seid. Der Endpreis hängt von Haarlänge und Aufwand ab – wir beraten euch vorab.</p>
</div>
<div class="price-grid reveal">
<div class="price-col">
<h3>✂️ Schnitt &amp; Styling</h3>
<div class="price-row"><span class="name">Damen – Waschen, Schnitt, Föhnen</span><span class="val">ab 42 €</span></div>
<div class="price-row"><span class="name">Herren – Schnitt</span><span class="val">ab 24 €</span></div>
<div class="price-row"><span class="name">Bart / Konturen</span><span class="val">ab 14 €</span></div>
<div class="price-row"><span class="name">Kinder (bis 12 J.)</span><span class="val">ab 18 €</span></div>
<div class="price-row"><span class="name">Waschen &amp; Föhnen</span><span class="val">ab 20 €</span></div>
</div>
<div class="price-col">
<h3>🎨 Farbe &amp; Spezial</h3>
<div class="price-row"><span class="name">Ansatzfarbe</span><span class="val">ab 48 €</span></div>
<div class="price-row"><span class="name">Foliensträhnen</span><span class="val">ab 75 €</span></div>
<div class="price-row"><span class="name">Balayage</span><span class="val">ab 120 €</span></div>
<div class="price-row"><span class="name">Brautstyling <small>inkl. Probetermin</small></span><span class="val">ab 95 €</span></div>
<div class="price-row"><span class="name">Haarverlängerung <small>nach Beratung</small></span><span class="val">auf Anfrage</span></div>
<a href="#leistungen" class="btn btn-dark" style="margin-top:34px">Unsere Leistungen</a>
</div>
</div>
<p class="price-note"><span class="demo-flag">Demo-Richtwerte</span> &nbsp;Echte Preise tragen wir gemeinsam ein.</p>
</div>
</section>
</section>
<!-- FAQ -->
<section id="faq">
<div class="wrap">
<div class="sec-head center reveal">
<span class="eyebrow">FAQ</span>
<h2>Häufige Fragen.</h2>
</div>
<div class="faq reveal">
<details><summary>Muss ich vorher anrufen?</summary><div class="ans">Nein. Ihr könnt rund um die Uhr online anfragen – auch abends und am Wochenende. Telefonisch erreicht ihr uns natürlich weiterhin zu den Öffnungszeiten.</div></details>
<details><summary>Welche Produkte verwendet ihr?</summary><div class="ans">Wir arbeiten mit Redken und Paul Mitchell – hochwertige Marken für Schnitt, Pflege und Coloration.</div></details>
<details><summary>Macht ihr auch Haarverlängerungen?</summary><div class="ans">Ja, das ist eine unserer Spezialitäten. Wir bieten Haarverlängerung und Haarverdichtung mit ausführlicher Beratung an.</div></details>
<details><summary>Bekomme ich eine Erinnerung an meinen Termin?</summary><div class="ans">Ja. Vor dem Termin erhaltet ihr eine Erinnerung – künftig per WhatsApp mit der Möglichkeit, direkt zu bestätigen oder abzusagen.</div></details>
<details><summary>Seid ihr auch für Kinder geeignet?</summary><div class="ans">Absolut. Unser Team ist geduldig und familienfreundlich – der erste Friseurbesuch soll Spaß machen.</div></details>
<details><summary>Wo finde ich euch?</summary><div class="ans">Kastanienallee 1, 21255 Tostedt. Parkmöglichkeiten sind in der Nähe vorhanden.</div></details>
</div>
</div>
</section>
<!-- FOOTER / KONTAKT -->
<footer id="kontakt">
<div class="wrap">
<div class="foot-grid">
<div class="foot-col">
<div class="logo">Friseur-Team <span class="u">VK</span></div>
<p>Veronika Sprangel<br/>Kastanienallee 1<br/>21255 Tostedt</p>
<a href="tel:+4941822889535">+49 4182 2889535</a>
<a href="mailto:info@friseur-team-vk.de">info@friseur-team-vk.de</a>
<a class="wa-btn" href="https://wa.me/4941822889535" target="_blank" rel="noopener">💬 WhatsApp</a>
<!-- SERVICES -->
<section id="leistungen" class="section bg-soft">
<div class="container">
<div class="head-center reveal">
<span class="eyebrow center"><span class="ln"></span>Unsere Leistungen<span class="ln"></span></span>
<h2>Alles rund um Ihr Haar</h2>
<p>Vom klassischen Schnitt bis zur aufwendigen Farbe – alles aus einer Hand, mit Sorgfalt und Zeit.</p>
</div>
<div class="foot-col">
<h4>Öffnungszeiten</h4>
{hours.map((h) => (
<div class={"hours-row" + (h.closed ? " closed" : "")}><span>{h.d}</span><span>{h.t}</span></div>
<div class="svc-grid">
{services.map((s) => (
<a href={s.href} class="scard reveal" style={s.feature ? "border-color:var(--accent)" : ""}>
<div class="imgwrap">
<img src={s.img} alt={s.h} loading="lazy" />
<span class="badge" set:html={scissors}></span>
</div>
<div class="body">
<h3>{s.h}</h3>
<p>{s.p}</p>
<div class="row">
<span class="price">{s.price}</span>
<span class="more">{s.feature || s.href.startsWith("/") ? "Mehr erfahren →" : "Termin →"}</span>
</div>
</div>
</a>
))}
</div>
<div class="foot-col">
<h4>Folgt uns</h4>
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener">Instagram</a>
<a href="https://www.facebook.com/FriseurTeamVK" target="_blank" rel="noopener">Facebook</a>
<a href="https://search.google.com/local/writereview?placeid=ChIJoaTlnmahsUcRFbgiyxAG0Fs" target="_blank" rel="noopener">Google bewerten</a>
<a href="#buchen" class="btn btn-accent" style="margin-top:1rem">Termin buchen →</a>
<p style="text-align:center;margin-top:26px"><span class="demo-flag">Demo-Richtwerte</span> &nbsp;echte Preise tragen wir gemeinsam ein.</p>
<div class="center-actions">
<a href="#buchen" class="btn btn-dark">Termin buchen</a>
<a href="/treuekarte" class="btn btn-outline">Digitale Treuekarte ansehen</a>
</div>
</div>
<div class="foot-bottom">
<span>© 2026 Friseur-Team VK · Veronika Sprangel · Tostedt</span>
<span><a href="#">Impressum</a> · <a href="#">Datenschutz</a> · Demo-Entwurf von Heidrich Digital</span>
</section>
<!-- DARK CTA BAND -->
<section class="cta-band">
<div class="container inner">
<div>
<span class="eyebrow">Bereit für einen frischen Look?</span>
<h2>Vereinbaren Sie jetzt Ihren Termin bei Friseur-Team VK.</h2>
</div>
<div style="display:flex;flex-wrap:wrap;gap:14px;align-items:center">
<a href="#buchen" class="btn btn-light">Termin buchen</a>
<a href="tel:+4941822889535" class="btn btn-outline" style="border-color:rgba(255,255,255,.35);color:#fff">04182 / 28 89 535</a>
</div>
</div>
</div>
</footer>
</section>
<div class="toast" id="toast">In Apple/Google Wallet hinzufügen – im Live-System aktiv ✨</div>
<!-- TREUEKARTE TEASER -->
<section class="section" id="treue">
<div class="container wallet-grid">
<div class="reveal">
<span class="eyebrow"><span class="ln"></span>Treuekarte – digital</span>
<h2 style="margin:16px 0 0;font-size:clamp(28px,3.4vw,42px)">Die Stempelkarte, die man nie vergisst.</h2>
<p class="bodytext">Die Papier-Stempelkarte – jetzt direkt im Handy. Ein Klick, und die Karte liegt in Apple Wallet oder Google Wallet. Beim Bezahlen einfach zeigen, wir stempeln digital. Optional mit Push, sobald die Karte voll ist.</p>
<div class="wallet-btns">
<button class="wbtn" data-wallet> Apple Wallet</button>
<button class="wbtn g" data-wallet>Google Wallet</button>
<a href="/treuekarte" class="btn btn-outline btn-sm">So funktioniert's →</a>
</div>
</div>
<div class="reveal">
<div class="pass">
<div class="ptop"><span class="pbrand">Friseur-Team VK<span class="s">Tostedt</span></span><span class="chip">Treuekarte</span></div>
<span class="plabel">Ihre Stempel</span>
<div class="preward">Jeder 10. Schnitt – Pflege gratis 🎁</div>
<div class="stamps">
<div class="stamp on">✂</div><div class="stamp on">✂</div><div class="stamp on">✂</div><div class="stamp on">✂</div><div class="stamp on">✂</div>
<div class="stamp on">✂</div><div class="stamp on">✂</div><div class="stamp">✂</div><div class="stamp">✂</div><div class="stamp">🎁</div>
</div>
<div class="pfoot"><span>7 / 10 Stempel</span><span>Kastanienallee 1</span></div>
</div>
</div>
</div>
</section>
<script is:inline>
// nav scroll
const nav = document.getElementById('nav');
const onScroll = () => nav.classList.toggle('scrolled', window.scrollY > 40);
onScroll(); window.addEventListener('scroll', onScroll, { passive: true });
<!-- BUCHEN -->
<section class="section bg-dark" id="buchen">
<div class="container">
<div class="head-center reveal">
<span class="eyebrow center" style="color:var(--accent-2)"><span class="ln"></span>Online buchen<span class="ln"></span></span>
<h2 style="color:#fff">Termin buchen – rund um die Uhr</h2>
<p style="color:rgba(255,255,255,.7)">In drei Schritten zur Anfrage. Sie landet direkt im Salon – bestätigt wird wie gewohnt, die Erinnerung läuft automatisch.</p>
</div>
<div class="booker reveal" style="margin-top:42px">
<div class="steps-nav"><div class="step-dot active" data-dot="0"></div><div class="step-dot" data-dot="1"></div><div class="step-dot" data-dot="2"></div></div>
<div class="step active" data-step="0">
<h3>1 · Leistung wählen</h3>
<div class="opt-grid">
<div class="opt" data-pick="svc" data-val="Damenschnitt"><span class="o-name">Damenschnitt</span><span class="o-meta">ca. 60 Min</span></div>
<div class="opt" data-pick="svc" data-val="Herren / Barber"><span class="o-name">Herren / Barber</span><span class="o-meta">ca. 40 Min</span></div>
<div class="opt" data-pick="svc" data-val="Balayage & Farbe"><span class="o-name">Balayage &amp; Farbe</span><span class="o-meta">ca. 150 Min</span></div>
<div class="opt" data-pick="svc" data-val="Beratung Verlängerung"><span class="o-name">Beratung Verlängerung</span><span class="o-meta">ca. 30 Min</span></div>
</div>
</div>
<div class="step" data-step="1">
<h3>2 · Termin wählen</h3>
<p style="color:rgba(255,255,255,.6);font-size:.85rem;margin-bottom:1rem">Freie Zeiten · Mittwoch (bis 20 Uhr)</p>
<div class="slots">
<div class="slot" data-pick="time" data-val="09:30">09:30</div><div class="slot" data-pick="time" data-val="11:00">11:00</div>
<div class="slot" data-pick="time" data-val="13:30">13:30</div><div class="slot" data-pick="time" data-val="15:00">15:00</div>
<div class="slot" data-pick="time" data-val="16:30">16:30</div><div class="slot" data-pick="time" data-val="17:15">17:15</div>
<div class="slot" data-pick="time" data-val="18:30">18:30</div><div class="slot" data-pick="time" data-val="19:15">19:15</div>
</div>
</div>
<div class="step confirm" data-step="2" style="text-align:center">
<div class="ok">✓</div>
<h3 style="text-align:center">Fast geschafft!</h3>
<p style="color:rgba(255,255,255,.7)">Ihre Anfrage <b style="color:var(--accent-2)" id="sumLine">…</b> geht an den Salon. Sie erhalten die Bestätigung per WhatsApp – und 24 h vorher eine Erinnerung zum Bestätigen oder Absagen.</p>
</div>
<div class="book-foot">
<div class="book-summary">Auswahl: <b id="sumSvc">–</b> · <b id="sumTime">–</b></div>
<div>
<button class="btn btn-outline btn-sm" id="backBtn" style="color:#fff;border-color:rgba(255,255,255,.3);display:none">Zurück</button>
<button class="btn btn-accent btn-sm" id="nextBtn">Weiter</button>
</div>
</div>
<p class="note-line">Demo-Ablauf · echte Buchung self-hosted (Cal.com) + WhatsApp-Bestätigung</p>
</div>
</div>
</section>
// reveal
const io = new IntersectionObserver((es) => {
es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { threshold: 0.12 });
document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
<!-- STANDORT -->
<section id="standort" class="section">
<div class="container split rev reveal">
<div>
<span class="eyebrow"><span class="ln"></span>Standort</span>
<h2 id="kontakt">Besuchen Sie uns in Tostedt</h2>
<p class="bodytext">Mitten im Ort, gut erreichbar und mit Parkplätzen in der Nähe. Rufen Sie an oder schreiben Sie uns – wir finden den passenden Termin für Sie.</p>
<div class="checks" style="grid-template-columns:1fr 1fr">
<div><h4 class="eyebrow-label">Adresse</h4><p style="margin-top:8px;color:var(--text)">Kastanienallee 1<br>21255 Tostedt</p></div>
<div><h4 class="eyebrow-label">Kontakt</h4><p style="margin-top:8px;color:var(--text)">04182 / 28 89 535<br>info@friseur-team-vk.de</p></div>
<div><h4 class="eyebrow-label">Öffnungszeiten</h4><p style="margin-top:8px;color:var(--text)">Di · Do 9–18 · Mi · Fr 9–20<br>Sa 9–14 Uhr</p></div>
<div><h4 class="eyebrow-label">Ruhetag</h4><p style="margin-top:8px;color:var(--text)">Montag</p></div>
</div>
<div style="margin-top:34px;display:flex;flex-wrap:wrap;gap:14px">
<a href="tel:+4941822889535" class="btn btn-dark">Jetzt anrufen</a>
<a href="https://maps.google.com/?q=Kastanienallee+1+21255+Tostedt" target="_blank" rel="noopener" class="btn btn-outline">Route planen</a>
</div>
</div>
<img class="media" src="/img/g2.webp" alt="Friseur-Team VK Tostedt" />
</div>
</section>
// wallet toast
const toast = document.getElementById('toast');
document.querySelectorAll('[data-wallet]').forEach((b) => b.addEventListener('click', () => {
toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2600);
}));
<!-- GALERIE + REELS -->
<section id="galerie" class="section bg-soft">
<div class="container">
<div class="head-center reveal">
<span class="eyebrow center"><span class="ln"></span>Galerie<span class="ln"></span></span>
<h2>Eindrücke & Ergebnisse</h2>
<p>Ein Blick in Salon und Handwerk. Bald hier: Ihr eigenes Foto- &amp; Video-Shooting.</p>
</div>
<div class="gal reveal">
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g1.webp" alt="Eindruck" loading="lazy" /></a>
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g3.webp" alt="Eindruck" loading="lazy" /></a>
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/salon.webp" alt="Eindruck" loading="lazy" /></a>
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g4.webp" alt="Eindruck" loading="lazy" /></a>
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g6.webp" alt="Eindruck" loading="lazy" /></a>
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g5.webp" alt="Eindruck" loading="lazy" /></a>
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/hv.jpg" alt="Eindruck" loading="lazy" /></a>
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/hero.webp" alt="Eindruck" loading="lazy" /></a>
</div>
// booking
let step = 0; const picks = { svc: null, time: null };
const steps = document.querySelectorAll('.step');
const dots = document.querySelectorAll('.step-dot');
const nextBtn = document.getElementById('nextBtn');
const backBtn = document.getElementById('backBtn');
const sumSvc = document.getElementById('sumSvc');
const sumTime = document.getElementById('sumTime');
<div class="reels-head reveal">
<h3>Reels &amp; Motion · 9:16</h3>
<span>Hochformat-Content fürs Handy – direkt für Instagram &amp; TikTok.</span>
</div>
<div class="reels reveal">
<figure class="reel"><img src="/img/g1.webp" alt="Reel" loading="lazy" /><span class="lab">Vorher / Nachher</span></figure>
<figure class="reel"><img src="/img/hero.webp" alt="Reel" loading="lazy" /><span class="lab">Salon-Tour</span></figure>
<figure class="reel"><img src="/img/g3.webp" alt="Reel" loading="lazy" /><span class="lab">Styling-Clip</span></figure>
<figure class="reel"><img src="/img/g2.webp" alt="Reel" loading="lazy" /><span class="lab">Behind the Scenes</span></figure>
</div>
<div style="text-align:center;margin-top:28px"><span class="demo-flag">Demo · hier laufen später echte 9:16-Clips</span><div style="margin-top:14px"><a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener" class="btn btn-dark">@friseur.team_vk folgen</a></div></div>
</div>
</section>
function render() {
steps.forEach((s, i) => s.classList.toggle('active', i === step));
dots.forEach((d, i) => d.classList.toggle('active', i <= step));
backBtn.style.display = step === 0 ? 'none' : 'inline-flex';
nextBtn.textContent = step === 2 ? 'Anfrage senden' : 'Weiter';
if (step === 2) {
const line = `${picks.svc || 'Termin'} · Mi ${picks.time || ''}`;
document.getElementById('sumLine').textContent = line;
}
}
document.querySelectorAll('[data-pick]').forEach((el) => el.addEventListener('click', () => {
const type = el.dataset.pick;
el.parentElement.querySelectorAll('[data-pick]').forEach((x) => x.classList.remove('sel'));
el.classList.add('sel');
picks[type] = el.dataset.val;
if (type === 'svc') sumSvc.textContent = picks.svc;
if (type === 'time') sumTime.textContent = picks.time;
}));
nextBtn.addEventListener('click', () => {
if (step === 0 && !picks.svc) { sumSvc.textContent = 'bitte wählen'; return; }
if (step === 1 && !picks.time) { sumTime.textContent = 'bitte wählen'; return; }
if (step === 2) { toast.textContent = 'Anfrage gesendet – Demo ✨'; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2600); return; }
step++; render();
});
backBtn.addEventListener('click', () => { if (step > 0) { step--; render(); } });
render();
</script>
<!-- FAQ -->
<section class="section">
<div class="container">
<div class="head-center reveal">
<span class="eyebrow center"><span class="ln"></span>FAQ<span class="ln"></span></span>
<h2>Häufige Fragen</h2>
</div>
<div class="faq reveal">
<details><summary>Muss ich vorher anrufen?</summary><div class="ans">Nein. Sie können rund um die Uhr online anfragen – auch abends und am Wochenende. Telefonisch erreichen Sie uns natürlich weiterhin zu den Öffnungszeiten.</div></details>
<details><summary>Welche Produkte verwendet ihr?</summary><div class="ans">Wir arbeiten mit Redken und Paul Mitchell – hochwertige Marken für Schnitt, Pflege und Coloration.</div></details>
<details><summary>Macht ihr auch Haarverlängerungen?</summary><div class="ans">Ja, das ist eine unserer Spezialitäten – Haarverlängerung und Haarverdichtung mit ausführlicher Beratung. <a href="/haarverlaengerung" style="color:var(--accent);font-weight:600">Mehr erfahren →</a></div></details>
<details><summary>Bekomme ich eine Erinnerung an meinen Termin?</summary><div class="ans">Ja. Vor dem Termin erhalten Sie eine Erinnerung – künftig per WhatsApp mit der Möglichkeit, direkt zu bestätigen oder abzusagen.</div></details>
<details><summary>Wie funktioniert die digitale Treuekarte?</summary><div class="ans">Sie fügen die Karte einmal zu Apple oder Google Wallet hinzu. Bei jedem Besuch stempeln wir digital – der zehnte Schnitt bringt eine Pflege gratis. <a href="/treuekarte" style="color:var(--accent);font-weight:600">So funktioniert's →</a></div></details>
<details><summary>Wo finde ich euch?</summary><div class="ans">Kastanienallee 1, 21255 Tostedt. Parkmöglichkeiten sind in der Nähe vorhanden.</div></details>
</div>
</div>
</section>
</body>
</html>
<script is:inline>
let step=0;const picks={svc:null,time:null};
const steps=document.querySelectorAll('.step'),dots=document.querySelectorAll('.step-dot');
const nextBtn=document.getElementById('nextBtn'),backBtn=document.getElementById('backBtn');
const sumSvc=document.getElementById('sumSvc'),sumTime=document.getElementById('sumTime');
function render(){steps.forEach((s,i)=>s.classList.toggle('active',i===step));dots.forEach((d,i)=>d.classList.toggle('active',i<=step));backBtn.style.display=step===0?'none':'inline-flex';nextBtn.textContent=step===2?'Anfrage senden':'Weiter';if(step===2){document.getElementById('sumLine').textContent=`${picks.svc||'Termin'} · Mi ${picks.time||''}`}}
document.querySelectorAll('[data-pick]').forEach(el=>el.addEventListener('click',()=>{const t=el.dataset.pick;el.parentElement.querySelectorAll('[data-pick]').forEach(x=>x.classList.remove('sel'));el.classList.add('sel');picks[t]=el.dataset.val;if(t==='svc')sumSvc.textContent=picks.svc;if(t==='time')sumTime.textContent=picks.time}));
nextBtn.addEventListener('click',()=>{if(step===0&&!picks.svc){sumSvc.textContent='bitte wählen';return}if(step===1&&!picks.time){sumTime.textContent='bitte wählen';return}if(step===2){window.__toast('Anfrage gesendet – Demo ✨');return}step++;render()});
backBtn.addEventListener('click',()=>{if(step>0){step--;render()}});
render();
</script>
</Base>