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

public/assets/css/components.css

@@ -1771,45 +1771,12 @@
     margin-top: var(--space-s);
 }
 
-/* Hinweis direkt über dem Formular (Wartelisten-Status). Bewusst dieselbe Optik wie
-   .turnen-dash__notice, damit es auf /turnen und der Kinderturn-Unterseite als ein und
-   derselbe Hinweis erkennbar ist. Kommt ein dritter Ort dazu, gehören die gemeinsamen
-   Eigenschaften in eine geteilte .notice-Klasse; für zwei wäre das verfrüht.
-   Weiß auf --clr-accent erreicht 4,92:1 und trägt damit Fließtext (WCAG 1.4.3);
-   die Breite folgt dem Formular (.form max-width: 720px), sonst stünde der Kasten
-   sichtbar über die Feldkante hinaus. */
+/* Nur die Breite: der Hinweis über dem Formular soll genau so breit sein wie das
+   Formular (.form max-width: 720px), sonst stünde er sichtbar über die Feldkante
+   hinaus. Alles andere kommt von .notice. */
 .contact__notice {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--space-xs);
     width: 100%;
     max-width: 720px;
-    padding: var(--pad-card);
-    border-radius: var(--radius-card);
-    background: var(--clr-accent);
-    color: #fff;
-}
-
-.contact__notice-icon {
-    flex: none;
-    margin-top: 0.15em;
-    font-size: var(--icon-inline-lg);
-}
-
-.contact__notice-title {
-    margin: 0 0 var(--space-3xs);
-    font-family: var(--ff-body);
-    font-size: var(--fs-600);
-    letter-spacing: var(--ls-caps);
-    text-transform: uppercase;
-    color: #fff;
-}
-
-.contact__notice p {
-    margin: 0;
-    max-width: none;
-    font-size: var(--fs-600);
-    line-height: 1.5;
 }
 
 .form {
@@ -2693,7 +2660,8 @@
 .turnen-dash:not(.turnen-dash--single) .turnen-dash__contact { grid-area: lead; }
 .turnen-dash:not(.turnen-dash--single) .turnen-dash__venue { grid-area: venue; }
 
-/* Mit Hinweis-Kachel: rote Banner-Zeile ganz oben (volle Breite). */
+/* Mit Hinweis: Banner-Zeile ganz oben über die volle Breite. Die Farbe entscheidet die
+   Tonlage der .notice-Komponente, nicht dieses Raster. */
 .turnen-dash--notice.turnen-dash--single {
     grid-template-areas:
         "notice notice notice"
@@ -2705,42 +2673,9 @@
         "notice notice notice"
         "venue venue lead";
 }
+/* Nur die Position im Bento-Raster — Fläche, Farbe und Innenaufbau kommen von .notice. */
 .turnen-dash__notice { grid-area: notice; }
 
-/* Hinweis-Kachel: klar rot, weiße Schrift, Icon links (z. B. Wartelisten-Status). */
-.turnen-dash__notice {
-    flex-direction: row;
-    align-items: flex-start;
-    gap: var(--space-xs);
-    background: var(--clr-accent);
-    border-color: var(--clr-accent);
-    color: #fff;
-}
-
-.turnen-dash__notice p {
-    margin: 0;
-    max-width: none;
-    font-size: var(--fs-600);
-    line-height: 1.5;
-}
-
-/* Abel statt Coolvetica: die Zeile ist mit ~19px weit unter den 28px, ab denen der
-   Condensed-Schnitt in Versalien lesbar bleibt (siehe CLAUDE.md, Design). */
-.turnen-dash__notice-title {
-    margin: 0 0 var(--space-3xs);
-    font-family: var(--ff-body);
-    font-size: var(--fs-600);
-    letter-spacing: var(--ls-caps);
-    text-transform: uppercase;
-    color: #fff;
-}
-
-.turnen-dash__notice-icon {
-    flex: none;
-    margin-top: 0.1em;
-    font-size: var(--icon-l);
-}
-
 /* Trainingsort: Adresse links, Route-Button rechts (wie team-bento__venue). */
 .turnen-dash__venue {
     flex-direction: row;
@@ -2817,6 +2752,66 @@
     }
 }
 
+/* === notice === */
+/* Hervorgehobener Hinweis in zwei Tonlagen (app/components/notice.php). Wird an drei
+   Stellen eingebettet: als Kachel im Turn-Dashboard, über dem Anfrageformular und auf
+   den Disziplin-Unterseiten. Die einbettende Klasse liefert nur Position bzw. Breite.
+
+   Zwei Tonlagen, weil die Farbe eine Bedeutung hat: --stop steht für „geht nicht"
+   (Wartelisten-Stopp), --info für „geht" (neue Kinder dürfen schnuppern). Eine
+   Einladung in Alarmrot liest sich wie eine Absage. Rot bleibt die Ausnahme. */
+.notice {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-xs);
+    padding: var(--pad-card);
+    background: var(--clr-glass-bg);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
+}
+
+/* Neutral: Glas wie jede andere Karte, das Akzentrot trägt nur das Icon. Damit
+   unterscheidet sich der Hinweis von normalem Text, ohne wie eine Warnung zu wirken. */
+.notice--info .notice__icon {
+    color: var(--clr-accent);
+}
+
+/* Weiß auf --clr-accent erreicht 4,92:1 und trägt damit Fließtext (WCAG 1.4.3). */
+.notice--stop {
+    background: var(--clr-accent);
+    border-color: var(--clr-accent);
+    color: #fff;
+}
+
+.notice__icon {
+    flex: none;
+    margin-top: 0.15em;
+    font-size: var(--icon-inline-lg);
+}
+
+.notice__body {
+    min-width: 0;
+}
+
+/* Abel statt Coolvetica: die Zeile ist mit ~19px weit unter den 28px, ab denen der
+   Condensed-Schnitt in Versalien lesbar bleibt (siehe CLAUDE.md, Design). */
+.notice__title {
+    margin: 0 0 var(--space-3xs);
+    font-family: var(--ff-body);
+    font-size: var(--fs-600);
+    letter-spacing: var(--ls-caps);
+    text-transform: uppercase;
+    color: inherit;
+}
+
+.notice p {
+    margin: 0;
+    max-width: none;
+    font-size: var(--fs-600);
+    line-height: 1.5;
+}
+
+
 /* === group-list (Turn-Gruppen einer Disziplin) === */
 .group-list__title {
     margin-bottom: var(--space-l);