fix: remove inline opacity: 0 from HeroSection and use animation-fill-mode both to prevent invisible text

fix: ci hang in maintenance, restore hero animations, bump version 2.4.23
chore: bump version to 2.4.22
2026-07-03 14:45:37 +02:00 · 2026-07-03 13:18:33 +02:00 · 2026-07-03 12:22:32 +02:00 · 2026-07-03 12:21:43 +02:00
22 changed files with 92 additions and 14794 deletions
--- a/.gitea/workflows/deploy.yml
+++ b/.gitea/workflows/deploy.yml
@@ -47,14 +47,7 @@ jobs:
        run: |
          echo "=== System Disk Usage ==="
          df -h || true
-          echo "=== Tool Cache Usage ==="
-          du -sh /opt/hostedtoolcache/* || true
-          du -sh /opt/hostedtoolcache/.[!.]* || true
          echo "Purging old tool caches skipped to prevent runner corruption."
-          echo "=== Host Disk Usage ==="
-          docker run --rm -v /:/host-root alpine df -h || true
-          echo "=== Host Inode Usage ==="
-          docker run --rm -v /:/host-root alpine df -i || true
          echo "=== Running Host Containers ==="
          docker ps --format "table {{.Names}}\t{{.Status}}\t{{.Image}}" || true
          echo "=== Host Docker Info ==="
--- a/.lighthouseci/lhr-1782911226698.html
+++ b/.lighthouseci/lhr-1782911226698.html
--- a/.lighthouseci/lhr-1782911226698.json
+++ b/.lighthouseci/lhr-1782911226698.json
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -21,7 +21,8 @@ import { DynamicInitialLoader as InitialLoader } from '@/components/providers/Dy
 import { DynamicMobileBottomNav as MobileBottomNav } from '@/components/layout/DynamicMobileBottomNav';

 import { DynamicCorporateBackground as CorporateBackground } from '@/components/decorations/DynamicCorporateBackground';
-const corporateBackground = null; // Removed to prevent line shifting
+import { DynamicPageTransitionShutter as PageTransitionShutter } from '@/components/providers/DynamicPageTransitionShutter';
+import { DynamicFramerMotion as FramerMotionProvider } from '@/components/providers/DynamicFramerMotion';

 const inter = Inter({
  subsets: ['latin'],
@@ -190,26 +191,28 @@ export default async function Layout(props: {
      <body className="relative flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white" suppressHydrationWarning>
        <NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
          <TransitionProvider>
-            <CorporateBackground />
-            {!hasSeenLoader && <InitialLoader shouldShowLoader={!hasSeenLoader} />}
-            {/* PageTransitionShutter loaded dynamically in TransitionProvider */}
-            <SkipLink />
-            <Header navLinks={navLinks} />
-            <MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} />
-            
-            <main
-              id="main-content"
-              className="flex-grow overflow-visible"
-              tabIndex={-1}
-            >
-              {children}
-            </main>
+            <FramerMotionProvider>
+              <CorporateBackground />
+              <InitialLoader shouldShowLoader={!hasSeenLoader} />
+              <PageTransitionShutter />
+              <SkipLink />
+              <Header navLinks={navLinks} />
+              <MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} />
+              
+              <main
+                id="main-content"
+                className="flex-grow overflow-visible"
+                tabIndex={-1}
+              >
+                {children}
+              </main>

-            <Footer companyInfo={companyInfo} />
-            <JsonLd />
-            <AnalyticsShell />
+              <Footer companyInfo={companyInfo} />
+              <JsonLd />
+              <AnalyticsShell />

-            <FeedbackClientWrapper />
+              <FeedbackClientWrapper />
+            </FramerMotionProvider>
          </TransitionProvider>
        </NextIntlClientProvider>
      </body>
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -132,12 +132,7 @@ export default async function Home(props: { params: Promise<{ locale: string }>
  }
  
  setRequestLocale(locale);
-  preload('/assets/videos/web/hero-kabelpflug-poster.webp', { 
-    as: 'image', 
-    fetchPriority: 'high',
-    imageSrcSet: '/assets/videos/web/hero-kabelpflug-poster-mobile.webp 800w, /assets/videos/web/hero-kabelpflug-poster.webp 1920w',
-    imageSizes: '100vw'
-  });
+  preload('/germany-map.svg', { as: 'image', fetchPriority: 'high' });

  const mdx = await getMdxContent(locale, 'home');
  const allReferences = await getAllReferences(locale);
--- a/app/globals.css
+++ b/app/globals.css
@@ -88,34 +88,30 @@
 }
 /* trigger rebuild */

-@layer utilities {
-  @keyframes hero-fade-in-up {
-    from {
-      opacity: 0;
-      transform: translateY(30px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+@keyframes hero-fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
  }
-  
-  .animate-hero-fade-in-up {
-    animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  to {
+    opacity: 1;
+    transform: translateY(0);
  }
 }

-@layer utilities {
-  @keyframes hero-zoom-out {
-    from {
-      transform: scale(1.05);
-    }
-    to {
-      transform: scale(1);
-    }
+@utility animate-hero-fade-in-up {
+  animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes hero-zoom-out {
+  from {
+    transform: scale(1.05);
  }
-  
-  .animate-hero-zoom-out {
-    animation: hero-zoom-out 1.5s ease-out forwards;
+  to {
+    transform: scale(1);
  }
 }
+
+@utility animate-hero-zoom-out {
+  animation: hero-zoom-out 1.5s ease-out forwards;
+}
--- a/components/blocks/HeroSection.tsx
+++ b/components/blocks/HeroSection.tsx
@@ -41,7 +41,6 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
              objectPosition: `${backgroundImage?.focalX ?? 50}% ${backgroundImage?.focalY ?? 50}%`,
            }}
            sizes="100vw"
-            quality={50}
            priority
          />
          {/* Cinematic Color Grading Overlay */}
@@ -61,26 +60,26 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
          className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}
        >
          {badge && (
-            <div className="animate-hero-fade-in-up" style={{ animationDelay: '0.1s', opacity: 0, animationFillMode: 'forwards' }}>
+            <div className="animate-hero-fade-in-up" style={{ animationDelay: '0.1s', animationFillMode: 'both' }}>
              <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
                {badge}
              </Badge>
            </div>
          )}
-            <div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.25s' : '0.1s', opacity: 0, animationFillMode: 'forwards' }}>
+            <div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.25s' : '0.1s', animationFillMode: 'both' }}>
              <Heading level={1} size="section" variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
                {title}
              </Heading>
            </div>
          {subtitle && (
-            <div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.4s' : '0.25s', opacity: 0, animationFillMode: 'forwards' }}>
+            <div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.4s' : '0.25s', animationFillMode: 'both' }}>
              <p className={`text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl ${alignment === 'center' ? 'mx-auto' : ''}`}>
                {subtitle}
              </p>
            </div>
          )}
          {ctaLabel && ctaHref && (
-            <div className={`mt-8 animate-hero-fade-in-up ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`} style={{ animationDelay: badge ? '0.55s' : '0.4s', opacity: 0, animationFillMode: 'forwards' }}>
+            <div className={`mt-8 animate-hero-fade-in-up ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`} style={{ animationDelay: badge ? '0.55s' : '0.4s', animationFillMode: 'both' }}>
              <Button
                href={ctaHref}
                variant="accent"
--- a/components/blocks/HeroVideo.tsx
+++ b/components/blocks/HeroVideo.tsx
@@ -34,7 +34,7 @@ export function HeroVideo(props: HeroVideoProps) {

  let defaultPoster = "/assets/photos/DJI_0048.JPG";
  if (videoUrl && videoUrl.endsWith('.mp4')) {
-    defaultPoster = videoUrl.replace('.mp4', '-poster.webp');
+    defaultPoster = videoUrl.replace('.mp4', '-poster.jpg');
  }

  const posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || defaultPoster;
@@ -80,14 +80,16 @@ export function HeroVideo(props: HeroVideoProps) {
      {/* Background color while video loads */}
      <div className="absolute inset-0 z-0 bg-neutral-dark" />
      
-      <img
+      {/* ALWAYS render the Next.js optimized Image as the LCP element */}
+      <Image
        key={`img-${pathname}-${posterSrc}`}
        src={posterSrc}
-        srcSet={posterSrc.includes('-poster.webp') ? `${posterSrc.replace('-poster.webp', '-poster-mobile.webp')} 800w, ${posterSrc} 1920w` : undefined}
-        sizes={posterSrc.includes('-poster.webp') ? "100vw" : undefined}
        alt={posterAlt}
-        className="absolute inset-0 w-full h-full object-cover z-[1] pointer-events-none"
-        decoding="sync"
+        fill
+        className="object-cover z-[1] pointer-events-none"
+        sizes="100vw"
+        quality={25}
+        priority
        fetchPriority="high"
      />
      {/* Fast compositing layer to replace the heavy CSS filters on the image */}
--- a/components/decorations/EUFundingBadge.tsx
+++ b/components/decorations/EUFundingBadge.tsx
@@ -23,7 +23,7 @@ export function EUFundingBadge() {
          alt="European Union Background"
          fill
          className="object-cover object-top"
-          loading="lazy"
+          priority
        />
      </div>
      
--- a/components/providers/DynamicFramerMotion.tsx
+++ b/components/providers/DynamicFramerMotion.tsx
@@ -0,0 +1,7 @@
+'use client';
+import dynamic from 'next/dynamic';
+
+export const DynamicFramerMotion = dynamic(
+  () => import('./FramerMotionProvider').then((mod) => mod.FramerMotionProvider),
+  { ssr: true }
+);
--- a/components/providers/FramerMotionProvider.tsx
+++ b/components/providers/FramerMotionProvider.tsx
@@ -0,0 +1,11 @@
+'use client';
+import { LazyMotion } from 'framer-motion';
+const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
+
+export function FramerMotionProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <LazyMotion features={loadFeatures} strict>
+      {children}
+    </LazyMotion>
+  );
+}
--- a/components/providers/InitialLoader.tsx
+++ b/components/providers/InitialLoader.tsx
@@ -72,8 +72,8 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
              {/* Sweeping intense white light */}
              <m.div
                className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg]"
-                initial={{ x: '-150%' }}
-                animate={{ x: '250%' }}
+                initial={{ left: '-150%' }}
+                animate={{ left: '250%' }}
                transition={{ duration: 2.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.5 }}
              />
            </div>
@@ -91,9 +91,9 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
                className="h-[2px] w-full bg-white/5 overflow-hidden relative rounded-full"
              >
                <m.div 
-                  className="absolute inset-y-0 left-0 w-full bg-gradient-to-r from-primary-dark via-primary to-primary-light origin-left"
-                  initial={{ scaleX: 0 }}
-                  animate={{ scaleX: 1 }}
+                  className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary-dark via-primary to-primary-light"
+                  initial={{ width: "0%" }}
+                  animate={{ width: "100%" }}
                  transition={{ duration: 3.8, ease: [0.16, 1, 0.3, 1] }}
                />
              </m.div>
--- a/components/providers/PageTransitionShutter.tsx
+++ b/components/providers/PageTransitionShutter.tsx
@@ -12,12 +12,12 @@ export function PageTransitionShutter() {
    <AnimatePresence>
      {isTransitioning && (
        <m.div
-          key="page-transition-shutter"
+          key="shutter"
          initial={{ y: '-100%' }}
-          animate={{ y: 0 }}
+          animate={{ y: '0%' }}
          exit={{ y: '100%' }}
-          transition={{ duration: 0.65, ease: [0.76, 0, 0.24, 1] }}
-          className="fixed left-0 right-0 z-[9998] bg-[#050B14] flex flex-col items-center justify-center overflow-hidden"
+          transition={{ duration: 0.9, ease: [0.16, 1, 0.3, 1] }}
+          className="fixed left-0 w-full z-[9998] bg-[#050B14] pointer-events-none flex flex-col items-center justify-center overflow-visible"
          style={{
            height: '100vh',
            top: '0',
@@ -56,8 +56,8 @@ export function PageTransitionShutter() {
              {/* Sweeping intense white light */}
              <m.div
                className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg]"
-                initial={{ x: '-150%' }}
-                animate={{ x: '250%' }}
+                initial={{ left: '-150%' }}
+                animate={{ left: '250%' }}
                transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.2 }}
              />
            </div>
--- a/components/providers/TransitionProvider.tsx
+++ b/components/providers/TransitionProvider.tsx
@@ -2,16 +2,6 @@

 import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
-import { LazyMotion } from 'framer-motion';
-import dynamic from 'next/dynamic';
-
-const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
-
-// Defer loading the shutter to eliminate AnimatePresence from the initial bundle
-const DynamicPageTransitionShutter = dynamic(
-  () => import('./PageTransitionShutter').then(mod => mod.PageTransitionShutter),
-  { ssr: false }
-);

 interface TransitionContextType {
  isTransitioning: boolean;
@@ -24,12 +14,8 @@ const TransitionContext = createContext<TransitionContextType | undefined>(undef
 export function TransitionProvider({ children }: { children: ReactNode }) {
  const [isTransitioning, setIsTransitioning] = useState(false);
  const [transitionMessage, setTransitionMessage] = useState<string | null>(null);
-  const [hasMountedShutter, setHasMountedShutter] = useState(false);
  const router = useRouter();

-  // We no longer eagerly load the shutter in the background.
-  // It will be loaded precisely when the user initiates a transition.
-
  // We use a ref to track transition state without triggering the route change effect when it turns true
  const isTransitioningRef = React.useRef(isTransitioning);
  useEffect(() => {
@@ -55,7 +41,6 @@ export function TransitionProvider({ children }: { children: ReactNode }) {

    setTransitionMessage(message);
    setIsTransitioning(true);
-    setHasMountedShutter(true);

    // Die Animation des Shutters abwarten (ca. 700ms), dann pushen
    setTimeout(() => {
@@ -83,10 +68,7 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
          setTransitionMessage={setTransitionMessage}
        />
      </React.Suspense>
-      <LazyMotion features={loadFeatures}>
-        {hasMountedShutter && <DynamicPageTransitionShutter />}
-        {children}
-      </LazyMotion>
+      {children}
    </TransitionContext.Provider>
  );
 }
--- a/content/de/home.mdx
+++ b/content/de/home.mdx
@@ -118,7 +118,7 @@ description: "Die E-TIB GmbH ist Ihr zuverlässiger Partner für komplexe Kabelt
  items={[
    {
      title: "Kabelleitungsnetzbau",
-      description: "Kabelleitungsnetzbau (Nieder-/Mittel- und Hochspannung bis 110 kV)",
+      description: "Kabelleitungsnetzbau (Hoch-/Mittel- und Niederspannung) sowie Kabelmontagen bis 110 kV",
      tag: "Energie",
      size: "large",
      href: "/de/kabeltiefbau",
--- a/content/de/kabeltiefbau.mdx
+++ b/content/de/kabeltiefbau.mdx
@@ -8,7 +8,7 @@ layout: "fullBleed"
 <HeroSection
  badge="Kernkompetenz"
  title="Kabelleitungsnetzbau"
-  subtitle="Komplette Infrastruktur-Lösungen für Nieder-, Mittel- und Hochspannungsnetze bis 110 kV"
+  subtitle="Komplette Infrastruktur-Lösungen für Hoch-, Mittel- und Niederspannungsnetze sowie Kabelmontagen bis 110 kV"
  backgroundImage={{ url: '/assets/photos/DSC01123.JPG' }}
  alignment="center"
  ctaLabel="Projekt anfragen"
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -15,6 +15,7 @@ const nextConfig = {
    pagesBufferLength: 2,
  },
  experimental: {
+    inlineCss: true,
    staleTimes: {
      dynamic: 0,
      static: 30,
--- a/package.json
+++ b/package.json
@@ -139,7 +139,7 @@
    "prepare": "husky",
    "preinstall": "npx only-allow pnpm"
  },
-  "version": "2.4.5",
+  "version": "2.4.24",
  "pnpm": {
    "onlyBuiltDependencies": [
      "@parcel/watcher",
--- a/public/assets/eu-flag.webp
+++ b/public/assets/eu-flag.webp
--- a/public/assets/videos/web/hero-kabelpflug-poster-mobile.webp
+++ b/public/assets/videos/web/hero-kabelpflug-poster-mobile.webp
--- a/public/assets/videos/web/hero-kabelpflug-poster.webp
+++ b/public/assets/videos/web/hero-kabelpflug-poster.webp
--- a/tests/homepage-and-competence-content.test.ts
+++ b/tests/homepage-and-competence-content.test.ts
@@ -39,7 +39,7 @@ describe('Task 6 Content Updates', () => {

    // DE Home
    expect(deContent).toContain('title: "Kabelleitungsnetzbau"');
-    expect(deContent).toContain('description: "Kabelleitungsnetzbau (Nieder-/Mittel- und Hochspannung bis 110 kV)"');
+    expect(deContent).toContain('description: "Kabelleitungsnetzbau (Hoch-/Mittel- und Niederspannung) sowie Kabelmontagen bis 110 kV"');
    expect(deContent).toContain('100+');
    expect(deContent).toContain('Mitarbeitende');

@@ -58,7 +58,7 @@ describe('Task 6 Content Updates', () => {
    expect(deContent).toContain('title: "Kabelleitungsnetzbau"');
    expect(deContent).toContain('excerpt: "Professioneller Kabelleitungsnetzbau');
    expect(deContent).toContain('Kabelmontagen bis 110 kV');
-    expect(deContent).toContain('subtitle="Komplette Infrastruktur-Lösungen für Nieder-, Mittel- und Hochspannungsnetze bis 110 kV"');
+    expect(deContent).toContain('subtitle="Komplette Infrastruktur-Lösungen für Hoch-, Mittel- und Niederspannungsnetze sowie Kabelmontagen bis 110 kV"');
    expect(deContent).toContain('"Kabelmontagen bis 110 kV"');

    // EN Kabelnetzbau
Author	SHA1	Message	Date
Marc Mintel	531e1a49f8	fix: remove inline opacity: 0 from HeroSection and use animation-fill-mode both to prevent invisible text All checks were successful Build & Deploy / 🔍 Prepare (push) Successful in 20s Details Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 47s Details Build & Deploy / 🧪 QA (push) Successful in 1m14s Details Build & Deploy / 🏗️ Build (push) Successful in 2m15s Details Build & Deploy / 🚀 Deploy (push) Successful in 25s Details Build & Deploy / 🔔 Notify (push) Successful in 3s Details	2026-07-03 14:45:37 +02:00
Marc Mintel	324cfb0ca3	fix: ci hang in maintenance, restore hero animations, bump version 2.4.23 All checks were successful Build & Deploy / 🔍 Prepare (push) Successful in 19s Details Build & Deploy / 🏗️ Build (push) Successful in 2m11s Details Build & Deploy / 🧪 QA (push) Successful in 1m19s Details Build & Deploy / 🚀 Deploy (push) Successful in 27s Details Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 49s Details Build & Deploy / 🔔 Notify (push) Successful in 4s Details	2026-07-03 13:18:33 +02:00
Marc Mintel	69d2c42ef7	chore: bump version to 2.4.22 Some checks failed Build & Deploy / 🔍 Prepare (push) Successful in 22s Details Build & Deploy / 🧪 QA (push) Successful in 1m19s Details Build & Deploy / 🏗️ Build (push) Failing after 22m7s Details Build & Deploy / 🚀 Deploy (push) Has been skipped Details Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped Details Build & Deploy / 🔔 Notify (push) Successful in 4s Details	2026-07-03 12:22:32 +02:00
Marc Mintel	6fb46278e0	fix: restore hero animations in tailwind v4 on 2.2.95 Some checks failed Build & Deploy / 🧪 QA (push) Has been cancelled Details Build & Deploy / 🏗️ Build (push) Has been cancelled Details Build & Deploy / 🚀 Deploy (push) Has been cancelled Details Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled Details Build & Deploy / 🔔 Notify (push) Has been cancelled Details Build & Deploy / 🔍 Prepare (push) Has been cancelled Details	2026-07-03 12:21:43 +02:00