From 9333b7a9c3c5fd34ec68688ccf2a41abc5c56fb1 Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Mon, 20 Apr 2026 18:19:23 +0200
Subject: [PATCH] feat(pitch-deck): Unit Economics chart in Finanzplan + larger
 sub-text + remove Container metric
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Finanzplan Charts tab: new Unit Economics chart showing ACV, Gross Margin,
NRR, EBIT Margin as mini bar charts per year (2026-2030).

BusinessModelSlide: sub-text under Unit Economics increased from 10px → xs (12px).

DB: Removed "Container in Produktion" metric from pitch_metrics + all versions.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/slides/BusinessModelSlide.tsx  |  2 +-
 .../components/slides/FinanzplanSlide.tsx     | 37 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/pitch-deck/components/slides/BusinessModelSlide.tsx b/pitch-deck/components/slides/BusinessModelSlide.tsx
index 3e2620c..fde5e0c 100644
--- a/pitch-deck/components/slides/BusinessModelSlide.tsx
+++ b/pitch-deck/components/slides/BusinessModelSlide.tsx
@@ -144,7 +144,7 @@ export default function BusinessModelSlide({ lang, isWandeldarlehen }: BusinessM
                           <span className="text-xs text-white/40 uppercase tracking-wider">{m.label}</span>
                           <span className={`text-lg font-black ${m.color}`}>{m.value}</span>
                         </div>
-                        <p className="text-[10px] text-white/30">{m.sub}</p>
+                        <p className="text-xs text-white/50">{m.sub}</p>
                       </div>
                     </div>
                   )
diff --git a/pitch-deck/components/slides/FinanzplanSlide.tsx b/pitch-deck/components/slides/FinanzplanSlide.tsx
index 6c58158..f96675c 100644
--- a/pitch-deck/components/slides/FinanzplanSlide.tsx
+++ b/pitch-deck/components/slides/FinanzplanSlide.tsx
@@ -462,6 +462,43 @@ export default function FinanzplanSlide({ lang, investorId, preferredScenarioId,
               <span className="flex items-center gap-1"><span className="w-3 h-2 bg-red-500/40 rounded inline-block" /> {de ? 'Kosten' : 'Costs'}</span>
             </div>
           </GlassCard>
+
+          {/* Unit Economics Chart */}
+          <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: 'Gross Margin', key: 'grossMargin', unit: '%', color: 'text-emerald-300', bg: 'bg-emerald-500/60' },
+                { label: 'NRR', key: 'nrr', unit: '%', color: 'text-purple-300', bg: 'bg-purple-500/60' },
+                { label: 'EBIT Margin', key: 'ebitMargin', unit: '%', color: 'text-amber-300', bg: 'bg-amber-500/60' },
+              ].map((metric, mIdx) => (
+                <div key={mIdx} className="text-center">
+                  <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">
+                    {[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
+                      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` }} />
+                          <span className="text-[8px] text-white/30 mt-0.5">{String(y).slice(2)}</span>
+                        </div>
+                      )
+                    })}
+                  </div>
+                  <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}`
+                    })()}
+                  </p>
+                  <p className="text-[8px] text-white/25">2030</p>
+                </div>
+              ))}
+            </div>
+          </GlassCard>
         </div>
       )}