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>

app/components/form-field.php

@@ -0,0 +1,66 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * Einheitliches Formularfeld — EINZIGE Quelle für Feld-Markup aller Formulare.
+ *
+ * Props: $field (array):
+ *   type         text | email | tel | select | textarea | checkbox (Default: text)
+ *   name, label  Pflicht
+ *   id           Default: field-<name>
+ *   required     bool
+ *   autocomplete, maxlength, rows (textarea)
+ *   options[]    + placeholder (select)
+ *   hint         optionaler Hilfetext (aria-describedby)
+ *   label_html   NUR für vertrauenswürdiges Markup aus Komponenten-Code
+ *                (z. B. Datenschutz-Link im Checkbox-Label) — nie Nutzereingaben!
+ *
+ * Jedes Feld bekommt ein leeres Fehler-Element (#<id>-error), das form.js bei
+ * ungültiger Eingabe mit der Browser-Validierungsmeldung füllt (aria-describedby).
+ */
+$type = $field['type'] ?? 'text';
+$name = $field['name'];
+$id = $field['id'] ?? 'field-' . $name;
+$required = !empty($field['required']);
+$errorId = $id . '-error';
+$hintId = $id . '-hint';
+$describedBy = (!empty($field['hint']) ? $hintId . ' ' : '') . $errorId;
+
+$requiredMark = $required
+    ? ' <span class="form__required" aria-hidden="true">*</span>'
+    : '';
+
+$commonAttrs = 'name="' . e($name) . '" id="' . e($id) . '"'
+    . ($required ? ' required' : '')
+    . ' aria-describedby="' . e($describedBy) . '"'
+    . (!empty($field['autocomplete']) ? ' autocomplete="' . e($field['autocomplete']) . '"' : '')
+    . (!empty($field['maxlength']) ? ' maxlength="' . e($field['maxlength']) . '"' : '');
+?>
+<?php if ($type === 'checkbox'): ?>
+                    <div class="form__field form__field--checkbox">
+                        <input type="checkbox" <?= $commonAttrs ?> value="1">
+                        <label for="<?= e($id) ?>"><?= $field['label_html'] ?? e($field['label']) ?><?= $requiredMark ?></label>
+                        <p class="form__error-msg" id="<?= e($errorId) ?>" hidden></p>
+                    </div>
+<?php else: ?>
+                    <div class="form__field">
+                        <label for="<?= e($id) ?>"><?= e($field['label']) ?><?= $requiredMark ?></label>
+<?php if ($type === 'select'): ?>
+                        <select <?= $commonAttrs ?>>
+                            <option value=""><?= e($field['placeholder'] ?? 'Bitte wählen') ?></option>
+<?php foreach ($field['options'] as $option): ?>
+                            <option value="<?= e($option) ?>"><?= e($option) ?></option>
+<?php endforeach; ?>
+                        </select>
+<?php elseif ($type === 'textarea'): ?>
+                        <textarea <?= $commonAttrs ?> rows="<?= e($field['rows'] ?? 6) ?>"></textarea>
+<?php else: ?>
+                        <input type="<?= e($type) ?>" <?= $commonAttrs ?>>
+<?php endif; ?>
+<?php if (!empty($field['hint'])): ?>
+                        <p class="form__hint" id="<?= e($hintId) ?>"><?= e($field['hint']) ?></p>
+<?php endif; ?>
+                        <p class="form__error-msg" id="<?= e($errorId) ?>" hidden></p>
+                    </div>
+<?php endif; ?>