WEBklar/emmas-schatzkiste
4
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Decor-Muster Safari-fest und größer

Browse Source 
Die CSS-Masken-Fassung war in Safari unsichtbar. Jetzt vorgefärbte SVG-Kacheln
(assets/decor/*.svg) als normales Hintergrundbild. Kachel 420 -> 600px, Handy 440px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andrej StevanovskiandClaude Opus 5.5 committed 2026-09-24 22:26:48 +02:00
1 parent ab41686689
commit 4b3c90cb8e
15 files changed
+658 -37
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

DESIGN.md
+11 -5
View File
@@ -238,11 +238,17 @@ Kundenwunsch 2026-09-24: die farbigen Flächen wirkten leer. Referenz ist die
Handoff-Komponente **`Decor` — „flat decorative layer" (`variant`, `opacity`)**; sie steht Handoff-Komponente **`Decor` — „flat decorative layer" (`variant`, `opacity`)**; sie steht
in der Komponentenliste des Handoffs, wurde dort aber nie ausgeführt. in der Komponentenliste des Handoffs, wurde dort aber nie ausgeführt.
`assets/decor-toys.svg` ist eine nahtlose 420px-Kachel mit elf flachen `assets/decor/source.svg` ist eine nahtlose Kachel mit elf flachen Spielzeug-Silhouetten
Spielzeug-Silhouetten (Teddy, Ente, Auto, Ball, Bauklotz, Rassel, Stern, Ballon, (Teddy, Ente, Auto, Ball, Bauklotz, Rassel, Stern, Ballon, Stapelturm, Herz, Segelboot),
Stapelturm, Herz, Segelboot), selbst gezeichnet, 4 KB. Sie wird als CSS-Maske benutzt, die selbst gezeichnet. Daraus sind sieben vorgefärbte Varianten erzeugt (`warm`, `cool`,
Farbe kommt pro Fläche aus `--decor`: immer der Ton der Fläche, eine Stufe dunkler — ein `rose`, `sky`, `sun`, `hero-shop`, `hero-verein`), eingebunden als normales
Schatten, kein zweites Motiv. Auf dem Handy 320px-Kachel. Hintergrundbild: immer der Ton der Fläche, eine Stufe dunkler — ein Schatten, kein zweites
Motiv. Kachel 600px, auf dem Handy 440px (auf Kundenwunsch größer, gleich kräftig).
**Nicht als CSS-Maske.** Die erste Fassung färbte eine einzige SVG per `mask` ein und war
in Safari (Mac) komplett unsichtbar. Vorgefärbte Dateien sind etwas redundanter, laufen
aber in jedem Browser. Den Hero-Übergang zur Fotokante macht nur noch eine reine
Verlaufsmaske.
Liegt auf: Heros (Desktop nur über der Farbfläche, zur Fotokante ausgeblendet), allen 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, getönten und gesättigten Feldern, den Bändern und dem Footer. Weiße Sektionen bleiben leer,
assets/decor/cool.svg
+88
View File
@@ -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, eingefaerbt fuer "cool" (#A9CFEE).
Quelle: assets/decor/source.svg — Varianten mit Python daraus erzeugt. 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="#A9CFEE" 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="#A9CFEE">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

assets/decor/hero-shop.svg
+88
View File
@@ -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, eingefaerbt fuer "hero-shop" (#B5D8F3).
Quelle: assets/decor/source.svg — Varianten mit Python daraus erzeugt. 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="#B5D8F3" 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="#B5D8F3">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

assets/decor/hero-verein.svg
+88
View File
@@ -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, eingefaerbt fuer "hero-verein" (#F1CC66).
Quelle: assets/decor/source.svg — Varianten mit Python daraus erzeugt. 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="#F1CC66" 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="#F1CC66">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

assets/decor/rose.svg
+88
View File
@@ -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, eingefaerbt fuer "rose" (#F9BFB0).
Quelle: assets/decor/source.svg — Varianten mit Python daraus erzeugt. 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="#F9BFB0" 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="#F9BFB0">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

assets/decor/sky.svg
+88
View File
@@ -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, eingefaerbt fuer "sky" (#2878BD).
Quelle: assets/decor/source.svg — Varianten mit Python daraus erzeugt. 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="#2878BD" 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="#2878BD">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

assets/decor-toys.svg → assets/decor/source.svg
+2 -2
View File
@@ -1,7 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420"> <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"). <!-- Decor-Ebene (Handoff-DS: "Decor — flat decorative layer, variant, opacity").
Einfarbige Spielzeug-Silhouetten, wird als CSS-Maske benutzt: die Farbe kommt Einfarbige Spielzeug-Silhouetten, Quelle fuer die eingefaerbten Varianten
aus dem CSS (Variable decor), diese Datei liefert nur die Form. Kachel 420x420, nahtlos. --> daneben (warm, cool, rose, sky, sun, hero-shop, hero-verein). Kachel 420x420, nahtlos. -->
<defs> <defs>
<!-- Teddy --> <!-- Teddy -->
<g id="teddy"> <g id="teddy">
assets/decor/sun.svg
+88
View File
@@ -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, eingefaerbt fuer "sun" (#E8B124).
Quelle: assets/decor/source.svg — Varianten mit Python daraus erzeugt. 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="#E8B124" 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="#E8B124">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

assets/decor/warm.svg
+88
View File
@@ -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, eingefaerbt fuer "warm" (#EDC356).
Quelle: assets/decor/source.svg — Varianten mit Python daraus erzeugt. 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="#EDC356" 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="#EDC356">
<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>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

assets/site.css
+24 -25
View File
@@ -577,46 +577,45 @@ a:hover{color:var(--sky-600)}
/* ============================================================ DECOR /* ============================================================ DECOR
Referenz: Handoff-DS-Komponente "Decor — flat decorative layer" (variant, opacity). 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. 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 Flache Spielzeug-Silhouetten, je Fläche derselbe Farbton eine Stufe dunkler — Schatten,
Fläche aus dem CSS kommt: immer derselbe Farbton, eine Stufe dunkler — Schatten, kein kein zweites Motiv. Text darüber gemessen gegen die DUNKLERE Musterfarbe:
zweites Motiv. Text darüber bleibt lesbar, gemessen gegen die DUNKLERE Musterfarbe: ink-700 ≥ 7.41 auf allen hellen Tönen, weiß auf #2878BD = 4.65.
ink-700 ≥ 8.4 auf allen hellen Tönen, weiß auf #2878BD = 4.62. */
Technik: vorgefärbte SVG-Kacheln (assets/decor/*.svg, erzeugt aus source.svg) als
normales Hintergrundbild. Die erste Fassung lief über eine CSS-Maske und war in
Safari (Mac) unsichtbar — Hintergrundbilder laufen überall.
Kachelgröße 600px (vorher 420): auf Kundenwunsch größere Spielzeuge, gleich kräftig. */
.field--warm, .field--cool, .field--rose, .field--solid-sky, .field--solid-sun, .field--warm, .field--cool, .field--rose, .field--solid-sky, .field--solid-sun,
.band, .ftr{position:relative; isolation:isolate} .band, .ftr{position:relative; isolation:isolate}
.field--warm::before, .field--cool::before, .field--rose::before, .field--warm::before, .field--cool::before, .field--rose::before,
.field--solid-sky::before, .field--solid-sun::before, .band::before, .ftr::before, .field--solid-sky::before, .field--solid-sun::before, .band::before, .ftr::before,
.hero::after{ .hero::after{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
border-radius:inherit; background:var(--decor); border-radius:inherit; background-repeat:repeat;
-webkit-mask:url(decor-toys.svg) 0 0/var(--decor-size,420px) repeat; background-size:var(--decor-size,600px) auto; background-position:0 0;
mask:url(decor-toys.svg) 0 0/var(--decor-size,420px) repeat;
} }
.field--warm, .band, .ftr{--decor:#EDC356} .field--warm::before, .band::before, .ftr::before{background-image:url(decor/warm.svg)}
.field--cool, .band--cool{--decor:#A9CFEE} .field--cool::before, .band--cool::before{background-image:url(decor/cool.svg)}
.field--rose{--decor:#F9BFB0} .field--rose::before{background-image:url(decor/rose.svg)}
.field--solid-sky{--decor:#2878BD} .field--solid-sky::before{background-image:url(decor/sky.svg); background-position:180px 120px}
.field--solid-sun{--decor:#E8B124} .field--solid-sun::before{background-image:url(decor/sun.svg); background-position:180px 120px}
/* 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 — /* Hero: über Foto und Verlauf, unter dem Text. */
eine zweite Maske blendet das Muster zur Fotokante hin aus. */ .hero--shop::after{background-image:url(decor/hero-shop.svg)}
.hero--shop{--decor:#B5D8F3} .hero--verein::after{background-image:url(decor/hero-verein.svg)}
.hero--verein{--decor:#F1CC66}
.hero::after{z-index:0} .hero::after{z-index:0}
.hero__in, .hero__mark{z-index:1} .hero__in, .hero__mark{z-index:1}
/* Desktop: nur über der Farbfläche, zur Fotokante hin ausgeblendet. Breite statt
SVG-Maske; der Verlauf ist eine reine Gradient-Maske, die Safari seit Jahren kann. */
@media (min-width:820px){ @media (min-width:820px){
.hero::after{ .hero::after{
-webkit-mask:url(decor-toys.svg) 0 0/420px repeat, right:auto; width:var(--scrim-edge);
linear-gradient(98deg,#000 calc(var(--scrim-edge) - 60px),transparent var(--scrim-edge)); -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 70px),transparent);
-webkit-mask-composite:source-in; mask-image:linear-gradient(to right,#000 calc(100% - 70px),transparent);
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:819.98px){ .hero__media{z-index:1} }
@media (max-width:639.98px){ :root{--decor-size:320px} } @media (max-width:639.98px){ :root{--decor-size:440px} }
/* ============================================================ HANDY-RHYTHMUS /* ============================================================ HANDY-RHYTHMUS
Kundenrückmeldung 2026-09-24: Einstieg zu schwach, zu lang, Headline zu klein. Kundenrückmeldung 2026-09-24: Einstieg zu schwach, zu lang, Headline zu klein.
datenschutz.html
+1 -1
View File
@@ -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/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="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/fonts.css?v=1f6be3c3" />
<link rel="stylesheet" href="assets/site.css?v=9e53ff22" /> <link rel="stylesheet" href="assets/site.css?v=86ed5fb0" />
</head> </head>
<body class="page-shop"> <body class="page-shop">
<a class="skip" href="#inhalt">Zum Inhalt springen</a> <a class="skip" href="#inhalt">Zum Inhalt springen</a>
hilfe-verein.html
+1 -1
View File
@@ -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/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="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/fonts.css?v=1f6be3c3" />
<link rel="stylesheet" href="assets/site.css?v=9e53ff22" /> <link rel="stylesheet" href="assets/site.css?v=86ed5fb0" />
</head> </head>
<body class="page-verein"> <body class="page-verein">
<a class="skip" href="#inhalt">Zum Inhalt springen</a> <a class="skip" href="#inhalt">Zum Inhalt springen</a>
impressum.html
+1 -1
View File
@@ -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/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="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/fonts.css?v=1f6be3c3" />
<link rel="stylesheet" href="assets/site.css?v=9e53ff22" /> <link rel="stylesheet" href="assets/site.css?v=86ed5fb0" />
</head> </head>
<body class="page-shop"> <body class="page-shop">
<a class="skip" href="#inhalt">Zum Inhalt springen</a> <a class="skip" href="#inhalt">Zum Inhalt springen</a>
index.html
+1 -1
View File
@@ -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/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="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/fonts.css?v=1f6be3c3" />
<link rel="stylesheet" href="assets/site.css?v=9e53ff22" /> <link rel="stylesheet" href="assets/site.css?v=86ed5fb0" />
</head> </head>
<body class="page-shop"> <body class="page-shop">
<a class="skip" href="#inhalt">Zum Inhalt springen</a> <a class="skip" href="#inhalt">Zum Inhalt springen</a>
shop.html
+1 -1
View File
@@ -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/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="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/fonts.css?v=1f6be3c3" />
<link rel="stylesheet" href="assets/site.css?v=9e53ff22" /> <link rel="stylesheet" href="assets/site.css?v=86ed5fb0" />
</head> </head>
<body class="page-shop parked"> <body class="page-shop parked">
<a class="skip" href="#inhalt">Zum Inhalt springen</a> <a class="skip" href="#inhalt">Zum Inhalt springen</a>