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

@@ -45,19 +45,40 @@ h3,
 h4,
 h5,
 h6 {
-    font-family: var(--ff-heading);
     font-weight: var(--fw-regular);
     line-height: var(--lh-heading);
     text-transform: uppercase;
     text-wrap: balance;
 }
 
+/* h1–h3 tragen Coolvetica: alle liegen über der 28px-Grenze (--fs-650). */
+h1,
+h2,
+h3 {
+    font-family: var(--ff-heading);
+}
+
 h1 { font-size: var(--fs-900); }
 h2 { font-size: var(--fs-800); }
 h3 { font-size: var(--fs-700); }
-h4 { font-size: 1.625rem; }
+
+/* h4–h6 laufen über Abel statt Coolvetica. Coolvetica ist Condensed mit nur
+   einem Schnitt und wird in Uppercase unter --fs-650 (28px) unleserlich — diese
+   Ebenen liegen aber naturgemäß darunter. Abel + Sperrung hält sie lesbar und
+   trotzdem als Auszeichnung erkennbar; die Regel aus CLAUDE.md kann hier damit
+   gar nicht mehr verletzt werden. Zeilenhöhe zurück auf Fließtext-Maß, weil
+   --lh-heading (0.9) nur für die extremen Coolvetica-Größen gedacht ist. */
+h4,
 h5,
-h6 { font-size: var(--fs-600); }
+h6 {
+    font-family: var(--ff-body);
+    line-height: 1.2;
+    letter-spacing: var(--ls-caps);
+}
+
+h4 { font-size: var(--fs-650); }
+h5 { font-size: var(--fs-600); }
+h6 { font-size: var(--fs-500); }
 
 
 a {