Aktualisierung der Kontaktseite: Ersetzung von Live Chat durch Discord-Support, Anpassung des Kontaktformulars mit Honeypot-Feld für Bot-Schutz und Verbesserung der Formularvalidierung. Hinzufügung von CSS-Stilen für neue Abschnitte und Optimierung der responsiven Darstellung.

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

@@ -50,12 +50,16 @@
             
             // Get form data
             const formData = new FormData(form);
+            
+            // Add honeypot field (hidden field for bot protection)
+            formData.append('website', ''); // Honeypot field
+            
+            // Basic validation
             const data = {};
             for (let [key, value] of formData.entries()) {
                 data[key] = value;
             }
             
-            // Basic validation
             if (!validateForm(data)) {
                 return;
             }
@@ -66,21 +70,49 @@
             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');
+                    
+                    // Highlight missing fields if provided
+                    if (data.missing_fields) {
+                        data.missing_fields.forEach(field => {
+                            const fieldElement = document.getElementById(field);
+                            if (fieldElement) {
+                                fieldElement.style.borderColor = '#ff4d6d';
+                                setTimeout(() => {
+                                    fieldElement.style.borderColor = '';
+                                }, 3000);
+                            }
+                        });
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                showNotification('Ein Fehler ist aufgetreten. 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);
+            });
         });
     }