Flamingos: Chip gekürzt und Ursache des Mobil-Überlaufs behoben

Rückmeldung der Turnabteilung mit Screenshot: auf dem iPhone war im
Flamingos-Panel der Fließtext rechts abgeschnitten.

Gemessen bei 390px mit aktivem Flamingos-Tab (die anderen Panels sind
ausgeblendet, ihre Chips haben Breite 0 — deshalb fiel es beim Prüfen der Seite
nicht auf): Dokument 442px bei 379px Bildschirm, also 63px Überlauf; der Chip
393px breit in einer 345px-Karte.

Ursache war nicht die Textlänge allein, sondern .group-card__level mit
`white-space: nowrap` UND `flex-shrink: 0`: der Chip konnte seinen Text nicht
brechen und auch nicht schrumpfen, seine Mindestbreite spannte die ganze Karte
auf. Von vier level-Chips war nur dieser betroffen (47 Zeichen gegen 17 bis 25).

Zwei Änderungen:
- Inhalt wie gewünscht gekürzt: "Turnen · fortgeschritten · Alter nach Absprache"
  → "Turnen · fortgeschritten".
- Sicherheitsnetz im CSS: nowrap raus, max-width: 100% rein. Ein Chip trägt
  Information, deshalb umbrechen statt mit … kürzen. flex-shrink: 0 bleibt, es
  hält den Chip neben einem kurzen Gruppennamen in Form.

Gegenprobe, damit der Fix nicht nur am kürzeren Text hängt: mit dem LANGEN Text
und dem CSS-Fix bleibt das Dokument bei 379px, der Chip bricht auf zwei Zeilen.

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

data/turnen.json

@@ -152,7 +152,7 @@
         },
         {
           "name": "Flamingos",
-          "level": "Turnen · fortgeschritten · Alter nach Absprache",
+          "level": "Turnen · fortgeschritten",
           "intro": "In unserer Gruppe für fortgeschrittenes Turnen bauen wir auf bereits erlernten turnerischen Fähigkeiten auf. Das Training orientiert sich an den Anforderungen der LK3 (Kür modifiziert, Leistungsklasse 3).",
           "details": [
             { "heading": "Trainingsinhalte", "text": "Je nach Voraussetzung erlernen wir Elemente wie Radwende, Flick-Flack und Salto (Boden), Kippen und Felge vorlings (Barren), Überschläge (Sprung) sowie Räder und Bogengänge (Balken)." },

public/assets/css/components.css

@@ -2866,7 +2866,19 @@
 }
 
 .group-card__level {
+    /* flex-shrink: 0 hält den Chip neben einem kurzen Gruppennamen in Form; der
+       Elternteil hat flex-wrap, ein langer Chip rutscht also ohnehin auf eine
+       eigene Zeile.
+
+       max-width und der erlaubte Umbruch sind das Sicherheitsnetz: mit
+       `white-space: nowrap` UND `flex-shrink: 0` konnte der Chip seinen Text nicht
+       brechen und auch nicht schrumpfen — seine Mindestbreite spannte damit die
+       ganze Karte auf. Bei den „Flamingos" (47 Zeichen) war der Chip am Handy
+       393px breit in einer 345px-Karte, das Dokument lief um 63px über und der
+       Fließtext war rechts abgeschnitten (Rückmeldung der Turnabteilung,
+       31.07.2026). Ein Chip trägt Information, deshalb umbrechen statt mit … kürzen. */
     flex-shrink: 0;
+    max-width: 100%;
     padding: var(--space-4xs) var(--space-2xs);
     font-size: var(--fs-400);
     text-transform: uppercase;
@@ -2874,7 +2886,6 @@
     color: var(--clr-text-muted);
     border: 1px solid var(--clr-glass-border-strong);
     border-radius: 999px;
-    white-space: nowrap;
 }
 
 /* Intro = Lead-Paragraph, deutlich abgesetzt vom Level-Chip */