feat: Add staged funding model, financial compute engine, annex slides and UI enhancements

Restructure financial plan from single 200k SAFE to realistic staged funding
(25k Stammkapital, 25k Angel, 200k Wandeldarlehen, 1M Series A = 1.25M total).
Add 60-month compute engine with CAPEX/OPEX accounting, cash constraints,
hardware financing (30% upfront / 70% leasing), and revenue-based hiring caps.
Rebuild TheAskSlide with 4-event funding timeline, update i18n (DE/EN),
chat agent core messages, and add 15 new annex/technology slides with
supporting UI components (KPICard, RunwayGauge, WaterfallChart, etc.).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

pitch-deck/components/slides/TheAskSlide.tsx

@@ -7,7 +7,7 @@ import GradientText from '../ui/GradientText'
 import FadeInView from '../ui/FadeInView'
 import AnimatedCounter from '../ui/AnimatedCounter'
 import GlassCard from '../ui/GlassCard'
-import { Target, Calendar, FileText } from 'lucide-react'
+import { Target, Calendar, FileText, Building2, Users, Landmark, TrendingUp } from 'lucide-react'
 import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts'
 
 interface TheAskSlideProps {
@@ -15,7 +15,50 @@ interface TheAskSlideProps {
   funding: PitchFunding
 }
 
-const COLORS = ['#6366f1', '#a78bfa', '#60a5fa', '#34d399', '#fbbf24']
+const COLORS = ['#6366f1', '#a78bfa', '#60a5fa', '#34d399', '#fbbf24', '#f87171']
+
+const FUNDING_TIMELINE = [
+  {
+    month: 'Aug 2026',
+    amount: 25000,
+    icon: Building2,
+    color: '#6366f1',
+    label_de: 'Stammkapital',
+    label_en: 'Share Capital',
+    desc_de: 'GmbH-Gruendung',
+    desc_en: 'GmbH Founding',
+  },
+  {
+    month: 'Sep 2026',
+    amount: 25000,
+    icon: Users,
+    color: '#a78bfa',
+    label_de: 'Angel-Runde',
+    label_en: 'Angel Round',
+    desc_de: '5% Anteile',
+    desc_en: '5% Equity',
+  },
+  {
+    month: 'Okt 2026',
+    amount: 200000,
+    icon: Landmark,
+    color: '#60a5fa',
+    label_de: 'Wandeldarlehen',
+    label_en: 'Convertible Note',
+    desc_de: '40k Investor + 160k L-Bank',
+    desc_en: '40k Investor + 160k L-Bank',
+  },
+  {
+    month: 'Jul 2027',
+    amount: 1000000,
+    icon: TrendingUp,
+    color: '#34d399',
+    label_de: 'Series A',
+    label_en: 'Series A',
+    desc_de: 'Skalierungskapital',
+    desc_en: 'Growth Capital',
+  },
+]
 
 export default function TheAskSlide({ lang, funding }: TheAskSlideProps) {
   const i = t(lang)
@@ -26,9 +69,11 @@ export default function TheAskSlide({ lang, funding }: TheAskSlideProps) {
     value: item.percentage,
   }))
 
+  const totalFunding = 1250000
+
   return (
     <div>
-      <FadeInView className="text-center mb-10">
+      <FadeInView className="text-center mb-8">
         <h2 className="text-4xl md:text-5xl font-bold mb-3">
           <GradientText>{i.theAsk.title}</GradientText>
         </h2>
@@ -36,53 +81,93 @@ export default function TheAskSlide({ lang, funding }: TheAskSlideProps) {
       </FadeInView>
 
       {/* Main Number */}
-      <FadeInView delay={0.2} className="text-center mb-10">
+      <FadeInView delay={0.2} className="text-center mb-8">
         <motion.div
           initial={{ scale: 0.5, opacity: 0 }}
           animate={{ scale: 1, opacity: 1 }}
           transition={{ delay: 0.4, type: 'spring', stiffness: 200 }}
         >
-          <p className="text-6xl md:text-8xl font-bold text-white mb-2">
-            <AnimatedCounter target={200} suffix="k" duration={2000} />
-            <span className="text-3xl md:text-4xl text-white/50 ml-2">EUR</span>
+          <p className="text-5xl md:text-7xl font-bold text-white mb-1">
+            <AnimatedCounter target={1.25} suffix="M" duration={2000} decimals={2} />
+            <span className="text-2xl md:text-3xl text-white/50 ml-2">EUR</span>
+          </p>
+          <p className="text-sm text-white/40">
+            {lang === 'de' ? 'Gestaffelte Finanzierung 2026-2027' : 'Staged Funding 2026-2027'}
           </p>
         </motion.div>
       </FadeInView>
 
-      {/* Details */}
-      <div className="grid md:grid-cols-3 gap-4 mb-8">
-        <GlassCard delay={0.5} className="text-center p-5">
-          <FileText className="w-6 h-6 text-indigo-400 mx-auto mb-2" />
+      {/* Funding Timeline */}
+      <FadeInView delay={0.4} className="mb-8">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          {FUNDING_TIMELINE.map((event, idx) => {
+            const Icon = event.icon
+            return (
+              <motion.div
+                key={idx}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.5 + idx * 0.15 }}
+              >
+                <GlassCard delay={0} className="p-4 text-center h-full">
+                  <Icon className="w-5 h-5 mx-auto mb-2" style={{ color: event.color }} />
+                  <p className="text-xs text-white/40 mb-1">{event.month}</p>
+                  <p className="text-lg font-bold text-white mb-0.5">
+                    {event.amount >= 1000000
+                      ? `${(event.amount / 1000000).toFixed(0)}M`
+                      : `${(event.amount / 1000).toFixed(0)}k`}
+                  </p>
+                  <p className="text-xs font-medium text-white/70">
+                    {lang === 'de' ? event.label_de : event.label_en}
+                  </p>
+                  <p className="text-[10px] text-white/30 mt-0.5">
+                    {lang === 'de' ? event.desc_de : event.desc_en}
+                  </p>
+                </GlassCard>
+              </motion.div>
+            )
+          })}
+        </div>
+      </FadeInView>
+
+      {/* Details Row */}
+      <div className="grid md:grid-cols-3 gap-3 mb-6">
+        <GlassCard delay={0.8} className="text-center p-4">
+          <FileText className="w-5 h-5 text-indigo-400 mx-auto mb-2" />
           <p className="text-xs text-white/40 mb-1">{i.theAsk.instrument}</p>
-          <p className="text-lg font-bold text-white">{funding?.instrument || 'SAFE'}</p>
+          <p className="text-sm font-bold text-white">{funding?.instrument || 'Stammkapital + Wandeldarlehen + Equity'}</p>
         </GlassCard>
-        <GlassCard delay={0.6} className="text-center p-5">
-          <Calendar className="w-6 h-6 text-purple-400 mx-auto mb-2" />
+        <GlassCard delay={0.9} className="text-center p-4">
+          <Calendar className="w-5 h-5 text-purple-400 mx-auto mb-2" />
           <p className="text-xs text-white/40 mb-1">{i.theAsk.targetDate}</p>
-          <p className="text-lg font-bold text-white">Q3 2026</p>
+          <p className="text-sm font-bold text-white">
+            {lang === 'de' ? 'Aug 2026 — Jul 2027' : 'Aug 2026 — Jul 2027'}
+          </p>
         </GlassCard>
-        <GlassCard delay={0.7} className="text-center p-5">
-          <Target className="w-6 h-6 text-blue-400 mx-auto mb-2" />
+        <GlassCard delay={1.0} className="text-center p-4">
+          <Target className="w-5 h-5 text-blue-400 mx-auto mb-2" />
           <p className="text-xs text-white/40 mb-1">{lang === 'de' ? 'Runway' : 'Runway'}</p>
-          <p className="text-lg font-bold text-white">18 {lang === 'de' ? 'Monate' : 'Months'}</p>
+          <p className="text-sm font-bold text-white">36+ {lang === 'de' ? 'Monate' : 'Months'}</p>
         </GlassCard>
       </div>
 
       {/* Use of Funds */}
-      <FadeInView delay={0.8}>
-        <GlassCard hover={false} className="p-6">
-          <h3 className="text-lg font-semibold text-white mb-4 text-center">{i.theAsk.useOfFunds}</h3>
-          <div className="flex flex-col md:flex-row items-center gap-8">
+      <FadeInView delay={1.1}>
+        <GlassCard hover={false} className="p-5">
+          <h3 className="text-base font-semibold text-white mb-3 text-center">
+            {i.theAsk.useOfFunds} (1,25 Mio. EUR)
+          </h3>
+          <div className="flex flex-col md:flex-row items-center gap-6">
             {/* Pie Chart */}
-            <div className="w-48 h-48">
+            <div className="w-40 h-40">
               <ResponsiveContainer width="100%" height="100%">
                 <PieChart>
                   <Pie
                     data={pieData}
                     cx="50%"
                     cy="50%"
-                    innerRadius={50}
-                    outerRadius={80}
+                    innerRadius={45}
+                    outerRadius={70}
                     dataKey="value"
                     stroke="none"
                   >
@@ -96,7 +181,7 @@ export default function TheAskSlide({ lang, funding }: TheAskSlideProps) {
                       border: '1px solid rgba(255,255,255,0.1)',
                       borderRadius: 8,
                       color: '#fff',
-                      fontSize: 13,
+                      fontSize: 12,
                     }}
                     formatter={(value: number) => `${value}%`}
                   />
@@ -105,16 +190,16 @@ export default function TheAskSlide({ lang, funding }: TheAskSlideProps) {
             </div>
 
             {/* Legend */}
-            <div className="flex-1 space-y-3">
+            <div className="flex-1 space-y-2">
               {useOfFunds.map((item, idx) => (
                 <div key={idx} className="flex items-center gap-3">
-                  <div className="w-3 h-3 rounded-full" style={{ backgroundColor: COLORS[idx] }} />
+                  <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: COLORS[idx] }} />
                   <span className="flex-1 text-sm text-white/70">
                     {lang === 'de' ? item.label_de : item.label_en}
                   </span>
                   <span className="text-sm font-bold text-white">{item.percentage}%</span>
                   <span className="text-xs text-white/30">
-                    {((funding.amount_eur * item.percentage) / 100).toLocaleString('de-DE')} EUR
+                    {((totalFunding * item.percentage) / 100).toLocaleString('de-DE')} EUR
                   </span>
                 </div>
               ))}