feat(a11y): implement screen reader support and accessibility optimizations

components/blog/PowerCTA.tsx

@@ -14,57 +14,84 @@ export default function PowerCTA({ locale }: PowerCTAProps) {
       <div className="absolute inset-0 opacity-10 pointer-events-none">
         <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(#3b82f6_1px,transparent_1px)] [background-size:40px_40px]" />
       </div>
-      
+
       {/* Decorative accent */}
       <div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 rounded-full blur-3xl -mr-32 -mt-32 transition-transform group-hover:scale-110 duration-1000" />
-      
+
       <div className="relative z-10">
         <div className="inline-block px-4 py-1 bg-accent/20 text-accent text-xs font-bold uppercase tracking-[0.2em] rounded-full mb-8">
           {isDe ? 'Lösungen' : 'Solutions'}
         </div>
-        
+
         <h3 className="text-2xl md:text-4xl font-bold text-white mb-8 leading-tight">
-          {isDe ? 'Bereit für die' : 'Ready for the'} 
+          {isDe ? 'Bereit für die' : 'Ready for the'}
           <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">
-          {isDe 
+          {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.'
-          }
+            : 'From wind and solar park planning to delivering high-quality energy cables, we bring your projects to life.'}
         </p>
-        
+
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
           {[
             isDe ? 'Strategischer Hub für schnelle Lieferung' : 'Strategic hub for fast delivery',
             isDe ? 'Nachhaltige Kabelinfrastruktur' : 'Sustainable cable infrastructure',
-            isDe ? 'Expertenberatung für Großprojekte' : 'Expert consulting for large-scale projects',
-            isDe ? 'Zertifizierte Qualität nach EU-Standards' : 'Certified quality according to EU standards'
+            isDe
+              ? 'Expertenberatung für Großprojekte'
+              : 'Expert consulting for large-scale projects',
+            isDe
+              ? '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 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" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                <svg
+                  className="w-3 h-3 text-accent"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={3}
+                    d="M5 13l4 4L19 7"
+                  />
                 </svg>
               </div>
               <span className="text-sm font-medium">{item}</span>
             </div>
           ))}
         </div>
-        
+
         <div className="flex flex-col sm:flex-row gap-6 items-start sm:items-center pt-8 border-t border-white/10">
           <Link
             href={`/${locale}/contact`}
             className="inline-flex items-center gap-3 px-8 py-4 bg-primary text-white font-bold rounded-full hover:bg-primary/90 transition-all shadow-xl hover:shadow-primary/20 transform hover:-translate-y-1 group/btn"
           >
             {isDe ? 'Projekt anfragen' : 'Inquire Project'}
-            <svg className="w-5 h-5 transition-transform group-hover/btn:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+            <svg
+              className="w-5 h-5 transition-transform group-hover/btn:translate-x-1"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M17 8l4 4m0 0l-4 4m4-4H3"
+              />
             </svg>
           </Link>
           <p className="text-white/50 text-sm font-medium">
-            {isDe ? 'Kostenlose Erstberatung für Ihr Vorhaben.' : 'Free initial consultation for your project.'}
+            {isDe
+              ? 'Kostenlose Erstberatung für Ihr Vorhaben.'
+              : 'Free initial consultation for your project.'}
           </p>
         </div>
       </div>