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

src/pages/kontakt.astro

@@ -0,0 +1,97 @@
+---
+import Base from '../layouts/Base.astro';
+import Pic from '../components/Pic.astro';
+import Hours from '../components/Hours.astro';
+import Icon from '../components/Icon.astro';
+import Rating from '../components/Rating.astro';
+import { salon } from '../data/site';
+import salonInnen3 from '../assets/img/salon-innen-3.jpg';
+---
+<Base
+  title="Kontakt und Anfahrt"
+  description="Friseur-Team VK, Kastanienallee 1, 21255 Tostedt. Telefon 04182 2889535, WhatsApp und E-Mail. Öffnungszeiten Dienstag bis Samstag, Route planen."
+  crumbs={[{ name: 'Kontakt', href: '/kontakt' }]}
+  bar="kontakt"
+>
+  <section class="kt">
+    <div class="wrap kt__grid">
+      <div class="kt__txt">
+        <p class="label">Kontakt und Anfahrt</p>
+        <h1>So erreichen <em>Sie uns.</em></h1>
+        <ul class="kt__ways">
+          <li>
+            <a href={salon.phoneHref} class="way">
+              <Icon name="phone" /><span><span class="way__k">Telefon</span><span class="way__v">{salon.phoneDisplay}</span></span>
+            </a>
+          </li>
+          <li>
+            <a href={salon.whatsappHref} rel="noopener" class="way">
+              <Icon name="whatsapp" /><span><span class="way__k">WhatsApp</span><span class="way__v">Nachricht schreiben</span></span>
+            </a>
+          </li>
+          <li>
+            <a href={`mailto:${salon.email}`} class="way">
+              <Icon name="mail" /><span><span class="way__k">E-Mail</span><span class="way__v">{salon.email}</span></span>
+            </a>
+          </li>
+          <li>
+            <a href="/anfrage" class="way">
+              <Icon name="arrow" /><span><span class="way__k">Für Braut, Farbe, Verlängerung</span><span class="way__v">Anfrage stellen</span></span>
+            </a>
+          </li>
+        </ul>
+        <p class="small leise">Termine vergeben wir am Telefon. Wenn wir gerade alle Hände voll zu tun haben, klappt das nicht immer beim ersten Klingeln. Dann schreiben Sie uns gern per WhatsApp.</p>
+      </div>
+      <div class="kt__info">
+        <div class="kt__block">
+          <h2 class="label">Adresse</h2>
+          <address class="kt__addr">{salon.legalName}<br />{salon.street}<br />{salon.zip} {salon.city}</address>
+          <div class="btn-row">
+            <a class="btn btn--ghost" href={salon.routeUrl} rel="noopener"><Icon name="pin" />Google Maps</a>
+            <a class="btn btn--ghost" href={salon.appleMapsUrl} rel="noopener"><Icon name="pin" />Apple Karten</a>
+          </div>
+          <p class="small leise">Die Knöpfe öffnen die Route in Ihrer Karten-App. Eine eingebettete Karte gibt es hier bewusst nicht, damit keine Daten an Dritte gehen.</p>
+        </div>
+        <div class="kt__block">
+          <h2 class="label">Öffnungszeiten</h2>
+          <Hours />
+          <p class="small leise">Stand März 2026, wird vor dem Livegang bestätigt.</p>
+        </div>
+        <div class="kt__block">
+          <h2 class="label">Bewertungen</h2>
+          <Rating />
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section--tight">
+    <div class="wrap">
+      <figure class="kt__img">
+        <div class="frame ratio-169">
+          <Pic src={salonInnen3} alt="Blick durch den Salon mit Bedienplätzen und dem Aufsteller mit dem Salon-Logo" sizes="(min-width: 84rem) 80rem, 100vw" />
+        </div>
+        <figcaption>Der Salon von innen</figcaption>
+      </figure>
+    </div>
+  </section>
+</Base>
+
+<style>
+  .kt { padding-block: var(--s-7) var(--s-8); }
+  .kt__grid { display: grid; gap: var(--s-8); }
+  .kt__txt { display: grid; gap: var(--s-6); align-content: start; }
+  .kt__ways { list-style: none; padding: 0; border-top: 1.5px solid var(--c-anthrazit); }
+  .kt__ways li { border-bottom: var(--hair); }
+  .way { display: flex; gap: var(--s-4); align-items: center; min-height: 4.5rem; padding-block: var(--s-3); color: var(--c-anthrazit); text-decoration: none; }
+  .way > :global(svg) { width: 1.5rem; height: 1.5rem; color: var(--c-petrol); flex: none; }
+  .way > span { display: grid; }
+  .way__k { font-size: var(--fs-small); color: var(--c-text-leise); }
+  .way__v { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.25; overflow-wrap: anywhere; }
+  .way:hover .way__v { color: var(--c-petrol); }
+  .kt__info { display: grid; gap: var(--s-7); align-content: start; }
+  .kt__block { display: grid; gap: var(--s-4); justify-items: start; }
+  .kt__addr { font-style: normal; font-size: var(--fs-lead); line-height: 1.5; }
+  .kt__img { margin: 0; }
+  @media (min-width: 60rem) { .kt__grid { grid-template-columns: 1.2fr 1fr; gap: var(--s-9); } .kt__info { padding-top: var(--s-6); } }
+</style>