Wartelisten-Hinweis für Tiger und Hühner, über dem Anfrageformular

Die Turnabteilung (Maxi) beantwortet laufend Anfragen nach einem Wartelistenplatz
für „Tiger" und „Hühner", den es nicht gibt. Auf der alten Seite stand der Hinweis
direkt über dem Anfrageformular, hier fehlte er.

Schlimmer: an der Stelle stand das GEGENTEIL. Der bisherige Hinweis lautete
"Aktuell sind alle Kinderturngruppen belegt. Bei Interesse setzen wir sie gerne
auf die Warteliste." — für alle Kindergruppen, also auch für die beiden, die
keine Liste führen. Der Satz hat einen Teil der Anfragen vermutlich erst erzeugt.
Er ist nicht gelöscht, sondern auf die übrigen Gruppen eingegrenzt und aufs Du
umgestellt (Haus-Stil; vorher stand dort klein "sie").

Der Text steht genau EINMAL, in data/turnen.json unter
disciplines.eltern-kind-turnen.notice + notice_title. Zwei Stellen lesen ihn:
die rote Kachel auf /turnen/eltern-kind-turnen (gab es schon) und neu ein Block
direkt über dem Formular auf /turnen. Ändert die Abteilung die Lage, ist das eine
Zeile in einer Datei.

Umsetzung:
- notice_title ist neu, weil eine rote Fläche ohne Überschrift wie eine
  Fehlermeldung liest. Abel statt Coolvetica, der Schnitt ist bei ~19px in
  Versalien unleserlich (CLAUDE.md, Design).
- Der Block steht AUSSERHALB des <form> und damit außerhalb der
  role="status"-Region: ein dauerhafter Hinweis, keine Rückmeldung zum Absenden.
  In der Live-Region läse ihn ein Screenreader bei jeder Formularmeldung erneut
  vor. Kein role="alert", er steht schon beim Laden da.
- Überschrift als h3 unter der h2 des Intro-Blocks, damit die Folge nicht springt.
- .contact__notice übernimmt bewusst die Optik von .turnen-dash__notice, damit
  beide Stellen als derselbe Hinweis erkennbar sind. Weiß auf --clr-accent
  erreicht 4,92:1 und trägt damit Fließtext (WCAG 1.4.3). Kommt ein dritter Ort
  dazu, gehören die gemeinsamen Eigenschaften in eine geteilte .notice-Klasse;
  für zwei wäre das verfrüht.

Gemessen: Hinweisbreite gleich Formularbreite (720px bei 1280, 347px bei 390),
kein Überlauf. preflight ohne neue Meldungen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
This commit is contained in:
2026-07-31 21:54:10 +02:00
parent 25f36e5a53
commit 921a55635c
6 changed files with 104 additions and 6 deletions

View File

@@ -7,6 +7,10 @@ declare(strict_types=1);
* $location array{venue, street?, zip?, city?} (optional) — Trainingsort + „Route planen"
* $lead string (optional) — verantwortliche Übungsleitung (Akzent-Kachel)
* $notice string (optional) — hervorgehobener Hinweis (z. B. Wartelisten-Status)
* $noticeTitle string (optional) — Überschrift dazu. Ohne sie liest sich die rote Kachel
* wie eine Fehlermeldung; mit ihr ist auf einen Blick klar, dass es eine
* Information ist. Dieselben zwei Felder rendert contact-form.php über dem
* Formular, damit der Hinweis nur EINMAL in data/turnen.json steht.
* $groups array von Gruppen:
* { name, level?, intro?, details?:[{heading,text}], recommendation?, note?,
* trainers?:[…], sessions:[{ label?, day, time, note?, trainers?:[…] }] }
@@ -22,6 +26,7 @@ $anchor = $anchor ?? 'training';
$groupsTitle = $groupsTitle ?? 'Unsere Gruppen';
$lead = $lead ?? '';
$notice = $notice ?? '';
$noticeTitle = $noticeTitle ?? '';
$footnote = $footnote ?? '';
$groups = $groups ?? [];
$location = $location ?? [];
@@ -80,7 +85,12 @@ $soleNote = $single ? ($groups[0]['note'] ?? '') : '';
<?php if ($notice !== ''): ?>
<article class="bento__tile turnen-dash__notice">
<?= icon('info-circle', 'turnen-dash__notice-icon') ?>
<p><?= e($notice) ?></p>
<div>
<?php if ($noticeTitle !== ''): ?>
<h2 class="turnen-dash__notice-title"><?= e($noticeTitle) ?></h2>
<?php endif; ?>
<p><?= e($notice) ?></p>
</div>
</article>
<?php endif; ?>
<?php if ($single): ?>