Design-System: Typo-Skala schließen, h4–h6 auf Abel, Icon-Größen tokenisieren

Zweiter Teil der Konsolidierung. Vorher standen 31 font-size-Werte außerhalb
der Skala — beim Durchgehen stellte sich heraus, dass 20 davon gar keine
Textgrößen sind: der icon()-Helper rendert 1em, also steuerte font-size dort
die Icon-Größe. Dafür gibt es jetzt eine eigene, kleine Skala (--icon-s/m/l/xl
in rem, --icon-inline-sm/--icon-inline/--icon-inline-lg in em für Icons, die im
Textfluss mitwachsen sollen). Elf Ad-hoc-Werte fallen damit auf sieben Stufen.

h4–h6 laufen nicht mehr über Coolvetica. Sie lagen mit 26px und 21px unter der
--fs-650-Grenze aus CLAUDE.md, ab der der Condensed-Schnitt in Uppercase
unleserlich wird — die Regel war also nur dokumentiert, nicht durchsetzbar.
Jetzt tragen h1–h3 Coolvetica (alle über der Grenze) und h4–h6 Abel mit
Sperrung. Bezeichnend: das einzige <h4> im Markup hatte sich genau dieses
Muster bereits von Hand gebaut. Die Basisregel liefert es jetzt, die Komponente
gibt ihre drei Duplikat-Deklarationen ab — sichtbar ändert sich dadurch nichts.

Neue Stufen schließen die Lücken: --fs-550 (fluider Lead), --fs-690 (Karten-
Überschrift) und --fs-1000 (Display-Hero). Vier fast deckungsgleiche clamp()-
Rampen für Karten-Überschriften (bento__heading, bento__stat-value,
group-card__name, team-card__name) laufen jetzt über --fs-690; team-card__name
wächst dabei am Desktop um ~5px, die anderen drei bleiben im 1px-Bereich.

Die Wappen-Initialen im Matchcenter hingen an zwei Mini-Schriftgrößen (10,4 und
11,2px) unterhalb der Skala. Sie sind in Wahrheit ~0,4 × Kreisdurchmesser,
folgen jetzt also --crest-size statt einer eigenen font-size. Nebenbei fallen
drei redundante Doppel-Selektoren weg: .crest--initials trägt immer auch .crest.

Ebenfalls tokenisiert: 27 letter-spacing-Werte mit elf verschiedenen Zahlen auf
vier Stufen (--ls-tight/caps/wide/wider), maximale Abweichung 0,02em.

Danach steht kein font-size- und kein letter-spacing-Wert mehr außerhalb von
tokens.css.

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

public/assets/css/tokens.css

@@ -32,18 +32,41 @@
     --fs-300: 0.8125rem;                               /* 13px Buttons klein   */
     --fs-400: 0.9375rem;                               /* 15px Footer, Meta    */
     --fs-500: 1.125rem;                                /* 18px Navigation      */
+    --fs-550: clamp(1.25rem, 0.95rem + 1.3vw, 1.75rem); /* 20–28px fluider Lead/Tagline */
     --fs-600: 1.3125rem;                               /* 21px Body            */
     --fs-650: 1.75rem;                                 /* 28px Zwischengröße (z.B. Footer-Headings) */
     --fs-675: 2.125rem;                                /* 34px Header-Wortmarke */
+    --fs-690: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);    /* 32–44px Karten-/Kachel-Überschrift */
     --fs-700: clamp(2rem, 1.2rem + 3.5vw, 3.125rem);   /* 50px h3              */
     /* Mobil-Minima bewusst hoch: Coolvetica Condensed wirkt bei gleicher
        nomineller Größe deutlich kleiner als normale Schnitte. */
     --fs-800: clamp(2.625rem, 1.3rem + 4.5vw, 3.75rem); /* 42–60px h2          */
     --fs-900: clamp(3.5rem, 1.75rem + 5.5vw, 6rem);      /* 56–96px h1         */
+    --fs-1000: clamp(3.5rem, 2rem + 7.5vw, 7.5rem);      /* 56–120px Display-Hero (nur Startseite) */
+    --fs-deco: 9rem;                                     /* dekorative Ziffer hinter Bento-Kacheln */
     --lh-heading: 0.9;
     --lh-body: 1.5;
     --fw-regular: 400;
     --fw-bold: 700;
+    /* Sperrung. Coolvetica ist Condensed und hat nur einen Schnitt: unter 28px
+       wird es in Uppercase unleserlich (siehe CLAUDE.md). Kleinere Auszeichnungen
+       laufen deshalb über --ff-body + uppercase + --ls-caps statt --ff-heading. */
+    --ls-tight: 0.03em;   /* dezente Straffung in Fließtext-Größen */
+    --ls-caps:  0.08em;   /* Standard für gesperrte Uppercase-Auszeichnungen */
+    --ls-wide:  0.12em;   /* kleine Labels, Meta-Zeilen */
+    --ls-wider: 0.18em;   /* sehr kleine Kicker/Overlines */
+
+    /* --- Icon-Größen ---
+       Der icon()-Helper rendert 1em, die font-size steuert also die Icon-Größe.
+       rem-Stufen für eigenständige Icons, em-Stufen für Icons, die im Textfluss
+       mit ihrer Zeile mitwachsen sollen (Chevrons, Pfeile). */
+    --icon-s:  1rem;      /* 16px */
+    --icon-m:  1.25rem;   /* 20px */
+    --icon-l:  1.5rem;    /* 24px */
+    --icon-xl: 2.5rem;    /* 40px */
+    --icon-inline-sm: 0.75em;
+    --icon-inline:    0.9em;
+    --icon-inline-lg: 1.25em;
 
     /* --- Spacing ---
        4px-Raster. EINZIGE Quelle für padding/margin/gap — keine rohen rem-Werte