diff --git a/app/pakete/page.tsx b/app/pakete/page.tsx
index 7131cd5..57c3e67 100644
--- a/app/pakete/page.tsx
+++ b/app/pakete/page.tsx
@@ -152,14 +152,14 @@ const maintenancePlans = [
 
 export default function PaketePage() {
   return (
-    <div className="min-h-screen bg-[#18212f]">
+    <div className="min-h-screen bg-[#f0f4f8] dark:bg-[#18212f]">
       {/* Header */}
-      <header className="bg-[#111925] border-b border-gray-800">
+      <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-white text-base tracking-wider uppercase">
+              <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">
@@ -169,7 +169,7 @@ export default function PaketePage() {
           </Link>
           <Link
             href="/"
-            className="flex items-center gap-2 text-slate-400 hover:text-orange-400 transition-colors text-sm font-medium"
+            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" />
@@ -186,10 +186,10 @@ export default function PaketePage() {
           <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-white mt-3 mb-4">
+          <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-400 text-lg max-w-2xl mx-auto">
+          <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.
@@ -198,27 +198,27 @@ export default function PaketePage() {
 
         {/* What is it */}
         <div className="grid md:grid-cols-2 gap-6 mb-16">
-          <div className="p-6 rounded-2xl bg-gray-900 border border-gray-800">
+          <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-white font-bold text-lg mb-2">Nextcloud</h3>
-            <p className="text-slate-400 text-sm leading-relaxed">
+            <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-gray-900 border border-gray-800">
+          <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-white font-bold text-lg mb-2">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">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.
@@ -227,7 +227,7 @@ export default function PaketePage() {
         </div>
 
         {/* Packages */}
-        <h2 className="text-3xl font-black text-white mb-8 text-center">
+        <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">
@@ -237,7 +237,7 @@ export default function PaketePage() {
               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-gray-900 border-gray-800"
+                  : "bg-white dark:bg-gray-900 border-slate-200 dark:border-gray-800"
               }`}
             >
               {pkg.highlight && (
@@ -248,14 +248,14 @@ export default function PaketePage() {
 
               <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-white mt-1">{pkg.name}</h3>
-                <p className="text-slate-400 text-sm">{pkg.subtitle}</p>
+                <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>
 
               {/* Setup price */}
               <div className="mb-2 flex items-baseline gap-1.5">
                 <span className="text-xs text-slate-500 font-semibold tracking-wide">ab</span>
-                <span className="text-4xl font-black text-white">{pkg.price} €</span>
+                <span className="text-4xl font-black text-slate-900 dark:text-white">{pkg.price} €</span>
                 <span className="text-slate-400 text-sm">{pkg.setup}</span>
               </div>
               <p className="text-slate-500 text-xs mb-6">
@@ -263,20 +263,20 @@ export default function PaketePage() {
               </p>
 
               {/* Server specs */}
-              <div className="p-3 rounded-xl bg-[#111925] mb-5 space-y-1">
+              <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-400 font-mono">{pkg.specs.server}</p>
-                <p className="text-xs text-slate-400 font-mono">Storage: {pkg.specs.storage}</p>
-                <p className="text-xs text-slate-400 font-mono">Stack: {pkg.specs.stack}</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-gray-800">
-                    <span className="text-slate-400">{c.label}</span>
-                    <span className={c.label.startsWith("Gesamt") ? "text-orange-400 font-bold" : "text-slate-400"}>
+                  <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>
@@ -286,7 +286,7 @@ export default function PaketePage() {
               {/* 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-300">
+                  <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" />
@@ -302,7 +302,7 @@ export default function PaketePage() {
                 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-gray-800 hover:bg-gray-700 text-white border border-gray-700"
+                    : "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
@@ -312,23 +312,23 @@ export default function PaketePage() {
         </div>
 
         {/* Maintenance */}
-        <h2 className="text-3xl font-black text-white mb-3 text-center">Wartungsvertrag</h2>
-        <p className="text-slate-400 text-center mb-10 max-w-xl mx-auto">
+        <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-gray-900 border border-gray-800 hover:border-orange-500/30 transition-all">
-              <h3 className="text-white font-bold text-lg mb-1">{plan.name}</h3>
+            <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 flex items-baseline gap-1.5">
                 <span className="text-xs text-slate-500 font-semibold tracking-wide">ab</span>
                 <span className="text-3xl font-black text-orange-400">{plan.price} €</span>
-                <span className="text-slate-400 text-sm">{plan.interval}</span>
+                <span className="text-slate-600 dark:text-slate-400 text-sm">{plan.interval}</span>
               </div>
               <ul className="space-y-2">
                 {plan.features.map((f) => (
-                  <li key={f} className="flex items-start gap-2 text-sm text-slate-400">
+                  <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>
@@ -340,8 +340,8 @@ export default function PaketePage() {
 
         {/* Note */}
         <div className="p-6 rounded-2xl border border-blue-500/20 bg-blue-500/5 text-center">
-          <p className="text-slate-400 text-sm">
-            <strong className="text-white">Hinweis:</strong> Die Serverkosten bei Hetzner werden
+          <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>