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/contact-form.php

@@ -5,6 +5,7 @@ declare(strict_types=1);
 /**
  * Kontaktformular (Felder wie auf der alten Seite). Props:
  *   $intro array{title, text}
+ * Felder rendern ausschließlich über component('form-field') — siehe CLAUDE.md.
  * Liest Flash-Status aus Query-Params (?sent=1 / ?error=...) — PRG-Muster.
  * Spam-Schutz: Honeypot "website" + signierter Timestamp "ft" (form_token()).
  */
@@ -18,6 +19,20 @@ $errorMessages = [
     'validation' => 'Bitte prüfe deine Eingaben – Pflichtfelder fehlen oder die E-Mail-Adresse ist ungültig.',
     'mail'       => 'Deine Nachricht konnte gerade nicht versendet werden. Bitte versuche es später erneut oder schreib uns direkt an ' . $club['email'] . '.',
 ];
+
+$f = [
+    'name'     => ['type' => 'text', 'name' => 'name', 'id' => 'contact-name', 'label' => 'Name', 'required' => true, 'autocomplete' => 'name', 'maxlength' => 200],
+    'email'    => ['type' => 'email', 'name' => 'email', 'id' => 'contact-email', 'label' => 'E-Mail', 'required' => true, 'autocomplete' => 'email', 'maxlength' => 200],
+    'phone'    => ['type' => 'tel', 'name' => 'phone', 'id' => 'contact-phone', 'label' => 'Telefonnummer', 'autocomplete' => 'tel', 'maxlength' => 50],
+    'interest' => ['type' => 'select', 'name' => 'interest', 'id' => 'contact-interest', 'label' => 'Ich interessiere mich für', 'options' => $interests],
+    'subject'  => ['type' => 'text', 'name' => 'subject', 'id' => 'contact-subject', 'label' => 'Betreff', 'required' => true, 'maxlength' => 200],
+    'message'  => ['type' => 'textarea', 'name' => 'message', 'id' => 'contact-message', 'label' => 'Nachricht', 'required' => true, 'maxlength' => 5000, 'rows' => 6],
+    'privacy'  => [
+        'type' => 'checkbox', 'name' => 'privacy', 'id' => 'contact-privacy', 'required' => true,
+        'label'      => 'Ich stimme den Datenschutzbestimmungen zu.',
+        'label_html' => 'Ich stimme den <a href="' . e(url('datenschutz')) . '">Datenschutzbestimmungen</a> zu.',
+    ],
+];
 ?>
         <section class="section contact" id="kontakt">
             <div class="container contact__inner">
@@ -27,7 +42,7 @@ $errorMessages = [
                     <p class="text-muted">Oder direkt per Mail an <a href="mailto:<?= e($club['email']) ?>"><?= e($club['email']) ?></a></p>
                 </div>
                 <form class="form" method="post" action="<?= e(url('kontakt-senden')) ?>" novalidate>
-                    <div class="form__status" role="status" aria-live="polite" data-form-status>
+                    <div class="form__status" role="status" aria-live="polite" tabindex="-1" data-form-status>
 <?php if ($sent): ?>
                         <p class="form__success">Danke für deine Anfrage! Wir melden uns so schnell wie möglich bei dir.</p>
 <?php elseif ($error !== null): ?>
@@ -35,47 +50,21 @@ $errorMessages = [
 <?php endif; ?>
                     </div>
 
+                    <p class="form__note">Pflichtfelder sind mit <span class="form__required" aria-hidden="true">*</span><span class="visually-hidden">Stern</span> markiert.</p>
+
                     <div class="form__row">
-                        <div class="form__field">
+<?php component('form-field', ['field' => $f['name']]); ?>
-                            <label for="contact-name">Name *</label>
+<?php component('form-field', ['field' => $f['email']]); ?>
-                            <input type="text" id="contact-name" name="name" required autocomplete="name" maxlength="200">
-                        </div>
-                        <div class="form__field">
-                            <label for="contact-email">E-Mail *</label>
-                            <input type="email" id="contact-email" name="email" required autocomplete="email" maxlength="200">
-                        </div>
                     </div>
 
                     <div class="form__row">
-                        <div class="form__field">
+<?php component('form-field', ['field' => $f['phone']]); ?>
-                            <label for="contact-phone">Telefonnummer</label>
+<?php component('form-field', ['field' => $f['interest']]); ?>
-                            <input type="tel" id="contact-phone" name="phone" autocomplete="tel" maxlength="50">
-                        </div>
-                        <div class="form__field">
-                            <label for="contact-interest">Ich interessiere mich für</label>
-                            <select id="contact-interest" name="interest">
-                                <option value="">Bitte wählen</option>
-<?php foreach ($interests as $interest): ?>
-                                <option value="<?= e($interest) ?>"><?= e($interest) ?></option>
-<?php endforeach; ?>
-                            </select>
-                        </div>
                     </div>
 
-                    <div class="form__field">
+<?php component('form-field', ['field' => $f['subject']]); ?>
-                        <label for="contact-subject">Betreff *</label>
+<?php component('form-field', ['field' => $f['message']]); ?>
-                        <input type="text" id="contact-subject" name="subject" required maxlength="200">
+<?php component('form-field', ['field' => $f['privacy']]); ?>
-                    </div>
-
-                    <div class="form__field">
-                        <label for="contact-message">Nachricht *</label>
-                        <textarea id="contact-message" name="message" rows="6" required maxlength="5000"></textarea>
-                    </div>
-
-                    <div class="form__field form__field--checkbox">
-                        <input type="checkbox" id="contact-privacy" name="privacy" value="1" required>
-                        <label for="contact-privacy">Ich stimme den <a href="<?= e(url('datenschutz')) ?>">Datenschutzbestimmungen</a> zu. *</label>
-                    </div>
 
                     <?php /* Honeypot — für Menschen unsichtbar, Bots füllen es aus */ ?>
                     <div class="visually-hidden" aria-hidden="true">

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; ?>

public/assets/css/components.css

@@ -334,6 +334,44 @@
     border: 1px solid var(--clr-glass-border);
     border-radius: var(--radius-btn);
     color: var(--clr-text);
+    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
+}
+
+.form__field input:hover,
+.form__field select:hover,
+.form__field textarea:hover {
+    border-color: rgb(255 255 255 / 0.4);
+}
+
+/* Eigener, deutlich sichtbarer Fokus-Ring statt des globalen Outlines */
+.form__field input:focus-visible,
+.form__field select:focus-visible,
+.form__field textarea:focus-visible {
+    outline: none;
+    border-color: rgb(255 255 255 / 0.75);
+    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.18);
+}
+
+.form__field ::placeholder {
+    color: rgb(255 255 255 / 0.45);
+}
+
+/* Fehlerzustand: per JS (aria-invalid) und nativ nach Nutzereingabe (:user-invalid) */
+.form__field input[aria-invalid="true"],
+.form__field select[aria-invalid="true"],
+.form__field textarea[aria-invalid="true"],
+.form__field input:user-invalid,
+.form__field select:user-invalid,
+.form__field textarea:user-invalid {
+    border-color: var(--clr-error);
+}
+
+.form__field select {
+    appearance: none;
+    padding-right: 2.5rem;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.9rem center;
 }
 
 .form__field select option {
@@ -341,6 +379,31 @@
     color: var(--clr-text);
 }
 
+.form__note {
+    margin: 0;
+    font-size: var(--fs-400);
+    color: var(--clr-text-muted);
+}
+
+.form__required {
+    color: var(--clr-accent);
+}
+
+.form__hint {
+    font-size: var(--fs-400);
+    color: var(--clr-text-muted);
+}
+
+.form__error-msg {
+    font-size: var(--fs-400);
+    color: var(--clr-error);
+}
+
+.form button[disabled] {
+    opacity: 0.65;
+    cursor: progress;
+}
+
 .form__field textarea {
     resize: vertical;
     min-height: 8rem;
@@ -385,3 +448,234 @@
 .form__submit {
     margin: 0;
 }
+
+/* === Werbe-/Sponsoren-Banner (Slider) === */
+.ad-banner {
+    --banner-interval: 6s;
+}
+
+.ad-banner__subline {
+    margin-top: 0.75rem;
+    max-width: 70ch;
+}
+
+.ad-banner__track {
+    list-style: none;
+    margin: 2rem 0 0;
+    padding: 0;
+}
+
+.ad-banner__slide[hidden] {
+    display: none;
+}
+
+.ad-banner__slide {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 2.5rem;
+    align-items: center;
+    padding: clamp(1.75rem, 1rem + 2vw, 3rem);
+    background: var(--clr-glass-bg);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
+    box-shadow: var(--shadow-card);
+}
+
+/* Optionaler Hintergrund pro Banner (data: "background").
+   Dunkler Verlauf über dem Bild hält Text & CTA links lesbar. */
+.ad-banner__slide--bg {
+    background-image:
+        linear-gradient(to right, rgb(0 0 0 / 0.82), rgb(0 0 0 / 0.45) 60%, rgb(0 0 0 / 0.3)),
+        var(--banner-bg);
+    background-size: cover;
+    background-position: center;
+    border-color: transparent;
+}
+
+.ad-banner__slide--bg .ad-banner__text {
+    color: var(--clr-text);
+}
+
+.ad-banner__slide--bg .ad-banner__logo {
+    background: rgb(0 0 0 / 0.4);
+    border-color: rgb(255 255 255 / 0.3);
+    backdrop-filter: blur(2px);
+}
+
+@media (max-width: 768px) {
+    /* Auf Mobil läuft der Verlauf nach unten, damit der gestapelte Text lesbar bleibt. */
+    .ad-banner__slide--bg {
+        background-image:
+            linear-gradient(to bottom, rgb(0 0 0 / 0.82), rgb(0 0 0 / 0.5)),
+            var(--banner-bg);
+    }
+}
+
+.ad-banner__tag {
+    display: inline-block;
+    margin-bottom: 0.85rem;
+    padding: 0.2em 0.7em;
+    font-size: var(--fs-300);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--clr-text-muted);
+    background: rgb(255 255 255 / 0.08);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: 999px;
+}
+
+.ad-banner__title {
+    font-family: var(--ff-heading);
+    font-size: var(--fs-700);
+    line-height: var(--lh-heading);
+    margin-bottom: 0.6rem;
+}
+
+.ad-banner__text {
+    max-width: 52ch;
+    margin-bottom: 1.5rem;
+    color: var(--clr-text-muted);
+}
+
+.ad-banner__logo {
+    display: grid;
+    place-items: center;
+    min-height: 130px;
+    padding: 1.5rem;
+    background: rgb(0 0 0 / 0.18);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
+}
+
+.ad-banner__logo img {
+    width: auto;
+    max-width: 100%;
+    max-height: 96px;
+    object-fit: contain;
+}
+
+@media (max-width: 768px) {
+    .ad-banner__slide {
+        grid-template-columns: 1fr;
+        gap: 1.75rem;
+    }
+}
+
+/* Steuerung: Pause/Play-Taste + Indikatorleiste. */
+.ad-banner__controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1.75rem;
+}
+
+.ad-banner__controls[hidden] {
+    display: none;
+}
+
+.ad-banner__toggle {
+    display: inline-grid;
+    place-items: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    padding: 0;
+    color: var(--clr-text);
+    background: var(--clr-glass-bg);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: 999px;
+    cursor: pointer;
+    transition: background var(--transition);
+}
+
+.ad-banner__toggle[hidden] {
+    display: none;
+}
+
+.ad-banner__toggle:hover {
+    background: rgb(255 255 255 / 0.2);
+}
+
+.ad-banner__toggle:focus-visible {
+    outline: 2px solid var(--clr-text);
+    outline-offset: 3px;
+}
+
+/* Pause-Symbol (zwei Balken) im Abspiel-Zustand … */
+.ad-banner__toggle::before {
+    content: "";
+    display: block;
+    width: 4px;
+    height: 13px;
+    border-left: 4px solid currentColor;
+    border-right: 4px solid currentColor;
+}
+
+/* … Play-Dreieck, wenn pausiert. */
+.ad-banner__toggle[aria-pressed="true"]::before {
+    width: 0;
+    height: 0;
+    margin-left: 3px;
+    border: 0;
+    border-left: 13px solid currentColor;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+}
+
+/* Indikatorleiste — die aktive Leiste füllt sich über --banner-interval. */
+.ad-banner__indicators {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.ad-banner__dot {
+    position: relative;
+    width: 48px;
+    height: 6px;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: var(--clr-glass-border);
+    cursor: pointer;
+    overflow: hidden;
+    transition: background var(--transition);
+}
+
+.ad-banner__dot:hover {
+    background: rgb(255 255 255 / 0.35);
+}
+
+.ad-banner__dot:focus-visible {
+    outline: 2px solid var(--clr-text);
+    outline-offset: 3px;
+}
+
+.ad-banner__progress {
+    position: absolute;
+    inset: 0;
+    background: var(--clr-accent);
+    transform: scaleX(0);
+    transform-origin: left;
+}
+
+.ad-banner__dot.is-active .ad-banner__progress {
+    animation: ad-progress var(--banner-interval) linear forwards;
+}
+
+.ad-banner.is-paused .ad-banner__dot.is-active .ad-banner__progress {
+    animation-play-state: paused;
+}
+
+@keyframes ad-progress {
+    from { transform: scaleX(0); }
+    to   { transform: scaleX(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ad-banner__dot.is-active .ad-banner__progress {
+        animation: none;
+        transform: scaleX(1);
+    }
+}

public/assets/js/form.js

@@ -1,5 +1,6 @@
-/* Kontaktformular: Progressive Enhancement — ohne JS normales POST + Redirect.
+/* Formulare: Progressive Enhancement — ohne JS normales POST + Redirect.
-   Mit JS: fetch-Submit, Status in aria-live-Region, Button-Sperre während des Sendens. */
+   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;
         }