Turn-Beiträge sichtbar machen (standen nirgends auf der Website)

Die Turnabteilung verlinkt die Beiträge in Einladungen für neue Familien und
nimmt zum September auf — die Angaben waren aber auf der ganzen Website nicht
zu finden. Nachgeprüft: 0 Treffer auf /turnen und allen fünf Disziplin-Seiten,
/mitglied-werden führt nur die Fußball-Beiträge.

Es war keine verlorene Seite, sondern eine Lücke im Code: app/pages/turnen.php
rendert nur Hero, Karten und Formular. In data/turnen.json lagen ungenutzt
cards_intro, fees (drei Tabellen), austritt und faq (fünf Fragen). Der Docblock
behauptete, die Beiträge lägen auf den Unterseiten — sie lagen dort nicht, und
in der Git-Historie wurden sie nie gerendert.

Inhalte 1:1 wie auf der alten Seite (gegengeprüft an 2024.tsv08kulmbach.de,
Tab "Allgemeines"): Zusatzbeitrag 24/48 €, Neumitglieder 84/94/184 €,
Förderstufen 120/180/240 €, Austritt zum 30. September. Nichts umformuliert,
die Abteilung entscheidet über Änderungen.

Struktur jetzt Hero → Karten → Beiträge (#beitraege) → FAQ → Formular. Der
Anker ist die Adresse für die Einladungen. Nur bestehende Komponenten benutzt
(fee-table wie auf /mitglied-werden, faq, team-cards mit intro); neu ist allein
der Wrapper .fee-tables. Die FAQ füllt zusätzlich das FAQPage-Schema, weil
page_schema() sie als zweiten Parameter bekommt.

Feinschliff nach Sichtprüfung: Kartentitel von --fs-650 auf --fs-675, weil 28px
Coolvetica neben 21px Fließtext zu klein wirkten; Karten gleich hoch (der
Grid-Default stretch statt align-items: start, gemessen vorher 252/377/471px)
mit dem Hinweis am Kartenfuß; und minmax(min(22rem, 100%), 1fr) statt
minmax(22rem, 1fr), weil die Karten am Handy 352px breit in einem 347px-Raster
standen und überliefen.

NOCH offen: overview.cta ist weiter unbenutzt. Der Block verlinkt "Zur
Turn-Übersicht" und gehört auf die Disziplin-Unterseiten, nicht auf die
Übersicht — dort wäre es ein Selbstlink.

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

app/pages/turnen.php

@@ -3,9 +3,23 @@
 declare(strict_types=1);
 
 /**
- * Turn-Übersichtsseite (Hub + Abteilungskontakt). Inhalt: data/turnen.json.
- * Struktur: Hero → Disziplin-Karten → Anfrageformular. Die Detailinhalte
- * (Beiträge, Trainingszeiten) leben auf den Disziplin-Unterseiten.
+ * Turn-Übersichtsseite (Hub + Beiträge + Abteilungskontakt). Inhalt: data/turnen.json.
+ * Struktur: Hero → Disziplin-Karten → Beiträge → FAQ → Anfrageformular.
+ *
+ * Hier stand vorher „Die Detailinhalte (Beiträge, Trainingszeiten) leben auf den
+ * Disziplin-Unterseiten" — das war falsch, und zwar folgenreich: die Seite gab
+ * fees/austritt/faq NIE aus, die Unterseiten auch nicht, und damit standen die
+ * Turn-Beiträge NIRGENDS auf der Website (nachgeprüft 31.07.2026: 0 Treffer auf
+ * /turnen und allen fünf Unterseiten; /mitglied-werden führt nur die Fußball-
+ * Beiträge). Die Turnabteilung verlinkt diese Angaben in Einladungen für neue
+ * Familien, deshalb ist der Beitragsblock hier verankert (#beitraege).
+ * Die Daten selbst stimmen 1:1 mit der alten Seite überein (gegengeprüft an
+ * 2024.tsv08kulmbach.de): Zusatzbeitrag 24/48 €, Neumitglieder 84/94/184 €,
+ * Förderstufen 120/180/240 €, Austritt zum 30. September.
+ *
+ * NOCH unbenutzt: overview.cta („Lust aufs Turnen bekommen?"). Der Block verlinkt
+ * „Zur Turn-Übersicht" und gehört damit auf die Disziplin-Unterseiten, nicht hierher
+ * — auf der Übersicht wäre das ein Selbstlink.
  *
  * Das Formular ist die allgemeine contact-form-Komponente mit
  * department => 'turnen': Auswahlliste sind die Disziplinen, Empfänger ist die
@@ -33,10 +47,12 @@ $meta = [
     'title'       => 'Turnen in Kulmbach',
     'description' => 'Die Turnabteilung des TSV 08 Kulmbach: Eltern-Kind- und Kinderturnen, Erwachsenenturnen, Step Aerobic, Fitness und Pilates, Trampolin- und Wettkampfturnen.',
     'og_image'    => 'img/pages/vereinsgelaende-1600.jpg',
+    // Zweiter Parameter = FAQ: sichtbare Fragen und FAQPage-Schema kommen aus
+    // derselben Quelle, damit sie nie auseinanderlaufen (CLAUDE.md).
     'schema'      => page_schema([
         ['name' => 'Startseite', 'slug' => ''],
         ['name' => 'Turnen', 'slug' => 'turnen'],
-    ]),
+    ], $page['faq'] ?? []),
 ];
 
 component('hero', ['hero' => $page['hero']]);
@@ -44,8 +60,35 @@ component('team-cards', [
     'teams'        => $cards,
     'title'        => 'Unsere Turngruppen',
     'title_hidden' => true,
+    'intro'        => $page['cards_intro'] ?? null,
     'anchor'       => 'gruppen',
 ]);
+?>
+<?php /* Beiträge. Der Anker #beitraege ist die Adresse, die die Turnabteilung in
+         Einladungen weitergibt — nicht umbenennen. Drei Tabellen über die
+         bestehende fee-table-Komponente (dieselbe wie auf /mitglied-werden),
+         darunter die Austrittsregel, weil sie zur Beitragsfrage gehört. */ ?>
+        <section class="section section--tinted" id="beitraege">
+            <div class="container">
+                <h2><?= e($page['fees_title']) ?></h2>
+<?php if (!empty($page['fees_intro'])): ?>
+                <p class="lead"><?= e($page['fees_intro']) ?></p>
+<?php endif; ?>
+                <div class="fee-tables">
+<?php foreach ($page['fees'] as $feeTable): ?>
+<?php component('fee-table', ['fees' => $feeTable]); ?>
+<?php endforeach; ?>
+                </div>
+<?php if (!empty($page['austritt']['title'])): ?>
+                <div class="prose">
+                    <h3><?= e($page['austritt']['title']) ?></h3>
+                    <p><?= inline_links_html($page['austritt']['text']) ?></p>
+                </div>
+<?php endif; ?>
+            </div>
+        </section>
+<?php
+component('faq', ['faq' => $page['faq'] ?? []]);
 component('contact-form', [
     'intro'      => $page['contact'],
     'return'     => 'turnen',

public/assets/css/components.css

@@ -4140,7 +4140,30 @@
 }
 
 /* === fee-table (Beitragstabellen) === */
+/* Mehrere Tabellen nebeneinander (Turnen hat drei: Zusatzbeitrag, Neumitglieder,
+   Förderstufen). auto-fit mit 22rem Mindestbreite statt einer festen Spaltenzahl:
+   bei drei Tabellen ergibt das auf Desktop eine Reihe, am Handy eine Spalte, und
+   es bleibt richtig, wenn eine vierte Tabelle dazukommt. /mitglied-werden gibt
+   nur EINE Tabelle aus und braucht den Wrapper nicht. */
+.fee-tables {
+    display: grid;
+    /* min(22rem, 100%) statt nur 22rem: die reine Mindestbreite kann der Spur nicht
+       unterschritten werden, dadurch waren die Karten am Handy 352px breit in einem
+       347px-Raster und liefen über (gemessen bei 390px Viewport). */
+    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
+    gap: var(--space-l);
+    margin-top: var(--space-2xl);
+    /* KEIN align-items: start. Mit `start` war jede Karte nur so hoch wie ihr Inhalt
+       (252 / 377 / 471px gemessen) und die Reihe sah zerrupft aus. Der Grid-Default
+       `stretch` macht sie gleich hoch; damit die gewonnene Höhe nicht als Loch
+       endet, schiebt .fee-table__note sich an den Kartenfuß (siehe unten). */
+}
+
 .fee-table {
+    /* Flex-Spalte, damit __note per margin-top: auto an den Kartenfuß rutscht.
+       Ohne Höhenüberschuss (Einzeltabelle auf /mitglied-werden) ändert das nichts. */
+    display: flex;
+    flex-direction: column;
     padding: clamp(var(--space-m), var(--space-s) + 1.5vw, var(--space-xl));
     background: var(--clr-glass-bg);
     border: 1px solid var(--clr-glass-border);
@@ -4148,7 +4171,11 @@
 }
 
 .fee-table__title {
-    font-size: var(--fs-650);
+    /* --fs-675 statt --fs-650: bei 28px wirkte der Titel neben dem 21px-Fließtext
+       zu klein, weil Coolvetica ein schmaler Schnitt ist (Felix, 31.07.2026).
+       34px ist die nächste Stufe; --fs-690 (bis 44px) würde die langen Titel wie
+       „Zusatzbeitrag für bestehende TSV-Mitglieder" in drei Zeilen brechen. */
+    font-size: var(--fs-675);
     line-height: var(--lh-heading);
     margin-bottom: var(--space-s);
 }
@@ -4184,7 +4211,8 @@
 }
 
 .fee-table__note {
-    margin-top: var(--space-s);
+    margin-top: auto;
+    padding-top: var(--space-s);
     font-size: var(--fs-400);
     color: var(--clr-text-muted);
 }