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

@@ -0,0 +1,130 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Shield, Lock, ShieldCheck, Search, FileCode, Key, FileText } from 'lucide-react'
+import { Language } from '@/lib/types'
+import GradientText from '../ui/GradientText'
+import FadeInView from '../ui/FadeInView'
+
+interface AnnexSecuritySlideProps {
+  lang: Language
+}
+
+export default function AnnexSecuritySlide({ lang }: AnnexSecuritySlideProps) {
+  const securityFeatures = [
+    {
+      icon: Shield,
+      title: lang === 'de' ? 'BSI & Compliance' : 'BSI & Compliance',
+      accentColor: 'from-blue-400 to-blue-600',
+      items: [
+        lang === 'de' ? 'BSI-TR-03161 zertifizierte Architektur' : 'BSI-TR-03161 certified architecture',
+        lang === 'de' ? 'DSGVO Art. 32 TOM implementiert' : 'DSGVO Art. 32 TOM implemented',
+        lang === 'de' ? 'Regelmäßige Penetrationstests' : 'Regular penetration testing',
+        lang === 'de' ? 'Sicherheits-Audit-Trail' : 'Security audit trail'
+      ]
+    },
+    {
+      icon: Lock,
+      title: lang === 'de' ? 'Verschlüsselung & Vault' : 'Encryption & Vault',
+      accentColor: 'from-purple-400 to-purple-600',
+      items: [
+        lang === 'de' ? 'E2E-Verschlüsselung für Daten in Transit (TLS 1.3)' : 'E2E encryption for all data in transit (TLS 1.3)',
+        lang === 'de' ? 'AES-256 Verschlüsselung im Ruhezustand' : 'AES-256 encryption at rest',
+        lang === 'de' ? 'HashiCorp Vault für Secret Management' : 'HashiCorp Vault for secret management',
+        lang === 'de' ? 'Automatische Zertifikatsrotation' : 'Automatic certificate rotation'
+      ]
+    },
+    {
+      icon: ShieldCheck,
+      title: lang === 'de' ? 'Zero Trust' : 'Zero Trust',
+      accentColor: 'from-green-400 to-green-600',
+      items: [
+        lang === 'de' ? 'Kein implizites Vertrauen, alles verifizieren' : 'No implicit trust, verify everything',
+        lang === 'de' ? 'JWT-basierte Authentifizierung' : 'JWT-based authentication',
+        lang === 'de' ? 'RBAC mit minimalen Rechten' : 'RBAC with least privilege',
+        lang === 'de' ? 'Netzwerksegmentierung via Docker' : 'Network segmentation via Docker'
+      ]
+    }
+  ]
+
+  const securityTools = [
+    { name: 'Trivy', description: lang === 'de' ? 'Container Scanning' : 'Container Scanning', icon: Search },
+    { name: 'Semgrep', description: 'SAST', icon: FileCode },
+    { name: 'Gitleaks', description: lang === 'de' ? 'Secret Detection' : 'Secret Detection', icon: Key },
+    { name: 'SBOM', description: lang === 'de' ? 'Software Bill of Materials' : 'Software Bill of Materials', icon: FileText }
+  ]
+
+  return (
+    <div className="max-w-6xl mx-auto px-4">
+      <FadeInView>
+        <div className="text-center mb-12">
+          <h2 className="text-5xl font-bold mb-4">
+            <GradientText>
+              {lang === 'de' ? 'Sicherheitsarchitektur' : 'Security Architecture'}
+            </GradientText>
+          </h2>
+          <p className="text-xl text-white/60">
+            {lang === 'de'
+              ? 'Enterprise-Grade Sicherheit auf eigener Hardware'
+              : 'Enterprise-grade security on own hardware'}
+          </p>
+        </div>
+      </FadeInView>
+
+      {/* Security Features Grid */}
+      <div className="grid md:grid-cols-3 gap-6 mb-8">
+        {securityFeatures.map((feature, index) => (
+          <motion.div
+            key={feature.title}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.1 }}
+            className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-4"
+          >
+            <div className={`w-12 h-12 rounded-lg bg-gradient-to-br ${feature.accentColor} flex items-center justify-center mb-4`}>
+              <feature.icon className="w-6 h-6 text-white" />
+            </div>
+            <h3 className="text-xl font-semibold mb-4 text-white">{feature.title}</h3>
+            <ul className="space-y-2">
+              {feature.items.map((item, itemIndex) => (
+                <li key={itemIndex} className="text-sm text-white/70 flex items-start">
+                  <span className="mr-2 text-white/40">•</span>
+                  <span>{item}</span>
+                </li>
+              ))}
+            </ul>
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Security Tools Bar */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.4 }}
+        className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-6"
+      >
+        <h3 className="text-lg font-semibold mb-4 text-white/90">
+          {lang === 'de' ? 'Sicherheitstools' : 'Security Tools'}
+        </h3>
+        <div className="flex flex-wrap gap-3">
+          {securityTools.map((tool, index) => (
+            <motion.div
+              key={tool.name}
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: 0.5 + index * 0.05 }}
+              className="bg-white/[0.06] border border-white/[0.08] rounded-lg px-4 py-2 flex items-center gap-2"
+            >
+              <tool.icon className="w-4 h-4 text-white/60" />
+              <div>
+                <span className="text-sm font-medium text-white">{tool.name}</span>
+                <span className="text-xs text-white/50 ml-2">{tool.description}</span>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </motion.div>
+    </div>
+  )
+}