diff --git a/DESIGN.md b/DESIGN.md
index b802755..5c9387b 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -232,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,
diff --git a/assets/decor-toys.svg b/assets/decor-toys.svg
new file mode 100644
index 0000000..783e1fd
--- /dev/null
+++ b/assets/decor-toys.svg
@@ -0,0 +1,88 @@
+
diff --git a/assets/site.css b/assets/site.css
index ed99a4a..a5dc7ab 100644
--- a/assets/site.css
+++ b/assets/site.css
@@ -560,6 +560,50 @@ 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
diff --git a/datenschutz.html b/datenschutz.html
index a6845bf..582fa13 100644
--- a/datenschutz.html
+++ b/datenschutz.html
@@ -11,7 +11,7 @@
-
+
Zum Inhalt springen
diff --git a/hilfe-verein.html b/hilfe-verein.html
index ea23c82..12c4f0c 100644
--- a/hilfe-verein.html
+++ b/hilfe-verein.html
@@ -10,7 +10,7 @@
-
+
Zum Inhalt springen
diff --git a/impressum.html b/impressum.html
index 440b2a3..963f26a 100644
--- a/impressum.html
+++ b/impressum.html
@@ -11,7 +11,7 @@
-
+
Zum Inhalt springen
diff --git a/index.html b/index.html
index 2127edc..c1cd6fa 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
-
+
Zum Inhalt springen
diff --git a/shop.html b/shop.html
index 0fb3b30..ea2a1b8 100644
--- a/shop.html
+++ b/shop.html
@@ -11,7 +11,7 @@
-
+
Zum Inhalt springen