Trampolin: Schnupper-Einladung, Hinweise bekommen zwei Tonlagen

Info von Eva aus der Trampolin-Gruppe: neue Kinder können ab September
(Schulbeginn) gerne schnuppern kommen. Die Info stand nirgends.

Rot wäre dafür falsch gewesen. Die Farbe bekommt deshalb eine Bedeutung:
--stop (gefüllt rot) heißt „geht nicht", --info (Glas-Fläche, Rot nur im Icon)
heißt „geht". Eine Einladung in Alarmrot liest sich wie eine Absage, und wenn
alles rot ist, stumpft Rot ab und der echte Wartelisten-Stopp bei „Tiger" und
„Hühner" verliert seine Wirkung. --info ist ab jetzt der Default.

Damit steht der Hinweis an drei Stellen, also greift die Bedingung aus dem
letzten Commit („kommt ein dritter Ort dazu, gehören die gemeinsamen
Eigenschaften in eine geteilte Klasse"): neu app/components/notice.php als
einzige Render-Stelle statt dreimal dasselbe Markup. Die beiden bestehenden
Klassen schrumpfen auf das, was sie wirklich beitragen —
.turnen-dash__notice nur noch grid-area, .contact__notice nur noch die
Formularbreite. Die tote .turnen-dash__notice-icon-Regel ist raus, der
CSS-Abschnitt neu sortiert (notice als eigener Block hinter turnen-dash statt
mitten hinein).

Text, Tonlage und Icon stehen wie gehabt in data/turnen.json bei der
Disziplin, nicht im Template. Kinderturnen trägt jetzt explizit
notice_tone: stop, Trampolin nichts und ist damit neutral.

Das Grid-Template für --notice + --single gab es schon, an beiden
Breakpoints — die Trampolin-Seite hat eine Gruppe und wäre sonst
auseinandergefallen.

Gemessen bei 390px: kein Überlauf auf allen drei Seiten, Trampolin-Fläche
rgba(0,0,0,0.22) (Glas), die beiden anderen #e20612. Zwölf Seiten geprüft,
alle 200. preflight ohne neue Meldungen.

OFFEN, mit Eva oder Tina zu klären: der zweite Satz („Schreib uns davor
einfach kurz eine Nachricht") ist von mir, Eva hat ihn nicht gesagt. Wenn die
Kinder einfach zum Training kommen dürfen, gehört er weg. Und die Einladung
steht bisher nur auf /turnen/trampolin, nicht auf der Übersicht /turnen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7

app/components/contact-form.php

@@ -10,7 +10,7 @@ declare(strict_types=1);
  *           leitet nach PRG hierher zurück (whitelist-validiert), damit /kontakt nicht auf die
  *           Startseite springt.
  *   $notice string optional — hervorgehobener Hinweis DIREKT über dem Formular, plus
- *           $noticeTitle für die Überschrift dazu. Für Dinge, die man wissen muss, BEVOR
+ *           $noticeTitle, $noticeTone und $noticeIcon (siehe components/notice.php). Für Dinge, die man wissen muss, BEVOR
  *           man schreibt (Wartelisten-Status der Turnabteilung). Steht bewusst außerhalb
  *           des <form> und damit außerhalb der role="status"-Region: das ist ein
  *           dauerhafter Hinweis, keine Rückmeldung zum Absenden — in der Live-Region
@@ -32,6 +32,8 @@ $return = $return ?? '';
 $intro = $intro ?? null;
 $notice = $notice ?? '';
 $noticeTitle = $noticeTitle ?? '';
+$noticeTone = $noticeTone ?? 'info';
+$noticeIcon = $noticeIcon ?? 'info-circle';
 
 $variant = contact_variant((string) ($department ?? ''));
 $interests = $variant['interests'];
@@ -81,18 +83,17 @@ $f = [
                 </div>
 <?php endif; ?>
 <?php if ($notice !== ''): ?>
-<?php /* h3, weil der Intro-Block direkt darüber die h2 der Sektion trägt — so bleibt die
-         Überschriften-Folge ohne Sprung. Kein role="alert": der Hinweis steht schon beim
-         Laden da und ist keine Reaktion auf eine Eingabe. */ ?>
-                <aside class="contact__notice">
-                    <?= icon('info-circle', 'contact__notice-icon') ?>
-                    <div>
-<?php if ($noticeTitle !== ''): ?>
-                        <h3 class="contact__notice-title"><?= e($noticeTitle) ?></h3>
-<?php endif; ?>
-                        <p><?= e($notice) ?></p>
-                    </div>
-                </aside>
+<?php /* level h3, weil der Intro-Block direkt darüber die h2 der Sektion trägt — so
+         bleibt die Überschriften-Folge ohne Sprung. Kein role="alert": der Hinweis steht
+         schon beim Laden da und ist keine Reaktion auf eine Eingabe. */ ?>
+<?php component('notice', [
+    'title' => $noticeTitle,
+    'text'  => $notice,
+    'tone'  => $noticeTone,
+    'icon'  => $noticeIcon,
+    'level' => 'h3',
+    'class' => 'contact__notice',
+]); ?>
 <?php endif; ?>
                 <form class="form" method="post" action="<?= e(url('kontakt-senden')) ?>" novalidate>
                     <?php /* autofocus nur beim 422-Re-Render: bringt den Fokus auch ohne JS in die Fehlermeldung */ ?>

app/components/group-schedule.php

@@ -7,10 +7,12 @@ 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.
+ *   $noticeTitle string (optional) — Überschrift dazu
+ *   $noticeTone  'info' (Default) | 'stop' — Tonlage, siehe components/notice.php
+ *   $noticeIcon  string (optional) — Icon-Name, siehe components/notice.php
+ *             Gerendert wird über component('notice') — dieselbe Komponente, die
+ *             contact-form.php über dem Formular benutzt, damit derselbe Hinweis an
+ *             beiden Orten gleich aussieht und 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?:[…] }] }
@@ -27,6 +29,8 @@ $groupsTitle = $groupsTitle ?? 'Unsere Gruppen';
 $lead = $lead ?? '';
 $notice = $notice ?? '';
 $noticeTitle = $noticeTitle ?? '';
+$noticeTone = $noticeTone ?? 'info';
+$noticeIcon = $noticeIcon ?? 'info-circle';
 $footnote = $footnote ?? '';
 $groups = $groups ?? [];
 $location = $location ?? [];
@@ -83,15 +87,13 @@ $soleNote = $single ? ($groups[0]['note'] ?? '') : '';
             <div class="container">
                 <div class="turnen-dash<?= $single ? ' turnen-dash--single' : '' ?><?= $notice !== '' ? ' turnen-dash--notice' : '' ?>">
 <?php if ($notice !== ''): ?>
-                    <article class="bento__tile turnen-dash__notice">
-                        <?= icon('info-circle', 'turnen-dash__notice-icon') ?>
-                        <div>
-<?php if ($noticeTitle !== ''): ?>
-                            <h2 class="turnen-dash__notice-title"><?= e($noticeTitle) ?></h2>
-<?php endif; ?>
-                            <p><?= e($notice) ?></p>
-                        </div>
-                    </article>
+<?php component('notice', [
+    'title' => $noticeTitle,
+    'text'  => $notice,
+    'tone'  => $noticeTone,
+    'icon'  => $noticeIcon,
+    'class' => 'turnen-dash__notice',
+]); ?>
 <?php endif; ?>
 <?php if ($single): ?>
                     <article class="bento__tile turnen-dash__training">

app/components/notice.php

@@ -0,0 +1,43 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * Hervorgehobener Hinweis, den es in zwei Tonlagen gibt. Props:
+ *   $text  string — der Hinweis selbst (Pflicht, leer → nichts)
+ *   $title string (optional) — Überschrift. Ohne sie liest sich besonders die rote
+ *          Variante wie eine Fehlermeldung; mit ihr ist klar, dass es eine Information ist.
+ *   $tone  'info' (Default) | 'stop' — 'info' ist die neutrale Glas-Fläche mit rotem Icon,
+ *          'stop' die gefüllte rote. Die Tonlage sagt, ob etwas GEHT oder NICHT geht:
+ *          „neue Kinder können schnuppern" ist eine Einladung und darf nicht so aussehen
+ *          wie „wir können niemanden aufnehmen". Rot ist die Ausnahme, nicht der Standard.
+ *   $icon  string (optional, Default 'info-circle') — Icon-Name aus public/assets/icons/
+ *   $level 'h2' (Default) | 'h3' — Überschriftenebene, passend zur Umgebung, damit die
+ *          Folge auf der Seite nicht springt
+ *   $class string (optional) — Zusatzklassen für die Einbettung (Position/Breite im
+ *          jeweiligen Layout). Farbe und Innenaufbau kommen ausschließlich von hier.
+ *
+ * Bewusst eine Komponente statt dreimal dasselbe Markup: der Hinweis steht auf
+ * /turnen über dem Anfrageformular, als Kachel auf /turnen/eltern-kind-turnen und
+ * auf /turnen/trampolin. Der TEXT gehört nie hierher, sondern in die data/*.json
+ * der Seite (dort steht auch, welche Tonlage gilt).
+ */
+$text = trim((string) ($text ?? ''));
+if ($text === '') {
+    return;
+}
+$title = trim((string) ($title ?? ''));
+$tone = ($tone ?? 'info') === 'stop' ? 'stop' : 'info';
+$icon = (string) ($icon ?? 'info-circle');
+$level = ($level ?? 'h2') === 'h3' ? 'h3' : 'h2';
+$class = trim((string) ($class ?? ''));
+?>
+                    <div class="notice notice--<?= $tone ?><?= $class !== '' ? ' ' . e($class) : '' ?>">
+                        <?= icon($icon, 'notice__icon') ?>
+                        <div class="notice__body">
+<?php if ($title !== ''): ?>
+                            <<?= $level ?> class="notice__title"><?= e($title) ?></<?= $level ?>>
+<?php endif; ?>
+                            <p><?= e($text) ?></p>
+                        </div>
+                    </div>