docs: add design spec for Pakete overview + Zero-Trust-VPN page

docs/superpowers/specs/2026-06-29-pakete-vpn-design.md

@@ -0,0 +1,80 @@
+# Design: Pakete & Preise — Service-Übersicht + Zero-Trust-VPN
+
+**Datum:** 2026-06-29  
+**Status:** Approved
+
+## Ziel
+
+Die `/pakete`-Seite wird zur Service-Übersicht mit klickbaren Kacheln umgebaut. Der bestehende Nextcloud + Paperless-Inhalt zieht auf `/pakete/nextcloud` um. Neu hinzu kommt `/pakete/vpn` mit dem Zero-Trust-VPN-Angebot aus dem MBO-Netbird-PDF.
+
+## Architektur
+
+```
+app/pakete/
+  page.tsx          ← neue Übersichtsseite mit 2 Service-Kacheln
+  nextcloud/
+    page.tsx        ← bestehender Inhalt verschoben
+  vpn/
+    page.tsx        ← neue VPN-Detailseite
+```
+
+Alle drei Seiten sind React Server Components (kein `"use client"` nötig).
+
+## 1. `/pakete/page.tsx` — Übersichtsseite
+
+**Aufbau:**
+- Header (identisch mit bestehender Seite)
+- Hero: „Pakete & Preise" + kurze Intro-Zeile
+- 2-Spalten-Grid mit kompakten Kacheln (Icon + Titel + Kurzbeschreibung + Link-Pfeil)
+  - **Nextcloud + Paperless** — Cloud-Icon, Beschreibung: „Eigene Cloud & digitales Dokumentenarchiv auf Ihrem Server", Link → `/pakete/nextcloud`
+  - **Zero-Trust-VPN** — Schloss-Icon, Beschreibung: „Sicherer Fernzugriff für alle Mitarbeiter. Managed Netbird mit WireGuard — Server in Deutschland", Link → `/pakete/vpn`
+- Kleiner CTA unten: „Kostenloses Erstgespräch anfragen" → `/#contact`
+
+**Style:** Gleicher Seitenchrome wie bisherige Pakete-Seite (`bg-[#f0f4f8] dark:bg-[#18212f]`). Kacheln sind anklickbare `<Link>`-Elemente mit Hover-Effekt (`hover:border-orange-500/50`).
+
+## 2. `/pakete/nextcloud/page.tsx` — Nextcloud-Detailseite
+
+Identischer Inhalt aus dem aktuellen `/pakete/page.tsx`. Einzige Änderung: „← Zurück"-Link zeigt auf `/pakete` statt `/`.
+
+Metadata: Titel und Description unverändert.
+
+## 3. `/pakete/vpn/page.tsx` — VPN-Detailseite
+
+Gleicher Seitenchrome wie Nextcloud-Seite. Inhalt aus `docs/MBO-Netbird.pdf`.
+
+**Aufbau:**
+
+1. **Hero**
+   - Label: `NEU: ZERO-TRUST-VPN`
+   - H1: „Ihre Mitarbeiter. Überall. Sicher verbunden."
+   - Subtext: „Kein offener Port. Kein VPN-Konzentrator. Keine Fritzbox-Bastelei. Von uns eingerichtet, betrieben und überwacht."
+
+2. **Was ist das? (2 Info-Karten)**
+   - *Zero Trust* — Jeder Mitarbeiter sieht nur, was er darf. Granulare Rechteverwaltung statt „einmal drin = alles sehen".
+   - *WireGuard* — Modernes VPN-Protokoll: schneller und sicherer als klassisches IPSec/OpenVPN. Militärgrade-Verschlüsselung.
+
+3. **Pakete (3 Preiskarten)**
+
+   | Paket | Monatlich | Einrichtung | Nutzer | Geräte | Highlight |
+   |---|---|---|---|---|---|
+   | Starter | 89 €/Monat | 490 € einmalig | bis 5 | bis 15 | — |
+   | Business | 149 €/Monat | 790 € einmalig | bis 20 | bis 50 | ⭐ Empfohlen |
+   | Professional | 249 €/Monat | 1.290 € einmalig | bis 50 | bis 150 | — |
+
+   **Starter umfasst:** Einrichtung & Client-Rollout, Sicherer Fernzugriff, Monitoring & Updates, E-Mail-Support  
+   **Business umfasst:** Alles aus Starter, Mehrere Standorte, Zugriffs-Protokollierung, Telefon-Support  
+   **Professional umfasst:** Alles aus Business, SLA 4h Reaktionszeit, NIS2-Dokumentation, Hochverfügbarkeit
+
+4. **Hinweis-Box** — „Alle Preise zzgl. gesetzl. MwSt. Individuelle Angebote auf Anfrage."
+
+5. **CTA** — „Kostenloses Erstgespräch anfragen" → `/#contact`
+
+**Metadata:**  
+- Title: `Zero-Trust-VPN | MBO-Tech-IT`  
+- Description: `Managed Netbird VPN mit WireGuard für Ihr Unternehmen — sicherer Fernzugriff, DSGVO-konform, Server in Deutschland. Feste Monatspauschale ab 89 €.`
+
+## Nicht im Scope
+
+- Keine Änderung an der Startseite (`app/page.tsx`)
+- Kein Umbau der Wartungsplan-Sektion (bleibt bei Nextcloud)
+- Kein dynamisches CMS für die neuen Seiten