Entwurf B: lesbare kursive Serifenschrift statt Schreibschrift; Texte überarbeitet

src/data/home.ts

@@ -30,9 +30,9 @@ export const img = { salonInnen1, salonInnen4, salonEmpfang, salonWarte, teamFot
 
 /** Drei Schwerpunkte */
 export const focus = [
-  { title: 'Braut', sub: 'Frisur und Make-up', text: 'Vom Probestyling bis zum Morgen der Hochzeit. Im Salon oder bei Ihnen vor Ort.', price: `Brautfrisur ${fromPrice(g.braut.items[1])}`, href: '/brautservice', img: brautB, alt: 'Hochsteckfrisur mit Haarschmuck' },
-  { title: 'Balayage & Farbe', sub: 'weich und schonend', text: 'Balayage, Strähnen und Farbwechsel mit Paul Mitchell und Redken. Preise nach Haarlänge.', price: `Balayage ${fromPrice(g.farbe.items[1])}`, href: '/balayage-farbe', img: balA, alt: 'Balayage in Beige mit Wellen' },
-  { title: 'Great Lengths', sub: 'Länge und Fülle', text: 'Haarverlängerung und Haarverdichtung als Master of Great Lengths. Die Beratung ist kostenlos.', price: `Verdichtung ${fromPrice(g.verlaengerung.items[1])}`, href: '/haarverlaengerung', img: glN, alt: 'Langes, dunkles Haar nach einer Verlängerung' },
+  { title: 'Braut', sub: 'Frisur und Make-up', text: 'Wir machen vorher ein Probestyling und stylen Sie am Hochzeitsmorgen im Salon oder bei Ihnen vor Ort.', price: `Brautfrisur ${fromPrice(g.braut.items[1])}`, href: '/brautservice', img: brautB, alt: 'Hochsteckfrisur mit Haarschmuck' },
+  { title: 'Balayage & Farbe', sub: 'weich und schonend', text: 'Balayage, Strähnen oder eine neue Farbe, mit Paul Mitchell und Redken. Der Preis richtet sich nach der Haarlänge.', price: `Balayage ${fromPrice(g.farbe.items[1])}`, href: '/balayage-farbe', img: balA, alt: 'Balayage in Beige mit Wellen' },
+  { title: 'Great Lengths', sub: 'Länge und Fülle', text: 'Mehr Länge oder mehr Fülle mit Echthaar von Great Lengths. Wir sind dafür als Master ausgezeichnet, die Beratung kostet nichts.', price: `Verdichtung ${fromPrice(g.verlaengerung.items[1])}`, href: '/haarverlaengerung', img: glN, alt: 'Langes, dunkles Haar nach einer Verlängerung' },
 ];
 
 /** Alltag (Preisliste kurz) */
@@ -45,13 +45,13 @@ export const daily = [
 
 /** Vorher / Nachher */
 export const cases = [
-  { title: 'Mehr Länge', where: 'Great Lengths', v: glV, n: glN, altV: 'Vorher: schulterlanges, dunkles Haar', altN: 'Nachher: langes, dunkles Haar', note: 'Schulterlang zu lang, Great Lengths Echthaar, ab 650 €' },
-  { title: 'Mehr Fülle', where: 'Great Lengths', v: fV, n: fN, altV: 'Vorher: feines, glattes Haar', altN: 'Nachher: volle Wellen', note: 'Gleiche Länge, deutlich mehr Volumen, ab 350 €' },
-  { title: 'Neues Blond', where: 'Balayage & Farbe', v: cV, n: cN, altV: 'Vorher: mittelbraunes Haar', altN: 'Nachher: helles, kühles Blond', note: 'Aufhellung und Glossing, lang ab 160 €' },
+  { title: 'Mehr Länge', where: 'Great Lengths', v: glV, n: glN, altV: 'Vorher: schulterlanges, dunkles Haar', altN: 'Nachher: langes, dunkles Haar', note: 'Vorher schulterlang, nachher deutlich länger. Verlängerung ab 650 €.' },
+  { title: 'Mehr Fülle', where: 'Great Lengths', v: fV, n: fN, altV: 'Vorher: feines, glattes Haar', altN: 'Nachher: volle Wellen', note: 'Die Länge bleibt, das Haar wird voller. Verdichtung ab 350 €.' },
+  { title: 'Neues Blond', where: 'Balayage & Farbe', v: cV, n: cN, altV: 'Vorher: mittelbraunes Haar', altN: 'Nachher: helles, kühles Blond', note: 'Von Mittelbraun zu einem kühlen Blond. Bei langem Haar ab 160 €.' },
 ];
 
 export const steps = [
-  { t: 'Anfrage schicken', d: 'Sagen Sie uns, was Sie vorhaben, gern mit einem Foto von hinten bei Tageslicht. Das dauert zwei Minuten.' },
-  { t: 'Rückruf in zwei Werktagen', d: 'Wir klären Fragen und den Preisrahmen. Bei Farbe und Great Lengths folgt eine kurze Beratung im Salon.' },
-  { t: 'Termin mit Zeit', d: 'Wir planen so viel Zeit ein, wie Ihr Haar braucht. Wer kurzfristig kann, kommt über die Warteliste oft schneller dran.' },
+  { t: 'Anfrage schicken', d: 'Schreiben Sie uns kurz, was Sie vorhaben. Ein Foto von hinten bei Tageslicht hilft uns sehr.' },
+  { t: 'Rückruf in zwei Werktagen', d: 'Am Telefon klären wir Ihre Fragen und den Preisrahmen. Bei Farbe und Great Lengths sehen wir uns vorher kurz im Salon.' },
+  { t: 'Termin mit Zeit', d: 'Wir planen so viel Zeit ein, wie Ihr Haar braucht. Wenn Sie auch kurzfristig können, rufen wir an, sobald etwas frei wird.' },
 ];

src/pages/entwuerfe.astro

@@ -4,7 +4,7 @@ import Pic from '../components/Pic.astro';
 import { img } from '../data/home';
 const items = [
   { href: '/entwurf-a', n: 'A', t: 'Editorial', d: 'Große Serifenschrift „TEAM VK“, klare Blöcke in Blau und Navy, eckige Knöpfe. Wirkt wie ein Magazin.', pic: img.brautA },
-  { href: '/entwurf-b', n: 'B', t: 'Bögen', d: 'Schreibschrift im Kopf, Bögen wie der Durchgang im Salon, runde Knöpfe. Wirkt weich und persönlich.', pic: img.salonInnen1 },
+  { href: '/entwurf-b', n: 'B', t: 'Bögen', d: 'Große kursive Überschrift, Bögen wie der Durchgang im Salon, runde Knöpfe. Wirkt weich und persönlich.', pic: img.salonInnen1 },
   { href: '/', n: 'C', t: 'Raster', d: 'Die aktuelle Fassung mit feinen Rasterlinien und schmaler Serifenschrift. Alle Unterseiten sind derzeit in diesem Stil.', pic: img.salonInnen4 },
 ];
 ---

src/pages/entwurf-a.astro

@@ -47,7 +47,7 @@ import { img, focus, daily, cases, steps } from '../data/home';
         <figure class="fig a-hero__main" data-clip><Pic src={img.brautA} alt="Brautfrisur mit Wellen und Blütenspangen" sizes="(min-width: 56rem) 34vw, 100vw" eager pos="top" /></figure>
         <div class="a-hero__text" data-rv>
           <p class="a-hero__claim">Schön von außen, <em>glücklich von innen.</em></p>
-          <p>Brautstyling, Balayage und Haarverlängerung mit Great Lengths. Und der Schnitt zwischendurch, in der Kastanienallee 1.</p>
+          <p>Wir sind ein Meisterbetrieb in der Kastanienallee 1 in Tostedt. Unsere Schwerpunkte sind Brautfrisuren, Balayage und Haarverlängerung mit Great Lengths, den Schnitt zwischendurch machen wir natürlich auch.</p>
           <div class="row"><a class="btn" href="/anfrage">Termin anfragen</a><a class="more" href="/neue-kundinnen">Neu bei uns?</a></div>
           <div class="a-hero__proof">
             <span><b>{salon.google.rating} Sterne</b> aus {salon.google.count} Google-Bewertungen</span>
@@ -60,8 +60,8 @@ import { img, focus, daily, cases, steps } from '../data/home';
     <!-- Über uns -->
     <section class="a-about" aria-labelledby="a-about-h">
       <div class="a-about__box" data-rv>
-        <h2 id="a-about-h">Seit {salon.sinceYear} ein Meisterbetrieb, heute ein Team aus acht Menschen.</h2>
-        <p>Friseurmeisterin Veronika Sprangel hat den Salon im {salon.since} eröffnet. Heute arbeiten Friseurinnen und Friseure, ein Barber und ein Auszubildender im Team. Wir arbeiten mit Paul Mitchell, Redken und Great Lengths.</p>
+        <h2 id="a-about-h">Seit {salon.sinceYear} ein Meisterbetrieb, heute sind wir zu acht.</h2>
+        <p>Friseurmeisterin Veronika Sprangel hat den Salon im {salon.since} eröffnet. Heute arbeiten bei uns Friseurinnen und Friseure, ein Barber und ein Auszubildender. Unsere Produkte kommen von Paul Mitchell und Redken, das Echthaar für Verlängerungen von Great Lengths.</p>
         <a class="more" href="/team">Das Team kennenlernen</a>
       </div>
       <figure class="fig a-about__pic" data-clip><Pic src={img.teamFoto} alt="Das Team vom Friseur-Team VK" sizes="(min-width: 56rem) 50vw, 100vw" /></figure>
@@ -90,7 +90,7 @@ import { img, focus, daily, cases, steps } from '../data/home';
     <!-- Ergebnisse -->
     <section class="a-sec a-sec--white" aria-labelledby="a-cases-h">
       <div class="wrap">
-        <div class="a-head"><span class="lbl">Vorher, nachher</span><h2 id="a-cases-h">ERGEBNISSE</h2><p>Echte Kundinnen aus dem Salon. Damit Sie vorab sehen, was bei Haaren wie Ihren möglich ist.</p></div>
+        <div class="a-head"><span class="lbl">Vorher, nachher</span><h2 id="a-cases-h">ERGEBNISSE</h2><p>Alle Fotos zeigen Kundinnen aus unserem Salon. So sehen Sie vorher, was bei Haaren wie Ihren möglich ist.</p></div>
         <div class="a-cases">
           {cases.map((c) => (
             <article class="a-case" data-rv>
@@ -114,7 +114,7 @@ import { img, focus, daily, cases, steps } from '../data/home';
         <div class="a-team__txt">
           <span class="lbl" data-rv>Lernen Sie uns kennen</span>
           <h2 id="a-team-h" data-rv>TEAM</h2>
-          <p data-rv>Erst das Gespräch, dann die Farbe. Veronika Sprangel berät bei Braut, Farbe und Great Lengths selbst und sorgt dafür, dass jede neue Kundin bei der Stylistin landet, die zu ihrem Wunsch passt.</p>
+          <p data-rv>Bei Braut, Farbe und Great Lengths berät Veronika Sprangel selbst. Neue Kundinnen bekommen bei uns die Stylistin, die zu ihrem Wunsch passt, und vor jeder großen Farbe sprechen wir in Ruhe darüber, was möglich ist.</p>
           <div class="a-stats" data-rv>
             <div><b>{salon.sinceYear}</b><span>als Meisterbetrieb eröffnet</span></div>
             <div><b>{salon.teamSize}</b><span>Menschen im Team</span></div>
@@ -144,7 +144,7 @@ import { img, focus, daily, cases, steps } from '../data/home';
     <!-- Neu bei uns -->
     <section class="a-sec" aria-labelledby="a-new-h">
       <div class="wrap">
-        <div class="a-head"><span class="lbl">Wir sind oft ausgebucht</span><h2 id="a-new-h">NEU BEI UNS?</h2><p>Damit Ihr Termin trotzdem gut wird, beginnen große Termine bei uns mit einem Gespräch.</p></div>
+        <div class="a-head"><span class="lbl">Wir sind oft ausgebucht</span><h2 id="a-new-h">NEU BEI UNS?</h2><p>Deshalb beginnen große Termine bei uns mit einer Anfrage und einem kurzen Gespräch. So wissen wir vorher, wie viel Zeit wir für Sie einplanen.</p></div>
         <div class="a-steps">
           {steps.map((s) => <div class="a-step" data-rv><h3>{s.t}</h3><p>{s.d}</p></div>)}
         </div>

src/pages/entwurf-b.astro

@@ -10,7 +10,7 @@ import { img, focus, daily, cases, steps } from '../data/home';
   title="Entwurf B · Friseur-Team VK in Tostedt"
   description="Entwurf B (Bögen) der neuen Startseite vom Friseur-Team VK in Tostedt."
   variant="b"
-  fonts={['pinyon-script.woff2', 'syne-var.woff2', 'albert-sans-var.woff2']}
+  fonts={['newsreader-italic-var.woff2', 'syne-var.woff2', 'albert-sans-var.woff2']}
 >
   <p class="b-top">Neu: Ihre Stempelkarte gibt es jetzt auch im Handy. <a href="/kundenkarte">Mehr erfahren</a></p>
   <header class="b-hd">
@@ -39,8 +39,8 @@ import { img, focus, daily, cases, steps } from '../data/home';
   <main id="inhalt" tabindex="-1">
     <!-- Hero -->
     <section class="b-hero" aria-labelledby="b-h1">
-      <h1 id="b-h1" class="script"><span class="sr">Schön und glücklich. Friseur-Team VK in Tostedt.</span><span aria-hidden="true">Schön &amp; glücklich</span></h1>
-      <p class="b-hero__sub">Ihr Meisterbetrieb in Tostedt für Braut, Balayage und Great Lengths. Und für den Schnitt zwischendurch.</p>
+      <h1 id="b-h1" class="script"><span class="sr">Schön und glücklich. Friseur-Team VK in Tostedt.</span><span aria-hidden="true">Schön <span class="amp">&amp;</span> glücklich</span></h1>
+      <p class="b-hero__sub">Meisterbetrieb in Tostedt für Brautfrisuren, Balayage und Haarverlängerung mit Great Lengths. Den Schnitt zwischendurch machen wir natürlich auch.</p>
       <div class="b-hero__ctas"><a class="pill pill--fill" href="/anfrage">Termin anfragen</a><a class="pill" href="/neue-kundinnen">Neu bei uns?</a></div>
       <div class="b-wait" aria-label="Wartezeiten für neue Kundinnen">
         {waits.items.map((w) => <span class="b-chip"><b>{w.label}</b> {w.value}</span>)}
@@ -69,9 +69,9 @@ import { img, focus, daily, cases, steps } from '../data/home';
     <!-- Team -->
     <section class="wrap b-team" id="team" aria-labelledby="b-team-h">
       <div class="b-team__box" data-rv>
-        <h2 id="b-team-h">Ihre Haarexpertinnen</h2>
+        <h2 id="b-team-h">Das Team</h2>
         <p>Friseurmeisterin Veronika Sprangel hat den Salon im {salon.since} eröffnet. Heute sind wir zu acht: Friseurinnen und Friseure, ein Barber, ein Auszubildender und Dennis Sprangel in der Organisation.</p>
-        <p>Für Farbe und Pflege nutzen wir Paul Mitchell und Redken, für Haarverlängerungen Great Lengths. Wir tragen die Auszeichnung Master of Great Lengths.</p>
+        <p>Für Farbe und Pflege nehmen wir Paul Mitchell und Redken, für Verlängerungen das Echthaar von Great Lengths. Dafür sind wir als Master of Great Lengths ausgezeichnet.</p>
         <div class="b-stats">
           <div><b>{salon.sinceYear}</b><span>gegründet</span></div>
           <div><b>{salon.google.rating}</b><span>{salon.google.count} Google-Bewertungen</span></div>
@@ -83,7 +83,7 @@ import { img, focus, daily, cases, steps } from '../data/home';
 
     <!-- Ergebnisse -->
     <section class="b-sec" aria-labelledby="b-cases-h">
-      <div class="b-head"><span class="script" aria-hidden="true">Vorher, nachher</span><h2 id="b-cases-h">Echte Ergebnisse aus dem Salon</h2><p>Damit Sie vorab sehen, was bei Haaren wie Ihren möglich ist.</p></div>
+      <div class="b-head"><span class="script" aria-hidden="true">Vorher, nachher</span><h2 id="b-cases-h">Kundinnen aus unserem Salon</h2><p>So sehen Sie vorher, was bei Haaren wie Ihren möglich ist.</p></div>
       <div class="wrap">
         <div class="b-cases">
           {cases.map((c) => (
@@ -118,7 +118,7 @@ import { img, focus, daily, cases, steps } from '../data/home';
 
     <!-- Neu bei uns -->
     <section class="b-sec" aria-labelledby="b-new-h">
-      <div class="b-head"><span class="script" aria-hidden="true">Neu bei uns?</span><h2 id="b-new-h">So kommen Sie zu Ihrem Termin</h2><p>Wir sind oft ausgebucht. Damit Ihr Termin trotzdem gut wird, beginnen große Termine mit einem Gespräch.</p></div>
+      <div class="b-head"><span class="script" aria-hidden="true">Neu bei uns?</span><h2 id="b-new-h">So kommen Sie zu Ihrem Termin</h2><p>Wir sind oft ausgebucht. Deshalb beginnen große Termine mit einer Anfrage und einem kurzen Gespräch.</p></div>
       <div class="wrap">
         <div class="b-steps">
           {steps.map((s, i) => <div class="b-step" data-rv><span class="script" aria-hidden="true">{i + 1}</span><h3>{s.t}</h3><p>{s.d}</p></div>)}
@@ -149,7 +149,7 @@ import { img, focus, daily, cases, steps } from '../data/home';
     <div class="b-ct__in">
       <span class="script" aria-hidden="true">Bis bald</span>
       <h2 class="sr">Kontakt</h2>
-      <p>{salon.street}, {salon.zip} {salon.city}. Für Braut, Balayage und Great Lengths starten wir mit einer kurzen Anfrage und rufen zurück.</p>
+      <p>Sie finden uns in der {salon.street} in {salon.city}. Für Braut, Farbe und Great Lengths schicken Sie uns eine kurze Anfrage, wir rufen innerhalb von zwei Werktagen zurück.</p>
       <div class="row"><a class="pill pill--white" href="/anfrage">Anfrage stellen</a><a class="pill pill--ghost-w" href={salon.phoneHref}>{salon.phoneDisplay}</a><a class="pill pill--ghost-w" href={salon.whatsappHref} rel="noopener">WhatsApp</a></div>
       <div class="b-ct__hours">
         {hours.filter((h) => h.day !== 'Sonntag').map((h) => <div><b>{h.day}</b><span>{fmtHours(h)}</span></div>)}

src/styles/variants.css

@@ -192,7 +192,7 @@ a.a-price:hover .a-price__t { color: var(--a-blue); }
   background: var(--b-bg); color: var(--b-ink);
 }
 .v-b h1, .v-b h2, .v-b h3 { font-family: var(--b-sans); font-weight: 700; letter-spacing: -0.012em; text-wrap: balance; color: var(--b-blue); }
-.v-b .script { font-family: var(--f-script); font-weight: 400; letter-spacing: 0; color: var(--b-blue); }
+.v-b .script { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--b-blue); }
 .v-b .muted { color: var(--b-ink-2); }
 .v-b .pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.7rem 1.6rem; border: 1.5px solid var(--b-blue); border-radius: 999px; color: var(--b-blue); font-weight: 600; font-size: 1rem; transition: background-color var(--t-med), color var(--t-med), border-color var(--t-med); }
 .v-b .pill:hover { background: var(--b-blue); color: #fff; }
@@ -225,7 +225,8 @@ a.a-price:hover .a-price__t { color: var(--a-blue); }
 
 /* Hero */
 .b-hero { text-align: center; padding-top: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
-.b-hero h1 { font-family: var(--f-script); font-weight: 400; font-size: clamp(4.25rem, 1.5rem + 11vw, 12rem); line-height: 1.02; letter-spacing: 0; padding-inline: 1rem; }
+.b-hero h1 { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(3.5rem, 1.2rem + 9vw, 9.5rem); line-height: 1; letter-spacing: -0.02em; padding-inline: 1rem; }
+.b-hero h1 .amp { font-style: normal; font-family: var(--b-sans); font-weight: 600; font-size: 0.7em; vertical-align: 0.06em; margin-inline: 0.06em; }
 .b-hero__sub { margin: 0.75rem auto 0; max-width: 34rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.55; padding-inline: 1.25rem; }
 .b-hero__ctas { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; padding-inline: 1.25rem; }
 .b-arc { margin: clamp(2.25rem, 1.5rem + 3vw, 4rem) auto 0; width: min(100%, 87.5rem); aspect-ratio: 2 / 1; max-height: 40rem; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
@@ -240,7 +241,7 @@ a.a-price:hover .a-price__t { color: var(--a-blue); }
 /* Abschnitte */
 .b-sec { padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem); }
 .b-head { text-align: center; display: grid; gap: 0.6rem; justify-items: center; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); padding-inline: 1.25rem; }
-.b-head .script { font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem); line-height: 1; }
+.b-head .script { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); line-height: 1.1; }
 .b-head h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.08; max-width: 40rem; }
 .b-head p { max-width: 36rem; color: var(--b-ink-2); }
 
@@ -294,7 +295,7 @@ a.a-price:hover .a-price__t { color: var(--a-blue); }
 /* Schritte */
 .b-steps { display: grid; gap: 1.25rem; max-width: 72rem; margin-inline: auto; }
 .b-step { background: var(--b-wash); border-radius: 999px 999px 1rem 1rem; padding: 3.25rem 1.75rem 2rem; text-align: center; display: grid; gap: 0.6rem; justify-items: center; }
-.b-step .script { font-size: 3.25rem; line-height: 0.8; }
+.b-step .script { font-size: 2.75rem; line-height: 0.9; }
 .b-step h3 { font-size: 1.3125rem; }
 .b-step p { font-size: 1rem; color: var(--b-ink-2); max-width: 20rem; }
 @media (min-width: 56rem) { .b-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@@ -310,7 +311,7 @@ a.b-price:hover .b-price__t { color: var(--b-blue); }
 /* Kontakt-Bogen */
 .b-ct { padding: 0 clamp(0.75rem, 2vw, 2.5rem) clamp(0.75rem, 2vw, 2.5rem); }
 .b-ct__in { max-width: 87.5rem; margin: 0 auto; background: var(--b-blue); color: #fff; border-radius: clamp(9rem, 22vw, 21rem) clamp(9rem, 22vw, 21rem) 0 0; padding: clamp(6rem, 4rem + 8vw, 10rem) clamp(1.25rem, 1rem + 4vw, 4.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); display: grid; justify-items: center; text-align: center; gap: 1.5rem; }
-.b-ct .script { color: #fff; font-size: clamp(4rem, 2.5rem + 5vw, 6.5rem); line-height: 1; }
+.b-ct .script { color: #fff; font-size: clamp(3.25rem, 2rem + 4vw, 5.5rem); line-height: 1; }
 .b-ct p { max-width: 34rem; font-size: 1.125rem; line-height: 1.6; color: oklch(98% 0.01 245); }
 .b-ct__hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.5rem; width: 100%; max-width: 40rem; text-align: left; margin-top: 1rem; font-size: 1rem; }
 .b-ct__hours div { display: grid; border-top: 1px solid oklch(100% 0 0 / 0.35); padding-top: 0.5rem; }