chore: overhaul infrastructure and integrate @mintel packages

- Restructure to pnpm monorepo (site moved to apps/web)
- Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config
- Implement Docker service architecture (Varnish, Directus, Gatekeeper)
- Setup environment-aware Gitea Actions deployment

apps/web/src/components/ContactForm.tsx

@@ -0,0 +1,589 @@
+'use client';
+
+import * as React from 'react';
+import { useState, useMemo, useEffect, useRef } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronRight, ChevronLeft, Send, Check, Sparkles, Info, ArrowRight } from 'lucide-react';
+import * as QRCode from 'qrcode';
+import * as confetti from 'canvas-confetti';
+
+import { FormState, Step } from './ContactForm/types';
+import { PRICING, initialState } from './ContactForm/constants';
+import { calculateTotals } from '../logic/pricing/calculator';
+import { PriceCalculation } from './ContactForm/components/PriceCalculation';
+import { ShareModal } from './ShareModal';
+
+// Steps
+import { TypeStep } from './ContactForm/steps/TypeStep';
+import { CompanyStep } from './ContactForm/steps/CompanyStep';
+import { PresenceStep } from './ContactForm/steps/PresenceStep';
+import { BaseStep } from './ContactForm/steps/BaseStep';
+import { FeaturesStep } from './ContactForm/steps/FeaturesStep';
+import { DesignStep } from './ContactForm/steps/DesignStep';
+import { AssetsStep } from './ContactForm/steps/AssetsStep';
+import { FunctionsStep } from './ContactForm/steps/FunctionsStep';
+import { ApiStep } from './ContactForm/steps/ApiStep';
+import { ContentStep } from './ContactForm/steps/ContentStep';
+import { LanguageStep } from './ContactForm/steps/LanguageStep';
+import { TimelineStep } from './ContactForm/steps/TimelineStep';
+import { ContactStep } from './ContactForm/steps/ContactStep';
+import { WebAppStep } from './ContactForm/steps/WebAppStep';
+
+import {
+  ConceptTarget,
+  ConceptWebsite,
+  ConceptPrototyping,
+  ConceptCommunication,
+  ConceptSystem,
+  ConceptCode,
+  ConceptAutomation,
+  ConceptPrice,
+  HeroArchitecture
+} from './Landing/ConceptIllustrations';
+
+export interface ContactFormProps {
+  initialStepIndex?: number;
+  initialState?: FormState;
+  onStepChange?: (index: number) => void;
+  onStateChange?: (state: FormState) => void;
+}
+
+export function ContactForm({ initialStepIndex, initialState: propState, onStepChange, onStateChange }: ContactFormProps = {}) {
+  // Use a safe version of useRouter/useSearchParams that doesn't crash if not in a router context
+  let router: any = null;
+  let searchParams: any = null;
+  try { router = useRouter(); } catch (e) { /* ignore */ }
+  try { searchParams = useSearchParams(); } catch (e) { /* ignore */ }
+
+  const [internalStepIndex, setInternalStepIndex] = useState(0);
+  const [internalState, setInternalState] = useState<FormState>(initialState);
+
+  // Sync with props if provided
+  const stepIndex = initialStepIndex !== undefined ? initialStepIndex : internalStepIndex;
+  const state = propState !== undefined ? propState : internalState;
+
+  const setStepIndex = (val: number) => {
+    setInternalStepIndex(val);
+    onStepChange?.(val);
+  };
+
+  const setState = (val: any) => {
+    if (typeof val === 'function') {
+      setInternalState(prev => {
+        const next = val(prev);
+        onStateChange?.(next);
+        return next;
+      });
+    } else {
+      setInternalState(val);
+      onStateChange?.(val);
+    }
+  };
+
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [qrCodeData, setQrCodeData] = useState<string>('');
+  const [isShareModalOpen, setIsShareModalOpen] = useState(false);
+  const [hoveredStep, setHoveredStep] = useState<number | null>(null);
+  const [isSticky, setIsSticky] = useState(false);
+  const formContainerRef = useRef<HTMLDivElement>(null);
+
+  const isRemotion = typeof window !== 'undefined' && (window as any).isRemotion;
+  const [isClient, setIsClient] = useState(isRemotion);
+
+  useEffect(() => {
+    if (isRemotion) return;
+    const handleScroll = () => {
+      if (formContainerRef.current) {
+        const rect = formContainerRef.current.getBoundingClientRect();
+        setIsSticky(rect.top <= 80);
+      }
+    };
+    window.addEventListener('scroll', handleScroll);
+    handleScroll();
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [isRemotion]);
+
+  useEffect(() => {
+    if (!isRemotion) setIsClient(true);
+  }, [isRemotion]);
+
+  // URL Binding
+  useEffect(() => {
+    if (!searchParams) return;
+    const step = searchParams.get('step');
+    if (step) setStepIndex(parseInt(step));
+
+    const config = searchParams.get('config');
+    if (config) {
+      try {
+        const decoded = JSON.parse(decodeURIComponent(escape(atob(config))));
+        setInternalState((s: FormState) => ({ ...s, ...decoded }));
+      } catch (e) {
+        console.error("Failed to decode config", e);
+      }
+    }
+  }, [searchParams]);
+
+  const currentUrl = useMemo(() => {
+    if (!isClient) return '';
+    const params = new URLSearchParams();
+    params.set('step', stepIndex.toString());
+
+    const configData = {
+      projectType: state.projectType,
+      companyName: state.companyName,
+      employeeCount: state.employeeCount,
+      existingWebsite: state.existingWebsite,
+      socialMedia: state.socialMedia,
+      socialMediaUrls: state.socialMediaUrls,
+      existingDomain: state.existingDomain,
+      wishedDomain: state.wishedDomain,
+      websiteTopic: state.websiteTopic,
+      selectedPages: state.selectedPages,
+      otherPages: state.otherPages,
+      otherPagesCount: state.otherPagesCount,
+      features: state.features,
+      otherFeatures: state.otherFeatures,
+      otherFeaturesCount: state.otherFeaturesCount,
+      functions: state.functions,
+      otherFunctions: state.otherFunctions,
+      otherFunctionsCount: state.otherFunctionsCount,
+      apiSystems: state.apiSystems,
+      otherTech: state.otherTech,
+      otherTechCount: state.otherTechCount,
+      assets: state.assets,
+      otherAssets: state.otherAssets,
+      otherAssetsCount: state.otherAssetsCount,
+      cmsSetup: state.cmsSetup,
+      languagesList: state.languagesList,
+      deadline: state.deadline,
+      designVibe: state.designVibe,
+      colorScheme: state.colorScheme,
+      targetAudience: state.targetAudience,
+      userRoles: state.userRoles,
+      dataSensitivity: state.dataSensitivity,
+      platformType: state.platformType,
+      dontKnows: state.dontKnows,
+      visualStaging: state.visualStaging,
+      complexInteractions: state.complexInteractions
+    };
+
+    const stateString = btoa(unescape(encodeURIComponent(JSON.stringify(configData))));
+    params.set('config', stateString);
+
+    return `${window.location.origin}${window.location.pathname}?${params.toString()}`;
+  }, [state, stepIndex, isClient]);
+
+  useEffect(() => {
+    if (isRemotion) return;
+    if (currentUrl && router) {
+      router.replace(currentUrl, { scroll: false });
+      QRCode.toDataURL(currentUrl, { margin: 1, width: 200 }).then(setQrCodeData);
+    }
+  }, [currentUrl, router, isRemotion]);
+
+  const totals = useMemo(() => {
+    return calculateTotals(state, PRICING);
+  }, [state]);
+
+  const { totalPrice, monthlyPrice, totalPagesCount } = totals;
+
+  const updateState = (updates: Partial<FormState>) => {
+    setState((s: FormState) => ({ ...s, ...updates }));
+  };
+
+  const toggleItem = (list: string[], id: string) => {
+    return list.includes(id) ? list.filter(i => i !== id) : [...list, id];
+  };
+
+  const scrollToTop = () => {
+    if (isRemotion) return;
+    if (formContainerRef.current) {
+      const offset = 120;
+      const bodyRect = document.body.getBoundingClientRect().top;
+      const elementRect = formContainerRef.current.getBoundingClientRect().top;
+      const elementPosition = elementRect - bodyRect;
+      const offsetPosition = elementPosition - offset;
+
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  const nextStep = () => {
+    if (stepIndex < activeSteps.length - 1) {
+      setStepIndex(stepIndex + 1);
+      if (!isRemotion) setTimeout(scrollToTop, 50);
+    }
+  };
+
+  const prevStep = () => {
+    if (stepIndex > 0) {
+      setStepIndex(stepIndex - 1);
+      if (!isRemotion) setTimeout(scrollToTop, 50);
+    }
+  };
+
+  const steps: Step[] = [
+    { id: 'type', title: 'Das Ziel', description: 'Was möchten Sie realisieren?', illustration: <ConceptTarget className="w-full h-full" />, chapter: 'strategy' },
+    { id: 'company', title: 'Unternehmen', description: 'Wer sind Sie?', illustration: <ConceptCommunication className="w-full h-full" />, chapter: 'strategy' },
+    { id: 'presence', title: 'Präsenz', description: 'Bestehende Kanäle von {company}.', illustration: <ConceptSystem className="w-full h-full" />, chapter: 'strategy' },
+    { id: 'features', title: 'Die Systeme', description: 'Welche inhaltlichen Bereiche planen wir für {company}?', illustration: <ConceptPrototyping className="w-full h-full" />, chapter: 'scope' },
+    { id: 'base', title: 'Die Seiten', description: 'Welche Seiten benötigen wir?', illustration: <ConceptWebsite className="w-full h-full" />, chapter: 'scope' },
+    { id: 'design', title: 'Design-Wünsche', description: 'Wie soll die neue Präsenz von {company} wirken?', illustration: <ConceptCommunication className="w-full h-full" />, chapter: 'creative' },
+    { id: 'assets', title: 'Ihre Assets', description: 'Was bringen Sie bereits mit?', illustration: <ConceptSystem className="w-full h-full" />, chapter: 'creative' },
+    { id: 'functions', title: 'Die Logik', description: 'Welche Funktionen werden benötigt?', illustration: <ConceptCode className="w-full h-full" />, chapter: 'tech' },
+    { id: 'api', title: 'Schnittstellen', description: 'Datenaustausch mit Drittsystemen.', illustration: <ConceptAutomation className="w-full h-full" />, chapter: 'tech' },
+    { id: 'content', title: 'Die Pflege', description: 'Wer kümmert sich um die Daten?', illustration: <ConceptPrice className="w-full h-full" />, chapter: 'tech' },
+    { id: 'language', title: 'Sprachen', description: 'Globale Reichweite planen.', illustration: <ConceptCommunication className="w-full h-full" />, chapter: 'tech' },
+    { id: 'timeline', title: 'Zeitplan', description: 'Wann soll das Projekt live gehen?', illustration: <HeroArchitecture className="w-full h-full" />, chapter: 'final' },
+    { id: 'contact', title: 'Abschluss', description: 'Erzählen Sie mir mehr über Ihr Vorhaben.', illustration: <ConceptCommunication className="w-full h-full" />, chapter: 'final' },
+    { id: 'webapp', title: 'Web App Details', description: 'Spezifische Anforderungen für {company}.', illustration: <ConceptSystem className="w-full h-full" />, chapter: 'scope' },
+  ];
+
+  const chapters = [
+    { id: 'strategy', title: 'Strategie' },
+    { id: 'scope', title: 'Umfang' },
+    { id: 'creative', title: 'Design' },
+    { id: 'tech', title: 'Technik' },
+    { id: 'final', title: 'Start' },
+  ];
+
+  const activeSteps = useMemo(() => {
+    if (state.projectType === 'website') {
+      return steps.filter(s => s.id !== 'webapp');
+    }
+    // Web App flow
+    return [
+      steps.find(s => s.id === 'type')!,
+      steps.find(s => s.id === 'company')!,
+      steps.find(s => s.id === 'presence')!,
+      steps.find(s => s.id === 'webapp')!,
+      { ...steps.find(s => s.id === 'functions')!, title: 'Funktionen', description: 'Kern-Features Ihrer Anwendung.' },
+      { ...steps.find(s => s.id === 'api')!, title: 'Integrationen', description: 'Anbindung an bestehende Systeme.' },
+      steps.find(s => s.id === 'timeline')!,
+      steps.find(s => s.id === 'contact')!,
+    ];
+  }, [state.projectType, state.companyName]);
+
+  useEffect(() => {
+    if (stepIndex >= activeSteps.length) setStepIndex(activeSteps.length - 1);
+  }, [activeSteps, stepIndex]);
+
+  const renderStepContent = () => {
+    const currentStep = activeSteps[stepIndex];
+    switch (currentStep.id) {
+      case 'type':
+        return <TypeStep state={state} updateState={updateState} />;
+      case 'company':
+        return <CompanyStep state={state} updateState={updateState} />;
+      case 'presence':
+        return <PresenceStep state={state} updateState={updateState} toggleItem={toggleItem} />;
+      case 'base':
+        return <BaseStep state={state} updateState={updateState} toggleItem={toggleItem} />;
+      case 'features':
+        return <FeaturesStep state={state} updateState={updateState} toggleItem={toggleItem} />;
+      case 'design':
+        return <DesignStep state={state} updateState={updateState} />;
+      case 'assets':
+        return <AssetsStep state={state} updateState={updateState} toggleItem={toggleItem} />;
+      case 'functions':
+        return <FunctionsStep state={state} updateState={updateState} toggleItem={toggleItem} />;
+      case 'api':
+        return <ApiStep state={state} updateState={updateState} toggleItem={toggleItem} />;
+      case 'content':
+        return <ContentStep state={state} updateState={updateState} />;
+      case 'language':
+        return <LanguageStep state={state} updateState={updateState} />;
+      case 'timeline':
+        return <TimelineStep state={state} updateState={updateState} />;
+      case 'contact':
+        return <ContactStep state={state} updateState={updateState} />;
+      case 'webapp':
+        return <WebAppStep state={state} updateState={updateState} />;
+      default: return null;
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (stepIndex === activeSteps.length - 1) {
+      // Handle submission
+      const mailBody = `
+        Name: ${state.name}
+        Email: ${state.email}
+        Rolle: ${state.role}
+        Projekt: ${state.projectType}
+        Konfiguration: ${currentUrl}
+        
+        Nachricht:
+        ${state.message}
+      `;
+      window.location.href = `mailto:marc@mintel.me?subject=Projektanfrage: ${state.name}&body=${encodeURIComponent(mailBody)}`;
+
+      // Celebration!
+      const duration = 5 * 1000;
+      const animationEnd = Date.now() + duration;
+      const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+
+      const randomInRange = (min: number, max: number) => Math.random() * (max - min) + min;
+
+      const interval: any = !isRemotion ? setInterval(function () {
+        const timeLeft = animationEnd - Date.now();
+
+        if (timeLeft <= 0) {
+          return clearInterval(interval);
+        }
+
+        const particleCount = 50 * (timeLeft / duration);
+        (confetti as any)({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
+        (confetti as any)({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
+      }, 250) : null;
+
+      setIsSubmitted(true);
+    } else {
+      nextStep();
+    }
+  };
+
+  const handleShare = () => {
+    setIsShareModalOpen(true);
+  };
+
+  if (isSubmitted) {
+    return (
+      <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="p-12 md:p-24 bg-slate-900 text-white rounded-[4rem] text-center space-y-12">
+        <div className="w-24 h-24 bg-white text-slate-900 rounded-full flex items-center justify-center mx-auto"><Check size={48} strokeWidth={3} /></div>
+        <div className="space-y-6"><h2 className="text-5xl font-bold tracking-tight">Anfrage gesendet!</h2><p className="text-slate-400 text-2xl max-w-2xl mx-auto leading-relaxed">Vielen Dank, {state.name.split(' ')[0]}. Ich melde mich innerhalb von 24 Stunden bei Ihnen.</p></div>
+        <button type="button" onClick={() => { setIsSubmitted(false); setStepIndex(0); setState(initialState); }} className="text-slate-400 hover:text-white transition-colors underline underline-offset-8 text-lg focus:outline-none overflow-hidden relative rounded-full">Neue Anfrage starten</button>
+      </motion.div>
+    );
+  }
+
+  return (
+    <div ref={formContainerRef} className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-start">
+      <div className="lg:col-span-8 space-y-12">
+        <div
+          className={`sticky top-[80px] z-40 transition-all duration-500 ${isSticky ? 'bg-white/80 backdrop-blur-md py-4 -mx-12 px-12 -mt-px border-b border-slate-50' : 'bg-transparent py-6 border-none'}`}
+        >
+          <div className={`flex flex-col ${isSticky ? 'gap-4' : 'gap-8'}`}>
+            <div className="flex flex-row items-center justify-between gap-8">
+              <div className="flex items-center gap-6">
+                <motion.div
+                  animate={{
+                    scale: isSticky ? 0.7 : 1,
+                    width: isSticky ? 80 : 128,
+                    height: isSticky ? 80 : 128,
+                    borderRadius: isSticky ? '1.75rem' : '2.5rem'
+                  }}
+                  className="shrink-0 bg-slate-50 flex items-center justify-center relative shadow-inner z-10"
+                >
+                  <div className="p-3 w-full h-full flex items-center justify-center overflow-hidden rounded-[inherit]">
+                    {activeSteps[stepIndex].illustration}
+                  </div>
+                  <AnimatePresence>
+                    {!isSticky && (
+                      <motion.div
+                        initial={{ scale: 0, opacity: 0 }}
+                        animate={{ scale: 1, opacity: 1 }}
+                        exit={{ scale: 0, opacity: 0 }}
+                        transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+                        className="absolute -bottom-2 -right-2 w-10 h-10 bg-slate-900 text-white rounded-full flex items-center justify-center font-bold text-sm border-4 border-white shadow-xl z-20"
+                      >
+                        {stepIndex + 1}
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </motion.div>
+                <div className="space-y-1 min-w-0">
+                  <motion.div
+                    animate={{ opacity: isSticky ? 0 : 1, height: isSticky ? 0 : 'auto', marginBottom: isSticky ? 0 : 4 }}
+                    className="flex items-center gap-3 overflow-hidden"
+                  >
+                    <span className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 flex items-center gap-2">
+                      <Sparkles size={12} className="text-slate-300" />
+                      Schritt {stepIndex + 1} / {activeSteps.length}
+                    </span>
+                  </motion.div>
+                  <motion.h3
+                    animate={{
+                      fontSize: isSticky ? '1.5rem' : '2.25rem',
+                      lineHeight: isSticky ? '2rem' : '2.5rem',
+                      color: isSticky ? '#0f172a' : '#0f172a'
+                    }}
+                    className="font-black tracking-tight truncate"
+                  >
+                    {activeSteps[stepIndex].title.replace('{company}', state.companyName || 'Ihr Unternehmen')}
+                  </motion.h3>
+                  <motion.p
+                    animate={{
+                      fontSize: isSticky ? '0.875rem' : '1.125rem',
+                      lineHeight: isSticky ? '1.25rem' : '1.75rem'
+                    }}
+                    className="text-slate-500 leading-relaxed max-w-2xl truncate overflow-hidden"
+                  >
+                    {activeSteps[stepIndex].description.replace('{company}', state.companyName || 'Ihr Unternehmen')}
+                  </motion.p>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-3 shrink-0">
+                {stepIndex > 0 ? (
+                  <motion.button
+                    whileHover={{ x: -3, backgroundColor: '#f8fafc' }}
+                    whileTap={{ scale: 0.95 }}
+                    type="button"
+                    onClick={prevStep}
+                    className={`flex items-center justify-center gap-2 rounded-full border-2 border-slate-100 transition-all font-bold focus:outline-none whitespace-nowrap ${isSticky ? 'px-5 py-2 text-sm' : 'px-8 py-4 text-lg'}`}
+                  >
+                    <ChevronLeft size={isSticky ? 16 : 20} /> Zurück
+                  </motion.button>
+                ) : <div className={isSticky ? 'w-0' : 'w-32'} />}
+
+                {stepIndex < activeSteps.length - 1 ? (
+                  <motion.button
+                    id="focus-target-next"
+                    whileHover={{ x: 3, scale: 1.02 }}
+                    whileTap={{ scale: 0.95 }}
+                    type="button"
+                    onClick={nextStep}
+                    className={`flex items-center justify-center gap-2 rounded-full bg-slate-900 text-white hover:bg-slate-800 transition-all font-bold shadow-xl shadow-slate-200 focus:outline-none group whitespace-nowrap ${isSticky ? 'px-6 py-2 text-sm' : 'px-10 py-4 text-lg'}`}
+                  >
+                    Weiter <ChevronRight size={isSticky ? 16 : 20} className="transition-transform group-hover:translate-x-1" />
+                  </motion.button>
+                ) : (
+                  <motion.button
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                    type="submit"
+                    form="contact-form"
+                    disabled={!state.email || !state.name}
+                    className={`flex items-center justify-center gap-2 rounded-full bg-slate-900 text-white hover:bg-slate-800 transition-all font-bold disabled:opacity-50 disabled:cursor-not-allowed shadow-xl shadow-slate-200 focus:outline-none group whitespace-nowrap ${isSticky ? 'px-6 py-2 text-sm' : 'px-10 py-4 text-lg'}`}
+                  >
+                    Senden <Send size={isSticky ? 16 : 20} className="transition-transform group-hover:translate-x-1 group-hover:-translate-y-1" />
+                  </motion.button>
+                )}
+              </div>
+            </div>
+
+            <div className="relative">
+              <div className={`flex gap-1.5 transition-all duration-500 ${isSticky ? 'h-1' : 'h-2.5'}`}>
+                {activeSteps.map((step, i) => (
+                  <div
+                    key={i}
+                    className="flex-1 h-full flex items-center relative"
+                    onMouseEnter={() => setHoveredStep(i)}
+                    onMouseLeave={() => setHoveredStep(null)}
+                  >
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setStepIndex(i);
+                        setTimeout(scrollToTop, 50);
+                      }}
+                      className={`w-full h-full rounded-full transition-all duration-700 ${i === stepIndex ? 'bg-slate-900 scale-y-150 shadow-lg shadow-slate-200' :
+                        i < stepIndex ? 'bg-slate-400' : 'bg-slate-100'
+                        } cursor-pointer focus:outline-none p-0 border-none relative group`}
+                    >
+                      <AnimatePresence>
+                        {hoveredStep === i && (
+                          <motion.div
+                            initial={{ opacity: 0, y: 5, x: "-50%", scale: 0.9 }}
+                            animate={{ opacity: 1, y: isSticky ? -35 : -40, x: "-50%", scale: 1 }}
+                            exit={{ opacity: 0, y: 5, x: "-50%", scale: 0.9 }}
+                            className="absolute left-1/2 px-3 py-1.5 bg-white text-slate-900 text-[10px] font-black uppercase tracking-[0.15em] rounded-md whitespace-nowrap pointer-events-none z-50 shadow-[0_10px_30px_rgba(0,0,0,0.1)] border border-slate-100"
+                          >
+                            {step.title.replace('{company}', state.companyName || 'Unternehmen')}
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </button>
+                  </div>
+                ))}
+              </div>
+
+              {!isSticky && (
+                <div className="flex justify-between mt-4 px-1">
+                  {chapters.map((chapter, idx) => {
+                    const chapterSteps = activeSteps.filter(s => s.chapter === chapter.id);
+                    if (chapterSteps.length === 0) return null;
+
+                    const firstStepIdx = activeSteps.indexOf(chapterSteps[0]);
+                    const lastStepIdx = activeSteps.indexOf(chapterSteps[chapterSteps.length - 1]);
+                    const isActive = stepIndex >= firstStepIdx && stepIndex <= lastStepIdx;
+
+                    return (
+                      <div
+                        key={chapter.id}
+                        className={`text-[10px] font-bold uppercase tracking-[0.2em] transition-colors duration-500 ${isActive ? 'text-slate-900' : 'text-slate-300'
+                          }`}
+                      >
+                        {chapter.title}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <form id="contact-form" onSubmit={handleSubmit} className="min-h-[450px] relative pt-12">
+
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={activeSteps[stepIndex].id}
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -20 }}
+              transition={{ duration: 0.5, ease: [0.23, 1, 0.32, 1] }}
+            >
+              {renderStepContent()}
+            </motion.div>
+          </AnimatePresence>
+
+          {/* Contextual Help / Why this matters */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.8 }}
+            className="mt-24 p-10 bg-slate-50 rounded-[3rem] border border-slate-100 flex gap-8 items-start relative overflow-hidden"
+          >
+            <div className="absolute top-0 right-0 p-12 opacity-[0.03] pointer-events-none">
+              <Sparkles size={160} />
+            </div>
+            <div className="w-14 h-14 shrink-0 bg-white rounded-2xl flex items-center justify-center text-slate-900 shadow-sm relative z-10">
+              <Info size={28} />
+            </div>
+            <div className="space-y-2 relative z-10">
+              <h4 className="text-xl font-bold text-slate-900">Warum das wichtig ist</h4>
+              <p className="text-lg text-slate-500 leading-relaxed max-w-2xl">
+                {stepIndex === 0 && "Die Wahl zwischen Website und Web App bestimmt die technologische Basis. Web Apps nutzen oft Frameworks wie React oder Next.js für hochgradig interaktive Prozesse, während Websites auf Content-Präsentation optimiert sind."}
+                {stepIndex === 1 && "Ihr Unternehmen und dessen Größe helfen mir, die Skalierbarkeit und die notwendige Infrastruktur von Beginn an richtig zu dimensionieren."}
+                {stepIndex === 2 && "Bestehende Kanäle geben Aufschluss über Ihre aktuelle Markenidentität. Wir können diese entweder konsequent weiterführen oder einen bewussten Neuanfang wagen."}
+                {stepIndex > 2 && "Jede Auswahl beeinflusst die Komplexität und damit auch die Entwicklungszeit. Mein Ziel ist es, für Sie das beste Preis-Leistungs-Verhältnis zu finden."}
+              </p>
+            </div>
+          </motion.div>
+        </form>
+      </div>
+      <PriceCalculation
+        state={state}
+        totals={totals}
+        isClient={isClient}
+        qrCodeData={qrCodeData}
+        onShare={handleShare}
+      />
+
+      <ShareModal
+        isOpen={isShareModalOpen}
+        onClose={() => setIsShareModalOpen(false)}
+        url={currentUrl}
+        qrCodeData={qrCodeData}
+      />
+    </div>
+  );
+}