feed final

Profice WebSite/sites/offers.html

@@ -141,6 +141,18 @@
             flex-shrink: 0;
         }
 
+        .field-error {
+            display: none;
+            color: #e05252;
+            font-size: 12px;
+            margin-top: 6px;
+        }
+
+        #contact.invalid {
+            border-color: #e05252;
+            box-shadow: 0 0 0 4px rgba(224, 82, 82, 0.12);
+        }
+
         @media (max-width: 640px) {
             .offers-title { font-size: 28px; }
             .form-card { padding: 28px 20px; }
@@ -244,6 +256,7 @@
                     <div class="form-group">
                         <label for="contact">E-Mail *</label>
                         <input type="email" id="contact" name="contact" required placeholder="email@beispiel.de">
+                        <span class="field-error" id="contactError">Bitte geben Sie eine gültige E-Mail-Adresse ein.</span>
                     </div>
                     <div class="form-group">
                         <label for="phone">Telefonnummer</label>
@@ -350,6 +363,54 @@
     </footer>
 
     <script>
+        var emailInput = document.getElementById('contact');
+        var emailError = document.getElementById('contactError');
+        var emailTimer = null;
+
+        function validateEmail(val) {
+            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
+        }
+
+        function showEmailError() {
+            emailInput.classList.add('invalid');
+            emailError.style.display = 'block';
+        }
+
+        function clearEmailError() {
+            emailInput.classList.remove('invalid');
+            emailError.style.display = 'none';
+        }
+
+        emailInput.addEventListener('input', function() {
+            clearTimeout(emailTimer);
+            if (validateEmail(this.value)) {
+                clearEmailError();
+            } else {
+                var val = this.value;
+                emailTimer = setTimeout(function() {
+                    if (val && !validateEmail(emailInput.value)) {
+                        showEmailError();
+                    }
+                }, 700);
+            }
+        });
+
+        emailInput.addEventListener('blur', function() {
+            clearTimeout(emailTimer);
+            if (this.value && !validateEmail(this.value)) {
+                showEmailError();
+            }
+        });
+
+        document.getElementById('contactForm').addEventListener('submit', function(e) {
+            if (!validateEmail(emailInput.value)) {
+                e.stopImmediatePropagation();
+                e.preventDefault();
+                showEmailError();
+                emailInput.focus();
+            }
+        }, true);
+
         document.getElementById('phone').addEventListener('input', function() {
             var pos = this.selectionStart;
             var before = this.value;