feat: complete wcag accessibility and contrast improvements

components/blog/BlogPaginationKeyboardObserver.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface BlogPaginationProps {
+  currentPage: number;
+  totalPages: number;
+  locale: string;
+}
+
+export function BlogPaginationKeyboardObserver({
+  currentPage,
+  totalPages,
+  locale,
+}: BlogPaginationProps) {
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't trigger if user is typing in an input
+      if (
+        document.activeElement?.tagName === 'INPUT' ||
+        document.activeElement?.tagName === 'TEXTAREA' ||
+        document.activeElement?.tagName === 'SELECT'
+      ) {
+        return;
+      }
+
+      if (e.key === 'ArrowLeft' && currentPage > 1) {
+        router.push(`/${locale}/blog?page=${currentPage - 1}`);
+      } else if (e.key === 'ArrowRight' && currentPage < totalPages) {
+        router.push(`/${locale}/blog?page=${currentPage + 1}`);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [currentPage, totalPages, locale, router]);
+
+  return null;
+}

components/blog/PostNavigation.tsx

@@ -10,7 +10,13 @@ interface PostNavigationProps {
   locale: string;
 }
 
-export default function PostNavigation({ prev, next, isPrevRandom, isNextRandom, locale }: PostNavigationProps) {
+export default function PostNavigation({
+  prev,
+  next,
+  isPrevRandom,
+  isNextRandom,
+  locale,
+}: PostNavigationProps) {
   if (!prev && !next) return null;
 
   return (
@@ -36,10 +42,14 @@ export default function PostNavigation({ prev, next, isPrevRandom, isNextRandom,
 
           {/* Content */}
           <div className="absolute inset-0 flex flex-col justify-center p-8 md:p-12 text-white z-10">
-            <span className="text-sm font-bold uppercase tracking-wider mb-2 opacity-70">
+            <span className="text-sm font-bold uppercase tracking-wider mb-2 text-white/90">
               {isPrevRandom
-                ? (locale === 'de' ? 'Weiterer Artikel' : 'More Article')
-                : (locale === 'de' ? 'Vorheriger Beitrag' : 'Previous Post')}
+                ? locale === 'de'
+                  ? 'Weiterer Artikel'
+                  : 'More Article'
+                : locale === 'de'
+                  ? 'Vorheriger Beitrag'
+                  : 'Previous Post'}
             </span>
             <h3 className="text-xl md:text-2xl font-bold leading-tight group-hover:underline decoration-2 underline-offset-4">
               {prev.frontmatter.title}
@@ -47,9 +57,14 @@ export default function PostNavigation({ prev, next, isPrevRandom, isNextRandom,
           </div>
 
           {/* Arrow Icon */}
-          <div className="absolute left-4 top-1/2 -translate-y-1/2 text-white/30 group-hover:text-white group-hover:-translate-x-2 transition-all duration-300">
+          <div className="absolute left-4 top-1/2 -translate-y-1/2 text-white/70 group-hover:text-white group-hover:-translate-x-2 transition-all duration-300">
             <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 19l-7-7 7-7"
+              />
             </svg>
           </div>
         </Link>
@@ -78,10 +93,14 @@ export default function PostNavigation({ prev, next, isPrevRandom, isNextRandom,
 
           {/* Content */}
           <div className="absolute inset-0 flex flex-col justify-center items-end text-right p-8 md:p-12 text-white z-10">
-            <span className="text-sm font-bold uppercase tracking-wider mb-2 opacity-70">
+            <span className="text-sm font-bold uppercase tracking-wider mb-2 text-white/90">
               {isNextRandom
-                ? (locale === 'de' ? 'Weiterer Artikel' : 'More Article')
-                : (locale === 'de' ? 'Nächster Beitrag' : 'Next Post')}
+                ? locale === 'de'
+                  ? 'Weiterer Artikel'
+                  : 'More Article'
+                : locale === 'de'
+                  ? 'Nächster Beitrag'
+                  : 'Next Post'}
             </span>
             <h3 className="text-xl md:text-2xl font-bold leading-tight group-hover:underline decoration-2 underline-offset-4">
               {next.frontmatter.title}

components/blog/PowerCTA.tsx

@@ -28,7 +28,7 @@ export default function PowerCTA({ locale }: PowerCTAProps) {
           <span className="text-accent block">{isDe ? 'Energiewende?' : 'Energy Transition?'}</span>
         </h3>
 
-        <p className="text-xl text-white/70 mb-10 leading-relaxed max-w-2xl">
+        <p className="text-xl text-white/90 mb-10 leading-relaxed max-w-2xl">
           {isDe
             ? 'Von der Planung von Wind- und Solarparks bis zur Lieferung hochwertiger Energiekabel erwecken wir Ihre Projekte zum Leben.'
             : 'From wind and solar park planning to delivering high-quality energy cables, we bring your projects to life.'}
@@ -45,7 +45,7 @@ export default function PowerCTA({ locale }: PowerCTAProps) {
               ? 'Zertifizierte Qualität nach EU-Standards'
               : 'Certified quality according to EU standards',
           ].map((item, i) => (
-            <div key={i} className="flex items-center gap-4 text-white/80">
+            <div key={i} className="flex items-center gap-4 text-white/90">
               <div className="w-6 h-6 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
                 <svg
                   className="w-3 h-3 text-accent"
@@ -88,7 +88,7 @@ export default function PowerCTA({ locale }: PowerCTAProps) {
               />
             </svg>
           </Link>
-          <p className="text-white/50 text-sm font-medium">
+          <p className="text-white/80 text-sm font-medium">
             {isDe
               ? 'Kostenlose Erstberatung für Ihr Vorhaben.'
               : 'Free initial consultation for your project.'}

components/blog/TableOfContents.tsx

@@ -53,7 +53,7 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
   return (
     <nav className="hidden lg:block w-full ml-12">
       <div className="relative pl-6 border-l border-neutral-200">
-        <h4 className="text-xs md:text-sm font-bold uppercase tracking-[0.2em] text-text-primary/50 mb-6">
+        <h4 className="text-xs md:text-sm font-bold uppercase tracking-[0.2em] text-text-primary/70 mb-6">
           {locale === 'de' ? 'Inhalt' : 'Table of Contents'}
         </h4>
         <ul className="space-y-4">