diff --git a/components/Contact.tsx b/components/Contact.tsx
index d031829..1d4ffd7 100644
--- a/components/Contact.tsx
+++ b/components/Contact.tsx
@@ -62,7 +62,7 @@ export default function Contact() {
 
   return (
     <section id="contact" 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-40" />
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(249,115,22,0.07)_0%,transparent_70%)]" />
 
@@ -72,16 +72,16 @@ export default function Contact() {
           <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
             Kontakt
           </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">
             Projekt anfragen
           </h2>
-          <p className="text-slate-400 text-lg max-w-xl mx-auto">
+          <p className="text-slate-600 dark:text-slate-400 text-lg max-w-xl mx-auto">
             Sie haben ein IT-Projekt oder eine Frage? Schreiben Sie uns &mdash;
             wir melden uns schnellstmöglich bei Ihnen.
           </p>
         </div>
 
-        <div className="bg-gray-900 border border-gray-800 rounded-3xl p-8 sm:p-10">
+        <div className="bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 rounded-3xl p-8 sm:p-10">
           {status === "success" ? (
             <div className="flex flex-col items-center justify-center py-10 text-center">
               <div className="w-16 h-16 rounded-full bg-orange-500/10 border border-orange-500/30 flex items-center justify-center mb-6">
@@ -89,8 +89,8 @@ export default function Contact() {
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                 </svg>
               </div>
-              <h3 className="text-2xl font-bold text-white mb-2">Anfrage gesendet!</h3>
-              <p className="text-slate-400 mb-8">
+              <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">Anfrage gesendet!</h3>
+              <p className="text-slate-600 dark:text-slate-400 mb-8">
                 Wir haben Ihre Nachricht erhalten und melden uns schnellstmöglich bei Ihnen.
               </p>
               <button
@@ -110,25 +110,25 @@ export default function Contact() {
             <form className="space-y-6" onSubmit={handleSubmit}>
               <div className="grid sm:grid-cols-2 gap-6">
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-2">Name</label>
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Name</label>
                   <input
                     type="text"
                     required
                     value={name}
                     onChange={(e) => setName(e.target.value)}
                     placeholder="Max Mustermann"
-                    className="w-full px-4 py-3 rounded-xl bg-[#111925] border border-gray-700 text-white placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors"
+                    className="w-full px-4 py-3 rounded-xl bg-slate-50 dark:bg-[#111925] border border-slate-300 dark:border-gray-700 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors"
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-2">E-Mail</label>
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">E-Mail</label>
                   <input
                     type="email"
                     required
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
                     placeholder="max@beispiel.de"
-                    className="w-full px-4 py-3 rounded-xl bg-[#111925] border border-gray-700 text-white placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors"
+                    className="w-full px-4 py-3 rounded-xl bg-slate-50 dark:bg-[#111925] border border-slate-300 dark:border-gray-700 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors"
                   />
                 </div>
               </div>
@@ -139,7 +139,7 @@ export default function Contact() {
                   required
                   value={betreff}
                   onChange={(e) => setBetreff(e.target.value)}
-                  className="w-full px-4 py-3 rounded-xl bg-[#111925] border border-gray-700 text-white focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors appearance-none"
+                  className="w-full px-4 py-3 rounded-xl bg-slate-50 dark:bg-[#111925] border border-slate-300 dark:border-gray-700 text-slate-900 dark:text-white focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors appearance-none"
                 >
                   <option value="">Thema auswählen...</option>
                   <option value="docker">Docker Installation</option>
@@ -158,7 +158,7 @@ export default function Contact() {
                   value={nachricht}
                   onChange={(e) => setNachricht(e.target.value)}
                   placeholder="Beschreiben Sie Ihr Projekt oder Ihre Anfrage..."
-                  className="w-full px-4 py-3 rounded-xl bg-[#111925] border border-gray-700 text-white placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors resize-none"
+                  className="w-full px-4 py-3 rounded-xl bg-slate-50 dark:bg-[#111925] border border-slate-300 dark:border-gray-700 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors resize-none"
                 />
               </div>
 
@@ -197,9 +197,9 @@ export default function Contact() {
 
           {/* Divider */}
           <div className="flex items-center gap-4 my-8">
-            <div className="flex-1 h-px bg-gray-800" />
-            <span className="text-slate-600 text-sm">oder direkt</span>
-            <div className="flex-1 h-px bg-gray-800" />
+            <div className="flex-1 h-px bg-slate-200 dark:bg-gray-800" />
+            <span className="text-slate-400 dark:text-slate-600 text-sm">oder direkt</span>
+            <div className="flex-1 h-px bg-slate-200 dark:bg-gray-800" />
           </div>
 
           {/* Contact info */}
@@ -208,7 +208,7 @@ export default function Contact() {
               <a
                 key={item.label}
                 href={item.href}
-                className="flex items-center gap-3 text-slate-300 hover:text-orange-400 transition-colors duration-200 group"
+                className="flex items-center gap-3 text-slate-700 dark:text-slate-300 hover:text-orange-400 transition-colors duration-200 group"
               >
                 <span className="w-10 h-10 rounded-lg bg-orange-500/10 border border-orange-500/20 flex items-center justify-center text-orange-400 group-hover:bg-orange-500/20 transition-colors duration-200">
                   {item.icon}
diff --git a/components/LegalLayout.tsx b/components/LegalLayout.tsx
index b3bfb73..4f7118a 100644
--- a/components/LegalLayout.tsx
+++ b/components/LegalLayout.tsx
@@ -9,7 +9,7 @@ interface LegalLayoutProps {
 
 export default function LegalLayout({ title, children }: LegalLayoutProps) {
   return (
-    <div className="min-h-screen bg-[#18212f]">
+    <div className="min-h-screen bg-[#f0f4f8] dark:bg-[#18212f]">
       {/* Top tagline bar */}
       <div className="bg-orange-500 py-2 px-4 text-center">
         <span className="text-white text-xs font-black tracking-[0.2em] uppercase">
@@ -18,13 +18,13 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
       </div>
 
       {/* Header – matches main site */}
-      <header className="bg-[#111925] border-b border-gray-800 sticky top-0 z-50">
+      <header className="bg-white dark:bg-[#111925] border-b border-slate-200 dark:border-gray-800 sticky top-0 z-50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
             <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
@@ -37,7 +37,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
             </Link>
 
             <div className="flex items-center gap-6">
-              <Link href="/pakete" className="text-slate-400 hover:text-blue-400 transition-colors text-sm font-medium hidden sm:block">
+              <Link href="/pakete" className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm font-medium hidden sm:block">
                 Pakete & Preise
               </Link>
               <Link href="/#contact" className="btn-nav">
@@ -58,7 +58,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
       </header>
 
       {/* Page hero */}
-      <div className="relative bg-[#111925] border-b border-gray-800 overflow-hidden">
+      <div className="relative bg-[#e8eef4] dark:bg-[#111925] border-b border-slate-200 dark:border-gray-800 overflow-hidden">
         <div className="absolute inset-0 bg-grid opacity-40" />
         <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(249,115,22,0.08)_0%,transparent_60%)]" />
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative">
@@ -67,7 +67,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
             <span>/</span>
             <span className="text-orange-400">{title}</span>
           </div>
-          <h1 className="text-4xl sm:text-5xl font-black text-white">{title}</h1>
+          <h1 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white">{title}</h1>
           <div className="w-16 h-1 bg-orange-500 rounded mt-4" />
         </div>
       </div>
@@ -81,7 +81,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
               <p className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4">Rechtliches</p>
               <Link
                 href="/impressum"
-                className="flex items-center gap-2 px-4 py-3 rounded-xl bg-gray-900 border border-gray-800 hover:border-orange-500/40 text-slate-300 hover:text-orange-400 transition-all text-sm font-medium group"
+                className="flex items-center gap-2 px-4 py-3 rounded-xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 hover:border-orange-500/40 text-slate-600 dark:text-slate-300 hover:text-orange-400 transition-all text-sm font-medium group"
               >
                 <svg className="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
@@ -90,7 +90,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
               </Link>
               <Link
                 href="/datenschutz"
-                className="flex items-center gap-2 px-4 py-3 rounded-xl bg-gray-900 border border-gray-800 hover:border-orange-500/40 text-slate-300 hover:text-orange-400 transition-all text-sm font-medium group"
+                className="flex items-center gap-2 px-4 py-3 rounded-xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 hover:border-orange-500/40 text-slate-600 dark:text-slate-300 hover:text-orange-400 transition-all text-sm font-medium group"
               >
                 <svg className="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
@@ -98,7 +98,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
                 Datenschutz
               </Link>
               <div className="mt-6 p-4 rounded-xl bg-orange-500/5 border border-orange-500/20">
-                <p className="text-xs text-slate-400 leading-relaxed">
+                <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
                   Fragen zu Datenschutz oder rechtlichen Themen?
                 </p>
                 <Link href="/#contact" className="text-xs text-orange-400 font-bold mt-2 block hover:text-orange-300 transition-colors">
@@ -110,7 +110,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
 
           {/* Main content */}
           <div className="lg:col-span-3">
-            <div className="bg-gray-900 border border-gray-800 rounded-2xl p-8 sm:p-10 legal-content">
+            <div className="bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 rounded-2xl p-8 sm:p-10 legal-content">
               {children}
             </div>
           </div>
@@ -118,12 +118,12 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
       </main>
 
       {/* Footer */}
-      <footer className="bg-[#111925] border-t border-gray-800 mt-8">
+      <footer className="bg-[#e8eef4] dark:bg-[#111925] border-t border-slate-200 dark:border-gray-800 mt-8">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col sm:flex-row items-center justify-between gap-4">
-          <p className="text-slate-600 text-sm">
+          <p className="text-slate-500 dark:text-slate-600 text-sm">
             &copy; {new Date().getFullYear()} MBO-Tech-IT &mdash; Digital Denken. Lokal Handeln.
           </p>
-          <div className="flex gap-6 text-sm text-slate-600">
+          <div className="flex gap-6 text-sm text-slate-500 dark:text-slate-600">
             <Link href="/impressum" className="hover:text-orange-400 transition-colors">Impressum</Link>
             <Link href="/datenschutz" className="hover:text-orange-400 transition-colors">Datenschutz</Link>
             <Link href="/" className="hover:text-orange-400 transition-colors">Startseite</Link>
diff --git a/components/Technologies.tsx b/components/Technologies.tsx
index 9ecf131..1938637 100644
--- a/components/Technologies.tsx
+++ b/components/Technologies.tsx
@@ -102,7 +102,7 @@ export default function Technologies() {
 
   return (
     <section id="technologies" 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-40" />
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(249,115,22,0.06)_0%,transparent_70%)]" />
 
@@ -112,10 +112,10 @@ export default function Technologies() {
           <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
             Tech-Stack
           </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 Technologien
           </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">
             Klicken Sie auf eine Technologie und erhalten Sie eine
             verstandliche Erklarung - ganz ohne Fachwissen.
           </p>
@@ -127,10 +127,10 @@ export default function Technologies() {
             <button
               key={tech.name}
               onClick={() => setActive(tech.name)}
-              className="group flex flex-col items-center gap-2 p-4 rounded-xl border bg-gray-900 border-gray-800 hover:border-orange-500/50 hover:-translate-y-1 transition-all duration-300 w-full"
+              className="group flex flex-col items-center gap-2 p-4 rounded-xl border bg-white dark:bg-gray-900 border-slate-200 dark:border-gray-800 hover:border-orange-500/50 hover:-translate-y-1 transition-all duration-300 w-full"
             >
               <span className="text-xs text-orange-500/70 font-mono">{tech.category}</span>
-              <span className="font-semibold text-sm text-center text-white group-hover:text-orange-400 transition-colors">
+              <span className="font-semibold text-sm text-center text-slate-900 dark:text-white group-hover:text-orange-400 transition-colors">
                 {tech.name}
               </span>
               <span className="text-[10px] text-slate-600 font-medium mt-0.5">Details</span>
@@ -143,10 +143,10 @@ export default function Technologies() {
           {stats.map((stat) => (
             <div
               key={stat.label}
-              className="text-center p-6 rounded-2xl bg-gray-900 border border-gray-800"
+              className="text-center p-6 rounded-2xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800"
             >
               <div className="text-4xl font-black text-orange-400 mb-2">{stat.value}</div>
-              <div className="text-slate-400 text-sm">{stat.label}</div>
+              <div className="text-slate-600 dark:text-slate-400 text-sm">{stat.label}</div>
             </div>
           ))}
         </div>
@@ -163,13 +163,13 @@ export default function Technologies() {
 
           {/* Modal */}
           <div
-            className="relative z-10 w-full max-w-lg bg-[#1a2535] border border-orange-500/30 rounded-2xl shadow-2xl shadow-black/60 p-8"
+            className="relative z-10 w-full max-w-lg bg-[#dde4ed] dark:bg-[#1a2535] border border-orange-500/30 rounded-2xl shadow-2xl shadow-black/60 p-8"
             onClick={(e) => e.stopPropagation()}
           >
             {/* Close button */}
             <button
               onClick={() => setActive(null)}
-              className="absolute top-4 right-4 w-8 h-8 rounded-lg bg-gray-800 hover:bg-gray-700 text-slate-400 hover:text-white transition-all flex items-center justify-center text-sm font-bold"
+              className="absolute top-4 right-4 w-8 h-8 rounded-lg bg-slate-200 dark:bg-gray-800 hover:bg-slate-300 dark:hover:bg-gray-700 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-all flex items-center justify-center text-sm font-bold"
               aria-label="Schliessen"
             >
               x
@@ -180,17 +180,17 @@ export default function Technologies() {
               <span className="text-orange-400 font-mono text-xs tracking-widest uppercase">
                 {activeTech.category}
               </span>
-              <h3 className="text-2xl font-black text-white mt-1">{activeTech.name}</h3>
+              <h3 className="text-2xl font-black text-slate-900 dark:text-white mt-1">{activeTech.name}</h3>
               <div className="w-10 h-0.5 bg-orange-500 rounded mt-3" />
             </div>
 
             {/* Description */}
-            <p className="text-slate-300 text-base leading-relaxed">
+            <p className="text-slate-700 dark:text-slate-300 text-base leading-relaxed">
               {activeTech.description}
             </p>
 
             {/* Footer hint */}
-            <p className="text-slate-600 text-xs mt-6 text-center">
+            <p className="text-slate-500 dark:text-slate-600 text-xs mt-6 text-center">
               Klick ausserhalb oder x zum Schliessen
             </p>
           </div>