diff --git a/app/[locale]/[slug]/page.tsx b/app/[locale]/[slug]/page.tsx
index 2a29fc51e..e30e8c478 100644
--- a/app/[locale]/[slug]/page.tsx
+++ b/app/[locale]/[slug]/page.tsx
@@ -132,52 +132,57 @@ export default async function Page(props: { params: Promise<{ locale: string; sl
   }
   */
 
-  // Full-bleed pages render blocks edge-to-edge without the generic article wrapper
-  if (pageData.frontmatter.layout === 'fullBleed') {
-    return (
-      <div className="flex flex-col min-h-screen">
-        <MDXRemote source={pageData.content} components={mdxComponents} />
-      </div>
-    );
-  }
+  // Determine layout type
+  const isFullBleed = pageData.frontmatter.layout === 'fullBleed';
 
-  // Default article layout with hero, content, and support CTA
   return (
-    <div className="flex flex-col min-h-screen bg-white">
-      {/* Hero Section */}
-      <section className="bg-primary-dark text-white pt-40 pb-16 md:pt-48 md:pb-20 min-h-[35vh] flex flex-col justify-end relative overflow-hidden">
-        <div className="absolute inset-0 opacity-20">
-          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
-        </div>
-        <Container className="relative z-10">
-          <div className="max-w-4xl">
-            <Badge variant="accent" className="mb-4 md:mb-6">
-              {t('badge')}
-            </Badge>
-            <Heading level={1} variant="white" className="mb-0">
-              {pageData.frontmatter.title}
-            </Heading>
+    <div className={`flex flex-col min-h-screen ${isFullBleed ? '' : 'bg-white'}`}>
+      {/* Generic Hero Section (only for standard pages) */}
+      {!isFullBleed && (
+        <section className="bg-primary-dark text-white pt-40 pb-12 md:pt-56 md:pb-16 min-h-[40vh] md:min-h-[45vh] flex flex-col justify-end relative overflow-hidden">
+          <div className="absolute inset-0 opacity-20 pointer-events-none">
+            <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent/50 via-transparent to-transparent" />
           </div>
-        </Container>
-      </section>
+          <Container className="relative z-10">
+            <div className="max-w-4xl">
+              <Badge variant="accent" className="mb-4 md:mb-6 shadow-sm">
+                {t('badge')}
+              </Badge>
+              <Heading level={1} variant="white" className="mb-0 drop-shadow-sm">
+                {pageData.frontmatter.title}
+              </Heading>
+            </div>
+          </Container>
+        </section>
+      )}
 
       {/* Main Content Area */}
-      <Container className="py-16 md:py-24">
-        {/* Excerpt/Lead paragraph if available */}
-        {pageData.frontmatter.excerpt && (
-          <div className="mb-16">
-            <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-medium border-l-4 border-primary pl-8 py-2 italic">
-              {pageData.frontmatter.excerpt}
-            </p>
-          </div>
-        )}
-
-        {/* Main content */}
+      {isFullBleed ? (
         <div className="w-full">
           <MDXRemote source={pageData.content} components={mdxComponents} />
         </div>
+      ) : (
+        <Container className="py-16 md:py-24">
+          {/* Excerpt/Lead paragraph if available */}
+          {pageData.frontmatter.excerpt && (
+            <div className="mb-16 max-w-4xl mx-auto">
+              <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-medium border-l-4 border-primary pl-8 py-2 italic">
+                {pageData.frontmatter.excerpt}
+              </p>
+            </div>
+          )}
 
-        {/* Support Section */}
+          {/* Main content */}
+          <div className="max-w-4xl mx-auto">
+            <div className="prose prose-lg md:prose-xl prose-neutral max-w-none prose-headings:font-heading prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-4xl prose-h2:text-3xl prose-h2:mt-12 prose-h2:border-b prose-h2:border-neutral-200 prose-h2:pb-4 prose-h3:text-2xl prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:font-medium prose-a:underline prose-a:underline-offset-4 prose-a:decoration-primary/30 hover:prose-a:decoration-primary prose-strong:text-text-primary prose-strong:font-semibold prose-li:text-text-secondary prose-ul:list-disc prose-ol:list-decimal">
+              <MDXRemote source={pageData.content} components={mdxComponents} />
+            </div>
+          </div>
+        </Container>
+      )}
+
+      {/* Support Section */}
+      <Container>
         <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group animate-slight-fade-in-from-bottom">
           <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
           <div className="relative z-10 max-w-2xl">
diff --git a/components/blocks/CallToAction.tsx b/components/blocks/CallToAction.tsx
index 87eac0ae4..d20427a92 100644
--- a/components/blocks/CallToAction.tsx
+++ b/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>
   );
 };
diff --git a/components/blocks/ContactSection.tsx b/components/blocks/ContactSection.tsx
index 1597309a0..c88f28c2a 100644
--- a/components/blocks/ContactSection.tsx
+++ b/components/blocks/ContactSection.tsx
@@ -4,6 +4,7 @@ import React, { Suspense } from 'react';
 import { Section, Container } from '@/components/ui';
 import { ContactForm } from '@/components/forms/ContactForm';
 import dynamic from 'next/dynamic';
+import { motion } from 'framer-motion';
 
 const ContactMap = dynamic(() => import('@/components/ContactMap'), {
   ssr: false,
@@ -15,63 +16,96 @@ export interface ContactSectionProps {
   showMap?: boolean;
 }
 
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.15,
+      delayChildren: 0.2,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, x: -20 },
+  visible: { opacity: 1, x: 0, transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] } },
+};
+
+const formVariants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1], delay: 0.4 } },
+};
+
 export const ContactSection: React.FC<ContactSectionProps> = (props) => {
   const { showForm, showMap } = props;
 
   return (
-    <Section className="bg-neutral-light py-12 md:py-28">
+    <Section className="bg-neutral-light py-12 md:py-28 relative overflow-hidden">
       <Container>
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16">
-          <div className="lg:col-span-5 flex flex-col justify-center">
-            <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">Direktkontakt</h2>
-            <h3 className="font-heading text-4xl font-extrabold text-neutral-dark mb-6">Wir sind für Sie da.</h3>
-            <p className="text-lg text-text-secondary mb-8">
+          <motion.div 
+            className="lg:col-span-5 flex flex-col justify-center"
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: "-50px" }}
+          >
+            <motion.h2 variants={itemVariants} className="text-primary font-bold tracking-wider uppercase text-sm mb-3">Direktkontakt</motion.h2>
+            <motion.h3 variants={itemVariants} className="font-heading text-4xl font-extrabold text-neutral-dark mb-6">Wir sind für Sie da.</motion.h3>
+            <motion.p variants={itemVariants} className="text-lg text-text-secondary mb-8 leading-relaxed">
               Haben Sie Fragen zu unseren Leistungen oder möchten Sie ein konkretes Projekt besprechen? Rufen Sie uns an oder schreiben Sie uns eine E-Mail.
-            </p>
+            </motion.p>
             
             <div className="space-y-6">
-              <div className="flex items-start gap-4">
-                <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0">
+              <motion.div variants={itemVariants} className="group flex items-start gap-4">
+                <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0 transition-all duration-500 group-hover:bg-primary group-hover:text-white group-hover:scale-110 group-hover:-rotate-3">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                 </div>
                 <div>
-                  <h4 className="font-bold text-neutral-dark">Telefon</h4>
+                  <h4 className="font-bold text-neutral-dark group-hover:text-primary transition-colors">Telefon</h4>
                   <p className="text-xl md:text-2xl font-bold font-heading text-neutral-dark hover:text-primary transition-colors">
                     <a href="tel:+4935616857733">+49 (0) 3561 / 68577 33</a>
                   </p>
                 </div>
-              </div>
+              </motion.div>
 
-              <div className="flex items-start gap-4">
-                <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0">
+              <motion.div variants={itemVariants} className="group flex items-start gap-4">
+                <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0 transition-all duration-500 group-hover:bg-primary group-hover:text-white group-hover:scale-110 group-hover:-rotate-3">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                 </div>
                 <div>
-                  <h4 className="font-bold text-neutral-dark">E-Mail</h4>
+                  <h4 className="font-bold text-neutral-dark group-hover:text-primary transition-colors">E-Mail</h4>
                   <p className="text-primary hover:text-primary-dark font-medium transition-colors">
                     <a href="mailto:info@e-tib.com">info@e-tib.com</a>
                   </p>
                 </div>
-              </div>
+              </motion.div>
 
-              <div className="flex items-start gap-4">
-                <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0">
+              <motion.div variants={itemVariants} className="group flex items-start gap-4">
+                <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0 transition-all duration-500 group-hover:bg-primary group-hover:text-white group-hover:scale-110 group-hover:-rotate-3">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                 </div>
                 <div>
-                  <h4 className="font-bold text-neutral-dark">Standort</h4>
+                  <h4 className="font-bold text-neutral-dark group-hover:text-primary transition-colors">Standort</h4>
                   <p className="text-text-secondary leading-relaxed">
                     Gewerbestraße 22<br />
                     03172 Guben<br />
                     Deutschland
                   </p>
                 </div>
-              </div>
+              </motion.div>
             </div>
-          </div>
+          </motion.div>
           
           {showForm && (
-            <div className="lg:col-span-7 relative">
+            <motion.div 
+              className="lg:col-span-7 relative"
+              variants={formVariants}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true, margin: "-50px" }}
+            >
               <Suspense
                 fallback={
                   <div className="animate-pulse bg-white border border-neutral-100 shadow-xl h-96 rounded-2xl md:rounded-3xl" />
@@ -79,12 +113,18 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
               >
                 <ContactForm />
               </Suspense>
-            </div>
+            </motion.div>
           )}
         </div>
       </Container>
       {showMap && (
-        <section className="mt-12 h-[300px] md:h-[500px] bg-neutral-medium relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
+        <motion.section 
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 1 }}
+          className="mt-12 h-[300px] md:h-[500px] bg-neutral-medium relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000"
+        >
           <Suspense
             fallback={<div className="h-full w-full bg-neutral-medium animate-pulse" />}
           >
@@ -94,7 +134,7 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
               lng={14.7214}
             />
           </Suspense>
-        </section>
+        </motion.section>
       )}
     </Section>
   );
diff --git a/components/blocks/HeroSection.tsx b/components/blocks/HeroSection.tsx
index 1fa034444..a79911490 100644
--- a/components/blocks/HeroSection.tsx
+++ b/components/blocks/HeroSection.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import React from 'react';
 import Image from 'next/image';
-import Reveal from '@/components/Reveal';
+import { motion } from 'framer-motion';
 import { Badge, Container, Heading } from '@/components/ui';
 import { Button } from '@/components/ui/Button';
 
@@ -14,63 +16,97 @@ export interface HeroSectionProps {
   ctaHref?: string;
 }
 
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.15,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: { 
+    opacity: 1, 
+    y: 0, 
+    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] } 
+  },
+};
+
 export const HeroSection: React.FC<HeroSectionProps> = (props) => {
   const { title, badge, subtitle, backgroundImage, alignment, ctaLabel, ctaHref } = props;
   const bgSrc = backgroundImage?.sizes?.card?.url || backgroundImage?.url;
 
   return (
-    <Reveal>
-      <section
-        className={`relative min-h-[50vh] md:min-h-[70vh] flex items-center pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-primary-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
-      >
-        {bgSrc && (
-          <div className="absolute inset-0 z-0">
-            <Image
-              src={bgSrc}
-              alt={title || 'Hero Background'}
-              fill
-              className="object-cover opacity-30 md:opacity-40"
-              style={{
-                objectPosition: `${backgroundImage?.focalX ?? 50}% ${backgroundImage?.focalY ?? 50}%`,
-              }}
-              sizes="100vw"
-              priority
-            />
-            <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
-          </div>
-        )}
-        <Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
-          <div className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}>
-            {badge && (
+    <section
+      className={`relative min-h-[50vh] md:min-h-[70vh] flex items-center pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-primary-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
+    >
+      {bgSrc && (
+        <motion.div 
+          className="absolute inset-0 z-0"
+          initial={{ scale: 1.05, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ duration: 1.5, ease: "easeOut" }}
+        >
+          <Image
+            src={bgSrc}
+            alt={title || 'Hero Background'}
+            fill
+            className="object-cover opacity-30 md:opacity-40"
+            style={{
+              objectPosition: `${backgroundImage?.focalX ?? 50}% ${backgroundImage?.focalY ?? 50}%`,
+            }}
+            sizes="100vw"
+            priority
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
+        </motion.div>
+      )}
+      <Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
+        <motion.div 
+          className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+        >
+          {badge && (
+            <motion.div variants={itemVariants}>
               <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
                 {badge}
               </Badge>
-            )}
+            </motion.div>
+          )}
+          <motion.div variants={itemVariants}>
             <Heading level={1} className="text-white mb-4 md:mb-8">
               {title}
             </Heading>
-            {subtitle && (
+          </motion.div>
+          {subtitle && (
+            <motion.div variants={itemVariants}>
               <p className="text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl">
                 {subtitle}
               </p>
-            )}
-            {ctaLabel && ctaHref && (
-              <div className="mt-8">
-                <Button
-                  href={ctaHref}
-                  variant="accent"
-                  size="lg"
-                >
-                  {ctaLabel}
-                  <span className="ml-3 transition-transform group-hover/btn:translate-x-2">
-                    &rarr;
-                  </span>
-                </Button>
-              </div>
-            )}
-          </div>
-        </Container>
-      </section>
-    </Reveal>
+            </motion.div>
+          )}
+          {ctaLabel && ctaHref && (
+            <motion.div variants={itemVariants} className="mt-8">
+              <Button
+                href={ctaHref}
+                variant="accent"
+                size="lg"
+              >
+                {ctaLabel}
+                <span className="ml-3 transition-transform group-hover/btn:translate-x-2">
+                  &rarr;
+                </span>
+              </Button>
+            </motion.div>
+          )}
+        </motion.div>
+      </Container>
+    </section>
   );
 };
diff --git a/components/blocks/InteractiveGermanyMap.tsx b/components/blocks/InteractiveGermanyMap.tsx
index 86e99905a..e606c904e 100644
--- a/components/blocks/InteractiveGermanyMap.tsx
+++ b/components/blocks/InteractiveGermanyMap.tsx
@@ -5,7 +5,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { MapPin, Factory, Zap, CheckCircle2 } from 'lucide-react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
-import { Location } from '@/lib/map-data';
+import { Location, defaultLocations } from '@/lib/map-data';
 
 interface Stat {
   value: string;
diff --git a/components/blocks/JobListingBlock.tsx b/components/blocks/JobListingBlock.tsx
index e656622ed..51a663f21 100644
--- a/components/blocks/JobListingBlock.tsx
+++ b/components/blocks/JobListingBlock.tsx
@@ -1,7 +1,10 @@
+'use client';
+
 import React from 'react';
 import Link from 'next/link';
 import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
+import { motion } from 'framer-motion';
 
 export interface JobListingBlockProps {
   title?: string;
@@ -21,7 +24,27 @@ export interface JobListingBlockProps {
   emptyStateLinkHref?: string;
 }
 
-export const JobListingBlock = async (props: JobListingBlockProps) => {
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.15,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] },
+  },
+};
+
+export const JobListingBlock = (props: JobListingBlockProps) => {
   const { 
     title, 
     showJobs = true,
@@ -45,11 +68,23 @@ export const JobListingBlock = async (props: JobListingBlockProps) => {
       <div className="container mx-auto">
         {showFairs && (
           <div className="mb-24 relative">
-            <h3 className="font-heading font-extrabold text-4xl text-neutral-dark mb-12 flex items-center gap-4">
+            <motion.h3 
+              initial={{ opacity: 0, x: -20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, margin: "-100px" }}
+              transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+              className="font-heading font-extrabold text-4xl text-neutral-dark mb-12 flex items-center gap-4"
+            >
               <span className="w-12 h-1.5 bg-primary rounded-full" />
               {fairsTitle}
-            </h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            </motion.h3>
+            <motion.div 
+              variants={containerVariants}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true, margin: "-100px" }}
+              className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+            >
               {fairs.map((messe, idx) => {
                 const isLink = !!messe.url;
                 const innerContent = (
@@ -120,58 +155,77 @@ export const JobListingBlock = async (props: JobListingBlockProps) => {
 
                 if (isLink) {
                   return (
-                    <a key={`fair-${idx}`} href={messe.url} target="_blank" rel="noopener noreferrer" className={`${baseClasses} cursor-pointer`}>
+                    <motion.a variants={itemVariants} key={`fair-${idx}`} href={messe.url} target="_blank" rel="noopener noreferrer" className={`${baseClasses} cursor-pointer`}>
                       {innerContent}
-                    </a>
+                    </motion.a>
                   );
                 }
 
                 return (
-                  <div key={`fair-${idx}`} className={baseClasses}>
+                  <motion.div variants={itemVariants} key={`fair-${idx}`} className={baseClasses}>
                     {innerContent}
-                  </div>
+                  </motion.div>
                 );
               })}
-            </div>
+            </motion.div>
           </div>
         )}
 
         {showJobs && (
           <div className="mb-12">
-            <h2 className="font-heading font-extrabold text-4xl text-neutral-dark mb-8">
+            <motion.h2 
+              initial={{ opacity: 0, x: -20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, margin: "-100px" }}
+              transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+              className="font-heading font-extrabold text-4xl text-neutral-dark mb-8"
+            >
               {title || 'Aktuelle Stellenangebote'}
-            </h2>
+            </motion.h2>
             
             {jobs.length > 0 ? (
-              <div className="grid gap-6">
+              <motion.div 
+                variants={containerVariants}
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true, margin: "-100px" }}
+                className="grid gap-6"
+              >
                 {jobs.map((job: any) => (
-                  <Link 
-                    key={job.id} 
-                    href={`/karriere/${job.slug}`}
-                    className="group bg-white border border-neutral-100 p-8 rounded-2xl shadow-sm hover:shadow-xl hover:border-primary/20 transition-all flex flex-col md:flex-row md:items-center justify-between gap-6"
-                  >
-                    <div>
-                      <div className="flex items-center gap-3 mb-2">
-                        <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-bold rounded-full uppercase">{job.type}</span>
-                        <span className="text-text-secondary text-sm font-medium">{job.department}</span>
+                  <motion.div variants={itemVariants} key={job.id}>
+                    <Link 
+                      href={`/karriere/${job.slug}`}
+                      className="group bg-white border border-neutral-100 p-8 rounded-2xl shadow-sm hover:shadow-xl hover:border-primary/20 transition-all flex flex-col md:flex-row md:items-center justify-between gap-6 block"
+                    >
+                      <div>
+                        <div className="flex items-center gap-3 mb-2">
+                          <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-bold rounded-full uppercase">{job.type}</span>
+                          <span className="text-text-secondary text-sm font-medium">{job.department}</span>
+                        </div>
+                        <h4 className="font-heading font-bold text-2xl text-neutral-dark group-hover:text-primary transition-colors">{job.title}</h4>
+                        <p className="text-text-secondary mt-1">{job.location}</p>
                       </div>
-                      <h4 className="font-heading font-bold text-2xl text-neutral-dark group-hover:text-primary transition-colors">{job.title}</h4>
-                      <p className="text-text-secondary mt-1">{job.location}</p>
-                    </div>
-                    <div className="flex items-center text-primary font-bold group-hover:translate-x-2 transition-transform">
-                      Details ansehen
-                      <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
-                    </div>
-                  </Link>
+                      <div className="flex items-center text-primary font-bold group-hover:translate-x-2 transition-transform">
+                        Details ansehen
+                        <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+                      </div>
+                    </Link>
+                  </motion.div>
                 ))}
-              </div>
+              </motion.div>
             ) : (
-              <div className="bg-neutral-50 border border-neutral-100 rounded-2xl p-12 text-center">
+              <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: "-100px" }}
+                transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+                className="bg-neutral-50 border border-neutral-100 rounded-2xl p-12 text-center"
+              >
                 <p className="text-text-secondary text-lg">{emptyStateMessage}</p>
                 <Button href={emptyStateLinkHref} variant="primary" className="mt-6">
                   {emptyStateLinkText}
                 </Button>
-              </div>
+              </motion.div>
             )}
           </div>
         )}
diff --git a/components/blocks/SupportCTA.tsx b/components/blocks/SupportCTA.tsx
index f90d8ccf9..2a6a2f2a9 100644
--- a/components/blocks/SupportCTA.tsx
+++ b/components/blocks/SupportCTA.tsx
@@ -1,6 +1,9 @@
+'use client';
+
 import React from 'react';
 import TrackedLink from '@/components/analytics/TrackedLink';
 import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
+import { motion } from 'framer-motion';
 
 export interface SupportCTAProps {
   title: string;
@@ -9,31 +12,62 @@ export interface SupportCTAProps {
   buttonHref: string;
 }
 
+const containerVariants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.8,
+      ease: [0.16, 1, 0.3, 1],
+      staggerChildren: 0.15,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },
+  },
+};
+
 export const SupportCTA: React.FC<SupportCTAProps> = (props) => {
   const { title, description, buttonLabel, buttonHref } = props;
 
   return (
-    <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group animate-slight-fade-in-from-bottom">
-      <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
+    <motion.div 
+      variants={containerVariants}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, margin: "-100px" }}
+      className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group"
+    >
+      <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform duration-700 group-hover:translate-x-1/3" />
       <div className="relative z-10 max-w-2xl">
-        <h3 className="text-2xl md:text-3xl font-bold mb-4">{title}</h3>
-        <p className="text-lg text-white/70 mb-8">{description}</p>
-        <TrackedLink
-          href={buttonHref}
-          className={getButtonClasses('accent', 'lg')}
-          eventProperties={{
-            location: 'block_support_cta',
-          }}
-        >
-          <span className="relative z-10 flex items-center justify-center gap-2 transition-colors duration-500 group-hover/btn:text-primary-dark">
-            {buttonLabel}
-            <span className="ml-2 transition-transform group-hover/btn:translate-x-1">
-              &rarr;
+        <motion.h3 variants={itemVariants} className="text-2xl md:text-3xl font-bold mb-4">{title}</motion.h3>
+        <motion.p variants={itemVariants} className="text-lg text-white/70 mb-8">{description}</motion.p>
+        <motion.div variants={itemVariants}>
+          <TrackedLink
+            href={buttonHref}
+            className={getButtonClasses('accent', 'lg')}
+            eventProperties={{
+              location: 'block_support_cta',
+            }}
+          >
+            <span className="relative z-10 flex items-center justify-center gap-2 transition-colors duration-500 group-hover/btn:text-primary-dark">
+              {buttonLabel}
+              <span className="ml-2 transition-transform group-hover/btn:translate-x-1">
+                &rarr;
+              </span>
             </span>
-          </span>
-          <ButtonOverlay variant="accent" />
-        </TrackedLink>
+            <ButtonOverlay variant="accent" />
+          </TrackedLink>
+        </motion.div>
       </div>
-    </div>
+    </motion.div>
   );
 };
diff --git a/components/blocks/TeamGrid.tsx b/components/blocks/TeamGrid.tsx
index 07343dae3..e43a6dae8 100644
--- a/components/blocks/TeamGrid.tsx
+++ b/components/blocks/TeamGrid.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
+import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 
 export interface TeamMember {
   id: string;
@@ -25,12 +26,12 @@ export function TeamGrid({ members }: TeamGridProps) {
   if (!members || members.length === 0) return null;
 
   return (
-    <section className="py-24 bg-white">
-      <div className="container">
+    <section className="py-24 bg-white relative overflow-hidden">
+      <div className="container relative z-10">
         <div className="mb-12">
           <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">Persönliche Beratung</h2>
           <h3 className="font-heading text-4xl font-extrabold text-neutral-dark mb-4">Ihre Ansprechpartner</h3>
-          <p className="text-text-secondary max-w-2xl">
+          <p className="text-text-secondary max-w-2xl text-lg">
             Sprechen Sie direkt mit unseren Experten für Ihr regionales Projekt.
           </p>
         </div>
@@ -39,48 +40,60 @@ export function TeamGrid({ members }: TeamGridProps) {
           {members.map((member, i) => (
             <motion.div
               key={member.id}
-              initial={{ opacity: 0, y: 20 }}
+              initial={{ opacity: 0, y: 30 }}
               whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: i * 0.1 }}
-              className="group bg-neutral-50 rounded-2xl p-6 border border-neutral-100 hover:shadow-xl transition-all"
+              viewport={{ once: true, margin: "-50px" }}
+              transition={{ delay: i * 0.1, duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+              className="group relative bg-neutral-50 rounded-[2rem] p-8 border border-neutral-200/60 transition-all duration-500 hover:bg-white hover:border-primary/30 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:-translate-y-2 overflow-hidden"
             >
-              <div className="flex items-center gap-6">
-                <div className="relative w-24 h-24 flex-shrink-0 rounded-xl overflow-hidden bg-neutral-200">
-                  {member.image && typeof member.image === 'object' && member.image.url ? (
-                    <Image
-                      src={member.image.url}
-                      alt={member.name}
-                      fill
-                      sizes="96px"
-                      className="object-cover"
-                    />
-                  ) : (
-                    <div className="absolute inset-0 flex items-center justify-center text-neutral-400">
-                      <svg className="w-12 h-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                    </div>
+              <HoverShineOverlay shineColor="via-primary/5" />
+              
+              <div className="relative z-10 flex flex-col h-full">
+                <div className="flex items-center gap-6 mb-6">
+                  <div className="relative w-24 h-24 flex-shrink-0 rounded-[1.25rem] overflow-hidden bg-neutral-200 border border-neutral-100 shadow-sm group-hover:shadow-md transition-shadow duration-500">
+                    {member.image && typeof member.image === 'object' && member.image.url ? (
+                      <Image
+                        src={member.image.url}
+                        alt={member.name}
+                        fill
+                        sizes="96px"
+                        className="object-cover group-hover:scale-110 transition-transform duration-700 ease-in-out"
+                      />
+                    ) : (
+                      <div className="absolute inset-0 flex items-center justify-center text-neutral-400">
+                        <svg className="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                      </div>
+                    )}
+                  </div>
+                  <div>
+                    <h4 className="font-heading font-bold text-2xl text-neutral-dark mb-1 leading-tight group-hover:text-primary transition-colors duration-300">{member.name}</h4>
+                    <p className="text-primary font-medium text-sm mb-1">{member.position}</p>
+                    <p className="inline-block px-2 py-0.5 mt-1 bg-neutral-100 text-neutral-600 rounded-md text-xs uppercase tracking-widest font-semibold border border-neutral-200/60">
+                      {member.branch === 'e-tib' ? 'E-TIB GmbH' : member.branch === 'ing' ? 'Ingenieurgesellschaft' : 'Bohrtechnik'}
+                    </p>
+                  </div>
+                </div>
+                
+                <div className="mt-auto pt-6 border-t border-neutral-200/60 space-y-3">
+                  {member.email && (
+                    <a href={`mailto:${member.email}`} className="group/link flex items-center gap-3 text-text-secondary hover:text-primary transition-colors text-sm font-medium">
+                      <div className="w-8 h-8 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500 group-hover/link:bg-primary/10 group-hover/link:text-primary transition-colors">
+                        <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                      </div>
+                      <span className="truncate">{member.email}</span>
+                      <svg className="w-4 h-4 ml-auto opacity-0 -translate-x-2 group-hover/link:opacity-100 group-hover/link:translate-x-0 transition-all duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+                    </a>
+                  )}
+                  {member.phone && (
+                    <a href={`tel:${member.phone}`} className="group/link flex items-center gap-3 text-text-secondary hover:text-primary transition-colors text-sm font-medium">
+                      <div className="w-8 h-8 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-500 group-hover/link:bg-primary/10 group-hover/link:text-primary transition-colors">
+                        <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+                      </div>
+                      <span>{member.phone}</span>
+                      <svg className="w-4 h-4 ml-auto opacity-0 -translate-x-2 group-hover/link:opacity-100 group-hover/link:translate-x-0 transition-all duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+                    </a>
                   )}
                 </div>
-                <div>
-                  <h4 className="font-heading font-bold text-xl text-neutral-dark">{member.name}</h4>
-                  <p className="text-primary font-medium text-sm mb-2">{member.position}</p>
-                  <p className="text-text-secondary text-xs uppercase tracking-widest">{member.branch === 'e-tib' ? 'E-TIB GmbH' : member.branch === 'ing' ? 'Ingenieurgesellschaft' : 'Bohrtechnik'}</p>
-                </div>
-              </div>
-              
-              <div className="mt-6 pt-6 border-t border-neutral-200 space-y-3">
-                {member.email && (
-                  <a href={`mailto:${member.email}`} className="flex items-center gap-3 text-text-secondary hover:text-primary transition-colors text-sm">
-                    <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-                    {member.email}
-                  </a>
-                )}
-                {member.phone && (
-                  <a href={`tel:${member.phone}`} className="flex items-center gap-3 text-text-secondary hover:text-primary transition-colors text-sm">
-                    <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
-                    {member.phone}
-                  </a>
-                )}
               </div>
             </motion.div>
           ))}
diff --git a/content/de/home.mdx b/content/de/home.mdx
index 29730d47a..c3a3c552b 100644
--- a/content/de/home.mdx
+++ b/content/de/home.mdx
@@ -179,25 +179,3 @@ description: Willkommen bei E-TIB GmbH
   ]}
 />
 
-<FaqBlock 
-  title="Häufig gestellte Fragen"
-  subtitle="Wissenswertes"
-  questions={[
-    {
-      question: "Was macht die E-TIB GmbH?",
-      answer: "Die E-TIB GmbH ist spezialisiert auf den Leitungs- und Kabeltiefbau. Zu den Kernleistungen zählen der klassische Kabelbau, hochpräzise Horizontalspülbohrungen, Kabelpflugarbeiten sowie Elektromontagen bis 110 kV. Zusammen mit unseren Tochtergesellschaften decken wir auch die komplette Planung und Dokumentation von Infrastrukturprojekten ab."
-    },
-    {
-      question: "Welche Vorteile bietet das Horizontalspülbohrverfahren (Bohrtechnik)?",
-      answer: "Die Horizontalspülbohrung ist ein grabenloses Verfahren zur unterirdischen Verlegung von Kabeln und Rohren. Der größte Vorteil ist die oberflächenschonende Arbeitsweise: Flüsse, Autobahnen, Bahntrassen oder Naturschutzgebiete können gekreuzt werden, ohne den Verkehr oder die Umwelt zu beeinträchtigen. Dies spart erhebliche Kosten bei der Oberflächenwiederherstellung."
-    },
-    {
-      question: "Seit wann gibt es die E-TIB GmbH und wie groß ist das Team?",
-      answer: "Die E-TIB GmbH wurde im Dezember 2015 in Guben gegründet. Heute beschäftigt die Unternehmensgruppe über 50 qualifizierte Mitarbeiter, die komplexe Infrastruktur- und Tiefbauprojekte für Energieversorger und Telekommunikationsanbieter bundesweit realisieren."
-    },
-    {
-      question: "Bieten Sie auch die Planung von Netzanschlüssen an?",
-      answer: "Ja, über die E-TIB Ingenieurgesellschaft mbH übernehmen wir die komplette Genehmigungs- und Ausführungsplanung. Dies beinhaltet Elektro- und Netzanschlussplanungen, Machbarkeitsstudien sowie die finale digitale Bestandsdokumentation per GIS."
-    }
-  ]}
-/>
diff --git a/content/de/ueber-uns.mdx b/content/de/ueber-uns.mdx
index 85f0138b4..c420851c4 100644
--- a/content/de/ueber-uns.mdx
+++ b/content/de/ueber-uns.mdx
@@ -1,5 +1,5 @@
 ---
-title: "Über E-TIB"
+title: "Über uns"
 date: "2024-03-20"
 excerpt: "Die E-TIB Gruppe ist Ihr kompetenter Partner für Kabeltiefbau, Bohrtechnik und Ingenieurdienstleistungen."
 layout: "fullBleed"