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/TechnologySlide.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Language } from '@/lib/types'
+import { t } from '@/lib/i18n'
+import GradientText from '../ui/GradientText'
+import FadeInView from '../ui/FadeInView'
+import { Cpu, Brain, Server, Shield, Database } from 'lucide-react'
+
+interface TechnologySlideProps {
+  lang: Language
+}
+
+const phaseColors = [
+  'from-blue-500/20 to-blue-600/10 border-blue-500/30',
+  'from-indigo-500/20 to-indigo-600/10 border-indigo-500/30',
+  'from-purple-500/20 to-purple-600/10 border-purple-500/30',
+  'from-violet-500/20 to-violet-600/10 border-violet-500/30',
+  'from-fuchsia-500/20 to-fuchsia-600/10 border-fuchsia-500/30',
+]
+
+const phaseAccents = [
+  'text-blue-400',
+  'text-indigo-400',
+  'text-purple-400',
+  'text-violet-400',
+  'text-fuchsia-400',
+]
+
+const layerIcons = [Cpu, Brain, Server, Shield, Database]
+const layerColors = [
+  'text-blue-400 bg-blue-500/10 border-blue-500/20',
+  'text-purple-400 bg-purple-500/10 border-purple-500/20',
+  'text-green-400 bg-green-500/10 border-green-500/20',
+  'text-red-400 bg-red-500/10 border-red-500/20',
+  'text-amber-400 bg-amber-500/10 border-amber-500/20',
+]
+
+export default function TechnologySlide({ lang }: TechnologySlideProps) {
+  const i = t(lang) as any
+
+  return (
+    <div className="max-w-6xl mx-auto px-4">
+      <FadeInView className="text-center mb-6">
+        <h2 className="text-3xl md:text-4xl font-bold mb-2">
+          <GradientText>{i.technology.title}</GradientText>
+        </h2>
+        <p className="text-sm text-white/50 max-w-2xl mx-auto">{i.technology.subtitle}</p>
+      </FadeInView>
+
+      {/* Timeline Section */}
+      <FadeInView delay={0.1}>
+        <div className="mb-6">
+          <p className="text-[10px] text-white/30 uppercase tracking-wider mb-3">
+            {i.technology.timelineTitle}
+          </p>
+
+          {/* Timeline Line */}
+          <div className="relative">
+            <div className="absolute top-4 left-0 right-0 h-px bg-gradient-to-r from-blue-500/40 via-purple-500/40 to-fuchsia-500/40" />
+
+            <div className="grid grid-cols-5 gap-2">
+              {i.technology.phases.map((phase: any, idx: number) => (
+                <motion.div
+                  key={phase.year}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.2 + idx * 0.1, duration: 0.5 }}
+                  className="relative"
+                >
+                  {/* Dot on timeline */}
+                  <div className="flex justify-center mb-2">
+                    <div className={`w-2.5 h-2.5 rounded-full ${phaseAccents[idx].replace('text-', 'bg-')} ring-2 ring-slate-950 relative z-10`} />
+                  </div>
+
+                  {/* Phase Card */}
+                  <div className={`bg-gradient-to-b ${phaseColors[idx]} border rounded-xl p-2.5 backdrop-blur-sm`}>
+                    <p className={`text-xs font-bold ${phaseAccents[idx]} mb-0.5`}>{phase.year}</p>
+                    <p className="text-[10px] font-semibold text-white mb-1.5">{phase.phase}</p>
+                    <div className="space-y-0.5">
+                      {phase.techs.map((tech: string, i: number) => (
+                        <p key={i} className="text-[9px] text-white/40 leading-tight">
+                          {tech}
+                        </p>
+                      ))}
+                    </div>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </FadeInView>
+
+      {/* Tech Stack Layers */}
+      <FadeInView delay={0.4}>
+        <p className="text-[10px] text-white/30 uppercase tracking-wider mb-2">
+          {i.technology.stackTitle}
+        </p>
+        <div className="space-y-1.5">
+          {i.technology.layers.map((layer: any, idx: number) => {
+            const Icon = layerIcons[idx]
+            return (
+              <motion.div
+                key={layer.name}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.5 + idx * 0.08, duration: 0.4 }}
+                className={`flex items-center gap-3 bg-white/[0.04] backdrop-blur-sm border border-white/[0.06] rounded-xl px-3 py-2`}
+              >
+                <div className={`w-8 h-8 rounded-lg border flex items-center justify-center shrink-0 ${layerColors[idx]}`}>
+                  <Icon className="w-4 h-4" />
+                </div>
+                <div className="flex items-center gap-3 flex-1 min-w-0">
+                  <p className="text-[11px] font-semibold text-white/80 w-24 shrink-0">{layer.name}</p>
+                  <p className="text-[10px] text-white/40 truncate">{layer.techs}</p>
+                </div>
+              </motion.div>
+            )
+          })}
+        </div>
+      </FadeInView>
+    </div>
+  )
+}