feat(pitch-deck): business model redesign + umlauts fix + tab animations

Business Model slide completely rewritten:
- Left: 3 pricing tiers (Starter/Professional/Enterprise)
- Right: Unit Economics (ACV, Gross Margin, NRR, Payback)
- Bottom-up sizing: 1,200 customers × 8,400 ACV = 10M ARR
- Land & Expand arrow visualization

Umlauts: 75+ ae/oe/ue → ä/ö/ü replacements across 10 slide files

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pitch-deck/components/slides/BusinessModelSlide.tsx

@@ -5,8 +5,7 @@ import { t } from '@/lib/i18n'
 import GradientText from '../ui/GradientText'
 import FadeInView from '../ui/FadeInView'
 import GlassCard from '../ui/GlassCard'
-import AnimatedCounter from '../ui/AnimatedCounter'
-import { Repeat, TrendingUp, PiggyBank, ShieldCheck, Clock, Users } from 'lucide-react'
+import { ArrowRight, TrendingUp, Target, Repeat, DollarSign, Users, BarChart3 } from 'lucide-react'
 
 interface BusinessModelSlideProps {
   lang: Language
@@ -17,89 +16,148 @@ export default function BusinessModelSlide({ lang }: BusinessModelSlideProps) {
   const i = t(lang)
   const de = lang === 'de'
 
+  const tiers = [
+    {
+      name: 'Starter',
+      target: de ? 'Startups & Kleinstunternehmen' : 'Startups & Micro',
+      employees: '< 10',
+      price: de ? '3.600' : '3,600',
+      period: de ? 'EUR/Jahr' : 'EUR/yr',
+      features: de
+        ? ['Code Security (SAST/DAST)', 'Compliance-Dokumente', 'Consent Management', '1 Anwendung']
+        : ['Code Security (SAST/DAST)', 'Compliance documents', 'Consent management', '1 application'],
+      highlight: false,
+    },
+    {
+      name: 'Professional',
+      target: de ? 'KMU & Mittelstand' : 'SME & Mid-Market',
+      employees: '10 – 250',
+      price: de ? '15.000 – 40.000' : '15,000 – 40,000',
+      period: de ? 'EUR/Jahr' : 'EUR/yr',
+      features: de
+        ? ['Alle Module inkl. CE-Bewertung', 'Audit Manager End-to-End', 'AI Act Compliance (UCCA)', 'Unbegrenzte Anwendungen']
+        : ['All modules incl. CE assessment', 'Audit Manager end-to-end', 'AI Act Compliance (UCCA)', 'Unlimited applications'],
+      highlight: true,
+    },
+    {
+      name: 'Enterprise',
+      target: de ? 'Konzerne & OEMs' : 'Enterprises & OEMs',
+      employees: '250+',
+      price: de ? 'ab 50.000' : 'from 50,000',
+      period: de ? 'EUR/Jahr' : 'EUR/yr',
+      features: de
+        ? ['Dedizierte Instanz', 'Custom Integrationen (SAP, MES)', 'SLA & Priority Support', 'Tender Matching & RFQ-Prüfung']
+        : ['Dedicated instance', 'Custom integrations (SAP, MES)', 'SLA & priority support', 'Tender matching & RFQ verification'],
+      highlight: false,
+    },
+  ]
+
+  const metrics = [
+    { icon: DollarSign, color: 'text-indigo-400', label: 'ACV', value: de ? '15 – 50k EUR' : '15 – 50k EUR', sub: de ? 'Durchschnittlicher Vertragswert' : 'Average Contract Value' },
+    { icon: TrendingUp, color: 'text-emerald-400', label: 'Gross Margin', value: '> 80%', sub: de ? 'Cloud-native, keine Hardware-Kosten' : 'Cloud-native, no hardware costs' },
+    { icon: Repeat, color: 'text-purple-400', label: 'NRR Ziel', value: '> 120%', sub: de ? 'Upsell: mehr Module, mehr Nutzer' : 'Upsell: more modules, more users' },
+    { icon: Target, color: 'text-amber-400', label: 'Payback', value: de ? '< 3 Monate' : '< 3 Months', sub: de ? 'Ersparnis übersteigt Kosten ab Q1' : 'Savings exceed costs from Q1' },
+  ]
+
   return (
-    <div>
-      <FadeInView className="text-center mb-10">
+    <div className="max-w-6xl mx-auto">
+      <FadeInView className="text-center mb-6">
         <h2 className="text-4xl md:text-5xl font-bold mb-3">
           <GradientText>{i.businessModel.title}</GradientText>
         </h2>
-        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.businessModel.subtitle}</p>
+        <p className="text-lg text-white/50 max-w-2xl mx-auto">
+          {de ? 'Mitarbeiterbasiertes SaaS — Kunden sparen mehr als sie zahlen' : 'Employee-based SaaS — customers save more than they pay'}
+        </p>
       </FadeInView>
 
-      {/* Key Metrics */}
-      <div className="grid md:grid-cols-3 gap-4 mb-8">
-        <GlassCard delay={0.2} className="text-center">
-          <Repeat className="w-6 h-6 text-indigo-400 mx-auto mb-2" />
-          <p className="text-sm text-white/50 mb-1">{i.businessModel.recurringRevenue}</p>
-          <p className="text-2xl font-bold text-white">100% SaaS</p>
-          <p className="text-xs text-white/30">{de ? 'Mitarbeiterbasiertes Pricing' : 'Employee-based pricing'}</p>
-        </GlassCard>
-        <GlassCard delay={0.3} className="text-center">
-          <TrendingUp className="w-6 h-6 text-green-400 mx-auto mb-2" />
-          <p className="text-sm text-white/50 mb-1">{i.businessModel.margin}</p>
-          <p className="text-2xl font-bold text-white">&gt;80%</p>
-          <p className="text-xs text-white/30">{de ? 'Cloud-native, keine HW-Kosten' : 'Cloud-native, no HW costs'}</p>
-        </GlassCard>
-        <GlassCard delay={0.4} className="text-center">
-          <PiggyBank className="w-6 h-6 text-amber-400 mx-auto mb-2" />
-          <p className="text-sm text-white/50 mb-1">{de ? 'Kundenersparnis' : 'Customer Savings'}</p>
-          <p className="text-2xl font-bold text-white">50.000+ EUR</p>
-          <p className="text-xs text-white/30">{de ? 'pro Kunde pro Jahr' : 'per customer per year'}</p>
-        </GlassCard>
-      </div>
-
-      {/* Savings Breakdown — the core argument */}
-      <FadeInView delay={0.5}>
-        <GlassCard hover={false} className="p-6">
-          <h3 className="text-lg font-semibold mb-5 text-white/70 text-center">
-            {de ? 'ROI-Rechnung: Kunde mit 250+ Mitarbeitern' : 'ROI Calculation: Customer with 250+ employees'}
-          </h3>
-          <div className="grid md:grid-cols-2 gap-8">
-            {/* Customer pays */}
-            <div>
-              <h4 className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-3">
-                {i.businessModel.customerPays}
-              </h4>
-              <div className="bg-indigo-500/10 border border-indigo-500/20 rounded-xl p-4">
-                <p className="text-3xl font-bold text-white text-center mb-1">
-                  <AnimatedCounter target={40} suffix="-50k" duration={1500} /> EUR
-                </p>
-                <p className="text-xs text-white/40 text-center">{de ? 'pro Jahr, modular waehlbar' : 'per year, modular choice'}</p>
-              </div>
-            </div>
-            {/* Customer saves */}
-            <div>
-              <h4 className="text-xs font-bold text-emerald-400 uppercase tracking-wider mb-3">
-                {i.businessModel.customerSaves}
-              </h4>
-              <div className="space-y-2">
-                {[
-                  { label: i.businessModel.savingsPentest, amount: '30.000', icon: ShieldCheck },
-                  { label: i.businessModel.savingsCE, amount: '20.000', icon: Clock },
-                  { label: i.businessModel.savingsAudit, amount: '60.000+', icon: Users },
-                ].map((item, idx) => (
-                  <div key={idx} className="flex items-center justify-between bg-emerald-500/10 rounded-lg px-3 py-2">
-                    <div className="flex items-center gap-2">
-                      <item.icon className="w-3.5 h-3.5 text-emerald-400" />
-                      <span className="text-xs text-white/70">{item.label}</span>
+      <div className="grid md:grid-cols-12 gap-4">
+        {/* Left: Pricing Tiers */}
+        <div className="md:col-span-7">
+          <div className="grid grid-cols-3 gap-3">
+            {tiers.map((tier, idx) => (
+              <FadeInView key={idx} delay={0.1 + idx * 0.1}>
+                <GlassCard hover={false} className={`p-4 h-full ${tier.highlight ? 'border-indigo-500/30 bg-indigo-500/5' : ''}`}>
+                  {tier.highlight && (
+                    <div className="text-[9px] font-bold text-indigo-400 uppercase tracking-wider mb-2">
+                      {de ? 'Kernmarkt' : 'Core Market'}
                     </div>
-                    <span className="text-xs font-bold text-emerald-300">{item.amount} EUR</span>
+                  )}
+                  <h3 className="text-base font-bold text-white mb-0.5">{tier.name}</h3>
+                  <p className="text-[10px] text-white/40 mb-2">{tier.target}</p>
+                  <p className="text-[10px] text-white/30 mb-3">{tier.employees} {de ? 'Mitarbeiter' : 'employees'}</p>
+
+                  <div className="mb-3">
+                    <span className="text-xl font-black text-white">{tier.price}</span>
+                    <span className="text-[10px] text-white/40 ml-1">{tier.period}</span>
                   </div>
-                ))}
-                <div className="flex items-center justify-between bg-emerald-500/20 border border-emerald-500/30 rounded-lg px-3 py-2">
-                  <span className="text-xs font-bold text-white">{i.businessModel.savingsTotal}</span>
-                  <span className="text-sm font-bold text-emerald-300">50.000 - 110.000+ EUR</span>
-                </div>
-              </div>
-            </div>
+
+                  <ul className="space-y-1.5">
+                    {tier.features.map((f, i) => (
+                      <li key={i} className="flex items-start gap-1.5 text-[11px] text-white/50">
+                        <span className="w-1 h-1 rounded-full bg-indigo-400 mt-1.5 shrink-0" />
+                        {f}
+                      </li>
+                    ))}
+                  </ul>
+                </GlassCard>
+              </FadeInView>
+            ))}
           </div>
-          <p className="text-center text-xs text-white/30 mt-4">
-            {de
-              ? '+ Strafvermeidung, Echtzeit-Kundenanfragen, kein Auditmanager noetig'
-              : '+ penalty avoidance, real-time customer inquiries, no audit manager needed'}
-          </p>
-        </GlassCard>
-      </FadeInView>
+
+          {/* Expansion arrow */}
+          <FadeInView delay={0.4} className="flex items-center justify-center gap-2 mt-3">
+            <span className="text-[10px] text-white/30">Starter</span>
+            <ArrowRight className="w-3 h-3 text-indigo-400/40" />
+            <span className="text-[10px] text-white/30">Professional</span>
+            <ArrowRight className="w-3 h-3 text-indigo-400/40" />
+            <span className="text-[10px] text-white/30">Enterprise</span>
+            <span className="text-[10px] text-white/20 ml-2">{de ? 'Land & Expand' : 'Land & Expand'}</span>
+          </FadeInView>
+        </div>
+
+        {/* Right: Unit Economics */}
+        <div className="md:col-span-5">
+          <FadeInView delay={0.3}>
+            <GlassCard hover={false} className="p-4 h-full">
+              <h3 className="text-xs font-bold text-white/40 uppercase tracking-wider mb-4">
+                Unit Economics
+              </h3>
+              <div className="space-y-4">
+                {metrics.map((m, idx) => {
+                  const Icon = m.icon
+                  return (
+                    <div key={idx} className="flex items-start gap-3">
+                      <div className={`w-8 h-8 rounded-lg bg-white/[0.05] border border-white/10 flex items-center justify-center shrink-0`}>
+                        <Icon className={`w-4 h-4 ${m.color}`} />
+                      </div>
+                      <div className="flex-1">
+                        <div className="flex items-baseline justify-between">
+                          <span className="text-[10px] text-white/40 uppercase tracking-wider">{m.label}</span>
+                          <span className={`text-lg font-black ${m.color}`}>{m.value}</span>
+                        </div>
+                        <p className="text-[10px] text-white/30">{m.sub}</p>
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+
+              {/* Bottom-up sizing */}
+              <div className="mt-4 pt-3 border-t border-white/5">
+                <div className="flex items-center gap-1.5 mb-1">
+                  <BarChart3 className="w-3 h-3 text-white/30" />
+                  <span className="text-[10px] text-white/30 uppercase tracking-wider">Bottom-Up</span>
+                </div>
+                <p className="text-xs text-white/50">
+                  {de
+                    ? '1.200 Kunden × 8.400 EUR ACV = ~10 Mio. EUR ARR (2030)'
+                    : '1,200 customers × EUR 8,400 ACV = ~EUR 10M ARR (2030)'}
+                </p>
+              </div>
+            </GlassCard>
+          </FadeInView>
+        </div>
+      </div>
     </div>
   )
 }