Karten-Innenabstände fluid: mehr Platz auf schmalen Handys

Auf schmalen Bildschirmen stapeln sich Container- und Kartenabstand so, dass für
den Inhalt kaum Breite bleibt. Gemessen bei 309px: Container 11,5 + Karte 32 je
Seite, das Eingabefeld hatte 220px, also 71% der Bildschirmbreite.

Kein harter Breakpoint ("ab 310px vollflächig"), sondern fluide Abstände — ein
Umbruch bei 310px sähe bei 311px wieder falsch aus. Das Muster gab es im Projekt
schon: fee-table, membership-card, legal__card und matchcenter-empty nutzen
clamp()-Abstände. Fest waren genau die drei, über die es stolperte: .form (32px),
.group-card (32px) und .group-tabs__panel (40px).

Zwei neue Token in tokens.css als einzige Quelle, --pad-card (20…32px) und
--pad-card-lg (24…40px). Die OBERGRENZEN sind die bisherigen festen Werte, am
Desktop ändert sich also nichts — nachgemessen: 32px bei 1269px Viewport, wie
vorher. Es wird nur nach unten schmaler.

Ergebnis: Feldbreite bei 309px von 71% auf 76%, bei 379px von 74% auf 80%.
Kein Überlauf auf /turnen, den Disziplinseiten und /kontakt bei 320px und 1280px.

Die vier bereits fluiden Karten behalten ihre eigenen clamp()-Werte, damit ihr
Desktop-Bild unangetastet bleibt; sie in die Token einzusammeln ist eine
Aufräumung für später.

VORBESTEHEND und nicht von dieser Änderung verursacht (per git stash gegengeprüft,
mit und ohne Änderung identisch): /mitglied-werden läuft bei 320px um 12px über,
/turnen bei 300px um 13px. Die 320px sind eine echte Gerätebreite (iPhone SE),
das gehört als Nächstes angeschaut.

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

public/assets/css/components.css

@@ -1776,7 +1776,11 @@
     gap: var(--space-m);
     width: 100%;
     max-width: 720px;
-    padding: var(--space-2xl);
+    /* --pad-card statt fester 32px: auf einem 309px-Handy blieben dem Eingabefeld
+       sonst nur 71% der Bildschirmbreite, weil Container- und Kartenabstand sich
+       stapeln. Obergrenze ist derselbe Wert wie vorher, am Desktop ändert sich
+       nichts. */
+    padding: var(--pad-card);
     background: var(--clr-glass-bg);
     border: 1px solid var(--clr-glass-border);
     border-radius: var(--radius-card);
@@ -2799,7 +2803,7 @@
     grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
     gap: var(--space-4xl);
     align-items: start;
-    padding: var(--space-3xl) var(--space-3xl);
+    padding: var(--pad-card-lg) var(--pad-card-lg);
     background: var(--clr-glass-bg);
     border: 1px solid var(--clr-glass-border);
     border-radius: var(--radius-card);
@@ -2832,7 +2836,7 @@
 }
 
 .group-card {
-    padding: var(--space-xl) var(--space-2xl) var(--space-2xl);
+    padding: var(--space-xl) var(--pad-card) var(--pad-card);
     background: var(--clr-glass-bg);
     border: 1px solid var(--clr-glass-border);
     border-radius: var(--radius-card);