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/deutschland-karte.css

@@ -0,0 +1,169 @@
+/* Deutschland-Karte (Spezifikation 7.1): ruhiger Umriss, roter Punkt auf Falkenstein */
+
+.wk-karte {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 663 / 892;
+  /* Strichstärke in viewBox-Einheiten, damit die Linie bei jeder Kartengröße etwa 1,25 px stark ist
+     (Desktop: Karte ca. 0,75 px je Einheit, Handy ca. 0,43 px je Einheit) */
+  --karte-strich: 1.7;
+  --karte-punkt: 7px;
+  /* Abstand zwischen Beschriftung und Punkt: Die tschechische Grenze (Ascher Zipfel) liegt knapp links unter dem Punkt */
+  --karte-abstand: 22px;
+}
+@media (max-width: 899.98px) {
+  .wk-karte {
+    --karte-strich: 2.9;
+    --karte-punkt: 10px;
+    --karte-abstand: 16px;
+  }
+}
+
+.wk-karte__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.wk-karte__umriss path {
+  fill: none;
+  stroke: var(--line-strong);
+  stroke-width: var(--karte-strich);
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.wk-karte__kern {
+  fill: var(--accent);
+  r: var(--karte-punkt);
+  transform-box: fill-box;
+  transform-origin: center;
+}
+/* Büro (optional, O8): hohler Punkt */
+.wk-karte__punkt--buero .wk-karte__kern {
+  fill: var(--bg);
+  stroke: var(--accent);
+  stroke-width: 2.4;
+}
+/* Der Ring ist im Grundzustand unsichtbar: ohne Bewegung gibt es ihn nicht */
+.wk-karte__ring {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 1.2;
+  opacity: 0;
+  r: var(--karte-punkt);
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+/* Beschriftung als echter Text, links neben dem Punkt: dort liegt die leere Fläche innerhalb von
+   Deutschland. Rechts und darunter verläuft die tschechische Grenze dicht am Punkt. */
+.wk-karte__label {
+  position: absolute;
+  width: max-content;
+  max-width: min(58%, 18rem);
+  text-align: right;
+  /* erste Zeile mittig auf Höhe des Punktes, rechter Rand links vom Punkt */
+  transform: translate(calc(-100% - var(--karte-abstand)), -0.72em);
+  pointer-events: none;
+}
+.wk-karte__titel {
+  font-size: 1rem;
+  line-height: 1.25;
+  font-weight: 600;
+  color: var(--fg);
+  letter-spacing: -0.005em;
+  text-wrap: balance;
+}
+.wk-karte__zusatz {
+  margin-top: 0.3rem;
+  font-size: var(--fs-small);
+  line-height: 1.4;
+  color: var(--fg-muted);
+  text-wrap: balance;
+}
+/* Handy: Die Karte ist klein, links vom Punkt wäre bis zur Westgrenze zu wenig Platz. Dort steht die
+   Beschriftung oberhalb des Punktes, über der leeren Fläche von Thüringen und Sachsen. */
+@media (max-width: 899.98px) {
+  .wk-karte__label {
+    transform: translate(calc(-100% + 6px), calc(-100% - 14px));
+  }
+}
+@media (min-width: 900px) {
+  .wk-karte__titel {
+    font-size: 1.1875rem;
+  }
+  .wk-karte__zusatz {
+    font-size: 0.9375rem;
+    max-width: 24ch;
+    margin-left: auto;
+  }
+}
+
+/* ── Bewegung (nur ohne reduzierte Bewegung) ────────────────────────────────
+   Ablauf: Umriss zeichnet sich in 1,6 s, danach erscheinen Punkt und Beschriftung, dann pulsiert
+   ein Ring dreimal (2,4 s je Durchlauf) und bleibt dann weg. Ausnahmen laut Spezifikation 8.4.
+   Der Umriss wird über stroke-dashoffset gezeichnet (pathLength="1"). Das Muster „1 2“ mit Startversatz
+   1,06 lässt auch bei runden Linienenden nichts übrig, das vor dem Start als Pünktchen sichtbar wäre. */
+@media (prefers-reduced-motion: no-preference) {
+  .wk-karte[data-lauf="wartet"] .wk-karte__umriss path,
+  .wk-karte[data-lauf="laeuft"] .wk-karte__umriss path {
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.06;
+  }
+  .wk-karte[data-lauf="wartet"] .wk-karte__kern,
+  .wk-karte[data-lauf="wartet"] .wk-karte__label {
+    opacity: 0;
+  }
+
+  .wk-karte[data-lauf="laeuft"] .wk-karte__umriss path {
+    animation: wk-karte-zeichnen 1600ms var(--ease) 150ms forwards;
+  }
+  .wk-karte[data-lauf="laeuft"] .wk-karte__kern {
+    animation: wk-karte-punkt 500ms var(--ease) 1750ms backwards;
+  }
+  .wk-karte[data-lauf="laeuft"] .wk-karte__label {
+    animation: wk-karte-label 600ms var(--ease) 1950ms backwards;
+  }
+  .wk-karte[data-lauf="laeuft"] .wk-karte__ring {
+    animation: wk-karte-ring 2400ms var(--ease) 2250ms 3 forwards;
+  }
+}
+
+@keyframes wk-karte-zeichnen {
+  from {
+    stroke-dashoffset: 1.06;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes wk-karte-punkt {
+  from {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes wk-karte-label {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes wk-karte-ring {
+  from {
+    opacity: 0.55;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(2.6);
+  }
+}