Beitragskarten: Titel gesperrt, Preise weiß statt rot

Zwei Punkte aus dem Gegenlesen, beide gemessen statt geschätzt.

1) Die Kartentitel waren schwer lesbar. Gemessen war letter-spacing "normal",
   also gar keins gesetzt — nicht zu eng eingestellt. Coolvetica ist ein
   Condensed-Schnitt: bei 60px (Abschnitts-h2) trägt das, bei 34px in einer
   schmalen Kartenspalte kleben die Versalien. Jetzt var(--ls-caps), der
   dokumentierte Token für gesperrte Uppercase-Auszeichnungen.

2) Die Preise standen in Akzentrot. Das ist kein Geschmacksfehler, sondern ein
   Kontrastfehler: #e20612 auf dem Kartengrund (rgba(0 0 0 / 0.22) über #222)
   erreicht 3,50:1 und verfehlt die 4,5:1 für Fließtext. Weiß liegt bei 17,22:1.
   CLAUDE.md verbietet Rot für Fließtext auf dunklem Grund ohnehin. Hervorgehoben
   bleibt der Preis durch Coolvetica und 28px gegen 21px Fließtext.

Die Preisfarbe wirkt auch auf /mitglied-werden, wo dieselbe Komponente steht —
dort ist der Grund dasselbe dunkle Glas (geprüft), die Änderung verbessert also
beide Seiten.

Beide Erkenntnisse als Regel in CLAUDE.md, mit den gemessenen Zahlen.

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

CLAUDE.md

@@ -279,7 +279,15 @@ nicht durchgezogen.
   darunter unleserlich (mehrfach bestätigt: Footer-Headings, Timeline-Nav). Für kleinere Auszeichnungen
   Abel verwenden, ggf. mit `letter-spacing` + uppercase. `base.css` setzt das durch: `h1`–`h3` tragen
   Coolvetica, **`h4`–`h6` laufen über `--ff-body` + uppercase + `--ls-caps`**.
+- **Coolvetica unter ~40px braucht `letter-spacing: var(--ls-caps)`.** Der Schnitt ist condensed: bei
+  60px (Abschnitts-h2) trägt er ohne Sperrung, bei 34px in einer schmalen Spalte kleben die Versalien
+  aneinander und der Titel wird schwer lesbar (aufgefallen an den Beitragskarten, 31.07.2026). Die
+  globalen `h1`–`h3` stehen bewusst auf `letter-spacing: normal` — gesperrt wird pro Komponente.
 - Rot nie für Fließtext auf dunklem Grund (Kontrast!) — nur als Button-/Akzent-Fläche mit weißem Text.
+  **Gemessene Zahl dazu:** `#e20612` auf der Glas-Karte (`rgba(0 0 0 / 0.22)` über `#222`) erreicht
+  **3,50:1** und verfehlt die 4,5:1 für Fließtext; Weiß liegt bei 17,22:1. Genau daran sind die
+  Beitragspreise hängengeblieben, die zuerst rot waren. Hervorhebung über Schriftart und Größe
+  (Coolvetica 28px gegen 21px Fließtext) trägt ohne Farbe.
 - Alle Werte als CSS Custom Properties in `tokens.css`; Breakpoints: 1249 (Burger) / 1024 / 992 / 768 / 600 / 500.
 
 ### Token-Disziplin (gilt für jede CSS-Änderung)

public/assets/css/components.css

@@ -4176,6 +4176,12 @@
        34px ist die nächste Stufe; --fs-690 (bis 44px) würde die langen Titel wie
        „Zusatzbeitrag für bestehende TSV-Mitglieder" in drei Zeilen brechen. */
     font-size: var(--fs-675);
+    /* --ls-caps, weil Coolvetica ein Condensed-Schnitt ist: bei 60px (Abschnitts-h2)
+       trägt er ohne Sperrung, bei 34px in einer schmalen Kartenspalte klebten die
+       Versalien aneinander und „ZUSATZBEITRAG FÜR BESTEHENDE TSV-MITGLIEDER" war
+       schwer zu lesen (Felix, 31.07.2026). Gemessen war letter-spacing vorher
+       `normal`, also gar keins — nicht zu eng eingestellt, sondern nicht gesetzt. */
+    letter-spacing: var(--ls-caps);
     line-height: var(--lh-heading);
     margin-bottom: var(--space-s);
 }
@@ -4207,7 +4213,13 @@
     font-family: var(--ff-heading);
     font-size: var(--fs-650);
     line-height: 1;
-    color: var(--clr-accent);
+    /* WEISS, nicht Akzentrot. Rot auf dem Kartengrund erreicht nur 3,50:1 und
+       verfehlt damit die 4,5:1 für Fließtext — und ein Beitrag ist Information, die
+       man lesen muss, kein Akzent. CLAUDE.md sagt es als Regel: „Rot nie für
+       Fließtext auf dunklem Grund, nur als Button-/Akzent-Fläche mit weißem Text."
+       Weiß liegt bei 17,22:1. Hervorgehoben bleibt der Preis durch Coolvetica und
+       28px gegen 21px Fließtext, das reicht ohne Farbe. */
+    color: var(--clr-text);
 }
 
 .fee-table__note {