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/tokens.css

@@ -102,6 +102,20 @@
        der meistgenutzte). Nach oben wird das Raster gröber, weil große Abstände
        das vertragen. --space-4xs (2px) ist ausschließlich für optische
        Korrekturen gedacht (Icon-/Baseline-Nudges), nicht für Layout. */
+    /* Karten-Innenabstände. Fluid statt fest, damit auf schmalen Handys nicht ein
+       Viertel der Bildschirmbreite in gestapelten Innenabständen verschwindet
+       (gemessen bei 309px: Container 11,5 + Karte 32 je Seite → nur 71% der Breite
+       blieben für das Eingabefeld). Ein harter Breakpoint bei ~310px wäre die
+       Alternative gewesen, sieht aber bei 311px wieder falsch aus.
+       Die OBERGRENZEN entsprechen genau den bisherigen festen Werten, am Desktop
+       ändert sich also nichts — es wird nur nach unten schmaler.
+       Vier Karten (fee-table, membership-card, legal__card, matchcenter-empty)
+       hatten diese clamp()-Formeln schon einzeln stehen; sie behalten ihre eigenen
+       Werte, damit ihr Desktop-Bild unangetastet bleibt. Sie hier einzusammeln ist
+       eine Aufräumung für später. */
+    --pad-card:    clamp(var(--space-m), var(--space-s) + 1.5vw, var(--space-2xl)); /* 20…32px */
+    --pad-card-lg: clamp(var(--space-l), var(--space-s) + 2.5vw, var(--space-3xl)); /* 24…40px */
+
     --space-4xs:  0.125rem;   /*   2px */
     --space-3xs:  0.25rem;    /*   4px */
     --space-2xs:  0.5rem;     /*   8px */