Floke/Brancheneinstufung2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dateien nach "docs/Praesentation" hochladen

Browse Source
This commit is contained in:
Floke
2026-06-01 12:34:31 +00:00
parent b17e7a04f9
commit 169c0863f2
3 changed files with 842 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/Praesentation/Executive_Briefing_Guide.md Normal file
View File

@@ -0,0 +1,70 @@
# 🎤 Executive Briefing Guide: Sales Dashboard "Intelligence & yield"
Dieses Dokument dient als strategischer Leitfaden und Sprecherskript für die Vorstandspräsentation. Es enthält alle Hintergrundinformationen und Datenpunkte, um die Präsentation auf einem externen System ohne Dashboard-Zugriff zu finalisieren.
---
## 1. Strategischer Kontext (Das Mindset)
**Kern-Metapher:** "Vom Wiegen wird die Sau nicht fetter."
Wir präsentieren dem Vorstand keine "bunte Statistik". Wir präsentieren ein **aktives Steuerungsinstrument**.
* **Problem:** SuperOffice (SO) ist ein passives Archiv. Daten liegen dort in Silos, Korrelationen (z.B. "Welche Aktivität führt zum Abschluss?") erfordern Tage in Excel.
* **Lösung:** Das Dashboard macht sich "die Hände schmutzig". Es taucht in die Datentiefe ab, verbindet CRM-Aktivitäten mit echten Angebotspositionen (SKUs) und liefert Antworten auf Knopfdruck.
* **Ziel:** Wir messen nicht des Messens wegen, sondern um eine Basis für strategische Entscheidungen zu legen und den Erfolg von Maßnahmen (wie der Vor-Ort-Fokussierung) im Nachhinein hart zu belegen.
---
## 2. Sprecherskript (Phasen-Leitfaden)
### Phase 1: Die Vision (Intro)
> "Herr Vorstand, in SuperOffice verwalten wir Kontakte. In diesem Dashboard steuern wir den Erfolg. Wir haben aufgehört zu raten und angefangen zu wissen. Unser Motto: Vom Wiegen allein wird die Sau nicht fetter – wir messen hier, um den Vertrieb proaktiv zum Yield zu führen."
### Phase 2: Risk Management (Clean Pipeline)
> "In SuperOffice sieht unsere Pipeline oft gewaltig aus – 5,2 Mio. Euro. Aber das ist die 'Brutto-Hoffnung'. Unser Dashboard erkennt automatisch den 'Duplicate Bloat' – also Angebotsvarianten für denselben Kunden. Wir ziehen den Vorhang beiseite und sehen die 'Clean Pipeline' von 3,6 Mio. Euro. Das ist die reale Wahrheit, auf der wir Investitionen planen können."
* **Key Fact:** ~31% der Pipeline in SO sind oft nur redundante Varianten (Bloat).
### Phase 3: Die Winning DNA (Yield-Beleg)
> "Wir wissen jetzt exakt, was funktioniert. Wer sich die Hände schmutzig macht und in die Daten eintaucht, findet Gold: Ein einziger Vor-Ort-Termin steigert die Abschlusswahrscheinlichkeit um 159%. Wir steuern unsere Sales-Manager jetzt nicht mehr nach 'Gefühl', sondern schicken sie dorthin, wo der Yield bewiesen ist."
* **Key Fact:** Win-Rate steigt von ~9% auf ~24% bei Demos.
* **Key Fact:** Follow-Up Speed von 37 Tagen auf 10 Tage gesenkt.
### Phase 4: Action Hub (Der 20% Hebel)
> "Das Dashboard ist kein Rückspiegel, es ist ein Gaspedal. Über den 'Magic Wand' generiert der Manager mit einem Klick eine Rückrufbitte, die die komplette CRM-Historie kennt. Wir haben den ROI gemessen: Jede fünfte Nachricht führt zu einer direkten Kundenreaktion. Das ist Effizienz, die man auf dem Konto sieht."
* **Key Fact:** >20% Reaktionsquote auf automatisierte Dashboard-Mails.
### Phase 5: The Machine (Scalability)
> "Abschließend geben wir Ihnen den Regler in die Hand. 'The Machine' übersetzt Ihre strategischen Monatsziele (z.B. 300k €) live in wöchentliche Lead-Vorgaben für jeden einzelnen Manager – individuell berechnet auf deren persönlicher Hit-Rate. So skalieren wir Wachstum vorhersagbar."
---
## 3. Daten-Backup (für die manuelle Gestaltung)
Falls du auf dem Zielsystem Grafiken nachbauen willst, hier die harten Werte aus dem Backend:
| Bereich | Wert (Beispiel-Snapshot) | Herkunft / Logik |
| :--- | :--- | :--- |
| **Gross Pipeline** | 5.164.155 € | Alle offenen Angebote in SO (Hardware). |
| **Duplicate Bloat** | - 1.593.787 € | Differenz aus Gross vs. Netto (pro Firma). |
| **Clean Pipeline** | 3.570.368 € | Höchstes Einzelangebot pro Firma. |
| **Win-Rate (mit Demo)** | 23,8 % | Korrelation 'Termin Typ 148' ➔ 'Won'. |
| **Win-Rate (ohne Demo)** | 9,2 % | Deals ohne Vor-Ort-Aktivität. |
| **Median Follow-Up** | 10 Tage | Zeit zw. Angebot und nächster Aktion. |
| **CRM White Space** | 67 % | 10.000+ Accounts ohne jegliche Historie. |
| **Reaktionsquote** | > 20 % | Analysiert via 'analyze_dashboard_roi_fixed.py'. |
---
## 4. Visual Guide (Was man im Dashboard sieht)
Da du keinen Zugriff hast, hier die Beschreibung der UI-Elemente für Mocks:
1. **Header:** Dunkelblau (`#081734`), Neon-Cyan Akzente. Titel: "Sales Center Analytics".
2. **KPI-Karten:** 5 Karten nebeneinander (Volumen, Stagnation, Forecast, Cycle Time, Rote Liste).
3. **Pipeline Funnel:** Ein horizontaler Trichter. Jede Stufe (10%, 20%, ... 98%) ist ein Balken, dessen Breite das Volumen widerspiegelt.
4. **Manager-Table:** Zeigt Win-Rates und Cycle Times. Wichtig: Der "Expert Mode" zeigt hier auch den Deckungsbeitrag I (DB I) und die geschätzten Reisekosten/Stunden.
5. **Rote Liste:** Eine knallrote Tabelle oben, die "Deals in Gefahr" zeigt (Datum abgelaufen oder Stagnation > 14 Tage).
6. **Target Simulator:** Ein großer Schieberegler mit zwei "Tacho-Anzeigen" für Leads/Woche.
7. **Toby:** Der kleine Roboter-Avatar sitzt meist unten rechts in einer Sprechblase.
---
*Dokument erstellt am 01. Juni 2026 für Task [37288f42]*

386
docs/Praesentation/index.html Normal file
View File

@@ -0,0 +1,386 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sales Dashboard: Intelligence & Yield Briefing</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxanium:wght@400;700;800&family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
roboDark: '#081734',
roboLight: '#DDEEFE',
roboCyan: '#00E5FF',
roboYellow: '#FFD42C',
roboEmerald: '#10B981',
roboRed: '#EF4444'
},
fontFamily: {
'head': ['Oxanium', 'sans-serif'],
'body': ['Poppins', 'sans-serif']
}
}
}
}
</script>
<style>
body { background-color: #081734; color: #DDEEFE; font-family: 'Poppins', sans-serif; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: 'Oxanium', sans-serif; }
.glass-panel {
background: rgba(221, 238, 254, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 229, 255, 0.2);
border-radius: 24px;
}
.neon-border-cyan { border: 1px solid rgba(0, 229, 255, 0.4); box-shadow: 0 0 20px rgba(0, 229, 255, 0.1); }
.neon-border-yellow { border: 1px solid rgba(255, 212, 44, 0.4); box-shadow: 0 0 20px rgba(255, 212, 44, 0.1); }
/* Toby Animation */
.toby-float { animation: float 4s ease-in-out infinite; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
/* Data Flow Path */
.data-flow-path { stroke-dasharray: 8 8; animation: dataFlow 1s linear infinite; }
@keyframes dataFlow { to { stroke-dashoffset: -16; } }
section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 4rem 2rem; position: relative; }
#toby-container { position: fixed; bottom: 30px; right: 30px; width: 220px; z-index: 1000; opacity: 0; display: flex; flex-direction: column; align-items: center; transition: all 0.5s ease; }
#toby-bubble { background: #DDEEFE; color: #081734; padding: 14px 20px; border-radius: 15px; font-size: 14px; font-weight: 700; margin-bottom: 15px; position: relative; text-align: center; box-shadow: 0 8px 25px rgba(0,229,255,0.4); width: 100%; line-height: 1.2; }
#toby-bubble::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border-width: 10px 10px 0; border-style: solid; border-color: #DDEEFE transparent transparent transparent; }
</style>
</head>
<body class="antialiased selection:bg-roboCyan selection:text-roboDark">
<!-- Toby Fixed Avatar -->
<div id="toby-container" class="toby-float">
<div id="toby-bubble">Initialisiere Strategie-Modus...</div>
<div id="toby-avatar-wrapper" class="w-32 h-32 rounded-full border-4 border-roboCyan/30 p-1 bg-roboDark shadow-[0_0_30px_rgba(0,229,255,0.2)] flex items-center justify-center overflow-hidden">
<!-- Toby Image Placeholder -->
<div class="w-20 h-20 bg-roboCyan/20 rounded-full animate-pulse"></div>
</div>
</div>
<!-- Phase 1: Strategic Intro -->
<section id="vision">
<div class="max-w-5xl text-center space-y-10">
<div class="inline-block px-5 py-2 rounded-full bg-roboCyan/10 border border-roboCyan/30 text-roboCyan text-xs font-bold uppercase tracking-[0.3em] mb-4">Board Briefing: Intelligence & Yield</div>
<h1 class="text-7xl font-black tracking-tighter text-white leading-[0.9] uppercase">Vom Wiegen wird<br><span class="text-roboYellow">die Sau nicht fetter</span></h1>
<div class="w-24 h-1 bg-roboYellow mx-auto rounded-full"></div>
<p class="text-2xl text-roboLight/80 max-w-3xl mx-auto leading-relaxed">
Messen ist kein Selbstzweck. Wir tauchen tief in die Daten ab, um <span class="text-white font-bold underline decoration-roboCyan underline-offset-4">strategische Maßnahmen</span> zu steuern und deren Erfolg hart zu belegen.
</p>
</div>
</section>
<!-- Phase 2: The Truth (Clean Pipeline) -->
<section id="risk">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center w-full max-w-7xl">
<div class="space-y-8">
<h2 class="text-5xl font-black text-roboCyan uppercase leading-tight">Brutto-Hoffnung vs.<br>Netto-Wahrheit</h2>
<p class="text-xl text-roboLight/60 leading-relaxed italic">"In SuperOffice sieht die Pipeline gewaltig aus. Aber wie viel davon können wir wirklich auf die Straße bringen?"</p>
<div class="space-y-6 pt-6">
<div class="glass-panel p-8 border-l-8 border-l-roboRed neon-border-cyan">
<div class="flex justify-between items-start mb-2">
<span class="text-roboRed font-black uppercase text-sm tracking-widest">Duplicate Bloat</span>
<span class="bg-roboRed/20 text-roboRed px-3 py-1 rounded-full text-xs font-bold">- 31% PHANTOM</span>
</div>
<p class="text-5xl font-black text-white">1.593.787 €</p>
<p class="text-sm text-roboLight/50 mt-2 italic">Durch das Dashboard identifizierte Doppelzählungen redundanter Angebots-Varianten.</p>
</div>
</div>
</div>
<div class="relative glass-panel p-12 shadow-2xl border-white/10">
<div class="absolute -top-6 -left-6 bg-roboCyan text-roboDark px-5 py-2 rounded-xl font-black text-sm uppercase shadow-2xl tracking-widest">Dashboard Engine</div>
<div id="clean-chart" class="w-full h-96 flex items-end gap-12 px-10 pb-6 border-b border-white/10">
<div id="bar-gross" class="w-1/2 bg-white/10 h-full rounded-t-3xl relative">
<div class="absolute -top-12 left-0 right-0 text-center font-black text-roboLight/40 text-sm uppercase">Gross (SO)</div>
</div>
<div id="bar-clean" class="w-1/2 bg-gradient-to-t from-roboEmerald to-roboCyan h-[69%] rounded-t-3xl relative shadow-[0_0_50px_rgba(16,185,129,0.4)]">
<div class="absolute -top-12 left-0 right-0 text-center font-black text-roboEmerald text-sm uppercase">Clean (Real)</div>
</div>
</div>
<p class="mt-8 text-center text-[11px] text-roboLight/40 font-bold uppercase tracking-[0.4em]">Kapital-Effizienz durch Daten-Filterung</p>
</div>
</div>
</section>
<!-- Phase 3: The Winning DNA -->
<section id="dna">
<div class="text-center mb-24 space-y-4">
<h2 class="text-6xl font-black text-white uppercase tracking-tighter">Die Winning DNA</h2>
<p class="text-roboCyan font-bold tracking-[0.5em] uppercase text-sm">Präzisions-Führung statt Bauchgefühl</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 w-full max-w-7xl">
<!-- DNA 1 -->
<div class="glass-panel p-12 text-center space-y-8 relative overflow-hidden group hover:scale-[1.02] transition-transform">
<div class="absolute inset-0 bg-roboCyan/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="text-8xl font-black text-roboCyan tracking-tighter animate-pulse">+159%</div>
<div>
<p class="font-black uppercase tracking-wider text-xl text-white">Win-Rate Hebel</p>
<p class="text-sm text-roboLight/60 mt-4 leading-relaxed">
Data Mining Beleg: Ein einziger <span class="text-roboCyan font-bold">Vor-Ort-Termin (Demo)</span> ist unser wertvollster KPI für den Abschluss.
</p>
</div>
</div>
<!-- DNA 2 -->
<div class="glass-panel p-12 text-center space-y-8 border-roboYellow/20 hover:scale-[1.02] transition-transform">
<div class="text-8xl font-black text-roboYellow tracking-tighter">10 Tage</div>
<div>
<p class="font-black uppercase tracking-wider text-xl text-white">Follow-Up Speed</p>
<p class="text-sm text-roboLight/60 mt-4 leading-relaxed">
Median von 37 auf <span class="text-roboYellow font-bold">10 Tage</span> gesenkt. Wir managen Latenz als strategisches Risiko.
</p>
</div>
</div>
<!-- DNA 3 -->
<div class="glass-panel p-12 text-center space-y-8 border-white/20 hover:scale-[1.02] transition-transform">
<div class="text-8xl font-black text-white tracking-tighter">67%</div>
<div>
<p class="font-black uppercase tracking-wider text-xl text-white">Asset Recovery</p>
<p class="text-sm text-roboLight/60 mt-4 leading-relaxed">
Identifikation ungenutzter CRM-Accounts. Wir aktivieren das <span class="text-white font-bold">Tote Kapital</span> von 10.000+ Leads.
</p>
</div>
</div>
</div>
</section>
<!-- Phase 4: Action ROI (Magic Wand) -->
<section id="action">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center w-full max-w-7xl">
<div class="space-y-12">
<div class="flex items-center gap-4">
<div class="w-16 h-2 bg-roboYellow rounded-full"></div>
<span class="text-roboYellow font-black uppercase tracking-widest text-sm">The 20% Weapon</span>
</div>
<h2 class="text-6xl font-black text-white uppercase leading-[0.9] tracking-tighter">Kein Rückspiegel.<br><span class="text-roboYellow">Ein Gaspedal.</span></h2>
<p class="text-xl text-roboLight/60 leading-relaxed">
Wir haben uns die Hände schmutzig gemacht und die "Rückrufbitte" automatisiert. Mit voller CRM-Intelligenz pro Klick.
</p>
<div class="glass-panel p-10 neon-border-yellow bg-roboYellow/5 relative">
<div class="absolute -top-4 -right-4 bg-roboYellow text-roboDark px-3 py-1 rounded font-black text-[10px] uppercase">Live ROI Measure</div>
<p class="text-6xl font-black text-roboYellow tracking-tighter">> 20% REAKTION</p>
<p class="text-lg text-white mt-2 font-bold uppercase tracking-widest">Messbarer Strategie-Erfolg</p>
<p class="text-sm text-roboLight/40 mt-1 italic">Jeder 5. Klick generiert einen qualifizierten Rückruf-Dialog.</p>
</div>
</div>
<div class="relative glass-panel rounded-[60px] p-2 overflow-hidden neon-border-yellow shadow-[0_0_60px_rgba(255,212,44,0.2)]">
<div class="bg-roboDark rounded-[58px] p-16 space-y-8">
<div class="flex items-center justify-between mb-10">
<div class="flex items-center gap-4">
<div class="w-14 h-14 bg-roboYellow/20 rounded-2xl flex items-center justify-center text-3xl shadow-inner">🪄</div>
<div class="space-y-1">
<div class="h-2 w-32 bg-roboYellow/40 rounded"></div>
<div class="h-1.5 w-20 bg-white/10 rounded"></div>
</div>
</div>
<span class="bg-roboEmerald/20 text-roboEmerald px-3 py-1 rounded text-[10px] font-black tracking-widest uppercase">Executing...</span>
</div>
<div class="space-y-5 opacity-30">
<div class="h-3 w-full bg-white/20 rounded-full"></div>
<div class="h-3 w-4/5 bg-white/20 rounded-full"></div>
<div class="h-3 w-full bg-white/20 rounded-full"></div>
<div class="h-3 w-3/5 bg-white/20 rounded-full"></div>
</div>
<div id="success-overlay" class="absolute inset-0 bg-roboEmerald/10 backdrop-blur-md flex items-center justify-center opacity-0 scale-90 transition-all duration-700">
<div class="bg-roboEmerald text-roboDark px-10 py-5 rounded-3xl font-black text-3xl shadow-[0_20px_50px_rgba(16,185,129,0.4)] transform rotate-[-2deg]">
NEW CALL RECORDED ✅
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Phase 5: Architecture & Closing -->
<section id="architecture">
<div class="text-center w-full max-w-6xl mb-16 relative z-20">
<h2 class="text-6xl text-white font-black uppercase tracking-tighter">IT-Infrastruktur-Allianz</h2>
<p class="text-roboCyan font-bold tracking-widest uppercase text-sm mt-2">Single Source of Truth + Intelligence Layer</p>
</div>
<div class="w-full max-w-[1200px] h-[700px] relative mx-auto" id="architecture-container">
<!-- Hub & Spoke SVG Diagram -->
<svg class="absolute inset-0 w-full h-full z-0 pointer-events-none" viewBox="0 0 1200 700">
<!-- Lines from Core to Spokes -->
<g class="data-lines opacity-40">
<!-- SO Line -->
<path id="path-so" d="M 600 350 L 600 150" stroke="#00E5FF" stroke-width="2" class="data-flow-path" fill="none"/>
<!-- Dashboard/Action Line -->
<path id="path-dashboard" d="M 600 350 L 950 350" stroke="#FFD42C" stroke-width="2" class="data-flow-path" fill="none"/>
<!-- Insights Line -->
<path id="path-insights" d="M 600 350 L 250 350" stroke="#10B981" stroke-width="2" class="data-flow-path" fill="none"/>
</g>
<!-- Animated Packets -->
<circle r="5" fill="#00E5FF"><animateMotion dur="2s" repeatCount="indefinite"><mpath href="#path-so"/></animateMotion></circle>
<circle r="5" fill="#FFD42C"><animateMotion dur="1.5s" repeatCount="indefinite"><mpath href="#path-dashboard"/></animateMotion></circle>
<circle r="5" fill="#10B981"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-insights"/></animateMotion></circle>
</svg>
<!-- CORE: GTM Engine -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20" id="core-node">
<div class="w-64 h-64 glass-panel border-roboCyan/50 flex flex-col items-center justify-center text-center p-8 bg-roboDark/90 shadow-[0_0_60px_rgba(0,229,255,0.3)]">
<div class="w-20 h-20 bg-roboCyan/20 rounded-3xl flex items-center justify-center text-4xl mb-4 border border-roboCyan/30">🧠</div>
<h4 class="text-2xl font-black text-white uppercase tracking-widest">GTM Engine</h4>
<p class="text-[10px] text-roboCyan font-bold uppercase mt-2">Intelligence Hub</p>
</div>
</div>
<!-- SPOKE: SuperOffice -->
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-48 text-center" id="spoke-so">
<div class="glass-panel p-6 mb-4 border-white/20">
<p class="text-white font-black text-sm uppercase">SuperOffice CRM</p>
</div>
<span class="bg-white/10 text-white text-[10px] px-3 py-1 rounded-full border border-white/20 uppercase font-bold tracking-widest">SSoT (Data Base)</span>
</div>
<!-- SPOKE: Action Hub -->
<div class="absolute top-1/2 right-0 transform -translate-y-1/2 w-56 text-right" id="spoke-action">
<div class="glass-panel p-6 mb-4 border-roboYellow/30">
<p class="text-roboYellow font-black text-sm uppercase leading-tight">Proaktive Steuerung<br>(Execution)</p>
</div>
<span class="bg-roboYellow/20 text-roboYellow text-[10px] px-3 py-1 rounded-full border border-roboYellow/20 uppercase font-bold tracking-widest">Action Hub</span>
</div>
<!-- SPOKE: Insights -->
<div class="absolute top-1/2 left-0 transform -translate-y-1/2 w-56 text-left" id="spoke-insights">
<div class="glass-panel p-6 mb-4 border-roboEmerald/30">
<p class="text-roboEmerald font-black text-sm uppercase leading-tight">Data Deep Mining<br>(Analysis)</p>
</div>
<span class="bg-roboEmerald/20 text-roboEmerald text-[10px] px-3 py-1 rounded-full border border-roboEmerald/20 uppercase font-bold tracking-widest">Yield Control</span>
</div>
</div>
</section>
<!-- Final Board Summary -->
<section id="summary" class="bg-white text-roboDark">
<div class="max-w-5xl space-y-16 text-center">
<h2 class="text-7xl font-black uppercase tracking-tighter leading-[0.85]">VON DER VERWALTUNG<br><span class="text-roboCyan underline decoration-roboDark underline-offset-8 decoration-8 italic">ZUR SKALIERUNG</span></h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 text-left">
<div class="p-10 bg-roboDark/5 rounded-[40px] border border-roboDark/10">
<h3 class="font-black text-roboDark uppercase text-sm mb-6 tracking-[0.2em] opacity-40">Status Quo (SuperOffice)</h3>
<ul class="space-y-4 text-base font-bold text-roboDark/60">
<li class="flex items-center gap-3"><span>❌</span> Passive Historie</li>
<li class="flex items-center gap-3"><span>❌</span> Unbereinigte Pipeline</li>
<li class="flex items-center gap-3"><span>❌</span> Hohe Latenz im Follow-Up</li>
<li class="flex items-center gap-3"><span>❌</span> Manuelle Ad-hoc Analysen</li>
</ul>
</div>
<div class="p-10 bg-roboCyan rounded-[40px] shadow-2xl relative overflow-hidden">
<div class="absolute top-0 right-0 p-8 opacity-10 rotate-12"><svg viewBox="0 0 100 100" class="w-32 h-32 fill-roboDark"><path d="M50 0 L100 25 L100 75 L50 100 L0 75 L0 25 Z"/></svg></div>
<h3 class="font-black text-roboDark uppercase text-sm mb-6 tracking-[0.2em]">Zielbild (GTM Engine)</h3>
<ul class="space-y-4 text-base font-black text-roboDark">
<li class="flex items-center gap-3"><span>✅</span> Clean Pipeline (Netto)</li>
<li class="flex items-center gap-3"><span>✅</span> Yield-getriebene Steuerung</li>
<li class="flex items-center gap-3"><span>✅</span> Aktiver Action Hub (>20% Return)</li>
<li class="flex items-center gap-3"><span>✅</span> Skalierbarer Target-Simulator</li>
</ul>
</div>
</div>
<div class="pt-10 flex flex-col items-center gap-4">
<p class="text-3xl font-black uppercase tracking-widest text-roboDark italic animate-bounce">Wir skalieren profitabel.</p>
<div class="w-48 h-2 bg-roboDark rounded-full"></div>
</div>
</div>
</section>
<!-- GSAP Scripts -->
<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>
<script>
gsap.registerPlugin(ScrollTrigger);
const tobyText = document.getElementById('toby-bubble');
const tobyContainer = document.getElementById('toby-container');
function updateToby(text) {
tobyText.innerText = text;
gsap.fromTo("#toby-bubble", { opacity: 0, y: 15, scale: 0.9 }, { opacity: 1, y: 0, scale: 1, duration: 0.4, ease: "back.out(1.7)" });
}
window.onload = () => {
gsap.to(tobyContainer, { opacity: 1, y: 0, duration: 1, delay: 0.5 });
updateToby("Strategie-Check: Sind wir bereit für die Skalierung?");
};
// Scroll Animations
// Phase 2: Risk Transformation
gsap.timeline({
scrollTrigger: {
trigger: "#risk",
start: "top center",
end: "bottom center",
scrub: 1
}
})
.from("#bar-gross", { height: "0%", duration: 1 })
.to("#bar-gross", { height: "100%", backgroundColor: "rgba(239, 68, 68, 0.1)", duration: 1 })
.from("#bar-clean", { height: "0%", duration: 1 }, "<")
.add(() => updateToby("In SO verwalten wir oft nur 'Phantombudgets'. Wir zeigen die Wahrheit."));
// Phase 3: DNA Cards
gsap.from("#dna .glass-panel", {
scrollTrigger: {
trigger: "#dna",
start: "top center",
end: "center center",
scrub: 1
},
y: 100, opacity: 0, stagger: 0.3
});
ScrollTrigger.create({
trigger: "#dna", start: "top center",
onEnter: () => updateToby("Unsere Algorithmen beweisen: Vor-Ort Demos sind der Gamechanger.")
});
// Phase 4: Magic Wand Success
gsap.timeline({
scrollTrigger: {
trigger: "#action",
start: "top center",
end: "center center",
scrub: 1
}
})
.to("#success-overlay", { opacity: 1, scale: 1.0, duration: 1 })
.add(() => updateToby("Jeder 5. Klick bringt uns ein Telefonat. Das ist pure Effizienz."));
// Phase 5: Architecture Build-up
ScrollTrigger.create({
trigger: "#architecture",
start: "top 40%",
onEnter: () => {
updateToby("Das ist unsere IT-Allianz: CRM als Basis, GTM Engine als Gehirn.");
gsap.from("#core-node", { scale: 0, opacity: 0, duration: 1, ease: "back.out(1.7)" });
gsap.from(".data-lines", { opacity: 0, duration: 1, delay: 0.5 });
gsap.from(".arch-node, #spoke-so, #spoke-action, #spoke-insights", {
y: 50, opacity: 0, duration: 0.8, stagger: 0.2, ease: "power2.out", delay: 1
});
}
});
</script>
</body>
</html>

386
docs/Praesentation/offline_demo (20).html Normal file
View File

File diff suppressed because one or more lines are too long