From 97676e91ee35fdbd49bcb7be745dd1227baf52f5 Mon Sep 17 00:00:00 2001 From: fs Date: Fri, 31 Jul 2026 20:44:17 +0200 Subject: [PATCH] =?UTF-8?q?Beitragskarten:=20Titel=20gesperrt,=20Preise=20?= =?UTF-8?q?wei=C3=9F=20statt=20rot?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7 --- CLAUDE.md | 8 ++++++++ public/assets/css/components.css | 14 +++++++++++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/CLAUDE.md b/CLAUDE.md index 75bc162..418c1f3 100644 --- a/CLAUDE.md +++ b/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) diff --git a/public/assets/css/components.css b/public/assets/css/components.css index 346d374..f105646 100644 --- a/public/assets/css/components.css +++ b/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 {