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/leistungen.css

@@ -0,0 +1,127 @@
+/* Was wir bauen (Spezifikation 7.3): Überschrift links, nummerierte Textzeilen rechts, ab 900 px.
+   Darunter eine Wisch-Reihe. Keine Karten mit Symbolen, nur dünne Linien und viel Weißraum. */
+
+.wk-leistungen__raster {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  row-gap: 2.5rem;
+}
+
+.wk-leistungen__kopf .wk-h2 {
+  max-width: 10ch;
+}
+
+/* Einleitung: Endzustand ist voller Text; die Wörter dimmen nur, solange die Scroll-Animation läuft */
+.wk-leistungen__einleitung {
+  margin-top: 1.2em;
+  max-width: 24rem;
+  font-size: var(--fs-lead);
+  line-height: 1.38;
+  color: var(--fg);
+  text-wrap: pretty;
+}
+
+/* ── Einträge ──────────────────────────────────────────────────────────── */
+
+.wk-leistung__nr {
+  display: block;
+  font-size: var(--fs-small);
+  font-weight: 600;
+  line-height: 1.43;
+  color: var(--fg-muted);
+}
+.wk-leistung__text {
+  margin-top: 0.55rem;
+  color: var(--fg-muted);
+}
+
+.wk-leistungen__umzug {
+  max-width: 34rem;
+  color: var(--fg-muted);
+}
+.wk-leistungen__umzug strong {
+  font-weight: 600;
+  color: var(--fg);
+}
+
+/* Handy: Wisch-Reihe über die volle Breite, Karten mit dünner Linie oben */
+.wk-leistungen__wisch {
+  margin-inline: calc(-1 * var(--gutter));
+}
+.wk-leistungen__wisch .wk-leistung {
+  height: 100%;
+  padding-top: 1.25rem;
+  padding-right: 0.5rem;
+  border-top: 1px solid var(--line-strong);
+}
+.wk-leistungen__wisch .wk-leistung__nr {
+  margin-bottom: 2rem;
+}
+
+/* Desktop: zwei Spalten, Liste rechts */
+@media (min-width: 900px) {
+  .wk-leistungen__raster {
+    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+    column-gap: clamp(3rem, 7vw, 7rem);
+    row-gap: 0;
+  }
+  .wk-leistungen__kopf {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+  }
+  .wk-leistungen__liste {
+    grid-column: 2;
+    grid-row: 1;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    /* die erste Linie steht auf Höhe der Überschrift */
+    margin-top: 0.6rem;
+  }
+  .wk-leistungen__zeile {
+    border-top: 1px solid var(--line);
+  }
+  .wk-leistungen__zeile:last-child {
+    border-bottom: 1px solid var(--line);
+  }
+  .wk-leistungen__zeile .wk-leistung {
+    display: grid;
+    grid-template-columns: 3.5rem minmax(0, 1fr);
+    column-gap: 1rem;
+    align-items: baseline;
+    padding-block: 2.1rem 2.35rem;
+  }
+  .wk-leistungen__zeile .wk-leistung__text {
+    max-width: 32rem;
+  }
+  .wk-leistungen__umzug {
+    grid-column: 2;
+    grid-row: 2;
+    padding-top: 2.25rem;
+    padding-left: 4.5rem;
+  }
+}
+
+/* ── Wort für Wort aufhellen: nur mit Scroll-Animationen und ohne reduzierte Bewegung ───────────
+   Alle Wörter hängen an der Ansichts-Zeitleiste des Absatzes, jedes Wort bekommt einen etwas
+   späteren Abschnitt. Gedimmt 0,18 → voll; nur opacity, wie in Spezifikation 8.4 vorgesehen. */
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: view()) {
+    .wk-leistungen__einleitung {
+      view-timeline: --wk-leistungen-einleitung block;
+    }
+    .wk-leistungen__wort {
+      animation: wk-leistungen-wort linear both;
+      animation-timeline: --wk-leistungen-einleitung;
+      animation-range: cover calc(12% + var(--i) * 24% / var(--n)) cover calc(24% + var(--i) * 24% / var(--n));
+    }
+  }
+}
+@keyframes wk-leistungen-wort {
+  from {
+    opacity: 0.18;
+  }
+  to {
+    opacity: 1;
+  }
+}