Relaunch Phase 1: Gestaltungs-Grundlage, Kopfleiste, Footer, neue Startseiten-Struktur

Token für Hell und Dunkel, eine Schriftfamilie (Instrument Sans selbst gehostet,
?schrift=a für die Systemschrift), gemeinsames Layout für alle Seiten,
Abschnitte Über uns und Kontakt, Platzhalter für Hero, Kundenportal,
Leistungen und Preise.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/home/KontaktBuehne.tsx

@@ -0,0 +1,32 @@
+import { Link } from "react-router-dom";
+
+/** Spezifikation 7.7: ein Satz, ein Button, E-Mail und Telefon. */
+const KontaktBuehne = () => (
+  <section id="kontakt" className="wk-section wk-section--alt wk-kontakt" aria-labelledby="kontakt-titel">
+    <div className="wk-container wk-kontakt__inhalt">
+      <h2 id="kontakt-titel" className="wk-h2 wk-reveal">
+        Erzählen Sie uns, was Sie vorhaben.
+      </h2>
+      <p className="wk-lead wk-reveal">
+        Zwei Sätze genügen. Wir melden uns spätestens am nächsten Werktag. Im ersten Gespräch klären wir in
+        15&nbsp;Minuten, ob und wie wir helfen können – kostenlos und unverbindlich.
+      </p>
+      <div className="wk-kontakt__aktion wk-reveal">
+        <Link to="/kontakt" className="wk-btn wk-btn--primary">
+          Projekt besprechen
+        </Link>
+      </div>
+      <p className="wk-kontakt__wege">
+        <a href="mailto:support@webklar.com" className="wk-link">
+          support@webklar.com
+        </a>
+        <span aria-hidden>·</span>
+        <a href="tel:+4917623726355" className="wk-link wk-num">
+          0176 23726355
+        </a>
+      </p>
+    </div>
+  </section>
+);
+
+export default KontaktBuehne;