Decor-Muster: Spielzeug-Silhouetten auf den farbigen Flächen

Umsetzung der Handoff-Komponente Decor (flat decorative layer). Selbst gezeichnete SVG-Kachel als CSS-Maske, Farbe pro Fläche eine Stufe dunkler als der Grund. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Handy-Ansicht überarbeitet
2026-09-24 22:14:52 +02:00 · 2026-09-24 22:09:33 +02:00 · 2026-09-24 22:05:09 +02:00 · 2026-09-24 21:59:01 +02:00 · 2026-09-24 21:47:52 +02:00
10 changed files with 357 additions and 76 deletions
@@ -28,7 +28,9 @@ neuer Hand. Dazu der **Hilfe Verein** („Hilfe. Herz. Hoffnung."), **noch nicht
 eingetragen** — deshalb keine Spendenstufen, kein Zahlungsformular, kein
 Mitgliedschafts-Flow. Drei Hilfearten, genau wie vom Kunden benannt: Geldspenden,
 ehrenamtliche Helfer, Weitersagen. Kontakt nur über `tel:` und `mailto:`.
-**Opa Martin** ist der Inhaber; Bild und Name, kein Bildtext — Kundenvorgabe.
+**Opa Martin** ist der Inhaber; Bild und Name, kein Bildtext — Kundenvorgabe. Foto seit
+2026-09-24 in `assets/opa-martin.jpg`, 4:5 zugeschnitten, gleich behandelt wie das Story-Bild
+(gekippt, weiß gerahmt).
 Der Online-Shop ist bewusst geparkt. Tonalität: **Du-Form**, Satzkleinschreibung, keine Emoji.

 ## Drei Abweichungen vom Handoff
@@ -80,6 +82,45 @@ Coral bleibt unverändert **ausschließlich** Handlungsfarbe der primären Butto
 Eine bewusste Ausnahme: das Band *„Wo alles angefangen hat"* auf der Vereinsseite steht im
 Blau der Shop-Welt. Es verweist auf den Laden; die Tönung markiert den Themenwechsel.

+### 1b. Kräftigere Tönungen (2026-09-24)
+
+Zweite Rückmeldung des Auftraggebers: die Farben wirken **„zu transparent"**. Gemessen
+lag das an drei Stellen: den 50/100-Pastellen (`--sky-50`, `--sun-100`, `--coral-50`)
+mit Leuchtdichte nahe Weiß, dem halbtransparenten Weißschleier im Hero, der bis 820px
+über dem Foto lag, und dem durchscheinenden Header (`rgba(255,255,255,.92)`).
+
+Begründung aus derselben Referenz: [`emmas-schatzkiste-ds.md`](../design-references/entries/emmas-schatzkiste-ds.md)
+hält bereits fest, dass *Pastell allein in dieser Familie nicht trägt*. Das wird jetzt
+eine Stufe weiter gezogen, ohne neue Farbfamilie:
+
+| Rolle | vorher | jetzt |
+|---|---|---|
+| Creme-Flächen, Footer, Verein-Hero | `--sun-100` `#FDF4DC` | `--sun-200` `#FBE3A0` (neu) |
+| Blaue Flächen, Shop-Hero | `--sky-50` / Weiß | `--sky-100` `#CFE6F8` |
+| Rosa Kachel | `--coral-50` | `--coral-100` `#FFD8CE` (neu) |
+| Icon-Chips | Pastell mit farbigem Icon | Vollton `--accent`, weißes Icon (3.86 / 3.92) |
+| Hero-Verlauf | Weiß bis 430px, Schleier bis 820px | Fläche bis zur Textspalte, 90px Kante |
+| Header | 92 % Weiß mit Blur | deckend Weiß |
+
+Die Kacheln im gelben Band der Vereinsseite tragen jetzt ihre Tönung (rosa, blau, gelb)
+statt einheitlich Weiß.
+
+**Kontrast neu gerechnet.** Auf den kräftigeren Gründen fallen die hellen Buntwerte auf
+~3.0–3.1. Deshalb stehen H1-Zeilen, Band-Überschriften und der Name unter dem Porträt dort
+in der dunkleren Stufe derselben Familie: auf `--sun-200` `--sky-600` 4.43 · `--sun-700`
+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:
@@ -191,6 +232,25 @@ im rechten Drittel liegen. Alle 2000×1100, progressives JPEG, Qualität 76.
 Das Vereinslogo im Hero liegt auf einer weißen Karte — auf dem gemusterten Stoff war die
 feine Schrift darin sonst nicht lesbar.

+## Decor-Muster
+
+Kundenwunsch 2026-09-24: die farbigen Flächen wirkten leer. Referenz ist die
+Handoff-Komponente **`Decor` — „flat decorative layer" (`variant`, `opacity`)**; sie steht
+in der Komponentenliste des Handoffs, wurde dort aber nie ausgeführt.
+
+`assets/decor-toys.svg` ist eine nahtlose 420px-Kachel mit elf flachen
+Spielzeug-Silhouetten (Teddy, Ente, Auto, Ball, Bauklotz, Rassel, Stern, Ballon,
+Stapelturm, Herz, Segelboot), selbst gezeichnet, 4 KB. Sie wird als CSS-Maske benutzt, die
+Farbe kommt pro Fläche aus `--decor`: immer der Ton der Fläche, eine Stufe dunkler — ein
+Schatten, kein zweites Motiv. Auf dem Handy 320px-Kachel.
+
+Liegt auf: Heros (Desktop nur über der Farbfläche, zur Fotokante ausgeblendet), allen
+getönten und gesättigten Feldern, den Bändern und dem Footer. Weiße Sektionen bleiben leer,
+damit der Rhythmus Weiß ↔ Farbe erhalten bleibt.
+
+Kontrast gegen die **dunklere** Musterfarbe gemessen, nicht gegen den Grund: `--ink-700`
+7.41–9.71, Weiß auf dem Blau-Band 4.65.
+
 ## Motion

 Nur Zustandsfeedback, wie im Handoff: 120ms Farbe, 200ms Lift, 340ms alles Größere,
@@ -231,6 +291,22 @@ versehentlich live geht, plus ein `.prose__warn`-Kasten oben auf jeder Seite.

 ## Mobil und Touch

+**Überarbeitung 2026-09-24** (Kundenrückmeldung: Einstieg schwach, Header klobig, zu lang,
+Headline zu klein). Referenz unverändert das Handoff-DS, geändert sind nur Verhältnisse:
+
+- **Header** wieder einzeilig und sticky: Zeichen links (Name bleibt für Screenreader im
+  Link), vier Punkte rechts, aktiv als 3px-Akzentkante statt Pille. Ziele weiter ≥ 44px,
+  passt bis 320px.
+- **Hero** stapelt Text zuerst, Foto danach als gekipptes, gerahmtes Bild wie
+  `.story__img`. Die Headline beginnt bei 212px statt ~560px.
+- **Headline** so groß, wie das längste Wort in die Spalte passt: `min(48px, Spalte / 7.4)`,
+  Verein `/ 8.1` wegen „zusammenhalten!". 45px statt 34px bei 375. Kontur .075em.
+- **Rhythmus** gestrafft: Abstände 64 → 40px, Porträt max. 260px, Story-Bild 3:2.
+  Startseite bei 375px 4936 → 4260px hoch.
+
+Die Angaben unten zum zweizeiligen, nicht-stickigen Header sind damit überholt.
+
+
 Geprüft bei 320 · 375 · 390 · 640 · 768 · 1024 · 1440 · 1920 px, auf allen fünf Seiten,
 jeweils auf horizontalen Overflow, Zielgrößen, Schriftgrößen und Randabstände. Alles
 sauber. Gefunden und behoben wurde dabei:
@@ -46,10 +46,7 @@ cd "/Users/andrej/ASX Studio/Emmas schatzkiste" && python3 -m http.server 4173

 ### Vom Kunden ausstehend

-3. **Foto von Opa Martin.** Der Slot auf der Startseite ist 1:1 und beschriftet. Bild
-   einsetzen: den `<div class="portrait__slot">` durch
-   `<img src="assets/opa-martin.jpg" alt="Opa Martin">` ersetzen — der Kommentar steht an
-   der Stelle. Bild und Name, kein Bildtext (Kundenvorgabe).
+3. ~~**Foto von Opa Martin.**~~ Erledigt 2026-09-24 (`assets/opa-martin.jpg`).
 4. **Zwei Audiodateien** — ein Lied für den Laden, eines für den Verein. Bis dahin ist der
   Player sichtbar deaktiviert, mit Badge „Audio folgt". Beim Einbau: je ein `<audio>`
   verdrahten, Button aktivieren, Fortschrittsbalken aus `timeupdate` treiben,
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420">
+<!-- Decor-Ebene (Handoff-DS: "Decor — flat decorative layer, variant, opacity").
+     Einfarbige Spielzeug-Silhouetten, wird als CSS-Maske benutzt: die Farbe kommt
+     aus dem CSS (Variable decor), diese Datei liefert nur die Form. Kachel 420x420, nahtlos. -->
+<defs>
+  <!-- Teddy -->
+  <g id="teddy">
+    <circle cx="-15" cy="-26" r="8"/><circle cx="15" cy="-26" r="8"/>
+    <circle cx="0" cy="-14" r="17"/>
+    <ellipse cx="0" cy="16" rx="18" ry="19"/>
+    <circle cx="-19" cy="6" r="7"/><circle cx="19" cy="6" r="7"/>
+    <circle cx="-12" cy="33" r="8"/><circle cx="12" cy="33" r="8"/>
+  </g>
+  <!-- Quietscheente -->
+  <g id="duck">
+    <path d="M-28 4 C-28 -6 -18 -10 -8 -8 L14 -8 C24 -8 30 0 30 8 C30 22 16 26 0 26 C-18 26 -28 18 -28 4 Z"/>
+    <circle cx="10" cy="-18" r="13"/>
+    <path d="M21 -20 L34 -15 L21 -11 Z"/>
+    <path d="M-30 -4 L-20 -2 L-24 8 Z"/>
+  </g>
+  <!-- Spielzeugauto -->
+  <g id="car">
+    <path d="M-32 6 L-32 -6 Q-32 -10 -28 -10 L-16 -10 L-8 -22 L14 -22 L22 -10 L28 -10 Q32 -10 32 -6 L32 6 Z"/>
+    <circle cx="-17" cy="8" r="8"/><circle cx="17" cy="8" r="8"/>
+  </g>
+  <!-- Ball -->
+  <g id="ball">
+    <path fill-rule="evenodd" d="M0 -22 A22 22 0 1 1 0 22 A22 22 0 1 1 0 -22 Z M-3 -19 C-12 -8 -12 8 -3 19 L3 19 C-6 8 -6 -8 3 -19 Z"/>
+  </g>
+  <!-- Bauklotz -->
+  <g id="block">
+    <path fill-rule="evenodd" d="M-18 -22 H18 Q22 -22 22 -18 V18 Q22 22 18 22 H-18 Q-22 22 -22 18 V-18 Q-22 -22 -18 -22 Z M-8 -12 V12 H2 Q10 12 10 5 Q10 0 5 -1 Q9 -3 9 -7 Q9 -12 1 -12 Z M-3 -8 V-3 H1 Q4 -3 4 -5.5 Q4 -8 1 -8 Z M-3 1 V8 H2 Q5 8 5 4.5 Q5 1 2 1 Z"/>
+  </g>
+  <!-- Rassel -->
+  <g id="rattle">
+    <circle cx="0" cy="-16" r="15"/>
+    <rect x="-3.5" y="-4" width="7" height="30" rx="3.5"/>
+    <circle cx="0" cy="28" r="6"/>
+  </g>
+  <!-- Stern -->
+  <g id="star">
+    <path d="M0 -22 L6.5 -7 L22 -6.5 L10 4 L14 20 L0 11 L-14 20 L-10 4 L-22 -6.5 L-6.5 -7 Z" stroke-linejoin="round"/>
+  </g>
+  <!-- Luftballon -->
+  <g id="balloon">
+    <ellipse cx="0" cy="-10" rx="15" ry="19"/>
+    <path d="M-4 8 L4 8 L0 13 Z"/>
+    <path d="M0 13 C5 20 -5 26 1 34" fill="none" stroke="#000" stroke-width="2.4" stroke-linecap="round"/>
+  </g>
+  <!-- Stapelturm -->
+  <g id="rings">
+    <rect x="-2.5" y="-30" width="5" height="12" rx="2.5"/>
+    <circle cx="0" cy="-30" r="4.5"/>
+    <ellipse cx="0" cy="-14" rx="10" ry="6"/>
+    <ellipse cx="0" cy="-2" rx="15" ry="7"/>
+    <ellipse cx="0" cy="12" rx="20" ry="8"/>
+    <rect x="-24" y="19" width="48" height="6" rx="3"/>
+  </g>
+  <!-- Herz -->
+  <g id="heart">
+    <path d="M0 18 C-14 8 -22 0 -22 -8 A10 10 0 0 1 0 -14 A10 10 0 0 1 22 -8 C22 0 14 8 0 18 Z"/>
+  </g>
+  <!-- Segelboot -->
+  <g id="boat">
+    <path d="M2 -28 L2 6 L24 6 Z"/>
+    <path d="M-2 -20 L-2 6 L-16 6 Z"/>
+    <path d="M-26 10 L26 10 L18 22 L-18 22 Z"/>
+  </g>
+</defs>
+<g fill="#000">
+  <use href="#teddy"   transform="translate(58 62) rotate(-12)"/>
+  <use href="#star"    transform="translate(170 36) rotate(14) scale(.8)"/>
+  <use href="#car"     transform="translate(282 70) rotate(8)"/>
+  <use href="#ball"    transform="translate(384 30) rotate(-20) scale(.85)"/>
+  <use href="#balloon" transform="translate(150 150) rotate(10)"/>
+  <use href="#duck"    transform="translate(40 190) rotate(6)"/>
+  <use href="#block"   transform="translate(262 170) rotate(-10)"/>
+  <use href="#heart"   transform="translate(370 150) rotate(12) scale(.8)"/>
+  <use href="#rings"   transform="translate(80 312) rotate(-6)"/>
+  <use href="#rattle"  transform="translate(200 270) rotate(-35)"/>
+  <use href="#boat"    transform="translate(330 270) rotate(6)"/>
+  <use href="#star"    transform="translate(20 400) rotate(-8) scale(.6)"/>
+  <use href="#star"    transform="translate(440 400) rotate(-8) scale(.6)"/>
+  <use href="#ball"    transform="translate(250 380) rotate(30) scale(.7)"/>
+  <use href="#heart"   transform="translate(160 390) rotate(-14) scale(.6)"/>
+  <use href="#teddy"   transform="translate(390 368) rotate(10) scale(.75)"/>
+</g>
+</svg>
@@ -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,8 +125,11 @@
 .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);
+  /* 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 */
@@ -130,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)}
@@ -139,9 +155,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 +188,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{
@@ -198,34 +214,27 @@ a:hover{color:var(--sky-600)}
 .nav a:hover{color:var(--ink-700); background:var(--surface-sunk)}
 .nav a[aria-current="page"]{color:var(--ink-700); background:var(--accent-soft)}

-/* MOBILER HEADER — unter 640px.
-   Vorher: eine Zeile, Nav horizontal scrollend, Wortmarke per font-size:0 versteckt.
-   Gemessen war das zu eng — Nav-Links 28px hoch, Wortmarken-Link 32px breit, und bei
-   320/360px scrollte die Nav seitlich weg, ohne dass man es sieht.
-   Jetzt: zwei Zeilen, Nav als Viererraster ueber die volle Breite, jedes Ziel >=44px
-   (WCAG 2.5.5). Der Header ist dafuer nicht mehr sticky — zwei Zeilen wuerden sonst
-   dauerhaft ein Sechstel des Handydisplays wegnehmen. Auf fuenf Unterseiten ist eine
-   mitlaufende Navigation kein Verlust. */
+/* MOBILER HEADER — unter 640px. Dritte Fassung (2026-09-24).
+   Die Zwei-Zeilen-Fassung (Wortmarke mittig, darunter Viererraster mit Pillen) hat
+   der Kunde als klobig zurückgewiesen. Jetzt wieder eine Zeile und sticky: links nur
+   das Zeichen (der Name steht groß im Hero-Logo direkt darunter und bleibt für
+   Screenreader im Link), rechts die vier Punkte. Aktiv ist eine 3px-Unterkante im
+   Akzent statt der Pille — dieselbe Geste wie die Footer-Kante.
+   Gemessen passt das bis 320px: 44px Zeichen + vier Ziele à ≥44px Höhe. */
@media (max-width:639.98px){
-  .hdr{position:static; height:auto}
-  html{scroll-padding-top:16px}
-  .hdr__in{
-    flex-direction:column; align-items:stretch; justify-content:flex-start;
-    height:auto; gap:6px; padding-block:10px;
-  }
-  .hdr__brand{
-    justify-content:center; min-height:44px; gap:10px;
-    font:600 18px/1.2 'Fredoka','Trebuchet MS',sans-serif;
-  }
-  .hdr__brand img{width:30px; height:30px}
-  .nav{
-    display:grid; grid-template-columns:repeat(4,1fr); gap:3px;
-    flex-wrap:nowrap; overflow:visible;
-  }
+  :root{--header-h:60px; --page-pad-x:20px}
+  .hdr__in{gap:var(--space-2)}
+  .hdr__brand{font-size:0; gap:0; min-width:44px; justify-content:center}
+  .hdr__brand img{width:36px; height:36px}
+  .nav{flex-wrap:nowrap; gap:0}
  .nav a{
-    min-height:44px; display:flex; align-items:center; justify-content:center;
-    padding:6px 4px; font-size:13px; line-height:1.15; text-align:center;
-    white-space:normal; hyphens:auto;
+    position:relative; min-height:44px; padding:6px clamp(5px,2.2vw,10px);
+    font-size:clamp(13px,3.8vw,15px); white-space:nowrap; border-radius:var(--radius-s);
+  }
+  .nav a[aria-current="page"]{background:none}
+  .nav a[aria-current="page"]::after{
+    content:""; position:absolute; left:clamp(5px,2.2vw,10px); right:clamp(5px,2.2vw,10px);
+    bottom:6px; height:3px; border-radius:var(--radius-pill); background:var(--accent-line);
  }
  /* Fusszeilen-Links waren 21px hoch und damit unter jeder Touch-Schwelle. */
  .ftr__col ul{gap:2px}
@@ -276,6 +285,23 @@ 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-500)}
+/* 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)}
+/* Kontur auf allen drei Zeilen (Kundenwunsch 2026-09-24) — einheitlicher Sticker-Look
+   wie die Wortmarke. Da die Kontur den Kontrast trägt, stehen Blau und Coral wieder
+   in ihren helleren Markenwerten sky-500 / coral-500 statt der dunklen 600er. */
+/* 0.1em statt fester 6px: auf dem Handy (34px) liefen die Buchstaben sonst zu. */
+.hero .hl span{-webkit-text-stroke:.1em var(--ink-700); paint-order:stroke fill}
+.hero .hl .c-coral{color:var(--coral-500)}
+.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)}
@@ -290,31 +316,39 @@ 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(--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 <span>, 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,
   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 +365,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(--chip-bg,var(--accent)); color:var(--chip-fg,#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 +396,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 +414,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{
@@ -393,7 +429,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;
@@ -422,7 +461,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)}
+.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}

@@ -434,7 +474,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. */
@@ -520,6 +560,87 @@ a:hover{color:var(--sky-600)}
  .label, .ftr__col h3, .badge{font-size:12px}
 }

+/* ============================================================ DECOR
+   Referenz: Handoff-DS-Komponente "Decor — flat decorative layer" (variant, opacity).
+   Im Handoff gelistet, aber nie gebaut. Kundenwunsch 2026-09-24: die Flächen wirkten leer.
+   Flache Spielzeug-Silhouetten (assets/decor-toys.svg) als CSS-Maske, damit die Farbe pro
+   Fläche aus dem CSS kommt: immer derselbe Farbton, eine Stufe dunkler — Schatten, kein
+   zweites Motiv. Text darüber bleibt lesbar, gemessen gegen die DUNKLERE Musterfarbe:
+   ink-700 ≥ 8.4 auf allen hellen Tönen, weiß auf #2878BD = 4.62. */
+.field--warm, .field--cool, .field--rose, .field--solid-sky, .field--solid-sun,
+.band, .ftr{position:relative; isolation:isolate}
+.field--warm::before, .field--cool::before, .field--rose::before,
+.field--solid-sky::before, .field--solid-sun::before, .band::before, .ftr::before,
+.hero::after{
+  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
+  border-radius:inherit; background:var(--decor);
+  -webkit-mask:url(decor-toys.svg) 0 0/var(--decor-size,420px) repeat;
+          mask:url(decor-toys.svg) 0 0/var(--decor-size,420px) repeat;
+}
+.field--warm, .band, .ftr{--decor:#EDC356}
+.field--cool, .band--cool{--decor:#A9CFEE}
+.field--rose{--decor:#F9BFB0}
+.field--solid-sky{--decor:#2878BD}
+.field--solid-sun{--decor:#E8B124}
+/* Kachelmuster versetzt, damit nicht jede Fläche mit demselben Teddy oben links beginnt. */
+.field--solid-sky::before, .field--solid-sun::before{-webkit-mask-position:140px 90px; mask-position:140px 90px}
+
+/* Hero: über Foto und Verlauf, unter dem Text. Auf dem Desktop nur über der Farbfläche —
+   eine zweite Maske blendet das Muster zur Fotokante hin aus. */
+.hero--shop{--decor:#B5D8F3}
+.hero--verein{--decor:#F1CC66}
+.hero::after{z-index:0}
+.hero__in, .hero__mark{z-index:1}
+@media (min-width:820px){
+  .hero::after{
+    -webkit-mask:url(decor-toys.svg) 0 0/420px repeat,
+                 linear-gradient(98deg,#000 calc(var(--scrim-edge) - 60px),transparent var(--scrim-edge));
+    -webkit-mask-composite:source-in;
+            mask:url(decor-toys.svg) 0 0/420px repeat,
+                 linear-gradient(98deg,#000 calc(var(--scrim-edge) - 60px),transparent var(--scrim-edge));
+            mask-composite:intersect;
+  }
+}
+@media (max-width:819.98px){ .hero__media{z-index:1} }
+@media (max-width:639.98px){ :root{--decor-size:320px} }
+
+/* ============================================================ HANDY-RHYTHMUS
+   Kundenrückmeldung 2026-09-24: Einstieg zu schwach, zu lang, Headline zu klein.
+   Gemessen vorher: Startseite 4936px hoch, auf dem ersten Bildschirm nur Foto und
+   Logo — die Headline begann bei ~560px. Referenz bleibt das Handoff-DS; geändert
+   werden nur Verhältnisse, nicht die Bausteine. */
+@media (max-width:639.98px){
+  /* Headline zuerst, Foto danach als gekipptes, gerahmtes Bild — dieselbe Behandlung
+     wie .story__img und das Porträt. */
+  .hero{display:flex; flex-direction:column}
+  .hero__in{order:1; padding-block:var(--space-6) var(--space-5)}
+  .hero__media{
+    order:2; height:190px; margin:0 var(--page-pad-x) var(--space-8);
+    border-radius:var(--radius-xl); box-shadow:var(--shadow-band); transform:rotate(-1.5deg);
+  }
+  .hero__col{gap:var(--space-4)}
+  .hero__logo{max-width:112px}
+  /* So groß, wie "weitergegeben!" in die Spalte passt (Breite ≈ 7.2 × Schriftgröße):
+     46px bei 375, 39px bei 320. Kontur dünner, sonst laufen die Punzen zu. */
+  .hl{font-size:min(48px, calc((100vw - 2 * var(--page-pad-x)) / 7.4))}
+  /* "zusammenhalten!" ist breiter: ≈ 8.0 × Schriftgröße inkl. Kontur. */
+  .hero--verein .hl{font-size:min(48px, calc((100vw - 2 * var(--page-pad-x)) / 8.1))}
+  .hero .hl span{-webkit-text-stroke-width:.075em}
+
+  .section{padding-block:var(--space-10)}
+  .section--tight{padding-block:var(--space-8)}
+  .field{padding-block:var(--space-10)}
+  .sh{margin-bottom:var(--space-4)}
+  .story{gap:var(--space-5)}
+  .story__img{aspect-ratio:3/2}
+  .portrait{max-width:260px; gap:var(--space-3)}
+  .tiles{gap:var(--space-3)}
+  .tile{padding:var(--space-5)}
+  .band{gap:var(--space-5)}
+  .band img{max-width:220px}
+  .ftr{margin-top:var(--space-10); padding-block:var(--space-10) var(--space-6)}
+}
+
 /* ============================================================ FOKUS
   Muss ganz am Ende stehen. Der Ring ist eine box-shadow, und .btn/.tile/.song
   setzen selbst eine — bei gleicher Spezifitaet gewinnt die spaetere Regel.
@@ -11,7 +11,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -54,7 +54,7 @@
        <dt>Name</dt><dd>Martin Lindenau</dd>
        <dt>Anschrift</dt><dd>Hollerstraße 2, 84056 Rottenburg a.d. Laaber</dd>
        <dt>Telefon</dt><dd><a href="tel:015751479212">0157 51479212</a></dd>
-        <dt>E-Mail</dt><dd><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></dd>
+        <dt>E-Mail</dt><dd><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@<wbr>gmail.com</a></dd>
      </dl>
      <p>Eine Pflicht zur Benennung einer Datenschutzbeauftragten oder eines
      Datenschutzbeauftragten besteht bei dieser Größe nach § 38 BDSG nicht.</p>
@@ -155,7 +155,7 @@
      <div class="ftr__col">
        <h3>Über</h3>
        <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-uns">Über uns</a></li>
          <li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
          <li><a href="impressum.html">Impressum</a></li>
          <li><a href="datenschutz.html">Datenschutz</a></li>
@@ -10,7 +10,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
 </head>
 <body class="page-verein">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -144,7 +144,7 @@
      </div>
      <div class="contact">
        <span class="label">E-Mail</span>
-        <p><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></p>
+        <p><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@<wbr>gmail.com</a></p>
      </div>
    </div>
  </section>
@@ -173,7 +173,7 @@
      <div class="ftr__col">
        <h3>Über</h3>
        <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-uns">Über uns</a></li>
          <li><a href="#kontakt">Kontakt</a></li>
          <li><a href="impressum.html">Impressum</a></li>
          <li><a href="datenschutz.html">Datenschutz</a></li>
@@ -11,7 +11,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -47,7 +47,7 @@
        <dt>Anbieter</dt><dd>Martin Lindenau</dd>
        <dt>Anschrift</dt><dd>Hollerstraße 2<br />84056 Rottenburg a.d. Laaber<br />Deutschland</dd>
        <dt>Telefon</dt><dd><a href="tel:015751479212">0157 51479212</a></dd>
-        <dt>E-Mail</dt><dd><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></dd>
+        <dt>E-Mail</dt><dd><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@<wbr>gmail.com</a></dd>
      </dl>
      <p>Eine ladungsfähige Anschrift ist zwingend — ein Postfach genügt nicht.</p>

@@ -122,7 +122,7 @@
      <div class="ftr__col">
        <h3>Über</h3>
        <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-uns">Über uns</a></li>
          <li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
          <li><a href="impressum.html">Impressum</a></li>
          <li><a href="datenschutz.html">Datenschutz</a></li>
@@ -10,7 +10,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -64,7 +64,7 @@
    </div>
  </section>

-  <section class="wrap section">
+  <section class="wrap section" id="ueber-uns">
    <div class="sh">
      <span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg></span>
      <h2>Wie alles angefangen hat</h2>
@@ -81,8 +81,7 @@
  <section class="field field--warm">
    <div class="wrap">
      <div class="portrait">
-        <!-- Foto ausstehend. Sobald da: <img src="assets/opa-martin.jpg" alt="Opa Martin"> in den Slot. -->
-        <div class="portrait__slot"><span>Bild von Opa Martin folgt</span></div>
+        <img class="portrait__img" src="assets/opa-martin.jpg" alt="Opa Martin" width="800" height="1000" loading="lazy" />
        <p class="portrait__name">Opa Martin</p>
      </div>
    </div>
@@ -162,7 +161,7 @@
      <div class="ftr__col">
        <h3>Über</h3>
        <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-uns">Über uns</a></li>
          <li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
          <li><a href="impressum.html">Impressum</a></li>
          <li><a href="datenschutz.html">Datenschutz</a></li>
@@ -11,7 +11,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
 </head>
 <body class="page-shop parked">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -65,7 +65,7 @@
      <div class="ftr__col">
        <h3>Über</h3>
        <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-uns">Über uns</a></li>
          <li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
          <li><a href="impressum.html">Impressum</a></li>
          <li><a href="datenschutz.html">Datenschutz</a></li>
Author	SHA1	Message	Date
Andrej StevanovskiandClaude Opus 5.5	9d100734a9	Decor-Muster: Spielzeug-Silhouetten auf den farbigen Flächen Umsetzung der Handoff-Komponente Decor (flat decorative layer). Selbst gezeichnete SVG-Kachel als CSS-Maske, Farbe pro Fläche eine Stufe dunkler als der Grund. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-24 22:14:52 +02:00
Andrej StevanovskiandClaude Opus 5.5	7f1525b381	Handy-Ansicht überarbeitet - Header einzeilig und sticky, aktiver Punkt als Akzentkante statt Pille - Hero: Headline zuerst, Foto danach als gerahmtes Bild - Headline so groß wie die Spalte erlaubt (45px statt 34px bei 375), Kontur dünner - Abstände und Bilder gestrafft: Startseite 4936 -> 4260px Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-24 22:09:33 +02:00
Andrej StevanovskiandClaude Opus 5.5	f1ca321d7c	Kontur auf allen drei Headline-Zeilen Sticker-Kontur wie die Wortmarke jetzt auch auf Blau und Coral, skaliert mit der Schriftgröße (.1em). Blau/Coral dadurch wieder in den helleren Markenwerten. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-09-24 22:05:09 +02:00
Andrej StevanovskiandClaude Opus 5.5	6bd5c12d3e	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 <noreply@anthropic.com>	2026-09-24 21:59:01 +02:00
Andrej StevanovskiandClaude Opus 5.5	2defdc9856	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>	2026-09-24 21:47:52 +02:00