till/vk-friseur
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Neuaufbau: Astro 5, Anfrage statt Buchung, Kundenkarte, Design-Tokens, SEO/GEO, Security-Header

Browse Source
This commit is contained in:
till committed 2026-10-09 07:21:38 +02:00
1 parent 49afd192ef
commit 0aa72718a0
86 files changed
+9743 -1079
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/index.astro
+280 -251
View File
@@ -1,280 +1,309 @@
---
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 = [
{ 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" },
import Base from '../layouts/Base.astro';
import Pic from '../components/Pic.astro';
import Shot from '../components/Shot.astro';
import Icon from '../components/Icon.astro';
import Rating from '../components/Rating.astro';
import Reels from '../components/Reels.astro';
import Hours from '../components/Hours.astro';
import CtaBand from '../components/CtaBand.astro';
import LoyaltyCard from '../components/LoyaltyCard.astro';
import { salon, eur } from '../data/site';
import salonInnen1 from '../assets/img/salon-innen-1.jpg';
import salonInnen4 from '../assets/img/salon-innen-4.jpg';
import salonEmpfang from '../assets/img/salon-empfang.jpg';
import teamFoto from '../assets/img/team-gruppenfoto.jpg';
import greatLengths from '../assets/img/great-lengths.jpg';
const alltag = [
{ t: 'Damen', d: 'Schneiden, Föhnen, Hochsteckfrisuren, Dauerwelle', from: 45, href: '/leistungen-preise#preise-damen' },
{ t: 'Herren und Barbershop', d: 'Haarschnitt, Bart trimmen, Nassrasur', from: 26, href: '/leistungen-preise#preise-herren' },
{ t: 'Kinder', d: 'Haarschnitt bis 12 Jahre', from: 18, href: '/leistungen-preise#preise-kinder' },
{ t: 'Augenbrauen und Wimpern', d: 'Zupfen und Färben', from: 10, href: '/leistungen-preise#preise-augen' },
];
---
<Base>
<!-- 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>
<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>
<Base
title="Friseur-Team VK · Friseur in Tostedt für Braut, Balayage und Great Lengths"
description="Meisterbetrieb in der Kastanienallee 1 in Tostedt, seit 2017. Schwerpunkte: Brautstyling, Balayage und Haarverlängerung mit Great Lengths. 4,9 Sterne bei 193 Google-Bewertungen."
>
<!-- Hero -->
<section class="hero">
<div class="wrap hero__grid">
<div class="hero__txt">
<p class="label">Friseur in Tostedt · Meisterbetrieb seit 2017</p>
<h1>Schön von außen, <em>glücklich von innen.</em></h1>
<p class="lead">Wir sind das Friseur-Team VK aus der Kastanienallee 1. Unsere Schwerpunkte sind Brautstyling, Balayage und Haarverlängerung mit Great Lengths. Für Schnitt und Farbe im Alltag sind wir genauso da.</p>
<div class="btn-row hero__btns">
<a class="btn" href="/anfrage">Anfrage stellen<Icon name="arrow" /></a>
<a class="btn btn--ghost" href={salon.phoneHref}><Icon name="phone" />{salon.phoneDisplay}</a>
</div>
<Rating />
</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>
<figure class="hero__media">
<div class="hero__panel" aria-hidden="true"></div>
<div class="frame arch hero__img">
<Pic src={salonInnen1} eager alt="Der helle Salon in der Kastanienallee mit Bedienplätzen und blauen Wandpaneelen" sizes="(min-width: 60rem) 42vw, 92vw" widths={[420, 640, 860, 1100, 1400]} />
</div>
</div>
<figcaption>Der Salon in der Kastanienallee 1</figcaption>
</figure>
</div>
</section>
<!-- 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>
<!-- Schwerpunkte -->
<section class="section focus" aria-labelledby="focus-h">
<div class="wrap">
<div class="head">
<p class="label">Schwerpunkte</p>
<h2 id="focus-h">Braut, Farbe, <em>Länge.</em></h2>
<p class="lead">Drei Leistungen, bei denen wir vor dem ersten Handgriff in Ruhe beraten.</p>
</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>
<a href="#leistungen" class="btn btn-dark" style="margin-top:34px">Unsere Leistungen</a>
</div>
</div>
</section>
<!-- 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="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>
<ol class="focus__list">
<li class="frow reveal">
<div class="frow__media">
<Shot arch title="Braut-Hochsteckfrisur" detail="Detail Nacken, weiches Fensterlicht" ratio="4/5" />
</div>
<div class="frow__txt">
<span class="frow__n display" aria-hidden="true">01</span>
<h3>Brautservice</h3>
<p>Vom ersten Gespräch über den Probetermin bis zum Styling am Hochzeitstag, Frisur und Make-up aus einer Hand. Auf Wunsch kommen wir am großen Tag zu Ihnen.</p>
<p class="frow__price num">Probetermin ab {eur(75)}<sup>*</sup></p>
<a class="more" href="/brautservice"><span>Zum Brautservice</span><Icon name="arrow" /></a>
</div>
</li>
<li class="frow frow--alt reveal">
<div class="frow__media">
<Shot arch tone="petrol" title="Balayage, Ergebnis" detail="Rückenansicht, lange Wellen, Tageslicht" ratio="4/5" />
</div>
<div class="frow__txt">
<span class="frow__n display" aria-hidden="true">02</span>
<h3>Balayage und Farbe</h3>
<p>Balayage, Foliensträhnen, Coloration und Glossing. Wir planen die Farbe nach Ihrem Ausgangshaar und arbeiten mit Produkten von Redken und Paul Mitchell.</p>
<p class="frow__price num">Balayage ab {eur(140)}<sup>*</sup></p>
<a class="more" href="/balayage-farbe"><span>Zu Balayage und Farbe</span><Icon name="arrow" /></a>
</div>
</li>
<li class="frow reveal">
<div class="frow__media">
<div class="frame arch ratio-45">
<Pic src={greatLengths} alt="Great Lengths Schriftzug auf glänzendem, blondem Echthaar" sizes="(min-width: 60rem) 34vw, 88vw" widths={[400, 640, 900, 1080]} />
</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>
<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 class="frow__txt">
<span class="frow__n display" aria-hidden="true">03</span>
<h3>Haarverlängerung und -verdichtung</h3>
<p>Mehr Länge oder mehr Fülle mit Great Lengths. Vor jeder Verlängerung steht ein Beratungstermin, in dem wir Haarstruktur, Farbton und Pflege besprechen.</p>
<p class="frow__price num">Verdichtung ab {eur(350)}<sup>*</sup></p>
<a class="more" href="/haarverlaengerung"><span>Zur Haarverlängerung</span><Icon name="arrow" /></a>
</div>
</li>
</ol>
<p class="small leise focus__foot">* Richtwerte. Preise werden mit dem Salon abgestimmt.</p>
</div>
</section>
<Reels
title="Arbeiten in Bewegung"
items={[
{ title: 'Balayage vorher und nachher', detail: '15 Sekunden, Drehung im Tageslicht' },
{ title: 'Eine Brautfrisur entsteht', detail: 'Zeitraffer vom Probetermin' },
{ title: 'Great Lengths', detail: 'Ergebnis nach der Verdichtung' },
{ title: 'Herrenschnitt mit Fade', detail: 'Barbershop, Nahaufnahme' },
]}
/>
<!-- Über uns -->
<section class="section about" aria-labelledby="about-h">
<div class="wrap about__grid">
<figure class="about__img reveal">
<div class="frame ratio-32">
<Pic src={teamFoto} alt="Das Team des Friseur-Team VK in schwarzer Kleidung im Salon" sizes="(min-width: 60rem) 58vw, 100vw" />
</div>
<figcaption>Das Team im Salon in der Kastanienallee</figcaption>
</figure>
<div class="about__txt">
<p class="label">Über uns</p>
<h2 id="about-h">Ein Meisterbetrieb, <em>seit 2017.</em></h2>
<p>Veronika Sprangel ist Friseurmeisterin und hat den Salon im November 2017 eröffnet. Heute arbeiten wir zu acht: Friseurinnen und Friseure, ein Barber, ein Auszubildender und Dennis Sprangel, der sich um die Organisation kümmert.</p>
<p>Für Farbe und Pflege nutzen wir Redken und Paul Mitchell, für Haarverlängerungen Great Lengths.</p>
<a class="more" href="/team"><span>Das Team kennenlernen</span><Icon name="arrow" /></a>
</div>
</div>
</section>
<!-- DARK CTA BAND -->
<section class="cta-band">
<div class="container inner">
<!-- Alltag -->
<section class="section section--nebel daily" aria-labelledby="daily-h">
<div class="wrap daily__grid">
<div>
<span class="eyebrow">Bereit für einen frischen Look?</span>
<h2>Vereinbaren Sie jetzt Ihren Termin bei Friseur-Team VK.</h2>
<div class="head">
<p class="label">Für jeden Tag</p>
<h2 id="daily-h">Der Termin zwischendurch.</h2>
</div>
<ul class="daily__list">
{alltag.map((a) => (
<li>
<a href={a.href} class="daily__row">
<span class="daily__t">{a.t}</span>
<span class="daily__d">{a.d}</span>
<span class="daily__p num">ab {eur(a.from)}<sup>*</sup></span>
</a>
</li>
))}
</ul>
<a class="more" href="/leistungen-preise"><span>Alle Leistungen und Preise</span><Icon name="arrow" /></a>
</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>
<figure class="daily__img reveal">
<div class="frame arch ratio-34">
<Pic src={salonInnen4} alt="Bedienplätze vor großen Fenstern, an der Wand der grüne VK-Schriftzug" sizes="(min-width: 60rem) 36vw, 92vw" widths={[400, 640, 803]} />
</div>
</figure>
</div>
</section>
<!-- Bewertungen -->
<section class="section rating" aria-labelledby="rating-h">
<div class="wrap">
<h2 id="rating-h" class="label">Google-Bewertungen</h2>
<div class="rating__body"><Rating variant="block" /></div>
</div>
</section>
<!-- Kundenkarte -->
<section class="section--tight card-teaser" aria-labelledby="card-h">
<div class="wrap card-teaser__grid">
<div class="card-teaser__visual reveal"><LoyaltyCard stamps={4} /></div>
<div class="card-teaser__txt">
<p class="label">Kundenkarte</p>
<h2 id="card-h">Ihre Stempelkarte, jetzt auch <em>im Handy.</em></h2>
<p>Für jeden Besuch gibt es einen Stempel, beim sechsten ein Pflege-Upgrade gratis. Die Karte liegt in Apple Wallet oder Google Wallet, als Web-Karte im Browser oder weiterhin gedruckt im Portemonnaie. Ihre bisherige Papierkarte gilt weiter, wir übertragen die Stempel.</p>
<a class="more" href="/kundenkarte"><span>So funktioniert die Kundenkarte</span><Icon name="arrow" /></a>
</div>
</div>
</section>
<!-- 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>
<!-- Besuch -->
<section class="section visit" aria-labelledby="visit-h">
<div class="wrap visit__grid">
<figure class="visit__img reveal">
<div class="frame ratio-32">
<Pic src={salonEmpfang} alt="Empfangstresen des Salons mit Produktregal und Eingangstür" sizes="(min-width: 60rem) 50vw, 100vw" />
</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>
</figure>
<div class="visit__txt">
<p class="label">Besuch</p>
<h2 id="visit-h">Kastanienallee 1, <em>Tostedt.</em></h2>
<address>
{salon.legalName}<br />{salon.street}<br />{salon.zip} {salon.city}
</address>
<Hours />
<div class="btn-row">
<a class="btn btn--ghost" href={salon.routeUrl} rel="noopener"><Icon name="pin" />Route planen</a>
<a class="btn btn--ghost" href={salon.whatsappHref} rel="noopener"><Icon name="whatsapp" />WhatsApp</a>
</div>
<p class="small leise">Öffnungszeiten werden vor dem Livegang mit dem Salon bestätigt.</p>
</div>
</div>
</section>
<!-- 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 zum Termin. Im Live-System öffnet der Button eure <b style="color:#fff">e-cut Online-Buchung</b> – der Termin landet direkt im e-cut-Kalender, ganz ohne Systemwechsel.</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 · im Live-System angebunden an eure e-cut Online-Buchung (Termine direkt im e-cut-Kalender)</p>
</div>
</div>
</section>
<!-- 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>
<!-- 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>
<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>
<!-- 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>
<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>
<CtaBand />
</Base>
<style>
/* Hero */
.hero { padding-block: var(--s-6) var(--section); overflow: hidden; }
.hero__grid { display: grid; gap: var(--s-7); }
.hero__txt { display: grid; gap: var(--s-5); align-content: center; justify-items: start; }
.hero__txt h1 { font-size: var(--fs-h1); max-width: 11ch; }
.hero__txt h1 em { display: inline; }
.hero__btns { margin-top: var(--s-2); }
.hero__media { position: relative; margin: 0; padding: 0 0 var(--s-5) var(--s-5); }
.hero__panel { position: absolute; left: 0; bottom: var(--s-7); top: 22%; width: 52%; background: var(--c-petrol); }
.hero__img { position: relative; aspect-ratio: 4 / 5; }
.hero__img :global(img) { object-position: 38% 50%; }
.hero__media figcaption { position: relative; }
@media (min-width: 60rem) {
.hero { padding-top: var(--s-8); }
.hero__grid { grid-template-columns: 1.08fr 0.92fr; gap: var(--s-8); align-items: center; }
.hero__img { aspect-ratio: 5 / 6; }
}
@media (prefers-reduced-motion: no-preference) {
.hero__txt > * { animation: h-rise var(--t-slow) var(--ease-out) both; }
.hero__txt > h1 { animation-name: h-rise-t; animation-delay: 60ms; }
.hero__txt > :nth-child(3) { animation-delay: 140ms; }
.hero__txt > :nth-child(4) { animation-delay: 220ms; }
.hero__txt > :nth-child(5) { animation-delay: 300ms; }
.hero__panel { animation: h-grow 1.2s var(--ease-out) both 150ms; transform-origin: bottom; }
@keyframes h-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes h-rise-t { from { transform: translateY(16px); } }
@keyframes h-grow { from { transform: scaleY(0); } }
}
/* Schwerpunkte */
.focus { padding-top: 0; }
.focus__list { list-style: none; padding: 0; margin-top: var(--s-8); display: grid; gap: var(--s-9); }
.frow { display: grid; gap: var(--s-6); align-items: center; }
.frow__media { max-width: 30rem; width: 100%; }
.frow__txt { display: grid; gap: var(--s-3); justify-items: start; max-width: 34rem; }
.frow__n { font-size: var(--fs-h2); font-style: italic; color: var(--c-petrol); line-height: 1; }
.frow h3 { font-size: var(--fs-h2); line-height: 1.05; }
.frow__price { font-weight: 600; margin-top: var(--s-2); }
sup { font-size: 0.75em; color: var(--c-text-leise); margin-left: 1px; }
@media (min-width: 60rem) {
.frow { grid-template-columns: 5fr 6fr; gap: var(--s-9); }
.frow--alt .frow__media { order: 2; justify-self: end; }
.frow--alt { grid-template-columns: 6fr 5fr; }
.frow--alt .frow__txt { justify-self: end; }
}
.focus__foot { margin-top: var(--s-8); }
/* Über uns */
.about__grid { display: grid; gap: var(--s-6); }
.about__img { margin: 0; }
.about__txt { display: grid; gap: var(--s-4); justify-items: start; max-width: 32rem; }
.about__txt h2 { margin-bottom: var(--s-2); }
@media (min-width: 60rem) {
.about__grid { grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: end; }
.about__img { margin-left: calc(var(--gutter) * -1); }
}
/* Alltag */
.daily__grid { display: grid; gap: var(--s-7); }
.daily__list { list-style: none; padding: 0; margin-block: var(--s-6) var(--s-4); border-top: 1.5px solid var(--c-anthrazit); }
.daily__row {
display: grid; grid-template-columns: 1fr auto; gap: 0.15rem var(--s-4);
padding-block: var(--s-4); border-bottom: var(--hair);
color: inherit; text-decoration: none;
}
.daily__row:hover .daily__t { color: var(--c-petrol); }
.daily__t { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.25; transition: color var(--t-fast); }
.daily__d { grid-column: 1; color: var(--c-text-leise); font-size: var(--fs-small); }
.daily__p { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; white-space: nowrap; }
.daily__img { margin: 0; max-width: 26rem; }
@media (min-width: 60rem) {
.daily__grid { grid-template-columns: 1.3fr 1fr; gap: var(--s-9); align-items: center; }
.daily__img { justify-self: end; width: 100%; }
}
/* Bewertungen */
.rating__body { margin-top: var(--s-5); }
/* Kundenkarte */
.card-teaser { padding-block: var(--section); background: linear-gradient(180deg, var(--c-papier) 0, var(--c-papier) 30%, var(--c-petrol-hell) 30%); }
.card-teaser__grid { display: grid; gap: var(--s-7); align-items: center; }
.card-teaser__visual { display: grid; justify-items: center; }
.card-teaser__txt { display: grid; gap: var(--s-4); justify-items: start; max-width: 34rem; }
@media (min-width: 60rem) {
.card-teaser { background: linear-gradient(90deg, var(--c-petrol-hell) 0, var(--c-petrol-hell) 46%, var(--c-papier) 46%); }
.card-teaser__grid { grid-template-columns: 1fr 1.1fr; gap: var(--s-9); }
}
/* Besuch */
.visit__grid { display: grid; gap: var(--s-7); }
.visit__img { margin: 0; }
.visit__txt { display: grid; gap: var(--s-5); justify-items: start; }
.visit__txt address { font-style: normal; }
@media (min-width: 60rem) {
.visit__grid { grid-template-columns: 1.1fr 1fr; gap: var(--s-9); align-items: start; }
.visit__img { margin-left: calc(var(--gutter) * -1); }
}
</style>