# 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