diff --git a/components/About.tsx b/components/About.tsx
index bc44a31..f6063f9 100644
--- a/components/About.tsx
+++ b/components/About.tsx
@@ -31,17 +31,17 @@ export default function About() {
             <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
               Über uns
             </span>
-            <h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-6 leading-tight">
+            <h2 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mt-3 mb-6 leading-tight">
               IT-Expertise,{" "}
               <span className="text-gradient">die Sie weiterbringt</span>
             </h2>
-            <p className="text-slate-400 text-lg leading-relaxed mb-6">
-              MBO-Tech-IT steht für über <strong className="text-white">30 Jahre IT-Erfahrung</strong> &mdash;
+            <p className="text-slate-600 dark:text-slate-400 text-lg leading-relaxed mb-6">
+              MBO-Tech-IT steht für über <strong className="text-slate-900 dark:text-white">30 Jahre IT-Erfahrung</strong> &mdash;
               angefangen bei der einfachen Hardware-Wartung, über den Aufbau großer
               Client-Server-Netzwerke, bis hin zu mehr als 20 Jahren Spezialisierung
-              in der <strong className="text-white">IT-Security</strong>.
+              in der <strong className="text-slate-900 dark:text-white">IT-Security</strong>.
             </p>
-            <p className="text-slate-400 text-lg leading-relaxed mb-8">
+            <p className="text-slate-600 dark:text-slate-400 text-lg leading-relaxed mb-8">
               Heute liegt der Fokus auf modernen Container-Technologien, Cloud-nativer
               Infrastruktur und Virtualisierung. Dieses breite Fundament ermöglicht es,
               Lösungen zu entwickeln, die nicht nur funktionieren &mdash; sondern auch
@@ -53,7 +53,7 @@ export default function About() {
               <p className="text-orange-400 font-black text-sm tracking-[0.2em] uppercase">
                 Digital Denken. Lokal Handeln.
               </p>
-              <p className="text-slate-400 text-sm mt-1">
+              <p className="text-slate-600 dark:text-slate-400 text-sm mt-1">
                 Globales Know-how &mdash; persönlicher Service.
               </p>
             </div>
@@ -72,7 +72,7 @@ export default function About() {
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                     </svg>
                   </div>
-                  <span className="text-slate-300 text-sm">{point}</span>
+                  <span className="text-slate-700 dark:text-slate-300 text-sm">{point}</span>
                 </div>
               ))}
             </div>
@@ -83,14 +83,14 @@ export default function About() {
             {highlights.map((item) => (
               <div
                 key={item.title}
-                className="flex gap-5 p-6 rounded-2xl bg-gray-900 border border-gray-800 hover:border-orange-500/30 transition-all duration-300"
+                className="flex gap-5 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 duration-300"
               >
                 <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-orange-500/10 border border-orange-500/20 flex items-center justify-center">
                   <span className="font-mono text-orange-400 font-black text-sm">{item.icon}</span>
                 </div>
                 <div>
-                  <h3 className="text-white font-bold text-lg mb-2">{item.title}</h3>
-                  <p className="text-slate-400 text-sm leading-relaxed">{item.description}</p>
+                  <h3 className="text-slate-800 dark:text-white font-bold text-lg mb-2">{item.title}</h3>
+                  <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{item.description}</p>
                 </div>
               </div>
             ))}
diff --git a/components/DataSovereignty.tsx b/components/DataSovereignty.tsx
index ab62463..2a8d029 100644
--- a/components/DataSovereignty.tsx
+++ b/components/DataSovereignty.tsx
@@ -70,7 +70,7 @@ const icons: Record<string, ReactElement> = {
 export default function DataSovereignty() {
   return (
     <section id="datensouveraenitaet" 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-[#e8eef4] dark:bg-[#111925]" />
       <div className="absolute inset-0 bg-grid opacity-30" />
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,rgba(239,68,68,0.04)_0%,transparent_60%)]" />
 
@@ -81,11 +81,11 @@ export default function DataSovereignty() {
           <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
             Datenschutz & Souveraenitaet
           </span>
-          <h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-4">
+          <h2 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mt-3 mb-4">
             Ihre Daten gehoeren{" "}
             <span className="text-gradient">Ihnen</span>
           </h2>
-          <p className="text-slate-400 text-lg max-w-2xl mx-auto">
+          <p className="text-slate-600 dark:text-slate-400 text-lg max-w-2xl mx-auto">
             US Cloud Act, DSGVO und Datensouveraenitaet &mdash; warum die Wahl
             Ihrer IT-Infrastruktur ueber mehr als Kosten entscheidet.
           </p>
@@ -100,8 +100,8 @@ export default function DataSovereignty() {
           </div>
           <div>
             <p className="text-red-400 font-bold text-sm mb-1">Wichtig fuer deutsche Unternehmen</p>
-            <p className="text-slate-400 text-sm leading-relaxed">
-              Wer Daten bei US-amerikanischen Anbietern wie Microsoft Azure, Google Cloud oder AWS speichert, kann sich nicht sicher sein, dass diese Daten nicht auf Anordnung US-amerikanischer Behoerden herausgegeben werden &mdash; auch wenn die Server physisch in Deutschland stehen. Der <strong className="text-white">US Cloud Act</strong> hebelt den geografischen Serverstandort als Schutzargument vollstaendig aus.
+            <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
+              Wer Daten bei US-amerikanischen Anbietern wie Microsoft Azure, Google Cloud oder AWS speichert, kann sich nicht sicher sein, dass diese Daten nicht auf Anordnung US-amerikanischer Behoerden herausgegeben werden &mdash; auch wenn die Server physisch in Deutschland stehen. Der <strong className="text-slate-900 dark:text-white">US Cloud Act</strong> hebelt den geografischen Serverstandort als Schutzargument vollstaendig aus.
             </p>
           </div>
         </div>
@@ -109,35 +109,35 @@ export default function DataSovereignty() {
         {/* Risks */}
         <div className="grid md:grid-cols-3 gap-6 mb-16">
           {risks.map((risk) => (
-            <div key={risk.title} className="p-6 rounded-2xl bg-gray-900 border border-red-500/20 hover:border-red-500/40 transition-all duration-300">
+            <div key={risk.title} className="p-6 rounded-2xl bg-white dark:bg-gray-900 border border-red-500/20 hover:border-red-500/40 transition-all duration-300">
               <div className="flex items-center gap-3 mb-4">
                 <div className="w-2 h-2 rounded-full bg-red-400 flex-shrink-0" />
-                <h3 className="text-white font-bold text-base">{risk.title}</h3>
+                <h3 className="text-slate-800 dark:text-white font-bold text-base">{risk.title}</h3>
               </div>
-              <p className="text-slate-400 text-sm leading-relaxed">{risk.text}</p>
+              <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{risk.text}</p>
             </div>
           ))}
         </div>
 
         {/* Divider with CTA */}
         <div className="flex items-center gap-6 mb-16">
-          <div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-700 to-transparent" />
+          <div className="flex-1 h-px bg-gradient-to-r from-transparent via-slate-300 dark: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">
             Unsere Loesung
           </div>
-          <div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-700 to-transparent" />
+          <div className="flex-1 h-px bg-gradient-to-r from-transparent via-slate-300 dark:via-gray-700 to-transparent" />
         </div>
 
         {/* Solutions */}
         <div className="grid md:grid-cols-2 gap-6 mb-16">
           {solutions.map((sol) => (
-            <div key={sol.title} className="flex gap-5 p-6 rounded-2xl bg-gray-900 border border-orange-500/20 hover:border-orange-500/40 transition-all duration-300 hover:-translate-y-0.5">
+            <div key={sol.title} className="flex gap-5 p-6 rounded-2xl bg-white dark:bg-gray-900 border border-orange-500/20 hover:border-orange-500/40 transition-all duration-300 hover:-translate-y-0.5">
               <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-orange-500/10 text-orange-400 flex items-center justify-center">
                 {icons[sol.icon]}
               </div>
               <div>
-                <h3 className="text-white font-bold text-base mb-2">{sol.title}</h3>
-                <p className="text-slate-400 text-sm leading-relaxed">{sol.text}</p>
+                <h3 className="text-slate-800 dark:text-white font-bold text-base mb-2">{sol.title}</h3>
+                <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{sol.text}</p>
               </div>
             </div>
           ))}
@@ -148,10 +148,10 @@ export default function DataSovereignty() {
           <p className="text-orange-400 font-black text-sm tracking-[0.2em] uppercase mb-2">
             Digital Denken. Lokal Handeln.
           </p>
-          <p className="text-white text-xl font-bold mb-2">
+          <p className="text-slate-900 dark:text-white text-xl font-bold mb-2">
             Europaeische Infrastruktur. Volle Kontrolle. Echter Datenschutz.
           </p>
-          <p className="text-slate-400 text-sm max-w-xl mx-auto mb-6">
+          <p className="text-slate-600 dark:text-slate-400 text-sm max-w-xl mx-auto mb-6">
             Mit MBO-Tech-IT erhalten Sie IT-Infrastruktur, die nicht nur
             funktioniert, sondern auch rechtssicher und souveraen ist. Keine
             Abhaengigkeit von US-Konzernen, kein Cloud Act-Risiko.
diff --git a/components/PaperlessSection.tsx b/components/PaperlessSection.tsx
index ce589a8..700980f 100644
--- a/components/PaperlessSection.tsx
+++ b/components/PaperlessSection.tsx
@@ -42,7 +42,7 @@ const colorMap = {
 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-[#e8eef4] dark: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%)]" />
 
@@ -54,11 +54,11 @@ export default function PaperlessSection() {
             <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">
+            <h2 className="text-4xl sm:text-5xl font-black text-slate-900 dark: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">
+            <p className="text-slate-600 dark: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>
@@ -67,15 +67,15 @@ export default function PaperlessSection() {
 
         {/* 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="mb-12 p-6 rounded-2xl bg-white dark: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">
+              <h3 className="text-slate-800 dark:text-white font-bold text-lg mb-2">Was ist Paperless-ngx?</h3>
+              <p className="text-slate-600 dark: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.
@@ -97,10 +97,10 @@ export default function PaperlessSection() {
             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={`p-6 rounded-2xl bg-white dark: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>
+                  <h3 className="text-slate-800 dark:text-white font-bold text-base mb-3">{req.title}</h3>
+                  <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{req.text}</p>
                 </div>
               </ScrollReveal>
             );
@@ -109,24 +109,24 @@ export default function PaperlessSection() {
 
         {/* 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="flex-1 h-px bg-gradient-to-r from-transparent via-slate-300 dark: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 className="flex-1 h-px bg-gradient-to-r from-transparent via-slate-300 dark: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 key={item} className="flex items-center gap-3 p-4 rounded-xl bg-white dark:bg-gray-900 border border-slate-200 dark: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>
+                <span className="text-slate-700 dark:text-slate-300 text-sm">{item}</span>
               </div>
             ))}
           </div>
@@ -138,10 +138,10 @@ export default function PaperlessSection() {
             <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">
+            <p className="text-slate-900 dark: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">
+            <p className="text-slate-600 dark: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.
diff --git a/components/Services.tsx b/components/Services.tsx
index 52e17a5..47db587 100644
--- a/components/Services.tsx
+++ b/components/Services.tsx
@@ -127,10 +127,10 @@ export default function Services() {
           <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
             Leistungen
           </span>
-          <h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-4">
+          <h2 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mt-3 mb-4">
             Unsere Services
           </h2>
-          <p className="text-slate-400 text-lg max-w-2xl mx-auto">
+          <p className="text-slate-600 dark:text-slate-400 text-lg max-w-2xl mx-auto">
             Professionelle IT-Lösungen für moderne Infrastruktur &mdash; von
             der Containerisierung bis zur vollständigen Cloud-Migration.
           </p>
@@ -143,16 +143,16 @@ export default function Services() {
             return (
               <ScrollReveal key={service.title} delay={index * 75}>
                 <div
-                  className={`group p-6 rounded-2xl bg-gray-900 border ${c.border} transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${c.shadow}`}
+                  className={`group p-6 rounded-2xl bg-white dark:bg-gray-900 border ${c.border} transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${c.shadow}`}
                 >
                   <div className={`w-14 h-14 rounded-xl ${c.iconBg} ${c.icon} flex items-center justify-center mb-5`}>
                     {service.icon}
                   </div>
-                  <h3 className="text-xl font-bold text-white mb-3">{service.title}</h3>
-                  <p className="text-slate-400 text-sm leading-relaxed mb-5">{service.description}</p>
+                  <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-3">{service.title}</h3>
+                  <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-5">{service.description}</p>
                   <ul className="space-y-2">
                     {service.features.map((feature) => (
-                      <li key={feature} className="flex items-center gap-2 text-sm text-slate-300">
+                      <li key={feature} className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
                         <span className={`w-1.5 h-1.5 rounded-full ${c.dot} flex-shrink-0`} />
                         {feature}
                       </li>