Turnabteilung: Übersicht + 5 Disziplin-Unterseiten im Bento-Layout

- Neue Übersichtsseite (Hub: Hero + Disziplin-Kacheln) sowie Unterseiten für
  Erwachsenenturnen, Eltern-Kind-/Kinderturnen, Step Aerobic/Fitness/Pilates,
  Trampolin und Wettkampfturnen. Inhalte 1:1 von der alten Seite, gepflegt in
  der neuen Single-Source data/turnen.json.
- Neue Komponente group-schedule im einheitlichen Bento-Look wie die
  Mannschaftsseiten: Dashboard mit Trainingszeiten, Kontakt-Kachel (mailto an die
  Turnabteilung) und Trainingsort; gestapelte/gerasterte Gruppen-Karten für
  Mehr-Gruppen-Disziplinen, rote Hinweis-Kachel (z. B. Warteliste).
- Routing (app/routes.php) und Navigations-Dropdown (data/navigation.json) für
  Turnen; zugehörige Styles in components.css.
- Themenbezogene, self-hostete Unsplash-Platzhalterbilder für die Kacheln.

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

public/assets/css/components.css

@@ -1465,6 +1465,340 @@
     }
 }
 
+/* === turnen-dash (Turn-Disziplin-Dashboard im Bento-Look wie Mannschaftsseiten) === */
+.turnen-dash {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.25rem;
+}
+
+/* Eine Gruppe: Trainingszeiten (2/3) + Verantwortlich (1/3), Ort volle Breite darunter. */
+.turnen-dash--single {
+    grid-template-areas:
+        "train train lead"
+        "venue venue venue";
+}
+.turnen-dash--single .turnen-dash__training { grid-area: train; }
+.turnen-dash--single .turnen-dash__contact  { grid-area: lead; }
+.turnen-dash--single .turnen-dash__venue    { grid-area: venue; }
+
+/* Mehrere Gruppen: Ort (2/3) + Kontakt rechts (1/3) — Zeiten stehen je Gruppe.
+   Kontakt steht dadurch konsistent rechts wie bei den Einzel-Disziplinen. */
+.turnen-dash:not(.turnen-dash--single) {
+    grid-template-areas: "venue venue lead";
+}
+.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). */
+.turnen-dash--notice.turnen-dash--single {
+    grid-template-areas:
+        "notice notice notice"
+        "train train lead"
+        "venue venue venue";
+}
+.turnen-dash--notice:not(.turnen-dash--single) {
+    grid-template-areas:
+        "notice notice notice"
+        "venue venue lead";
+}
+.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: 0.7rem;
+    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;
+}
+
+.turnen-dash__notice-icon {
+    flex: none;
+    margin-top: 0.1em;
+    font-size: 1.5rem;
+}
+
+/* Trainingsort: Adresse links, Route-Button rechts (wie team-bento__venue). */
+.turnen-dash__venue {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.25rem;
+}
+
+.turnen-dash__venue-main {
+    position: relative;
+    z-index: 1;
+}
+
+.turnen-dash__venue .bento__heading {
+    margin-bottom: 0.6rem;
+}
+
+.turnen-dash__route {
+    position: relative;
+    z-index: 1;
+    flex: none;
+}
+
+/* Kontakt-Kachel: schlichter weißer Mail-Link (zentriert) auf der Akzentfläche. */
+.turnen-dash__mail {
+    display: inline-flex;
+    align-self: center;
+    align-items: center;
+    gap: 0.45rem;
+    margin-top: 0.75rem;
+    color: #fff;
+    font-size: var(--fs-500);
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+}
+
+.turnen-dash__mail:hover,
+.turnen-dash__mail:focus-visible {
+    color: rgb(255 255 255 / 0.82);
+}
+
+.turnen-dash__mail-icon {
+    flex: none;
+}
+
+@media (max-width: 900px) {
+    .turnen-dash,
+    .turnen-dash--single {
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "train"
+            "lead"
+            "venue";
+    }
+    .turnen-dash:not(.turnen-dash--single) {
+        grid-template-areas:
+            "lead"
+            "venue";
+    }
+    .turnen-dash--notice,
+    .turnen-dash--notice.turnen-dash--single {
+        grid-template-areas:
+            "notice"
+            "train"
+            "lead"
+            "venue";
+    }
+    .turnen-dash--notice:not(.turnen-dash--single) {
+        grid-template-areas:
+            "notice"
+            "lead"
+            "venue";
+    }
+}
+
+/* === group-list (Turn-Gruppen einer Disziplin) === */
+.group-list__title {
+    margin-bottom: 1.5rem;
+}
+
+/* Schlichte Gruppen (z. B. Kurse) als Raster, beschreibende Gruppen gestapelt. */
+.group-list--grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 1.25rem;
+}
+
+.group-list--stacked {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.group-card {
+    padding: 1.75rem 2rem 2rem;
+    background: var(--clr-glass-bg);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
+}
+
+/* Gestapelt: Beschreibung links, Trainingszeiten-Panel rechts. */
+.group-list--stacked .group-card {
+    display: grid;
+    grid-template-columns: 1.6fr 1fr;
+    gap: 2.5rem;
+    align-items: start;
+    padding: 2rem 2.25rem;
+}
+
+@media (max-width: 768px) {
+    .group-list--stacked .group-card {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+        padding: 1.6rem 1.75rem 1.75rem;
+    }
+}
+
+/* Beschreibungsspalte: angenehme Zeilenlänge + Lesefluss. */
+.group-card__body {
+    max-width: 64ch;
+}
+
+.group-card__name {
+    font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.3rem);
+    line-height: var(--lh-heading);
+}
+
+.group-card__level {
+    margin: -0.15rem 0 0;
+    font-size: var(--fs-500);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--clr-text-muted);
+}
+
+.group-card__intro {
+    margin: 0.85rem 0 0;
+    line-height: 1.65;
+}
+
+.group-card__detail-heading {
+    margin: 1.6rem 0 0;
+    /* Body-Schrift (Abel) als Eyebrow — Coolvetica wäre in dieser Größe unleserlich. */
+    font-family: var(--ff-body);
+    font-size: var(--fs-500);
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--clr-accent);
+}
+
+.group-card__detail-text {
+    margin: 0.4rem 0 0;
+    line-height: 1.65;
+}
+
+.group-card__recommendation {
+    margin: 1.6rem 0 0;
+    padding-top: 1.1rem;
+    border-top: 1px solid var(--clr-glass-border);
+    font-size: var(--fs-500);
+    font-style: italic;
+    line-height: 1.6;
+}
+
+/* Trainingszeiten-Panel in der Karte. */
+.group-card__schedule {
+    margin-top: 1.25rem;
+}
+
+.group-list--stacked .group-card__schedule {
+    margin-top: 0;
+    padding: 1.5rem 1.6rem;
+    background: var(--clr-bg);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
+}
+
+.group-card__schedule-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0 0 0.85rem;
+    font-size: var(--fs-600);
+}
+
+.group-card__schedule-icon {
+    flex: none;
+    color: var(--clr-accent);
+}
+
+.group-card__trainers {
+    margin: 0.85rem 0 0;
+    font-size: var(--fs-500);
+    line-height: 1.5;
+}
+
+.group-card__note {
+    margin: 0.5rem 0 0;
+    font-size: var(--fs-500);
+}
+
+/* Trainingszeiten-Liste (Tag/Zeit + optional Label, Notiz, Übungsleitung). */
+.schedule-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.schedule-row {
+    padding: 0.7rem 0;
+    border-bottom: 1px solid var(--clr-glass-border);
+}
+
+.schedule-row:first-child { padding-top: 0; }
+.schedule-row:last-child  { padding-bottom: 0; border-bottom: 0; }
+
+.schedule-row__label {
+    display: block;
+    margin-bottom: 0.2rem;
+    font-size: var(--fs-600);
+    color: var(--clr-text);
+}
+
+.schedule-row__when {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.schedule-row__time {
+    font-size: var(--fs-600);
+    text-align: right;
+    white-space: nowrap;
+}
+
+.schedule-row__note {
+    display: block;
+    margin-top: 0.15rem;
+    font-size: var(--fs-500);
+}
+
+.schedule-row__trainers {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: var(--fs-500);
+    line-height: 1.5;
+}
+
+.schedule-row__trainers-label {
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--clr-text-muted);
+}
+
+.group-list__footnote {
+    margin: 1.5rem 0 0;
+    font-size: var(--fs-500);
+}
+
+@media (max-width: 600px) {
+    .schedule-row__when {
+        flex-direction: column;
+        gap: 0.15rem;
+    }
+    .schedule-row__time {
+        text-align: left;
+    }
+}
+
 /* === cta-band === */
 .cta-band__inner {
     max-width: 60ch;

public/assets/icons/info-circle.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/></svg>