Relaunch Phase 1: Hero mit Deutschland-Karte, Kundenportal-Bühne, Leistungen, Preise, Unterseiten im neuen Layout

- Hero: wechselnde Überschrift (ein Durchlauf, Pause-Knopf), Karte zeichnet
  sich, roter Punkt auf Falkenstein
- Kundenportal: Bühne mit Browserfenster und Handy-Rahmen (Desktop),
  Wisch-Reihe (Handy), Schrittzeile statt „So arbeiten wir“
- Leistungen als nummerierte Zeilen, Preise aus src/data/abos.ts
- Unterseiten ohne eigenen Kopfbereich, Wortlaut der Rechtstexte unverändert
- Tests für Hero, Kundenportal, Leistungen/Preise und Layout

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

src/components/home/Preise.tsx

@@ -1,10 +1,52 @@
-/** 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>
-);
+import { Link } from "react-router-dom";
+import { ABOS, preisText, weitereArbeitTeile } from "@/data/abos";
+import "./preise.css";
+
+/** Spezifikation 7.5 (Standardtext; der Preisanker für O1 ist noch nicht freigegeben). */
+const EINLEITUNG =
+  "Für Ihr Projekt bekommen Sie vorher ein Angebot mit Preis. Für den Betrieb danach gibt es zwei Abos. " +
+  "Alle Preise sind Endpreise; als Kleinunternehmer (§\u00a019\u00a0UStG) berechnen wir keine Umsatzsteuer.";
+
+/** Spezifikation 7.5: zwei Abos nebeneinander (Handy untereinander). Zahlen kommen aus src/data/abos.ts. */
+const Preise = () => {
+  const [vorher, schritte, nachher] = weitereArbeitTeile();
+
+  return (
+    <section id="preise" className="wk-section wk-section--alt wk-preise" aria-labelledby="preise-titel">
+      <div className="wk-container">
+        <h2 id="preise-titel" className="wk-h2 wk-reveal">
+          Was es kostet. Vorher.
+        </h2>
+        <p className="wk-lead wk-reveal">{EINLEITUNG}</p>
+
+        <div className="wk-preise__raster">
+          {ABOS.map((abo) => (
+            <article key={abo.id} className="wk-abo wk-reveal" aria-labelledby={`abo-${abo.id}`}>
+              <h3 id={`abo-${abo.id}`} className="wk-h3 wk-abo__name">
+                {abo.name}
+              </h3>
+              <p className="wk-abo__preis">
+                <span className="wk-abo__betrag wk-num">{preisText(abo.preis)}</span>{" "}
+                <span className="wk-abo__einheit">im Monat</span>
+              </p>
+              <p className="wk-abo__text">{abo.beschreibung}</p>
+              <p className="wk-abo__aktion">
+                <Link to={abo.link.to} className="wk-link wk-abo__link">
+                  {abo.link.text}
+                </Link>
+              </p>
+            </article>
+          ))}
+        </div>
+
+        <p className="wk-preise__weitere wk-reveal">
+          {vorher}
+          <span className="wk-preise__nicht-trennen">{schritte}</span>
+          {nachher}
+        </p>
+      </div>
+    </section>
+  );
+};
 
 export default Preise;