style: finalize industrial design system and fix typography conflicts

- Refactor app/[locale]/[slug]/page.tsx to handle fullBleed layouts cleanly
- Fix heading styling on 'About Us' and other MDX pages
- Implement staggered Framer Motion animations across all core blocks
- Resolve InteractiveGermanyMap reference error
- Standardize typography tokens for prose and custom headings
- Consolidate support CTA placement

components/blocks/CallToAction.tsx

@@ -1,5 +1,8 @@
+'use client';
+
 import React from 'react';
 import { Button } from '@/components/ui/Button';
+import { motion } from 'framer-motion';
 
 export interface CallToActionProps {
   title?: string;
@@ -9,6 +12,26 @@ export interface CallToActionProps {
   theme?: 'light' | 'dark';
 }
 
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.15,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] },
+  },
+};
+
 export const CallToAction: React.FC<CallToActionProps> = ({
   title = 'Bereit für Ihr Projekt?',
   description = 'Wir suchen stets nach neuen Herausforderungen und starken Partnern. Kontaktieren Sie uns für eine unverbindliche Beratung zu Ihrem Vorhaben.',
@@ -20,21 +43,29 @@ export const CallToAction: React.FC<CallToActionProps> = ({
   
   return (
     <div className={`py-24 text-center ${isDark ? 'bg-primary-dark text-white' : 'bg-neutral-50 border-t border-neutral-100'}`}>
-      <div className="container max-w-3xl mx-auto px-4">
-        <h2 className={`font-heading text-4xl font-extrabold mb-6 ${isDark ? 'text-white' : 'text-neutral-dark'}`}>
+      <motion.div 
+        className="container max-w-3xl mx-auto px-4"
+        variants={containerVariants}
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, margin: "-100px" }}
+      >
+        <motion.h2 variants={itemVariants} className={`font-heading text-4xl font-extrabold mb-6 ${isDark ? 'text-white' : 'text-neutral-dark'}`}>
           {title}
-        </h2>
-        <p className={`text-xl mb-10 leading-relaxed ${isDark ? 'text-white/70' : 'text-text-secondary'}`}>
+        </motion.h2>
+        <motion.p variants={itemVariants} className={`text-xl mb-10 leading-relaxed ${isDark ? 'text-white/70' : 'text-text-secondary'}`}>
           {description}
-        </p>
-        <Button 
-          href={ctaHref} 
-          size="xl"
-          variant={isDark ? 'white' : 'primary'}
-        >
-          {ctaLabel}
-        </Button>
-      </div>
+        </motion.p>
+        <motion.div variants={itemVariants}>
+          <Button 
+            href={ctaHref} 
+            size="xl"
+            variant={isDark ? 'white' : 'primary'}
+          >
+            {ctaLabel}
+          </Button>
+        </motion.div>
+      </motion.div>
     </div>
   );
 };