From 6bd5c12d3e99490960aeabb2cea5e977d254408e Mon Sep 17 00:00:00 2001 From: Andrej Stevanovski Date: Thu, 24 Sep 2026 21:59:01 +0200 Subject: [PATCH] Trust-Icons repariert, Gelb heller statt braun - .trust span traf auch den Icon-Chip (selbst ein span): Icon rutschte aus dem Kreis und war dunkel. Selektor auf die Unterzeile eingegrenzt. - Gelbe Display-Schrift jetzt helles Markengelb mit dunkler Kontur wie im Logo statt sun-600/700 (las als Braun). Kleine gelbe Texte und Links auf Ink umgestellt, Icon-Chips im Verein hellgelb mit Ink-Icon. Co-Authored-By: Claude Opus 5.5 --- DESIGN.md | 10 ++++++++++ assets/site.css | 34 +++++++++++++++++++++++++++------- datenschutz.html | 2 +- hilfe-verein.html | 2 +- impressum.html | 2 +- index.html | 2 +- shop.html | 2 +- 7 files changed, 42 insertions(+), 12 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index af140c6..660e618 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -111,6 +111,16 @@ in der dunkleren Stufe derselben Familie: auf `--sun-200` `--sky-600` 4.43 · `- 4.11 · `--coral-600` 3.93; auf `--sky-100` 4.35 · 4.04 · 3.87. Fließtext auf getöntem Grund ist `--ink-700` (≥ 11.0). +**Gelb als Schrift (2026-09-24, dritte Rückmeldung: „geht mehr auf Braun als Gelb").** +Ein Gelb, das auf hellem Grund 3:1 erreicht, liegt bei Leuchtdichte ≤ 0.3 — und das ist +bei diesem Farbton zwangsläufig Ocker/Braun (`--sun-600`, `--sun-700`). Heller geht nur, +wenn nicht die Füllung den Kontrast trägt. Lösung aus dem Logo übernommen: helles +Markengelb `--sun-400` mit dunkler Kontur (`-webkit-text-stroke` in `--ink-700`, +`paint-order: stroke fill`), wie die umrandeten Buchstaben der Wortmarke. Gilt nur für +Displaygrößen (H1-Zeile, Band-Überschrift Verein). Kleinere gelbe Texte gibt es nicht +mehr: `Lied vom Hilfe Verein` steht in Ink, Links auf der Vereinsseite in Ink mit 3px +gelber Unterstreichung. Icon-Chips auf der Vereinsseite: `--sun-400` mit Ink-Icon (8.67). + ### 2. Kontrast Guardrail: *„Graue Schrift auf farbigem Grund."* Gemessen statt geschätzt: diff --git a/assets/site.css b/assets/site.css index 9287182..94a35b9 100644 --- a/assets/site.css +++ b/assets/site.css @@ -127,6 +127,9 @@ --accent-text:var(--sun-700); --accent-soft:var(--sun-200); --accent-line:var(--sun-400); + /* Icon-Chips im hellen Gelb statt sun-600 (las als Braun). Weißes Icon darauf + wäre 1.6 — deshalb Ink-Icon: 8.67. */ + --chip-bg:var(--sun-400); --chip-fg:var(--ink-700); } /* ============================================================ BASE */ @@ -141,6 +144,8 @@ h1{font:var(--t-display)} h2{font:var(--t-h2)} h3{font:var(--t-h3)} p{margin:0} img{max-width:100%; display:block} a{color:var(--accent-text); text-underline-offset:3px} +/* Verein: Links in Ink mit dicker gelber Unterstreichung statt braunem Text. */ +.page-verein main a:not(.btn){color:var(--ink-700); text-decoration-color:var(--sun-400); text-decoration-thickness:3px} a:hover{color:var(--sky-600)} .wrap{max-width:var(--page-max); margin:0 auto; padding-inline:var(--page-pad-x)} @@ -291,9 +296,17 @@ a:hover{color:var(--sky-600)} fielen die Buntwerte auf ~3.0-3.1 — knapp an der Schwelle. Deshalb die dunklere Stufe derselben Familie: auf sky-100 4.35 / 4.04 / 3.87, auf sun-200 4.43 / 4.11 / 3.93. */ .hero .hl .c-sky{color:var(--sky-600)} -.hero .hl .c-sun{color:var(--sun-700)} +/* Gelb: dunkles Gelb, das auf hellem Grund lesbar bleibt, ist zwangsläufig Braun + (sun-600/700 wurden vom Kunden am 2026-09-24 als "braun statt gelb" zurückgewiesen). + Deshalb helles Markengelb mit dunkler Kontur — wie die Buchstaben im Logo. Lesbar + macht die Kontur: ink-700 gegen den Grund misst ≥11. paint-order legt sie unter die + Füllung, damit die Buchstaben nicht dünner werden. */ +.hero .hl .c-sun, .yellow-type{ + color:var(--sun-400); + -webkit-text-stroke:6px var(--ink-700); paint-order:stroke fill; +} .hero .hl .c-coral{color:var(--coral-600)} -.hero .trust span{color:var(--ink-700)} +.hero .trust b + span{color:var(--ink-700)} .hero__sub{font:var(--t-body); color:var(--ink-700); max-width:34ch} .hero__actions{display:flex; flex-wrap:wrap; gap:var(--space-3)} @@ -308,11 +321,14 @@ a:hover{color:var(--sky-600)} .trust{display:flex; align-items:center; gap:10px} .trust__chip{ width:30px; height:30px; flex:none; border-radius:var(--radius-circle,50%); - display:grid; place-items:center; background:var(--accent); color:#fff; /* Icon 3.86 / 3.92 */ + display:grid; place-items:center; background:var(--chip-bg,var(--accent)); color:var(--chip-fg,#fff); /* Icon 3.86 */ } .trust svg{width:15px; height:15px; flex:none} .trust b{display:block; font:700 15px/1.3 'Nunito','Segoe UI',sans-serif; color:var(--ink-700)} -.trust span{display:block; font:var(--t-small); color:var(--ink-500)} +/* Nur die Unterzeile treffen — .trust__chip ist selbst ein , und ein blankes + ".trust span" setzte ihm display:block und die Textfarbe: Icon aus dem Kreis + gerutscht und dunkel statt weiß. */ +.trust b + span{display:block; font:var(--t-small); color:var(--ink-500)} /* Schwachstelle des Handoffs behoben: die fixen Stopps (430/560/820px) decken das Foto unter ~820px fast vollständig zu. Unter 820px stapelt der Hero jetzt — Foto oben, @@ -354,7 +370,7 @@ a:hover{color:var(--sky-600)} .sh{display:flex; align-items:center; gap:14px; margin-bottom:var(--space-6)} .sh__chip{ width:44px; height:44px; flex:none; border-radius:var(--radius-m); - display:grid; place-items:center; background:var(--accent); color:#fff; /* Icon: Grafik-Schwelle 3.0 */ + display:grid; place-items:center; background:var(--chip-bg,var(--accent)); color:var(--chip-fg,#fff); /* Icon: Grafik-Schwelle 3.0 */ transform:rotate(-3deg); } .sh svg{width:22px; height:22px; flex:none} @@ -418,7 +434,10 @@ a:hover{color:var(--sky-600)} box-shadow:var(--shadow-card); padding:var(--space-6); display:grid; gap:var(--space-4); } .song__top{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap} -.song__top h3{color:var(--accent-text)} /* nicht --accent: 20px/600 zaehlt nicht als +.song__top h3{color:var(--accent-text)} +/* Auf der Vereinsseite wäre das Braun — 20px ist zu klein für die Kontur-Lösung. + Ink trägt den Text, die gelbe Badge daneben trägt die Farbe. */ +.page-verein .song__top h3{color:var(--ink-700)} /* nicht --accent: 20px/600 zaehlt nicht als Large Text, sky-500 misst dort nur 3.86. accent-text = 5.60 bzw. 5.20. */ .badge{ font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase; @@ -447,7 +466,8 @@ a:hover{color:var(--sky-600)} .band__copy{display:grid; gap:var(--space-4); justify-items:start} /* Guardrail: kein Grau auf farbigem Grund. Ink-700 = 13.20 auf Creme. */ .band__copy p{color:var(--ink-700); max-width:46ch} -.band__copy h2{color:var(--accent-text)} /* 4.43 bzw. 4.04 auf den kräftigeren Bändern */ +.band__copy h2{color:var(--accent-text)} /* 4.43 auf sun-200 */ +.page-verein .band__copy h2{color:var(--sun-400); -webkit-text-stroke:5px var(--ink-700); paint-order:stroke fill} .band__copy .label{color:var(--ink-700)} .band img{width:100%; max-width:380px; justify-self:center} diff --git a/datenschutz.html b/datenschutz.html index f9398c5..2777929 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -11,7 +11,7 @@ - + diff --git a/hilfe-verein.html b/hilfe-verein.html index fb6def9..63612c3 100644 --- a/hilfe-verein.html +++ b/hilfe-verein.html @@ -10,7 +10,7 @@ - + diff --git a/impressum.html b/impressum.html index 1b68c70..a20d6ef 100644 --- a/impressum.html +++ b/impressum.html @@ -11,7 +11,7 @@ - + diff --git a/index.html b/index.html index fb8b18e..5d19a9c 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - + diff --git a/shop.html b/shop.html index 1309667..6b3a971 100644 --- a/shop.html +++ b/shop.html @@ -11,7 +11,7 @@ - +