From ffc5081c6e4eb5afadd4421fb4f8bda4eb6c2843 Mon Sep 17 00:00:00 2001
From: Floke <floke.com@gmail.com>
Date: Mon, 1 Jun 2026 22:04:52 +0000
Subject: [PATCH] docs: C-Level Story Refinement - High-Fidelity DGS GmbH
 Visual inkl. Lifecycle Timeline integriert

---
 .../Sales_Intelligence_Cockpit_CLevel.html    | 99 +++++++++++++------
 1 file changed, 68 insertions(+), 31 deletions(-)

diff --git a/docs/Praesentation/Sales_Intelligence_Cockpit_CLevel.html b/docs/Praesentation/Sales_Intelligence_Cockpit_CLevel.html
index 58354fd84..41609617b 100644
--- a/docs/Praesentation/Sales_Intelligence_Cockpit_CLevel.html
+++ b/docs/Praesentation/Sales_Intelligence_Cockpit_CLevel.html
@@ -95,45 +95,82 @@
         </section>
 
         <!-- 2. VORTEILE: KLARHEIT -->
-        <section class="slide" id="vorteile">
-            <div class="story-text">
-                <h2 class="text-5xl font-black italic mb-8 leading-tight">Vorteile: <br><span class="text-blue-500">Struktur schlägt Chaos.</span></h2>
-                <div class="space-y-6">
-                    <div class="flex gap-4">
-                        <div class="w-8 h-8 rounded-full bg-emerald-500/20 flex items-center justify-center text-emerald-500 shrink-0">✓</div>
-                        <p class="text-slate-300 text-lg">Keine Excel-Wüsten mit 50 Spalten. Informationen sind logisch <span class="text-white font-bold italic">am Account gruppiert</span>.</p>
-                    </div>
-                    <div class="flex gap-4">
-                        <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-500 shrink-0">✓</div>
-                        <p class="text-slate-300 text-lg">Ein Klick statt endlosem Suchen. Die Historie und der nächste Schritt sind sofort sichtbar.</p>
-                    </div>
-                </div>
-            </div>
-            <div class="visual-container">
-                <!-- Account Detail Card -->
-                <div class="visual-element glass-panel border-blue-500/30 scale-110">
-                    <div class="flex justify-between items-start mb-6">
+        
<div class="visual-container">
+            <div class="visual-element glass-panel border-blue-500/30 scale-100 p-0 overflow-hidden">
+                <!-- Header / Row View -->
+                <div class="p-6 bg-slate-900/80 border-b border-slate-800">
+                    <div class="flex justify-between items-start mb-4">
                         <div>
-                            <div class="text-[10px] font-bold text-blue-500 uppercase mb-1">Live Account View</div>
-                            <h3 class="text-xl font-black text-white leading-none">Bayernwerk Netz GmbH</h3>
+                            <h3 class="text-2xl font-black text-white leading-tight">DGS GmbH</h3>
+                            <div class="text-blue-400 text-sm font-semibold">(Paul Goliasch)</div>
+                        </div>
+                        <div class="text-right">
+                            <div class="text-2xl font-black text-white">56.996 €</div>
+                            <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Deal Volumen</div>
                         </div>
-                        <span class="px-2 py-1 bg-emerald-500/10 text-emerald-500 text-[8px] font-bold rounded border border-emerald-500/20 uppercase">Validiert</span>
                     </div>
-                    <div class="grid grid-cols-2 gap-4">
-                        <div class="p-3 bg-slate-900/50 rounded-lg border border-slate-800">
-                            <div class="text-[8px] text-slate-500 uppercase font-bold mb-1">Letzte Aktivität</div>
-                            <div class="text-[11px] font-semibold text-slate-200 leading-tight">Angebot versendet (V5)</div>
-                            <div class="text-[9px] text-slate-500 mt-1">vor 2 Tagen • I. Akar</div>
+                    
+                    <div class="flex flex-wrap gap-2 mb-4">
+                        <span class="px-2 py-0.5 bg-red-500/10 text-red-500 text-[9px] font-bold rounded border border-red-500/20 uppercase">Overdue Date</span>
+                        <span class="px-2 py-0.5 bg-orange-500/10 text-orange-400 text-[9px] font-bold rounded border border-orange-500/20 uppercase">Missing Contract Type</span>
+                    </div>
+
+                    <div class="text-xs text-slate-300 italic mb-4">"3 x CC1 Pro mit Nachlass"</div>
+
+                    <!-- Row-Data-Grid (Dashboard Style) -->
+                    <div class="grid grid-cols-4 gap-2 py-3 border-y border-slate-800/50">
+                        <div class="text-center">
+                            <div class="text-slate-500 text-[10px] mb-1">📍 Ort</div>
+                            <div class="text-[10px] font-mono">03.12.25</div>
                         </div>
-                        <div class="p-3 bg-blue-600/10 rounded-lg border border-blue-500/20">
-                            <div class="text-[8px] text-blue-400 uppercase font-bold mb-1">Nächster Schritt</div>
-                            <div class="text-[11px] font-semibold text-blue-100 leading-tight">Follow-up Telefonat</div>
-                            <div class="text-[9px] text-blue-400/60 mt-1">Morgen, 10:00 Uhr</div>
+                        <div class="text-center">
+                            <div class="text-slate-500 text-[10px] mb-1">📞 Call</div>
+                            <div class="text-[10px] font-mono">29.04.26</div>
+                        </div>
+                        <div class="text-center">
+                            <div class="text-slate-500 text-[10px] mb-1">✉️ Mail</div>
+                            <div class="text-[10px] font-mono">01.12.25</div>
+                        </div>
+                        <div class="text-center">
+                            <div class="text-slate-500 text-[10px] mb-1">Status</div>
+                            <div class="text-[10px] font-bold text-blue-500 uppercase">Open</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Lifecycle Timeline Part -->
+                <div class="p-6 bg-slate-900/40">
+                    <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-6">Customer Lifecycle Timeline</div>
+                    
+                    <div class="relative space-y-6 before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-0.5 before:bg-slate-800">
+                        <!-- Step 1 -->
+                        <div class="relative pl-8">
+                            <div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center text-[10px] font-bold text-white shadow-[0_0_15px_rgba(16,185,129,0.5)]">1</div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-xs font-bold text-white">Erster Kontakt</span>
+                                <span class="text-[10px] text-slate-500">19.08.2025</span>
+                            </div>
+                        </div>
+                        <!-- Step 2 -->
+                        <div class="relative pl-8">
+                            <div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-[10px] font-bold text-white shadow-[0_0_15px_rgba(59,130,246,0.5)]">2</div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-xs font-bold text-white">Angebot erstellt</span>
+                                <span class="text-[10px] text-slate-500">30.03.2026</span>
+                            </div>
+                        </div>
+                        <!-- Step 3 -->
+                        <div class="relative pl-8 opacity-40">
+                            <div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-slate-700 flex items-center justify-center text-[10px] font-bold text-white">3</div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-xs font-bold text-slate-400">Verkauf (Won)</span>
+                                <span class="text-[10px] text-slate-500 italic">Ausstehend</span>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </section>
+</div>
 
         <!-- 3. UI TEASER: NAVIGATION -->
         <section class="slide" id="ui-teaser">