Formular-Handling verbessert: CSRF-Token hinzugefügt, AJAX-Formularübermittlung implementiert und neue CSS-Stile für verschiedene Abschnitte hinzugefügt.

public/assets/css/style.css

@@ -509,6 +509,97 @@ body {
     font-size: var(--font-size-sm);
 }
 
+/* How it Works Section */
+.how-it-works {
+    padding: var(--spacing-3xl) 0;
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.steps-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--spacing-xl);
+    margin-top: var(--spacing-2xl);
+}
+
+.step-item {
+    padding: var(--spacing-xl);
+    text-align: center;
+    position: relative;
+}
+
+.step-number {
+    width: 60px;
+    height: 60px;
+    background: linear-gradient(135deg, var(--primary-color), var(--accent-color-1));
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--font-size-xl);
+    font-weight: 700;
+    color: var(--white);
+    margin: 0 auto var(--spacing-lg);
+    box-shadow: 0 8px 32px 0 rgba(255, 81, 249, 0.3);
+}
+
+.step-item h3 {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    margin-bottom: var(--spacing-md);
+    color: var(--text-primary);
+}
+
+.step-item p {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    font-size: var(--font-size-base);
+}
+
+/* Mail Features Section */
+.mail-features {
+    padding: var(--spacing-3xl) 0;
+    background: rgba(255, 255, 255, 0.03);
+}
+
+/* Benefits Section */
+.benefits {
+    padding: var(--spacing-3xl) 0;
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.benefits-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--spacing-xl);
+    margin-top: var(--spacing-2xl);
+}
+
+.benefit-item {
+    padding: var(--spacing-xl);
+    text-align: center;
+}
+
+.benefit-icon {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto var(--spacing-lg);
+    color: var(--primary-color);
+}
+
+.benefit-item h3 {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    margin-bottom: var(--spacing-md);
+    color: var(--text-primary);
+}
+
+.benefit-item p {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    font-size: var(--font-size-base);
+}
+
 /* CTA Section */
 .cta {
     padding: var(--spacing-3xl) 0;
@@ -1263,6 +1354,19 @@ body {
     transition: all var(--transition-base);
 }
 
+/* Spezielle Styling für Select-Elemente */
+.form-group select {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.form-group select option {
+    background: rgba(13, 8, 33, 0.95);
+    color: var(--text-primary);
+    padding: var(--spacing-sm);
+}
+
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
@@ -1444,6 +1548,16 @@ body {
         grid-template-columns: 1fr;
     }
     
+    .steps-grid {
+        grid-template-columns: 1fr;
+        gap: var(--spacing-lg);
+    }
+    
+    .benefits-grid {
+        grid-template-columns: 1fr;
+        gap: var(--spacing-lg);
+    }
+    
     .story-content {
         grid-template-columns: 1fr;
     }

public/assets/js/contact.js

@@ -66,21 +66,36 @@
             submitBtn.textContent = 'Wird gesendet...';
             submitBtn.disabled = true;
             
-            // Simulate form submission (replace with actual endpoint)
-            setTimeout(() => {
-                // Reset form
-                form.reset();
-                
-                // Show success message
-                showNotification('Ihre Nachricht wurde erfolgreich gesendet! Wir melden uns in Kürze bei Ihnen.', 'success');
-                
+            // Send form data to PHP backend
+            fetch('contact-handler.php', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    // Reset form
+                    form.reset();
+                    
+                    // Show success message
+                    showNotification(data.message, 'success');
+                    
+                    // Scroll to top
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                } else {
+                    // Show error message
+                    showNotification(data.message, 'error');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                showNotification('Es gab ein Problem beim Senden Ihrer Nachricht. Bitte versuchen Sie es später erneut.', 'error');
+            })
+            .finally(() => {
                 // Reset button
                 submitBtn.textContent = originalText;
                 submitBtn.disabled = false;
-                
-                // Scroll to top
-                window.scrollTo({ top: 0, behavior: 'smooth' });
-            }, 2000);
+            });
         });
     }