Turn-Gruppenkarten: fr-Spuren begrenzen (Textumbruch bei 300px)

Bei sehr schmalen Breiten stand der Text über den Kartenrand hinaus. Gemessen bei
300px Viewport (clientWidth 289): Dokument 317px, also 28px Überlauf; die einzelne
Grid-Spur des Panels rechnete sich auf 267,7px aus, obwohl die Karte nur 193px
Inhaltsfläche hat.

Ursache: `grid-template-columns: 1.6fr 1fr` bzw. `1fr` — eine fr-Spur hat als
automatisches Minimum min-content und kann deshalb nicht schmaler werden als das
längste Wort darin. Bei deutschen Komposita ("sportartenübergreifende",
"Grundlagenausbildung") sprengt das die Karte. Jetzt minmax(0, …) in beiden
Spurdefinitionen von .group-tabs__panel, und dieselbe Korrektur bei
.group-list--stacked, wo das Muster latent drinsteckte.

Zwei Umwege, die ich mir hätte sparen können: min-width: 0 am Grid-KIND reicht
nicht, die SPUR muss das Schrumpfen erlauben. Und overflow-wrap: break-word
verkleinert die min-content-Breite nicht (nur `anywhere` täte das) — beides bleibt
trotzdem drin, zusammen mit hyphens: auto, weil die Seite lang="de" ist und der
Browser die Komposita dann sauber trennt statt hart umzubrechen.

Geprüft: alle sechs Turn-Seiten bei 300px, 320px und 390px ohne Überlauf. Desktop
unverändert zweispaltig (648,6 / 405,4 px, Verhältnis 1,6:1).

OFFEN und bewusst nicht mitgefixt: /turnen läuft bei 300px noch um 13px über, ab
320px nicht mehr. Es kommt aus dem Kontaktformular, nicht aus den Beitragskarten
oder Gruppenkarten — die min-content-Breite des Formulars in der Grid-Spur von
.container. .container global anzufassen ist mir für 13px auf einer Breite, die
kein Gerät hat, zu riskant (das schmalste verbreitete Display ist 320px).

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

public/assets/css/components.css

@@ -2787,7 +2787,16 @@
 /* Panel-Karte übernimmt das bestehende group-card--stacked-Layout */
 .group-tabs__panel {
     display: grid;
-    grid-template-columns: 1.6fr 1fr;
+    /* minmax(0, …) statt nackter fr-Werte: eine fr-Spur hat als automatisches
+       Minimum min-content und kann deshalb nicht schmaler werden als das längste
+       Wort darin. Bei deutschen Komposita sprengte das auf schmalen Bildschirmen
+       die Karte: bei 300px rechnete sich die einzelne Spur auf 267,7px aus,
+       obwohl die Karte nur 193px Inhaltsfläche hat — das Dokument lief um 28px
+       über und der Text stand über den Rand hinaus (31.07.2026).
+       min-width: 0 am Grid-KIND allein reicht dafür nicht, die SPUR muss es
+       erlauben. Dieselbe Korrektur steht bei .group-list--stacked, wo dasselbe
+       Muster latent drinsteckte. */
+    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
     gap: var(--space-4xl);
     align-items: start;
     padding: var(--space-3xl) var(--space-3xl);
@@ -2803,7 +2812,7 @@
 
 @media (max-width: 768px) {
     .group-tabs__panel {
-        grid-template-columns: 1fr;
+        grid-template-columns: minmax(0, 1fr);
         gap: var(--space-xl);
         padding: var(--space-l) var(--space-xl);
     }
@@ -2829,10 +2838,16 @@
     border-radius: var(--radius-card);
 }
 
-/* Gestapelt: Beschreibung links, Trainingszeiten-Panel rechts. */
+/* Gestapelt: Beschreibung links, Trainingszeiten-Panel rechts.
+   minmax(0, …) statt nackter fr-Werte: eine fr-Spur hat als automatisches Minimum
+   min-content, kann also nicht schmaler werden als das längste Wort darin. Bei
+   deutschen Komposita („sportartenübergreifende", „Grundlagenausbildung") sprengte
+   das auf schmalen Bildschirmen die Karte — bei 300px war der Karteninhalt 268px
+   breit in 193px Fläche und das Dokument lief um 28px über (31.07.2026).
+   min-width: 0 am Grid-KIND allein reicht dafür nicht, die Spur muss es erlauben. */
 .group-list--stacked .group-card {
     display: grid;
-    grid-template-columns: 1.6fr 1fr;
+    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
     gap: var(--space-4xl);
     align-items: start;
     padding: var(--space-3xl) var(--space-3xl);
@@ -2840,7 +2855,7 @@
 
 @media (max-width: 768px) {
     .group-list--stacked .group-card {
-        grid-template-columns: 1fr;
+        grid-template-columns: minmax(0, 1fr);
         gap: var(--space-xl);
         padding: var(--space-l) var(--space-xl) var(--space-xl);
     }
@@ -2888,6 +2903,21 @@
     border-radius: 999px;
 }
 
+/* Grid-Kind der Karte: OHNE min-width: 0 darf es nicht unter seine min-content-
+   Breite schrumpfen, und die bestimmt bei deutschen Komposita das längste Wort
+   („sportartenübergreifende", „Grundlagenausbildung"). Bei 300px Bildschirm war der
+   Body dadurch 268px breit in einer Karte mit 193px Inhaltsfläche, das Dokument lief
+   um 28px über und der Text stand über den Rand hinaus (31.07.2026).
+   Dieselbe Falle wie bei .stadionzeitung-page .league-table.
+   hyphens: auto trennt die Komposita sauber statt sie hart umzubrechen — die Seite
+   ist als lang="de" ausgezeichnet, der Browser kennt also die Trennregeln.
+   overflow-wrap bleibt als Notausgang für Wörter ohne mögliche Trennstelle. */
+.group-card__body {
+    min-width: 0;
+    hyphens: auto;
+    overflow-wrap: break-word;
+}
+
 /* Intro = Lead-Paragraph, deutlich abgesetzt vom Level-Chip */
 .group-card__intro {
     margin: var(--space-m) 0 0;