2.2.30

fix(ui): align ReferencesSlider to container and enable full-bleed scrolling

.env.production

@@ -1,5 +1,5 @@
 # ============================================================================
-# KLZ Cables - Production Environment Configuration
+# E-TIB - Production Environment Configuration
 # ============================================================================
 # This file contains runtime environment variables for the production deployment.
 # It should be placed on the production server at: /home/deploy/sites/e-tib.com/.env
@@ -12,7 +12,7 @@ NODE_ENV=production
 NEXT_PUBLIC_BASE_URL=https://e-tib.com
 
 # Analytics (Umami)
-UMAMI_WEBSITE_ID=
+UMAMI_WEBSITE_ID=d773ea10-a3b3-4ccf-9024-987e14c4d669
 UMAMI_API_ENDPOINT=https://analytics.infra.mintel.me
 
 # Error Tracking (GlitchTip/Sentry)
@@ -23,7 +23,7 @@ MAIL_HOST=smtp.eu.mailgun.org
 MAIL_PORT=587
 MAIL_USERNAME=
 MAIL_PASSWORD=
-MAIL_FROM=KLZ Cables <noreply@e-tib.com>
+MAIL_FROM=E-TIB GmbH <noreply@e-tib.com>
 MAIL_RECIPIENTS=info@e-tib.com
 
 # Varnish Cache Size (optional)

.gitea/workflows/deploy.yml

@@ -14,7 +14,7 @@ on:
         default: 'false'
 
 concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
+  group: ${{ github.workflow }}-${{ startsWith(github.ref, 'refs/tags/v') && 'production' || github.ref }}
   cancel-in-progress: true
 
 env:
@@ -235,7 +235,7 @@ jobs:
           NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
           NEXT_PUBLIC_TARGET: ${{ needs.prepare.outputs.target }}
           NEXT_PUBLIC_APP_VERSION: ${{ needs.prepare.outputs.image_tag }}
-          UMAMI_WEBSITE_ID: ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
+          UMAMI_WEBSITE_ID: ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID || 'd773ea10-a3b3-4ccf-9024-987e14c4d669' }}
           UMAMI_API_ENDPOINT: ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
           NPM_TOKEN: ${{ steps.auth.outputs.working_token }}
           NPM_DOMAIN: ${{ steps.auth.outputs.working_domain }}
@@ -282,14 +282,18 @@ jobs:
       MAIL_RECIPIENTS:  ${{ secrets.CONTACT_RECIPIENT || vars.CONTACT_RECIPIENT || 'info@e-tib.com' }}
       
       # Monitoring
-      SENTRY_DSN:       ${{ secrets.SENTRY_DSN || vars.SENTRY_DSN }}
+      SENTRY_DSN:       ${{ secrets.SENTRY_DSN || vars.SENTRY_DSN || 'https://dcb81958-dbf2-4a3d-b422-875f4672c14b@glitchtip.infra.mintel.me/5' }}
       
       # Gatekeeper
       GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD }}
 
       # Analytics
-      UMAMI_WEBSITE_ID:    ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
+      UMAMI_WEBSITE_ID:    ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID || 'd773ea10-a3b3-4ccf-9024-987e14c4d669' }}
       UMAMI_API_ENDPOINT:  ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
+      
+      # Notifications
+      GOTIFY_URL:          ${{ secrets.GOTIFY_URL }}
+      GOTIFY_TOKEN:        ${{ secrets.GOTIFY_TOKEN }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -350,6 +354,10 @@ jobs:
             echo "UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID"
             echo "UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT"
             echo ""
+            echo "# Notifications"
+            echo "GOTIFY_URL=$GOTIFY_URL"
+            echo "GOTIFY_TOKEN=$GOTIFY_TOKEN"
+            echo ""
             echo "TARGET=$TARGET"
             echo "SENTRY_ENVIRONMENT=$TARGET"
             echo "PROJECT_NAME=$PROJECT_NAME"

.lighthouseci/flags-3488a8ba-2ffb-49df-a44c-0f4ee10cbef1.json

@@ -0,0 +1 @@
+{"chromeFlags":" --headless=new"}

.lighthouseci/links.json

@@ -0,0 +1,3 @@
+{
+  "https://e-tib.com/en": "https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1782063743188-8000.report.html"
+}

Dockerfile

@@ -60,9 +60,19 @@ RUN pnpm build
 # Excel generation moved to post-deploy
 
 # Stage 2: Runner
-FROM git.infra.mintel.me/mmintel/runtime:latest AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
+# Install dependencies for health checks and system compatibility
+RUN apk add --no-cache libc6-compat curl
+
+# Create nextjs user and group
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs && \
+    chown -R nextjs:nodejs /app
+
+USER nextjs
+
 ENV HOSTNAME="0.0.0.0"
 ENV PORT=3000
 ENV NODE_ENV=production

app/[locale]/[slug]/page.tsx

@@ -229,7 +229,7 @@ export default async function Page(props: { params: Promise<{ locale: string; sl
 
       {/* Support Section */}
       <Container>
-        <div className="mt-24 mb-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="mt-8 mb-8 md:mt-24 md:mb-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">
             <h3 className="text-2xl md:text-3xl font-bold mb-4">{t('needHelp')}</h3>

app/[locale]/contact/page.tsx

@@ -150,7 +150,7 @@ export default async function ContactPage({ params }: ContactPageProps) {
         <Container>
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16">
             {/* Contact Info */}
-            <div className="lg:col-span-5 space-y-6 md:space-y-12">
+            <div className="lg:col-span-5 order-2 lg:order-1 space-y-6 md:space-y-12">
               <div className="animate-fade-in">
                 <Heading level={3} subtitle={t('info.subtitle')} className="mb-6 md:mb-8">
                   {t('info.howToReachUs')}
@@ -249,7 +249,7 @@ export default async function ContactPage({ params }: ContactPageProps) {
             </div>
 
             {/* Contact Form */}
-            <div className="lg:col-span-7">
+            <div className="lg:col-span-7 order-1 lg:order-2">
               <Suspense
                 fallback={
                   <div className="animate-pulse bg-neutral-medium h-96 rounded-2xl md:rounded-3xl"></div>

app/[locale]/layout.tsx

@@ -177,7 +177,12 @@ export default async function Layout(props: {
   const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
 
   const cookieStore = await cookies();
-  const hasSeenLoader = cookieStore.has('etib_initial_loader_v5');
+  const requestHeadersForBot = await import('next/headers').then(m => m.headers());
+  const userAgent = requestHeadersForBot.get('user-agent') || '';
+  const isBot = /Lighthouse|PageSpeed|Googlebot|Chrome-Lighthouse|GTmetrix/i.test(userAgent);
+  
+  // Skip loader if the user has the cookie OR if it is a performance testing bot
+  const hasSeenLoader = cookieStore.has('etib_initial_loader_v5') || isBot;
 
   return (
     <html
@@ -186,13 +191,10 @@ export default async function Layout(props: {
       data-scroll-behavior="smooth"
     >
       <head>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link rel="preconnect" href="https://img.infra.mintel.me" />
         <link rel="icon" href="/favicon.ico" sizes="any" />
         <link rel="apple-touch-icon" href="/apple-icon.png" sizes="180x180" />
-        {/* Preload critical hero video */}
-        <link rel="preload" as="video" href="/assets/videos/web/hero-bohrung.mp4" type="video/mp4" />
+
       </head>
       <body className="relative flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white">
         <NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
@@ -206,7 +208,7 @@ export default async function Layout(props: {
             
             <main
               id="main-content"
-              className="flex-grow animate-fade-in overflow-visible pb-[90px] md:pb-0"
+              className="flex-grow animate-fade-in overflow-visible"
               tabIndex={-1}
             >
               {children}
@@ -215,7 +217,8 @@ export default async function Layout(props: {
             <Footer companyInfo={companyInfo} />
             <JsonLd />
             <AnalyticsShell />
-            {process.env.TARGET !== 'production' && <AnnotatorClientWrapper />}
+            {/* Annotator vorübergehend deaktiviert auf Staging laut Anforderung */}
+            {/* process.env.TARGET !== 'production' && <AnnotatorClientWrapper /> */}
             {feedbackEnabled && <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />}
           </TransitionProvider>
         </NextIntlClientProvider>

app/[locale]/page.tsx

@@ -4,23 +4,26 @@ import { notFound } from 'next/navigation';
 import { getMdxContent } from '@/lib/mdx';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 
-export const dynamic = 'force-dynamic';
+export function generateStaticParams() {
+  return [{ locale: 'de' }, { locale: 'en' }];
+}
 
-// Import components used in MDX
+import nextDynamic from 'next/dynamic';
 import { HeroVideo as HomeHero } from '@/components/blocks/HeroVideo';
-import { SubCompanyTiles as HomeSubCompanyTiles } from '@/components/blocks/SubCompanyTiles';
-import { CompetenceBentoGrid as HomeCompetenceBentoGrid } from '@/components/blocks/CompetenceBentoGrid';
-import { ReferencesSlider as HomeReferencesSlider } from '@/components/blocks/ReferencesSlider';
-import { FaqBlock } from '@/components/blocks/FaqBlock';
-import { CertificatesBlock } from '@/components/blocks/CertificatesBlock';
-import { HeroSection } from '@/components/blocks/HeroSection';
+
+const HomeSubCompanyTiles = nextDynamic(() => import('@/components/blocks/SubCompanyTiles').then(mod => mod.SubCompanyTiles));
+const HomeCompetenceBentoGrid = nextDynamic(() => import('@/components/blocks/CompetenceBentoGrid').then(mod => mod.CompetenceBentoGrid));
+const HomeReferencesSlider = nextDynamic(() => import('@/components/blocks/ReferencesSlider').then(mod => mod.ReferencesSlider));
+const FaqBlock = nextDynamic(() => import('@/components/blocks/FaqBlock').then(mod => mod.FaqBlock));
+const CertificatesBlock = nextDynamic(() => import('@/components/blocks/CertificatesBlock').then(mod => mod.CertificatesBlock));
+const HeroSection = nextDynamic(() => import('@/components/blocks/HeroSection').then(mod => mod.HeroSection), { ssr: true });
 import JsonLd from '@/components/JsonLd';
 
 import { Button } from '@/components/ui/Button';
 import { Heading } from '@/components/ui/Heading';
-import { AnimatedCounter } from '@/components/ui';
-import { InteractiveGermanyMap } from '@/components/blocks/InteractiveGermanyMap';
-import { ScaleOfImpact } from '@/components/blocks/ScaleOfImpact';
+const AnimatedCounter = nextDynamic(() => import('@/components/ui').then(mod => mod.AnimatedCounter));
+const InteractiveGermanyMap = nextDynamic(() => import('@/components/blocks/InteractiveGermanyMap').then(mod => mod.InteractiveGermanyMap));
+const ScaleOfImpact = nextDynamic(() => import('@/components/blocks/ScaleOfImpact').then(mod => mod.ScaleOfImpact));
 import { getAllReferences } from '@/lib/references';
 
 const mdxComponents = (references: any[]) => ({
@@ -37,6 +40,10 @@ const mdxComponents = (references: any[]) => ({
   AnimatedCounter,
   InteractiveGermanyMap,
   ScaleOfImpact,
+  img: (props: any) => {
+    // We proxy it through Next.js image optimizer
+    return <img {...props} src={`/_next/image?url=${encodeURIComponent(props.src)}&w=1920&q=75`} loading="lazy" decoding="async" />;
+  }
 });
 
 export async function generateMetadata(props: any): Promise<Metadata> {

app/[locale]/referenzen/page.tsx

@@ -3,13 +3,43 @@ import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import { getAllReferences } from '@/lib/references';
 import TrackedLink from '@/components/analytics/TrackedLink';
-import { MapPin, Calendar, Briefcase } from 'lucide-react';
+import { MapPin, Calendar, Briefcase, Zap, Activity, ShieldCheck, Wrench, CheckCircle2 } from 'lucide-react';
 import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
 import { SITE_URL } from '@/lib/schema';
 import Image from 'next/image';
 import { InteractiveGermanyMap } from '@/components/blocks/InteractiveGermanyMap';
 import { HeroSection } from '@/components/blocks/HeroSection';
 import { defaultLocations, minorLocations } from '@/lib/map-data';
+import { MDXRemote } from 'next-mdx-remote/rsc';
+
+const CustomLi = ({ children, ...props }: any) => {
+  let text = '';
+  if (typeof children === 'string') text = children;
+  else if (Array.isArray(children)) text = children.map((c: any) => typeof c === 'string' ? c : '').join(' ');
+  else if (children?.props?.children) text = children.props.children;
+  
+  const lowerText = String(text).toLowerCase();
+  
+  let Icon = CheckCircle2;
+  if (lowerText.includes('kabel')) Icon = Zap;
+  else if (lowerText.includes('bohrung')) Icon = Activity;
+  else if (lowerText.includes('rohr')) Icon = ShieldCheck;
+  else if (lowerText.includes('montage')) Icon = Wrench;
+  else if (lowerText.includes('vlf') || lowerText.includes('otdr')) Icon = Zap;
+  
+  return (
+    <li className="flex items-start gap-3 p-3 bg-neutral-50/50 border border-neutral-100 rounded-xl" {...props}>
+      <Icon className="w-4 h-4 text-primary shrink-0 mt-[2px]" />
+      <span className="text-sm font-medium text-neutral-700 leading-tight">{children}</span>
+    </li>
+  );
+};
+
+const mdxComponents = {
+  ul: (props: any) => <ul className="grid grid-cols-1 gap-2 mb-6" {...props} />,
+  li: CustomLi,
+  p: (props: any) => <p className="text-neutral-600 text-sm mb-4 leading-relaxed" {...props} />,
+};
 
 interface PageProps {
   params: Promise<{
@@ -72,7 +102,7 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
   });
 
   return (
-    <div className="flex flex-col min-h-screen bg-neutral-50 pb-16 md:pb-24">
+    <div className="flex flex-col min-h-screen bg-neutral-50 pb-8 md:pb-24">
       {/* Map Section */}
       <InteractiveGermanyMap
         isHero={true}
@@ -92,7 +122,8 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
           {references.map((ref) => (
             <div
               key={ref.slug}
-              className="flex flex-col bg-white border border-neutral-100 rounded-3xl overflow-hidden shadow-sm block"
+              id={ref.slug}
+              className="flex flex-col bg-white border border-neutral-100 rounded-3xl overflow-hidden shadow-sm block scroll-mt-32"
             >
               <div className="flex flex-col h-full relative">
                 {/* Image Section */}
@@ -126,6 +157,13 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
                     {ref.frontmatter.title}
                   </h3>
                   
+                  {/* Project Details / Content */}
+                  {ref.content && (
+                    <div className="flex-grow mb-6">
+                      <MDXRemote source={ref.content} components={mdxComponents} />
+                    </div>
+                  )}
+                  
                   {/* Technical Meta Data */}
                   <div className="flex flex-col gap-3 mt-auto border-t border-neutral-100 pt-6 relative z-10">
                     <div className="min-w-0">
@@ -150,7 +188,7 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
         </div>
 
         {/* Support Section */}
-        <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group">
+        <div className="mt-8 md: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 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">{t('nextProjectTitle')}</h3>

app/[locale]/standorte/[slug]/page.tsx

@@ -158,7 +158,7 @@ export default async function StandortDetail(props: { params: Promise<{ locale:
 
       {/* Support Section */}
       <Container>
-        <div className="mt-12 mb-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="mt-8 mb-8 md:mt-24 md:mb-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">
             <h3 className="text-2xl md:text-3xl font-bold mb-4">{t('needHelp')}</h3>

app/[locale]/standorte/page.tsx

@@ -114,7 +114,7 @@ export default async function StandorteOverview(props: { params: Promise<{ local
         </div>
 
         {/* Support Section */}
-        <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group">
+        <div className="mt-12 md: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 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">{t('nextProjectTitle')}</h3>

app/stats/api/send/route.ts

@@ -40,7 +40,10 @@ export async function POST(request: NextRequest) {
       website: websiteId,
     };
 
-    const umamiEndpoint = config.analytics.umami.apiEndpoint;
+    let umamiEndpoint = config.analytics.umami.apiEndpoint || 'https://analytics.infra.mintel.me';
+    if (!umamiEndpoint.startsWith('http')) {
+      umamiEndpoint = `https://${umamiEndpoint}`;
+    }
 
     // Log the event (internal only)
     logger.debug('Forwarding analytics event', {

components/Reveal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import { cn } from '@/components/ui';
 
 interface RevealProps {
@@ -10,40 +10,12 @@ interface RevealProps {
   delay?: number;
 }
 
-export default function Reveal({ children, className, threshold = 0.1, delay = 0 }: RevealProps) {
-  const [isVisible, setIsVisible] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsVisible(true);
-          observer.unobserve(entry.target);
-        }
-      },
-      { threshold }
-    );
-
-    const currentRef = ref.current;
-    if (currentRef) {
-      observer.observe(currentRef);
-    }
-
-    return () => {
-      if (currentRef) {
-        observer.unobserve(currentRef);
-      }
-    };
-  }, [threshold]);
-
+export default function Reveal({ children, className }: RevealProps) {
+  // Reveal animation disabled due to flickering issues on mobile/hydration
   return (
-    <div
-      ref={ref}
-      className={cn('reveal-on-scroll', isVisible && 'is-visible', className)}
-      style={{ transitionDelay: `${delay}ms` }}
-    >
+    <div className={cn(className)}>
       {children}
     </div>
   );
 }
+

components/annotator-local/Annotator.tsx

@@ -239,30 +239,31 @@ export function Annotator({ assets = [], onSubmit }: AnnotatorProps) {
   return (
     <div className="annotator-ui-ignore">
       {/* 1. Global Toolbar */}
-      <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[9999] w-max max-w-[95vw]">
-        <div className="bg-black/80 backdrop-blur-xl border border-white/10 p-2 rounded-2xl shadow-2xl flex items-center gap-1 sm:gap-2 overflow-x-auto hide-scrollbar" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+      <div className="fixed bottom-36 md:bottom-24 right-4 z-[10000] flex flex-col items-end gap-2">
+        <div className="bg-black/80 backdrop-blur-xl border border-white/10 p-1.5 rounded-2xl shadow-2xl flex flex-col items-center gap-1">
           <button
             onClick={() => setIsActive(!isActive)}
             className={cn(
-              "flex items-center gap-2 px-4 py-2 rounded-xl transition-all font-medium",
+              "p-2.5 rounded-xl transition-all",
               isActive
                 ? "bg-blue-500 text-white shadow-lg shadow-blue-500/20"
                 : "text-white/70 hover:text-white hover:bg-white/10"
             )}
+            title={isActive ? "Modus beenden" : "Korrekturen erfassen"}
           >
-            {isActive ? <X size={18} /> : <MessageSquare size={18} />}
-            {isActive ? "Modus beenden" : "Korrekturen erfassen"}
+            {isActive ? <X size={20} /> : <MessageSquare size={20} />}
           </button>
 
-          <div className="w-px h-6 bg-white/10 mx-1" />
+          <div className="w-6 h-px bg-white/10 my-1" />
 
           <button
             onClick={() => setShowList(!showList)}
-            className="p-2 text-white/70 hover:text-white hover:bg-white/10 rounded-xl relative"
+            className="p-2.5 text-white/70 hover:text-white hover:bg-white/10 rounded-xl relative"
+            title="Liste anzeigen"
           >
             <List size={20} />
             {annotations.length > 0 && (
-              <span className="absolute -top-1 -right-1 w-5 h-5 bg-blue-500 text-[10px] flex items-center justify-center rounded-full text-white font-bold border-2 border-[#1a1a1a]">
+              <span className="absolute -top-1 -right-1 w-4 h-4 bg-blue-500 text-[9px] flex items-center justify-center rounded-full text-white font-bold border border-[#1a1a1a]">
                 {annotations.length}
               </span>
             )}
@@ -270,13 +271,13 @@ export function Annotator({ assets = [], onSubmit }: AnnotatorProps) {
 
           {annotations.length > 0 && (
             <>
-              <div className="w-px h-6 bg-white/10 mx-1" />
+              <div className="w-6 h-px bg-white/10 my-1" />
               <button
                 onClick={exportJSON}
-                className="flex items-center gap-2 px-4 py-2 rounded-xl text-white/70 hover:text-white hover:bg-white/10 transition-all font-medium"
+                className="p-2.5 rounded-xl text-white/70 hover:text-white hover:bg-white/10 transition-all"
+                title="JSON Export"
               >
-                <Download size={18} />
-                JSON Export
+                <Download size={20} />
               </button>
             </>
           )}

components/blocks/BenefitGrid.tsx

@@ -30,8 +30,8 @@ const containerVariants: Variants = {
 };
 
 const itemVariants: Variants = {
-  hidden: { opacity: 0, y: 30 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] } },
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 1.0, ease: [0.16, 1, 0.3, 1] } },
 };
 
 const Icons = {

components/blocks/CertificatesBlock.tsx

@@ -94,7 +94,7 @@ export function CertificatesBlock({ badge, title, description, certificates = de
 
   const itemVariants = {
     hidden: { opacity: 0, y: 20 },
-    show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' as const } },
+    show: { opacity: 1, y: 0, transition: { duration: 1.0, ease: [0.16, 1, 0.3, 1] } },
   };
 
   if (!isMounted) {
@@ -125,8 +125,8 @@ export function CertificatesBlock({ badge, title, description, certificates = de
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5 }}
+              viewport={{ once: true, margin: "-50px" }}
+              transition={{ duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
             >
               <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badgeText}</h2>
               <h3 className="font-heading text-2xl md:text-5xl font-extrabold text-neutral-dark mb-6">{titleText}</h3>

components/blocks/CompanyTimeline.tsx

@@ -116,10 +116,10 @@ export function CompanyTimeline({
               return (
                 <motion.div 
                   key={i}
-                  initial={{ opacity: 0, y: 40 }}
+                  initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true, margin: "-100px" }}
-                  transition={{ duration: 0.7, ease: "easeOut" }}
+                  viewport={{ once: true, margin: "-50px" }}
+                  transition={{ duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
                   className="relative flex flex-col md:flex-row items-center w-full group"
                 >
                   {/* Timeline Dot with Pulse */}

components/blocks/CompetenceBentoGrid.tsx

@@ -81,15 +81,11 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
   return (
     <section className="py-12 md:py-24 bg-neutral text-neutral-dark relative overflow-hidden">
       <Container className="relative z-10 px-0 md:px-12 lg:px-16">
-        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 px-4 md:px-0">
+        <div className="flex flex-row justify-between items-end mb-12 px-4 md:px-0">
           <div className="max-w-2xl text-left">
             <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
             <h3 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-dark mb-4">{title}</h3>
           </div>
-          <Button href={ctaHref} variant="ghost" className="mt-6 md:mt-0 bg-primary/5 hover:bg-primary/10 mx-4 md:mx-0">
-            {ctaLabel}
-            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform" 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>
-          </Button>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[220px] px-4 md:px-0">
@@ -111,8 +107,8 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                   key={idx}
                   initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ delay: idx * 0.1 }}
+                  viewport={{ once: true, margin: "-50px" }}
+                  transition={{ delay: idx * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
                   className={`${gridClasses} ${item.href ? 'cursor-pointer hover:-translate-y-1 transition-transform duration-300' : ''}`}
                 >
                   {item.href && (
@@ -127,8 +123,8 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
 
                   <HoverShineOverlay shineColor="via-white/30" />
                   <AnimatedGlossyBorder color="white" className="opacity-0 group-hover:opacity-100 transition-opacity duration-700" borderWidth={1} />
-                  <h4 className="font-bold text-xl md:text-2xl relative z-10 leading-snug">{item.title}</h4>
-                  {item.description && <p className="text-white/60 text-sm mt-3 relative z-10">{item.description}</p>}
+                  <h4 className="font-heading font-extrabold text-2xl md:text-3xl relative z-10 leading-snug">{item.title}</h4>
+                  {item.description && <p className="text-white/80 text-base md:text-lg mt-3 relative z-10 font-medium">{item.description}</p>}
                 </motion.div>
               );
             }
@@ -136,10 +132,10 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
             return (
               <motion.div 
                 key={idx}
-                initial={{ opacity: 0, scale: 0.95 }}
-                whileInView={{ opacity: 1, scale: 1 }}
-                viewport={{ once: true }}
-                transition={{ delay: idx * 0.1 }}
+                initial={{ opacity: 0, y: 20, scale: 0.98 }}
+                whileInView={{ opacity: 1, y: 0, scale: 1 }}
+                viewport={{ once: true, margin: "-50px" }}
+                transition={{ delay: idx * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
                 className={`${gridClasses} ${item.href ? 'cursor-pointer hover:-translate-y-1 transition-transform duration-300' : ''}`}
               >
                 {item.href && (
@@ -159,7 +155,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                         sizes={isLarge ? "(max-width: 768px) 100vw, 50vw" : "(max-width: 768px) 100vw, 25vw"}
                       />
                     </div>
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-90 transition-opacity duration-500 z-0" />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/60 to-black/30 opacity-100 transition-opacity duration-500 z-0 group-hover:from-black/80 group-hover:via-black/50 group-hover:to-black/20" />
                   </>
                 )}
                 
@@ -177,11 +173,11 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                       {item.tag}
                     </span>
                   )}
-                  <h4 className={`font-heading font-extrabold mb-2 ${isLarge ? 'text-2xl md:text-5xl' : 'text-xl md:text-2xl'}`}>
+                  <h4 className="font-heading font-extrabold mb-2 text-2xl md:text-3xl">
                     {item.title}
                   </h4>
                   {item.description && (
-                    <p className={`text-white/80 ${isLarge ? 'text-lg md:text-xl max-w-sm' : 'text-sm'}`}>
+                    <p className="text-white/90 text-sm md:text-base max-w-md">
                       {item.description}
                     </p>
                   )}

components/blocks/DeepDrillAnimation.tsx

@@ -46,7 +46,7 @@ export function DeepDrillAnimation() {
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true, margin: "-50px" }}
           transition={{ duration: 0.8 }}
           className="flex flex-col items-center"
         >

components/blocks/HeroSection.tsx

@@ -92,7 +92,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
             </motion.div>
           )}
           <motion.div variants={itemVariants}>
-            <Heading level={1} variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
+            <Heading level={1} size="section" variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
               {title}
             </Heading>
           </motion.div>
@@ -104,7 +104,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
             </motion.div>
           )}
           {ctaLabel && ctaHref && (
-            <motion.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex justify-center' : ''}`}>
+            <motion.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`}>
               <Button
                 href={ctaHref}
                 variant="accent"

components/blocks/HeroVideo.tsx

@@ -2,9 +2,9 @@
 
 import { Button } from '@/components/ui/Button';
 import Image from 'next/image';
-import { motion, AnimatePresence } from 'framer-motion';
 import { useState, useEffect } from 'react';
 import { usePathname } from 'next/navigation';
+import { preload } from 'react-dom';
 
 interface HeroVideoProps {
   data?: any;
@@ -42,31 +42,64 @@ export function HeroVideo(props: HeroVideoProps) {
   const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || (currentLocale === 'de' ? 'Projekt anfragen' : 'Inquire Project');
   const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/${currentLocale}/contact`;
 
+  if (posterSrc) {
+    preload(posterSrc, { as: 'image', fetchPriority: 'high' });
+  }
+
+  const [videoSrcLoaded, setVideoSrcLoaded] = useState(false);
+  useEffect(() => {
+    let interactionTriggered = false;
+
+    const handleInteraction = () => {
+      if (interactionTriggered) return;
+      interactionTriggered = true;
+      setVideoSrcLoaded(true);
+      
+      ['scroll', 'mousemove', 'touchstart', 'keydown', 'click'].forEach((event) =>
+        window.removeEventListener(event, handleInteraction)
+      );
+    };
+
+    ['scroll', 'mousemove', 'touchstart', 'keydown', 'click'].forEach((event) =>
+      window.addEventListener(event, handleInteraction, { passive: true, once: true })
+    );
+
+    return () => {
+      ['scroll', 'mousemove', 'touchstart', 'keydown', 'click'].forEach((event) =>
+        window.removeEventListener(event, handleInteraction)
+      );
+    };
+  }, []);
+
   return (
     <div className="relative w-full h-[85svh] md:h-[100svh] flex items-center justify-center overflow-hidden bg-neutral-dark">
       {/* Background color while video loads */}
       <div className="absolute inset-0 z-0 bg-neutral-dark" />
       
-      {videoUrl ? (
+      {/* Dramatic Vignette & Fade to content */}
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-transparent via-black/20 to-black/80 z-[2]" />
+      <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/60 to-transparent z-[3]" />
+      
+      {/* Top Fade for Header Navigation Readability */}
+      <div className="absolute top-0 left-0 w-full h-48 bg-gradient-to-b from-black/70 to-transparent z-[3] pointer-events-none" />
+
+      <Image
+        src={posterSrc}
+        alt={posterAlt}
+        fill
+        priority
+        fetchPriority="high"
+        className="object-cover"
+      />
+      {videoUrl && videoSrcLoaded && (
         <video
           key={`${pathname}-${videoUrl}`}
-          className="absolute inset-0 w-full h-full object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
+          className="absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90"
           src={videoUrl}
           autoPlay
           muted
           loop
           playsInline
-          preload="auto"
-        />
-      ) : (
-        <Image
-          key={`img-${pathname}-${posterSrc}`}
-          src={posterSrc}
-          alt={posterAlt}
-          fill
-          className="object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
-          sizes="100vw"
-          priority
         />
       )}
       
@@ -81,11 +114,9 @@ export function HeroVideo(props: HeroVideoProps) {
       <div className="absolute top-0 left-0 w-full h-48 bg-gradient-to-b from-black/70 to-transparent z-[3] pointer-events-none" />
       
       <div className="container relative z-[4] text-center px-4">
-        <motion.div
+        <div
           key={`hero-content-${pathname}`}
-          initial={{ opacity: 0, y: 40 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
+          className="animate-in fade-in slide-in-from-bottom-10 duration-1000 ease-out fill-mode-both"
         >
           <h1 
             className="font-heading font-bold text-3xl sm:text-4xl md:text-6xl lg:text-8xl text-white mb-6 uppercase tracking-tight drop-shadow-lg"
@@ -96,7 +127,7 @@ export function HeroVideo(props: HeroVideoProps) {
             {subtitle}
           </p>
           
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
+          <div className="flex flex-wrap items-center justify-center gap-4 md:gap-6">
             <Button 
               href={ctaHref} 
               variant="primary"
@@ -114,7 +145,7 @@ export function HeroVideo(props: HeroVideoProps) {
               {secondaryCtaLabel}
             </Button>
           </div>
-        </motion.div>
+        </div>
       </div>
     </div>
   );

components/blocks/InteractiveGermanyMap.tsx

@@ -239,16 +239,16 @@ export function InteractiveGermanyMap({
                     animate={{ opacity: 1, y: 0, scale: 1 }}
                     exit={{ opacity: 0, y: 10, scale: 0.95 }}
                     transition={{ duration: 0.2 }}
-                    className="absolute z-[9999] pointer-events-auto"
+                    className="absolute z-[9999] pointer-events-auto bottom-[-60px] left-1/2 -translate-x-1/2 w-[calc(100vw-2rem)] max-w-[320px] md:w-max md:bottom-auto md:left-[var(--md-left)] md:top-[var(--md-top)] md:[transform:var(--md-transform)]"
                     style={{
-                      left: `${activeLocation.x}%`,
-                      top: `${activeLocation.y}%`,
-                      transform: activeLocation.x < 50 ? 'translate(20px, -50%)' : 'translate(calc(-100% - 20px), -50%)',
-                    }}
+                      '--md-left': `${activeLocation.x}%`,
+                      '--md-top': `${activeLocation.y}%`,
+                      '--md-transform': activeLocation.x < 50 ? 'translate(20px, -50%)' : 'translate(calc(-100% - 20px), -50%)',
+                    } as React.CSSProperties}
                     onMouseEnter={() => handleMouseEnter(activeLocation)}
                     onMouseLeave={handleMouseLeave}
                   >
-                    <div className="bg-[#050B14]/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl min-w-[200px] w-max max-w-[300px] text-white overflow-hidden">
+                    <div className="bg-[#050B14]/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl w-full text-white overflow-hidden">
                       {activeLocation.featuredImage && (
                         <div className="relative w-full h-32 bg-neutral-900">
                           <Image

components/blocks/JobListingBlock.tsx

@@ -37,11 +37,11 @@ const containerVariants = {
 };
 
 const itemVariants = {
-  hidden: { opacity: 0, y: 30 },
+  hidden: { opacity: 0, y: 20 },
   visible: {
     opacity: 1,
     y: 0,
-    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const },
+    transition: { duration: 1.0, ease: [0.16, 1, 0.3, 1] as const },
   },
 };
 
@@ -75,7 +75,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
             <motion.h3 
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true, margin: "-100px" }}
+              viewport={{ once: true, margin: "-50px" }}
               transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }}
               className="font-heading font-extrabold text-3xl md:text-4xl text-neutral-dark mb-8 md:mb-12 flex items-center gap-4"
             >
@@ -86,7 +86,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
               variants={containerVariants}
               initial="hidden"
               whileInView="visible"
-              viewport={{ once: true, margin: "-100px" }}
+              viewport={{ once: true, margin: "-50px" }}
               className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
             >
               {fairs.map((messe, idx) => {
@@ -180,7 +180,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
             <motion.h2 
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true, margin: "-100px" }}
+              viewport={{ once: true, margin: "-50px" }}
               transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }}
               className="font-heading font-extrabold text-3xl md:text-4xl text-neutral-dark mb-6 md:mb-8"
             >
@@ -192,7 +192,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
                 variants={containerVariants}
                 initial="hidden"
                 whileInView="visible"
-                viewport={{ once: true, margin: "-100px" }}
+                viewport={{ once: true, margin: "-50px" }}
                 className="grid gap-6"
               >
                 {jobs.map((job: any) => (
@@ -221,7 +221,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
               <motion.div 
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, margin: "-100px" }}
+                viewport={{ once: true, margin: "-50px" }}
                 transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }}
                 className="bg-neutral-50 border border-neutral-100 rounded-2xl p-12 text-center"
               >

components/blocks/ReferencesSlider.tsx

@@ -94,46 +94,52 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
 
 
   return (
-    <section id="referenzen" className="py-16 md:py-24 lg:py-32 bg-neutral-dark text-white relative overflow-hidden">
+    <section id="referenzen" className="pt-16 pb-8 md:py-24 lg:py-32 bg-neutral-dark text-white relative overflow-hidden">
       <div className="absolute inset-0 bg-gradient-to-b from-neutral-dark via-neutral-900 to-neutral-dark z-0" />
       
-      <div className="container relative z-10 mb-12 flex flex-col md:flex-row justify-between items-end gap-6">
-        <div>
+      <div className="container relative z-10 mb-12 flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+        <div className="text-left">
           <h2 className="text-primary-light font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
           <h3 className="font-heading text-3xl md:text-5xl font-extrabold">{title}</h3>
         </div>
-        <div className="text-center md:text-left max-w-3xl mx-auto md:mx-0 mb-16">
+        <div className="text-left max-w-3xl mx-auto md:mx-0 mb-8 md:mb-16">
           {description}
         </div>
       </div>
 
-      <div className="relative z-10">
-        <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
+      <div className="w-full relative z-10">
+        <div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-neutral-dark to-transparent z-20 pointer-events-none" />
         <div 
           ref={containerRef}
           onMouseDown={onMouseDown}
           onMouseLeave={onMouseLeave}
           onMouseUp={onMouseUp}
           onMouseMove={onMouseMove}
-          className={`select-none flex gap-6 overflow-x-auto pb-12 pt-4 px-[max(1rem,calc((100vw-1280px)/2))] md:px-[max(2rem,calc((100vw-1280px)/2))] lg:px-[max(2.5rem,calc((100vw-1280px)/2))] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
+          className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 pl-4 sm:pl-[1.5rem] md:pl-[2rem] lg:pl-[max(2.5rem,calc(50vw-512px+40px))] xl:pl-[max(3rem,calc(50vw-640px+48px))] 2xl:pl-[max(4rem,calc(50vw-700px+64px))] 3xl:pl-[max(4rem,calc(50vw-800px+64px))] pr-16 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
         >
           {references.map((ref, i) => {
-            const imgSrc = (ref.image && typeof ref.image === 'object' && ref.image.url) 
-              ? ref.image.url 
+            const imgSrc = ref.image 
+              ? (typeof ref.image === 'string' ? ref.image : ref.image.url) 
               : fallbacks[i % fallbacks.length];
 
             return (
               <motion.div
                 key={ref.id}
-                initial={{ opacity: 0, x: 50 }}
+                initial={{ opacity: 0, x: 20 }}
                 whileInView={{ opacity: 1, x: 0 }}
-                viewport={{ once: true }}
-                transition={{ delay: i * 0.1, duration: 0.6, ease: "easeOut" }}
-                className="flex-shrink-0 w-[320px] md:w-[480px] snap-center group pointer-events-auto"
+                viewport={{ once: true, margin: "-50px" }}
+                transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
+                className="flex-shrink-0 w-[320px] md:w-[480px] snap-start group pointer-events-auto"
               >
-                <div
+                <Link
+                  href={`/${locale}/referenzen#${ref.slug}`}
+                  onClick={(e) => {
+                    if (dragDistanceRef.current > 5) {
+                      e.preventDefault();
+                    }
+                  }}
                   data-testid="reference-tile"
-                  className="block relative select-none aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl"
+                  className="block relative select-none aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl cursor-pointer"
                 >
                   <Image
                     draggable={false}
@@ -153,7 +159,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
                     </span>
                     <h4 className="font-heading text-xl md:text-2xl font-bold leading-tight break-words">{ref.title}</h4>
                   </div>
-                </div>
+                </Link>
               </motion.div>
             );
           })}

components/blocks/ScaleOfImpact.tsx

@@ -38,7 +38,7 @@ export function ScaleOfImpact() {
       {/* Foreground Content */}
       <div className="relative z-10 container max-w-7xl mx-auto px-4 flex flex-col items-center text-center">
         
-        <h2 className="text-2xl md:text-5xl font-heading font-extrabold text-white mb-6 tracking-tight">
+        <h2 className="text-3xl sm:text-4xl md:text-5xl font-heading font-extrabold text-white mb-6 tracking-tight leading-tight">
           {locale === 'en' ? (
             <>An infrastructure <br className="md:hidden"/> that connects the country.</>
           ) : (

components/blocks/ServiceDetailGrid.tsx

@@ -38,8 +38,8 @@ const containerVariants: Variants = {
 };
 
 const itemVariants: Variants = {
-  hidden: { opacity: 0, y: 40 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] } },
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 1.0, ease: [0.16, 1, 0.3, 1] } },
 };
 
 const Icons = {
@@ -137,7 +137,7 @@ export function ServiceDetailGrid({
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, margin: "-50px" }}
-            transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
+            transition={{ duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
             className="max-w-4xl mx-auto mb-20 grid md:grid-cols-2 gap-0 bg-white rounded-2xl overflow-hidden shadow-lg border border-neutral-200 text-left"
           >
             {problemStatement && (
@@ -193,7 +193,7 @@ export function ServiceDetailGrid({
                 {/* On a white card, a very subtle primary/grey shine works best */}
                 <HoverShineOverlay shineColor="via-primary/5" />
 
-                <div className="relative z-10 flex flex-col md:flex-row justify-between items-start mb-12 gap-6">
+                <div className="relative z-10 flex flex-row justify-between items-start mb-12 gap-6">
                   <div className="pt-2 flex-1 min-w-0 pr-4">
                     <h4 className="text-lg md:text-2xl font-extrabold text-neutral-dark uppercase tracking-wider text-balance break-words" lang="de">{panel.title}</h4>
                     <div className="h-1 w-12 bg-primary mt-6 transition-all duration-700 group-hover:w-24 rounded-full"></div>

components/blocks/SubCompanyTiles.tsx

@@ -68,7 +68,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
   })) || defaultCompanies;
   
   return (
-    <section id="unternehmen" className="py-16 md:py-24 lg:py-32 bg-neutral-dark border-b border-neutral-800 relative overflow-hidden">
+    <section id="unternehmen" className="pt-12 pb-16 md:py-24 lg:py-32 bg-neutral-dark border-b border-neutral-800 relative overflow-hidden">
       <div className="container relative z-10 px-4">
         
         {(badge || title) && (
@@ -228,7 +228,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
                 </>
             );
 
-            const sharedClass = `group relative overflow-hidden aspect-[4/3] flex flex-col justify-center items-center shadow-xl transition-all duration-500 bg-neutral-dark block w-full h-full sm:rounded-xl select-none ${
+            const sharedClass = `group relative overflow-hidden aspect-[4/3] flex flex-col justify-center items-center shadow-xl transition-all duration-500 bg-neutral-dark block w-full h-full rounded-2xl select-none ${
               isCurrent 
                 ? 'border border-white/5 hover:shadow-2xl hover:-translate-y-1 hover:border-white/10 cursor-pointer' 
                 : 'border border-white/5 hover:shadow-2xl hover:-translate-y-1 hover:border-white/10 cursor-pointer'

components/blocks/SupportCTA.tsx

@@ -43,7 +43,7 @@ export const SupportCTA: React.FC<SupportCTAProps> = (props) => {
       variants={containerVariants}
       initial="hidden"
       whileInView="visible"
-      viewport={{ once: true, margin: "-100px" }}
+      viewport={{ once: true, margin: "-50px" }}
       className="mt-12 md:mt-24 p-6 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" />

components/blocks/TeamGrid.tsx

@@ -42,10 +42,10 @@ export function TeamGrid({ members }: TeamGridProps) {
           {members.map((member, i) => (
             <motion.div
               key={member.id}
-              initial={{ opacity: 0, y: 30 }}
+              initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, margin: "-50px" }}
-              transition={{ delay: i * 0.1, duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+              transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
               className="group flex flex-col bg-white rounded-[2rem] border border-neutral-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(238,114,3,0.1)] transition-all duration-500 hover:-translate-y-2 overflow-hidden"
             >
               {/* Card Banner */}

components/layout/Footer.tsx

@@ -19,7 +19,7 @@ export function Footer({ companyInfo }: FooterProps) {
   const locale = useLocale();
 
   return (
-    <footer className="bg-[#050B14] text-neutral-light pt-40 pb-10 md:pt-40 md:pb-16 relative overflow-hidden border-t border-white/5">
+    <footer className="bg-[#050B14] text-neutral-light pt-24 pb-28 md:pt-32 md:pb-16 relative overflow-hidden border-t border-white/5">
       {/* Subtle background tech grid */}
       <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
 
@@ -108,8 +108,13 @@ export function Footer({ companyInfo }: FooterProps) {
                 {locale === 'de' ? 'Navigation' : 'Navigation'}
                 <span className="block w-8 h-1 bg-primary mt-3 rounded-full" />
               </h4>
-              <ul className="space-y-2 mb-8">
+              <ul className="grid grid-cols-2 gap-x-8 gap-y-3 mb-8">
                 {[
+                  { label: locale === 'de' ? 'Unternehmen' : 'Company', href: `/${locale}/${locale === 'de' ? 'ueber-uns' : 'about-us'}` },
+                  { label: locale === 'de' ? 'Standorte' : 'Locations', href: `/${locale}/standorte` },
+                  { label: locale === 'de' ? 'Unser Team' : 'Our Team', href: `/${locale}/team` },
+                  { label: locale === 'de' ? 'Karriere' : 'Career', href: `/${locale}/${locale === 'de' ? 'karriere' : 'career'}` },
+                  { label: locale === 'de' ? 'Zertifikate' : 'Certificates', href: `/${locale}/zertifikate` },
                   { label: locale === 'de' ? 'Kompetenzen' : 'Competencies', href: `/${locale}/${locale === 'de' ? 'kompetenzen' : 'competencies'}` },
                   { label: locale === 'de' ? 'Referenzen' : 'References', href: `/${locale}/referenzen` },
                   { label: locale === 'de' ? 'Messen & Events' : 'Fairs & Events', href: `/${locale}/${locale === 'de' ? 'messen' : 'trade-fairs'}` },
@@ -123,28 +128,6 @@ export function Footer({ companyInfo }: FooterProps) {
                   </li>
                 ))}
               </ul>
-
-              <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-4 text-white">
-                <TransitionLink href={`/${locale}/${locale === 'de' ? 'ueber-uns' : 'about-us'}`} className="hover:text-primary transition-colors cursor-pointer inline-block">
-                  {locale === 'de' ? 'Über uns' : 'About us'}
-                </TransitionLink>
-                <span className="block w-8 h-1 bg-primary mt-3 rounded-full" />
-              </h4>
-              <ul className="space-y-2 border-l border-white/10 pl-4 ml-1">
-                {[
-                  { label: locale === 'de' ? 'Standorte' : 'Locations', href: `/${locale}/standorte` },
-                  { label: locale === 'de' ? 'Unser Team' : 'Our Team', href: `/${locale}/team` },
-                  { label: locale === 'de' ? 'Zertifikate' : 'Certificates', href: `/${locale}/zertifikate` },
-                  { label: locale === 'de' ? 'Karriere' : 'Career', href: `/${locale}/${locale === 'de' ? 'karriere' : 'career'}` },
-                ].map((link) => (
-                  <li key={link.href}>
-                    <TransitionLink href={link.href} className="group/link flex items-center text-neutral-400 hover:text-white transition-colors py-1 cursor-pointer">
-                      <span className="w-0 h-px bg-primary mr-0 group-hover/link:w-4 group-hover/link:mr-3 transition-all duration-300" />
-                      <span className="font-medium">{link.label}</span>
-                    </TransitionLink>
-                  </li>
-                ))}
-              </ul>
             </div>
 
             {/* Mobile View (Accordions) */}
@@ -157,6 +140,11 @@ export function Footer({ companyInfo }: FooterProps) {
                 <div className="pt-2 pb-4">
                   <ul className="space-y-3">
                     {[
+                      { label: locale === 'de' ? 'Unternehmen' : 'Company', href: `/${locale}/${locale === 'de' ? 'ueber-uns' : 'about-us'}` },
+                      { label: locale === 'de' ? 'Standorte' : 'Locations', href: `/${locale}/standorte` },
+                      { label: locale === 'de' ? 'Unser Team' : 'Our Team', href: `/${locale}/team` },
+                      { label: locale === 'de' ? 'Karriere' : 'Career', href: `/${locale}/${locale === 'de' ? 'karriere' : 'career'}` },
+                      { label: locale === 'de' ? 'Zertifikate' : 'Certificates', href: `/${locale}/zertifikate` },
                       { label: locale === 'de' ? 'Kompetenzen' : 'Competencies', href: `/${locale}/${locale === 'de' ? 'kompetenzen' : 'competencies'}` },
                       { label: locale === 'de' ? 'Referenzen' : 'References', href: `/${locale}/referenzen` },
                       { label: locale === 'de' ? 'Messen & Events' : 'Fairs & Events', href: `/${locale}/${locale === 'de' ? 'messen' : 'trade-fairs'}` },
@@ -171,32 +159,6 @@ export function Footer({ companyInfo }: FooterProps) {
                   </ul>
                 </div>
               </details>
-              
-              <div className="h-px bg-white/10 w-full"></div>
-
-              <details className="group/acc">
-                <summary className="font-heading font-bold uppercase tracking-widest text-sm text-white list-none cursor-pointer flex justify-between items-center py-2 outline-none select-none">
-                  {locale === 'de' ? 'Über uns' : 'About us'}
-                  <svg className="w-4 h-4 text-white/50 transition-transform group-open/acc:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 9l-7 7-7-7"/></svg>
-                </summary>
-                <div className="pt-2 pb-4">
-                  <ul className="space-y-3">
-                    {[
-                      { label: locale === 'de' ? 'Unternehmen' : 'Company', href: `/${locale}/${locale === 'de' ? 'ueber-uns' : 'about-us'}` },
-                      { label: locale === 'de' ? 'Standorte' : 'Locations', href: `/${locale}/standorte` },
-                      { label: locale === 'de' ? 'Unser Team' : 'Our Team', href: `/${locale}/team` },
-                      { label: locale === 'de' ? 'Zertifikate' : 'Certificates', href: `/${locale}/zertifikate` },
-                      { label: locale === 'de' ? 'Karriere' : 'Career', href: `/${locale}/${locale === 'de' ? 'karriere' : 'career'}` },
-                    ].map((link) => (
-                      <li key={link.href}>
-                        <TransitionLink href={link.href} className="flex items-center text-neutral-400 hover:text-white transition-colors py-1">
-                          <span className="font-medium">{link.label}</span>
-                        </TransitionLink>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </details>
             </div>
           </div>
 

components/layout/Header.tsx

@@ -101,6 +101,7 @@ export function Header({ navLinks }: HeaderProps) {
               fill
               className="object-contain object-left group-hover:scale-105 transition-transform duration-500 origin-left"
               priority
+              fetchPriority="high"
               sizes="192px"
             />
             {/* Masked sweep overlay on hover */}
@@ -138,8 +139,54 @@ export function Header({ navLinks }: HeaderProps) {
             <div className="flex items-center gap-2 md:gap-4 lg:gap-6">
               <div className={`hidden md:block h-5 w-px transition-colors duration-300 ${isSolidMode ? 'bg-neutral-200' : 'bg-white/20'}`} />
               
-              {/* Language Switcher visible on all devices */}
-              <div className="z-50 relative flex items-center">
+              {/* Quick Actions (Mobile Only) */}
+              <div className="md:hidden flex items-center gap-2">
+                <a 
+                  href="tel:+492572946760"
+                  className={`relative flex items-center justify-center w-9 h-9 rounded-full transition-all duration-300 ${
+                    isSolidMode 
+                      ? 'bg-primary text-white shadow-md shadow-primary/20 hover:-translate-y-0.5' 
+                      : 'bg-white text-primary shadow-md hover:-translate-y-0.5'
+                  }`}
+                  aria-label="Anrufen"
+                >
+                  <svg className="w-[16px] h-[16px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                  </svg>
+                </a>
+                <a 
+                  href="mailto:info@e-tib.com"
+                  className={`relative flex items-center justify-center w-9 h-9 rounded-full transition-all duration-300 ${
+                    isSolidMode 
+                      ? 'bg-neutral-100 text-neutral-600 hover:text-primary hover:bg-neutral-200' 
+                      : 'bg-white/10 text-white backdrop-blur-md border border-white/20 hover:bg-white/20'
+                  }`}
+                  aria-label="E-Mail"
+                >
+                  <svg className="w-[16px] h-[16px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                  </svg>
+                </a>
+                <a 
+                  href="https://maps.google.com/?q=E-TIB+GmbH,+Greven"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={`relative flex items-center justify-center w-9 h-9 rounded-full transition-all duration-300 ${
+                    isSolidMode 
+                      ? 'bg-neutral-100 text-neutral-600 hover:text-primary hover:bg-neutral-200' 
+                      : 'bg-white/10 text-white backdrop-blur-md border border-white/20 hover:bg-white/20'
+                  }`}
+                  aria-label="Route"
+                >
+                  <svg className="w-[16px] h-[16px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                </a>
+              </div>
+
+              {/* Language Switcher visible on desktop only */}
+              <div className="z-50 relative hidden md:flex items-center">
                 <LanguageSwitcher isSolidMode={isSolidMode} />
               </div>
               
@@ -157,81 +204,10 @@ export function Header({ navLinks }: HeaderProps) {
                 <span className="absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-[-20deg] group-hover/cta:left-[100%] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none" />
               </TransitionLink>
 
-              {/* Hamburger Menu (Mobile Only) */}
-              <button 
-                className={`md:hidden ml-2 p-2 transition-colors focus:outline-none ${isSolidMode && !isMobileMenuOpen ? 'text-text-primary hover:text-primary' : 'text-white hover:text-primary z-[60] relative'}`}
-                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-                aria-label="Toggle Menu"
-              >
-                <div className="w-6 flex flex-col gap-[6px] relative items-center justify-center">
-                  <span className={`w-full h-[2px] rounded-full bg-current transform transition-all duration-300 ease-in-out origin-center ${isMobileMenuOpen ? 'rotate-45 translate-y-[8px]' : ''}`} />
-                  <span className={`w-full h-[2px] rounded-full bg-current transition-all duration-300 ease-in-out ${isMobileMenuOpen ? 'opacity-0 translate-x-3' : 'opacity-100'}`} />
-                  <span className={`w-full h-[2px] rounded-full bg-current transform transition-all duration-300 ease-in-out origin-center ${isMobileMenuOpen ? '-rotate-45 -translate-y-[8px]' : ''}`} />
-                </div>
-              </button>
             </div>
           </div>
         </div>
       </header>
-
-      {/* Mobile Menu Overlay */}
-      <AnimatePresence>
-        {isMobileMenuOpen && (
-          <motion.div
-            initial={{ opacity: 0, y: -20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            transition={{ duration: 0.3 }}
-            className="fixed inset-0 z-[40] bg-[#050B14]/95 backdrop-blur-xl md:hidden pt-24 pb-24 px-6 overflow-y-auto"
-          >
-            <nav className="flex flex-col gap-6 mt-8">
-              {navLinks && navLinks.length > 0 && navLinks.map((link) => {
-                const mappedUrl = link.url.startsWith('/') && !link.url.match(/^\/(en|de)/) 
-                  ? `/${currentLocale}${link.url}` 
-                  : link.url;
-                const isActive = pathname === mappedUrl || (mappedUrl !== `/${currentLocale}` && pathname?.startsWith(`${mappedUrl}/`));
-                
-                return (
-                  <div key={link.url} className="flex flex-col">
-                    <TransitionLink 
-                      href={mappedUrl}
-                      onClick={() => setIsMobileMenuOpen(false)}
-                      className={`text-2xl font-bold uppercase tracking-widest transition-colors ${isActive ? 'text-primary' : 'text-white'}`}
-                    >
-                      {link.label}
-                    </TransitionLink>
-                    
-                    {link.children && (
-                      <div className="flex flex-col gap-3 mt-3 pl-4 border-l-2 border-white/10">
-                        {link.children.map((child, idx) => {
-                          if (child.isGroupLabel) {
-                            return <div key={idx} className="text-sm font-bold text-neutral-500 uppercase tracking-widest mt-2">{child.label}</div>;
-                          }
-                          const childUrl = child.url.startsWith('/') && !child.url.match(/^\/(en|de)/) 
-                            ? `/${currentLocale}${child.url}` 
-                            : child.url;
-                          const isChildActive = pathname === childUrl;
-                          
-                          return (
-                            <TransitionLink
-                              key={child.url}
-                              href={childUrl}
-                              onClick={() => setIsMobileMenuOpen(false)}
-                              className={`text-lg font-medium transition-colors ${isChildActive ? 'text-primary' : 'text-white/70'}`}
-                            >
-                              {child.label}
-                            </TransitionLink>
-                          );
-                        })}
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-            </nav>
-          </motion.div>
-        )}
-      </AnimatePresence>
     </>
   );
 }

components/layout/MobileBottomNav.tsx

@@ -3,12 +3,13 @@
 import * as React from 'react';
 import { usePathname } from 'next/navigation';
 import { TransitionLink } from '@/components/ui/TransitionLink';
-import { Home, Briefcase, Users, Mail } from 'lucide-react';
-import { motion } from 'framer-motion';
+import { Home, Layers, Star, Mail, Menu } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
 
 export interface NavLink {
   label: string;
   url: string;
+  children?: NavLink[];
 }
 
 interface MobileBottomNavProps {
@@ -18,84 +19,213 @@ interface MobileBottomNavProps {
 
 export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProps) {
   const pathname = usePathname() || '/';
+  const [isFlyoutOpen, setIsFlyoutOpen] = React.useState(false);
+
+  // Scroll lock when flyout is open
+  React.useEffect(() => {
+    if (isFlyoutOpen) {
+      document.body.style.overflow = 'hidden';
+      document.documentElement.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+      document.documentElement.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+      document.documentElement.style.overflow = '';
+    };
+  }, [isFlyoutOpen]);
 
-  // Construct our bottom nav items based on the passed links
   const items = React.useMemo(() => {
     const homeUrl = `/${currentLocale}`;
-    
-    // Find the specific links from the provided navLinks (which might be translated)
-    // We do a simple match based on index or keywords if needed, but since we know the order:
-    // 0: Kompetenzen, 1: Über uns, 2: Karriere, 3: Messen
     const competenciesUrl = navLinks[0]?.url || `/${currentLocale}/kompetenzen`;
-    const aboutUrl = navLinks[1]?.url || `/${currentLocale}/ueber-uns`;
+    const referencesUrl = navLinks[2]?.url || `/${currentLocale}/referenzen`;
     const contactUrl = `/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`;
 
     return [
       {
+        id: 'home',
         label: currentLocale === 'de' ? 'Start' : 'Home',
         url: homeUrl,
-        icon: <Home className="w-6 h-6 mb-1" strokeWidth={2} />,
+        icon: <Home className="w-[22px] h-[22px] md:w-6 md:h-6" strokeWidth={2.2} />,
         exactMatch: true
       },
       {
+        id: 'kompetenzen',
         label: navLinks[0]?.label || (currentLocale === 'de' ? 'Kompetenzen' : 'Competencies'),
         url: competenciesUrl,
-        icon: <Briefcase className="w-6 h-6 mb-1" strokeWidth={2} />
+        icon: <Layers className="w-[22px] h-[22px] md:w-6 md:h-6" strokeWidth={2.2} />
       },
       {
-        label: navLinks[1]?.label || (currentLocale === 'de' ? 'Über uns' : 'About Us'),
-        url: aboutUrl,
-        icon: <Users className="w-6 h-6 mb-1" strokeWidth={2} />
+        id: 'referenzen',
+        label: navLinks[2]?.label || (currentLocale === 'de' ? 'Referenzen' : 'References'),
+        url: referencesUrl,
+        icon: <Star className="w-[22px] h-[22px] md:w-6 md:h-6" strokeWidth={2.2} />
       },
       {
+        id: 'kontakt',
         label: currentLocale === 'de' ? 'Kontakt' : 'Contact',
         url: contactUrl,
-        icon: <Mail className="w-6 h-6 mb-1" strokeWidth={2} />
+        icon: <Mail className="w-[22px] h-[22px] md:w-6 md:h-6" strokeWidth={2.2} />
+      },
+      {
+        id: 'menu',
+        label: currentLocale === 'de' ? 'Mehr' : 'Menu',
+        url: '#',
+        icon: <Menu className="w-[24px] h-[24px] md:w-6 md:h-6" strokeWidth={2.5} />,
+        isFlyoutTrigger: true
       }
     ];
   }, [currentLocale, navLinks]);
 
-  return (
-    <div className="md:hidden fixed bottom-0 left-0 right-0 z-50 px-2 pb-6 pt-2 bg-gradient-to-t from-white via-white to-white/90 backdrop-blur-xl border-t border-neutral-200/50 shadow-[0_-8px_32px_rgba(0,0,0,0.05)] safe-area-bottom">
-      <nav className="flex justify-around items-center max-w-md mx-auto">
-        {items.map((item) => {
-          // Determine if active
-          const mappedUrl = item.url.startsWith('/') && !item.url.match(/^\/(en|de)/) 
-            ? `/${currentLocale}${item.url}` 
-            : item.url;
-            
-          const isActive = item.exactMatch 
-            ? pathname === mappedUrl 
-            : (pathname === mappedUrl || (mappedUrl !== `/${currentLocale}` && pathname?.startsWith(`${mappedUrl}/`)));
+  const flyoutLinks = React.useMemo(() => {
+    const aboutNode = navLinks[1];
+    const karriereNode = navLinks[3];
+    const messenNode = navLinks[4];
+    
+    let links: {label: string, url: string}[] = [];
+    if (aboutNode?.children) {
+      links.push(...aboutNode.children.map(c => ({ label: c.label, url: c.url })));
+    }
+    if (karriereNode) links.push({ label: karriereNode.label, url: karriereNode.url });
+    if (messenNode) links.push({ label: messenNode.label, url: messenNode.url });
+    return links;
+  }, [navLinks]);
 
-          return (
-            <TransitionLink 
-              key={item.label}
-              href={mappedUrl}
-              className={`relative flex flex-col items-center justify-center w-full min-h-[44px] py-1 transition-colors duration-300 select-none ${
-                isActive ? 'text-primary' : 'text-neutral-500 hover:text-neutral-900'
-              }`}
-            >
-              <div className="relative flex flex-col items-center justify-center">
-                {/* Active Icon Background */}
+  return (
+    <>
+      <div className="md:hidden fixed bottom-0 left-0 right-0 z-[9999] px-2 pb-[calc(env(safe-area-inset-bottom)+12px)] pt-4 pointer-events-none flex justify-center">
+        <nav className="flex justify-between items-center bg-white/75 backdrop-blur-2xl border border-white/60 shadow-[0_8px_32px_rgba(0,0,0,0.12)] rounded-3xl p-1.5 pointer-events-auto w-full max-w-[480px]">
+          {items.map((item) => {
+            const mappedUrl = item.url.startsWith('/') && !item.url.match(/^\/(en|de)/) 
+              ? `/${currentLocale}${item.url}` 
+              : item.url;
+              
+            let isActive = false;
+            if (item.isFlyoutTrigger) {
+              isActive = isFlyoutOpen;
+            } else {
+              isActive = item.exactMatch 
+                ? pathname === mappedUrl 
+                : (pathname === mappedUrl || (mappedUrl !== `/${currentLocale}` && pathname?.startsWith(`${mappedUrl}/`)));
+            }
+
+            const innerContent = (
+              <>
                 {isActive && (
                   <motion.div
                     layoutId="mobile-nav-active-bg"
-                    className="absolute inset-0 bg-primary/10 rounded-full scale-150"
-                    transition={{ type: 'spring', stiffness: 500, damping: 30 }}
+                    className="absolute inset-0 bg-primary/10 rounded-2xl shadow-sm border border-primary/10"
+                    transition={{ type: 'spring', stiffness: 400, damping: 25 }}
                   />
                 )}
                 
-                {/* Icon wrapper to ensure it sits above the background */}
-                <div className="relative z-10 transition-transform duration-300 active:scale-90">
-                  {item.icon}
+                <div className="relative flex flex-col items-center justify-center z-10 w-full h-full">
+                  <motion.div 
+                    whileTap={{ scale: 0.8 }}
+                    animate={{ y: isActive ? -2 : 0 }}
+                    transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+                  >
+                    {item.icon}
+                  </motion.div>
+                  <motion.span 
+                    animate={{ opacity: isActive ? 1 : 0.7, y: isActive ? 0 : 2 }}
+                    className="text-[9px] font-bold mt-1 tracking-wide"
+                  >
+                    {item.label}
+                  </motion.span>
                 </div>
+              </>
+            );
+
+            if (item.isFlyoutTrigger) {
+              return (
+                <button 
+                  key={item.label}
+                  onClick={() => setIsFlyoutOpen(!isFlyoutOpen)}
+                  className={`relative flex flex-col items-center justify-center flex-1 h-[62px] transition-colors duration-300 select-none w-full focus:outline-none ${
+                    isActive ? 'text-primary' : 'text-neutral-500 hover:text-neutral-900'
+                  }`}
+                  style={{ WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation' }}
+                >
+                  {innerContent}
+                </button>
+              );
+            }
+
+            return (
+              <TransitionLink 
+                key={item.label}
+                href={mappedUrl}
+                onClick={() => setIsFlyoutOpen(false)}
+                className={`relative flex flex-col items-center justify-center flex-1 h-[62px] transition-colors duration-300 select-none ${
+                  isActive ? 'text-primary' : 'text-neutral-500 hover:text-neutral-900'
+                }`}
+                style={{ WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation' }}
+              >
+                {innerContent}
+              </TransitionLink>
+            );
+          })}
+        </nav>
+      </div>
+
+      <AnimatePresence>
+        {isFlyoutOpen && (
+          <>
+            <motion.div 
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.3 }}
+              className="fixed inset-0 bg-black/40 backdrop-blur-sm z-[9997] md:hidden"
+              onClick={() => setIsFlyoutOpen(false)}
+            />
+            <motion.div
+              initial={{ y: '100%', opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ y: '100%', opacity: 0 }}
+              transition={{ type: 'spring', stiffness: 350, damping: 30 }}
+              drag="y"
+              dragConstraints={{ top: 0, bottom: 0 }}
+              dragElastic={0.2}
+              onDragEnd={(e, info) => {
+                if (info.offset.y > 50 || info.velocity.y > 100) {
+                  setIsFlyoutOpen(false);
+                }
+              }}
+              className="fixed bottom-0 left-0 right-0 z-[9998] bg-white rounded-t-[32px] pt-4 pb-[calc(env(safe-area-inset-bottom)+7rem)] px-6 md:hidden shadow-[0_-20px_40px_rgba(0,0,0,0.1)] border-t border-neutral-100"
+            >
+              <div className="w-16 h-1.5 bg-neutral-200 rounded-full mx-auto mb-6 cursor-grab active:cursor-grabbing" />
+              <h3 className="text-xs font-bold uppercase tracking-widest text-neutral-400 mb-4 px-2">{currentLocale === 'de' ? 'Über uns & Mehr' : 'About us & More'}</h3>
+              <div className="flex flex-col gap-1">
+                {flyoutLinks.map((link, i) => {
+                  const childUrl = link.url.startsWith('/') && !link.url.match(/^\/(en|de)/) 
+                    ? `/${currentLocale}${link.url}` 
+                    : link.url;
+                  const isChildActive = pathname === childUrl;
+                  
+                  return (
+                    <TransitionLink
+                      key={i}
+                      href={childUrl}
+                      onClick={() => setIsFlyoutOpen(false)}
+                      className={`px-4 py-4 rounded-2xl text-[15px] font-semibold transition-all flex items-center justify-between ${
+                        isChildActive ? 'bg-primary/10 text-primary' : 'text-neutral-700 hover:bg-neutral-50 active:bg-neutral-100'
+                      }`}
+                    >
+                      {link.label}
+                      <svg className={`w-4 h-4 ${isChildActive ? 'text-primary' : 'text-neutral-400'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
+                      </svg>
+                    </TransitionLink>
+                  );
+                })}
               </div>
-              <span className="text-[10px] font-semibold mt-0.5 tracking-wide z-10">{item.label}</span>
-            </TransitionLink>
-          );
-        })}
-      </nav>
-    </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </>
   );
 }

components/providers/InitialLoader.tsx

@@ -4,51 +4,29 @@ import React, { useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 
-const PRELOAD_VIDEOS = [
-  '/assets/videos/web/hero-bohrung.mp4'
-];
 
 export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?: boolean }) {
   const [isLoading, setIsLoading] = useState(shouldShowLoader);
 
-  useEffect(() => {
-    if (!shouldShowLoader) return;
-    
-    // Fallback Timeout (4 Sekunden), falls Videos hängen
-    const timeout = setTimeout(() => {
-      finishLoading();
-    }, 4000);
-
-    let videosLoaded = 0;
-    
-    const checkAllLoaded = () => {
-      videosLoaded++;
-      if (videosLoaded === PRELOAD_VIDEOS.length) {
-        clearTimeout(timeout);
-        // Kleine Verzögerung für die smootheness
-        setTimeout(finishLoading, 800);
-      }
-    };
-
-    PRELOAD_VIDEOS.forEach((src) => {
-      const video = document.createElement('video');
-      video.preload = 'auto';
-      video.oncanplaythrough = checkAllLoaded;
-      video.onerror = checkAllLoaded; // bei Fehler trotzdem weitermachen
-      video.src = src;
-      video.load();
-    });
-
-    // Cleanup
-    return () => clearTimeout(timeout);
-  }, [shouldShowLoader]);
-
   const finishLoading = () => {
     // Set a session cookie so the server knows not to render the loader again
     document.cookie = "etib_initial_loader_v5=true; path=/; samesite=lax";
     setIsLoading(false);
   };
 
+  useEffect(() => {
+    if (!shouldShowLoader) return;
+    
+    // Just show the animation for a short time to allow UI to mount,
+    // we don't preload 10MB videos anymore to save pagespeed!
+    const timeout = setTimeout(() => {
+      finishLoading();
+    }, 1200);
+
+    // Cleanup
+    return () => clearTimeout(timeout);
+  }, [shouldShowLoader]);
+
   // Wenn wir serverseitig rendern und es nicht zeigen sollen, return null
   if (!shouldShowLoader) return null;
 

components/ui/Tooltip.tsx

@@ -1,4 +1,6 @@
-import React, { ReactNode } from 'react';
+'use client';
+
+import React, { ReactNode, useState, useEffect, useRef } from 'react';
 
 interface TooltipProps {
   children: ReactNode;
@@ -6,10 +8,33 @@ interface TooltipProps {
 }
 
 export function Tooltip({ children, content }: TooltipProps) {
+  const [isActive, setIsActive] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsActive(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, []);
+
   return (
-    <div className="group relative flex items-center justify-center">
+    <div 
+      ref={containerRef}
+      className="group relative flex items-center justify-center cursor-help"
+      onClick={() => setIsActive(!isActive)}
+      onMouseEnter={() => setIsActive(true)}
+      onMouseLeave={() => setIsActive(false)}
+    >
       {children}
-      <div className="absolute bottom-full mb-3 invisible opacity-0 translate-y-2 group-hover:visible group-hover:opacity-100 group-hover:translate-y-0 w-max max-w-[250px] px-4 py-2.5 text-[11px] md:text-xs text-white bg-neutral-900/95 backdrop-blur-md rounded-xl shadow-2xl border border-white/10 transition-all duration-300 pointer-events-none z-50 text-center leading-relaxed font-normal normal-case tracking-normal">
+      <div className={`absolute bottom-full mb-3 w-max max-w-[250px] px-4 py-2.5 text-[11px] md:text-xs text-white bg-neutral-900/95 backdrop-blur-md rounded-xl shadow-2xl border border-white/10 transition-all duration-300 z-50 text-center leading-relaxed font-normal normal-case tracking-normal ${isActive ? 'visible opacity-100 translate-y-0 pointer-events-auto' : 'invisible opacity-0 translate-y-2 pointer-events-none'}`}>
         {content}
         {/* Triangle Arrow */}
         <div className="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-neutral-900/95" />

content/de/home.mdx

@@ -79,8 +79,8 @@ description: "Die E-TIB GmbH ist Ihr zuverlässiger Partner für komplexe Kabelt
             <div className="text-sm font-bold text-text-secondary uppercase tracking-wider">Mitarbeitende</div>
           </div>
           <div>
-            <div className="text-4xl font-black text-primary mb-1 tracking-tighter">100+</div>
-            <div className="text-sm font-bold text-text-secondary uppercase tracking-wider">Kunden</div>
+            <div className="text-4xl font-black text-primary mb-1 tracking-tighter">200+</div>
+            <div className="text-sm font-bold text-text-secondary uppercase tracking-wider">Projekte</div>
           </div>
         </div>
       </div>
@@ -88,7 +88,7 @@ description: "Die E-TIB GmbH ist Ihr zuverlässiger Partner für komplexe Kabelt
       {/* Right Column: Imagery & Mission */}
       <div className="lg:col-span-7 relative">
         <div className="aspect-[4/3] md:aspect-[16/9] lg:aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl relative border border-neutral-200/50">
-          <img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB im Einsatz" className="w-full h-full object-cover" />
+          <img src="/_next/image?url=%2Fassets%2Fphotos%2FEtib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg&w=1920&q=75" alt="E-TIB im Einsatz" className="w-full h-full object-cover" loading="lazy" decoding="async" />
           <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/40 to-transparent"></div>
           
           <div className="absolute bottom-0 left-0 w-full p-8 md:p-12">

content/de/referenzen/dettmannsdorf.mdx

@@ -4,7 +4,7 @@ client: "Energiekontor AG"
 date: "2026-06-01"
 dateString: "01/2025 bis 06/2026"
 location: "18334 Dettmannsdorf"
-featuredImage: "/assets/photos/etib_ingenieure_tiefbau_solar_pv_planung_vermessung_gis-256.jpg"
+featuredImage: "/assets/photos/DJI_0301.JPG"
 ---
 
 - 12.300 m Kabelgraben ausheben und verfüllen

content/de/referenzen/jevenstedt.mdx

@@ -4,12 +4,12 @@ client: "wpd GmbH"
 date: "2026-03-01"
 dateString: "seit 03/2026"
 location: "24808 Jevenstedt"
-featuredImage: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-15.jpg"
+featuredImage: "/assets/photos/DJI_0037.JPG"
 ---
 
 - 500 m Kabelgraben ausheben und verfüllen
 - 4.500 m Einpflügen von 3 x PE-Schutzrohr d 160
-- 3.200 m Horizontalspülbohrung d 160
+- 12.000 m Horizontalspülbohrung d 160
 - 8.500 m Verlegung HS-Kabel 1.000 mm² 64/110 kV
 - 11 Satz Verbindungsmuffen 1.000 mm² 64/110 kV
 - 2 Satz Freiluftendverschlüsse 1.000 mm² 64/110 kV

content/de/referenzen/ketzin.mdx

@@ -4,7 +4,7 @@ client: "E.DIS Netz GmbH"
 date: "2025-06-01"
 dateString: "01/2025 bis 06/2025"
 location: "14669 Ketzin"
-featuredImage: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-14.jpg"
+featuredImage: "/assets/photos/DSC02643.JPG"
 ---
 
 - 1.600 m Kabelgraben ausheben und verfüllen

content/de/referenzen/ostbevern.mdx

@@ -4,7 +4,7 @@ client: "GP Joule Anlagenbau GmbH & Co. KG"
 date: "2026-03-01"
 dateString: "02/2025 bis 03/2026"
 location: "48346 Ostbevern"
-featuredImage: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg"
+featuredImage: "/assets/photos/DJI_0048.JPG"
 ---
 
 - 4.100 m Kabelgraben ausheben und verfüllen

content/de/referenzen/petershagen.mdx

@@ -4,7 +4,7 @@ client: "NaturStromAnlagen GmbH"
 date: "2025-02-01"
 dateString: "04/2024 bis 02/2025"
 location: "15326 Petershagen"
-featuredImage: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-12.jpg"
+featuredImage: "/assets/photos/Screenshot_2025-09-30_085736.png"
 ---
 
 - 12.000 m Kabelgraben ausheben und verfüllen

content/de/referenzen/proetzel.mdx

@@ -4,7 +4,7 @@ client: "Trianel GmbH"
 date: "2025-08-01"
 dateString: "02/2025 bis 08/2025"
 location: "15345 Prötzel"
-featuredImage: "/assets/photos/etib_ingenieure_tiefbau_solar_pv_planung_vermessung_gis-294.jpg"
+featuredImage: "/assets/photos/DJI_0243.JPG"
 ---
 
 - 2.600 m Kabelgraben ausheben und verfüllen

content/de/team.mdx

@@ -42,7 +42,7 @@ layout: "fullBleed"
     {
       id: "martin-polan",
       name: "Martin Polan",
-      position: "Bauleiter",
+      position: "Bauleitung",
       email: "m.polan@e-tib.com",
       phone: "+49 171 3868167",
       image: "/assets/photos/team/martin.jpg"

content/en/home.mdx

@@ -79,8 +79,8 @@ description: "E-TIB GmbH is your reliable partner for complex cable routes, hori
             <div className="text-sm font-bold text-text-secondary uppercase tracking-wider">Employees</div>
           </div>
           <div>
-            <div className="text-4xl font-black text-primary mb-1 tracking-tighter">100+</div>
-            <div className="text-sm font-bold text-text-secondary uppercase tracking-wider">Clients</div>
+            <div className="text-4xl font-black text-primary mb-1 tracking-tighter">200+</div>
+            <div className="text-sm font-bold text-text-secondary uppercase tracking-wider">Projects</div>
           </div>
         </div>
       </div>
@@ -88,7 +88,7 @@ description: "E-TIB GmbH is your reliable partner for complex cable routes, hori
       {/* Right Column: Imagery & Mission */}
       <div className="lg:col-span-7 relative">
         <div className="aspect-[4/3] md:aspect-[16/9] lg:aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl relative border border-neutral-200/50">
-          <img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB in action" className="w-full h-full object-cover" />
+          <img src="/_next/image?url=%2Fassets%2Fphotos%2FEtib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg&w=1920&q=75" alt="E-TIB in action" className="w-full h-full object-cover" loading="lazy" decoding="async" />
           <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/40 to-transparent"></div>
           
           <div className="absolute bottom-0 left-0 w-full p-8 md:p-12">

content/en/referenzen/dettmannsdorf.mdx

@@ -4,7 +4,7 @@ client: "Energiekontor AG"
 date: "2026-06-01"
 dateString: "01/2025 to 06/2026"
 location: "18334 Dettmannsdorf"
-featuredImage: "/assets/photos/etib_ingenieure_tiefbau_solar_pv_planung_vermessung_gis-256.jpg"
+featuredImage: "/assets/photos/DJI_0301.JPG"
 ---
 
 - Excavation and backfilling of 12,300 m cable trench

content/en/referenzen/jevenstedt.mdx

@@ -4,12 +4,12 @@ client: "wpd GmbH"
 date: "2026-03-01"
 dateString: "since 03/2026"
 location: "24808 Jevenstedt"
-featuredImage: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-15.jpg"
+featuredImage: "/assets/photos/DJI_0037.JPG"
 ---
 
 - Excavation and backfilling of 500 m cable trench
 - 4,500 m plowing of 3 x PE protective pipe d 160
-- 3,200 m HDD directional drilling d 160
+- 12,000 m HDD directional drilling d 160
 - 8,500 m laying of HV cable 1,000 mm² 64/110 kV
 - 11 sets of connection joints 1,000 mm² 64/110 kV
 - 2 sets of outdoor terminations 1,000 mm² 64/110 kV

content/en/referenzen/ketzin.mdx

@@ -4,7 +4,7 @@ client: "E.DIS Netz GmbH"
 date: "2025-06-01"
 dateString: "01/2025 to 06/2025"
 location: "14669 Ketzin"
-featuredImage: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-14.jpg"
+featuredImage: "/assets/photos/DSC02643.JPG"
 ---
 
 - Excavation and backfilling of 1,600 m cable trench

content/en/referenzen/ostbevern.mdx

@@ -4,7 +4,7 @@ client: "GP Joule Anlagenbau GmbH & Co. KG"
 date: "2026-03-01"
 dateString: "02/2025 to 03/2026"
 location: "48346 Ostbevern"
-featuredImage: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg"
+featuredImage: "/assets/photos/DJI_0048.JPG"
 ---
 
 - Excavation and backfilling of 4,100 m cable trench

content/en/referenzen/petershagen.mdx

@@ -4,7 +4,7 @@ client: "NaturStromAnlagen GmbH"
 date: "2025-02-01"
 dateString: "04/2024 to 02/2025"
 location: "15326 Petershagen"
-featuredImage: "/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-12.jpg"
+featuredImage: "/assets/photos/Screenshot_2025-09-30_085736.png"
 ---
 
 - Excavation and backfilling of 12,000 m cable trench

content/en/referenzen/proetzel.mdx

@@ -4,7 +4,7 @@ client: "Trianel GmbH"
 date: "2025-08-01"
 dateString: "02/2025 to 08/2025"
 location: "15345 Prötzel"
-featuredImage: "/assets/photos/etib_ingenieure_tiefbau_solar_pv_planung_vermessung_gis-294.jpg"
+featuredImage: "/assets/photos/DJI_0243.JPG"
 ---
 
 - Excavation and backfilling of 2,600 m cable trench

content/en/team.mdx

@@ -42,7 +42,7 @@ layout: "fullBleed"
     {
       id: "martin-polan",
       name: "Martin Polan",
-      position: "Site Manager",
+      position: "Site Management",
       email: "m.polan@e-tib.com",
       phone: "+49 171 3868167",
       image: "/assets/photos/team/martin.jpg"

lib/map-data.ts

@@ -189,62 +189,6 @@ export const minorLocations: Location[] = [
     y: 83.33,
     description: 'fiber',
   },
-  {
-    id: 'hdd-29436-meter-29436',
-    name: 'HDD                                               29436 Meter',
-    type: 'minor_node',
-    x: 46.89,
-    y: 41.34,
-    description: 'power',
-  },
-  {
-    id: 'hdd-28680-meter-28680',
-    name: 'HDD                                              28680 Meter',
-    type: 'minor_node',
-    x: 44.84,
-    y: 43.61,
-    description: 'power',
-  },
-  {
-    id: 'hdd-44655-meter-44655',
-    name: 'HDD                                              44655 Meter',
-    type: 'minor_node',
-    x: 49.36,
-    y: 48.57,
-    description: 'power',
-  },
-  {
-    id: 'kabelverlegung-76727-meter-76727',
-    name: 'Kabelverlegung                        76727 Meter',
-    type: 'minor_node',
-    x: 45.57,
-    y: 49.95,
-    description: 'power',
-  },
-  {
-    id: 'offener-tiefbau-21288-meter-21288',
-    name: 'Offener Tiefbau                        21288 Meter',
-    type: 'minor_node',
-    x: 40.15,
-    y: 49.41,
-    description: 'power',
-  },
-  {
-    id: 'offener-tiefbau-30773-meter-30773',
-    name: 'Offener Tiefbau                        30773  Meter',
-    type: 'minor_node',
-    x: 41.74,
-    y: 43.78,
-    description: 'power',
-  },
-  {
-    id: 'offener-tiefbau-34815-meter-34815',
-    name: 'Offener Tiefbau                        34815  Meter',
-    type: 'minor_node',
-    x: 43.91,
-    y: 42.14,
-    description: 'power',
-  },
   {
     id: 'pv-anlage-01909-grosshartau-01909',
     name: 'PV-Anlage, 01909 Großhartau',

lib/og-helper.tsx

@@ -11,10 +11,21 @@ export async function getOgFonts() {
 
   try {
     console.log(`[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`);
-    const boldFont = readFileSync(boldFontPath);
-    const regularFont = readFileSync(regularFontPath);
+    const boldFontBuffer = readFileSync(boldFontPath);
+    const regularFontBuffer = readFileSync(regularFontPath);
+
+    // Satori (Vercel OG) strictly requires an ArrayBuffer, not a Node Buffer view.
+    const boldFont = boldFontBuffer.buffer.slice(
+      boldFontBuffer.byteOffset,
+      boldFontBuffer.byteOffset + boldFontBuffer.byteLength,
+    );
+    const regularFont = regularFontBuffer.buffer.slice(
+      regularFontBuffer.byteOffset,
+      regularFontBuffer.byteOffset + regularFontBuffer.byteLength,
+    );
+
     console.log(
-      `[OG] Fonts loaded successfully (${boldFont.length} and ${regularFont.length} bytes)`,
+      `[OG] Fonts loaded successfully (${boldFont.byteLength} and ${regularFont.byteLength} bytes)`,
     );
 
     return [

lib/standorte-data.ts

@@ -35,7 +35,7 @@ export const standorteData: StandortData[] = [
   {
     id: 'guben',
     name: 'E-TIB GmbH',
-    shortName: 'Guben (Hauptsitz)',
+    shortName: 'Standort Brandenburg (Hauptsitz)',
     type: 'hq',
     description: {
       de: 'Unser Hauptsitz in Guben bildet das strategische und operative Zentrum der E-TIB Gruppe. Von hier aus steuern wir bundesweit Großprojekte im Kabelleitungsnetzbau und koordinieren unseren hochmodernen Maschinenpark.',
@@ -67,7 +67,7 @@ export const standorteData: StandortData[] = [
         'Central project management'
       ]
     },
-    image: '/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg',
+    image: '/assets/photos/DSC02114.jpg',
     gallery: [
       '/assets/photos/DSC02114.jpg',
       '/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-45.jpg'
@@ -117,7 +117,7 @@ export const standorteData: StandortData[] = [
   {
     id: 'buelstedt',
     name: 'E-TIB Ingenieurgesellschaft mbH',
-    shortName: 'Bülstedt (Ingenieurgesellschaft)',
+    shortName: 'Standort Niedersachsen',
     type: 'branch',
     description: {
       de: 'Unsere Ingenieurgesellschaft in Bülstedt ist spezialisiert auf die hochpräzise Planung, Vermessung und Projektierung von Energie- und Telekommunikationsnetzen. Hier verschmelzen technische Expertise und modernes Datenmanagement.',

make_contact_sheet.py

@@ -0,0 +1,31 @@
+import os
+import math
+from PIL import Image, ImageDraw
+
+folder = 'public/assets/photos'
+files = [f for f in os.listdir(folder) if f.lower().endswith(('.jpg', '.jpeg', '.png'))]
+files.sort()
+
+thumb_w, thumb_h = 300, 300
+cols = 8
+rows = math.ceil(len(files) / cols)
+
+contact_sheet = Image.new('RGB', (cols * thumb_w, rows * thumb_h), (255, 255, 255))
+draw = ImageDraw.Draw(contact_sheet)
+
+for i, f in enumerate(files):
+    path = os.path.join(folder, f)
+    try:
+        img = Image.open(path)
+        img.thumbnail((thumb_w, thumb_h - 40))
+        x = (i % cols) * thumb_w
+        y = (i // cols) * thumb_h
+        img_x = x + (thumb_w - img.width) // 2
+        img_y = y + (thumb_h - 40 - img.height) // 2
+        contact_sheet.paste(img, (img_x, img_y))
+        draw.text((x + 10, y + thumb_h - 30), f, fill=(0,0,0))
+    except Exception as e:
+        pass
+
+contact_sheet.save('contact_sheet.jpg')
+print("Saved contact_sheet.jpg")

next.config.mjs

@@ -15,6 +15,10 @@ const nextConfig = {
     pagesBufferLength: 2,
   },
   experimental: {
+    staleTimes: {
+      dynamic: 0,
+      static: 30,
+    },
     optimizePackageImports: [
       'lucide-react',
       'framer-motion',

package.json

@@ -138,7 +138,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.2.13-rc.46",
+  "version": "2.2.30",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",

proxy.ts

@@ -9,8 +9,9 @@ export default createMiddleware({
 export const config = {
   // Match all pathnames except for
   // - /api (API routes)
+  // - /stats (Analytics proxy)
   // - /_next (Next.js internals)
   // - /_static (inside /public)
   // - all root files inside /public (e.g. /favicon.ico)
-  matcher: ['/((?!api|_next|assets|_static|_vercel|[\\w-]+\\.\\w+).*)']
+  matcher: ['/((?!api|stats|_next|assets|_static|_vercel|[\\w-]+\\.\\w+).*)']
 };

test_og.png

@@ -0,0 +1 @@
+Bad Gateway

venv/bin/Activate.ps1

@@ -0,0 +1,247 @@
+<#
+.Synopsis
+Activate a Python virtual environment for the current PowerShell session.
+
+.Description
+Pushes the python executable for a virtual environment to the front of the
+$Env:PATH environment variable and sets the prompt to signify that you are
+in a Python virtual environment. Makes use of the command line switches as
+well as the `pyvenv.cfg` file values present in the virtual environment.
+
+.Parameter VenvDir
+Path to the directory that contains the virtual environment to activate. The
+default value for this is the parent of the directory that the Activate.ps1
+script is located within.
+
+.Parameter Prompt
+The prompt prefix to display when this virtual environment is activated. By
+default, this prompt is the name of the virtual environment folder (VenvDir)
+surrounded by parentheses and followed by a single space (ie. '(.venv) ').
+
+.Example
+Activate.ps1
+Activates the Python virtual environment that contains the Activate.ps1 script.
+
+.Example
+Activate.ps1 -Verbose
+Activates the Python virtual environment that contains the Activate.ps1 script,
+and shows extra information about the activation as it executes.
+
+.Example
+Activate.ps1 -VenvDir C:\Users\MyUser\Common\.venv
+Activates the Python virtual environment located in the specified location.
+
+.Example
+Activate.ps1 -Prompt "MyPython"
+Activates the Python virtual environment that contains the Activate.ps1 script,
+and prefixes the current prompt with the specified string (surrounded in
+parentheses) while the virtual environment is active.
+
+.Notes
+On Windows, it may be required to enable this Activate.ps1 script by setting the
+execution policy for the user. You can do this by issuing the following PowerShell
+command:
+
+PS C:\> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
+
+For more information on Execution Policies: 
+https://go.microsoft.com/fwlink/?LinkID=135170
+
+#>
+Param(
+    [Parameter(Mandatory = $false)]
+    [String]
+    $VenvDir,
+    [Parameter(Mandatory = $false)]
+    [String]
+    $Prompt
+)
+
+<# Function declarations --------------------------------------------------- #>
+
+<#
+.Synopsis
+Remove all shell session elements added by the Activate script, including the
+addition of the virtual environment's Python executable from the beginning of
+the PATH variable.
+
+.Parameter NonDestructive
+If present, do not remove this function from the global namespace for the
+session.
+
+#>
+function global:deactivate ([switch]$NonDestructive) {
+    # Revert to original values
+
+    # The prior prompt:
+    if (Test-Path -Path Function:_OLD_VIRTUAL_PROMPT) {
+        Copy-Item -Path Function:_OLD_VIRTUAL_PROMPT -Destination Function:prompt
+        Remove-Item -Path Function:_OLD_VIRTUAL_PROMPT
+    }
+
+    # The prior PYTHONHOME:
+    if (Test-Path -Path Env:_OLD_VIRTUAL_PYTHONHOME) {
+        Copy-Item -Path Env:_OLD_VIRTUAL_PYTHONHOME -Destination Env:PYTHONHOME
+        Remove-Item -Path Env:_OLD_VIRTUAL_PYTHONHOME
+    }
+
+    # The prior PATH:
+    if (Test-Path -Path Env:_OLD_VIRTUAL_PATH) {
+        Copy-Item -Path Env:_OLD_VIRTUAL_PATH -Destination Env:PATH
+        Remove-Item -Path Env:_OLD_VIRTUAL_PATH
+    }
+
+    # Just remove the VIRTUAL_ENV altogether:
+    if (Test-Path -Path Env:VIRTUAL_ENV) {
+        Remove-Item -Path env:VIRTUAL_ENV
+    }
+
+    # Just remove VIRTUAL_ENV_PROMPT altogether.
+    if (Test-Path -Path Env:VIRTUAL_ENV_PROMPT) {
+        Remove-Item -Path env:VIRTUAL_ENV_PROMPT
+    }
+
+    # Just remove the _PYTHON_VENV_PROMPT_PREFIX altogether:
+    if (Get-Variable -Name "_PYTHON_VENV_PROMPT_PREFIX" -ErrorAction SilentlyContinue) {
+        Remove-Variable -Name _PYTHON_VENV_PROMPT_PREFIX -Scope Global -Force
+    }
+
+    # Leave deactivate function in the global namespace if requested:
+    if (-not $NonDestructive) {
+        Remove-Item -Path function:deactivate
+    }
+}
+
+<#
+.Description
+Get-PyVenvConfig parses the values from the pyvenv.cfg file located in the
+given folder, and returns them in a map.
+
+For each line in the pyvenv.cfg file, if that line can be parsed into exactly
+two strings separated by `=` (with any amount of whitespace surrounding the =)
+then it is considered a `key = value` line. The left hand string is the key,
+the right hand is the value.
+
+If the value starts with a `'` or a `"` then the first and last character is
+stripped from the value before being captured.
+
+.Parameter ConfigDir
+Path to the directory that contains the `pyvenv.cfg` file.
+#>
+function Get-PyVenvConfig(
+    [String]
+    $ConfigDir
+) {
+    Write-Verbose "Given ConfigDir=$ConfigDir, obtain values in pyvenv.cfg"
+
+    # Ensure the file exists, and issue a warning if it doesn't (but still allow the function to continue).
+    $pyvenvConfigPath = Join-Path -Resolve -Path $ConfigDir -ChildPath 'pyvenv.cfg' -ErrorAction Continue
+
+    # An empty map will be returned if no config file is found.
+    $pyvenvConfig = @{ }
+
+    if ($pyvenvConfigPath) {
+
+        Write-Verbose "File exists, parse `key = value` lines"
+        $pyvenvConfigContent = Get-Content -Path $pyvenvConfigPath
+
+        $pyvenvConfigContent | ForEach-Object {
+            $keyval = $PSItem -split "\s*=\s*", 2
+            if ($keyval[0] -and $keyval[1]) {
+                $val = $keyval[1]
+
+                # Remove extraneous quotations around a string value.
+                if ("'""".Contains($val.Substring(0, 1))) {
+                    $val = $val.Substring(1, $val.Length - 2)
+                }
+
+                $pyvenvConfig[$keyval[0]] = $val
+                Write-Verbose "Adding Key: '$($keyval[0])'='$val'"
+            }
+        }
+    }
+    return $pyvenvConfig
+}
+
+
+<# Begin Activate script --------------------------------------------------- #>
+
+# Determine the containing directory of this script
+$VenvExecPath = Split-Path -Parent $MyInvocation.MyCommand.Definition
+$VenvExecDir = Get-Item -Path $VenvExecPath
+
+Write-Verbose "Activation script is located in path: '$VenvExecPath'"
+Write-Verbose "VenvExecDir Fullname: '$($VenvExecDir.FullName)"
+Write-Verbose "VenvExecDir Name: '$($VenvExecDir.Name)"
+
+# Set values required in priority: CmdLine, ConfigFile, Default
+# First, get the location of the virtual environment, it might not be
+# VenvExecDir if specified on the command line.
+if ($VenvDir) {
+    Write-Verbose "VenvDir given as parameter, using '$VenvDir' to determine values"
+}
+else {
+    Write-Verbose "VenvDir not given as a parameter, using parent directory name as VenvDir."
+    $VenvDir = $VenvExecDir.Parent.FullName.TrimEnd("\\/")
+    Write-Verbose "VenvDir=$VenvDir"
+}
+
+# Next, read the `pyvenv.cfg` file to determine any required value such
+# as `prompt`.
+$pyvenvCfg = Get-PyVenvConfig -ConfigDir $VenvDir
+
+# Next, set the prompt from the command line, or the config file, or
+# just use the name of the virtual environment folder.
+if ($Prompt) {
+    Write-Verbose "Prompt specified as argument, using '$Prompt'"
+}
+else {
+    Write-Verbose "Prompt not specified as argument to script, checking pyvenv.cfg value"
+    if ($pyvenvCfg -and $pyvenvCfg['prompt']) {
+        Write-Verbose "  Setting based on value in pyvenv.cfg='$($pyvenvCfg['prompt'])'"
+        $Prompt = $pyvenvCfg['prompt'];
+    }
+    else {
+        Write-Verbose "  Setting prompt based on parent's directory's name. (Is the directory name passed to venv module when creating the virtual environment)"
+        Write-Verbose "  Got leaf-name of $VenvDir='$(Split-Path -Path $venvDir -Leaf)'"
+        $Prompt = Split-Path -Path $venvDir -Leaf
+    }
+}
+
+Write-Verbose "Prompt = '$Prompt'"
+Write-Verbose "VenvDir='$VenvDir'"
+
+# Deactivate any currently active virtual environment, but leave the
+# deactivate function in place.
+deactivate -nondestructive
+
+# Now set the environment variable VIRTUAL_ENV, used by many tools to determine
+# that there is an activated venv.
+$env:VIRTUAL_ENV = $VenvDir
+
+if (-not $Env:VIRTUAL_ENV_DISABLE_PROMPT) {
+
+    Write-Verbose "Setting prompt to '$Prompt'"
+
+    # Set the prompt to include the env name
+    # Make sure _OLD_VIRTUAL_PROMPT is global
+    function global:_OLD_VIRTUAL_PROMPT { "" }
+    Copy-Item -Path function:prompt -Destination function:_OLD_VIRTUAL_PROMPT
+    New-Variable -Name _PYTHON_VENV_PROMPT_PREFIX -Description "Python virtual environment prompt prefix" -Scope Global -Option ReadOnly -Visibility Public -Value $Prompt
+
+    function global:prompt {
+        Write-Host -NoNewline -ForegroundColor Green "($_PYTHON_VENV_PROMPT_PREFIX) "
+        _OLD_VIRTUAL_PROMPT
+    }
+    $env:VIRTUAL_ENV_PROMPT = $Prompt
+}
+
+# Clear PYTHONHOME
+if (Test-Path -Path Env:PYTHONHOME) {
+    Copy-Item -Path Env:PYTHONHOME -Destination Env:_OLD_VIRTUAL_PYTHONHOME
+    Remove-Item -Path Env:PYTHONHOME
+}
+
+# Add the venv to the PATH
+Copy-Item -Path Env:PATH -Destination Env:_OLD_VIRTUAL_PATH
+$Env:PATH = "$VenvExecDir$([System.IO.Path]::PathSeparator)$Env:PATH"

venv/bin/activate

@@ -0,0 +1,63 @@
+# This file must be used with "source bin/activate" *from bash*
+# you cannot run it directly
+
+deactivate () {
+    # reset old environment variables
+    if [ -n "${_OLD_VIRTUAL_PATH:-}" ] ; then
+        PATH="${_OLD_VIRTUAL_PATH:-}"
+        export PATH
+        unset _OLD_VIRTUAL_PATH
+    fi
+    if [ -n "${_OLD_VIRTUAL_PYTHONHOME:-}" ] ; then
+        PYTHONHOME="${_OLD_VIRTUAL_PYTHONHOME:-}"
+        export PYTHONHOME
+        unset _OLD_VIRTUAL_PYTHONHOME
+    fi
+
+    # Call hash to forget past commands. Without forgetting
+    # past commands the $PATH changes we made may not be respected
+    hash -r 2> /dev/null
+
+    if [ -n "${_OLD_VIRTUAL_PS1:-}" ] ; then
+        PS1="${_OLD_VIRTUAL_PS1:-}"
+        export PS1
+        unset _OLD_VIRTUAL_PS1
+    fi
+
+    unset VIRTUAL_ENV
+    unset VIRTUAL_ENV_PROMPT
+    if [ ! "${1:-}" = "nondestructive" ] ; then
+    # Self destruct!
+        unset -f deactivate
+    fi
+}
+
+# unset irrelevant variables
+deactivate nondestructive
+
+VIRTUAL_ENV="/Volumes/Alpha SSD/Coding/e-tib.com/venv"
+export VIRTUAL_ENV
+
+_OLD_VIRTUAL_PATH="$PATH"
+PATH="$VIRTUAL_ENV/bin:$PATH"
+export PATH
+
+# unset PYTHONHOME if set
+# this will fail if PYTHONHOME is set to the empty string (which is bad anyway)
+# could use `if (set -u; : $PYTHONHOME) ;` in bash
+if [ -n "${PYTHONHOME:-}" ] ; then
+    _OLD_VIRTUAL_PYTHONHOME="${PYTHONHOME:-}"
+    unset PYTHONHOME
+fi
+
+if [ -z "${VIRTUAL_ENV_DISABLE_PROMPT:-}" ] ; then
+    _OLD_VIRTUAL_PS1="${PS1:-}"
+    PS1="(venv) ${PS1:-}"
+    export PS1
+    VIRTUAL_ENV_PROMPT="(venv) "
+    export VIRTUAL_ENV_PROMPT
+fi
+
+# Call hash to forget past commands. Without forgetting
+# past commands the $PATH changes we made may not be respected
+hash -r 2> /dev/null

venv/bin/activate.csh

@@ -0,0 +1,26 @@
+# This file must be used with "source bin/activate.csh" *from csh*.
+# You cannot run it directly.
+# Created by Davide Di Blasi <davidedb@gmail.com>.
+# Ported to Python 3.3 venv by Andrew Svetlov <andrew.svetlov@gmail.com>
+
+alias deactivate 'test $?_OLD_VIRTUAL_PATH != 0 && setenv PATH "$_OLD_VIRTUAL_PATH" && unset _OLD_VIRTUAL_PATH; rehash; test $?_OLD_VIRTUAL_PROMPT != 0 && set prompt="$_OLD_VIRTUAL_PROMPT" && unset _OLD_VIRTUAL_PROMPT; unsetenv VIRTUAL_ENV; unsetenv VIRTUAL_ENV_PROMPT; test "\!:*" != "nondestructive" && unalias deactivate'
+
+# Unset irrelevant variables.
+deactivate nondestructive
+
+setenv VIRTUAL_ENV "/Volumes/Alpha SSD/Coding/e-tib.com/venv"
+
+set _OLD_VIRTUAL_PATH="$PATH"
+setenv PATH "$VIRTUAL_ENV/bin:$PATH"
+
+
+set _OLD_VIRTUAL_PROMPT="$prompt"
+
+if (! "$?VIRTUAL_ENV_DISABLE_PROMPT") then
+    set prompt = "(venv) $prompt"
+    setenv VIRTUAL_ENV_PROMPT "(venv) "
+endif
+
+alias pydoc python -m pydoc
+
+rehash

venv/bin/activate.fish

@@ -0,0 +1,69 @@
+# This file must be used with "source <venv>/bin/activate.fish" *from fish*
+# (https://fishshell.com/); you cannot run it directly.
+
+function deactivate  -d "Exit virtual environment and return to normal shell environment"
+    # reset old environment variables
+    if test -n "$_OLD_VIRTUAL_PATH"
+        set -gx PATH $_OLD_VIRTUAL_PATH
+        set -e _OLD_VIRTUAL_PATH
+    end
+    if test -n "$_OLD_VIRTUAL_PYTHONHOME"
+        set -gx PYTHONHOME $_OLD_VIRTUAL_PYTHONHOME
+        set -e _OLD_VIRTUAL_PYTHONHOME
+    end
+
+    if test -n "$_OLD_FISH_PROMPT_OVERRIDE"
+        set -e _OLD_FISH_PROMPT_OVERRIDE
+        # prevents error when using nested fish instances (Issue #93858)
+        if functions -q _old_fish_prompt
+            functions -e fish_prompt
+            functions -c _old_fish_prompt fish_prompt
+            functions -e _old_fish_prompt
+        end
+    end
+
+    set -e VIRTUAL_ENV
+    set -e VIRTUAL_ENV_PROMPT
+    if test "$argv[1]" != "nondestructive"
+        # Self-destruct!
+        functions -e deactivate
+    end
+end
+
+# Unset irrelevant variables.
+deactivate nondestructive
+
+set -gx VIRTUAL_ENV "/Volumes/Alpha SSD/Coding/e-tib.com/venv"
+
+set -gx _OLD_VIRTUAL_PATH $PATH
+set -gx PATH "$VIRTUAL_ENV/bin" $PATH
+
+# Unset PYTHONHOME if set.
+if set -q PYTHONHOME
+    set -gx _OLD_VIRTUAL_PYTHONHOME $PYTHONHOME
+    set -e PYTHONHOME
+end
+
+if test -z "$VIRTUAL_ENV_DISABLE_PROMPT"
+    # fish uses a function instead of an env var to generate the prompt.
+
+    # Save the current fish_prompt function as the function _old_fish_prompt.
+    functions -c fish_prompt _old_fish_prompt
+
+    # With the original prompt function renamed, we can override with our own.
+    function fish_prompt
+        # Save the return status of the last command.
+        set -l old_status $status
+
+        # Output the venv prompt; color taken from the blue of the Python logo.
+        printf "%s%s%s" (set_color 4B8BBE) "(venv) " (set_color normal)
+
+        # Restore the return status of the previous command.
+        echo "exit $old_status" | .
+        # Output the original/"old" prompt.
+        _old_fish_prompt
+    end
+
+    set -gx _OLD_FISH_PROMPT_OVERRIDE "$VIRTUAL_ENV"
+    set -gx VIRTUAL_ENV_PROMPT "(venv) "
+end

venv/bin/pip

@@ -0,0 +1,10 @@
+#!/bin/sh
+'''exec' "/Volumes/Alpha SSD/Coding/e-tib.com/venv/bin/python3" "$0" "$@"
+' '''
+# -*- coding: utf-8 -*-
+import re
+import sys
+from pip._internal.cli.main import main
+if __name__ == '__main__':
+    sys.argv[0] = re.sub(r'(-script\.pyw|\.exe)?$', '', sys.argv[0])
+    sys.exit(main())

venv/bin/pip3

@@ -0,0 +1,10 @@
+#!/bin/sh
+'''exec' "/Volumes/Alpha SSD/Coding/e-tib.com/venv/bin/python3" "$0" "$@"
+' '''
+# -*- coding: utf-8 -*-
+import re
+import sys
+from pip._internal.cli.main import main
+if __name__ == '__main__':
+    sys.argv[0] = re.sub(r'(-script\.pyw|\.exe)?$', '', sys.argv[0])
+    sys.exit(main())

venv/bin/pip3.11

@@ -0,0 +1,10 @@
+#!/bin/sh
+'''exec' "/Volumes/Alpha SSD/Coding/e-tib.com/venv/bin/python3" "$0" "$@"
+' '''
+# -*- coding: utf-8 -*-
+import re
+import sys
+from pip._internal.cli.main import main
+if __name__ == '__main__':
+    sys.argv[0] = re.sub(r'(-script\.pyw|\.exe)?$', '', sys.argv[0])
+    sys.exit(main())

venv/bin/python

@@ -0,0 +1 @@
+python3

venv/bin/python3

@@ -0,0 +1 @@
+/Users/marcmintel/.pyenv/versions/3.11.9/bin/python3

venv/bin/python3.11

@@ -0,0 +1 @@
+python3

venv/lib/python3.11/site-packages/PIL/AvifImagePlugin.py

@@ -0,0 +1,293 @@
+from __future__ import annotations
+
+import os
+from io import BytesIO
+from typing import IO
+
+from . import ExifTags, Image, ImageFile
+
+try:
+    from . import _avif
+
+    SUPPORTED = True
+except ImportError:
+    SUPPORTED = False
+
+# Decoder options as module globals, until there is a way to pass parameters
+# to Image.open (see https://github.com/python-pillow/Pillow/issues/569)
+DECODE_CODEC_CHOICE = "auto"
+DEFAULT_MAX_THREADS = 0
+
+
+def get_codec_version(codec_name: str) -> str | None:
+    versions = _avif.codec_versions()
+    for version in versions.split(", "):
+        if version.split(" [")[0] == codec_name:
+            return version.split(":")[-1].split(" ")[0]
+    return None
+
+
+def _accept(prefix: bytes) -> bool | str:
+    if prefix[4:8] != b"ftyp":
+        return False
+    major_brand = prefix[8:12]
+    if major_brand in (
+        # coding brands
+        b"avif",
+        b"avis",
+        # We accept files with AVIF container brands; we can't yet know if
+        # the ftyp box has the correct compatible brands, but if it doesn't
+        # then the plugin will raise a SyntaxError which Pillow will catch
+        # before moving on to the next plugin that accepts the file.
+        #
+        # Also, because this file might not actually be an AVIF file, we
+        # don't raise an error if AVIF support isn't properly compiled.
+        b"mif1",
+        b"msf1",
+    ):
+        if not SUPPORTED:
+            return (
+                "image file could not be identified because AVIF support not installed"
+            )
+        return True
+    return False
+
+
+def _get_default_max_threads() -> int:
+    if DEFAULT_MAX_THREADS:
+        return DEFAULT_MAX_THREADS
+    if hasattr(os, "sched_getaffinity"):
+        return len(os.sched_getaffinity(0))
+    else:
+        return os.cpu_count() or 1
+
+
+class AvifImageFile(ImageFile.ImageFile):
+    format = "AVIF"
+    format_description = "AVIF image"
+    __frame = -1
+
+    def _open(self) -> None:
+        if not SUPPORTED:
+            msg = "image file could not be opened because AVIF support not installed"
+            raise SyntaxError(msg)
+
+        if DECODE_CODEC_CHOICE != "auto" and not _avif.decoder_codec_available(
+            DECODE_CODEC_CHOICE
+        ):
+            msg = "Invalid opening codec"
+            raise ValueError(msg)
+
+        assert self.fp is not None
+        self._decoder = _avif.AvifDecoder(
+            self.fp.read(),
+            DECODE_CODEC_CHOICE,
+            _get_default_max_threads(),
+        )
+
+        # Get info from decoder
+        self._size, self.n_frames, self._mode, icc, exif, exif_orientation, xmp = (
+            self._decoder.get_info()
+        )
+        self.is_animated = self.n_frames > 1
+
+        if icc:
+            self.info["icc_profile"] = icc
+        if xmp:
+            self.info["xmp"] = xmp
+
+        if exif_orientation != 1 or exif:
+            exif_data = Image.Exif()
+            if exif:
+                exif_data.load(exif)
+                original_orientation = exif_data.get(ExifTags.Base.Orientation, 1)
+            else:
+                original_orientation = 1
+            if exif_orientation != original_orientation:
+                exif_data[ExifTags.Base.Orientation] = exif_orientation
+                exif = exif_data.tobytes()
+        if exif:
+            self.info["exif"] = exif
+        self.seek(0)
+
+    def seek(self, frame: int) -> None:
+        if not self._seek_check(frame):
+            return
+
+        # Set tile
+        self.__frame = frame
+        self.tile = [ImageFile._Tile("raw", (0, 0) + self.size, 0, self.mode)]
+
+    def load(self) -> Image.core.PixelAccess | None:
+        if self.tile:
+            # We need to load the image data for this frame
+            data, timescale, pts_in_timescales, duration_in_timescales = (
+                self._decoder.get_frame(self.__frame)
+            )
+            self.info["timestamp"] = round(1000 * (pts_in_timescales / timescale))
+            self.info["duration"] = round(1000 * (duration_in_timescales / timescale))
+
+            if self.fp and self._exclusive_fp:
+                self.fp.close()
+            self.fp = BytesIO(data)
+
+        return super().load()
+
+    def load_seek(self, pos: int) -> None:
+        pass
+
+    def tell(self) -> int:
+        return self.__frame
+
+
+def _save_all(im: Image.Image, fp: IO[bytes], filename: str | bytes) -> None:
+    _save(im, fp, filename, save_all=True)
+
+
+def _save(
+    im: Image.Image, fp: IO[bytes], filename: str | bytes, save_all: bool = False
+) -> None:
+    info = im.encoderinfo.copy()
+    if save_all:
+        append_images = list(info.get("append_images", []))
+    else:
+        append_images = []
+
+    total = 0
+    for ims in [im] + append_images:
+        total += getattr(ims, "n_frames", 1)
+
+    quality = info.get("quality", 75)
+    if not isinstance(quality, int) or quality < 0 or quality > 100:
+        msg = "Invalid quality setting"
+        raise ValueError(msg)
+
+    duration = info.get("duration", 0)
+    subsampling = info.get("subsampling", "4:2:0")
+    speed = info.get("speed", 6)
+    max_threads = info.get("max_threads", _get_default_max_threads())
+    codec = info.get("codec", "auto")
+    if codec != "auto" and not _avif.encoder_codec_available(codec):
+        msg = "Invalid saving codec"
+        raise ValueError(msg)
+    range_ = info.get("range", "full")
+    tile_rows_log2 = info.get("tile_rows", 0)
+    tile_cols_log2 = info.get("tile_cols", 0)
+    alpha_premultiplied = bool(info.get("alpha_premultiplied", False))
+    autotiling = bool(info.get("autotiling", tile_rows_log2 == tile_cols_log2 == 0))
+
+    icc_profile = info.get("icc_profile", im.info.get("icc_profile"))
+    exif_orientation = 1
+    if exif := info.get("exif"):
+        if isinstance(exif, Image.Exif):
+            exif_data = exif
+        else:
+            exif_data = Image.Exif()
+            exif_data.load(exif)
+        if ExifTags.Base.Orientation in exif_data:
+            exif_orientation = exif_data.pop(ExifTags.Base.Orientation)
+            exif = exif_data.tobytes() if exif_data else b""
+        elif isinstance(exif, Image.Exif):
+            exif = exif_data.tobytes()
+
+    xmp = info.get("xmp")
+
+    if isinstance(xmp, str):
+        xmp = xmp.encode("utf-8")
+
+    advanced = info.get("advanced")
+    if advanced is not None:
+        if isinstance(advanced, dict):
+            advanced = advanced.items()
+        try:
+            advanced = tuple(advanced)
+        except TypeError:
+            invalid = True
+        else:
+            invalid = any(not isinstance(v, tuple) or len(v) != 2 for v in advanced)
+        if invalid:
+            msg = (
+                "advanced codec options must be a dict of key-value string "
+                "pairs or a series of key-value two-tuples"
+            )
+            raise ValueError(msg)
+
+    # Setup the AVIF encoder
+    enc = _avif.AvifEncoder(
+        im.size,
+        subsampling,
+        quality,
+        speed,
+        max_threads,
+        codec,
+        range_,
+        tile_rows_log2,
+        tile_cols_log2,
+        alpha_premultiplied,
+        autotiling,
+        icc_profile or b"",
+        exif or b"",
+        exif_orientation,
+        xmp or b"",
+        advanced,
+    )
+
+    # Add each frame
+    frame_idx = 0
+    frame_duration = 0
+    cur_idx = im.tell()
+    is_single_frame = total == 1
+    try:
+        for ims in [im] + append_images:
+            # Get number of frames in this image
+            nfr = getattr(ims, "n_frames", 1)
+
+            for idx in range(nfr):
+                ims.seek(idx)
+
+                # Make sure image mode is supported
+                frame = ims
+                rawmode = ims.mode
+                if ims.mode not in {"RGB", "RGBA"}:
+                    rawmode = "RGBA" if ims.has_transparency_data else "RGB"
+                    frame = ims.convert(rawmode)
+
+                # Update frame duration
+                if isinstance(duration, (list, tuple)):
+                    frame_duration = duration[frame_idx]
+                else:
+                    frame_duration = duration
+
+                # Append the frame to the animation encoder
+                enc.add(
+                    frame.tobytes("raw", rawmode),
+                    frame_duration,
+                    frame.size,
+                    rawmode,
+                    is_single_frame,
+                )
+
+                # Update frame index
+                frame_idx += 1
+
+                if not save_all:
+                    break
+
+    finally:
+        im.seek(cur_idx)
+
+    # Get the final output from the encoder
+    data = enc.finish()
+    if data is None:
+        msg = "cannot write file as AVIF (encoder returned None)"
+        raise OSError(msg)
+
+    fp.write(data)
+
+
+Image.register_open(AvifImageFile.format, AvifImageFile, _accept)
+if SUPPORTED:
+    Image.register_save(AvifImageFile.format, _save)
+    Image.register_save_all(AvifImageFile.format, _save_all)
+    Image.register_extensions(AvifImageFile.format, [".avif", ".avifs"])
+    Image.register_mime(AvifImageFile.format, "image/avif")

venv/lib/python3.11/site-packages/PIL/BdfFontFile.py

@@ -0,0 +1,123 @@
+#
+# The Python Imaging Library
+# $Id$
+#
+# bitmap distribution font (bdf) file parser
+#
+# history:
+# 1996-05-16 fl   created (as bdf2pil)
+# 1997-08-25 fl   converted to FontFile driver
+# 2001-05-25 fl   removed bogus __init__ call
+# 2002-11-20 fl   robustification (from Kevin Cazabon, Dmitry Vasiliev)
+# 2003-04-22 fl   more robustification (from Graham Dumpleton)
+#
+# Copyright (c) 1997-2003 by Secret Labs AB.
+# Copyright (c) 1997-2003 by Fredrik Lundh.
+#
+# See the README file for information on usage and redistribution.
+#
+
+"""
+Parse X Bitmap Distribution Format (BDF)
+"""
+
+from __future__ import annotations
+
+from typing import BinaryIO
+
+from . import FontFile, Image
+
+
+def bdf_char(
+    f: BinaryIO,
+) -> (
+    tuple[
+        str,
+        int,
+        tuple[tuple[int, int], tuple[int, int, int, int], tuple[int, int, int, int]],
+        Image.Image,
+    ]
+    | None
+):
+    # skip to STARTCHAR
+    while True:
+        s = f.readline()
+        if not s:
+            return None
+        if s.startswith(b"STARTCHAR"):
+            break
+    id = s[9:].strip().decode("ascii")
+
+    # load symbol properties
+    props = {}
+    while True:
+        s = f.readline()
+        if not s or s.startswith(b"BITMAP"):
+            break
+        i = s.find(b" ")
+        props[s[:i].decode("ascii")] = s[i + 1 : -1].decode("ascii")
+
+    # load bitmap
+    bitmap = bytearray()
+    while True:
+        s = f.readline()
+        if not s or s.startswith(b"ENDCHAR"):
+            break
+        bitmap += s[:-1]
+
+    # The word BBX
+    # followed by the width in x (BBw), height in y (BBh),
+    # and x and y displacement (BBxoff0, BByoff0)
+    # of the lower left corner from the origin of the character.
+    width, height, x_disp, y_disp = (int(p) for p in props["BBX"].split())
+
+    # The word DWIDTH
+    # followed by the width in x and y of the character in device pixels.
+    dwx, dwy = (int(p) for p in props["DWIDTH"].split())
+
+    bbox = (
+        (dwx, dwy),
+        (x_disp, -y_disp - height, width + x_disp, -y_disp),
+        (0, 0, width, height),
+    )
+
+    try:
+        im = Image.frombytes("1", (width, height), bitmap, "hex", "1")
+    except ValueError:
+        # deal with zero-width characters
+        im = Image.new("1", (width, height))
+
+    return id, int(props["ENCODING"]), bbox, im
+
+
+class BdfFontFile(FontFile.FontFile):
+    """Font file plugin for the X11 BDF format."""
+
+    def __init__(self, fp: BinaryIO) -> None:
+        super().__init__()
+
+        s = fp.readline()
+        if not s.startswith(b"STARTFONT 2.1"):
+            msg = "not a valid BDF file"
+            raise SyntaxError(msg)
+
+        props = {}
+        comments = []
+
+        while True:
+            s = fp.readline()
+            if not s or s.startswith(b"ENDPROPERTIES"):
+                break
+            i = s.find(b" ")
+            props[s[:i].decode("ascii")] = s[i + 1 : -1].decode("ascii")
+            if s[:i] in [b"COMMENT", b"COPYRIGHT"]:
+                if s.find(b"LogicalFontDescription") < 0:
+                    comments.append(s[i + 1 : -1].decode("ascii"))
+
+        while True:
+            c = bdf_char(fp)
+            if not c:
+                break
+            id, ch, (xy, dst, src), im = c
+            if 0 <= ch < len(self.glyph):
+                self.glyph[ch] = xy, dst, src, im

venv/lib/python3.11/site-packages/PIL/BlpImagePlugin.py

@@ -0,0 +1,498 @@
+"""
+Blizzard Mipmap Format (.blp)
+Jerome Leclanche <jerome@leclan.ch>
+
+The contents of this file are hereby released in the public domain (CC0)
+Full text of the CC0 license:
+  https://creativecommons.org/publicdomain/zero/1.0/
+
+BLP1 files, used mostly in Warcraft III, are not fully supported.
+All types of BLP2 files used in World of Warcraft are supported.
+
+The BLP file structure consists of a header, up to 16 mipmaps of the
+texture
+
+Texture sizes must be powers of two, though the two dimensions do
+not have to be equal; 512x256 is valid, but 512x200 is not.
+The first mipmap (mipmap #0) is the full size image; each subsequent
+mipmap halves both dimensions. The final mipmap should be 1x1.
+
+BLP files come in many different flavours:
+* JPEG-compressed (type == 0) - only supported for BLP1.
+* RAW images (type == 1, encoding == 1). Each mipmap is stored as an
+  array of 8-bit values, one per pixel, left to right, top to bottom.
+  Each value is an index to the palette.
+* DXT-compressed (type == 1, encoding == 2):
+- DXT1 compression is used if alpha_encoding == 0.
+  - An additional alpha bit is used if alpha_depth == 1.
+  - DXT3 compression is used if alpha_encoding == 1.
+  - DXT5 compression is used if alpha_encoding == 7.
+"""
+
+from __future__ import annotations
+
+import abc
+import os
+import struct
+from enum import IntEnum
+from io import BytesIO
+from typing import IO
+
+from . import Image, ImageFile
+
+
+class Format(IntEnum):
+    JPEG = 0
+
+
+class Encoding(IntEnum):
+    UNCOMPRESSED = 1
+    DXT = 2
+    UNCOMPRESSED_RAW_BGRA = 3
+
+
+class AlphaEncoding(IntEnum):
+    DXT1 = 0
+    DXT3 = 1
+    DXT5 = 7
+
+
+def unpack_565(i: int) -> tuple[int, int, int]:
+    return ((i >> 11) & 0x1F) << 3, ((i >> 5) & 0x3F) << 2, (i & 0x1F) << 3
+
+
+def decode_dxt1(
+    data: bytes, alpha: bool = False
+) -> tuple[bytearray, bytearray, bytearray, bytearray]:
+    """
+    input: one "row" of data (i.e. will produce 4*width pixels)
+    """
+
+    blocks = len(data) // 8  # number of blocks in row
+    ret = (bytearray(), bytearray(), bytearray(), bytearray())
+
+    for block_index in range(blocks):
+        # Decode next 8-byte block.
+        idx = block_index * 8
+        color0, color1, bits = struct.unpack_from("<HHI", data, idx)
+
+        r0, g0, b0 = unpack_565(color0)
+        r1, g1, b1 = unpack_565(color1)
+
+        # Decode this block into 4x4 pixels
+        # Accumulate the results onto our 4 row accumulators
+        for j in range(4):
+            for i in range(4):
+                # get next control op and generate a pixel
+
+                control = bits & 3
+                bits = bits >> 2
+
+                a = 0xFF
+                if control == 0:
+                    r, g, b = r0, g0, b0
+                elif control == 1:
+                    r, g, b = r1, g1, b1
+                elif control == 2:
+                    if color0 > color1:
+                        r = (2 * r0 + r1) // 3
+                        g = (2 * g0 + g1) // 3
+                        b = (2 * b0 + b1) // 3
+                    else:
+                        r = (r0 + r1) // 2
+                        g = (g0 + g1) // 2
+                        b = (b0 + b1) // 2
+                elif control == 3:
+                    if color0 > color1:
+                        r = (2 * r1 + r0) // 3
+                        g = (2 * g1 + g0) // 3
+                        b = (2 * b1 + b0) // 3
+                    else:
+                        r, g, b, a = 0, 0, 0, 0
+
+                if alpha:
+                    ret[j].extend([r, g, b, a])
+                else:
+                    ret[j].extend([r, g, b])
+
+    return ret
+
+
+def decode_dxt3(data: bytes) -> tuple[bytearray, bytearray, bytearray, bytearray]:
+    """
+    input: one "row" of data (i.e. will produce 4*width pixels)
+    """
+
+    blocks = len(data) // 16  # number of blocks in row
+    ret = (bytearray(), bytearray(), bytearray(), bytearray())
+
+    for block_index in range(blocks):
+        idx = block_index * 16
+        block = data[idx : idx + 16]
+        # Decode next 16-byte block.
+        bits = struct.unpack_from("<8B", block)
+        color0, color1 = struct.unpack_from("<HH", block, 8)
+
+        (code,) = struct.unpack_from("<I", block, 12)
+
+        r0, g0, b0 = unpack_565(color0)
+        r1, g1, b1 = unpack_565(color1)
+
+        for j in range(4):
+            high = False  # Do we want the higher bits?
+            for i in range(4):
+                alphacode_index = (4 * j + i) // 2
+                a = bits[alphacode_index]
+                if high:
+                    high = False
+                    a >>= 4
+                else:
+                    high = True
+                    a &= 0xF
+                a *= 17  # We get a value between 0 and 15
+
+                color_code = (code >> 2 * (4 * j + i)) & 0x03
+
+                if color_code == 0:
+                    r, g, b = r0, g0, b0
+                elif color_code == 1:
+                    r, g, b = r1, g1, b1
+                elif color_code == 2:
+                    r = (2 * r0 + r1) // 3
+                    g = (2 * g0 + g1) // 3
+                    b = (2 * b0 + b1) // 3
+                elif color_code == 3:
+                    r = (2 * r1 + r0) // 3
+                    g = (2 * g1 + g0) // 3
+                    b = (2 * b1 + b0) // 3
+
+                ret[j].extend([r, g, b, a])
+
+    return ret
+
+
+def decode_dxt5(data: bytes) -> tuple[bytearray, bytearray, bytearray, bytearray]:
+    """
+    input: one "row" of data (i.e. will produce 4 * width pixels)
+    """
+
+    blocks = len(data) // 16  # number of blocks in row
+    ret = (bytearray(), bytearray(), bytearray(), bytearray())
+
+    for block_index in range(blocks):
+        idx = block_index * 16
+        block = data[idx : idx + 16]
+        # Decode next 16-byte block.
+        a0, a1 = struct.unpack_from("<BB", block)
+
+        bits = struct.unpack_from("<6B", block, 2)
+        alphacode1 = bits[2] | (bits[3] << 8) | (bits[4] << 16) | (bits[5] << 24)
+        alphacode2 = bits[0] | (bits[1] << 8)
+
+        color0, color1 = struct.unpack_from("<HH", block, 8)
+
+        (code,) = struct.unpack_from("<I", block, 12)
+
+        r0, g0, b0 = unpack_565(color0)
+        r1, g1, b1 = unpack_565(color1)
+
+        for j in range(4):
+            for i in range(4):
+                # get next control op and generate a pixel
+                alphacode_index = 3 * (4 * j + i)
+
+                if alphacode_index <= 12:
+                    alphacode = (alphacode2 >> alphacode_index) & 0x07
+                elif alphacode_index == 15:
+                    alphacode = (alphacode2 >> 15) | ((alphacode1 << 1) & 0x06)
+                else:  # alphacode_index >= 18 and alphacode_index <= 45
+                    alphacode = (alphacode1 >> (alphacode_index - 16)) & 0x07
+
+                if alphacode == 0:
+                    a = a0
+                elif alphacode == 1:
+                    a = a1
+                elif a0 > a1:
+                    a = ((8 - alphacode) * a0 + (alphacode - 1) * a1) // 7
+                elif alphacode == 6:
+                    a = 0
+                elif alphacode == 7:
+                    a = 255
+                else:
+                    a = ((6 - alphacode) * a0 + (alphacode - 1) * a1) // 5
+
+                color_code = (code >> 2 * (4 * j + i)) & 0x03
+
+                if color_code == 0:
+                    r, g, b = r0, g0, b0
+                elif color_code == 1:
+                    r, g, b = r1, g1, b1
+                elif color_code == 2:
+                    r = (2 * r0 + r1) // 3
+                    g = (2 * g0 + g1) // 3
+                    b = (2 * b0 + b1) // 3
+                elif color_code == 3:
+                    r = (2 * r1 + r0) // 3
+                    g = (2 * g1 + g0) // 3
+                    b = (2 * b1 + b0) // 3
+
+                ret[j].extend([r, g, b, a])
+
+    return ret
+
+
+class BLPFormatError(NotImplementedError):
+    pass
+
+
+def _accept(prefix: bytes) -> bool:
+    return prefix.startswith((b"BLP1", b"BLP2"))
+
+
+class BlpImageFile(ImageFile.ImageFile):
+    """
+    Blizzard Mipmap Format
+    """
+
+    format = "BLP"
+    format_description = "Blizzard Mipmap Format"
+
+    def _open(self) -> None:
+        assert self.fp is not None
+        self.magic = self.fp.read(4)
+        if not _accept(self.magic):
+            msg = f"Bad BLP magic {repr(self.magic)}"
+            raise BLPFormatError(msg)
+
+        compression = struct.unpack("<i", self.fp.read(4))[0]
+        if self.magic == b"BLP1":
+            alpha = struct.unpack("<I", self.fp.read(4))[0] != 0
+        else:
+            encoding = struct.unpack("<b", self.fp.read(1))[0]
+            alpha = struct.unpack("<b", self.fp.read(1))[0] != 0
+            alpha_encoding = struct.unpack("<b", self.fp.read(1))[0]
+            self.fp.seek(1, os.SEEK_CUR)  # mips
+
+        self._size = struct.unpack("<II", self.fp.read(8))
+
+        args: tuple[int, int, bool] | tuple[int, int, bool, int]
+        if self.magic == b"BLP1":
+            encoding = struct.unpack("<i", self.fp.read(4))[0]
+            self.fp.seek(4, os.SEEK_CUR)  # subtype
+
+            args = (compression, encoding, alpha)
+            offset = 28
+        else:
+            args = (compression, encoding, alpha, alpha_encoding)
+            offset = 20
+
+        decoder = self.magic.decode()
+
+        self._mode = "RGBA" if alpha else "RGB"
+        self.tile = [ImageFile._Tile(decoder, (0, 0) + self.size, offset, args)]
+
+
+class _BLPBaseDecoder(abc.ABC, ImageFile.PyDecoder):
+    _pulls_fd = True
+
+    def decode(self, buffer: bytes | Image.SupportsArrayInterface) -> tuple[int, int]:
+        try:
+            self._read_header()
+            self._load()
+        except struct.error as e:
+            msg = "Truncated BLP file"
+            raise OSError(msg) from e
+        return -1, 0
+
+    @abc.abstractmethod
+    def _load(self) -> None:
+        pass
+
+    def _read_header(self) -> None:
+        self._offsets = struct.unpack("<16I", self._safe_read(16 * 4))
+        self._lengths = struct.unpack("<16I", self._safe_read(16 * 4))
+
+    def _safe_read(self, length: int) -> bytes:
+        assert self.fd is not None
+        return ImageFile._safe_read(self.fd, length)
+
+    def _read_palette(self) -> list[tuple[int, int, int, int]]:
+        ret = []
+        for i in range(256):
+            try:
+                b, g, r, a = struct.unpack("<4B", self._safe_read(4))
+            except struct.error:
+                break
+            ret.append((b, g, r, a))
+        return ret
+
+    def _read_bgra(
+        self, palette: list[tuple[int, int, int, int]], alpha: bool
+    ) -> bytearray:
+        data = bytearray()
+        _data = BytesIO(self._safe_read(self._lengths[0]))
+        while True:
+            try:
+                (offset,) = struct.unpack("<B", _data.read(1))
+            except struct.error:
+                break
+            b, g, r, a = palette[offset]
+            d: tuple[int, ...] = (r, g, b)
+            if alpha:
+                d += (a,)
+            data.extend(d)
+        return data
+
+
+class BLP1Decoder(_BLPBaseDecoder):
+    def _load(self) -> None:
+        self._compression, self._encoding, alpha = self.args
+
+        if self._compression == Format.JPEG:
+            self._decode_jpeg_stream()
+
+        elif self._compression == 1:
+            if self._encoding in (4, 5):
+                palette = self._read_palette()
+                data = self._read_bgra(palette, alpha)
+                self.set_as_raw(data)
+            else:
+                msg = f"Unsupported BLP encoding {repr(self._encoding)}"
+                raise BLPFormatError(msg)
+        else:
+            msg = f"Unsupported BLP compression {repr(self._encoding)}"
+            raise BLPFormatError(msg)
+
+    def _decode_jpeg_stream(self) -> None:
+        from .JpegImagePlugin import JpegImageFile
+
+        (jpeg_header_size,) = struct.unpack("<I", self._safe_read(4))
+        jpeg_header = self._safe_read(jpeg_header_size)
+        assert self.fd is not None
+        self._safe_read(self._offsets[0] - self.fd.tell())  # What IS this?
+        data = self._safe_read(self._lengths[0])
+        data = jpeg_header + data
+        image = JpegImageFile(BytesIO(data))
+        Image._decompression_bomb_check(image.size)
+        if image.mode == "CMYK":
+            args = image.tile[0].args
+            assert isinstance(args, tuple)
+            image.tile = [image.tile[0]._replace(args=(args[0], "CMYK"))]
+        self.set_as_raw(image.convert("RGB").tobytes(), "BGR")
+
+
+class BLP2Decoder(_BLPBaseDecoder):
+    def _load(self) -> None:
+        self._compression, self._encoding, alpha, self._alpha_encoding = self.args
+
+        palette = self._read_palette()
+
+        assert self.fd is not None
+        self.fd.seek(self._offsets[0])
+
+        if self._compression == 1:
+            # Uncompressed or DirectX compression
+
+            if self._encoding == Encoding.UNCOMPRESSED:
+                data = self._read_bgra(palette, alpha)
+
+            elif self._encoding == Encoding.DXT:
+                data = bytearray()
+                if self._alpha_encoding == AlphaEncoding.DXT1:
+                    linesize = (self.state.xsize + 3) // 4 * 8
+                    for yb in range((self.state.ysize + 3) // 4):
+                        for d in decode_dxt1(self._safe_read(linesize), alpha):
+                            data += d
+
+                elif self._alpha_encoding == AlphaEncoding.DXT3:
+                    linesize = (self.state.xsize + 3) // 4 * 16
+                    for yb in range((self.state.ysize + 3) // 4):
+                        for d in decode_dxt3(self._safe_read(linesize)):
+                            data += d
+
+                elif self._alpha_encoding == AlphaEncoding.DXT5:
+                    linesize = (self.state.xsize + 3) // 4 * 16
+                    for yb in range((self.state.ysize + 3) // 4):
+                        for d in decode_dxt5(self._safe_read(linesize)):
+                            data += d
+                else:
+                    msg = f"Unsupported alpha encoding {repr(self._alpha_encoding)}"
+                    raise BLPFormatError(msg)
+            else:
+                msg = f"Unknown BLP encoding {repr(self._encoding)}"
+                raise BLPFormatError(msg)
+
+        else:
+            msg = f"Unknown BLP compression {repr(self._compression)}"
+            raise BLPFormatError(msg)
+
+        self.set_as_raw(data)
+
+
+class BLPEncoder(ImageFile.PyEncoder):
+    _pushes_fd = True
+
+    def _write_palette(self) -> bytes:
+        data = b""
+        assert self.im is not None
+        palette = self.im.getpalette("RGBA", "RGBA")
+        for i in range(len(palette) // 4):
+            r, g, b, a = palette[i * 4 : (i + 1) * 4]
+            data += struct.pack("<4B", b, g, r, a)
+        while len(data) < 256 * 4:
+            data += b"\x00" * 4
+        return data
+
+    def encode(self, bufsize: int) -> tuple[int, int, bytes]:
+        palette_data = self._write_palette()
+
+        offset = 20 + 16 * 4 * 2 + len(palette_data)
+        data = struct.pack("<16I", offset, *((0,) * 15))
+
+        assert self.im is not None
+        w, h = self.im.size
+        data += struct.pack("<16I", w * h, *((0,) * 15))
+
+        data += palette_data
+
+        for y in range(h):
+            for x in range(w):
+                data += struct.pack("<B", self.im.getpixel((x, y)))
+
+        return len(data), 0, data
+
+
+def _save(im: Image.Image, fp: IO[bytes], filename: str | bytes) -> None:
+    if im.mode != "P":
+        msg = "Unsupported BLP image mode"
+        raise ValueError(msg)
+
+    magic = b"BLP1" if im.encoderinfo.get("blp_version") == "BLP1" else b"BLP2"
+    fp.write(magic)
+
+    assert im.palette is not None
+    fp.write(struct.pack("<i", 1))  # Uncompressed or DirectX compression
+
+    alpha_depth = 1 if im.palette.mode == "RGBA" else 0
+    if magic == b"BLP1":
+        fp.write(struct.pack("<L", alpha_depth))
+    else:
+        fp.write(struct.pack("<b", Encoding.UNCOMPRESSED))
+        fp.write(struct.pack("<b", alpha_depth))
+        fp.write(struct.pack("<b", 0))  # alpha encoding
+        fp.write(struct.pack("<b", 0))  # mips
+    fp.write(struct.pack("<II", *im.size))
+    if magic == b"BLP1":
+        fp.write(struct.pack("<i", 5))
+        fp.write(struct.pack("<i", 0))
+
+    ImageFile._save(im, fp, [ImageFile._Tile("BLP", (0, 0) + im.size, 0, im.mode)])
+
+
+Image.register_open(BlpImageFile.format, BlpImageFile, _accept)
+Image.register_extension(BlpImageFile.format, ".blp")
+Image.register_decoder("BLP1", BLP1Decoder)
+Image.register_decoder("BLP2", BLP2Decoder)
+
+Image.register_save(BlpImageFile.format, _save)
+Image.register_encoder("BLP", BLPEncoder)

venv/lib/python3.11/site-packages/PIL/BmpImagePlugin.py

@@ -0,0 +1,514 @@
+#
+# The Python Imaging Library.
+# $Id$
+#
+# BMP file handler
+#
+# Windows (and OS/2) native bitmap storage format.
+#
+# history:
+# 1995-09-01 fl   Created
+# 1996-04-30 fl   Added save
+# 1997-08-27 fl   Fixed save of 1-bit images
+# 1998-03-06 fl   Load P images as L where possible
+# 1998-07-03 fl   Load P images as 1 where possible
+# 1998-12-29 fl   Handle small palettes
+# 2002-12-30 fl   Fixed load of 1-bit palette images
+# 2003-04-21 fl   Fixed load of 1-bit monochrome images
+# 2003-04-23 fl   Added limited support for BI_BITFIELDS compression
+#
+# Copyright (c) 1997-2003 by Secret Labs AB
+# Copyright (c) 1995-2003 by Fredrik Lundh
+#
+# See the README file for information on usage and redistribution.
+#
+from __future__ import annotations
+
+import os
+from typing import IO, Any
+
+from . import Image, ImageFile, ImagePalette
+from ._binary import i16le as i16
+from ._binary import i32le as i32
+from ._binary import o8
+from ._binary import o16le as o16
+from ._binary import o32le as o32
+
+#
+# --------------------------------------------------------------------
+# Read BMP file
+
+BIT2MODE = {
+    # bits => mode, rawmode
+    1: ("P", "P;1"),
+    4: ("P", "P;4"),
+    8: ("P", "P"),
+    16: ("RGB", "BGR;15"),
+    24: ("RGB", "BGR"),
+    32: ("RGB", "BGRX"),
+}
+
+USE_RAW_ALPHA = False
+
+
+def _accept(prefix: bytes) -> bool:
+    return prefix.startswith(b"BM")
+
+
+def _dib_accept(prefix: bytes) -> bool:
+    return i32(prefix) in [12, 40, 52, 56, 64, 108, 124]
+
+
+# =============================================================================
+# Image plugin for the Windows BMP format.
+# =============================================================================
+class BmpImageFile(ImageFile.ImageFile):
+    """Image plugin for the Windows Bitmap format (BMP)"""
+
+    # ------------------------------------------------------------- Description
+    format_description = "Windows Bitmap"
+    format = "BMP"
+
+    # -------------------------------------------------- BMP Compression values
+    COMPRESSIONS = {"RAW": 0, "RLE8": 1, "RLE4": 2, "BITFIELDS": 3, "JPEG": 4, "PNG": 5}
+    for k, v in COMPRESSIONS.items():
+        vars()[k] = v
+
+    def _bitmap(self, header: int = 0, offset: int = 0) -> None:
+        """Read relevant info about the BMP"""
+        assert self.fp is not None
+        read, seek = self.fp.read, self.fp.seek
+        if header:
+            seek(header)
+        # read bmp header size @offset 14 (this is part of the header size)
+        file_info: dict[str, bool | int | tuple[int, ...]] = {
+            "header_size": i32(read(4)),
+            "direction": -1,
+        }
+
+        # -------------------- If requested, read header at a specific position
+        # read the rest of the bmp header, without its size
+        assert isinstance(file_info["header_size"], int)
+        header_data = ImageFile._safe_read(self.fp, file_info["header_size"] - 4)
+
+        # ------------------------------- Windows Bitmap v2, IBM OS/2 Bitmap v1
+        # ----- This format has different offsets because of width/height types
+        # 12: BITMAPCOREHEADER/OS21XBITMAPHEADER
+        if file_info["header_size"] == 12:
+            file_info["width"] = i16(header_data, 0)
+            file_info["height"] = i16(header_data, 2)
+            file_info["planes"] = i16(header_data, 4)
+            file_info["bits"] = i16(header_data, 6)
+            file_info["compression"] = self.COMPRESSIONS["RAW"]
+            file_info["palette_padding"] = 3
+
+        # --------------------------------------------- Windows Bitmap v3 to v5
+        #  40: BITMAPINFOHEADER
+        #  52: BITMAPV2HEADER
+        #  56: BITMAPV3HEADER
+        #  64: BITMAPCOREHEADER2/OS22XBITMAPHEADER
+        # 108: BITMAPV4HEADER
+        # 124: BITMAPV5HEADER
+        elif file_info["header_size"] in (40, 52, 56, 64, 108, 124):
+            file_info["y_flip"] = header_data[7] == 0xFF
+            file_info["direction"] = 1 if file_info["y_flip"] else -1
+            file_info["width"] = i32(header_data, 0)
+            file_info["height"] = (
+                i32(header_data, 4)
+                if not file_info["y_flip"]
+                else 2**32 - i32(header_data, 4)
+            )
+            file_info["planes"] = i16(header_data, 8)
+            file_info["bits"] = i16(header_data, 10)
+            file_info["compression"] = i32(header_data, 12)
+            # byte size of pixel data
+            file_info["data_size"] = i32(header_data, 16)
+            file_info["pixels_per_meter"] = (
+                i32(header_data, 20),
+                i32(header_data, 24),
+            )
+            file_info["colors"] = i32(header_data, 28)
+            file_info["palette_padding"] = 4
+            assert isinstance(file_info["pixels_per_meter"], tuple)
+            self.info["dpi"] = tuple(x / 39.3701 for x in file_info["pixels_per_meter"])
+            if file_info["compression"] == self.COMPRESSIONS["BITFIELDS"]:
+                masks = ["r_mask", "g_mask", "b_mask"]
+                if len(header_data) >= 48:
+                    if len(header_data) >= 52:
+                        masks.append("a_mask")
+                    else:
+                        file_info["a_mask"] = 0x0
+                    for idx, mask in enumerate(masks):
+                        file_info[mask] = i32(header_data, 36 + idx * 4)
+                else:
+                    # 40 byte headers only have the three components in the
+                    # bitfields masks, ref:
+                    # https://msdn.microsoft.com/en-us/library/windows/desktop/dd183376(v=vs.85).aspx
+                    # See also
+                    # https://github.com/python-pillow/Pillow/issues/1293
+                    # There is a 4th component in the RGBQuad, in the alpha
+                    # location, but it is listed as a reserved component,
+                    # and it is not generally an alpha channel
+                    file_info["a_mask"] = 0x0
+                    for mask in masks:
+                        file_info[mask] = i32(read(4))
+                assert isinstance(file_info["r_mask"], int)
+                assert isinstance(file_info["g_mask"], int)
+                assert isinstance(file_info["b_mask"], int)
+                assert isinstance(file_info["a_mask"], int)
+                file_info["rgb_mask"] = (
+                    file_info["r_mask"],
+                    file_info["g_mask"],
+                    file_info["b_mask"],
+                )
+                file_info["rgba_mask"] = (
+                    file_info["r_mask"],
+                    file_info["g_mask"],
+                    file_info["b_mask"],
+                    file_info["a_mask"],
+                )
+        else:
+            msg = f"Unsupported BMP header type ({file_info['header_size']})"
+            raise OSError(msg)
+
+        # ------------------ Special case : header is reported 40, which
+        # ---------------------- is shorter than real size for bpp >= 16
+        assert isinstance(file_info["width"], int)
+        assert isinstance(file_info["height"], int)
+        self._size = file_info["width"], file_info["height"]
+
+        # ------- If color count was not found in the header, compute from bits
+        assert isinstance(file_info["bits"], int)
+        if not file_info.get("colors", 0):
+            file_info["colors"] = 1 << file_info["bits"]
+        assert isinstance(file_info["palette_padding"], int)
+        assert isinstance(file_info["colors"], int)
+        if offset == 14 + file_info["header_size"] and file_info["bits"] <= 8:
+            offset += file_info["palette_padding"] * file_info["colors"]
+
+        # ---------------------- Check bit depth for unusual unsupported values
+        self._mode, raw_mode = BIT2MODE.get(file_info["bits"], ("", ""))
+        if not self.mode:
+            msg = f"Unsupported BMP pixel depth ({file_info['bits']})"
+            raise OSError(msg)
+
+        # ---------------- Process BMP with Bitfields compression (not palette)
+        decoder_name = "raw"
+        if file_info["compression"] == self.COMPRESSIONS["BITFIELDS"]:
+            SUPPORTED: dict[int, list[tuple[int, ...]]] = {
+                32: [
+                    (0xFF0000, 0xFF00, 0xFF, 0x0),
+                    (0xFF000000, 0xFF0000, 0xFF00, 0x0),
+                    (0xFF000000, 0xFF00, 0xFF, 0x0),
+                    (0xFF000000, 0xFF0000, 0xFF00, 0xFF),
+                    (0xFF, 0xFF00, 0xFF0000, 0xFF000000),
+                    (0xFF0000, 0xFF00, 0xFF, 0xFF000000),
+                    (0xFF000000, 0xFF00, 0xFF, 0xFF0000),
+                    (0x0, 0x0, 0x0, 0x0),
+                ],
+                24: [(0xFF0000, 0xFF00, 0xFF)],
+                16: [(0xF800, 0x7E0, 0x1F), (0x7C00, 0x3E0, 0x1F)],
+            }
+            MASK_MODES = {
+                (32, (0xFF0000, 0xFF00, 0xFF, 0x0)): "BGRX",
+                (32, (0xFF000000, 0xFF0000, 0xFF00, 0x0)): "XBGR",
+                (32, (0xFF000000, 0xFF00, 0xFF, 0x0)): "BGXR",
+                (32, (0xFF000000, 0xFF0000, 0xFF00, 0xFF)): "ABGR",
+                (32, (0xFF, 0xFF00, 0xFF0000, 0xFF000000)): "RGBA",
+                (32, (0xFF0000, 0xFF00, 0xFF, 0xFF000000)): "BGRA",
+                (32, (0xFF000000, 0xFF00, 0xFF, 0xFF0000)): "BGAR",
+                (32, (0x0, 0x0, 0x0, 0x0)): "BGRA",
+                (24, (0xFF0000, 0xFF00, 0xFF)): "BGR",
+                (16, (0xF800, 0x7E0, 0x1F)): "BGR;16",
+                (16, (0x7C00, 0x3E0, 0x1F)): "BGR;15",
+            }
+            if file_info["bits"] in SUPPORTED:
+                if (
+                    file_info["bits"] == 32
+                    and file_info["rgba_mask"] in SUPPORTED[file_info["bits"]]
+                ):
+                    assert isinstance(file_info["rgba_mask"], tuple)
+                    raw_mode = MASK_MODES[(file_info["bits"], file_info["rgba_mask"])]
+                    self._mode = "RGBA" if "A" in raw_mode else self.mode
+                elif (
+                    file_info["bits"] in (24, 16)
+                    and file_info["rgb_mask"] in SUPPORTED[file_info["bits"]]
+                ):
+                    assert isinstance(file_info["rgb_mask"], tuple)
+                    raw_mode = MASK_MODES[(file_info["bits"], file_info["rgb_mask"])]
+                else:
+                    msg = "Unsupported BMP bitfields layout"
+                    raise OSError(msg)
+            else:
+                msg = "Unsupported BMP bitfields layout"
+                raise OSError(msg)
+        elif file_info["compression"] == self.COMPRESSIONS["RAW"]:
+            if file_info["bits"] == 32 and (
+                header == 22 or USE_RAW_ALPHA  # 32-bit .cur offset
+            ):
+                raw_mode, self._mode = "BGRA", "RGBA"
+        elif file_info["compression"] in (
+            self.COMPRESSIONS["RLE8"],
+            self.COMPRESSIONS["RLE4"],
+        ):
+            decoder_name = "bmp_rle"
+        else:
+            msg = f"Unsupported BMP compression ({file_info['compression']})"
+            raise OSError(msg)
+
+        # --------------- Once the header is processed, process the palette/LUT
+        if self.mode == "P":  # Paletted for 1, 4 and 8 bit images
+            # ---------------------------------------------------- 1-bit images
+            if not (0 < file_info["colors"] <= 65536):
+                msg = f"Unsupported BMP Palette size ({file_info['colors']})"
+                raise OSError(msg)
+            else:
+                padding = file_info["palette_padding"]
+                palette = read(padding * file_info["colors"])
+                grayscale = True
+                indices = (
+                    (0, 255)
+                    if file_info["colors"] == 2
+                    else list(range(file_info["colors"]))
+                )
+
+                # ----------------- Check if grayscale and ignore palette if so
+                for ind, val in enumerate(indices):
+                    rgb = palette[ind * padding : ind * padding + 3]
+                    if rgb != o8(val) * 3:
+                        grayscale = False
+
+                # ------- If all colors are gray, white or black, ditch palette
+                if grayscale:
+                    self._mode = "1" if file_info["colors"] == 2 else "L"
+                    raw_mode = self.mode
+                else:
+                    self._mode = "P"
+                    self.palette = ImagePalette.raw(
+                        "BGRX" if padding == 4 else "BGR", palette
+                    )
+
+        # ---------------------------- Finally set the tile data for the plugin
+        self.info["compression"] = file_info["compression"]
+        args: list[Any] = [raw_mode]
+        if decoder_name == "bmp_rle":
+            args.append(file_info["compression"] == self.COMPRESSIONS["RLE4"])
+        else:
+            assert isinstance(file_info["width"], int)
+            args.append(((file_info["width"] * file_info["bits"] + 31) >> 3) & (~3))
+        args.append(file_info["direction"])
+        self.tile = [
+            ImageFile._Tile(
+                decoder_name,
+                (0, 0, file_info["width"], file_info["height"]),
+                offset or self.fp.tell(),
+                tuple(args),
+            )
+        ]
+
+    def _open(self) -> None:
+        """Open file, check magic number and read header"""
+        # read 14 bytes: magic number, filesize, reserved, header final offset
+        assert self.fp is not None
+        head_data = self.fp.read(14)
+        # choke if the file does not have the required magic bytes
+        if not _accept(head_data):
+            msg = "Not a BMP file"
+            raise SyntaxError(msg)
+        # read the start position of the BMP image data (u32)
+        offset = i32(head_data, 10)
+        # load bitmap information (offset=raster info)
+        self._bitmap(offset=offset)
+
+
+class BmpRleDecoder(ImageFile.PyDecoder):
+    _pulls_fd = True
+
+    def decode(self, buffer: bytes | Image.SupportsArrayInterface) -> tuple[int, int]:
+        assert self.fd is not None
+        rle4 = self.args[1]
+        data = bytearray()
+        x = 0
+        dest_length = self.state.xsize * self.state.ysize
+        while len(data) < dest_length:
+            pixels = self.fd.read(1)
+            byte = self.fd.read(1)
+            if not pixels or not byte:
+                break
+            num_pixels = pixels[0]
+            if num_pixels:
+                # encoded mode
+                if x + num_pixels > self.state.xsize:
+                    # Too much data for row
+                    num_pixels = max(0, self.state.xsize - x)
+                if rle4:
+                    first_pixel = o8(byte[0] >> 4)
+                    second_pixel = o8(byte[0] & 0x0F)
+                    for index in range(num_pixels):
+                        if index % 2 == 0:
+                            data += first_pixel
+                        else:
+                            data += second_pixel
+                else:
+                    data += byte * num_pixels
+                x += num_pixels
+            else:
+                if byte[0] == 0:
+                    # end of line
+                    while len(data) % self.state.xsize != 0:
+                        data += b"\x00"
+                    x = 0
+                elif byte[0] == 1:
+                    # end of bitmap
+                    break
+                elif byte[0] == 2:
+                    # delta
+                    bytes_read = self.fd.read(2)
+                    if len(bytes_read) < 2:
+                        break
+                    right, up = bytes_read
+                    data += b"\x00" * (right + up * self.state.xsize)
+                    x = len(data) % self.state.xsize
+                else:
+                    # absolute mode
+                    if rle4:
+                        # 2 pixels per byte
+                        byte_count = byte[0] // 2
+                        bytes_read = self.fd.read(byte_count)
+                        for byte_read in bytes_read:
+                            data += o8(byte_read >> 4)
+                            data += o8(byte_read & 0x0F)
+                    else:
+                        byte_count = byte[0]
+                        bytes_read = self.fd.read(byte_count)
+                        data += bytes_read
+                    if len(bytes_read) < byte_count:
+                        break
+                    x += byte[0]
+
+                    # align to 16-bit word boundary
+                    if self.fd.tell() % 2 != 0:
+                        self.fd.seek(1, os.SEEK_CUR)
+        rawmode = "L" if self.mode == "L" else "P"
+        self.set_as_raw(bytes(data), rawmode, (0, self.args[-1]))
+        return -1, 0
+
+
+# =============================================================================
+# Image plugin for the DIB format (BMP alias)
+# =============================================================================
+class DibImageFile(BmpImageFile):
+    format = "DIB"
+    format_description = "Windows Bitmap"
+
+    def _open(self) -> None:
+        self._bitmap()
+
+
+#
+# --------------------------------------------------------------------
+# Write BMP file
+
+
+SAVE = {
+    "1": ("1", 1, 2),
+    "L": ("L", 8, 256),
+    "P": ("P", 8, 256),
+    "RGB": ("BGR", 24, 0),
+    "RGBA": ("BGRA", 32, 0),
+}
+
+
+def _dib_save(im: Image.Image, fp: IO[bytes], filename: str | bytes) -> None:
+    _save(im, fp, filename, False)
+
+
+def _save(
+    im: Image.Image, fp: IO[bytes], filename: str | bytes, bitmap_header: bool = True
+) -> None:
+    try:
+        rawmode, bits, colors = SAVE[im.mode]
+    except KeyError as e:
+        msg = f"cannot write mode {im.mode} as BMP"
+        raise OSError(msg) from e
+
+    info = im.encoderinfo
+
+    dpi = info.get("dpi", (96, 96))
+
+    # 1 meter == 39.3701 inches
+    ppm = tuple(int(x * 39.3701 + 0.5) for x in dpi)
+
+    stride = ((im.size[0] * bits + 7) // 8 + 3) & (~3)
+    header = 40  # or 64 for OS/2 version 2
+    image = stride * im.size[1]
+
+    if im.mode == "1":
+        palette = b"".join(o8(i) * 3 + b"\x00" for i in (0, 255))
+    elif im.mode == "L":
+        palette = b"".join(o8(i) * 3 + b"\x00" for i in range(256))
+    elif im.mode == "P":
+        palette = im.im.getpalette("RGB", "BGRX")
+        colors = len(palette) // 4
+    else:
+        palette = None
+
+    # bitmap header
+    if bitmap_header:
+        offset = 14 + header + colors * 4
+        file_size = offset + image
+        if file_size > 2**32 - 1:
+            msg = "File size is too large for the BMP format"
+            raise ValueError(msg)
+        fp.write(
+            b"BM"  # file type (magic)
+            + o32(file_size)  # file size
+            + o32(0)  # reserved
+            + o32(offset)  # image data offset
+        )
+
+    # bitmap info header
+    fp.write(
+        o32(header)  # info header size
+        + o32(im.size[0])  # width
+        + o32(im.size[1])  # height
+        + o16(1)  # planes
+        + o16(bits)  # depth
+        + o32(0)  # compression (0=uncompressed)
+        + o32(image)  # size of bitmap
+        + o32(ppm[0])  # resolution
+        + o32(ppm[1])  # resolution
+        + o32(colors)  # colors used
+        + o32(colors)  # colors important
+    )
+
+    fp.write(b"\0" * (header - 40))  # padding (for OS/2 format)
+
+    if palette:
+        fp.write(palette)
+
+    ImageFile._save(
+        im, fp, [ImageFile._Tile("raw", (0, 0) + im.size, 0, (rawmode, stride, -1))]
+    )
+
+
+#
+# --------------------------------------------------------------------
+# Registry
+
+
+Image.register_open(BmpImageFile.format, BmpImageFile, _accept)
+Image.register_save(BmpImageFile.format, _save)
+
+Image.register_extension(BmpImageFile.format, ".bmp")
+
+Image.register_mime(BmpImageFile.format, "image/bmp")
+
+Image.register_decoder("bmp_rle", BmpRleDecoder)
+
+Image.register_open(DibImageFile.format, DibImageFile, _dib_accept)
+Image.register_save(DibImageFile.format, _dib_save)
+
+Image.register_extension(DibImageFile.format, ".dib")
+
+Image.register_mime(DibImageFile.format, "image/bmp")