diff --git a/assets/css/custom.css b/assets/css/custom.css
index dc3f8be..854fc5a 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -581,68 +581,133 @@ body {
     perspective: 1000px;
 }
 
-.hero-visual-stack {
+.hero-visual {
     position: relative;
-    width: 340px;
-    height: 400px;
-    transform-style: preserve-3d;
-    animation: stack-sway 20s ease-in-out infinite alternate;
-}
-
-@keyframes stack-sway {
-    from { transform: rotateX(10deg) rotateY(-15deg); }
-    to { transform: rotateX(10deg) rotateY(15deg); }
-}
-
-.hero-card {
-    position: absolute;
     width: 100%;
-    height: auto;
-    padding: var(--space-3);
-    background: rgba(26, 32, 53, 0.7);
-    border: 1px solid rgba(0, 245, 255, 0.2);
-    border-radius: 12px;
-    backdrop-filter: blur(10px);
-    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
+    height: 600px;
+    animation: fade-in-up 1s 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+@media (max-width: 1023px) {
+    .hero-visual {
+        height: 500px;
+    }
+}
+
+@media (max-width: 767px) {
+    .hero-visual {
+        height: 400px;
+    }
+}
+
+.card-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.flow-arrow {
+    font-size: 24px;
+    color: #00F5FF;
+    animation: bounce-arrow 2s ease-in-out infinite;
+}
+
+.flow-card {
+    width: 100%;
+    padding: 32px;
+    background: rgba(255,255,255,0.05);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(0,245,255,0.2);
+    border-radius: 20px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+    animation: float-gentle 6s ease-in-out infinite;
+}
+
+.flow-card.card-2 {
+    animation-delay: -2s;
+}
+.flow-card.card-3 {
+    animation-delay: -4s;
+}
+
+.card-header {
     display: flex;
     align-items: center;
-    gap: var(--space-3);
-    will-change: transform;
-    animation: card-float 8s ease-in-out infinite;
+    gap: 16px;
+    margin-bottom: 24px;
 }
 
 .card-icon {
-    font-size: 28px;
+    font-size: 24px;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: rgba(0, 245, 255, 0.1);
+    color: #00F5FF;
 }
-.card-text {
-    font-size: var(--text-base);
-    color: var(--text-gray);
-    line-height: var(--leading-normal);
-    margin: 0;
-}
-.card-text strong {
-    color: var(--text-white);
+
+.card-title {
+    font-family: var(--font-heading);
+    font-size: var(--text-xl);
     font-weight: var(--weight-semibold);
+    color: var(--text-white);
 }
 
-.card-1 {
-    animation-delay: 0s;
-}
-.card-2 {
-    animation-delay: -2.66s;
-}
-.card-3 {
-    animation-delay: -5.33s;
+.card-content .progress-label {
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    margin-bottom: 8px;
+    text-align: right;
 }
 
-@keyframes card-float {
-    0%, 100% { transform: translateY(var(--y-pos)) translateZ(var(--z-pos)) rotate(var(--rot)) translateY(0px); }
-    50% { transform: translateY(var(--y-pos)) translateZ(var(--z-pos)) rotate(var(--rot)) translateY(-20px); }
+.card-content .progress-bar {
+    width: 100%;
+    height: 8px;
+    background: rgba(255,255,255,0.1);
+    border-radius: 4px;
+    overflow: hidden;
 }
 
-.card-1 { --y-pos: 0px; --z-pos: 0px; --rot: -5deg; }
-.card-2 { --y-pos: 120px; --z-pos: -40px; --rot: 3deg; }
-.card-3 { --y-pos: 240px; --z-pos: -80px; --rot: -2deg; }
+.card-content .progress-fill {
+    width: 30%; /* Example progress */
+    height: 100%;
+    background: var(--cyan);
+    border-radius: 4px;
+}
+
+.card-content p {
+    color: var(--text-gray);
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+}
+
+@keyframes fade-in-up {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes bounce-arrow {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(10px); }
+}
+
+@keyframes float-gentle {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
 
 
 /* Scroll Indicator */
diff --git a/index.php b/index.php
index 5194d95..3af5fa7 100644
--- a/index.php
+++ b/index.php
@@ -161,18 +161,40 @@
                     </div>
                 </div>
                 <div class="hero-right">
-                    <div class="hero-visual-stack">
-                        <div class="hero-card card-1">
-                            <span class="card-icon">🎯</span>
-                            <p class="card-text"><strong>Zielgerichtete Strategie</strong><br>Personalisierte KI-Roadmap</p>
-                        </div>
-                        <div class="hero-card card-2">
-                            <span class="card-icon">⚙️</span>
-                            <p class="card-text"><strong>Effiziente Prozesse</strong><br>Automatisierungspotenziale aufdecken</p>
-                        </div>
-                        <div class="hero-card card-3">
-                            <span class="card-icon">📈</span>
-                            <p class="card-text"><strong>Nachhaltiges Wachstum</strong><br>Wettbewerbsvorteile sichern</p>
+                    <div class="hero-visual">
+                        <div class="card-stack">
+                            <div class="flow-card card-1">
+                                <div class="card-header">
+                                    <span class="card-icon">📋</span>
+                                    <span class="card-title">Fragebogen</span>
+                                </div>
+                                <div class="card-content">
+                                    <div class="progress-label">25 Fragen</div>
+                                    <div class="progress-bar">
+                                        <div class="progress-fill"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flow-arrow">↓</div>
+                            <div class="flow-card card-2">
+                                <div class="card-header">
+                                    <span class="card-icon">🤖</span>
+                                    <span class="card-title">AI Processing</span>
+                                </div>
+                                <div class="card-content">
+                                    <p>Ihre Daten werden verarbeitet...</p>
+                                </div>
+                            </div>
+                            <div class="flow-arrow">↓</div>
+                            <div class="flow-card card-3">
+                                <div class="card-header">
+                                    <span class="card-icon">📄</span>
+                                    <span class="card-title">Report</span>
+                                </div>
+                                <div class="card-content">
+                                    <p>Ihr persönlicher Report ist fertig.</p>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>