feat(pitch-deck): interactive charts with Y-axes, click-to-detail, explanations

- All charts now have Y-axis labels with scale
- X-axis with year labels on border lines
- Click any chart → modal with KPI explanation + yearly breakdown
- 8 detail explanations: MRR, EBIT, Headcount, Cash, Rev vs Costs, ACV, Gross Margin, NRR, EBIT Margin
- Unit Economics cards clickable with hover effect
- Compact 2x2 grid for EBIT/Headcount and Cash/RevCost
- ISO 27001 cert moved to Jan 2027 on production

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

pitch-deck/app/api/admin/fp-patch/route.ts

@@ -1,32 +1,17 @@
 import { NextRequest, NextResponse } from 'next/server'
+import { requireAdmin } from '@/lib/admin-auth'
 import pool from '@/lib/db'
 import { computeFinanzplan } from '@/lib/finanzplan/engine'
 
+/** Admin-only: recompute a Finanzplan scenario. */
 export async function POST(request: NextRequest) {
-  const WD = 'c0000000-0000-0000-0000-000000000200'
+  const guard = await requireAdmin(request)
+  if (guard.kind === 'response') return guard.response
+
   const body = await request.json().catch(() => ({}))
-  const results: string[] = []
+  const scenarioId = body.scenarioId || (await pool.query("SELECT id FROM fp_scenarios WHERE is_default = true LIMIT 1")).rows[0]?.id
+  if (!scenarioId) return NextResponse.json({ error: 'No scenario found' }, { status: 404 })
 
-  try {
+  const result = await computeFinanzplan(pool, scenarioId)
-    // ISO Cert: add months m13-m24 (Jan-Dec 2027) at 1500
+  return NextResponse.json({ success: true, scenarioId, cash_m60: result.liquiditaet?.endstand?.m60 })
-    const { rows } = await pool.query(`SELECT id, values FROM fp_betriebliche_aufwendungen WHERE scenario_id=$1 AND row_label ILIKE '%Zertifizierung%'`, [WD])
-    if (rows.length > 0) {
-      const vals = rows[0].values || {}
-      for (let m = 13; m <= 24; m++) {
-        if (!vals[`m${m}`]) vals[`m${m}`] = 1500
-      }
-      await pool.query(`UPDATE fp_betriebliche_aufwendungen SET values=$1 WHERE id=$2`, [JSON.stringify(vals), rows[0].id])
-      results.push('ISO cert from Jan 2027')
-    }
-
-    // Recompute if requested
-    if (body.recompute !== false) {
-      const r = await computeFinanzplan(pool, WD)
-      results.push(`WD cash_m60=${r.liquiditaet?.endstand?.m60}`)
-    }
-  } catch (err) {
-    results.push(`ERROR: ${err instanceof Error ? err.message : String(err)}`)
-  }
-
-  return NextResponse.json({ ok: true, results })
 }

pitch-deck/components/slides/FinanzplanSlide.tsx

@@ -312,180 +312,242 @@ export default function FinanzplanSlide({ lang, investorId, preferredScenarioId,
       )}
 
       {/* === Charts Tab === */}
-      {activeSheet === 'charts' && (
+      {activeSheet === 'charts' && (() => {
-        <div className="space-y-4">
-          {/* MRR + Kunden Chart */}
-          <GlassCard hover={false} className="p-4">
-            <h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-3">{de ? 'MRR & Kundenentwicklung' : 'MRR & Customer Growth'}</h3>
-            <div className="grid grid-cols-5 gap-1 items-end h-48">
-              {(() => {
         const years = ['y2026','y2027','y2028','y2029','y2030']
-                const data = years.map(y => ({ year: y.slice(1), mrr: fpKPIs[y]?.mrr || 0, cust: fpKPIs[y]?.customers || 0 }))
+        const fmtK = (v: number) => Math.abs(v) >= 1000000 ? `${(v/1000000).toFixed(1)}M` : `${Math.round(v/1000)}k`
-                const maxMrr = Math.max(...data.map(d => d.mrr), 1)
+        const fmtV = (v: number) => v.toLocaleString('de-DE')
-                const maxCust = Math.max(...data.map(d => d.cust), 1)
+
-                return data.map(d => ({ ...d, max_mrr: maxMrr, max_cust: maxCust }))
+        // Chart detail modal
-              })().map((d, idx) => (
+        const chartDetails: Record<string, { title: string; desc: string }> = {
-                <div key={idx} className="flex flex-col items-center gap-1">
+          mrr: { title: 'MRR (Monthly Recurring Revenue)', desc: de ? 'Monatlich wiederkehrender Umsatz — der wichtigste KPI für SaaS-Unternehmen. Zeigt die planbaren monatlichen Einnahmen aus laufenden Kundenverträgen. Wachsender MRR = wachsendes Geschäft.' : 'Monthly recurring revenue — the most important KPI for SaaS companies. Shows predictable monthly income from active customer contracts. Growing MRR = growing business.' },
-                  <div className="flex items-end gap-1 w-full justify-center" style={{ height: '160px' }}>
+          ebit: { title: 'EBIT (Earnings Before Interest & Taxes)', desc: de ? 'Operatives Ergebnis vor Zinsen und Steuern — zeigt die tatsächliche Profitabilität des Geschäftsbetriebs. Positiver EBIT = das Geschäftsmodell funktioniert.' : 'Operating profit before interest and taxes — shows actual profitability of operations. Positive EBIT = the business model works.' },
-                    {/* MRR bar */}
+          headcount: { title: de ? 'Personalaufbau' : 'Headcount', desc: de ? 'Geplanter Teamaufbau über 5 Jahre. Wir starten lean mit 2 Gründern und wachsen bedarfsorientiert. Jede Einstellung ist an einen konkreten Meilenstein geknüpft.' : 'Planned team growth over 5 years. We start lean with 2 founders and grow based on demand. Each hire is tied to a concrete milestone.' },
-                    <div className="w-8 bg-indigo-500/60 rounded-t transition-all" style={{ height: `${(d.mrr / d.max_mrr) * 150}px` }}>
+          cash: { title: de ? 'Liquidität (Jahresende)' : 'Cash Position (Year-End)', desc: de ? 'Kontostand am Ende jedes Jahres. Zeigt ob genug Geld für den laufenden Betrieb vorhanden ist. Die Liquiditätskurve berücksichtigt alle Einnahmen, Ausgaben, Investitionen und Finanzierungen.' : 'Bank balance at end of each year. Shows if enough cash is available for operations. The liquidity curve accounts for all revenue, expenses, investments and financing.' },
-                      <div className="text-[11px] text-white/80 text-center -mt-4 whitespace-nowrap font-semibold">
+          revcost: { title: de ? 'Umsatz vs. Gesamtkosten' : 'Revenue vs. Total Costs', desc: de ? 'Vergleich zwischen Einnahmen und Ausgaben. Der Schnittpunkt zeigt den Break-Even — ab dann verdient das Unternehmen mehr als es ausgibt.' : 'Comparison between income and expenses. The intersection shows break-even — from then on, the company earns more than it spends.' },
-                        {d.mrr >= 100000 ? `${Math.round(d.mrr/1000)}k` : d.mrr.toLocaleString('de-DE')}
+          acv: { title: 'ACV (Average Contract Value)', desc: de ? 'Durchschnittlicher Vertragswert pro Kunde und Jahr. Steigender ACV bedeutet: Kunden kaufen mehr Module oder wechseln in höhere Tiers.' : 'Average contract value per customer per year. Rising ACV means: customers buy more modules or upgrade to higher tiers.' },
-                      </div>
+          grossMargin: { title: 'Gross Margin', desc: de ? 'Rohertragsmarge — wieviel Prozent vom Umsatz nach Abzug der direkten Kosten (Cloud-Infrastruktur, Lizenzen) übrig bleibt. Bei SaaS typisch 70-90%.' : 'How much revenue remains after direct costs (cloud infrastructure, licenses). Typical for SaaS: 70-90%.' },
-                    </div>
+          nrr: { title: 'NRR (Net Revenue Retention)', desc: de ? 'Umsatzwachstum durch Bestandskunden — zeigt ob bestehende Kunden mehr ausgeben als sie kündigen. NRR > 100% bedeutet: das Geschäft wächst auch ohne Neukunden.' : 'Revenue growth from existing customers — shows if current customers spend more than they churn. NRR > 100% means: the business grows even without new customers.' },
-                    {/* Kunden bar */}
+          ebitMargin: { title: 'EBIT Margin', desc: de ? 'Operatives Ergebnis in Prozent vom Umsatz. Zeigt die Effizienz des Geschäftsmodells. Ziel für SaaS: 20-30% in der Reifephase.' : 'Operating result as percentage of revenue. Shows business model efficiency. Target for SaaS: 20-30% at maturity.' },
-                    <div className="w-8 bg-emerald-500/60 rounded-t transition-all" style={{ height: `${(d.cust / d.max_cust) * 150}px` }}>
+        }
-                      <div className="text-[11px] text-white/80 text-center -mt-4 whitespace-nowrap font-semibold">{d.cust}</div>
+        const [chartDetail, setChartDetail] = useState<string | null>(null)
-                    </div>
+        const detailInfo = chartDetail ? chartDetails[chartDetail] : null
-                  </div>
-                  <span className="text-[10px] text-white/40">{d.year}</span>
-                </div>
-              ))}
-            </div>
-            <div className="flex justify-center gap-6 mt-2 text-[10px]">
-              <span className="flex items-center gap-1"><span className="w-3 h-2 bg-indigo-500/60 rounded inline-block" /> MRR (€)</span>
-              <span className="flex items-center gap-1"><span className="w-3 h-2 bg-emerald-500/60 rounded inline-block" /> {de ? 'Kunden' : 'Customers'}</span>
-            </div>
-          </GlassCard>
 
-          {/* EBIT + Cash Chart */}
-          <div className="grid md:grid-cols-2 gap-4">
-            <GlassCard hover={false} className="p-4">
-              <h3 className="text-xs font-bold text-purple-400 uppercase tracking-wider mb-3">EBIT</h3>
-              <div className="grid grid-cols-5 gap-1 items-end h-36">
-                {(() => {
-                  const years = ['y2026','y2027','y2028','y2029','y2030']
-                  const data = years.map(y => ({ year: y.slice(1), ebit: fpKPIs[y]?.ebit || 0 }))
-                  const maxAbs = Math.max(...data.map(d => Math.abs(d.ebit)), 1)
-                  return data.map((k, idx) => {
-                    const h = Math.abs(k.ebit) / maxAbs * 100
         return (
-                      <div key={idx} className="flex flex-col items-center">
+        <div className="space-y-4">
-                        <div className="w-10 flex flex-col justify-end" style={{ height: '110px' }}>
+          {/* Detail overlay */}
-                          {k.ebit >= 0 ? (
+          {detailInfo && (
-                            <div className="bg-emerald-500/60 rounded-t w-full" style={{ height: `${h}px` }}>
+            <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={() => setChartDetail(null)}>
-                              <div className="text-[11px] text-emerald-300 text-center -mt-4 whitespace-nowrap font-semibold">{Math.round(k.ebit/1000)}k</div>
+              <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+              <div className="relative bg-slate-900/95 border border-white/10 rounded-2xl p-6 max-w-lg w-full" onClick={e => e.stopPropagation()}>
+                <button onClick={() => setChartDetail(null)} className="absolute top-4 right-4 text-white/40 hover:text-white/80 text-lg">✕</button>
+                <h3 className="text-xl font-bold text-white mb-3">{detailInfo.title}</h3>
+                <p className="text-sm text-white/60 leading-relaxed">{detailInfo.desc}</p>
+                {chartDetail && fpKPIs.y2026 && (
+                  <div className="mt-4 pt-4 border-t border-white/10">
+                    <div className="grid grid-cols-5 gap-2 text-center">
+                      {[2026,2027,2028,2029,2030].map(y => {
+                        const key = chartDetail === 'cash' ? 'liquiditaet' : chartDetail === 'revcost' ? 'revenue' : chartDetail
+                        const v = fpKPIs[`y${y}`]?.[key as keyof typeof fpKPIs['y2026']] as number || 0
+                        return (
+                          <div key={y}>
+                            <div className="text-[10px] text-white/40">{y}</div>
+                            <div className="text-sm font-bold text-white">{typeof v === 'number' && Math.abs(v) >= 1000 ? fmtK(v) : `${v}`}</div>
                           </div>
-                          ) : (
+                        )
-                            <div className="flex flex-col justify-end h-full">
+                      })}
-                              <div className="bg-red-500/60 rounded-b w-full" style={{ height: `${h}px` }}>
-                                <div className="text-[11px] text-red-300 text-center -mt-4 whitespace-nowrap font-semibold">{Math.round(k.ebit/1000)}k</div>
                     </div>
                   </div>
                 )}
               </div>
-                        <span className="text-[10px] text-white/40 mt-1">{k.year}</span>
             </div>
-                    )
+          )}
-                  })
-                })()}
-              </div>
-            </GlassCard>
 
-            <GlassCard hover={false} className="p-4">
+          {/* MRR + Kunden Chart */}
-              <h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider mb-3">{de ? 'Personalaufbau' : 'Headcount'}</h3>
+          <GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('mrr')}>
-              <div className="grid grid-cols-5 gap-1 items-end h-36">
+            <div className="flex items-center justify-between mb-3">
-                {(() => {
+              <h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider">{de ? 'MRR & Kundenentwicklung' : 'MRR & Customer Growth'}</h3>
-                  const years = ['y2026','y2027','y2028','y2029','y2030']
+              <span className="text-[9px] text-white/30">{de ? 'Klicken für Details' : 'Click for details'}</span>
-                  const data = years.map(y => ({ year: y.slice(1), val: fpKPIs[y]?.headcount || 0 }))
-                  const maxEmp = Math.max(...data.map(d => d.val), 1)
-                  return data.map((d, idx) => (
-                      <div key={idx} className="flex flex-col items-center">
-                        <div className="w-10 flex flex-col justify-end" style={{ height: '110px' }}>
-                          <div className="bg-amber-500/60 rounded-t w-full" style={{ height: `${(d.val / maxEmp) * 100}px` }}>
-                            <div className="text-[11px] text-amber-300 text-center -mt-4 font-bold">{d.val}</div>
             </div>
+            <div className="flex">
+              {/* Y-axis labels */}
+              <div className="flex flex-col justify-between h-40 pr-2 text-[9px] text-white/30 text-right" style={{ width: 45 }}>
+                {(() => { const m = Math.max(...years.map(y => fpKPIs[y]?.mrr || 0), 1); return [m, Math.round(m/2), 0].map((v,i) => <span key={i}>{fmtK(v)} €</span>) })()}
               </div>
-                        <span className="text-[10px] text-white/40 mt-1">{d.year}</span>
+              <div className="flex-1 grid grid-cols-5 gap-1 items-end h-40 border-l border-b border-white/10 pl-2 pb-1">
-                      </div>
+                {years.map((y, idx) => {
-                    ))
+                  const d = { mrr: fpKPIs[y]?.mrr || 0, cust: fpKPIs[y]?.customers || 0 }
-                })()}
+                  const maxMrr = Math.max(...years.map(k => fpKPIs[k]?.mrr || 0), 1)
-              </div>
+                  const maxCust = Math.max(...years.map(k => fpKPIs[k]?.customers || 0), 1)
-            </GlassCard>
-          </div>
-
-          {/* Liquidität Chart */}
-          <GlassCard hover={false} className="p-4">
-            <h3 className="text-xs font-bold text-cyan-400 uppercase tracking-wider mb-3">{de ? 'Liquidität (Jahresende)' : 'Cash Position (Year-End)'}</h3>
-            <div className="grid grid-cols-5 gap-1 items-end h-36">
-              {(() => {
-                const years = ['y2026','y2027','y2028','y2029','y2030']
-                const data = years.map(y => ({ year: y.slice(1), val: fpKPIs[y]?.liquiditaet || 0 }))
-                const maxAbs = Math.max(...data.map(d => Math.abs(d.val)), 1)
-                return data.map((d, idx) => {
-                  const h = Math.abs(d.val) / maxAbs * 100
-                  const label = Math.abs(d.val) >= 1000000 ? `${(d.val/1000000).toFixed(1)}M` : `${Math.round(d.val/1000)}k`
                   return (
-                    <div key={idx} className="flex flex-col items-center">
+                    <div key={idx} className="flex flex-col items-center gap-1">
-                      <div className="w-10 flex flex-col justify-end" style={{ height: '110px' }}>
+                      <div className="flex items-end gap-1 w-full justify-center" style={{ height: '130px' }}>
-                        <div className={`${d.val >= 0 ? 'bg-cyan-500/60 rounded-t' : 'bg-red-500/60 rounded-b'} w-full`} style={{ height: `${Math.max(h, 4)}px` }}>
+                        <div className="w-8 bg-indigo-500/60 rounded-t transition-all" style={{ height: `${(d.mrr / maxMrr) * 120}px` }}>
-                          <div className={`text-[11px] ${d.val >= 0 ? 'text-cyan-300' : 'text-red-300'} text-center -mt-4 whitespace-nowrap font-semibold`}>{label}</div>
+                          <div className="text-[10px] text-white/80 text-center -mt-3.5 whitespace-nowrap font-semibold">{fmtK(d.mrr)}</div>
+                        </div>
+                        <div className="w-8 bg-emerald-500/60 rounded-t transition-all" style={{ height: `${(d.cust / maxCust) * 120}px` }}>
+                          <div className="text-[10px] text-white/80 text-center -mt-3.5 whitespace-nowrap font-semibold">{d.cust}</div>
                         </div>
                       </div>
-                      <span className="text-[10px] text-white/40 mt-1">{d.year}</span>
+                      <span className="text-[10px] text-white/50 font-medium">{y.slice(1)}</span>
                     </div>
                   )
-                })
+                })}
-              })()}
               </div>
-          </GlassCard>
-
-          {/* Umsatz vs. Kosten Chart */}
-          <GlassCard hover={false} className="p-4">
-            <h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-3">{de ? 'Umsatz vs. Gesamtkosten' : 'Revenue vs. Total Costs'}</h3>
-            <div className="grid grid-cols-5 gap-1 items-end h-36">
-              {(() => {
-                const years = ['y2026','y2027','y2028','y2029','y2030']
-                const data = years.map(y => ({
-                  year: y.slice(1),
-                  rev: fpKPIs[y]?.revenue || 0,
-                  costs: (fpKPIs[y]?.personal || 0) + Math.abs(fpKPIs[y]?.ebit || 0) + (fpKPIs[y]?.revenue || 0) - (fpKPIs[y]?.ebit || 0) - (fpKPIs[y]?.revenue || 0),
-                }))
-                // Simpler: costs = revenue - ebit
-                const data2 = years.map(y => ({
-                  year: y.slice(1),
-                  rev: fpKPIs[y]?.revenue || 0,
-                  costs: (fpKPIs[y]?.revenue || 0) - (fpKPIs[y]?.ebit || 0),
-                }))
-                const maxVal = Math.max(...data2.map(d => Math.max(d.rev, d.costs)), 1)
-                return data2.map((d, idx) => (
-                  <div key={idx} className="flex flex-col items-center gap-1">
-                    <div className="flex items-end gap-1 w-full justify-center" style={{ height: '100px' }}>
-                      <div className="w-6 bg-indigo-500/60 rounded-t" style={{ height: `${(d.rev / maxVal) * 90}px` }}>
-                        <div className="text-[10px] text-indigo-300 text-center -mt-3 whitespace-nowrap font-semibold">{d.rev >= 1000000 ? `${(d.rev/1000000).toFixed(1)}M` : `${Math.round(d.rev/1000)}k`}</div>
-                      </div>
-                      <div className="w-6 bg-red-500/40 rounded-t" style={{ height: `${(d.costs / maxVal) * 90}px` }}>
-                        <div className="text-[10px] text-red-300 text-center -mt-3 whitespace-nowrap font-semibold">{d.costs >= 1000000 ? `${(d.costs/1000000).toFixed(1)}M` : `${Math.round(d.costs/1000)}k`}</div>
-                      </div>
-                    </div>
-                    <span className="text-[10px] text-white/40">{d.year}</span>
-                  </div>
-                ))
-              })()}
             </div>
             <div className="flex justify-center gap-6 mt-2 text-[10px]">
-              <span className="flex items-center gap-1"><span className="w-3 h-2 bg-indigo-500/60 rounded inline-block" /> {de ? 'Umsatz' : 'Revenue'}</span>
+              <span className="flex items-center gap-1.5"><span className="w-3 h-2 bg-indigo-500/60 rounded inline-block" /> MRR (€/Mon)</span>
-              <span className="flex items-center gap-1"><span className="w-3 h-2 bg-red-500/40 rounded inline-block" /> {de ? 'Kosten' : 'Costs'}</span>
+              <span className="flex items-center gap-1.5"><span className="w-3 h-2 bg-emerald-500/60 rounded inline-block" /> {de ? 'Bestandskunden (Dez)' : 'Customers (Dec)'}</span>
             </div>
           </GlassCard>
 
-          {/* Unit Economics Chart */}
+          {/* EBIT + Headcount */}
+          <div className="grid md:grid-cols-2 gap-4">
+            <GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('ebit')}>
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="text-xs font-bold text-purple-400 uppercase tracking-wider">EBIT</h3>
+                <span className="text-[9px] text-white/30">€/Jahr</span>
+              </div>
+              <div className="flex">
+                <div className="flex flex-col justify-between h-28 pr-2 text-[9px] text-white/30 text-right" style={{ width: 40 }}>
+                  {(() => { const vals = years.map(y => fpKPIs[y]?.ebit || 0); const mx = Math.max(...vals.map(Math.abs), 1); return [fmtK(mx), '0', fmtK(-mx)].map((v,i) => <span key={i}>{v}</span>) })()}
+                </div>
+                <div className="flex-1 grid grid-cols-5 gap-1 items-end h-28 border-l border-white/10 pl-2">
+                  {years.map((y, idx) => {
+                    const v = fpKPIs[y]?.ebit || 0
+                    const maxAbs = Math.max(...years.map(k => Math.abs(fpKPIs[k]?.ebit || 0)), 1)
+                    const h = Math.abs(v) / maxAbs * 90
+                    return (
+                      <div key={idx} className="flex flex-col items-center">
+                        <div className="w-10 flex flex-col justify-end" style={{ height: '100px' }}>
+                          <div className={`${v >= 0 ? 'bg-emerald-500/60 rounded-t' : 'bg-red-500/60 rounded-b'} w-full`} style={{ height: `${h}px` }}>
+                            <div className={`text-[10px] ${v >= 0 ? 'text-emerald-300' : 'text-red-300'} text-center -mt-3.5 whitespace-nowrap font-semibold`}>{fmtK(v)}</div>
+                          </div>
+                        </div>
+                        <span className="text-[10px] text-white/50 mt-1 font-medium">{y.slice(1)}</span>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            </GlassCard>
+
+            <GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('headcount')}>
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider">{de ? 'Personalaufbau' : 'Headcount'}</h3>
+                <span className="text-[9px] text-white/30">{de ? 'Mitarbeiter (Dez)' : 'Employees (Dec)'}</span>
+              </div>
+              <div className="flex">
+                <div className="flex flex-col justify-between h-28 pr-2 text-[9px] text-white/30 text-right" style={{ width: 25 }}>
+                  {(() => { const m = Math.max(...years.map(y => fpKPIs[y]?.headcount || 0), 1); return [m, Math.round(m/2), 0].map((v,i) => <span key={i}>{v}</span>) })()}
+                </div>
+                <div className="flex-1 grid grid-cols-5 gap-1 items-end h-28 border-l border-b border-white/10 pl-2 pb-1">
+                  {years.map((y, idx) => {
+                    const v = fpKPIs[y]?.headcount || 0
+                    const mx = Math.max(...years.map(k => fpKPIs[k]?.headcount || 0), 1)
+                    return (
+                      <div key={idx} className="flex flex-col items-center">
+                        <div className="w-10 flex flex-col justify-end" style={{ height: '90px' }}>
+                          <div className="bg-amber-500/60 rounded-t w-full" style={{ height: `${(v / mx) * 80}px` }}>
+                            <div className="text-[11px] text-amber-300 text-center -mt-3.5 font-bold">{v}</div>
+                          </div>
+                        </div>
+                        <span className="text-[10px] text-white/50 mt-1 font-medium">{y.slice(1)}</span>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            </GlassCard>
+          </div>
+
+          {/* Liquidität + Revenue vs Costs */}
+          <div className="grid md:grid-cols-2 gap-4">
+            <GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('cash')}>
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="text-xs font-bold text-cyan-400 uppercase tracking-wider">{de ? 'Liquidität' : 'Cash Position'}</h3>
+                <span className="text-[9px] text-white/30">{de ? 'Jahresende' : 'Year-End'}</span>
+              </div>
+              <div className="flex">
+                <div className="flex flex-col justify-between h-28 pr-2 text-[9px] text-white/30 text-right" style={{ width: 40 }}>
+                  {(() => { const m = Math.max(...years.map(y => Math.abs(fpKPIs[y]?.liquiditaet || 0)), 1); return [fmtK(m), fmtK(m/2), '0'].map((v,i) => <span key={i}>{v}</span>) })()}
+                </div>
+                <div className="flex-1 grid grid-cols-5 gap-1 items-end h-28 border-l border-b border-white/10 pl-2 pb-1">
+                  {years.map((y, idx) => {
+                    const v = fpKPIs[y]?.liquiditaet || 0
+                    const mx = Math.max(...years.map(k => Math.abs(fpKPIs[k]?.liquiditaet || 0)), 1)
+                    const h = Math.abs(v) / mx * 90
+                    return (
+                      <div key={idx} className="flex flex-col items-center">
+                        <div className="w-10 flex flex-col justify-end" style={{ height: '90px' }}>
+                          <div className={`${v >= 0 ? 'bg-cyan-500/60 rounded-t' : 'bg-red-500/60 rounded-b'} w-full`} style={{ height: `${Math.max(h, 4)}px` }}>
+                            <div className={`text-[10px] ${v >= 0 ? 'text-cyan-300' : 'text-red-300'} text-center -mt-3.5 whitespace-nowrap font-semibold`}>{fmtK(v)}</div>
+                          </div>
+                        </div>
+                        <span className="text-[10px] text-white/50 mt-1 font-medium">{y.slice(1)}</span>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            </GlassCard>
+
+            <GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('revcost')}>
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider">{de ? 'Umsatz vs. Kosten' : 'Revenue vs. Costs'}</h3>
+                <span className="text-[9px] text-white/30">€/Jahr</span>
+              </div>
+              <div className="flex">
+                <div className="flex flex-col justify-between h-28 pr-2 text-[9px] text-white/30 text-right" style={{ width: 40 }}>
+                  {(() => {
+                    const d = years.map(y => ({ rev: fpKPIs[y]?.revenue || 0, costs: (fpKPIs[y]?.revenue || 0) - (fpKPIs[y]?.ebit || 0) }))
+                    const mx = Math.max(...d.map(x => Math.max(x.rev, x.costs)), 1)
+                    return [fmtK(mx), fmtK(mx/2), '0'].map((v,i) => <span key={i}>{v}</span>)
+                  })()}
+                </div>
+                <div className="flex-1 grid grid-cols-5 gap-1 items-end h-28 border-l border-b border-white/10 pl-2 pb-1">
+                  {(() => {
+                    const data = years.map(y => ({ year: y.slice(1), rev: fpKPIs[y]?.revenue || 0, costs: (fpKPIs[y]?.revenue || 0) - (fpKPIs[y]?.ebit || 0) }))
+                    const mx = Math.max(...data.map(d => Math.max(d.rev, d.costs)), 1)
+                    return data.map((d, idx) => (
+                      <div key={idx} className="flex flex-col items-center gap-1">
+                        <div className="flex items-end gap-1 w-full justify-center" style={{ height: '90px' }}>
+                          <div className="w-6 bg-indigo-500/60 rounded-t" style={{ height: `${(d.rev / mx) * 80}px` }}>
+                            <div className="text-[9px] text-indigo-300 text-center -mt-3 whitespace-nowrap font-semibold">{fmtK(d.rev)}</div>
+                          </div>
+                          <div className="w-6 bg-red-500/40 rounded-t" style={{ height: `${(d.costs / mx) * 80}px` }}>
+                            <div className="text-[9px] text-red-300 text-center -mt-3 whitespace-nowrap font-semibold">{fmtK(d.costs)}</div>
+                          </div>
+                        </div>
+                        <span className="text-[10px] text-white/50 font-medium">{d.year}</span>
+                      </div>
+                    ))
+                  })()}
+                </div>
+              </div>
+              <div className="flex justify-center gap-4 mt-2 text-[9px]">
+                <span className="flex items-center gap-1"><span className="w-3 h-1.5 bg-indigo-500/60 rounded inline-block" /> {de ? 'Umsatz' : 'Revenue'}</span>
+                <span className="flex items-center gap-1"><span className="w-3 h-1.5 bg-red-500/40 rounded inline-block" /> {de ? 'Kosten' : 'Costs'}</span>
+              </div>
+            </GlassCard>
+          </div>
+
+          {/* Unit Economics — clickable cards */}
           <GlassCard hover={false} className="p-4">
             <h3 className="text-xs font-bold text-purple-400 uppercase tracking-wider mb-3">Unit Economics (2026–2030)</h3>
             <div className="grid md:grid-cols-4 gap-3">
               {[
-                { label: 'ACV', key: 'arpu', unit: '€', color: 'text-indigo-300', bg: 'bg-indigo-500/60' },
+                { label: 'ACV', key: 'arpu', unit: '€', color: 'text-indigo-300', bg: 'bg-indigo-500/60', detail: 'acv' },
-                { label: 'Gross Margin', key: 'grossMargin', unit: '%', color: 'text-emerald-300', bg: 'bg-emerald-500/60' },
+                { label: 'Gross Margin', key: 'grossMargin', unit: '%', color: 'text-emerald-300', bg: 'bg-emerald-500/60', detail: 'grossMargin' },
-                { label: 'NRR', key: 'nrr', unit: '%', color: 'text-purple-300', bg: 'bg-purple-500/60' },
+                { label: 'NRR', key: 'nrr', unit: '%', color: 'text-purple-300', bg: 'bg-purple-500/60', detail: 'nrr' },
-                { label: 'EBIT Margin', key: 'ebitMargin', unit: '%', color: 'text-amber-300', bg: 'bg-amber-500/60' },
+                { label: 'EBIT Margin', key: 'ebitMargin', unit: '%', color: 'text-amber-300', bg: 'bg-amber-500/60', detail: 'ebitMargin' },
               ].map((metric, mIdx) => (
-                <div key={mIdx} className="text-center">
+                <div key={mIdx} className="text-center cursor-pointer hover:bg-white/[0.03] rounded-lg p-2 transition-colors" onClick={() => setChartDetail(metric.detail)}>
                   <p className={`text-[10px] font-bold ${metric.color} uppercase tracking-wider mb-2`}>{metric.label}</p>
-                  <div className="flex items-end justify-center gap-1 h-20">
+                  <div className="flex items-end justify-center gap-1 h-16">
                     {[2026,2027,2028,2029,2030].map((y, idx) => {
                       const val = fpKPIs[`y${y}`]?.[metric.key as keyof typeof fpKPIs['y2026']] as number || 0
                       const maxVal = Math.max(...[2026,2027,2028,2029,2030].map(yr => Math.abs(fpKPIs[`y${yr}`]?.[metric.key as keyof typeof fpKPIs['y2026']] as number || 0)), 1)
-                      const h = Math.abs(val) / maxVal * 60
+                      const h = Math.abs(val) / maxVal * 50
                       return (
                         <div key={idx} className="flex flex-col items-center">
                           <div className={`w-4 ${val >= 0 ? metric.bg + ' rounded-t' : 'bg-red-500/60 rounded-b'}`} style={{ height: `${Math.max(h, 2)}px` }} />
@@ -497,7 +559,7 @@ export default function FinanzplanSlide({ lang, investorId, preferredScenarioId,
                   <p className={`text-sm font-bold ${metric.color} mt-1`}>
                     {(() => {
                       const v = fpKPIs.y2030?.[metric.key as keyof typeof fpKPIs['y2026']] as number || 0
-                      return metric.unit === '€' ? `${v.toLocaleString('de-DE')}${metric.unit}` : `${v}${metric.unit}`
+                      return metric.unit === '€' ? `${fmtV(v)}${metric.unit}` : `${v}${metric.unit}`
                     })()}
                   </p>
                   <p className="text-[8px] text-white/25">2030</p>
@@ -506,7 +568,8 @@ export default function FinanzplanSlide({ lang, investorId, preferredScenarioId,
             </div>
           </GlassCard>
         </div>
-      )}
+        )
+      })()}
 
       {/* Year Navigation — not for GuV, KPIs, Charts */}
       {!['guv', 'kpis', 'charts'].includes(activeSheet) && (

pitch-deck/middleware.ts

@@ -6,7 +6,6 @@ const PUBLIC_PATHS = [
   '/auth',                    // investor login pages
   '/api/auth',                // investor auth API
   '/api/health',
-  '/api/admin/fp-patch',
   '/api/admin-auth',          // admin login API
   '/pitch-admin/login',       // admin login page
   '/_next',