Opa Martins Foto, kräftigere Farben, Bugfixes

- Foto von Opa Martin eingesetzt (assets/opa-martin.jpg, 4:5)
- Pastelle eine Stufe kräftiger (sun-200, sky-100, coral-100), Icon-Chips im Vollton,
  Hero-Weißschleier auf kurze Kante gekürzt, Header deckend
- Kontraste auf den neuen Gründen neu gerechnet, Display-Typo dort dunklere Stufe
- E-Mail bricht auf dem Handy nach dem @ statt mitten in gmail.com
- Trust-Icons im Verein-Hero waren auf gleichfarbigem Grund unsichtbar
- Footer 'Über uns' springt zur Geschichte statt auf die Startseite

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

assets/site.css

@@ -43,6 +43,12 @@
      Neun gleichmäßige Stufen (56/42/32/24/19/17/15/13/11) auf sechs reduziert.
      Gestrichen: 42, 24, 19, 15. Bleibt: Display / 30 / 20 / 17 / 13 / 11.
 
+  4. KRÄFTIGERE TÖNUNGEN (2026-09-24) — zweite Kundenrückmeldung "zu transparent".
+     Referenz wie oben: der DS-Eintrag hält fest, dass Pastell allein nicht trägt.
+     sun-100 → sun-200, sky-50 → sky-100, coral-50 → coral-100, Icon-Chips im Vollton,
+     Hero-Schleier auf eine kurze Kante gekürzt, Header deckend. Auf den neuen Gründen
+     Display-Typo in der dunkleren Stufe (≥3.87). Messwerte in DESIGN.md, Abschnitt 1b.
+
   ASSETS: Die Client-Logos kamen als JPEG mit eingebackenem weissem Kasten, im Handoff
   per mix-blend-mode:multiply kaschiert — das bricht auf jedem dunkleren Grund. Beide sind
   jetzt echt freigestellt (Flood-Fill ueber randverbundenes Nahe-Weiss + weiche Kante,
@@ -67,17 +73,22 @@
   --coral-700:#B03422;  /* Hover: 6.25 */
   --coral-800:#A82F1E;  /* Press: 6.80 */
 
+  /* Kräftigere Tönungen — 2026-09-24, siehe Abweichung 4. Die 50/100-Pastelle
+     lasen gegen Weiß wie verwaschen ("zu transparent"). */
+  --sun-200:#FBE3A0;    /* ink-700 darauf 11.44 */
+  --coral-100:#FFD8CE;  /* ink-700 darauf 11.01 */
+
   /* Getönte Neutrale (blaustichig, kein reines Grau) */
   --ink-300:#8B94A0; --ink-500:#4A5560; --ink-700:#232A33;
   --line-soft:#EDEFF2; --line:#DFE3E8;
 
   --surface-page:#FFFFFF; --surface-card:#FFFFFF; --surface-sunk:#F5F7FA;
-  --surface-band:#FDF4DC; --surface-band-cool:#EAF4FC; --surface-footer:#FDF4DC;
+  --surface-band:var(--sun-200); --surface-band-cool:var(--sky-100); --surface-footer:var(--sun-200);
 
   /* Pro Seite überschrieben — genau ein Identitätsakzent */
   --accent:var(--sky-500);
   --accent-text:var(--sky-600);
-  --accent-soft:var(--sky-50);
+  --accent-soft:var(--sky-100);
   --accent-line:var(--sky-400);
 
   /* Typo — sechs Stufen */
@@ -114,7 +125,7 @@
 .page-verein{
   --accent:var(--sun-600);
   --accent-text:var(--sun-700);
-  --accent-soft:var(--sun-100);
+  --accent-soft:var(--sun-200);
   --accent-line:var(--sun-400);
 }
 
@@ -139,9 +150,9 @@ a:hover{color:var(--sky-600)}
 /* Getoente Vollflaechen statt durchgehendem Weiss. Geben der Seite Rhythmus und
    tragen den groessten Teil der Farbe — ohne einen einzigen Fliesstext einzufaerben. */
 .field{padding-block:var(--space-16)}
-.field--cool{background:var(--sky-50)}
-.field--warm{background:var(--sun-100)}
-.field--rose{background:var(--coral-50)}
+.field--cool{background:var(--sky-100)}
+.field--warm{background:var(--sun-200)}
+.field--rose{background:var(--coral-100)}
 .field--sunk{background:var(--surface-sunk)}
 
 /* Ein gesaettigtes Vollflaechen-Band pro Seite. Pastelltoene allein trugen die Seite
@@ -172,7 +183,7 @@ a:hover{color:var(--sky-600)}
 /* Weiß statt --sky-400: weiße Navigation auf Hellblau misst 2.87 und fällt durch. */
 .hdr{
   position:sticky; top:0; z-index:50; height:var(--header-h);
-  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px);
+  background:var(--surface-page);   /* deckend: das durchscheinende Weiß wirkte milchig */
   border-bottom:1px solid var(--line-soft);
 }
 .hdr__in{
@@ -276,6 +287,13 @@ a:hover{color:var(--sky-600)}
 .hl .c-sun{color:var(--sun-600)}
 .hl .c-coral{color:var(--coral-500)}
 .hl .on{color:var(--accent)}
+/* Beide Heros stehen seit 2026-09-24 auf getöntem Grund (sky-100 / sun-200). Dort
+   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)}
+.hero .hl .c-coral{color:var(--coral-600)}
+.hero .trust 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)}
@@ -290,7 +308,7 @@ 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-soft); color:var(--accent-text);
+  display:grid; place-items:center; background:var(--accent); color:#fff;  /* Icon 3.86 / 3.92 */
 }
 .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)}
@@ -300,21 +318,26 @@ a:hover{color:var(--sky-600)}
    unter ~820px fast vollständig zu. Unter 820px stapelt der Hero jetzt — Foto oben,
    Text darunter auf voller Fläche. */
 @media (min-width:820px){
-  .hero{min-height:clamp(540px,64vw,680px); display:grid}
+  /* Kante der Fläche folgt der Textspalte: .wrap ist zentriert, die Spalte endet bei
+     50% - 590px + 24px + 560px. max() hält sie bei schmalen Fenstern bei 600px. */
+  .hero{min-height:clamp(540px,64vw,680px); display:grid; --scrim-edge:max(600px, calc(50% + 10px))}
   .hero__in{align-self:center}
   .hero--shop .hero__scrim{
-    background:linear-gradient(98deg,#FFF 0,#FFF 430px,rgba(255,255,255,.92) 560px,rgba(255,255,255,0) 820px);
+    /* Getönte Fläche statt Weiß, und eine kurze Kante statt eines langen Schleiers:
+       vorher lag bis 820px ein halbtransparenter Weißverlauf über dem Foto und nahm ihm
+       die Farbe. Jetzt deckt die Fläche die Textspalte, das Foto steht voll gesättigt. */
+    background:linear-gradient(98deg,var(--sky-100) 0,var(--sky-100) var(--scrim-edge),rgba(207,230,248,0) calc(var(--scrim-edge) + 90px));
   }
   .hero--verein .hero__scrim{
-    background:linear-gradient(100deg,var(--sun-100) 0,var(--sun-100) 430px,rgba(253,244,220,.92) 560px,rgba(253,244,220,0) 820px);
+    background:linear-gradient(100deg,var(--sun-200) 0,var(--sun-200) var(--scrim-edge),rgba(251,227,160,0) calc(var(--scrim-edge) + 90px));
   }
 }
 @media (max-width:819.98px){
   .hero__media{position:relative; inset:auto; height:clamp(200px,44vw,320px)}
   .hero__scrim{display:none}
   .hero__in{padding-block:var(--space-10)}
-  .hero--shop{background:var(--surface-page)}
-  .hero--verein{background:var(--sun-100)}
+  .hero--shop{background:var(--sky-100)}
+  .hero--verein{background:var(--sun-200)}
 }
 .hero--verein{border-bottom:6px solid var(--sun-400)}
 /* Seit im Hero ein echtes Foto liegt, braucht das Zeichen einen eigenen Grund —
@@ -331,10 +354,9 @@ 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-soft); color:var(--accent-text);
+  display:grid; place-items:center; background:var(--accent); color:#fff;  /* Icon: Grafik-Schwelle 3.0 */
   transform:rotate(-3deg);
 }
-.field--cool .sh__chip, .field--warm .sh__chip, .field--rose .sh__chip{background:var(--surface-card)}
 .sh svg{width:22px; height:22px; flex:none}
 .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--gutter-grid); align-items:start}
 .cols p{max-width:52ch}
@@ -363,9 +385,13 @@ a:hover{color:var(--sky-600)}
   padding:var(--space-6); display:grid; gap:var(--space-3); align-content:start;
   transition:transform var(--dur-lift) var(--ease), box-shadow var(--dur-lift) var(--ease);
 }
-.tile--cool{background:var(--sky-50);   border-color:#D6E8F7; border-top-color:var(--sky-400)}
-.tile--warm{background:var(--sun-100);  border-color:#F2E5C4; border-top-color:var(--sun-400)}
-.tile--rose{background:var(--coral-50); border-color:#F8DED8; border-top-color:var(--coral-400)}
+/* Getönte Kacheln tragen auch auf dem gelben Vollband ihre Farbe (Spezifität 0,2,0,
+   damit sie das Weiß von .field--solid-* .tile schlagen). Fließtext darin ink-700:
+   Guardrail "keine graue Schrift auf farbigem Grund". */
+.tile.tile--cool{background:var(--sky-100);   border-color:var(--sky-100);   border-top-color:var(--sky-500)}
+.tile.tile--warm{background:var(--sun-200);   border-color:var(--sun-200);   border-top-color:var(--sun-600)}
+.tile.tile--rose{background:var(--coral-100); border-color:var(--coral-100); border-top-color:var(--coral-500)}
+.tile[class*="tile--"] p{color:var(--ink-700)}
 /* Auf getoentem Feld kehren sich die Kacheln um: weiss auf Farbe statt Farbe auf Weiss. */
 .field--cool .tile, .field--warm .tile, .field--rose .tile{background:var(--surface-card)}
 .tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover)}
@@ -377,14 +403,13 @@ a:hover{color:var(--sky-600)}
    Auf 400px verkleinert und auf ein Cremefeld gesetzt, damit die Luecke wie ein
    vorbereiteter Rahmen liest und nicht wie ein Loch. */
 .portrait{max-width:400px; margin-inline:auto; display:grid; gap:var(--space-5); justify-items:center; text-align:center}
-.portrait__slot{
-  width:100%; aspect-ratio:1/1; border-radius:var(--radius-xl);
-  background:var(--surface-card); border:2px dashed var(--sun-400);
-  display:grid; place-items:center; padding:var(--space-6);
+/* Gleiche Behandlung wie .story__img — gekippt, weiß gerahmt, wie ein aufgelegtes Foto. */
+.portrait__img{
+  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
+  border-radius:var(--radius-xl); border:6px solid var(--surface-card);
+  box-shadow:var(--shadow-band); transform:rotate(1.5deg);
 }
-.portrait__slot span{font:var(--t-small); color:var(--ink-700); max-width:22ch}
-.portrait__slot img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius-xl)}
-.portrait__name{font:var(--t-h2); color:var(--accent); letter-spacing:var(--ls-display)}
+.portrait__name{font:var(--t-h2); color:var(--accent-text); letter-spacing:var(--ls-display)}  /* 4.43 auf sun-200 */
 
 /* Audio */
 .song{
@@ -422,7 +447,7 @@ 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)}
+.band__copy h2{color:var(--accent-text)}  /* 4.43 bzw. 4.04 auf den kräftigeren Bändern */
 .band__copy .label{color:var(--ink-700)}
 .band img{width:100%; max-width:380px; justify-self:center}
 
@@ -434,7 +459,7 @@ a:hover{color:var(--sky-600)}
   border-radius:var(--radius-l); box-shadow:var(--shadow-card);
   padding:var(--space-6); display:grid; gap:var(--space-2);
 }
-.contact p{font:600 17px/1.5 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); word-break:break-word}
+.contact p{font:600 17px/1.5 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); overflow-wrap:break-word}  /* bricht am <wbr> nach dem @ */
 /* Telefon und E-Mail sind die wichtigsten Links der Seite und waren 23px hoch —
    einen Pixel unter WCAG 2.5.8. Als volles 44px-Ziel laesst sich die Nummer am
    Handy zuverlaessig antippen. */