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/geraete-rahmen.css

@@ -0,0 +1,82 @@
+/*
+ * Geräte-Rahmen (Spezifikation 7.2, "Rahmen und Bildinhalt"): ein Rahmenstil für alle Bilder.
+ * Er hängt nur an den Tokens und trägt so auf hellem wie dunklem Grund. Das Portal selbst ist
+ * dunkel und violett; das ist Bildinhalt, nicht Seitenfarbe.
+ */
+
+.wk-fenster,
+.wk-handy__rahmen {
+  /* sehr weicher Fallschatten statt Leuchtrand; im Dunkeln trägt die Linie den Umriss */
+  --rahmen-schatten: 0 1px 2px rgb(0 0 0 / 0.05), 0 32px 64px -32px rgb(0 0 0 / 0.32);
+}
+.dark .wk-fenster,
+.dark .wk-handy__rahmen {
+  --rahmen-schatten: 0 32px 64px -32px rgb(0 0 0 / 0.7);
+}
+
+/* ── Desktop-Fenster ──────────────────────────────────────────────────── */
+
+.wk-fenster {
+  border: 1px solid var(--line);
+  border-radius: 13px;
+  background: var(--bg);
+  box-shadow: var(--rahmen-schatten);
+  /* clip statt hidden: Vorfahren von sticky-Elementen dürfen nicht hidden sein (8.4) */
+  overflow: clip;
+}
+
+.wk-fenster__leiste {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 38px;
+  padding-inline: 14px;
+  border-bottom: 1px solid var(--line);
+  background: var(--bg);
+  color: var(--fg-muted);
+  font-size: var(--fs-small);
+  line-height: 1;
+  letter-spacing: 0.005em;
+  white-space: nowrap;
+}
+
+.wk-fenster__bild {
+  position: relative;
+  aspect-ratio: 16 / 10;
+  /* Platzhalter, bis das Bild geladen ist: dunkel wie das Portal */
+  background: #0c0b12;
+}
+.wk-fenster__bild img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* ── Handy-Rahmen ─────────────────────────────────────────────────────── */
+
+.wk-handy {
+  width: 100%;
+  /* Maßeinheit cqw = 1 % der Rahmenbreite */
+  container-type: inline-size;
+}
+
+.wk-handy__rahmen {
+  padding: 1.7cqw;
+  border: 1px solid var(--line-strong);
+  border-radius: 11.4cqw;
+  background: #0b0b0d;
+  box-shadow: var(--rahmen-schatten);
+}
+
+.wk-handy__schirm {
+  position: relative;
+  aspect-ratio: 780 / 1688;
+  border-radius: 9.7cqw;
+  background: #0c0b12;
+  overflow: clip;
+}
+.wk-handy__schirm img {
+  display: block;
+  width: 100%;
+  height: auto;
+}