diff --git a/public/assets/css/components.css b/public/assets/css/components.css
index 64ff5c2..dfd4b3b 100644
--- a/public/assets/css/components.css
+++ b/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;