diff --git a/DESIGN.md b/DESIGN.md index 5c9387b..526ea39 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -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 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. +`assets/decor/source.svg` ist eine nahtlose Kachel mit elf flachen Spielzeug-Silhouetten +(Teddy, Ente, Auto, Ball, Bauklotz, Rassel, Stern, Ballon, Stapelturm, Herz, Segelboot), +selbst gezeichnet. Daraus sind sieben vorgefärbte Varianten erzeugt (`warm`, `cool`, +`rose`, `sky`, `sun`, `hero-shop`, `hero-verein`), eingebunden als normales +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 getönten und gesättigten Feldern, den Bändern und dem Footer. Weiße Sektionen bleiben leer, diff --git a/assets/decor/cool.svg b/assets/decor/cool.svg new file mode 100644 index 0000000..14a11c9 --- /dev/null +++ b/assets/decor/cool.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/decor/hero-shop.svg b/assets/decor/hero-shop.svg new file mode 100644 index 0000000..9935f8d --- /dev/null +++ b/assets/decor/hero-shop.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/decor/hero-verein.svg b/assets/decor/hero-verein.svg new file mode 100644 index 0000000..4ed745d --- /dev/null +++ b/assets/decor/hero-verein.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/decor/rose.svg b/assets/decor/rose.svg new file mode 100644 index 0000000..fb03dec --- /dev/null +++ b/assets/decor/rose.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/decor/sky.svg b/assets/decor/sky.svg new file mode 100644 index 0000000..a445cbb --- /dev/null +++ b/assets/decor/sky.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/decor-toys.svg b/assets/decor/source.svg similarity index 95% rename from assets/decor-toys.svg rename to assets/decor/source.svg index 783e1fd..7ac3d25 100644 --- a/assets/decor-toys.svg +++ b/assets/decor/source.svg @@ -1,7 +1,7 @@ + Einfarbige Spielzeug-Silhouetten, Quelle fuer die eingefaerbten Varianten + daneben (warm, cool, rose, sky, sun, hero-shop, hero-verein). Kachel 420x420, nahtlos. --> diff --git a/assets/decor/sun.svg b/assets/decor/sun.svg new file mode 100644 index 0000000..53ab87f --- /dev/null +++ b/assets/decor/sun.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/decor/warm.svg b/assets/decor/warm.svg new file mode 100644 index 0000000..8f3cde2 --- /dev/null +++ b/assets/decor/warm.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/site.css b/assets/site.css index e16ff05..2de7232 100644 --- a/assets/site.css +++ b/assets/site.css @@ -577,46 +577,45 @@ a:hover{color:var(--sky-600)} /* ============================================================ 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. */ + Flache Spielzeug-Silhouetten, je Fläche derselbe Farbton eine Stufe dunkler — Schatten, + kein zweites Motiv. Text darüber gemessen gegen die DUNKLERE Musterfarbe: + ink-700 ≥ 7.41 auf allen hellen Tönen, weiß auf #2878BD = 4.65. + + 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, .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; + border-radius:inherit; background-repeat:repeat; + background-size:var(--decor-size,600px) auto; background-position:0 0; } -.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} +.field--warm::before, .band::before, .ftr::before{background-image:url(decor/warm.svg)} +.field--cool::before, .band--cool::before{background-image:url(decor/cool.svg)} +.field--rose::before{background-image:url(decor/rose.svg)} +.field--solid-sky::before{background-image:url(decor/sky.svg); background-position:180px 120px} +.field--solid-sun::before{background-image:url(decor/sun.svg); background-position:180px 120px} -/* 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: über Foto und Verlauf, unter dem Text. */ +.hero--shop::after{background-image:url(decor/hero-shop.svg)} +.hero--verein::after{background-image:url(decor/hero-verein.svg)} .hero::after{z-index:0} .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){ .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; + right:auto; width:var(--scrim-edge); + -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 70px),transparent); + mask-image:linear-gradient(to right,#000 calc(100% - 70px),transparent); } } @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 Kundenrückmeldung 2026-09-24: Einstieg zu schwach, zu lang, Headline zu klein. diff --git a/datenschutz.html b/datenschutz.html index 7340f6b..cd360c8 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -11,7 +11,7 @@ - + diff --git a/hilfe-verein.html b/hilfe-verein.html index ea2c484..1a56e33 100644 --- a/hilfe-verein.html +++ b/hilfe-verein.html @@ -10,7 +10,7 @@ - + diff --git a/impressum.html b/impressum.html index d951ad1..b352473 100644 --- a/impressum.html +++ b/impressum.html @@ -11,7 +11,7 @@ - + diff --git a/index.html b/index.html index 604325e..25063ee 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - + diff --git a/shop.html b/shop.html index 3074132..75af172 100644 --- a/shop.html +++ b/shop.html @@ -11,7 +11,7 @@ - +