---
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
  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>
      <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>
        <figcaption>Der Salon in der Kastanienallee 1</figcaption>
      </figure>
    </div>
  </section>

  <!-- 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>

      <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>
          <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>

  <!-- Alltag -->
  <section class="section section--nebel daily" aria-labelledby="daily-h">
    <div class="wrap daily__grid">
      <div>
        <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>
      <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>

  <!-- 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>
      </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>

  <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>