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
This commit is contained in:
2026-07-31 20:44:17 +02:00
parent a975bed33c
commit 97676e91ee
2 changed files with 21 additions and 1 deletions

View File

@@ -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 {