Formular-System: zentrale form-field-Komponente, Inline-Feldfehler (aria-describedby, :user-invalid), Fokus-Ringe, Select-Chevron, Pflichtfeld-Kennzeichnung

Enthält auch User-WIP: Banner-Styles + zentriertes Kontakt-Layout in components.css

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

public/assets/js/form.js

@@ -1,5 +1,6 @@
-/* Kontaktformular: Progressive Enhancement — ohne JS normales POST + Redirect.
-   Mit JS: fetch-Submit, Status in aria-live-Region, Button-Sperre während des Sendens. */
+/* Formulare: Progressive Enhancement — ohne JS normales POST + Redirect.
+   Mit JS: Inline-Feldfehler (aria-describedby, Fokus aufs erste ungültige Feld),
+   fetch-Submit, Status in aria-live-Region, Button-Sperre während des Sendens. */
 (function () {
     'use strict';
 
@@ -17,19 +18,50 @@
         mail: 'Deine Nachricht konnte gerade nicht versendet werden. Bitte versuche es später erneut.'
     };
 
+    function errorEl(field) {
+        return field.id ? document.getElementById(field.id + '-error') : null;
+    }
+
+    function showFieldError(field) {
+        var msg = errorEl(field);
+        field.setAttribute('aria-invalid', 'true');
+        if (msg) {
+            msg.textContent = field.validationMessage;
+            msg.hidden = false;
+        }
+    }
+
+    function clearFieldError(field) {
+        var msg = errorEl(field);
+        field.removeAttribute('aria-invalid');
+        if (msg) {
+            msg.textContent = '';
+            msg.hidden = true;
+        }
+    }
+
+    Array.prototype.forEach.call(form.elements, function (field) {
+        field.addEventListener('input', function () { clearFieldError(field); });
+        field.addEventListener('change', function () { clearFieldError(field); });
+    });
+
     function show(type, text) {
         var p = document.createElement('p');
         p.className = type === 'success' ? 'form__success' : 'form__error';
         p.textContent = text;
         status.replaceChildren(p);
+        status.focus({ preventScroll: true });
         status.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     }
 
     form.addEventListener('submit', function (event) {
-        // Native Validierung zuerst (novalidate ist gesetzt, daher manuell).
         if (!form.checkValidity()) {
             event.preventDefault();
-            form.reportValidity();
+            var invalid = form.querySelectorAll(':invalid');
+            Array.prototype.forEach.call(invalid, showFieldError);
+            if (invalid.length) {
+                invalid[0].focus();
+            }
             return;
         }