diff --git a/components/PaperlessSection.tsx b/components/PaperlessSection.tsx
new file mode 100644
index 0000000..ce589a8
--- /dev/null
+++ b/components/PaperlessSection.tsx
@@ -0,0 +1,158 @@
+// components/PaperlessSection.tsx
+import ScrollReveal from "@/components/ScrollReveal";
+
+const requirements = [
+  {
+    accent: "orange",
+    title: "DSGVO-konforme Archivierung",
+    text: "Alle Dokumente bleiben auf Ihrer eigenen Infrastruktur — in Deutschland oder bei Hetzner. Kein Zugriff durch Drittanbieter, keine US-Cloud. Vollständig DSGVO-konform.",
+  },
+  {
+    accent: "blue",
+    title: "GoBD-Anforderungen erfüllt",
+    text: "Revisionssichere, unveränderliche Ablage steuerrelevanter Belege. Paperless-ngx protokolliert alle Änderungen und erfüllt die Anforderungen der GoBD an die digitale Buchführung.",
+  },
+  {
+    accent: "orange",
+    title: "Selbstgehostet & unter Kontrolle",
+    text: "Betrieb auf Ihrem eigenen Server oder auf einem deutschen Hetzner-VPS. Sie haben die volle Kontrolle über Ihre Daten — heute, morgen und in 10 Jahren.",
+  },
+];
+
+const services = [
+  "Installation & Konfiguration von Paperless-ngx",
+  "Einrichtung automatischer Dokumentenerkennung (OCR)",
+  "Migration bestehender Dokumentenarchive",
+  "Schulung & Dokumentation für Ihr Team",
+];
+
+const colorMap = {
+  orange: {
+    border: "border-orange-500/20 hover:border-orange-500/50",
+    dot: "bg-orange-400",
+    dotBg: "bg-orange-500/10",
+  },
+  blue: {
+    border: "border-blue-500/20 hover:border-blue-500/50",
+    dot: "bg-blue-400",
+    dotBg: "bg-blue-500/10",
+  },
+};
+
+export default function PaperlessSection() {
+  return (
+    <section id="paperless" className="py-24 px-4 sm:px-6 lg:px-8 relative">
+      <div className="absolute inset-0 bg-[#111925]" />
+      <div className="absolute inset-0 bg-grid opacity-20" />
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(34,197,94,0.04)_0%,transparent_60%)]" />
+
+      <div className="max-w-7xl mx-auto relative">
+
+        {/* Header */}
+        <ScrollReveal>
+          <div className="text-center mb-16">
+            <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
+              Compliance & Dokumentenmanagement
+            </span>
+            <h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-4">
+              DSGVO & GoBD mit{" "}
+              <span className="text-gradient-orange">Paperless-ngx</span>
+            </h2>
+            <p className="text-slate-400 text-lg max-w-2xl mx-auto">
+              Digitale Dokumentenverwaltung, die rechtssicher ist — DSGVO-konform,
+              GoBD-tauglich, selbstgehostet. Kein Abo, keine US-Cloud, volle Kontrolle.
+            </p>
+          </div>
+        </ScrollReveal>
+
+        {/* What is Paperless */}
+        <ScrollReveal delay={100}>
+          <div className="mb-12 p-6 rounded-2xl bg-gray-900 border border-orange-500/20 flex flex-col md:flex-row gap-6 items-start">
+            <div className="flex-shrink-0 w-14 h-14 rounded-xl bg-orange-500/10 text-orange-400 flex items-center justify-center">
+              <svg className="w-7 h-7" 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>
+            <div>
+              <h3 className="text-white font-bold text-lg mb-2">Was ist Paperless-ngx?</h3>
+              <p className="text-slate-400 text-sm leading-relaxed">
+                Paperless-ngx ist ein Open-Source Dokumentenmanagementsystem (DMS), das Ihre Papierflut digitalisiert
+                und durchsuchbar macht. Rechnungen, Verträge, Briefe — automatisch per OCR erkannt, kategorisiert und
+                archiviert. Betrieben auf Ihrer eigenen Infrastruktur, ohne Abhängigkeit von Cloud-Anbietern.
+              </p>
+              <div className="flex flex-wrap gap-2 mt-3">
+                {["Open Source", "Self-Hosted", "OCR", "Volltextsuche", "Automatische Tags"].map((tag) => (
+                  <span key={tag} className="px-3 py-1 rounded-full bg-orange-500/10 border border-orange-500/20 text-orange-400 text-xs font-mono">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </ScrollReveal>
+
+        {/* Requirements grid */}
+        <div className="grid md:grid-cols-3 gap-6 mb-16">
+          {requirements.map((req, index) => {
+            const c = colorMap[req.accent as keyof typeof colorMap];
+            return (
+              <ScrollReveal key={req.title} delay={index * 100}>
+                <div className={`p-6 rounded-2xl bg-gray-900 border ${c.border} transition-all duration-300 h-full`}>
+                  <div className={`w-2 h-2 rounded-full ${c.dot} mb-4`} />
+                  <h3 className="text-white font-bold text-base mb-3">{req.title}</h3>
+                  <p className="text-slate-400 text-sm leading-relaxed">{req.text}</p>
+                </div>
+              </ScrollReveal>
+            );
+          })}
+        </div>
+
+        {/* Divider */}
+        <div className="flex items-center gap-6 mb-12">
+          <div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-700 to-transparent" />
+          <div className="px-6 py-2 rounded-full border border-orange-500/40 bg-orange-500/5 text-orange-400 text-sm font-black tracking-wider whitespace-nowrap">
+            Unser Leistungsumfang
+          </div>
+          <div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-700 to-transparent" />
+        </div>
+
+        {/* Services list */}
+        <ScrollReveal delay={100}>
+          <div className="grid sm:grid-cols-2 gap-4 mb-16">
+            {services.map((item) => (
+              <div key={item} className="flex items-center gap-3 p-4 rounded-xl bg-gray-900 border border-gray-800">
+                <div className="w-5 h-5 rounded-full bg-orange-500 flex items-center justify-center flex-shrink-0">
+                  <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                  </svg>
+                </div>
+                <span className="text-slate-300 text-sm">{item}</span>
+              </div>
+            ))}
+          </div>
+        </ScrollReveal>
+
+        {/* CTA */}
+        <ScrollReveal delay={150}>
+          <div className="p-8 rounded-2xl border border-orange-500/30 bg-orange-500/5 text-center">
+            <p className="text-orange-400 font-black text-sm tracking-[0.2em] uppercase mb-2">
+              Compliance leicht gemacht
+            </p>
+            <p className="text-white text-xl font-bold mb-2">
+              DSGVO & GoBD — ohne Kompromisse.
+            </p>
+            <p className="text-slate-400 text-sm max-w-xl mx-auto mb-6">
+              Wir richten Paperless-ngx auf Ihrer Infrastruktur ein, migrieren
+              Ihre bestehenden Dokumente und schulen Ihr Team. Rechtssicher,
+              selbstgehostet, dauerhaft unter Ihrer Kontrolle.
+            </p>
+            <a href="#contact" className="btn-primary inline-flex px-8 py-3 text-sm">
+              Jetzt Beratung anfragen
+            </a>
+          </div>
+        </ScrollReveal>
+
+      </div>
+    </section>
+  );
+}