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/HeroKarte.tsx

@@ -0,0 +1,10 @@
+/** Platzhalter: wird im Relaunch-Workflow gebaut (Spezifikation Abschnitt 7). */
+const HeroKarte = () => (
+  <section className="wk-section">
+    <div className="wk-container">
+      <h2 className="wk-h2">HeroKarte</h2>
+    </div>
+  </section>
+);
+
+export default HeroKarte;

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;

src/components/home/Kundenportal.tsx

@@ -0,0 +1,10 @@
+/** Platzhalter: wird im Relaunch-Workflow gebaut (Spezifikation Abschnitt 7). */
+const Kundenportal = () => (
+  <section id="kundenportal" className="wk-section">
+    <div className="wk-container">
+      <h2 className="wk-h2">Kundenportal</h2>
+    </div>
+  </section>
+);
+
+export default Kundenportal;

src/components/home/Leistungen.tsx

@@ -0,0 +1,10 @@
+/** Platzhalter: wird im Relaunch-Workflow gebaut (Spezifikation Abschnitt 7). */
+const Leistungen = () => (
+  <section id="leistungen" className="wk-section">
+    <div className="wk-container">
+      <h2 className="wk-h2">Leistungen</h2>
+    </div>
+  </section>
+);
+
+export default Leistungen;

src/components/home/Preise.tsx

@@ -0,0 +1,10 @@
+/** Platzhalter: wird im Relaunch-Workflow gebaut (Spezifikation Abschnitt 7). */
+const Preise = () => (
+  <section id="preise" className="wk-section">
+    <div className="wk-container">
+      <h2 className="wk-h2">Preise</h2>
+    </div>
+  </section>
+);
+
+export default Preise;

src/components/home/UeberUns.tsx

@@ -0,0 +1,25 @@
+import { Link } from "react-router-dom";
+
+/** Spezifikation 7.6: wer dahinter steckt. Keine Fotos, bis echte Teamfotos vorliegen. */
+const UeberUns = () => (
+  <section id="ueber-uns" className="wk-section" aria-labelledby="ueber-uns-titel">
+    <div className="wk-container wk-ueber-uns">
+      <h2 id="ueber-uns-titel" className="wk-h2 wk-reveal">
+        Wer hinter WEBklar steckt.
+      </h2>
+      <div className="wk-reveal">
+        <p className="wk-lead">
+          Wir sind ein kleines Team aus Winnweiler in der Pfalz. Sie sprechen bei uns direkt mit den Leuten, die Ihre
+          Website bauen.
+        </p>
+        <p className="wk-ueber-uns__link">
+          <Link to="/ueber-uns" className="wk-link">
+            Mehr über uns
+          </Link>
+        </p>
+      </div>
+    </div>
+  </section>
+);
+
+export default UeberUns;

src/components/home/home.css

@@ -0,0 +1,46 @@
+/* Kleine Abschnitte der Startseite: Über uns und Kontakt */
+
+.wk-ueber-uns {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
+  gap: 2rem 4rem;
+  align-items: start;
+}
+.wk-ueber-uns__link {
+  margin-top: 1.5rem;
+}
+@media (max-width: 899.98px) {
+  .wk-ueber-uns {
+    grid-template-columns: 1fr;
+  }
+}
+
+.wk-kontakt__inhalt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.wk-kontakt .wk-h2 {
+  max-width: 16ch;
+}
+.wk-kontakt .wk-lead {
+  max-width: 38rem;
+}
+.wk-kontakt__aktion {
+  margin-top: 2.25rem;
+}
+.wk-kontakt__wege {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem 0.9rem;
+  margin-top: 1.75rem;
+  color: var(--fg-muted);
+}
+.wk-kontakt__wege a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+}