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/ui/AnnualCashflowChart.tsx

@@ -0,0 +1,205 @@
+'use client'
+
+import { FMResult } from '@/lib/types'
+import { AccountingStandard } from './AnnualPLTable'
+import {
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  ReferenceLine,
+  Line,
+  ComposedChart,
+  Cell,
+} from 'recharts'
+
+interface AnnualCashflowChartProps {
+  results: FMResult[]
+  initialFunding: number
+  lang: 'de' | 'en'
+  standard?: AccountingStandard
+}
+
+interface AnnualCFRow {
+  year: string
+  revenue: number
+  costs: number
+  netCashflow: number
+  cashBalance: number
+  cumulativeFundingNeed: number
+  // HGB specific
+  operatingCF?: number
+  investingCF?: number
+  financingCF?: number
+}
+
+export default function AnnualCashflowChart({ results, initialFunding, lang, standard = 'hgb' }: AnnualCashflowChartProps) {
+  const de = lang === 'de'
+
+  // Aggregate into yearly
+  const yearMap = new Map<number, FMResult[]>()
+  for (const r of results) {
+    if (!yearMap.has(r.year)) yearMap.set(r.year, [])
+    yearMap.get(r.year)!.push(r)
+  }
+
+  let cumulativeNeed = 0
+  const data: AnnualCFRow[] = Array.from(yearMap.entries()).map(([year, months]) => {
+    const revenue = months.reduce((s, m) => s + m.revenue_eur, 0)
+    const costs = months.reduce((s, m) => s + m.total_costs_eur, 0)
+    const netIncome = months.reduce((s, m) => s + (m.net_income_eur || m.revenue_eur - m.total_costs_eur), 0)
+    const depreciation = months.reduce((s, m) => s + (m.depreciation_eur || 0), 0)
+    const cogs = months.reduce((s, m) => s + m.cogs_eur, 0)
+    const lastMonth = months[months.length - 1]
+
+    const netCF = netIncome
+    if (netCF < 0) cumulativeNeed += Math.abs(netCF)
+
+    // Operating CF = Net Income + Depreciation (non-cash add-back)
+    const operatingCF = netIncome + depreciation
+    // Investing CF = Hardware COGS (approximation for CapEx)
+    const investingCF = -cogs
+    // Financing CF = 0 for now (no debt/equity events modeled)
+    const financingCF = 0
+
+    return {
+      year: year.toString(),
+      revenue: Math.round(revenue),
+      costs: Math.round(costs),
+      netCashflow: Math.round(netCF),
+      cashBalance: Math.round(lastMonth.cash_balance_eur),
+      cumulativeFundingNeed: Math.round(cumulativeNeed),
+      operatingCF: Math.round(operatingCF),
+      investingCF: Math.round(investingCF),
+      financingCF: Math.round(financingCF),
+    }
+  })
+
+  const formatValue = (value: number) => {
+    if (Math.abs(value) >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
+    if (Math.abs(value) >= 1_000) return `${(value / 1_000).toFixed(0)}k`
+    return value.toString()
+  }
+
+  // Calculate total funding needed beyond initial funding
+  const totalFundingGap = Math.max(0, cumulativeNeed - initialFunding)
+
+  const isUSGAAP = standard === 'usgaap'
+
+  return (
+    <div>
+      {/* Summary Cards */}
+      <div className="grid grid-cols-3 gap-2 mb-3">
+        <div className="text-center">
+          <p className="text-[9px] text-white/30 uppercase tracking-wider">
+            {de ? 'Startkapital' : 'Initial Funding'}
+          </p>
+          <p className="text-sm font-bold text-white">{formatValue(initialFunding)} EUR</p>
+        </div>
+        <div className="text-center">
+          <p className="text-[9px] text-white/30 uppercase tracking-wider">
+            {de ? 'Kum. Finanzbedarf' : 'Cum. Funding Need'}
+          </p>
+          <p className="text-sm font-bold text-amber-400">{formatValue(cumulativeNeed)} EUR</p>
+        </div>
+        <div className="text-center">
+          <p className="text-[9px] text-white/30 uppercase tracking-wider">
+            {de ? 'Finanzierungsluecke' : 'Funding Gap'}
+          </p>
+          <p className={`text-sm font-bold ${totalFundingGap > 0 ? 'text-red-400' : 'text-emerald-400'}`}>
+            {totalFundingGap > 0 ? formatValue(totalFundingGap) + ' EUR' : (de ? 'Gedeckt' : 'Covered')}
+          </p>
+        </div>
+      </div>
+
+      {/* Chart */}
+      <div className="w-full h-[220px]">
+        <ResponsiveContainer width="100%" height="100%">
+          <ComposedChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+            <XAxis
+              dataKey="year"
+              stroke="rgba(255,255,255,0.3)"
+              tick={{ fill: 'rgba(255,255,255,0.5)', fontSize: 11 }}
+            />
+            <YAxis
+              stroke="rgba(255,255,255,0.1)"
+              tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }}
+              tickFormatter={formatValue}
+            />
+            <Tooltip
+              contentStyle={{
+                background: 'rgba(10, 10, 26, 0.95)',
+                border: '1px solid rgba(255,255,255,0.1)',
+                borderRadius: 12,
+                color: '#fff',
+                fontSize: 11,
+              }}
+              formatter={(value: number, name: string) => {
+                const labels: Record<string, string> = isUSGAAP
+                  ? {
+                      netCashflow: 'Net Cash Flow',
+                      cashBalance: 'Cash Balance',
+                      cumulativeFundingNeed: 'Cum. Funding Need',
+                    }
+                  : {
+                      netCashflow: de ? 'Netto-Cashflow' : 'Net Cash Flow',
+                      cashBalance: de ? 'Cash-Bestand' : 'Cash Balance',
+                      cumulativeFundingNeed: de ? 'Kum. Finanzbedarf' : 'Cum. Funding Need',
+                    }
+                return [formatValue(value) + ' EUR', labels[name] || name]
+              }}
+            />
+            <ReferenceLine y={0} stroke="rgba(255,255,255,0.2)" />
+
+            {/* Net Cashflow Bars */}
+            <Bar dataKey="netCashflow" radius={[4, 4, 4, 4]} barSize={28}>
+              {data.map((entry, i) => (
+                <Cell
+                  key={i}
+                  fill={entry.netCashflow >= 0 ? 'rgba(34, 197, 94, 0.7)' : 'rgba(239, 68, 68, 0.6)'}
+                />
+              ))}
+            </Bar>
+
+            {/* Cash Balance Line */}
+            <Line
+              type="monotone"
+              dataKey="cashBalance"
+              stroke="#6366f1"
+              strokeWidth={2.5}
+              dot={{ r: 4, fill: '#6366f1', stroke: '#1e1b4b', strokeWidth: 2 }}
+            />
+
+            {/* Cumulative Funding Need Line */}
+            <Line
+              type="monotone"
+              dataKey="cumulativeFundingNeed"
+              stroke="#f59e0b"
+              strokeWidth={2}
+              strokeDasharray="5 5"
+              dot={{ r: 3, fill: '#f59e0b' }}
+            />
+          </ComposedChart>
+        </ResponsiveContainer>
+      </div>
+
+      {/* Legend */}
+      <div className="flex items-center justify-center gap-4 mt-2 text-[9px] text-white/40">
+        <span className="flex items-center gap-1">
+          <span className="w-3 h-2.5 rounded-sm bg-emerald-500/70 inline-block" />
+          <span className="w-3 h-2.5 rounded-sm bg-red-500/60 inline-block" />
+          {isUSGAAP ? 'Net Cash Flow' : (de ? 'Netto-Cashflow' : 'Net Cash Flow')}
+        </span>
+        <span className="flex items-center gap-1">
+          <span className="w-4 h-0.5 bg-indigo-500 inline-block" />
+          {isUSGAAP ? 'Cash Balance' : (de ? 'Cash-Bestand' : 'Cash Balance')}
+        </span>
+        <span className="flex items-center gap-1">
+          <span className="w-4 h-0.5 inline-block" style={{ borderBottom: '2px dashed #f59e0b' }} />
+          {isUSGAAP ? 'Cum. Funding Need' : (de ? 'Kum. Finanzbedarf' : 'Cum. Funding Need')}
+        </span>
+      </div>
+    </div>
+  )
+}

pitch-deck/components/ui/AnnualPLTable.tsx

@@ -0,0 +1,232 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { FMResult } from '@/lib/types'
+
+export type AccountingStandard = 'hgb' | 'usgaap'
+
+interface AnnualPLTableProps {
+  results: FMResult[]
+  lang: 'de' | 'en'
+  standard: AccountingStandard
+}
+
+interface AnnualRow {
+  year: number
+  revenue: number
+  cogs: number
+  grossProfit: number
+  grossMarginPct: number
+  personnel: number
+  marketing: number
+  infra: number
+  totalOpex: number
+  ebitda: number
+  ebitdaMarginPct: number
+  customers: number
+  employees: number
+  // Detail costs
+  adminCosts: number
+  officeCosts: number
+  travelCosts: number
+  softwareLicenses: number
+  depreciation: number
+  interestExpense: number
+  taxes: number
+  netIncome: number
+  ebit: number
+  ihk: number
+  foundingCosts: number
+  // US GAAP aggregates
+  rAndD: number
+  sga: number
+}
+
+function fmt(v: number): string {
+  if (Math.abs(v) >= 1_000_000) return `${(v / 1_000_000).toFixed(1)}M`
+  if (Math.abs(v) >= 1_000) return `${(v / 1_000).toFixed(0)}k`
+  return Math.round(v).toLocaleString('de-DE')
+}
+
+export default function AnnualPLTable({ results, lang, standard }: AnnualPLTableProps) {
+  const de = lang === 'de'
+
+  // Aggregate monthly results into annual
+  const annualMap = new Map<number, FMResult[]>()
+  for (const r of results) {
+    if (!annualMap.has(r.year)) annualMap.set(r.year, [])
+    annualMap.get(r.year)!.push(r)
+  }
+
+  const rows: AnnualRow[] = Array.from(annualMap.entries()).map(([year, months]) => {
+    const revenue = months.reduce((s, m) => s + m.revenue_eur, 0)
+    const cogs = months.reduce((s, m) => s + m.cogs_eur, 0)
+    const grossProfit = revenue - cogs
+    const personnel = months.reduce((s, m) => s + m.personnel_eur, 0)
+    const marketing = months.reduce((s, m) => s + m.marketing_eur, 0)
+    const infra = months.reduce((s, m) => s + m.infra_eur, 0)
+    const adminCosts = months.reduce((s, m) => s + (m.admin_costs_eur || 0), 0)
+    const officeCosts = months.reduce((s, m) => s + (m.office_costs_eur || 0), 0)
+    const travelCosts = months.reduce((s, m) => s + (m.travel_costs_eur || 0), 0)
+    const softwareLicenses = months.reduce((s, m) => s + (m.software_licenses_eur || 0), 0)
+    const depreciation = months.reduce((s, m) => s + (m.depreciation_eur || 0), 0)
+    const interestExpense = months.reduce((s, m) => s + (m.interest_expense_eur || 0), 0)
+    const taxes = months.reduce((s, m) => s + (m.taxes_eur || 0), 0)
+    const netIncome = months.reduce((s, m) => s + (m.net_income_eur || 0), 0)
+    const ebit = months.reduce((s, m) => s + (m.ebit_eur || 0), 0)
+    const ihk = months.reduce((s, m) => s + (m.ihk_eur || 0), 0)
+    const foundingCosts = months.reduce((s, m) => s + (m.founding_costs_eur || 0), 0)
+
+    const totalOpex = personnel + marketing + infra + adminCosts + officeCosts + travelCosts + softwareLicenses + ihk + foundingCosts
+    const ebitda = grossProfit - totalOpex
+    const lastMonth = months[months.length - 1]
+
+    // US GAAP aggregates
+    const rAndD = infra + softwareLicenses
+    const sga = personnel + adminCosts + officeCosts + travelCosts + ihk + foundingCosts
+
+    return {
+      year,
+      revenue,
+      cogs,
+      grossProfit,
+      grossMarginPct: revenue > 0 ? (grossProfit / revenue) * 100 : 0,
+      personnel,
+      marketing,
+      infra,
+      totalOpex,
+      ebitda,
+      ebitdaMarginPct: revenue > 0 ? (ebitda / revenue) * 100 : 0,
+      customers: lastMonth.total_customers,
+      employees: lastMonth.employees_count,
+      adminCosts,
+      officeCosts,
+      travelCosts,
+      softwareLicenses,
+      depreciation,
+      interestExpense,
+      taxes,
+      netIncome,
+      ebit,
+      ihk,
+      foundingCosts,
+      rAndD,
+      sga,
+    }
+  })
+
+  type LineItem = {
+    label: string
+    getValue: (r: AnnualRow) => number
+    isBold?: boolean
+    isPercent?: boolean
+    isSeparator?: boolean
+    isNegative?: boolean
+    isSubRow?: boolean
+  }
+
+  const hgbLineItems: LineItem[] = [
+    { label: 'Umsatzerloese', getValue: r => r.revenue, isBold: true },
+    { label: '- Materialaufwand', getValue: r => r.cogs, isNegative: true },
+    { label: '- Personalaufwand', getValue: r => r.personnel, isNegative: true },
+    { label: '- Abschreibungen', getValue: r => r.depreciation, isNegative: true },
+    { label: '- Sonstige betr. Aufwendungen', getValue: r => r.marketing + r.adminCosts + r.officeCosts + r.travelCosts + r.softwareLicenses + r.ihk + r.foundingCosts + r.infra, isNegative: true, isSeparator: true },
+    { label: '    davon Marketing', getValue: r => r.marketing, isNegative: true, isSubRow: true },
+    { label: '    davon Steuerberater/Recht', getValue: r => r.adminCosts, isNegative: true, isSubRow: true },
+    { label: '    davon Buero/Telefon', getValue: r => r.officeCosts, isNegative: true, isSubRow: true },
+    { label: '    davon Software', getValue: r => r.softwareLicenses, isNegative: true, isSubRow: true },
+    { label: '    davon Reisekosten', getValue: r => r.travelCosts, isNegative: true, isSubRow: true },
+    { label: '    davon Infrastruktur', getValue: r => r.infra, isNegative: true, isSubRow: true },
+    { label: '= Betriebsergebnis (EBIT)', getValue: r => r.ebit, isBold: true, isSeparator: true },
+    { label: '- Zinsaufwand', getValue: r => r.interestExpense, isNegative: true },
+    { label: '= Ergebnis vor Steuern (EBT)', getValue: r => r.ebit - r.interestExpense, isBold: true, isSeparator: true },
+    { label: '- Steuern', getValue: r => r.taxes, isNegative: true },
+    { label: '= Jahresueberschuss', getValue: r => r.netIncome, isBold: true, isSeparator: true },
+    { label: 'Kunden (Jahresende)', getValue: r => r.customers },
+    { label: 'Mitarbeiter', getValue: r => r.employees },
+  ]
+
+  const usgaapLineItems: LineItem[] = [
+    { label: 'Revenue', getValue: r => r.revenue, isBold: true },
+    { label: '- Cost of Revenue (COGS)', getValue: r => r.cogs, isNegative: true },
+    { label: '= Gross Profit', getValue: r => r.grossProfit, isBold: true, isSeparator: true },
+    { label: '  Gross Margin', getValue: r => r.grossMarginPct, isPercent: true },
+    { label: '- Sales & Marketing', getValue: r => r.marketing, isNegative: true },
+    { label: '- Research & Development', getValue: r => r.rAndD, isNegative: true },
+    { label: '- General & Administrative', getValue: r => r.sga, isNegative: true },
+    { label: '- Depreciation & Amortization', getValue: r => r.depreciation, isNegative: true },
+    { label: '= Operating Income (EBIT)', getValue: r => r.ebit, isBold: true, isSeparator: true },
+    { label: '  Operating Margin', getValue: r => r.revenue > 0 ? (r.ebit / r.revenue) * 100 : 0, isPercent: true },
+    { label: '- Interest Expense', getValue: r => r.interestExpense, isNegative: true },
+    { label: '= Income Before Tax (EBT)', getValue: r => r.ebit - r.interestExpense, isBold: true, isSeparator: true },
+    { label: '- Income Tax', getValue: r => r.taxes, isNegative: true },
+    { label: '= Net Income', getValue: r => r.netIncome, isBold: true, isSeparator: true },
+    { label: 'Customers (Year End)', getValue: r => r.customers },
+    { label: 'Employees', getValue: r => r.employees },
+  ]
+
+  const lineItems = standard === 'hgb' ? hgbLineItems : usgaapLineItems
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+      className="overflow-x-auto"
+    >
+      <table className="w-full text-[11px]">
+        <thead>
+          <tr className="border-b border-white/10">
+            <th className="text-left py-2 pr-4 text-white/40 font-medium min-w-[200px]">
+              {standard === 'hgb'
+                ? 'GuV-Position (HGB)'
+                : 'P&L Line Item (US GAAP)'}
+            </th>
+            {rows.map(r => (
+              <th key={r.year} className="text-right py-2 px-2 text-white/50 font-semibold min-w-[80px]">
+                {r.year}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {lineItems.map((item, idx) => (
+            <tr
+              key={idx}
+              className={`${item.isSeparator ? 'border-t border-white/10' : ''}`}
+            >
+              <td className={`py-1.5 pr-4
+                ${item.isBold ? 'text-white font-semibold' : 'text-white/50'}
+                ${item.isPercent ? 'italic text-white/30' : ''}
+                ${item.isSubRow ? 'text-[10px] text-white/30' : ''}
+              `}>
+                {item.label}
+              </td>
+              {rows.map(r => {
+                const val = item.getValue(r)
+                return (
+                  <td
+                    key={r.year}
+                    className={`text-right py-1.5 px-2 font-mono
+                      ${item.isBold ? 'font-semibold' : ''}
+                      ${item.isPercent ? 'text-white/30 italic' : ''}
+                      ${item.isSubRow ? 'text-[10px] text-white/25' : ''}
+                      ${!item.isPercent && val < 0 ? 'text-red-400/80' : ''}
+                      ${!item.isPercent && val > 0 && (item.label.includes('EBIT') || item.label.includes('Net Income') || item.label.includes('Jahresueberschuss') || item.label.includes('Betriebsergebnis')) ? 'text-emerald-400' : ''}
+                      ${!item.isPercent && !item.isBold && !item.isSubRow ? 'text-white/60' : 'text-white'}
+                    `}
+                  >
+                    {item.isPercent
+                      ? `${val.toFixed(1)}%`
+                      : (item.isNegative && val > 0 ? '-' : '') + fmt(Math.abs(val))
+                    }
+                  </td>
+                )
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </motion.div>
+  )
+}

pitch-deck/components/ui/BrandName.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+interface BrandNameProps {
+  className?: string
+  prefix?: boolean
+}
+
+/**
+ * Renders "ComplAI" (or "BreakPilot ComplAI") with the "AI" portion
+ * styled as a gradient to visually distinguish lowercase-L from uppercase-I.
+ */
+export default function BrandName({ className = '', prefix = false }: BrandNameProps) {
+  return (
+    <span className={className}>
+      {prefix && <>BreakPilot </>}
+      Compl<span className="bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">AI</span>
+    </span>
+  )
+}

pitch-deck/components/ui/FeatureMatrix.tsx

@@ -3,6 +3,7 @@
 import { motion } from 'framer-motion'
 import { PitchFeature, Language } from '@/lib/types'
 import { Check, X, Star } from 'lucide-react'
+import BrandName from './BrandName'
 
 interface FeatureMatrixProps {
   features: PitchFeature[]
@@ -34,7 +35,7 @@ export default function FeatureMatrix({ features, lang }: FeatureMatrixProps) {
         <thead>
           <tr className="border-b border-white/10">
             <th className="text-left px-4 py-3 font-medium text-white/60">Feature</th>
-            <th className="px-4 py-3 font-bold text-indigo-400">ComplAI</th>
+            <th className="px-4 py-3 font-bold text-indigo-400"><BrandName /></th>
             <th className="px-4 py-3 font-medium text-white/60">Proliance</th>
             <th className="px-4 py-3 font-medium text-white/60">DataGuard</th>
             <th className="px-4 py-3 font-medium text-white/60">heyData</th>

pitch-deck/components/ui/FinancialChart.tsx

@@ -1,10 +1,7 @@
 'use client'
 
-import { PitchFinancial, Language } from '@/lib/types'
-import { t } from '@/lib/i18n'
+import { FMResult, FMComputeResponse } from '@/lib/types'
 import {
-  BarChart,
-  Bar,
   XAxis,
   YAxis,
   Tooltip,
@@ -12,59 +9,190 @@ import {
   Line,
   ComposedChart,
   Area,
+  ReferenceLine,
+  Brush,
 } from 'recharts'
 
 interface FinancialChartProps {
-  financials: PitchFinancial[]
-  lang: Language
-  growthMultiplier?: number
+  activeResults: FMComputeResponse | null
+  compareResults?: Map<string, FMComputeResponse>
+  compareMode?: boolean
+  scenarioColors?: Record<string, string>
+  lang: 'de' | 'en'
 }
 
-export default function FinancialChart({ financials, lang, growthMultiplier = 1 }: FinancialChartProps) {
-  const i = t(lang)
+export default function FinancialChart({
+  activeResults,
+  compareResults,
+  compareMode = false,
+  scenarioColors = {},
+  lang,
+}: FinancialChartProps) {
+  if (!activeResults) {
+    return (
+      <div className="w-full h-[300px] flex items-center justify-center text-white/30 text-sm">
+        {lang === 'de' ? 'Lade Daten...' : 'Loading data...'}
+      </div>
+    )
+  }
 
-  const data = financials.map((f) => ({
-    year: f.year,
-    [i.financials.revenue]: Math.round(f.revenue_eur * growthMultiplier),
-    [i.financials.costs]: f.costs_eur,
-    [i.financials.customers]: Math.round(f.customers_count * growthMultiplier),
-  }))
+  const results = activeResults.results
+  const breakEvenMonth = activeResults.summary.break_even_month
+
+  // Build chart data — monthly
+  const data = results.map((r) => {
+    const entry: Record<string, number | string> = {
+      label: `${r.year.toString().slice(2)}/${String(r.month_in_year).padStart(2, '0')}`,
+      month: r.month,
+      revenue: Math.round(r.revenue_eur),
+      costs: Math.round(r.total_costs_eur),
+      customers: r.total_customers,
+      cashBalance: Math.round(r.cash_balance_eur),
+    }
+
+    // Add compare scenario data
+    if (compareMode && compareResults) {
+      compareResults.forEach((cr, scenarioId) => {
+        const crMonth = cr.results.find(m => m.month === r.month)
+        if (crMonth) {
+          entry[`revenue_${scenarioId}`] = Math.round(crMonth.revenue_eur)
+          entry[`customers_${scenarioId}`] = crMonth.total_customers
+        }
+      })
+    }
+
+    return entry
+  })
 
   const formatValue = (value: number) => {
-    if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
-    if (value >= 1_000) return `${(value / 1_000).toFixed(0)}k`
+    if (Math.abs(value) >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
+    if (Math.abs(value) >= 1_000) return `${(value / 1_000).toFixed(0)}k`
     return value.toString()
   }
 
   return (
     <div className="w-full h-[300px]">
       <ResponsiveContainer width="100%" height="100%">
-        <ComposedChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+        <ComposedChart data={data} margin={{ top: 10, right: 50, left: 0, bottom: 0 }}>
           <defs>
-            <linearGradient id="revenueGradient" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor="#6366f1" stopOpacity={0.8} />
-              <stop offset="100%" stopColor="#6366f1" stopOpacity={0.2} />
+            <linearGradient id="fmRevenueGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="#6366f1" stopOpacity={0.6} />
+              <stop offset="100%" stopColor="#6366f1" stopOpacity={0.05} />
             </linearGradient>
-            <linearGradient id="costGradient" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor="#f43f5e" stopOpacity={0.6} />
-              <stop offset="100%" stopColor="#f43f5e" stopOpacity={0.1} />
+            <linearGradient id="fmCostGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="#f43f5e" stopOpacity={0.4} />
+              <stop offset="100%" stopColor="#f43f5e" stopOpacity={0.05} />
             </linearGradient>
           </defs>
-          <XAxis dataKey="year" stroke="rgba(255,255,255,0.3)" tick={{ fill: 'rgba(255,255,255,0.5)', fontSize: 12 }} />
-          <YAxis stroke="rgba(255,255,255,0.1)" tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 11 }} tickFormatter={formatValue} />
+
+          <XAxis
+            dataKey="label"
+            stroke="rgba(255,255,255,0.2)"
+            tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 9 }}
+            interval={5}
+          />
+          <YAxis
+            yAxisId="left"
+            stroke="rgba(255,255,255,0.1)"
+            tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }}
+            tickFormatter={formatValue}
+          />
+          <YAxis
+            yAxisId="right"
+            orientation="right"
+            stroke="rgba(255,255,255,0.1)"
+            tick={{ fill: 'rgba(34,197,94,0.5)', fontSize: 10 }}
+          />
+
           <Tooltip
             contentStyle={{
-              background: 'rgba(10, 10, 26, 0.9)',
+              background: 'rgba(10, 10, 26, 0.95)',
               border: '1px solid rgba(255,255,255,0.1)',
               borderRadius: 12,
               color: '#fff',
-              fontSize: 13,
+              fontSize: 11,
+              backdropFilter: 'blur(12px)',
+            }}
+            formatter={(value: number, name: string) => {
+              const label = name === 'revenue' ? (lang === 'de' ? 'Umsatz' : 'Revenue')
+                : name === 'costs' ? (lang === 'de' ? 'Kosten' : 'Costs')
+                : name === 'customers' ? (lang === 'de' ? 'Kunden' : 'Customers')
+                : name === 'cashBalance' ? 'Cash'
+                : name
+              return [name === 'customers' ? value : formatValue(value) + ' EUR', label]
             }}
-            formatter={(value: number) => formatValue(value) + ' EUR'}
           />
-          <Area type="monotone" dataKey={i.financials.revenue} fill="url(#revenueGradient)" stroke="#6366f1" strokeWidth={2} />
-          <Bar dataKey={i.financials.costs} fill="url(#costGradient)" radius={[4, 4, 0, 0]} barSize={30} />
-          <Line type="monotone" dataKey={i.financials.customers} stroke="#22c55e" strokeWidth={2} dot={{ r: 4, fill: '#22c55e' }} yAxisId={0} />
+
+          {/* Break-even reference line */}
+          {breakEvenMonth && (
+            <ReferenceLine
+              x={data[breakEvenMonth - 1]?.label}
+              yAxisId="left"
+              stroke="#22c55e"
+              strokeDasharray="5 5"
+              label={{
+                value: 'Break-Even',
+                fill: '#22c55e',
+                fontSize: 10,
+                position: 'insideTopRight',
+              }}
+            />
+          )}
+
+          {/* Revenue area */}
+          <Area
+            yAxisId="left"
+            type="monotone"
+            dataKey="revenue"
+            fill="url(#fmRevenueGradient)"
+            stroke="#6366f1"
+            strokeWidth={2}
+          />
+
+          {/* Cost area */}
+          <Area
+            yAxisId="left"
+            type="monotone"
+            dataKey="costs"
+            fill="url(#fmCostGradient)"
+            stroke="#f43f5e"
+            strokeWidth={1.5}
+            strokeDasharray="4 4"
+          />
+
+          {/* Customers line */}
+          <Line
+            yAxisId="right"
+            type="monotone"
+            dataKey="customers"
+            stroke="#22c55e"
+            strokeWidth={2}
+            dot={false}
+          />
+
+          {/* Compare mode: overlay other scenarios */}
+          {compareMode && compareResults && Array.from(compareResults.entries()).map(([scenarioId]) => (
+            <Line
+              key={`rev_${scenarioId}`}
+              yAxisId="left"
+              type="monotone"
+              dataKey={`revenue_${scenarioId}`}
+              stroke={scenarioColors[scenarioId] || '#888'}
+              strokeWidth={1.5}
+              strokeOpacity={0.5}
+              dot={false}
+              strokeDasharray="3 3"
+            />
+          ))}
+
+          {/* Brush for zooming */}
+          <Brush
+            dataKey="label"
+            height={20}
+            stroke="rgba(99,102,241,0.4)"
+            fill="rgba(0,0,0,0.3)"
+            travellerWidth={8}
+          />
         </ComposedChart>
       </ResponsiveContainer>
     </div>

pitch-deck/components/ui/FinancialSliders.tsx

@@ -1,52 +1,63 @@
 'use client'
 
-import { Language } from '@/lib/types'
-import { t } from '@/lib/i18n'
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { ChevronDown, ChevronRight } from 'lucide-react'
+import { FMAssumption, Language } from '@/lib/types'
 
 interface FinancialSlidersProps {
-  growthRate: number
-  churnRate: number
-  arpu: number
-  onGrowthChange: (v: number) => void
-  onChurnChange: (v: number) => void
-  onArpuChange: (v: number) => void
+  assumptions: FMAssumption[]
+  onAssumptionChange: (key: string, value: number) => void
   lang: Language
 }
 
 function Slider({
-  label,
-  value,
-  min,
-  max,
-  step,
-  unit,
+  assumption,
   onChange,
+  lang,
 }: {
-  label: string
-  value: number
-  min: number
-  max: number
-  step: number
-  unit: string
-  onChange: (v: number) => void
+  assumption: FMAssumption
+  onChange: (value: number) => void
+  lang: Language
 }) {
+  const value = typeof assumption.value === 'number' ? assumption.value : Number(assumption.value)
+  const label = lang === 'de' ? assumption.label_de : assumption.label_en
+
+  if (assumption.value_type === 'step') {
+    // Display step values as read-only list
+    const steps = Array.isArray(assumption.value) ? assumption.value : []
+    return (
+      <div className="space-y-1">
+        <p className="text-[11px] text-white/50">{label}</p>
+        <div className="flex gap-1.5">
+          {steps.map((s: number, i: number) => (
+            <div key={i} className="flex-1 text-center">
+              <p className="text-[9px] text-white/30">Y{i + 1}</p>
+              <p className="text-xs text-white font-mono">{s}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
   return (
-    <div className="space-y-2">
-      <div className="flex justify-between text-sm">
-        <span className="text-white/60">{label}</span>
-        <span className="font-mono text-white">{value}{unit}</span>
+    <div className="space-y-1.5">
+      <div className="flex justify-between text-[11px]">
+        <span className="text-white/50">{label}</span>
+        <span className="font-mono text-white">{value}{assumption.unit === 'EUR' ? ' EUR' : assumption.unit === '%' ? '%' : ` ${assumption.unit || ''}`}</span>
       </div>
       <input
         type="range"
-        min={min}
-        max={max}
-        step={step}
+        min={assumption.min_value ?? 0}
+        max={assumption.max_value ?? 100}
+        step={assumption.step_size ?? 1}
         value={value}
         onChange={(e) => onChange(parseFloat(e.target.value))}
         className="w-full h-1.5 bg-white/10 rounded-full appearance-none cursor-pointer
           [&::-webkit-slider-thumb]:appearance-none
-          [&::-webkit-slider-thumb]:w-4
-          [&::-webkit-slider-thumb]:h-4
+          [&::-webkit-slider-thumb]:w-3.5
+          [&::-webkit-slider-thumb]:h-3.5
           [&::-webkit-slider-thumb]:rounded-full
           [&::-webkit-slider-thumb]:bg-indigo-500
           [&::-webkit-slider-thumb]:shadow-lg
@@ -58,47 +69,76 @@ function Slider({
   )
 }
 
-export default function FinancialSliders({
-  growthRate,
-  churnRate,
-  arpu,
-  onGrowthChange,
-  onChurnChange,
-  onArpuChange,
-  lang,
-}: FinancialSlidersProps) {
-  const i = t(lang)
+interface CategoryGroup {
+  key: string
+  label: string
+  items: FMAssumption[]
+}
+
+export default function FinancialSliders({ assumptions, onAssumptionChange, lang }: FinancialSlidersProps) {
+  const [openCategories, setOpenCategories] = useState<Set<string>>(new Set(['revenue']))
+
+  // Group assumptions by category
+  const categories: CategoryGroup[] = [
+    { key: 'revenue', label: lang === 'de' ? 'Revenue' : 'Revenue', items: [] },
+    { key: 'costs', label: lang === 'de' ? 'Kosten' : 'Costs', items: [] },
+    { key: 'team', label: 'Team', items: [] },
+    { key: 'admin', label: lang === 'de' ? 'Verwaltung' : 'Administration', items: [] },
+    { key: 'funding', label: 'Funding', items: [] },
+  ]
+
+  for (const a of assumptions) {
+    const cat = categories.find(c => c.key === a.category) || categories[0]
+    cat.items.push(a)
+  }
+
+  const toggleCategory = (key: string) => {
+    setOpenCategories(prev => {
+      const next = new Set(prev)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      return next
+    })
+  }
 
   return (
-    <div className="space-y-5 p-5 bg-white/[0.05] rounded-2xl border border-white/10">
-      <h4 className="text-sm font-medium text-white/60">{i.financials.adjustAssumptions}</h4>
-      <Slider
-        label={i.financials.sliderGrowth}
-        value={growthRate}
-        min={50}
-        max={200}
-        step={10}
-        unit="%"
-        onChange={onGrowthChange}
-      />
-      <Slider
-        label={i.financials.sliderChurn}
-        value={churnRate}
-        min={0}
-        max={15}
-        step={0.5}
-        unit="%"
-        onChange={onChurnChange}
-      />
-      <Slider
-        label={i.financials.sliderArpu}
-        value={arpu}
-        min={200}
-        max={1500}
-        step={50}
-        unit=" EUR"
-        onChange={onArpuChange}
-      />
+    <div className="space-y-1">
+      {categories.filter(c => c.items.length > 0).map((cat) => {
+        const isOpen = openCategories.has(cat.key)
+        return (
+          <div key={cat.key} className="border border-white/[0.06] rounded-xl overflow-hidden">
+            <button
+              onClick={() => toggleCategory(cat.key)}
+              className="w-full flex items-center justify-between px-3 py-2 text-xs text-white/60 hover:text-white/80 transition-colors"
+            >
+              <span className="font-medium">{cat.label}</span>
+              {isOpen ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+            </button>
+            <AnimatePresence>
+              {isOpen && (
+                <motion.div
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: 'auto', opacity: 1 }}
+                  exit={{ height: 0, opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                  className="overflow-hidden"
+                >
+                  <div className="px-3 pb-3 space-y-3">
+                    {cat.items.map((a) => (
+                      <Slider
+                        key={a.key}
+                        assumption={a}
+                        onChange={(val) => onAssumptionChange(a.key, val)}
+                        lang={lang}
+                      />
+                    ))}
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        )
+      })}
     </div>
   )
 }

pitch-deck/components/ui/KPICard.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { TrendingUp, TrendingDown } from 'lucide-react'
+import AnimatedCounter from './AnimatedCounter'
+
+interface KPICardProps {
+  label: string
+  value: number
+  prefix?: string
+  suffix?: string
+  decimals?: number
+  trend?: 'up' | 'down' | 'neutral'
+  color?: string
+  delay?: number
+  subLabel?: string
+}
+
+export default function KPICard({
+  label,
+  value,
+  prefix = '',
+  suffix = '',
+  decimals = 0,
+  trend = 'neutral',
+  color = '#6366f1',
+  delay = 0,
+  subLabel,
+}: KPICardProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, delay }}
+      className="relative overflow-hidden bg-white/[0.06] backdrop-blur-xl border border-white/10 rounded-2xl p-4"
+    >
+      {/* Glow effect */}
+      <div
+        className="absolute -top-8 -right-8 w-24 h-24 rounded-full blur-3xl opacity-20"
+        style={{ backgroundColor: color }}
+      />
+
+      <p className="text-[10px] uppercase tracking-wider text-white/40 mb-1">{label}</p>
+      <div className="flex items-end gap-2">
+        <p className="text-2xl font-bold text-white leading-none">
+          <AnimatedCounter target={value} prefix={prefix} suffix={suffix} duration={1200} decimals={decimals} />
+        </p>
+        {trend !== 'neutral' && (
+          <span className={`flex items-center gap-0.5 text-xs pb-0.5 ${trend === 'up' ? 'text-emerald-400' : 'text-red-400'}`}>
+            {trend === 'up' ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
+          </span>
+        )}
+      </div>
+      {subLabel && (
+        <p className="text-[10px] text-white/30 mt-1">{subLabel}</p>
+      )}
+    </motion.div>
+  )
+}

pitch-deck/components/ui/RunwayGauge.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useEffect, useState } from 'react'
+
+interface RunwayGaugeProps {
+  months: number
+  maxMonths?: number
+  size?: number
+  label?: string
+}
+
+export default function RunwayGauge({ months, maxMonths = 36, size = 140, label = 'Runway' }: RunwayGaugeProps) {
+  const [animatedAngle, setAnimatedAngle] = useState(0)
+  const clampedMonths = Math.min(months, maxMonths)
+  const targetAngle = (clampedMonths / maxMonths) * 270 - 135 // -135 to +135 degrees
+
+  useEffect(() => {
+    const timer = setTimeout(() => setAnimatedAngle(targetAngle), 100)
+    return () => clearTimeout(timer)
+  }, [targetAngle])
+
+  // Color based on runway
+  const getColor = () => {
+    if (months >= 18) return '#22c55e' // green
+    if (months >= 12) return '#eab308' // yellow
+    if (months >= 6) return '#f97316' // orange
+    return '#ef4444' // red
+  }
+
+  const color = getColor()
+  const cx = size / 2
+  const cy = size / 2
+  const radius = (size / 2) - 16
+  const needleLength = radius - 10
+
+  // Arc path for gauge background
+  const startAngle = -135
+  const endAngle = 135
+  const polarToCartesian = (cx: number, cy: number, r: number, deg: number) => {
+    const rad = (deg - 90) * Math.PI / 180
+    return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) }
+  }
+
+  const arcStart = polarToCartesian(cx, cy, radius, startAngle)
+  const arcEnd = polarToCartesian(cx, cy, radius, endAngle)
+  const arcPath = `M ${arcStart.x} ${arcStart.y} A ${radius} ${radius} 0 1 1 ${arcEnd.x} ${arcEnd.y}`
+
+  // Filled arc
+  const filledEnd = polarToCartesian(cx, cy, radius, Math.min(animatedAngle, endAngle))
+  const largeArc = (animatedAngle - startAngle) > 180 ? 1 : 0
+  const filledPath = `M ${arcStart.x} ${arcStart.y} A ${radius} ${radius} 0 ${largeArc} 1 ${filledEnd.x} ${filledEnd.y}`
+
+  // Needle endpoint
+  const needleRad = (animatedAngle - 90) * Math.PI / 180
+  const needleX = cx + needleLength * Math.cos(needleRad)
+  const needleY = cy + needleLength * Math.sin(needleRad)
+
+  const shouldPulse = months < 6
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.8 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.6, delay: 0.3 }}
+      className="flex flex-col items-center"
+    >
+      <div className={`relative ${shouldPulse ? 'animate-pulse' : ''}`} style={{ width: size, height: size * 0.8 }}>
+        <svg width={size} height={size * 0.8} viewBox={`0 0 ${size} ${size * 0.8}`}>
+          {/* Background arc */}
+          <path d={arcPath} fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="8" strokeLinecap="round" />
+
+          {/* Filled arc */}
+          <motion.path
+            d={filledPath}
+            fill="none"
+            stroke={color}
+            strokeWidth="8"
+            strokeLinecap="round"
+            initial={{ pathLength: 0 }}
+            animate={{ pathLength: 1 }}
+            transition={{ duration: 1.5, ease: 'easeOut' }}
+          />
+
+          {/* Tick marks */}
+          {[0, 6, 12, 18, 24, 30, 36].map((tick) => {
+            const tickAngle = (tick / maxMonths) * 270 - 135
+            const inner = polarToCartesian(cx, cy, radius - 12, tickAngle)
+            const outer = polarToCartesian(cx, cy, radius - 6, tickAngle)
+            return (
+              <g key={tick}>
+                <line x1={inner.x} y1={inner.y} x2={outer.x} y2={outer.y} stroke="rgba(255,255,255,0.3)" strokeWidth="1.5" />
+                <text
+                  x={polarToCartesian(cx, cy, radius - 22, tickAngle).x}
+                  y={polarToCartesian(cx, cy, radius - 22, tickAngle).y}
+                  fill="rgba(255,255,255,0.3)"
+                  fontSize="8"
+                  textAnchor="middle"
+                  dominantBaseline="central"
+                >
+                  {tick}
+                </text>
+              </g>
+            )
+          })}
+
+          {/* Needle */}
+          <motion.line
+            x1={cx}
+            y1={cy}
+            x2={needleX}
+            y2={needleY}
+            stroke="white"
+            strokeWidth="2"
+            strokeLinecap="round"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.5 }}
+          />
+
+          {/* Center circle */}
+          <circle cx={cx} cy={cy} r="4" fill={color} />
+          <circle cx={cx} cy={cy} r="2" fill="white" />
+        </svg>
+      </div>
+
+      <div className="text-center -mt-2">
+        <p className="text-lg font-bold" style={{ color }}>{Math.round(months)}</p>
+        <p className="text-[10px] text-white/40 uppercase tracking-wider">{label}</p>
+      </div>
+    </motion.div>
+  )
+}

pitch-deck/components/ui/ScenarioSwitcher.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { FMScenario } from '@/lib/types'
+import { motion } from 'framer-motion'
+
+interface ScenarioSwitcherProps {
+  scenarios: FMScenario[]
+  activeId: string | null
+  compareMode: boolean
+  onSelect: (id: string) => void
+  onToggleCompare: () => void
+  lang: 'de' | 'en'
+}
+
+export default function ScenarioSwitcher({
+  scenarios,
+  activeId,
+  compareMode,
+  onSelect,
+  onToggleCompare,
+  lang,
+}: ScenarioSwitcherProps) {
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <p className="text-[10px] text-white/40 uppercase tracking-wider">
+          {lang === 'de' ? 'Szenarien' : 'Scenarios'}
+        </p>
+        <button
+          onClick={onToggleCompare}
+          className={`text-[10px] px-2 py-1 rounded-lg transition-colors
+            ${compareMode
+              ? 'bg-indigo-500/30 text-indigo-300 border border-indigo-500/40'
+              : 'bg-white/[0.06] text-white/40 border border-white/10 hover:text-white/60'
+            }`}
+        >
+          {lang === 'de' ? 'Vergleichen' : 'Compare'}
+        </button>
+      </div>
+
+      <div className="flex gap-2">
+        {scenarios.map((s) => (
+          <motion.button
+            key={s.id}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => onSelect(s.id)}
+            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs transition-all
+              ${activeId === s.id
+                ? 'bg-white/[0.12] border border-white/20 text-white'
+                : 'bg-white/[0.04] border border-white/10 text-white/50 hover:text-white/70'
+              }`}
+          >
+            <span
+              className="w-2 h-2 rounded-full"
+              style={{ backgroundColor: s.color }}
+            />
+            {s.name}
+          </motion.button>
+        ))}
+      </div>
+    </div>
+  )
+}

pitch-deck/components/ui/UnitEconomicsCards.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import AnimatedCounter from './AnimatedCounter'
+
+interface UnitEconomicsCardsProps {
+  cac: number
+  ltv: number
+  ltvCacRatio: number
+  grossMargin: number
+  churnRate: number
+  lang: 'de' | 'en'
+}
+
+function MiniRing({ progress, color, size = 32 }: { progress: number; color: string; size?: number }) {
+  const radius = (size / 2) - 3
+  const circumference = 2 * Math.PI * radius
+  const offset = circumference - (Math.min(progress, 100) / 100) * circumference
+
+  return (
+    <svg width={size} height={size} className="shrink-0">
+      <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="3" />
+      <motion.circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        fill="none"
+        stroke={color}
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeDasharray={circumference}
+        initial={{ strokeDashoffset: circumference }}
+        animate={{ strokeDashoffset: offset }}
+        transition={{ duration: 1.5, ease: 'easeOut' }}
+        transform={`rotate(-90 ${size / 2} ${size / 2})`}
+      />
+    </svg>
+  )
+}
+
+export default function UnitEconomicsCards({ cac, ltv, ltvCacRatio, grossMargin, churnRate, lang }: UnitEconomicsCardsProps) {
+  const cacPayback = cac > 0 ? Math.ceil(cac / ((ltv / (1 / (churnRate / 100))) || 1)) : 0
+
+  const cards = [
+    {
+      label: 'CAC Payback',
+      value: cacPayback,
+      suffix: lang === 'de' ? ' Mo.' : ' mo.',
+      ring: Math.min((cacPayback / 12) * 100, 100),
+      color: cacPayback <= 6 ? '#22c55e' : cacPayback <= 12 ? '#eab308' : '#ef4444',
+      sub: `CAC: ${cac.toLocaleString('de-DE')} EUR`,
+    },
+    {
+      label: 'LTV',
+      value: Math.round(ltv),
+      suffix: ' EUR',
+      ring: Math.min(ltvCacRatio * 10, 100),
+      color: ltvCacRatio >= 3 ? '#22c55e' : ltvCacRatio >= 1.5 ? '#eab308' : '#ef4444',
+      sub: `LTV/CAC: ${ltvCacRatio.toFixed(1)}x`,
+    },
+    {
+      label: 'Gross Margin',
+      value: grossMargin,
+      suffix: '%',
+      ring: grossMargin,
+      color: grossMargin >= 70 ? '#22c55e' : grossMargin >= 50 ? '#eab308' : '#ef4444',
+      sub: `Churn: ${churnRate}%`,
+    },
+  ]
+
+  return (
+    <div className="grid grid-cols-3 gap-3">
+      {cards.map((card, i) => (
+        <motion.div
+          key={card.label}
+          initial={{ opacity: 0, y: 15 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.6 + i * 0.1 }}
+          className="bg-white/[0.06] backdrop-blur-xl border border-white/10 rounded-xl p-3 text-center"
+        >
+          <div className="flex justify-center mb-2">
+            <MiniRing progress={card.ring} color={card.color} />
+          </div>
+          <p className="text-sm font-bold text-white">
+            <AnimatedCounter target={card.value} suffix={card.suffix} duration={1000} />
+          </p>
+          <p className="text-[10px] text-white/40 mt-0.5">{card.label}</p>
+          <p className="text-[9px] text-white/25 mt-0.5">{card.sub}</p>
+        </motion.div>
+      ))}
+    </div>
+  )
+}

pitch-deck/components/ui/WaterfallChart.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { FMResult } from '@/lib/types'
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  ReferenceLine,
+  Cell,
+} from 'recharts'
+
+interface WaterfallChartProps {
+  results: FMResult[]
+  lang: 'de' | 'en'
+}
+
+export default function WaterfallChart({ results, lang }: WaterfallChartProps) {
+  // Sample quarterly data for cleaner display
+  const quarterlyData = results.filter((_, i) => i % 3 === 0).map((r) => {
+    const netCash = r.revenue_eur - r.total_costs_eur
+    return {
+      label: `${r.year.toString().slice(2)}/Q${Math.ceil(r.month_in_year / 3)}`,
+      month: r.month,
+      revenue: Math.round(r.revenue_eur),
+      costs: Math.round(-r.total_costs_eur),
+      net: Math.round(netCash),
+      cashBalance: Math.round(r.cash_balance_eur),
+    }
+  })
+
+  const formatValue = (value: number) => {
+    if (Math.abs(value) >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
+    if (Math.abs(value) >= 1_000) return `${(value / 1_000).toFixed(0)}k`
+    return value.toString()
+  }
+
+  return (
+    <div className="w-full h-[220px]">
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart data={quarterlyData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+          <XAxis
+            dataKey="label"
+            stroke="rgba(255,255,255,0.3)"
+            tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 9 }}
+            interval={1}
+          />
+          <YAxis
+            stroke="rgba(255,255,255,0.1)"
+            tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }}
+            tickFormatter={formatValue}
+          />
+          <Tooltip
+            contentStyle={{
+              background: 'rgba(10, 10, 26, 0.95)',
+              border: '1px solid rgba(255,255,255,0.1)',
+              borderRadius: 12,
+              color: '#fff',
+              fontSize: 11,
+            }}
+            formatter={(value: number, name: string) => [
+              formatValue(value) + ' EUR',
+              name === 'revenue' ? (lang === 'de' ? 'Umsatz' : 'Revenue')
+                : name === 'costs' ? (lang === 'de' ? 'Kosten' : 'Costs')
+                : 'Net',
+            ]}
+          />
+          <ReferenceLine y={0} stroke="rgba(255,255,255,0.2)" />
+          <Bar dataKey="revenue" radius={[3, 3, 0, 0]} barSize={14}>
+            {quarterlyData.map((entry, i) => (
+              <Cell key={i} fill="rgba(34, 197, 94, 0.7)" />
+            ))}
+          </Bar>
+          <Bar dataKey="costs" radius={[0, 0, 3, 3]} barSize={14}>
+            {quarterlyData.map((entry, i) => (
+              <Cell key={i} fill="rgba(239, 68, 68, 0.5)" />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}