diff --git a/app/pakete/nextcloud/page.tsx b/app/pakete/nextcloud/page.tsx
new file mode 100644
index 0000000..71a323d
--- /dev/null
+++ b/app/pakete/nextcloud/page.tsx
@@ -0,0 +1,362 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import Logo from "@/components/Logo";
+
+export const metadata: Metadata = {
+  title: "Nextcloud + Paperless | Pakete & Preise",
+  description:
+    "Nextcloud + Paperless-ngx auf Docker, Kubernetes oder Proxmox: Installation, Hosting und Wartung in Crailsheim. Individuelle Angebote auf Anfrage.",
+  openGraph: {
+    title: "Nextcloud + Paperless | MBO-Tech-IT",
+    description:
+      "Nextcloud + Paperless-ngx auf Docker, Kubernetes oder Proxmox: Installation, Hosting und Wartung in Crailsheim.",
+    url: "https://mbo-tech-it.de/pakete/nextcloud",
+  },
+  alternates: {
+    canonical: "https://mbo-tech-it.de/pakete/nextcloud",
+  },
+};
+
+const packages = [
+  {
+    name: "Starter",
+    subtitle: "Nextcloud + Paperless",
+    tag: "Docker auf Hetzner CX22",
+    price: "174",
+    setup: "Einmalig",
+    monthly: "ab 12",
+    highlight: false,
+    specs: {
+      server: "Hetzner CX22 (2 vCPU, 4 GB RAM)",
+      storage: "40 GB SSD + optionale Storage Box",
+      os: "Ubuntu 24.04 LTS",
+      stack: "Docker + Docker Compose",
+    },
+    includes: [
+      "Nextcloud Installation & Konfiguration",
+      "Paperless-ngx Dokumentenmanagement",
+      "PostgreSQL Datenbank (Docker)",
+      "Redis Cache (Docker)",
+      "Traefik Reverse Proxy + SSL (Let's Encrypt)",
+      "Automatische Backups (Hetzner Snapshot)",
+      "Basis-Monitoring",
+      "1 Monat Support inklusive",
+    ],
+    monthly_costs: [
+      { label: "Hetzner CX22 Server", price: "4,35 €" },
+      { label: "20 GB Snapshot-Backup", price: "0,60 €" },
+      { label: "Gesamt Serverkosten", price: "~5 €" },
+    ],
+  },
+  {
+    name: "Professional",
+    subtitle: "Nextcloud + Paperless",
+    tag: "Docker + Traefik auf Hetzner CAX21",
+    price: "384",
+    setup: "Einmalig",
+    monthly: "ab 22",
+    highlight: true,
+    specs: {
+      server: "Hetzner CAX21 ARM64 (4 vCPU, 8 GB RAM)",
+      storage: "80 GB SSD + BX21 Storage Box (1 TB)",
+      os: "Ubuntu 24.04 LTS",
+      stack: "Docker Compose + Watchtower (Auto-Updates)",
+    },
+    includes: [
+      "Alles aus Starter-Paket",
+      "Nextcloud All-in-One Instanz",
+      "Nextcloud Office (Collabora/OnlyOffice)",
+      "Paperless-ngx mit OCR (deutsch & englisch)",
+      "Nextcloud Talk (Videokommunikation)",
+      "Externe Storage Box für Dokumente (1 TB)",
+      "Automatische Nextcloud-Updates via Watchtower",
+      "E-Mail-Benachrichtigungen bei Systemereignissen",
+      "SMTP-Integration für Nextcloud",
+      "3 Monate Support inklusive",
+    ],
+    monthly_costs: [
+      { label: "Hetzner CAX21 Server", price: "7,69 €" },
+      { label: "BX21 Storage Box (1 TB)", price: "3,20 €" },
+      { label: "Backup-Snapshot", price: "0,80 €" },
+      { label: "Gesamt Serverkosten", price: "~12 €" },
+    ],
+  },
+  {
+    name: "Enterprise",
+    subtitle: "Nextcloud + Paperless Cluster",
+    tag: "Kubernetes auf Proxmox / Hetzner CAX41",
+    price: "1.049",
+    setup: "Einmalig",
+    monthly: "ab 55",
+    highlight: false,
+    specs: {
+      server: "Hetzner CAX41 (16 vCPU, 32 GB RAM) oder Proxmox Cluster",
+      storage: "160 GB SSD + BX31 Storage Box (5 TB)",
+      os: "Ubuntu 24.04 LTS / Proxmox VE 8",
+      stack: "Kubernetes (k3s) + Helm Charts + Longhorn Storage",
+    },
+    includes: [
+      "Alles aus Professional-Paket",
+      "Kubernetes Cluster (k3s) Setup",
+      "Helm-basiertes Nextcloud-Deployment",
+      "Horizontal Pod Autoscaling",
+      "Longhorn Distributed Storage",
+      "Grafana + Prometheus Monitoring",
+      "Zentrales Logging (Loki)",
+      "GitLab CI/CD Pipeline für Updates",
+      "Hochverfügbarkeit (HA) Konfiguration",
+      "SLA: 99,9% Uptime-Garantie",
+      "12 Monate Priority-Support inklusive",
+    ],
+    monthly_costs: [
+      { label: "Hetzner CAX41 Server", price: "30,99 €" },
+      { label: "BX31 Storage Box (5 TB)", price: "10,90 €" },
+      { label: "Load Balancer", price: "5,54 €" },
+      { label: "Monitoring-Stack", price: "~8 €" },
+      { label: "Gesamt Serverkosten", price: "~55 €" },
+    ],
+  },
+];
+
+const maintenancePlans = [
+  {
+    name: "Basic Wartung",
+    price: "27",
+    interval: "/ Monat",
+    features: [
+      "Monatliche System-Updates",
+      "Docker-Image Updates",
+      "Backup-Kontrolle",
+      "E-Mail-Support (5 Werktage Reaktionszeit)",
+    ],
+  },
+  {
+    name: "Standard Wartung",
+    price: "62",
+    interval: "/ Monat",
+    features: [
+      "Wöchentliche Updates & Patches",
+      "Sicherheits-Monitoring 24/7",
+      "Performance-Checks",
+      "Telefon- & E-Mail-Support (2 Werktage)",
+      "Monatlicher Status-Report",
+      "1 Std. Anpassungen inklusive",
+    ],
+  },
+  {
+    name: "Premium Wartung",
+    price: "132",
+    interval: "/ Monat",
+    features: [
+      "Tägliche Updates & Monitoring",
+      "Sofortiger Incident-Response",
+      "Proaktive Performance-Optimierung",
+      "Priority-Support (4 Std. Reaktionszeit)",
+      "Wöchentlicher Status-Report",
+      "3 Std. Anpassungen inklusive",
+      "Quartalsweise Sicherheits-Audits",
+    ],
+  },
+];
+
+export default function NextcloudPage() {
+  return (
+    <div className="min-h-screen bg-[#f0f4f8] dark:bg-[#18212f]">
+      {/* Header */}
+      <header className="bg-white dark:bg-[#111925] border-b border-slate-200 dark:border-gray-800">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-3 group">
+            <Logo className="h-8 w-auto" />
+            <div className="flex flex-col leading-tight">
+              <span className="font-black text-slate-900 dark:text-white text-base tracking-wider uppercase">
+                MBO-<span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">TECH-IT</span>
+              </span>
+              <span className="text-[9px] font-semibold tracking-[0.2em] text-orange-400/70 uppercase hidden sm:block">
+                Digital Denken. Lokal Handeln.
+              </span>
+            </div>
+          </Link>
+          <Link
+            href="/pakete"
+            className="flex items-center gap-2 text-slate-600 dark:text-slate-400 hover:text-orange-400 transition-colors text-sm font-medium"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            Zurück
+          </Link>
+        </div>
+      </header>
+
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+
+        {/* Hero */}
+        <div className="text-center mb-16">
+          <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
+            Beispiel-Paket
+          </span>
+          <h1 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mt-3 mb-4">
+            Nextcloud + Paperless-ngx
+          </h1>
+          <p className="text-slate-600 dark:text-slate-400 text-lg max-w-2xl mx-auto">
+            Ihr persönliches Cloud-Büro: Datei-Management mit Nextcloud und
+            digitales Dokumentenarchiv mit Paperless-ngx &ndash; sicher selbst gehostet
+            auf Hetzner Cloud.
+          </p>
+        </div>
+
+        {/* What is it */}
+        <div className="grid md:grid-cols-2 gap-6 mb-16">
+          <div className="p-6 rounded-2xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800">
+            <div className="w-12 h-12 rounded-xl bg-blue-500/10 text-blue-400 flex items-center justify-center mb-4">
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+              </svg>
+            </div>
+            <h3 className="text-slate-800 dark:text-white font-bold text-lg mb-2">Nextcloud</h3>
+            <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
+              Die freie Alternative zu Dropbox & Google Drive. Dateien, Kalender,
+              Kontakte, Videokonferenzen und Office-Dokumente &ndash; alles auf Ihrem
+              eigenen Server. Volle DSGVO-Konformität, keine Drittanbieter.
+            </p>
+          </div>
+          <div className="p-6 rounded-2xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800">
+            <div className="w-12 h-12 rounded-xl bg-orange-500/10 text-orange-400 flex items-center justify-center mb-4">
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+            </div>
+            <h3 className="text-slate-800 dark:text-white font-bold text-lg mb-2">Paperless-ngx</h3>
+            <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
+              Digitales Dokumentenmanagementsystem mit OCR-Texterkennung. Rechnungen,
+              Verträge, Briefe &ndash; alles durchsuchbar archiviert. Automatische
+              Klassifizierung und Tagging von Dokumenten.
+            </p>
+          </div>
+        </div>
+
+        {/* Packages */}
+        <h2 className="text-3xl font-black text-slate-900 dark:text-white mb-8 text-center">
+          Installations-Pakete
+        </h2>
+        <div className="grid lg:grid-cols-3 gap-6 mb-20">
+          {packages.map((pkg) => (
+            <div
+              key={pkg.name}
+              className={`relative rounded-2xl p-6 border transition-all duration-300 ${
+                pkg.highlight
+                  ? "bg-orange-500/5 border-orange-500/50 shadow-lg shadow-orange-500/10"
+                  : "bg-white dark:bg-gray-900 border-slate-200 dark:border-gray-800"
+              }`}
+            >
+              {pkg.highlight && (
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-orange-500 rounded-full text-white text-xs font-black tracking-wider">
+                  EMPFOHLEN
+                </div>
+              )}
+
+              <div className="mb-5">
+                <span className="text-orange-400 text-xs font-bold tracking-widest uppercase">{pkg.tag}</span>
+                <h3 className="text-2xl font-black text-slate-900 dark:text-white mt-1">{pkg.name}</h3>
+                <p className="text-slate-600 dark:text-slate-400 text-sm">{pkg.subtitle}</p>
+              </div>
+
+              {/* Price on request */}
+              <div className="mb-6">
+                <span className="text-3xl font-black text-orange-400">Auf Anfrage</span>
+                <p className="text-slate-500 text-xs mt-1">Individuelles Angebot nach Beratungsgespräch</p>
+              </div>
+
+              {/* Server specs */}
+              <div className="p-3 rounded-xl bg-slate-100 dark:bg-[#111925] mb-5 space-y-1">
+                <p className="text-xs text-slate-500 font-mono"># Server-Konfiguration</p>
+                <p className="text-xs text-slate-600 dark:text-slate-400 font-mono">{pkg.specs.server}</p>
+                <p className="text-xs text-slate-600 dark:text-slate-400 font-mono">Storage: {pkg.specs.storage}</p>
+                <p className="text-xs text-slate-600 dark:text-slate-400 font-mono">Stack: {pkg.specs.stack}</p>
+              </div>
+
+              {/* Monthly costs breakdown */}
+              <div className="mb-5">
+                <p className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-2">Laufende Serverkosten</p>
+                {pkg.monthly_costs.map((c) => (
+                  <div key={c.label} className="flex justify-between text-xs py-1 border-b border-slate-200 dark:border-gray-800">
+                    <span className="text-slate-600 dark:text-slate-400">{c.label}</span>
+                    <span className={c.label.startsWith("Gesamt") ? "text-orange-400 font-bold" : "text-slate-600 dark:text-slate-400"}>
+                      {c.price}
+                    </span>
+                  </div>
+                ))}
+              </div>
+
+              {/* Includes */}
+              <ul className="space-y-2 mb-6">
+                {pkg.includes.map((item) => (
+                  <li key={item} className="flex items-start gap-2 text-sm text-slate-700 dark:text-slate-300">
+                    <span className="w-4 h-4 rounded-full bg-orange-500 flex items-center justify-center flex-shrink-0 mt-0.5">
+                      <svg className="w-2.5 h-2.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                      </svg>
+                    </span>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+
+              <Link
+                href="/#contact"
+                className={`block w-full py-3 rounded-xl text-center font-bold text-sm transition-colors ${
+                  pkg.highlight
+                    ? "bg-orange-500 hover:bg-orange-600 text-white"
+                    : "bg-slate-100 dark:bg-gray-800 hover:bg-slate-200 dark:hover:bg-gray-700 text-slate-800 dark:text-white border border-slate-300 dark:border-gray-700"
+                }`}
+              >
+                Paket anfragen
+              </Link>
+            </div>
+          ))}
+        </div>
+
+        {/* Maintenance */}
+        <h2 className="text-3xl font-black text-slate-900 dark:text-white mb-3 text-center">Wartungsvertrag</h2>
+        <p className="text-slate-600 dark:text-slate-400 text-center mb-10 max-w-xl mx-auto">
+          Nach der Installation können Sie optional einen Wartungsvertrag abschließen.
+          Wir kümmern uns um Updates, Sicherheit und Betrieb.
+        </p>
+        <div className="grid md:grid-cols-3 gap-6 mb-16">
+          {maintenancePlans.map((plan) => (
+            <div key={plan.name} className="p-6 rounded-2xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 hover:border-orange-500/30 transition-all">
+              <h3 className="text-slate-800 dark:text-white font-bold text-lg mb-1">{plan.name}</h3>
+              <div className="mb-4">
+                <span className="text-3xl font-black text-orange-400">Auf Anfrage</span>
+                <p className="text-slate-500 text-xs mt-1">Individuelles Angebot nach Beratungsgespräch</p>
+              </div>
+              <ul className="space-y-2">
+                {plan.features.map((f) => (
+                  <li key={f} className="flex items-start gap-2 text-sm text-slate-600 dark:text-slate-400">
+                    <span className="w-1.5 h-1.5 rounded-full bg-orange-400 flex-shrink-0 mt-1.5" />
+                    {f}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {/* Note */}
+        <div className="p-6 rounded-2xl border border-blue-500/20 bg-blue-500/5 text-center">
+          <p className="text-slate-600 dark:text-slate-400 text-sm">
+            <strong className="text-slate-900 dark:text-white">Hinweis:</strong> Die Serverkosten bei Hetzner werden
+            direkt von Ihnen bezahlt &ndash; wir installieren und warten, Sie behalten die volle
+            Kontrolle. Alle Preise zzgl. gesetzl. MwSt. Individuelle Angebote auf Anfrage.
+          </p>
+          <Link
+            href="/#contact"
+            className="inline-block mt-4 px-6 py-3 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-xl text-sm transition-colors"
+          >
+            Kostenloses Erstgespräch anfragen
+          </Link>
+        </div>
+      </main>
+    </div>
+  );
+}