From 952c08ede4bf78b4874b1429481f2669c77f526e Mon Sep 17 00:00:00 2001
From: Floke <floke.com@gmail.com>
Date: Tue, 2 Jun 2026 06:08:55 +0000
Subject: [PATCH] =?UTF-8?q?[37288f42]=20Docs:=20Kontrast-Fix=20&=20Logo-Up?=
 =?UTF-8?q?date=20f=C3=BCr=20C-Level=20Pr=C3=A4sentation=20v2.0=20(High=20?=
 =?UTF-8?q?Contrast=20Edition)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Sales_Intelligence_Cockpit_CLevel_v2.html | 142 +++++++++---------
 1 file changed, 73 insertions(+), 69 deletions(-)

diff --git a/docs/Praesentation/Sales_Intelligence_Cockpit_CLevel_v2.html b/docs/Praesentation/Sales_Intelligence_Cockpit_CLevel_v2.html
index 347e7a9f4..ee19e4836 100644
--- a/docs/Praesentation/Sales_Intelligence_Cockpit_CLevel_v2.html
+++ b/docs/Praesentation/Sales_Intelligence_Cockpit_CLevel_v2.html
@@ -6,19 +6,19 @@
     <title>Sales Intelligence Cockpit | RoboPlanet</title>
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- GSAP & ScrollTrigger (Local) -->
-    <script src="lib/gsap.min.js"></script>
-    <script src="lib/ScrollTrigger.min.js"></script>
+    <!-- GSAP & ScrollTrigger (CDN for maximum compatibility) -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
     
     <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap" rel="stylesheet">
     
     <style>
         :root {
-            --robo-blue: #2563eb;
-            --robo-dark-blue: #1e40af;
-            --bg-light: #f8fafc;
-            --text-main: #0f172a;
-            --text-muted: #64748b;
+            --robo-blue: #1d4ed8; /* Darker Blue for contrast */
+            --robo-dark-blue: #1e3a8a;
+            --bg-light: #ffffff; /* Stark White for contrast */
+            --text-main: #020617; /* Near Black */
+            --text-muted: #475569; /* Darker Slate for better readability on projectors */
         }
 
         body {
@@ -40,6 +40,7 @@
             padding: 0 8%;
             position: relative;
             overflow: hidden;
+            border-bottom: 1px solid #f1f5f9;
         }
 
         .split-layout {
@@ -63,12 +64,12 @@
             justify-content: center;
         }
 
-        /* UI Element Styling */
+        /* UI Element Styling - Higher Contrast */
         .dashboard-card {
             background: white;
-            border: 1px solid #e2e8f0;
+            border: 2px solid #e2e8f0; /* Thicker border */
             border-radius: 1.5rem;
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
+            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); /* Stronger shadow */
             padding: 2.5rem;
             width: 100%;
             max-width: 650px;
@@ -77,15 +78,15 @@
         .kpi-card {
             background: white;
             border-radius: 1.25rem;
-            border: 1px solid #e2e8f0;
+            border: 2px solid #e2e8f0;
             padding: 2rem;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
         }
 
         /* Scrollytelling Transitions */
         .visual-element {
             position: absolute;
-            opacity: 0;
+            opacity: 0; /* Default invisible, JS will show them */
             transform: translateY(40px);
             pointer-events: none;
             width: 100%;
@@ -93,6 +94,13 @@
             justify-content: center;
         }
 
+        /* Fallback if JS fails */
+        .no-js .visual-element {
+            opacity: 1 !important;
+            position: relative !important;
+            transform: none !important;
+        }
+
         .visual-element.active {
             opacity: 1;
             transform: translateY(0);
@@ -103,7 +111,7 @@
             position: fixed;
             top: 0;
             left: 0;
-            height: 6px;
+            height: 8px; /* Thicker for visibility */
             background: var(--robo-blue);
             z-index: 100;
         }
@@ -112,34 +120,30 @@
             position: fixed;
             top: 3rem;
             left: 3rem;
-            width: 14rem;
+            width: 15rem;
             z-index: 50;
         }
 
         h1, h2 {
             letter-spacing: -0.03em;
+            color: var(--text-main);
         }
 
+        .text-slate-500 { color: #334155 !important; } /* Darker slate */
+        .text-slate-400 { color: #475569 !important; }
+
         .highlight-blue {
             color: var(--robo-blue);
         }
-
-        .manager-dot {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            display: inline-block;
-            margin-right: 8px;
-        }
     </style>
 </head>
-<body>
+<body class="loading">
 
     <div class="progress-bar" id="progressBar" style="width: 0%;"></div>
 
     <!-- Logo Area -->
     <div class="logo">
-        <img src="ROBOPLANET-Logo-2024_blue-white_4c.svg" alt="RoboPlanet Logo" class="w-full">
+        <img src="ROBOPLANET-Logo-2024_blue-black_4c.svg" alt="RoboPlanet Logo" class="w-full">
     </div>
 
     <main id="main">
@@ -148,37 +152,37 @@
         <section class="slide" id="slide1">
             <div class="split-layout">
                 <div class="story-content">
-                    <span class="text-blue-600 font-bold uppercase tracking-[0.2em] text-xs mb-6 block">Executive Briefing</span>
-                    <h2 class="text-7xl font-extrabold mb-10 leading-[1.1]">Die Ausgangslage: <br><span class="text-slate-300">Verteilte Sichten.</span></h2>
-                    <p class="text-2xl text-slate-500 leading-relaxed mb-10 font-light">
+                    <span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-sm mb-6 block">Executive Briefing</span>
+                    <h2 class="text-7xl font-extrabold mb-10 leading-[1.1]">Die Ausgangslage: <br><span class="text-slate-400">Verteilte Sichten.</span></h2>
+                    <p class="text-2xl text-slate-700 leading-relaxed mb-10 font-medium">
                         Daten waren vorhanden – aber nicht schnell genug operativ nutzbar. Fragmentierung machte eine einheitliche Steuerung schwierig.
                     </p>
                     <div class="space-y-6">
-                        <div class="flex items-center gap-4 text-xl font-semibold text-slate-700">
-                            <div class="w-3 h-3 rounded-full bg-blue-600"></div> Manuelle Reports statt Live-Sicht
+                        <div class="flex items-center gap-4 text-xl font-bold text-slate-800">
+                            <div class="w-4 h-4 rounded-full bg-blue-700"></div> Manuelle Reports statt Live-Sicht
                         </div>
-                        <div class="flex items-center gap-4 text-xl font-semibold text-slate-700">
-                            <div class="w-3 h-3 rounded-full bg-blue-600"></div> Verteilte Informationen statt operativer Sicht
+                        <div class="flex items-center gap-4 text-xl font-bold text-slate-800">
+                            <div class="w-4 h-4 rounded-full bg-blue-700"></div> Verteilte Informationen statt operativer Sicht
                         </div>
-                        <div class="flex items-center gap-4 text-xl font-semibold text-slate-700">
-                            <div class="w-3 h-3 rounded-full bg-blue-600"></div> Erschwerte Priorisierung im Tagesgeschäft
+                        <div class="flex items-center gap-4 text-xl font-bold text-slate-800">
+                            <div class="w-4 h-4 rounded-full bg-blue-700"></div> Erschwerte Priorisierung im Tagesgeschäft
                         </div>
                     </div>
                 </div>
                 <div class="visual-area">
                     <div class="visual-element active" id="visual1">
                         <div class="relative w-[500px] h-[400px]">
-                            <div class="absolute top-0 left-0 kpi-card w-64 opacity-40 shadow-xl border-slate-200">
-                                <div class="h-4 w-full bg-slate-100 rounded mb-2"></div>
-                                <div class="h-4 w-2/3 bg-slate-50 rounded"></div>
+                            <div class="absolute top-0 left-0 kpi-card w-72 shadow-2xl border-slate-300">
+                                <div class="h-5 w-full bg-slate-100 rounded mb-3"></div>
+                                <div class="h-5 w-2/3 bg-slate-100 rounded"></div>
                             </div>
-                            <div class="absolute top-20 right-0 kpi-card w-64 opacity-60 shadow-2xl border-slate-200">
-                                <div class="h-4 w-full bg-slate-100 rounded mb-2"></div>
-                                <div class="h-4 w-1/2 bg-slate-50 rounded"></div>
+                            <div class="absolute top-24 right-0 kpi-card w-72 shadow-2xl border-slate-300">
+                                <div class="h-5 w-full bg-slate-100 rounded mb-3"></div>
+                                <div class="h-5 w-1/2 bg-slate-100 rounded"></div>
                             </div>
-                            <div class="absolute bottom-10 left-10 kpi-card w-64 opacity-30 shadow-lg border-slate-200">
-                                <div class="h-4 w-full bg-slate-100 rounded mb-2"></div>
-                                <div class="h-4 w-3/4 bg-slate-50 rounded"></div>
+                            <div class="absolute bottom-10 left-10 kpi-card w-72 shadow-2xl border-slate-300">
+                                <div class="h-5 w-full bg-slate-100 rounded mb-3"></div>
+                                <div class="h-5 w-3/4 bg-slate-100 rounded"></div>
                             </div>
                         </div>
                     </div>
@@ -190,57 +194,57 @@
         <section class="slide" id="slide2">
             <div class="split-layout">
                 <div class="story-content">
-                    <h2 class="text-7xl font-extrabold mb-10 leading-[1.1]">Das Cockpit: <br><span class="text-blue-600">Alles Wesentliche auf einer Seite.</span></h2>
-                    <p class="text-2xl text-slate-500 leading-relaxed mb-10 font-light">
+                    <h2 class="text-7xl font-extrabold mb-10 leading-[1.1]">Das Cockpit: <br><span class="text-blue-700">Alles auf einer Seite.</span></h2>
+                    <p class="text-2xl text-slate-700 leading-relaxed mb-10 font-medium">
                         Das Dashboard bündelt CRM-Daten zu einer operativen Kommandozentrale. Account, Sale, Aktivitäten und nächste Schritte auf einen Blick.
                     </p>
-                    <div class="bg-blue-50/50 border-l-[6px] border-blue-600 p-8 rounded-r-2xl">
-                        <p class="text-blue-900 text-2xl font-bold italic">"Eine Seite statt zehn Klicks."</p>
+                    <div class="bg-blue-600 text-white p-8 rounded-2xl shadow-xl">
+                        <p class="text-2xl font-bold italic">"Eine Seite statt zehn Klicks."</p>
                     </div>
                 </div>
                 <div class="visual-area">
                     <div class="visual-element" id="visual2">
-                        <div class="dashboard-card border-blue-100">
+                        <div class="dashboard-card border-slate-300">
                             <div class="flex justify-between items-start mb-8">
                                 <div>
-                                    <h3 class="text-3xl font-extrabold text-slate-900 mb-1">DGS GmbH</h3>
-                                    <div class="text-blue-600 font-bold text-lg">Paul Goliasch</div>
+                                    <h3 class="text-4xl font-extrabold text-slate-900 mb-1">DGS GmbH</h3>
+                                    <div class="text-blue-700 font-bold text-xl">Paul Goliasch</div>
                                 </div>
                                 <div class="text-right">
-                                    <div class="text-3xl font-black text-slate-900">56.996 €</div>
-                                    <div class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">Deal Volumen</div>
+                                    <div class="text-4xl font-black text-slate-900">56.996 €</div>
+                                    <div class="text-[12px] font-bold text-slate-500 uppercase tracking-[0.2em]">Deal Volumen</div>
                                 </div>
                             </div>
                             
-                            <div class="flex gap-3 mb-8">
-                                <span class="px-3 py-1.5 bg-red-50 text-red-600 text-[10px] font-bold rounded-lg border border-red-100">OVERDUE DATE</span>
-                                <span class="px-3 py-1.5 bg-blue-50 text-blue-600 text-[10px] font-bold rounded-lg border border-blue-100">SERVICE ROBOTICS</span>
+                            <div class="flex gap-4 mb-8">
+                                <span class="px-4 py-2 bg-red-600 text-white text-[11px] font-black rounded-lg">OVERDUE DATE</span>
+                                <span class="px-4 py-2 bg-blue-700 text-white text-[11px] font-black rounded-lg">SERVICE ROBOTICS</span>
                             </div>
 
-                            <div class="grid grid-cols-4 gap-6 py-6 border-y border-slate-100 mb-8">
+                            <div class="grid grid-cols-4 gap-6 py-8 border-y-2 border-slate-100 mb-8">
                                 <div class="text-center">
-                                    <div class="text-slate-400 text-[10px] uppercase font-bold mb-2">Ort</div>
-                                    <div class="font-bold text-lg">Neuching</div>
+                                    <div class="text-slate-500 text-[11px] uppercase font-bold mb-2">Ort</div>
+                                    <div class="font-extrabold text-xl">Neuching</div>
                                 </div>
                                 <div class="text-center">
-                                    <div class="text-slate-400 text-[10px] uppercase font-bold mb-2">Letzter Call</div>
-                                    <div class="font-bold text-lg">Gestern</div>
+                                    <div class="text-slate-500 text-[11px] uppercase font-bold mb-2">Letzter Call</div>
+                                    <div class="font-extrabold text-xl">Gestern</div>
                                 </div>
                                 <div class="text-center">
-                                    <div class="text-slate-400 text-[10px] uppercase font-bold mb-2">Timeline</div>
-                                    <div class="font-bold text-lg">Schritt 2</div>
+                                    <div class="text-slate-500 text-[11px] uppercase font-bold mb-2">Timeline</div>
+                                    <div class="font-extrabold text-xl">Schritt 2</div>
                                 </div>
                                 <div class="text-center">
-                                    <div class="text-slate-400 text-[10px] uppercase font-bold mb-2">Status</div>
-                                    <div class="font-bold text-blue-600 text-lg italic uppercase">Offen</div>
+                                    <div class="text-slate-500 text-[11px] uppercase font-bold mb-2">Status</div>
+                                    <div class="font-extrabold text-blue-700 text-xl italic uppercase">Offen</div>
                                 </div>
                             </div>
 
                             <div class="space-y-4">
-                                <div class="text-[11px] font-bold text-slate-400 uppercase tracking-[0.2em]">Nächste Schritte</div>
-                                <div class="flex items-center gap-4 p-4 bg-slate-50 rounded-2xl border border-slate-100">
-                                    <div class="w-3 h-3 rounded-full bg-blue-600 shadow-[0_0_10px_rgba(37,99,235,0.4)]"></div>
-                                    <div class="text-lg font-semibold text-slate-700">Angebot nachfassen (Dienstag)</div>
+                                <div class="text-[12px] font-bold text-slate-500 uppercase tracking-[0.2em]">Nächste Schritte</div>
+                                <div class="flex items-center gap-5 p-5 bg-slate-100 rounded-2xl border-2 border-slate-200">
+                                    <div class="w-4 h-4 rounded-full bg-blue-700"></div>
+                                    <div class="text-xl font-bold text-slate-800">Angebot nachfassen (Dienstag)</div>
                                 </div>
                             </div>
                         </div>