From 92fdd88af675ef52422f7231c7586bd08fa7bacd Mon Sep 17 00:00:00 2001 From: Dorian Date: Wed, 24 Jun 2026 12:25:51 +0100 Subject: [PATCH] feat: German doc versions at /dev-doc-de, /simple-doc-de, /review-doc-de MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add full German translations of the three handoff docs (public/*-de.html), each with an "English ↗" toggle; added "Deutsch ↗" toggle to the EN docs. - Register the -de slugs in vite.config.js so the clean URLs work in dev (nginx $uri.html already handles them in prod). dist/ rebuilt. Co-Authored-By: Claude Opus 4.8 (1M context) --- dist/dev-doc-de.html | 926 ++++++++++++++++++++++++++++++++++++++ dist/dev-doc.html | 1 + dist/review-doc-de.html | 425 +++++++++++++++++ dist/review-doc.html | 1 + dist/simple-doc-de.html | 313 +++++++++++++ dist/simple-doc.html | 1 + public/dev-doc-de.html | 926 ++++++++++++++++++++++++++++++++++++++ public/dev-doc.html | 1 + public/review-doc-de.html | 425 +++++++++++++++++ public/review-doc.html | 1 + public/simple-doc-de.html | 313 +++++++++++++ public/simple-doc.html | 1 + vite.config.js | 5 +- 13 files changed, 3338 insertions(+), 1 deletion(-) create mode 100644 dist/dev-doc-de.html create mode 100644 dist/review-doc-de.html create mode 100644 dist/simple-doc-de.html create mode 100644 public/dev-doc-de.html create mode 100644 public/review-doc-de.html create mode 100644 public/simple-doc-de.html diff --git a/dist/dev-doc-de.html b/dist/dev-doc-de.html new file mode 100644 index 0000000..065567b --- /dev/null +++ b/dist/dev-doc-de.html @@ -0,0 +1,926 @@ + + + + + +Kaiser-Natron® — Restyle-Änderungsprotokoll (Entwickler-Handoff) + + + + +
+
+

Entwickler-Handoff · Restyle-Änderungsprotokoll

+

Kaiser-Natron® Restyle —
jede Änderung, dokumentiert

+

Eine allgemeinverständliche Zusammenfassung jeder visuellen Änderung in diesem Restyle-Durchgang — die genaue Datei, was sich geändert hat und welche CSS- / Tailwind-Klassen beteiligt sind. Nach Thema gegliedert, damit du ein Anliegen nach dem anderen prüfen kannst.

+

Aktualisiert am 24. Juni 2026 · Branch feat/shop-category-sections · 28 Änderungen

+

English ↗

+
+
+ +
+ +
+

Das Design-System ist Token-gesteuert: Farben, Schriften und Größen liegen als CSS-Custom-Properties in src/design-system/tokens.css (von Tailwind v4 über @theme konsumiert). Die meisten Farbänderungen passieren dort einmalig und kaskadieren überallhin.

+

Dieses Protokoll hält nur den aktuellen Endzustand jedes Punkts fest — die Datei, was es jetzt ist und das Token bzw. die Klasse — nicht die Iterationen, die nötig waren, um dorthin zu gelangen.

+
+ + + + + +
+
§1

Neue Markenfarben (Design-Tokens)

+
src/design-system/tokens.css
+
+

Zwei neue Farben wurden eingeführt und zwei bestehende umgewidmet.

+ + + + + + + + + +
TokenWertBedeutung
--color-accent-fill#cc0230Crimson — die neue Füllung für alle gefüllten CTA-Buttons, Pills und Chips
--color-accent-fill-hoveroklch(accent-fill − 12% black)Dunkleres Crimson für Hover
--color-accent-fill-ink#ffffffWeiß — die Text-/Icon-Farbe, die auf Crimson liegt
--color-highlight#6eceb2Mint — Hover-/Aktiv-Zustand für Nav-Tabs und Footer-Links
--color-accent#e9c84b (unverändert)Altes warmes Gelb — jetzt nur noch das Token hinter ein paar Nicht-Button-Akzenten
+ 
/* tokens.css — added */
+--color-accent-fill: #cc0230;
+--color-accent-fill-hover: color-mix(in oklch, var(--color-accent-fill), black 12%);
+--color-accent-fill-ink: #ffffff;
+
+--color-highlight: #6eceb2;
+

Da diese in @theme registriert sind, generiert Tailwind automatisch die Utility-Klassen bg-accent-fill, text-accent-fill-ink, border-accent-fill, hover:bg-accent-fill-hover und text-highlight / hover:text-highlight.

+

In /design öffnen

+
+
+ + +
+
§2

Seiten sind reinweiß

+
src/design-system/tokens.cssindex.html
+
+

Die zwei gebrochen-weißen Seitenflächen wurden auf Reinweiß gesetzt. Alles, was einen Seitenhintergrund zeichnet (bg-cream, bg-surface), und das cremefarbene Logo (text-cream) folgten automatisch.

+ 
/* before → after */
+--color-cream:   #f4efe4;  →  #ffffff;
+--color-surface: #faf7f1;  →  #ffffff;
+

index.html — die Browser-Theme-Farbe wurde an Weiß angepasst:

+ 
<meta name="theme-color" content="#ffffff" />   <!-- was #faf7f1 -->
+

In /design öffnen

+
+
+ + +
+
§3

Schriftart → Zeitung (selbst gehostet)

+
src/design-system/tokens.csssrc/assets/styles.csssrc/assets/fonts/index.html
+
+

Sämtlicher Text verwendet jetzt Zeitung, selbst gehostet (kein externes Font-CDN). Die lizenzierten .woff2-Dateien wurden von der Produktionsseite nach src/assets/fonts/ gespiegelt (Regular 400 + Bold 700 — die einzigen beiden Schnitte, die existieren; der Browser synthetisiert Zwischengewichte, und es gibt keine Kursivschnitte).

+ 
/* tokens.css */
+--font-serif: 'Zeitung', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
+--font-sans:  'Zeitung', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
+ 
/* styles.css — added @font-face */
+@font-face { font-family:'Zeitung'; font-weight:400; font-display:swap;
+  src:url('./fonts/Zeitung-Regular.woff2') format('woff2'); }
+@font-face { font-family:'Zeitung'; font-weight:700; font-display:swap;
+  src:url('./fonts/Zeitung-Bold.woff2') format('woff2'); }
+

index.html — der Google-Fonts-<link> (Fraunces + DM Sans) und seine preconnect-Hinweise wurden entfernt.

+

In /design öffnen

+
+
+ + +
+
§4

Buttons

+
src/design-system/components/Button.vue
+
+

Button.vue ist die alleinige Quelle der Wahrheit für Buttons. Varianten werden mit <Button variant="…"> ausgewählt.

+

4a. Textstil — Großbuchstaben, 14px

+ 
// base string — added `uppercase`
+'... font-sans font-semibold uppercase ...'
+
+// sizes — text set to 14px across the board
+sm: 'text-[14px] px-[18px] py-[9px] tracking-label',
+md: 'text-[14px] px-[26px] py-[13px] tracking-label',
+lg: 'text-[14px] px-[34px] py-[17px] tracking-label',
+

4b. Variantenfarben

+ + + + + + + + +
VarianteVorherNachher
primary (grüner Button)grüne Füllung, gelber Textgrüne Füllung, weißer Text — bg-brand text-white border-brand
accent (Haupt-CTA)gelbe Füllung, grüner Textcrimson Füllung, weißer Text — bg-accent-fill text-accent-fill-ink border-accent-fill
secondaryOutlinecrimson Füllung, weißer Text (gleich wie accent)
ghost / dangerunverändertunverändert
+
ℹ️

Hinweis: secondary und accent sind derzeit identisch (beide crimson). Der „Mehr erfahren“-Secondary-CTA des Heros (inline gerendert, siehe §5) wurde an dieselbe Crimson-Füllung angeglichen.

+

In /design öffnen

+
+
+ + +
+
§5

Hero-Call-to-Action-Buttons

+
src/design-system/components/Hero.vue
+
+

Der Hero rendert seinen secondary-CTA inline (nicht über <Button>), daher muss er direkt gestylt werden. Auf markengrünen Heros ist er jetzt Crimson-Füllung + weißer Text, Großbuchstaben, 14px:

+ 
class="… rounded-pill border border-accent-fill bg-accent-fill px-[34px] py-[17px]
+       text-[14px] font-semibold uppercase tracking-label text-accent-fill-ink
+       transition-colors duration-base hover:bg-accent-fill-hover"
+

Der primary-CTA des Heros verwendet auf grünen Flächen bereits die accent-Variante, ist also ebenfalls crimson.

+

In /design öffnen

+
+
+ + +
+
§6

„In den Warenkorb“-Buttons sind crimson

+
src/design-system/components/ProductCard.vuesrc/design-system/components/BundleCard.vuesrc/pages/ShopPage.vuesrc/pages/ProductPage.vuesrc/pages/BundlePage.vue
+
+

Jeder In-den-Warenkorb-Button ist jetzt die crimsonfarbene accent-Variante.

+ + + + + + + + + +
DateiÄnderung
ProductCard.vuectaVariant-Prop-Standard 'primary' → 'accent'
BundleCard.vueIn-den-Warenkorb-<Button> variant="primary" → "accent"
ShopPage.vueProduktraster :cta-variant="… 'accent' : 'primary'" → cta-variant="accent" (kein Wechseln mehr)
ProductPage.vueHaupt-In-den-Warenkorb bereits accent (unverändert)
BundlePage.vueIn-den-Warenkorb bereits accent (unverändert)
+

In /design öffnen

+
+
+ + +
+
§7

Warenkorb-Checkout-Button ist crimson

+
src/design-system/components/CartDrawer.vue
+
+ 
<!-- checkout button -->
+<Button variant="accent" …>   <!-- was variant="primary" -->
+

In /design öffnen

+
+
+ + +
+
§8

Weitere gefüllte Pills/Chips → crimson + weiß

+
IconButton.vueLanguageSwitcher.vueNavbar.vueKaiserhacks.vueBadge.vueAbout.vue
+
+

Alle zuvor gelben gefüllten Flächen verwenden jetzt das Crimson-Token-Paar bg-accent-fill + text-accent-fill-ink.

+ + + + + + + + + + +
DateiElement
IconButton.vueaccent-Variante (Warenkorb-Icon-Button)
LanguageSwitcher.vueaktive Sprach-Pill (alle 3 Töne)
Navbar.vuemobile Warenkorb-CTA-Pill
Kaiserhacks.vueVideo-Play-Chip
Badge.vueaccent-Badge-Variante
About.vue„HISTORY & SCIENCE“-Eyebrow (Badge variant="brand" → "accent") und die „TODAY“-Timeline-Pill (.pill-accent-CSS jetzt crimson + weiß)
+ 
/* About.vue — .pill-accent (the "TODAY" pill) */
+.pill-accent {
+  background: var(--color-accent-fill);
+  color: var(--color-accent-fill-ink);
+  border-color: var(--color-accent-fill);
+}
+

In /design öffnen

+
+
+ + +
+
§9

Mint-Highlight auf Nav-Tabs & Footer-Links

+
src/design-system/components/Navbar.vuesrc/design-system/components/Footer.vue
+
+

Das Hover-/Aktiv-Highlight auf der markengrünen Navbar (und den markengrünen Footer-Links) wechselte über das neue --color-highlight-Token von Gelb zu Mint:

+ 
text-accent       →  text-highlight        (active nav tab)
+hover:text-accent →  hover:text-highlight   (nav tab + footer link hover)
+
ℹ️

Nicht geändert: die mobile Warenkorb-Anzahl-Badge (Navbar.vue, ein grüner Kreis mit einer Zahl) ist weiterhin gelb — es ist ein Zähler-Indikator, kein Tab-Highlight. Bei Bedarf leicht umstellbar.

+

In /design öffnen

+
+
+ + +
+
§10

Gelbes „Highlight“ aus Hero-Text & Titeln entfernt

+
src/pages/HomePage.vueCategoryPage.vueProductPage.vueShopPage.vueBrandHero.vueRevitalization.vueKaiserhacks.vue
+
+

Die kursiven Betonungswörter in Hero-/Abschnitts-Headlines und die kleinen Eyebrow-Labels darüber waren gelb. Sie passen jetzt zum umgebenden weißen Hero-Text.

+ + + + + + + +
DateiÄnderung
HomePage.vue, CategoryPage.vue, ProductPage.vue, ShopPage.vueHeadline-<em>-Betonung: text-accent-soft → text-cream
BrandHero.vue, Revitalization.vuegleicher Betonungs-Tausch
CategoryPage.vue, ShopPage.vue, Kaiserhacks.vueHero-Eyebrows: text-accent → text-cream/75
+

(--color-cream ist jetzt #ffffff, daher lesen sich diese als Weiß auf den grünen Heros.)

+

Auf der Website ansehen

+
+
+ + +
+
§11

Abschnitts-Divider: Welle → Diagonale

+
src/design-system/components/WaveDivider.vuesrc/pages/HomePage.vuesrc/design-system/components/Kaiserhacks.vue
+
+

Die weiche S-Kurve zwischen farbigen Abschnitten wurde zu einer geraden Diagonale, die links tief, rechts hoch verläuft, und das Divider-Band wurde in der Höhe verdoppelt, sodass die Steigung etwa doppelt so steil ist.

+ 
height:   h-12 md:h-16   →  h-24 md:h-32   (48/64px → 96/128px)
+viewBox:  0 0 1440 64    →  0 0 1440 128
+path:     (cubic-bézier wave)  →  M0,0 L0,116 L1440,12 L1440,0 Z
+

Die nahtlose Konstruktion ist unverändert: ein vollhohes <rect> malt die Farbe des unteren Abschnitts und der <path> malt die Farbe des oberen Abschnitts.

+

Derselbe diagonale Divider sitzt auch zwischen dem grünen Kaiserhacks-Header und dem weißen Body darunter: Kaiserhacks.vue importiert WaveDivider und rendert <WaveDivider from="brand" to="surface" /> zwischen dem bg-brand-Header und dem Inhalts-<div> (das -mt-px erhält, um bündig zu sitzen).

+

Auf der Website ansehen

+
+
+ + +
+
§12

Such-Dropdown-Preise → weiß (auf Grün)

+
src/design-system/components/Search.vue
+
+

Im Such-Overlay waren die Preis-Labels auf dem markengrünen Ton gelb. Sie sind jetzt weiß, passend zum übrigen Text auf grüner Fläche:

+ 
// brand tone
+price: 'text-accent'  →  'text-cream'   // (#ffffff on green)
+

Die Töne paper und cream behalten text-brand (unverändert).

+

In /design öffnen

+
+
+ + +
+
§13

Brand-Hero-Intro-Artwork → offizielle Markenassets

+
src/design-system/components/BrandHero.vuesrc/components/heroFigures.jssrc/assets/brand/{hebe,waterfall}.svg
+
+

Die Intro-Animation der Startseite (der im Fluss liegende Figuren-Auftritt — das vollflächige SplashIntro-Overlay war bereits abgeschafft) verwendete zuvor handgezeichnete Annäherungen an die Frau + den Wasserfall. Sie verwendet jetzt die offiziellen Kaiser-Natron-Markenvektoren: die Ikone („Hebe“) und den Waterfall (2021 Druckdaten-Final), von EPS nach SVG konvertiert.

+
    +
  • Quell-SVGs liegen für die Provenienz in src/assets/brand/; die extrahierten Pfaddaten liegen in src/components/heroFigures.js (ladyMint, ladyWhite, waterfall).
    • +
  • Dunkle Kontur entfernt — der #006648-Konturton des Markenicons entfällt; die Figuren rendern als flache Mint-Silhouetten, passend zur etablierten Splash-Ästhetik. Mint-Töne: Frau #72c1ad, Wasserfall #6eceb2; Natron-Handvoll #ffffff.
    • +
  • Komposition — gemeinsame 0 0 2760 3624-viewBox: die Frau am Ursprung (nativ 1828×3624), der Wasserfall halb skaliert (scale(0.5)) rechts von ihr und vertikal zentriert zu ihr (translate(1793,1310)).
    • +
  • Animation unverändert — gleiche Choreografie/gleiches Timing: die Frau gleitet von links herein (left-m), der Wasserfall von rechts (right-m), das weiße Natron blendet ein, sobald sie gelandet ist (mound-m), Tagline + SINCE 1881 zuletzt; gleiche Edge-Feather-Maske und gleiche Reduced-Motion-Behandlung.
    • +
+
ℹ️

Nebeneffekt: der Chunk der Startseite schrumpfte von ~214 KB → ~70 KB, weil die neue heroFigures.js (~57 KB) den viel größeren handgezeichneten splashPaths.js-Import ersetzt. splashPaths.js / SplashIntro.vue bleiben nur als ungenutztes Legacy erhalten.

+

Auf der Website ansehen

+
+
+ + +
+
§14

Produktbild — 250 g Großpackung-Box umgefärbt

+
public/products/kaiser-natron-pulver-250-g-grosspackung.webpdist/products/…
+
+

Das Produktfoto der 250 g-Box hatte ein gedämpftes, grau-tannengrünes Grün, das nicht zum helleren Markengrün der anderen Kaiser-Natron-Pulverpackungen passte (z. B. das 50 g-Sachet public/products/kaiser-natron-pulver-50-g-beutel.webp). Es wurde durch ein aktualisiertes Box-Render mit dem korrekten lebendigen Markengrün ersetzt (die dunkelgrünen 3D-Seitenflächen und das rote untere Band bleiben erhalten).

+
    +
  • Wo Produktbilder liegen: public/products/*.webp (als statische Assets ausgeliefert; der Build spiegelt sie nach dist/products/*.webp). Konvention: transparentes RGBA, ~1200 px hoch.
    • +
  • Der Ersatz wurde als 939×1200 transparentes PNG geliefert und direkt als WebP gespeichert (quality 92, keine Skalierung nötig — entspricht bereits den Originalmaßen), sodass Kanten/Text scharf bleiben.
    • +
+

Auf der Website ansehen

+
+
+ + +
+
§15

Design-System-Doku-Seite

+
src/pages/design/ColorsSection.vue
+
+

Die neuen Tokens accent-fill, accent-fill-hover, accent-fill-ink wurden der Farbmuster-Referenz hinzugefügt, damit die In-App-Design-System-Seite akkurat bleibt.

+

In /design öffnen

+
+
+ + +
+
§16

Markenname — ®-Marke + Bindestrich-Durchgang

+
src/i18n/messages.jssrc/api/products.jssrc/design-system/components/Logo.vuesrc/design-system/components/Navbar.vue
+
+

Der Markenname wird jetzt durchgängig Kaiser-Natron® geschrieben — mit Bindestrich und ®-Zeichen — bei jeder sichtbaren Erwähnung. Zwei Probleme wurden behoben:

+
    +
  • Fehlendes ® — Display-Headlines, CTAs, die Bundle-Positionslisten und das Produkt-Feld brand trugen keine Markenkennzeichnung. (Der lange Kaiserhacks-Rezepttext und die title-Felder der Produkte hatten bereits Kaiser-Natron® und blieben unverändert.)
    • +
  • Schreibweisen-Drift — die englische Locale (und eine deutsche Headline) verwendeten das nicht getrennte Kaiser Natron. Alle wurden auf die Bindestrich-Form vereinheitlicht.
    • +
+ + + + + + + + +
DateiWas sich änderte
src/i18n/messages.jsshop.headline, ds.hero.headline.a, home.banner.sub, home.brand.headline.a, home.teaser.cta und die bundle.*.items.*-Listen — de und en — lauten jetzt Kaiser-Natron®
src/api/products.jsbrand: 'Kaiser-Natron' → 'Kaiser-Natron®' (alle 11 Produkte; in den Suchergebnissen über Search.vue angezeigt)
src/design-system/components/Logo.vuestandardmäßiges barrierefreies title-Prop 'Kaiser Natron' → 'Kaiser-Natron®'
src/design-system/components/Navbar.vueLogo-Link-aria-label 'Kaiser Natron home' → 'Kaiser-Natron home'
+
ℹ️

Nicht angefasst: generische Zutaten-Bezüge („Natron“, „Natronwasser“, „Natron-basierte …“) — die meinen den Stoff, nicht die Marke, und tragen daher kein ®. Bild-alt-Text behält den schlichten Bindestrich-Namen (nicht auf dem Bildschirm sichtbar).

+

Auf der Website ansehen

+
+
+ + +
+
§17

Hero-Headline-Text — Vielseitigkeit, nicht „Glanz“

+
src/i18n/messages.js
+
+

Die Produkt-Hero-Headline (ds.hero.headline.*, de + en) wurde von einer generischen Reinigungs-Glanz-Zeile zur eigenen Vielseitigkeits-Stimme der Marke umformuliert (entnommen aus kaiser-natron.de — „Die Verwendungsmöglichkeiten … sind beinah grenzenlos“). Die dreiteilige Aufteilung (a / betontes em / b) ist unverändert; nur die Wörter haben sich geändert.

+ 
DE  "Kaiser-Natron®  für alles  was glänzen soll."
+ →  "Kaiser-Natron®  für fast  alles im Alltag."
+
+EN  "Kaiser-Natron®  for everything  that should shine."
+ →  "Kaiser-Natron®  for almost  anything at home."
+

Auf der Website ansehen

+
+
+ + +
+
§18

Bundle-Artwork — „AI Edited“-Hinweis (L5 + L6)

+
src/api/bundles.jsBundleCard.vueBundles.vuesrc/pages/HomePage.vuesrc/pages/BundlePage.vue
+
+

Die Bundle-Bilder sind KI-komponiert. Statt sie zu ersetzen, ist jedes nun mit einer kleinen, dezenten „AI Edited“-Beschriftung unten rechts im Bild markiert, sodass der KI-Ursprung offengelegt wird. Es ist datengesteuert, verschwindet also automatisch, sobald echte Fotografie ein bestimmtes Bild ersetzt.

+
    +
  • bundles.js — jeder Bundle-Datensatz erhält aiEdited: true.
    • +
  • BundleCard.vue — neues aiEdited-Boolean-Prop; wenn true, rendert es das Overlay-Span im Medienbereich (sowohl im Card-Link- als auch im Plain-Media-Zweig).
    • +
  • Bundles.vue — übergibt :ai-edited="bundle.aiEdited" an alle vier BundleCard-Instanzen (mobil + Raster + Sidebar + Karussell).
    • +
  • HomePage.vue / BundlePage.vue — reichen aiEdited bis zu den gerenderten Datensätzen durch; BundlePage rendert dasselbe Overlay auf seinem großen Hero-Bild (Desktop + mobil).
    • +
+ 
<span class="pointer-events-none absolute bottom-0 right-0 z-[1] px-2 py-0.5
+  text-[10px] font-medium uppercase tracking-label text-white/55
+  drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]">AI Edited</span>
+
ℹ️

Setze das aiEdited: false eines Bundles (oder entferne es) in bundles.js, um das Badge zu entfernen, sobald sein Bild ein echtes Foto ist.

+

Auf der Website ansehen

+
+
+ + +
+
§19

Revitalization-Abschnitt — Animationsreihe + CTA entfernt (L10)

+
src/pages/HomePage.vue
+
+

Der Revitalization-Abschnitt wurde zurückgestutzt. Vollständig entfernt:

+
    +
  • die Drei-Säulen-Feature-Reihe mit den rotierenden Orbit-Animationen (die Emoji-Icons ⚗️💊🌿 waren off-brand; der Markeninhaber wollte die ganze Reihe weg haben), und
    • +
  • der „Early Access“-CTA-Button (revit.notifyCta — „Get early access“ / „Early Access sichern“).
    • +
+

Dies geschieht an der Verwendungsstelle, nicht in der Komponente: revitCopy übergibt nicht mehr features oder notifyCta, und die Bindings :features / :notify-cta / @notify (sowie der verwaiste onRevitNotify-Handler) wurden entfernt. Der Abschnitt rendert jetzt nur Eyebrow + Headline + Sub.

+

Revitalization.vue ist unverändert und weiterhin wiederverwendbar — seine Guards v-if="features.length" und v-if="notifyCta" rendern einfach nichts, wenn diese Props fehlen. Die ungenutzten i18n-Schlüssel revit.feature.* / revit.notifyCta bleiben erhalten (harmlos), falls der Abschnitt wiederhergestellt wird.

+

In /design öffnen

+
+
+ + +
+
§20

Shop-Seite Kategorie-Banner + Farben + Küche-Seite (L8/U4)

+
src/design-system/tokens.cssHero.vuesrc/pages/ShopPage.vuesrc/router/index.jssrc/pages/CategoryPage.vuesrc/i18n/messages.js
+
+

Auf der Shop-Seite ist der Katalog in vier Anwendungsgruppen-Abschnitte aufgeteilt, jeder durch ein vollbreites Farbbanner in der jeweiligen Anwendungsgruppen-Farbe der Marke angeführt (von kaiser-natron.de übernommen), mit diagonalen Dividern, die die Farbe in das neutrale Produktraster darunter hinein- und wieder herausführen. (Die Startseite blieb unverändert — sie behält ihren 3-Karten-ProductTeaser.)

+

Vier Abschnitte + Farben (Design-Tokens)

+

tokens.css — der alte „Haushalt“-Klumpen wurde in Clean (Reinigung) und Wash (Wäsche) aufgeteilt:

+
+
Kitchen · lime#c6d47d
+
Clean · grapefruit#eb5a61
+
Wash · plum#c15a7e
+
Care · orange#f1864c
+
+ + + + + + + + +
TokenHexAbschnittProdukte
--color-cat-kitchen#c6d47d (lime)Küche / cookPulver, Tabletten
--color-cat-clean#eb5a61 (grapefruit)Reinigung / cleanReiniger, Sprays, Entkalker
--color-cat-wash#c15a7e (plum)Wäsche / washWaschsoda, Stärke, Fleckentferner
--color-cat-care#f1864c (orange)Pflege / careBad, Fußbad, Sport
+

Tailwind v4 emittiert automatisch bg-cat-kitchen / bg-cat-clean / bg-cat-wash / bg-cat-care.

+

Produkt-Gruppierung

+

src/api/products.js — USE_CASES ist jetzt ['cook','clean','wash','care']; Wäsche wird auf die neue wash-Gruppe abgebildet (war clean). productsByUseCase gibt alle vier Buckets zurück.

+

Hero-Töne

+

Hero.vue hat kitchen / clean / wash / care-Töne. Lime behält dunklen Ink-Text; die anderen drei nehmen Cream (weißen) Text. Jeder setzt einen eyebrowColor, der inline angewendet wird (überschreibt das globale .eyebrow { color: muted }). WaveDivider.vue erhielt passende kitchen / clean / wash / care-Töne.

+

Shop-Seite

+

ShopPage.vue durchläuft die vier Use-Cases; jeder rendert WaveDivider → <Hero :tone="section.cat"> (Hero-Produkt + Mixed-Font-Heading + CTAs) → WaveDivider → ein Abschnittstitel + Produktraster. CAT_TONE bildet cook→kitchen, clean→clean, wash→wash, care→care ab; CAT_HERO_ID wählt das Headline-Produkt (Pulver / Allzweck-Spray / Daunenwasch / Bad). Ein Pro-Abschnitt-Titel (shop.section.<id>.products.title) sitzt jetzt über jedem Raster.

+

Banner-CTAs

+

Jedes Banner trägt zwei Buttons (über den Hero-#actions-Slot): „In den Warenkorb“ im Marken-Crimson (Button variant="accent", fügt das Hero-Produkt des Abschnitts hinzu) und „Mehr erfahren“ als weiß umrandeter Ghost (border-white/90 text-white, verlinkt auf die Produktseite).

+
⚠️

Das weiß umrandete „Mehr erfahren“ liest sich gut auf den gesättigten Grapefruit- / Plum- / Orange-Bannern, ist aber auf dem hellen Lime-(Kitchen-)Banner kontrastarm — eventuell ist dort eine dunkel umrandete Variante gewünscht.

+

Shop-First-Fold — halbiert

+

Der grüne Titel-Fold war min-h:calc(100svh − nav), hält aber nur ein kompaktes Titelband, sodass zu viel leeres Grün übrig blieb. Reduziert auf calc(50svh − var(--nav-h)). Eine Diagonale geht dann in ein dünnes weißes Band (h-6 md:h-10) vor dem ersten Farbbanner über, sodass der grüne Hero und das Lime-Kitchen-Banner nicht direkt aneinanderstoßen.

+

Küche-Kategorieseite (neu, getrennt von den Shop-Abschnitten)

+

Hinzugefügt zur Parität mit /haushalt + /pflege:

+
    +
  • router/index.js — neue /kueche-Route → CategoryPage { slug: 'kueche', useCase: 'cook' }.
    • +
  • CategoryPage.vue — slug-Validator erlaubt kueche; useCase erlaubt cook.
    • +
  • messages.js — vollständige category.kueche.*-Texte (de + en), gespiegelt von pflege/haushalt.
    • +
+
ℹ️

Gelöst (siehe §21). Die drei inhaltlich fertigen Kategorieseiten (/kueche, /haushalt, /pflege) sind jetzt in den Footer verdrahtet. /waesche (wash) ist absichtlich zurückgestellt, bis Marken-Texte vorliegen — der In-Page-wash-Abschnitt des Shops deckt die Wäsche in der Zwischenzeit ab.

+

Auf der Website ansehen

+
+
+ + +
+
§21

Kategorieseiten verdrahtet + Benennung an Shop-Abschnitte angeglichen

+
src/design-system/components/Footer.vuesrc/i18n/messages.js
+
+

Entscheidung. Von den vier Anwendungsgruppen werden die drei mit vollständigem Text (cook/clean/care → /kueche, /haushalt, /pflege) als eigenständige Landingpages neben den In-Page-Abschnitten des Shops behalten und aus dem Footer verlinkt. Die wash-Gruppe hat noch keine eigenständige Seite (/waesche) — zurückgestellt, bis Marken-Texte geliefert werden; der wash-Abschnitt des Shops deckt die Wäsche in der Zwischenzeit ab.

+

Footer-Links. Die exploreLinks von Footer.vue listen jetzt Shop → Küche → Haushalt → Pflege → Bundles → About auf (der /kueche-Link fehlte zuvor — die Seite war nur über die direkte URL erreichbar). Die Reihenfolge folgt der Anwendungsgruppen-Reihenfolge des Shops.

+

Benennung an den Shop angeglichen. Die Link-Labels des Footers und die Eyebrows der Kategorieseiten verwenden jetzt die schlichten Abschnittsnamen des Shops (shop.feature.*) statt der älteren beschreibenden Varianten, sodass ein Abschnitt und seine Landingpage identisch lesen:

+ + + + + + + +
Seite (Route)use-caseEyebrow + Footer-Label — DE / ENwar
/kuechecookKüche / Kitchen„Küche & Backen“ / „Kitchen & baking“
/haushaltcleanReinigung / Clean„Haushalt & Reinigung“ / „Home & cleaning“
/pflegecarePflege / Care„Pflege & Wohlbefinden“ / „Personal care & wellbeing“
+

Die Route-Slugs sind unverändert (/haushalt bedient weiterhin die clean-Gruppe); nur die sichtbaren Labels/Eyebrows wurden auf die neuen Namen umgestellt.

+

Auf der Website ansehen

+
+
+ + +
+
§22

Mitgliedschaft entfernt — Bundles haben einen Einzelpreis (U2)

+
src/api/bundles.jsBundleCard.vueBundles.vueBundlePage.vueHomePage.vuesrc/i18n/messages.jsBundleCardSection.vueBundlesSection.vuepreviews/BundlesPreview.vue
+
+

Es gibt kein Mitgliedschaftsprogramm, daher wurde jede Spur davon entfernt (der Beitritts-Button ging bereits früher in §U2; dies schließt es ab). Entscheidung: einheitlicher Einzelhandelspreis — Bundles zeigen jetzt nur noch ihren regulären Preis (z. B. €24,90); der alte niedrigere memberPrice wurde vollständig entfernt (es bleibt kein Rabatt).

+
    +
  • Daten. bundles.js — memberPrice aus allen drei Bundles gelöscht.
    • +
  • BundleCard.vue — das memberPrice-Prop, das memberLabel-Computed und die „Mitglieder: €X“-Zeile unter dem Preis entfernt.
    • +
  • Bundles.vue — alle vier :member-price-Bindings, das joinCta-Prop, das join-Emit, beide „Mitglied werden“-Buttons (gestapelt + Sidebar) und der jetzt ungenutzte Button-Import entfernt. Veraltete „why join“- / „member pitch“-Kommentare zu „why bundle“ umformuliert.
    • +
  • BundlePage.vue — das memberPriceLabel-Computed und die Mitgliederpreis-Zeile in beiden Hero-Blöcken (Desktop und mobil) entfernt.
    • +
  • HomePage.vue — memberPrice aus dem lokalisierten Bundle-Mapping entfernt.
    • +
  • Texte (messages.js). Verwaiste Schlüssel bundle.memberPrice, bundles.joinCta, bundles.card.memberPrefix gelöscht. bundles.card.priceLabel → „Preis“ / „Price“ (war „Verkaufspreis“ / „Retail price“). Der Abschnitts-Untertitel + die drei Vorteile wurden von Mitgliedschafts-Vorzügen zu Bundle-Mehrwert umgeschrieben (keine Ersparnis-Aussage, da der Preis jetzt einheitlich ist): +
      +
    • sub: „Kuratierte Sets … in einem Paket.“ / „Curated sets … in a single pack.“
      • +
    • Vorteile: Aufeinander abgestimmt · Alles für einen Bereich · In einer Lieferung (EN: Chosen to work together · Everything for one area · In a single delivery).
      • +
    • ds.bundleCard.description / ds.bundles.description aktualisiert, um die Mitgliederpreis- / Mitglieder-CTA-Erwähnungen zu entfernen.
      • +
    +
    • +
+

Das headline.em bleibt „Vorteile / Benefits“ — es liest sich nun als die Vorteile der Bundles statt als Mitgliedschafts-Vorzüge.

+

Auf der Website ansehen

+
+
+ + +
+
§23

Second-Fold-Banner-Bild — Pulver, nicht Bad (L7)

+
src/pages/HomePage.vue
+
+

Das cremefarbene Second-Fold-Banner lautet „Ein Pulver, hundert Anwendungen im Haushalt“ / „One powder, a hundred uses around the home“, zeigte aber das Bad 500 g (bath)-Produkt — und sein In-den-Warenkorb + „Mehr erfahren“-Link verwiesen ebenfalls dorthin, was der Pulver-Botschaft widersprach. Das gesamte Banner auf Pulver umgeleitet:

+
    +
  • imgBanner → /products/kaiser-natron-pulver-3.490-g-eimer.webp (der Großeimer — verstärkt visuell „hundert Anwendungen“; bewusst nicht die 250 g Großpackung, die bereits der First-Fold-Hero ist).
    • +
  • bannerProductId → kaiser-natron-pulver-3490-g-eimer, sodass der CTA das Pulver hinzufügt und „Mehr erfahren“ auf /shop/kaiser-natron-pulver-3490-g-eimer verlinkt.
    • +
  • image-alt → „Kaiser-Natron® Pulver 3.490 g Eimer“.
    • +
+

Kein neues Asset nötig — das Eimer-Bild war bereits in public/products/ ausgeliefert.

+

Auf der Website ansehen

+
+
+ + +
+
§24

Revitalization-Abschnitt von der Startseite entfernt

+
src/pages/HomePage.vueShopPage.vueCategoryPage.vueBundlePage.vueProductPage.vueKaiserhacksPage.vueLoginPage.vueRegisterPage.vueLegalPage.vue
+
+

Der Markeninhaber markierte den Namen „Revitalization Center“ + Icons als off-brand. Der Abschnitt wurde vorerst von der öffentlichen Seite entfernt:

+
    +
  • HomePage.vue — der <Revitalization>-Block und die zwei diagonalen SVG-Divider, die ihn einrahmten, entfernt (das cremefarbene Banner fließt jetzt direkt in den cremefarbenen About-Abschnitt über), plus der Revitalization-Import und das revitCopy-Computed.
    • +
  • Den jetzt toten Eintrag { key: 'nav.revitalization', href: '/#revitalize' } aus dem Nav-Array jeder Seite gestrippt (9 Dateien), sodass nichts mehr auf den fehlenden Anchor verlinkt.
    • +
+

In Reserve behalten (nicht gelöscht): Revitalization.vue, seine Design-System-Doku-Seite, die revit.*-i18n-Schlüssel und die /design/preview/revitalization-Route — sodass der Abschnitt (mit korrigiertem Namen) durch erneutes Hinzufügen des Imports, von revitCopy, des Render-Blocks und der Nav-Einträge wiederhergestellt werden kann.

+

Auf der Website ansehen

+
+
+ + +
+
§25

Sport-Profi zu Wäsche umkategorisiert

+
src/api/products.js
+
+

Markeninhaber-Review: Sport Profi ist ein Wäscheprodukt und gehört unter Haushalt, nicht unter Baden & Pflege. In der Vier-Gruppen-Taxonomie ist Wäsche = wash, daher änderte sich USE_CASE_BY_CATEGORY.Sport von 'care' → 'wash'. Das Produkt kaiser-natron-sport-profi-250-ml erscheint jetzt im Wäsche / wash-Abschnitt (plum) statt unter Pflege / care. Der Doc-Kommentar wurde entsprechend aktualisiert.

+

Auf der Website ansehen

+
+
+ + +
+
§26

„Das Original aus Österreich“ entfernt (G1)

+
src/i18n/messages.js
+
+

Markeninhaber-Review: die Aussage „Original aus Österreich“ ist nicht zutreffend. Der einleitende Satz wurde aus footer.tagline (DE + EN) entfernt; die Tagline beginnt jetzt mit „Reines Natron für Küche, Haushalt und Pflege …“ / „Pure sodium bicarbonate for the kitchen, the home, and personal care …“.

+
ℹ️

Andere Österreich-bezogene Strings bleiben bestehen und sind separate Entscheidungen, nicht Teil dieser Änderung: footer.madeIn / product.prop.made-in-austria („In Österreich abgefüllt“ / „Bottled in Austria“) und die Wiener Adresse im Impressum/Datenschutz. Beim Nutzer nachfragen, ob die Herkunftskorrektur auf diese ausgeweitet werden soll.

+

Auf der Website ansehen

+
+
+ + +
+
§27

Shop-Hero — schräge Kategorie-Sprungbuttons + weiße Lücke entfernt

+
src/pages/ShopPage.vue
+
+

Sprungbuttons. Unter dem Titel + Sub des Shop-Heros scrollt eine Reihe von vier schrägen Parallelogramm-Buttons (einer pro Anwendungsgruppe, jeder mit seiner eigenen Kategorie-Farbe gefüllt) sanft zum passenden Abschnitt:

+
+
Küche / Kitchendark ink label
+
Reinigung / Cleanwhite label
+
Wäsche / Washwhite label
+
Pflege / Carewhite label
+
+
    +
  • Gerendert durch das Durchlaufen von sections; das Label ist section.feature.
    • +
  • Form: -skew-x-12 auf dem Button mit einem Gegen-Skew skew-x-12 auf dem inneren <span>, damit der Text aufrecht bleibt — greift die schräge (Soulmates-)CI auf.
    • +
  • Farb-Mapping CAT_BTN: bg-cat-kitchen text-brand (Lime ist hell → dunkles Ink), die anderen drei bg-cat-* text-white.
    • +
  • scrollToSection(id) ruft el.scrollIntoView({ behavior: 'smooth' }) auf; das bestehende scroll-mt jedes Abschnitts hält das Ziel knapp unter der Sticky-Nav.
    • +
+

Weiße Lücke entfernt. Das dünne weiße Band (-mt-px h-6 md:h-10 bg-cream) und der vorangehende WaveDivider from="brand" to="cream" — in §20 hinzugefügt — sind weg. Der grüne Hero fließt jetzt über eine einzige Diagonale direkt in das erste Farbbanner: die Abschnittsschleife ist (section, i) und der erste Divider ist :from="i === 0 ? 'brand' : 'cream'".

+

Auf der Website ansehen

+
+
+ + +
+
§28

/design-Showcase auf das Rebrand aktualisiert

+
design/ColorsSection.vueTypographySection.vueHeroSection.vuepreviews/HeroPreview.vuei18n/messages.jstokens.cssHero.vueSearch.vueStripePaymentMount.vueExpressCheckoutMount.vue
+
+

Der /design-Styleguide beschrieb noch das alte Design (Fraunces + DM Sans, „pine green“, warmgelbe CTAs, drei Hero-Töne) und ließ die neuen Tokens aus. Alle 26 Abschnitte geprüft und jeden Drift korrigiert:

+
    +
  • Farben. ColorsSection zeigt jetzt das Mint-highlight, die vier Kategorie-Farben (cat-kitchen/clean/wash/care) sowie brand-float und cream-dark. Neue Gruppentitel ds.colors.group.highlight / .categories; ds.colors.description umgeschrieben.
    • +
  • Typografie. Beide Karten lesen jetzt Zeitung (war Fraunces/DM Sans); ein fluider Headline-Scale-Block hinzugefügt (text-display / text-headline-lg / text-headline-md). Beschreibungen auf die einzige Zeitung-Familie umgeschrieben.
    • +
  • Hero. Die vier Kategorie-Banner-Töne (kitchen/clean/wash/care) zum Ton-Umschalter und zum HeroPreview-Validator hinzugefügt; ds.hero.description „three surface tones“ → seven.
    • +
  • Buttons. ds.buttons.description korrigiert — accent ist crimson (war „warm-yellow“), „pine-green“ → „brand-green“.
    • +
  • Revitalization. Die Showcase-Beschreibung weist darauf hin, dass es in Reserve liegt / nicht auf der Live-Seite verwendet wird (in §24 entfernt).
    • +
  • Veraltete Referenzen ausgeräumt. tokens.css-Header neu geschrieben; Checkout-Font in den Stripe- / Express-Mounts von hartkodiertem DM Sans → den --font-sans-Stack geändert; „Fraunces“- / „pine green“-Kommentare korrigiert.
    • +
+

In /design öffnen

+
+
+ + +
+
★

Schnellreferenz — die zwei neuen Farben

+
+
+
Crimson#cc0230
+
Mint#6eceb2
+
White#ffffff
+
+ 
Crimson  #cc0230   — all buttons / CTAs / solid pills (with #ffffff text)
+Mint     #6eceb2   — nav tab + footer link hover/active highlight
+White    #ffffff   — page backgrounds (cream + surface) and button text on green
+

In /design öffnen

+
+
+ +
+ Kaiser-Natron® — Entwickler-Änderungsprotokoll + 28 dokumentierte Änderungen · feat/shop-category-sections +
+ +
+ + diff --git a/dist/dev-doc.html b/dist/dev-doc.html index 743cb4c..e24b5f2 100644 --- a/dist/dev-doc.html +++ b/dist/dev-doc.html @@ -329,6 +329,7 @@

Kaiser-Natron® restyle —
every change, documented

A plain-language summary of every visual change in this restyle pass — the exact file, what changed, and the CSS / Tailwind classes involved. Organised by theme so you can review one concern at a time.

Updated 24 June 2026 · Branch feat/shop-category-sections · 28 changes

+

Deutsch ↗

diff --git a/dist/review-doc-de.html b/dist/review-doc-de.html new file mode 100644 index 0000000..0adcb4a --- /dev/null +++ b/dist/review-doc-de.html @@ -0,0 +1,425 @@ + + + + + +Kaiser-Natron® — Markenreview, Status + + + + +
+
+

Markenreview · Umsetzungsstand

+

Kaiser-Natron® Website-Review —
was erledigt ist, was als Nächstes kommt

+

Jeder Punkt aus dem Markeninhaber-Review, abgeglichen mit dem aktuellen Build. Jeder Eintrag trägt seinen tatsächlichen Status und eine kurze Notiz dazu, was geändert wurde oder was noch benötigt wird.

+

Erstellt am 24. Juni 2026 · Branch feat/shop-category-sections · 28 Review-Punkte · English ↗

+
+
+ +
+ +
+
18
Erledigt
+
2
Geprüft / beibehalten
+
2
In Arbeit
+
6
Eingabe nötig
+
+ +
+ Erledigt — umgesetzt & auf dem Branch + Geprüft — auf Ihre Entscheidung hin beibehalten / bestätigt + In Arbeit — teilweise erledigt + Eingabe nötig — Rechtstext, Inhalt oder eine Entscheidung +
+ + +
+

Layout 15 Punkte

+ +
+
Erledigt +

Das Gesamtlayout passt nicht zur Markenidentität (CI) von Kaiser-Natron®.

+

An die CI angepasst: die offizielle Markenpalette, die Schrift Zeitung, die schrägen (Soulmates-)Trennlinien und das offizielle Artwork sind alle vorhanden. Die ganzheitliche Konsistenz bleibt als Leitlinie für jede Änderung bestehen.

+
+ +
+
Geprüft +

Das Kaiser-Natron®-Logo auf der Startseite ist viel zu klein und nicht prominent genug.

+

In der aktuellen Größe beibehalten auf Ihre Entscheidung in dieser Sitzung hin — jederzeit erneut anpassbar, falls Sie es vergrößern möchten.

+
+ +
+
Erledigt +

Die Quelle wurde verfälscht dargestellt (Berge, Hebes Haar, der „Berg“ neben ihrem Kopf, der Bach). Alle Illustrationen sollten dem originalen Kaiser-Natron®-Design entsprechen.

+

Marken-Hero neu aufgebaut mit dem offiziellen Artwork von Hebe + Wasserfall, das die verzerrte Komposition ersetzt.

+
+ +
+
Erledigt +

Falsche Schrift und falsche Farbpalette.

+

Korrigiert: selbst gehostete Schrift Zeitung und die offizielle Markenpalette (Grün #006548, Karmesinrot, Mint, Gold) durchgängig.

+
+ +
+
Erledigt +

Das schräge Soulmates-Konzept geht verloren; wellenförmige Elemente passen nicht zur Struktur.

+

Wellen entfernt. Alle Abschnitts-Trennlinien sind nun schräg/diagonal und greifen die Geometrie des Logos auf, um die Markenwiedererkennung wiederherzustellen.

+
+ +
+
Erledigt +

Das Bild der 250-g-Packung: Hintergrundfarbe und Produktbild sind visuell nicht aufeinander abgestimmt.

+

Gelöst: das Artwork der 250-g-Schachtel wurde in das Markengrün umgefärbt, sodass Produkt und Hintergrund zusammenpassen.

+
+ +
+
Erledigt +

„…für alles, was glänzen soll. Reinigt, backt und neutralisiert…“ passt nicht zum Tone of Voice.

+

Neu formuliert in Richtung Vielseitigkeit — „Kaiser-Natron® für fast alles im Alltag“ / „…for almost anything at home“, aus der Live-Markensprache übernommen.

+
+ +
+
Erledigt +

Unter „Bundles & Benefits“: KI-generierte Bilder müssen ab August mit einem Symbol als KI-Inhalt gekennzeichnet werden.

+

Gekennzeichnet: ein dezenter Hinweis „AI Edited“ sitzt nun auf jedem KI-komponierten Bundle-Bild. Er schaltet sich automatisch ab, sobald echte Fotos sie ersetzen.

+
+ +
+
In Arbeit +

Die Produktdarstellungen in den KI-Bildern sind ungenau; als Hersteller würde ich KI-Bilder ganz vermeiden.

+

Vorerst gekennzeichnet mit dem AI-Edited-Badge. Die vollständige Entfernung ist vorbereitet und einsatzbereit — es braucht nur Ihre echte Produktfotografie zum Einsetzen.

+
+ +
+
Erledigt +

„Ein Pulver, hundert Anwendungen…“ passt nicht zum darüber gezeigten Badbild; das Pulverprodukt sollte gezeigt werden.

+

In dieser Sitzung behoben: das Banner zeigt nun das Pulver (den Großgebinde-Eimer), und sein „in den Warenkorb“ / „mehr erfahren“ verweist auf dieses Pulverprodukt.

+
+ +
+
Erledigt +

Die Kategorien „Körperpflege“, „Haushalt“ und „Küche“ sind durcheinander, und „Küche“ ist praktisch verloren gegangen.

+

Wiederhergestellt: der Shop ist in vier klare Kategoriebereiche neu aufgebaut — Küche, Reinigung, Wäsche, Pflege — und Küche hat nun einen eigenen Bereich und eine eigenständige Seite.

+
+ +
+
Erledigt +

Das Farbcodierungskonzept der Produktgruppen ist verloren gegangen. +

+

Wiederhergestellt aus den markeneigenen Gruppenfarben — Küche (Limette), Reinigung (Grapefruit), Wäsche (Pflaume), Pflege (Orange) — als vollbreite Banner und Trennlinien.

+
+ +
+
Erledigt +

Die Icons und der Name des „Revitalization Center“ passen nicht zur Markenidentität.

+

Bereich vorerst entfernt von der Website, sodass weder die markenfremden Icons noch der Name erscheinen. Die Komponente bleibt in Reserve und kann jederzeit mit der korrekten Benennung zurückkehren, wenn Sie es wünschen.

+
+ +
+
Erledigt +

Das ®-Symbol fehlt an mehreren Stellen, und die Schreibweise sollte überprüft werden.

+

Geprüft: ® wurde zu jeder sichtbaren Nennung hinzugefügt und der Name durchgängig als „Kaiser-Natron®“ mit Bindestrich geschrieben.

+
+ +
+
Erledigt +

Das Kaiser-Natron®-Logo sollte weiß sein.

+

Als in Ordnung bestätigt: das Logo wird auf grünen/dunklen Flächen weiß und auf hellen Flächen in Markengrün dargestellt — das jeweils richtige Verhalten im Kontext. So freigegeben.

+
+
+ + +
+

Benutzeroberfläche 6 Punkte

+ +
+
Bestätigt +

Fehlendes Navigationsmenü in der mobilen Ansicht.

+

Die Navigation ist vorhanden auf Mobilgeräten (im aktuellen Build geprüft). Falls ein bestimmtes Gerät sie bei Ihnen ausgeblendet hat, senden Sie uns einen Screenshot und wir gehen dem nach.

+
+ +
+
Erledigt +

Die Animation von Hebe ist meiner Meinung nach nicht gelungen.

+

Aktualisiert: die Intro wurde rund um das offizielle Artwork von Hebe + Wasserfall überarbeitet und greift damit das Anliegen zur Animation auf.

+
+ +
+
Erledigt +

„Bundles & Benefits“: „Als Mitglied…“ — Mitglied wovon? Keine Information, wie man eines wird oder was es kostet.

+

Mitgliedschaft vollständig entfernt in dieser Sitzung — der Beitritts-Button, der „Mitgliederpreis“ und alle Mitglieder-Formulierungen sind verschwunden. Bundles zeigen nun einen einzigen Preis mit schlichtem Text zum Bundle-Wert.

+
+ +
+
In Arbeit +

Die Seitenstruktur ergibt keinen Sinn: Drei Klassiker → 250-g-Packung → Bundles → Badbild mit allgemeinem Text. Die 250-g-Packung und das Badbild sind falsch platziert.

+

Das Badbild ist gelöst (jetzt Pulver, siehe oben). Die Neuanordnung der Abschnitte ist der offene Teil — Ihre vollständige Notiz hier gibt uns genau das, was nötig ist, und sie ist als nächste Layout-Aufgabe eingeplant.

+
+ +
+
Erledigt +

Der Shop sollte nach Produktkategorien organisiert sein. Sport Profi ist ein Wäscheprodukt und gehört unter „Haushalt“, nicht unter „Baden & Pflege“.

+

Der Shop ist nach Kategorie organisiert, und Sport Profi ist nun unter Wäsche (Haushalt) einsortiert, nicht mehr unter Pflege.

+
+ +
+
Eingabe nötig +

Die Produkte von Holste und Linda haben keine Produktbeschreibungen.

+

Diese stehen nicht auf der Kaiser-Natron®-Website, daher muss der Text von Ihnen kommen (oder genehmigen Sie, dass wir Platzhalter zur Prüfung entwerfen).

+
+
+ + +
+

Allgemein & Rechtliches 7 Punkte

+ +
+
Erledigt +

„Das Original aus Österreich.“ Das ist meiner Meinung nach nicht zutreffend.

+

Entfernt: die Aussage „Original aus Österreich“ wurde aus dem Footer-Slogan (DE + EN) gelöscht. Der Slogan handelt nun schlicht von reinem Natron für Küche, Haushalt und Pflege.

+
+ +
+
Eingabe nötig +

Allgemeine Geschäftsbedingungen (AGB) fehlen.

+

Die Seitenstruktur kann sofort angelegt werden; der Rechtstext muss von Ihnen kommen.

+
+ +
+
Eingabe nötig +

Widerruf / Widerrufsrecht fehlt. Ein Kündigungsbutton ist seit Juni 2026 verpflichtend.

+

Wir können den „Vertrag kündigen“-Button + Ablauf jetzt mit Platzhaltertext aufbauen; die verbindliche Rechtsformulierung kommt von Ihnen.

+
+ +
+
Eingabe nötig +

Versandinformationen fehlen.

+

Benötigt Ihre Versandbedingungen; wir platzieren sie im Checkout und auf einer eigenen Seite.

+
+ +
+
Eingabe nötig +

Lieferkosten fehlen.

+

Benötigt Ihre Tarife (pauschal / gestaffelt / kostenfrei ab Schwellenwert) zur Anzeige im Warenkorb und Checkout.

+
+ +
+
Erledigt +

Zahlungsoptionen fehlen.

+

Nicht fehlend — die Zahlungsoptionen sind bereits auf der Website vorhanden, hier ist also keine Änderung nötig.

+
+ +
+
Eingabe nötig +

Transparenz: Die Website scheint sich als offizieller Hersteller zu präsentieren, während das Impressum etwas anderes aussagt — das könnte Kunden verwirren.

+

Dies ist eine Positionierungsentscheidung für Sie (offizieller Hersteller vs. Wiederverkäufer). Sobald entschieden, machen wir die Darstellung über die gesamte Website und das Impressum hinweg konsistent.

+
+
+ +
+ Kaiser-Natron® — Umsetzungsstand des Markenreviews + 18 erledigt · 2 beibehalten · 2 in Arbeit · 6 warten auf Eingabe +
+ +
+ + diff --git a/dist/review-doc.html b/dist/review-doc.html index 1021299..a9032a4 100644 --- a/dist/review-doc.html +++ b/dist/review-doc.html @@ -212,6 +212,7 @@

Kaiser-Natron® website review —
what's done, what's next

Every point from the brand-owner review, tracked against the current build. Each item carries its real status and a short note on what was changed or what's still needed.

Prepared 24 June 2026 · Branch feat/shop-category-sections · 28 review points

+

Deutsch ↗

diff --git a/dist/simple-doc-de.html b/dist/simple-doc-de.html new file mode 100644 index 0000000..6f8d54a --- /dev/null +++ b/dist/simple-doc-de.html @@ -0,0 +1,313 @@ + + + + + +Kaiser-Natron® — Was sich geändert hat (Überblick in einfacher Sprache) + + + + +
+
+

Überblick in einfacher Sprache

+

Kaiser-Natron® —
was sich geändert hat, einfach erklärt

+

Eine nicht-technische Zusammenfassung der gestalterischen und inhaltlichen Änderungen an der Website. Die ausführliche Entwicklerversion finden Sie unter /dev-doc-de — das ist dieselbe Geschichte, nur ohne den Code.

+

Aktualisiert am 24. Juni 2026 · Branch feat/shop-category-sections

+

English ↗

+
+
+ +
+ +
+ Alles Folgende rückt die Website näher an die etablierte Marke Kaiser-Natron® heran — die offizielle Farbpalette, die Schrift und das kantige Design — anstatt einen neuen Look einzuführen. +
+ +
+

Erscheinungsbild

+
    +
  • Farben. Die Website verwendet jetzt die offizielle Markenpalette: das tiefe Markengrün #006548, ein kräftiges Rot #cc0230 für alles Anklickbare (Buttons, „In den Warenkorb“) und ein sanftes Mint #6eceb2, das Links aufleuchten lässt, wenn Sie mit der Maus darüberfahren. Das warme Gelb #e9c84b dient jetzt nur noch als Hervorhebung von Text auf Grün. (Vollständige Übersicht ganz unten.)
    Auf der Website ansehen
    • +
  • Hintergründe sind weiß. Die Seiten liegen jetzt auf sauberem Weiß #ffffff statt auf den alten getönten Flächen, sodass Produkte und Text besser hervortreten.
    Auf der Website ansehen
    • +
  • Markenschrift. Überschriften und Text verwenden die markeneigene Schrift „Zeitung“, die von der Website selbst gehostet wird (eine lokale .woff2-Datei, nicht von Google geliehen), damit sie immer gleich aussieht und schnell lädt. Eine Schriftfamilie für alles — Überschriften und Fließtext.
    Auf der Website ansehen
    • +
  • Diagonale Abschnittstrenner. Die welligen Linien zwischen den farbigen Bändern wurden durch saubere diagonale Kanten ersetzt.
    Auf der Website ansehen
    • +
  • Buttons. Alle Buttons haben jetzt einen einheitlichen Stil — rot mit weißer Schrift. Die großen „Handlungsaufforderungs“-Buttons auf den Hero-Bannern heben sich klar ab.
    Auf der Website ansehen
    • +
  • Gelbe Hervorhebung entfernt. Überschriften verwenden nicht mehr den alten gelben Akzent; sie wirken jetzt klarer.
    Auf der Website ansehen
    • +
+
+ +
+

Markendetails

+
    +
  • Markenzeichen & Schreibweise. Jede sichtbare Nennung lautet jetzt Kaiser-Natron® — mit Bindestrich und dem Zeichen ®.
    Auf der Website ansehen
    • +
  • Hero-Überschrift. Der einleitende Satz betont jetzt die Vielseitigkeit — „Kaiser-Natron® für fast alles im Haushalt“ — statt der alten Formulierung „das glänzen soll“.
    Auf der Website ansehen
    • +
  • Intro-Bild. Das Marken-Intro verwendet das offizielle Hebe- und Wasserfall-Motiv.
    Auf der Website ansehen
    • +
  • Bild der 250-g-Packung. Das große Packungsbild wurde auf das korrekte Markengrün umgefärbt, sodass es nicht mehr mit seinem Hintergrund kollidiert.
    Auf der Website ansehen
    • +
  • Banner „Ein Pulver, hundert Anwendungen“. Dieses Banner zeigte früher das Bade-Produkt, was nicht zur Botschaft passte. Jetzt zeigt es das Pulver (den großen Eimer), und seine Buttons fügen dieses Pulverprodukt hinzu bzw. verlinken darauf.
    Auf der Website ansehen
    • +
  • Logo & Suche. Die Preise im Such-Dropdown sind jetzt weiß, damit sie auf der grünen Leiste lesbar sind.
    Auf der Website ansehen
    • +
+
+ +
+

Ehrlichkeit & Inhalt

+
    +
  • Hinweis „KI-bearbeitet“ auf Bundle-Bildern. Die Bundle-Fotos, die mit KI-Unterstützung erstellt wurden, tragen jetzt eine kleine, ehrliche Bildunterschrift „KI-bearbeitet“. (Diese kann ausgeblendet werden, sobald echte Fotografien sie ersetzen.)
    Auf der Website ansehen
    • +
  • Revitalisierungs-Bereich entfernt. Der nicht markenkonforme Bereich „Revitalization Center“ (Icons + Name, die der Inhaber beanstandet hat) wurde vorerst von der Website genommen. Er bleibt in Reserve und kann später mit korrigiertem Namen zurückkehren.
    Auf der Website ansehen
    • +
  • „Das Original aus Österreich“ entfernt. Diese Aussage ist aus dem Footer-Slogan (deutsch + englisch) verschwunden, der jetzt nur noch reines Natron für Küche, Haushalt und Pflege beschreibt.
    Auf der Website ansehen
    • +
  • Mitgliedschaft vollständig entfernt. Es gibt kein Mitgliedschaftsprogramm, daher ist jede Spur davon verschwunden: der Button „Mitglied werden“, der niedrigere „Mitgliederpreis“ und die Formulierungen zu Mitgliedervorteilen. Bundles zeigen jetzt einen einzigen Preis, den alle zahlen, und der Abschnitt erklärt, warum ein Bundle praktisch ist (zusammengestellte Sets, alles für einen Bereich, eine Lieferung) statt Mitglieder-Ersparnissen.
    Auf der Website ansehen
    • +
+
+ +
+

Der Shop, nach Anwendung

+
    +
  • + Vier farblich gekennzeichnete Bereiche. Der Shop ist jetzt danach gegliedert, was Sie gerade tun, jeweils mit eigener Markenfarbe: +
    +
    Küche / Kitchen — Limettengrün #c6d47d (Backen, Kochen, Verdauung)
    +
    Reinigung / Clean — Grapefruitrot #eb5a61 (Haushaltsreinigung)
    +
    Wäsche / Wash — Pflaume #c15a7e (Wäsche & Textilpflege)
    +
    Pflege / Care — Orange #f1864c (Bad, Körper)
    +
    + Auf der Website ansehen +
    • +
  • Banner. Jeder Bereich beginnt mit einem farbigen Banner über die volle Breite, das sein Top-Produkt zeigt, mit einem Button „In den Warenkorb“ und einem Button „Mehr erfahren“.
    Auf der Website ansehen
    • +
  • Schnellzugriff auf Kategorien. Unter der Hauptüberschrift des Shops gibt es jetzt eine Reihe abgeschrägter Buttons — einen pro Kategorie, jeder in seiner eigenen Farbe —, die Sie sanft zum jeweiligen Bereich scrollen. Der grüne Kopfbereich geht jetzt nahtlos in den ersten farbigen Bereich über (die kleine weiße Lücke ist verschwunden).
    Auf der Website ansehen
    • +
  • Sport Profi zur Wäsche verschoben. Es ist ein Wäscheprodukt und steht daher jetzt unter Wäsche / Wash statt unter Pflege.
    Auf der Website ansehen
    • +
+
+ +
+

Kategorieseiten

+
    +
  • Drei eigene Seiten sind jetzt erreichbar über den Footer: Küche, Reinigung (Haushalt) und Pflege — jede eine ausführlichere Landingpage mit eigenen Produkten, Vorteilen und Handlungsaufforderung.
    Auf der Website ansehen
    • +
  • Einheitliche Bezeichnungen. Diese Seiten und ihre Footer-Links verwenden jetzt dieselben Kurzbezeichnungen wie die Shop-Bereiche, sodass alles einheitlich klingt.
    Auf der Website ansehen
    • +
  • Die Seite Wäsche / Wash ist zurückgestellt, bis die Markentexte dafür vorliegen — die Wäsche ist in der Zwischenzeit bereits durch den Wash-Bereich des Shops abgedeckt.
    Auf der Website ansehen
    • +
+
+ +
+

Kurzreferenz (für den Entwickler)

+

Das Designsystem öffnen

+

Die genauen Werte, falls sie hilfreich sind — nichts, worauf Sie reagieren müssten.

+
+
Markengrün#006548
+
Rot — Buttons/CTAs#cc0230
+
Mint — Link-Hover#6eceb2
+
Gelb — Hervorhebung auf Grün#e9c84b
+
Weiß — Hintergründe#ffffff
+
Küche — Limette#c6d47d
+
Reinigung — Grapefruit#eb5a61
+
Wäsche — Pflaume#c15a7e
+
Pflege — Orange#f1864c
+
+
    +
  • Schrift: Zeitung (selbst gehostete .woff2), eine Familie für Überschriften und Fließtext.
    • +
  • Buttons: vollständig abgerundete „Pillen“-Form; rote Füllung mit weißer Schrift.
    • +
  • Trenner: gerade diagonale Kanten zwischen den farbigen Bändern (keine Wellen).
    • +
  • Vollständige technische Details: siehe /dev-doc-de.
    • +
+
+ +
+

Warten noch auf eine Entscheidung (Inhaltsverantwortliche)

+
    +
  • Verbleibende Herkunftsangaben. Die Zeile „Original aus Österreich“ ist weg, aber einige Erwähnungen von „abgefüllt in Österreich“ sowie die Wiener Impressumsadresse bleiben bestehen. Sagen Sie uns Bescheid, ob die Korrektur auch darauf ausgeweitet werden soll.
    • +
  • Produktbeschreibungen Holste & Linda. Diese stehen nicht auf der Markenseite, daher müssen die Texte von Ihnen kommen.
    • +
  • Landingpage Wäsche / Wash. Liefern Sie Texte, wenn Sie eine eigene Seite wünschen.
    • +
  • Rechtliche Seiten. AGB, Widerruf/Stornierung, Versand, Lieferkosten und der Transparenzhinweis Hersteller vs. Wiederverkäufer.
    • +
+
+ +
+ Kaiser-Natron® — Änderungsübersicht in einfacher Sprache + Ausführliche Version: /dev-doc-de +
+ +
+ + diff --git a/dist/simple-doc.html b/dist/simple-doc.html index 2f682a7..d6c5d47 100644 --- a/dist/simple-doc.html +++ b/dist/simple-doc.html @@ -198,6 +198,7 @@

Kaiser-Natron® —
what changed, in plain words

A non-technical summary of the visual and content changes to the site. The detailed developer version lives at /dev-doc — this is the same story without the code.

Updated 24 June 2026 · Branch feat/shop-category-sections

+

Deutsch ↗

diff --git a/public/dev-doc-de.html b/public/dev-doc-de.html new file mode 100644 index 0000000..065567b --- /dev/null +++ b/public/dev-doc-de.html @@ -0,0 +1,926 @@ + + + + + +Kaiser-Natron® — Restyle-Änderungsprotokoll (Entwickler-Handoff) + + + + +
+
+

Entwickler-Handoff · Restyle-Änderungsprotokoll

+

Kaiser-Natron® Restyle —
jede Änderung, dokumentiert

+

Eine allgemeinverständliche Zusammenfassung jeder visuellen Änderung in diesem Restyle-Durchgang — die genaue Datei, was sich geändert hat und welche CSS- / Tailwind-Klassen beteiligt sind. Nach Thema gegliedert, damit du ein Anliegen nach dem anderen prüfen kannst.

+

Aktualisiert am 24. Juni 2026 · Branch feat/shop-category-sections · 28 Änderungen

+

English ↗

+
+
+ +
+ +
+

Das Design-System ist Token-gesteuert: Farben, Schriften und Größen liegen als CSS-Custom-Properties in src/design-system/tokens.css (von Tailwind v4 über @theme konsumiert). Die meisten Farbänderungen passieren dort einmalig und kaskadieren überallhin.

+

Dieses Protokoll hält nur den aktuellen Endzustand jedes Punkts fest — die Datei, was es jetzt ist und das Token bzw. die Klasse — nicht die Iterationen, die nötig waren, um dorthin zu gelangen.

+
+ + + + + +
+
§1

Neue Markenfarben (Design-Tokens)

+
src/design-system/tokens.css
+
+

Zwei neue Farben wurden eingeführt und zwei bestehende umgewidmet.

+ + + + + + + + + +
TokenWertBedeutung
--color-accent-fill#cc0230Crimson — die neue Füllung für alle gefüllten CTA-Buttons, Pills und Chips
--color-accent-fill-hoveroklch(accent-fill − 12% black)Dunkleres Crimson für Hover
--color-accent-fill-ink#ffffffWeiß — die Text-/Icon-Farbe, die auf Crimson liegt
--color-highlight#6eceb2Mint — Hover-/Aktiv-Zustand für Nav-Tabs und Footer-Links
--color-accent#e9c84b (unverändert)Altes warmes Gelb — jetzt nur noch das Token hinter ein paar Nicht-Button-Akzenten
+ 
/* tokens.css — added */
+--color-accent-fill: #cc0230;
+--color-accent-fill-hover: color-mix(in oklch, var(--color-accent-fill), black 12%);
+--color-accent-fill-ink: #ffffff;
+
+--color-highlight: #6eceb2;
+

Da diese in @theme registriert sind, generiert Tailwind automatisch die Utility-Klassen bg-accent-fill, text-accent-fill-ink, border-accent-fill, hover:bg-accent-fill-hover und text-highlight / hover:text-highlight.

+

In /design öffnen

+
+
+ + +
+
§2

Seiten sind reinweiß

+
src/design-system/tokens.cssindex.html
+
+

Die zwei gebrochen-weißen Seitenflächen wurden auf Reinweiß gesetzt. Alles, was einen Seitenhintergrund zeichnet (bg-cream, bg-surface), und das cremefarbene Logo (text-cream) folgten automatisch.

+ 
/* before → after */
+--color-cream:   #f4efe4;  →  #ffffff;
+--color-surface: #faf7f1;  →  #ffffff;
+

index.html — die Browser-Theme-Farbe wurde an Weiß angepasst:

+ 
<meta name="theme-color" content="#ffffff" />   <!-- was #faf7f1 -->
+

In /design öffnen

+
+
+ + +
+
§3

Schriftart → Zeitung (selbst gehostet)

+
src/design-system/tokens.csssrc/assets/styles.csssrc/assets/fonts/index.html
+
+

Sämtlicher Text verwendet jetzt Zeitung, selbst gehostet (kein externes Font-CDN). Die lizenzierten .woff2-Dateien wurden von der Produktionsseite nach src/assets/fonts/ gespiegelt (Regular 400 + Bold 700 — die einzigen beiden Schnitte, die existieren; der Browser synthetisiert Zwischengewichte, und es gibt keine Kursivschnitte).

+ 
/* tokens.css */
+--font-serif: 'Zeitung', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
+--font-sans:  'Zeitung', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
+ 
/* styles.css — added @font-face */
+@font-face { font-family:'Zeitung'; font-weight:400; font-display:swap;
+  src:url('./fonts/Zeitung-Regular.woff2') format('woff2'); }
+@font-face { font-family:'Zeitung'; font-weight:700; font-display:swap;
+  src:url('./fonts/Zeitung-Bold.woff2') format('woff2'); }
+

index.html — der Google-Fonts-<link> (Fraunces + DM Sans) und seine preconnect-Hinweise wurden entfernt.

+

In /design öffnen

+
+
+ + +
+
§4

Buttons

+
src/design-system/components/Button.vue
+
+

Button.vue ist die alleinige Quelle der Wahrheit für Buttons. Varianten werden mit <Button variant="…"> ausgewählt.

+

4a. Textstil — Großbuchstaben, 14px

+ 
// base string — added `uppercase`
+'... font-sans font-semibold uppercase ...'
+
+// sizes — text set to 14px across the board
+sm: 'text-[14px] px-[18px] py-[9px] tracking-label',
+md: 'text-[14px] px-[26px] py-[13px] tracking-label',
+lg: 'text-[14px] px-[34px] py-[17px] tracking-label',
+

4b. Variantenfarben

+ + + + + + + + +
VarianteVorherNachher
primary (grüner Button)grüne Füllung, gelber Textgrüne Füllung, weißer Text — bg-brand text-white border-brand
accent (Haupt-CTA)gelbe Füllung, grüner Textcrimson Füllung, weißer Text — bg-accent-fill text-accent-fill-ink border-accent-fill
secondaryOutlinecrimson Füllung, weißer Text (gleich wie accent)
ghost / dangerunverändertunverändert
+
ℹ️

Hinweis: secondary und accent sind derzeit identisch (beide crimson). Der „Mehr erfahren“-Secondary-CTA des Heros (inline gerendert, siehe §5) wurde an dieselbe Crimson-Füllung angeglichen.

+

In /design öffnen

+
+
+ + +
+
§5

Hero-Call-to-Action-Buttons

+
src/design-system/components/Hero.vue
+
+

Der Hero rendert seinen secondary-CTA inline (nicht über <Button>), daher muss er direkt gestylt werden. Auf markengrünen Heros ist er jetzt Crimson-Füllung + weißer Text, Großbuchstaben, 14px:

+ 
class="… rounded-pill border border-accent-fill bg-accent-fill px-[34px] py-[17px]
+       text-[14px] font-semibold uppercase tracking-label text-accent-fill-ink
+       transition-colors duration-base hover:bg-accent-fill-hover"
+

Der primary-CTA des Heros verwendet auf grünen Flächen bereits die accent-Variante, ist also ebenfalls crimson.

+

In /design öffnen

+
+
+ + +
+
§6

„In den Warenkorb“-Buttons sind crimson

+
src/design-system/components/ProductCard.vuesrc/design-system/components/BundleCard.vuesrc/pages/ShopPage.vuesrc/pages/ProductPage.vuesrc/pages/BundlePage.vue
+
+

Jeder In-den-Warenkorb-Button ist jetzt die crimsonfarbene accent-Variante.

+ + + + + + + + + +
DateiÄnderung
ProductCard.vuectaVariant-Prop-Standard 'primary' → 'accent'
BundleCard.vueIn-den-Warenkorb-<Button> variant="primary" → "accent"
ShopPage.vueProduktraster :cta-variant="… 'accent' : 'primary'" → cta-variant="accent" (kein Wechseln mehr)
ProductPage.vueHaupt-In-den-Warenkorb bereits accent (unverändert)
BundlePage.vueIn-den-Warenkorb bereits accent (unverändert)
+

In /design öffnen

+
+
+ + +
+
§7

Warenkorb-Checkout-Button ist crimson

+
src/design-system/components/CartDrawer.vue
+
+ 
<!-- checkout button -->
+<Button variant="accent" …>   <!-- was variant="primary" -->
+

In /design öffnen

+
+
+ + +
+
§8

Weitere gefüllte Pills/Chips → crimson + weiß

+
IconButton.vueLanguageSwitcher.vueNavbar.vueKaiserhacks.vueBadge.vueAbout.vue
+
+

Alle zuvor gelben gefüllten Flächen verwenden jetzt das Crimson-Token-Paar bg-accent-fill + text-accent-fill-ink.

+ + + + + + + + + + +
DateiElement
IconButton.vueaccent-Variante (Warenkorb-Icon-Button)
LanguageSwitcher.vueaktive Sprach-Pill (alle 3 Töne)
Navbar.vuemobile Warenkorb-CTA-Pill
Kaiserhacks.vueVideo-Play-Chip
Badge.vueaccent-Badge-Variante
About.vue„HISTORY & SCIENCE“-Eyebrow (Badge variant="brand" → "accent") und die „TODAY“-Timeline-Pill (.pill-accent-CSS jetzt crimson + weiß)
+ 
/* About.vue — .pill-accent (the "TODAY" pill) */
+.pill-accent {
+  background: var(--color-accent-fill);
+  color: var(--color-accent-fill-ink);
+  border-color: var(--color-accent-fill);
+}
+

In /design öffnen

+
+
+ + +
+
§9

Mint-Highlight auf Nav-Tabs & Footer-Links

+
src/design-system/components/Navbar.vuesrc/design-system/components/Footer.vue
+
+

Das Hover-/Aktiv-Highlight auf der markengrünen Navbar (und den markengrünen Footer-Links) wechselte über das neue --color-highlight-Token von Gelb zu Mint:

+ 
text-accent       →  text-highlight        (active nav tab)
+hover:text-accent →  hover:text-highlight   (nav tab + footer link hover)
+
ℹ️

Nicht geändert: die mobile Warenkorb-Anzahl-Badge (Navbar.vue, ein grüner Kreis mit einer Zahl) ist weiterhin gelb — es ist ein Zähler-Indikator, kein Tab-Highlight. Bei Bedarf leicht umstellbar.

+

In /design öffnen

+
+
+ + +
+
§10

Gelbes „Highlight“ aus Hero-Text & Titeln entfernt

+
src/pages/HomePage.vueCategoryPage.vueProductPage.vueShopPage.vueBrandHero.vueRevitalization.vueKaiserhacks.vue
+
+

Die kursiven Betonungswörter in Hero-/Abschnitts-Headlines und die kleinen Eyebrow-Labels darüber waren gelb. Sie passen jetzt zum umgebenden weißen Hero-Text.

+ + + + + + + +
DateiÄnderung
HomePage.vue, CategoryPage.vue, ProductPage.vue, ShopPage.vueHeadline-<em>-Betonung: text-accent-soft → text-cream
BrandHero.vue, Revitalization.vuegleicher Betonungs-Tausch
CategoryPage.vue, ShopPage.vue, Kaiserhacks.vueHero-Eyebrows: text-accent → text-cream/75
+

(--color-cream ist jetzt #ffffff, daher lesen sich diese als Weiß auf den grünen Heros.)

+

Auf der Website ansehen

+
+
+ + +
+
§11

Abschnitts-Divider: Welle → Diagonale

+
src/design-system/components/WaveDivider.vuesrc/pages/HomePage.vuesrc/design-system/components/Kaiserhacks.vue
+
+

Die weiche S-Kurve zwischen farbigen Abschnitten wurde zu einer geraden Diagonale, die links tief, rechts hoch verläuft, und das Divider-Band wurde in der Höhe verdoppelt, sodass die Steigung etwa doppelt so steil ist.

+ 
height:   h-12 md:h-16   →  h-24 md:h-32   (48/64px → 96/128px)
+viewBox:  0 0 1440 64    →  0 0 1440 128
+path:     (cubic-bézier wave)  →  M0,0 L0,116 L1440,12 L1440,0 Z
+

Die nahtlose Konstruktion ist unverändert: ein vollhohes <rect> malt die Farbe des unteren Abschnitts und der <path> malt die Farbe des oberen Abschnitts.

+

Derselbe diagonale Divider sitzt auch zwischen dem grünen Kaiserhacks-Header und dem weißen Body darunter: Kaiserhacks.vue importiert WaveDivider und rendert <WaveDivider from="brand" to="surface" /> zwischen dem bg-brand-Header und dem Inhalts-<div> (das -mt-px erhält, um bündig zu sitzen).

+

Auf der Website ansehen

+
+
+ + +
+
§12

Such-Dropdown-Preise → weiß (auf Grün)

+
src/design-system/components/Search.vue
+
+

Im Such-Overlay waren die Preis-Labels auf dem markengrünen Ton gelb. Sie sind jetzt weiß, passend zum übrigen Text auf grüner Fläche:

+ 
// brand tone
+price: 'text-accent'  →  'text-cream'   // (#ffffff on green)
+

Die Töne paper und cream behalten text-brand (unverändert).

+

In /design öffnen

+
+
+ + +
+
§13

Brand-Hero-Intro-Artwork → offizielle Markenassets

+
src/design-system/components/BrandHero.vuesrc/components/heroFigures.jssrc/assets/brand/{hebe,waterfall}.svg
+
+

Die Intro-Animation der Startseite (der im Fluss liegende Figuren-Auftritt — das vollflächige SplashIntro-Overlay war bereits abgeschafft) verwendete zuvor handgezeichnete Annäherungen an die Frau + den Wasserfall. Sie verwendet jetzt die offiziellen Kaiser-Natron-Markenvektoren: die Ikone („Hebe“) und den Waterfall (2021 Druckdaten-Final), von EPS nach SVG konvertiert.

+
    +
  • Quell-SVGs liegen für die Provenienz in src/assets/brand/; die extrahierten Pfaddaten liegen in src/components/heroFigures.js (ladyMint, ladyWhite, waterfall).
    • +
  • Dunkle Kontur entfernt — der #006648-Konturton des Markenicons entfällt; die Figuren rendern als flache Mint-Silhouetten, passend zur etablierten Splash-Ästhetik. Mint-Töne: Frau #72c1ad, Wasserfall #6eceb2; Natron-Handvoll #ffffff.
    • +
  • Komposition — gemeinsame 0 0 2760 3624-viewBox: die Frau am Ursprung (nativ 1828×3624), der Wasserfall halb skaliert (scale(0.5)) rechts von ihr und vertikal zentriert zu ihr (translate(1793,1310)).
    • +
  • Animation unverändert — gleiche Choreografie/gleiches Timing: die Frau gleitet von links herein (left-m), der Wasserfall von rechts (right-m), das weiße Natron blendet ein, sobald sie gelandet ist (mound-m), Tagline + SINCE 1881 zuletzt; gleiche Edge-Feather-Maske und gleiche Reduced-Motion-Behandlung.
    • +
+
ℹ️

Nebeneffekt: der Chunk der Startseite schrumpfte von ~214 KB → ~70 KB, weil die neue heroFigures.js (~57 KB) den viel größeren handgezeichneten splashPaths.js-Import ersetzt. splashPaths.js / SplashIntro.vue bleiben nur als ungenutztes Legacy erhalten.

+

Auf der Website ansehen

+
+
+ + +
+
§14

Produktbild — 250 g Großpackung-Box umgefärbt

+
public/products/kaiser-natron-pulver-250-g-grosspackung.webpdist/products/…
+
+

Das Produktfoto der 250 g-Box hatte ein gedämpftes, grau-tannengrünes Grün, das nicht zum helleren Markengrün der anderen Kaiser-Natron-Pulverpackungen passte (z. B. das 50 g-Sachet public/products/kaiser-natron-pulver-50-g-beutel.webp). Es wurde durch ein aktualisiertes Box-Render mit dem korrekten lebendigen Markengrün ersetzt (die dunkelgrünen 3D-Seitenflächen und das rote untere Band bleiben erhalten).

+
    +
  • Wo Produktbilder liegen: public/products/*.webp (als statische Assets ausgeliefert; der Build spiegelt sie nach dist/products/*.webp). Konvention: transparentes RGBA, ~1200 px hoch.
    • +
  • Der Ersatz wurde als 939×1200 transparentes PNG geliefert und direkt als WebP gespeichert (quality 92, keine Skalierung nötig — entspricht bereits den Originalmaßen), sodass Kanten/Text scharf bleiben.
    • +
+

Auf der Website ansehen

+
+
+ + +
+
§15

Design-System-Doku-Seite

+
src/pages/design/ColorsSection.vue
+
+

Die neuen Tokens accent-fill, accent-fill-hover, accent-fill-ink wurden der Farbmuster-Referenz hinzugefügt, damit die In-App-Design-System-Seite akkurat bleibt.

+

In /design öffnen

+
+
+ + +
+
§16

Markenname — ®-Marke + Bindestrich-Durchgang

+
src/i18n/messages.jssrc/api/products.jssrc/design-system/components/Logo.vuesrc/design-system/components/Navbar.vue
+
+

Der Markenname wird jetzt durchgängig Kaiser-Natron® geschrieben — mit Bindestrich und ®-Zeichen — bei jeder sichtbaren Erwähnung. Zwei Probleme wurden behoben:

+
    +
  • Fehlendes ® — Display-Headlines, CTAs, die Bundle-Positionslisten und das Produkt-Feld brand trugen keine Markenkennzeichnung. (Der lange Kaiserhacks-Rezepttext und die title-Felder der Produkte hatten bereits Kaiser-Natron® und blieben unverändert.)
    • +
  • Schreibweisen-Drift — die englische Locale (und eine deutsche Headline) verwendeten das nicht getrennte Kaiser Natron. Alle wurden auf die Bindestrich-Form vereinheitlicht.
    • +
+ + + + + + + + +
DateiWas sich änderte
src/i18n/messages.jsshop.headline, ds.hero.headline.a, home.banner.sub, home.brand.headline.a, home.teaser.cta und die bundle.*.items.*-Listen — de und en — lauten jetzt Kaiser-Natron®
src/api/products.jsbrand: 'Kaiser-Natron' → 'Kaiser-Natron®' (alle 11 Produkte; in den Suchergebnissen über Search.vue angezeigt)
src/design-system/components/Logo.vuestandardmäßiges barrierefreies title-Prop 'Kaiser Natron' → 'Kaiser-Natron®'
src/design-system/components/Navbar.vueLogo-Link-aria-label 'Kaiser Natron home' → 'Kaiser-Natron home'
+
ℹ️

Nicht angefasst: generische Zutaten-Bezüge („Natron“, „Natronwasser“, „Natron-basierte …“) — die meinen den Stoff, nicht die Marke, und tragen daher kein ®. Bild-alt-Text behält den schlichten Bindestrich-Namen (nicht auf dem Bildschirm sichtbar).

+

Auf der Website ansehen

+
+
+ + +
+
§17

Hero-Headline-Text — Vielseitigkeit, nicht „Glanz“

+
src/i18n/messages.js
+
+

Die Produkt-Hero-Headline (ds.hero.headline.*, de + en) wurde von einer generischen Reinigungs-Glanz-Zeile zur eigenen Vielseitigkeits-Stimme der Marke umformuliert (entnommen aus kaiser-natron.de — „Die Verwendungsmöglichkeiten … sind beinah grenzenlos“). Die dreiteilige Aufteilung (a / betontes em / b) ist unverändert; nur die Wörter haben sich geändert.

+ 
DE  "Kaiser-Natron®  für alles  was glänzen soll."
+ →  "Kaiser-Natron®  für fast  alles im Alltag."
+
+EN  "Kaiser-Natron®  for everything  that should shine."
+ →  "Kaiser-Natron®  for almost  anything at home."
+

Auf der Website ansehen

+
+
+ + +
+
§18

Bundle-Artwork — „AI Edited“-Hinweis (L5 + L6)

+
src/api/bundles.jsBundleCard.vueBundles.vuesrc/pages/HomePage.vuesrc/pages/BundlePage.vue
+
+

Die Bundle-Bilder sind KI-komponiert. Statt sie zu ersetzen, ist jedes nun mit einer kleinen, dezenten „AI Edited“-Beschriftung unten rechts im Bild markiert, sodass der KI-Ursprung offengelegt wird. Es ist datengesteuert, verschwindet also automatisch, sobald echte Fotografie ein bestimmtes Bild ersetzt.

+
    +
  • bundles.js — jeder Bundle-Datensatz erhält aiEdited: true.
    • +
  • BundleCard.vue — neues aiEdited-Boolean-Prop; wenn true, rendert es das Overlay-Span im Medienbereich (sowohl im Card-Link- als auch im Plain-Media-Zweig).
    • +
  • Bundles.vue — übergibt :ai-edited="bundle.aiEdited" an alle vier BundleCard-Instanzen (mobil + Raster + Sidebar + Karussell).
    • +
  • HomePage.vue / BundlePage.vue — reichen aiEdited bis zu den gerenderten Datensätzen durch; BundlePage rendert dasselbe Overlay auf seinem großen Hero-Bild (Desktop + mobil).
    • +
+ 
<span class="pointer-events-none absolute bottom-0 right-0 z-[1] px-2 py-0.5
+  text-[10px] font-medium uppercase tracking-label text-white/55
+  drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]">AI Edited</span>
+
ℹ️

Setze das aiEdited: false eines Bundles (oder entferne es) in bundles.js, um das Badge zu entfernen, sobald sein Bild ein echtes Foto ist.

+

Auf der Website ansehen

+
+
+ + +
+
§19

Revitalization-Abschnitt — Animationsreihe + CTA entfernt (L10)

+
src/pages/HomePage.vue
+
+

Der Revitalization-Abschnitt wurde zurückgestutzt. Vollständig entfernt:

+
    +
  • die Drei-Säulen-Feature-Reihe mit den rotierenden Orbit-Animationen (die Emoji-Icons ⚗️💊🌿 waren off-brand; der Markeninhaber wollte die ganze Reihe weg haben), und
    • +
  • der „Early Access“-CTA-Button (revit.notifyCta — „Get early access“ / „Early Access sichern“).
    • +
+

Dies geschieht an der Verwendungsstelle, nicht in der Komponente: revitCopy übergibt nicht mehr features oder notifyCta, und die Bindings :features / :notify-cta / @notify (sowie der verwaiste onRevitNotify-Handler) wurden entfernt. Der Abschnitt rendert jetzt nur Eyebrow + Headline + Sub.

+

Revitalization.vue ist unverändert und weiterhin wiederverwendbar — seine Guards v-if="features.length" und v-if="notifyCta" rendern einfach nichts, wenn diese Props fehlen. Die ungenutzten i18n-Schlüssel revit.feature.* / revit.notifyCta bleiben erhalten (harmlos), falls der Abschnitt wiederhergestellt wird.

+

In /design öffnen

+
+
+ + +
+
§20

Shop-Seite Kategorie-Banner + Farben + Küche-Seite (L8/U4)

+
src/design-system/tokens.cssHero.vuesrc/pages/ShopPage.vuesrc/router/index.jssrc/pages/CategoryPage.vuesrc/i18n/messages.js
+
+

Auf der Shop-Seite ist der Katalog in vier Anwendungsgruppen-Abschnitte aufgeteilt, jeder durch ein vollbreites Farbbanner in der jeweiligen Anwendungsgruppen-Farbe der Marke angeführt (von kaiser-natron.de übernommen), mit diagonalen Dividern, die die Farbe in das neutrale Produktraster darunter hinein- und wieder herausführen. (Die Startseite blieb unverändert — sie behält ihren 3-Karten-ProductTeaser.)

+

Vier Abschnitte + Farben (Design-Tokens)

+

tokens.css — der alte „Haushalt“-Klumpen wurde in Clean (Reinigung) und Wash (Wäsche) aufgeteilt:

+
+
Kitchen · lime#c6d47d
+
Clean · grapefruit#eb5a61
+
Wash · plum#c15a7e
+
Care · orange#f1864c
+
+ + + + + + + + +
TokenHexAbschnittProdukte
--color-cat-kitchen#c6d47d (lime)Küche / cookPulver, Tabletten
--color-cat-clean#eb5a61 (grapefruit)Reinigung / cleanReiniger, Sprays, Entkalker
--color-cat-wash#c15a7e (plum)Wäsche / washWaschsoda, Stärke, Fleckentferner
--color-cat-care#f1864c (orange)Pflege / careBad, Fußbad, Sport
+

Tailwind v4 emittiert automatisch bg-cat-kitchen / bg-cat-clean / bg-cat-wash / bg-cat-care.

+

Produkt-Gruppierung

+

src/api/products.js — USE_CASES ist jetzt ['cook','clean','wash','care']; Wäsche wird auf die neue wash-Gruppe abgebildet (war clean). productsByUseCase gibt alle vier Buckets zurück.

+

Hero-Töne

+

Hero.vue hat kitchen / clean / wash / care-Töne. Lime behält dunklen Ink-Text; die anderen drei nehmen Cream (weißen) Text. Jeder setzt einen eyebrowColor, der inline angewendet wird (überschreibt das globale .eyebrow { color: muted }). WaveDivider.vue erhielt passende kitchen / clean / wash / care-Töne.

+

Shop-Seite

+

ShopPage.vue durchläuft die vier Use-Cases; jeder rendert WaveDivider → <Hero :tone="section.cat"> (Hero-Produkt + Mixed-Font-Heading + CTAs) → WaveDivider → ein Abschnittstitel + Produktraster. CAT_TONE bildet cook→kitchen, clean→clean, wash→wash, care→care ab; CAT_HERO_ID wählt das Headline-Produkt (Pulver / Allzweck-Spray / Daunenwasch / Bad). Ein Pro-Abschnitt-Titel (shop.section.<id>.products.title) sitzt jetzt über jedem Raster.

+

Banner-CTAs

+

Jedes Banner trägt zwei Buttons (über den Hero-#actions-Slot): „In den Warenkorb“ im Marken-Crimson (Button variant="accent", fügt das Hero-Produkt des Abschnitts hinzu) und „Mehr erfahren“ als weiß umrandeter Ghost (border-white/90 text-white, verlinkt auf die Produktseite).

+
⚠️

Das weiß umrandete „Mehr erfahren“ liest sich gut auf den gesättigten Grapefruit- / Plum- / Orange-Bannern, ist aber auf dem hellen Lime-(Kitchen-)Banner kontrastarm — eventuell ist dort eine dunkel umrandete Variante gewünscht.

+

Shop-First-Fold — halbiert

+

Der grüne Titel-Fold war min-h:calc(100svh − nav), hält aber nur ein kompaktes Titelband, sodass zu viel leeres Grün übrig blieb. Reduziert auf calc(50svh − var(--nav-h)). Eine Diagonale geht dann in ein dünnes weißes Band (h-6 md:h-10) vor dem ersten Farbbanner über, sodass der grüne Hero und das Lime-Kitchen-Banner nicht direkt aneinanderstoßen.

+

Küche-Kategorieseite (neu, getrennt von den Shop-Abschnitten)

+

Hinzugefügt zur Parität mit /haushalt + /pflege:

+
    +
  • router/index.js — neue /kueche-Route → CategoryPage { slug: 'kueche', useCase: 'cook' }.
    • +
  • CategoryPage.vue — slug-Validator erlaubt kueche; useCase erlaubt cook.
    • +
  • messages.js — vollständige category.kueche.*-Texte (de + en), gespiegelt von pflege/haushalt.
    • +
+
ℹ️

Gelöst (siehe §21). Die drei inhaltlich fertigen Kategorieseiten (/kueche, /haushalt, /pflege) sind jetzt in den Footer verdrahtet. /waesche (wash) ist absichtlich zurückgestellt, bis Marken-Texte vorliegen — der In-Page-wash-Abschnitt des Shops deckt die Wäsche in der Zwischenzeit ab.

+

Auf der Website ansehen

+
+
+ + +
+
§21

Kategorieseiten verdrahtet + Benennung an Shop-Abschnitte angeglichen

+
src/design-system/components/Footer.vuesrc/i18n/messages.js
+
+

Entscheidung. Von den vier Anwendungsgruppen werden die drei mit vollständigem Text (cook/clean/care → /kueche, /haushalt, /pflege) als eigenständige Landingpages neben den In-Page-Abschnitten des Shops behalten und aus dem Footer verlinkt. Die wash-Gruppe hat noch keine eigenständige Seite (/waesche) — zurückgestellt, bis Marken-Texte geliefert werden; der wash-Abschnitt des Shops deckt die Wäsche in der Zwischenzeit ab.

+

Footer-Links. Die exploreLinks von Footer.vue listen jetzt Shop → Küche → Haushalt → Pflege → Bundles → About auf (der /kueche-Link fehlte zuvor — die Seite war nur über die direkte URL erreichbar). Die Reihenfolge folgt der Anwendungsgruppen-Reihenfolge des Shops.

+

Benennung an den Shop angeglichen. Die Link-Labels des Footers und die Eyebrows der Kategorieseiten verwenden jetzt die schlichten Abschnittsnamen des Shops (shop.feature.*) statt der älteren beschreibenden Varianten, sodass ein Abschnitt und seine Landingpage identisch lesen:

+ + + + + + + +
Seite (Route)use-caseEyebrow + Footer-Label — DE / ENwar
/kuechecookKüche / Kitchen„Küche & Backen“ / „Kitchen & baking“
/haushaltcleanReinigung / Clean„Haushalt & Reinigung“ / „Home & cleaning“
/pflegecarePflege / Care„Pflege & Wohlbefinden“ / „Personal care & wellbeing“
+

Die Route-Slugs sind unverändert (/haushalt bedient weiterhin die clean-Gruppe); nur die sichtbaren Labels/Eyebrows wurden auf die neuen Namen umgestellt.

+

Auf der Website ansehen

+
+
+ + +
+
§22

Mitgliedschaft entfernt — Bundles haben einen Einzelpreis (U2)

+
src/api/bundles.jsBundleCard.vueBundles.vueBundlePage.vueHomePage.vuesrc/i18n/messages.jsBundleCardSection.vueBundlesSection.vuepreviews/BundlesPreview.vue
+
+

Es gibt kein Mitgliedschaftsprogramm, daher wurde jede Spur davon entfernt (der Beitritts-Button ging bereits früher in §U2; dies schließt es ab). Entscheidung: einheitlicher Einzelhandelspreis — Bundles zeigen jetzt nur noch ihren regulären Preis (z. B. €24,90); der alte niedrigere memberPrice wurde vollständig entfernt (es bleibt kein Rabatt).

+
    +
  • Daten. bundles.js — memberPrice aus allen drei Bundles gelöscht.
    • +
  • BundleCard.vue — das memberPrice-Prop, das memberLabel-Computed und die „Mitglieder: €X“-Zeile unter dem Preis entfernt.
    • +
  • Bundles.vue — alle vier :member-price-Bindings, das joinCta-Prop, das join-Emit, beide „Mitglied werden“-Buttons (gestapelt + Sidebar) und der jetzt ungenutzte Button-Import entfernt. Veraltete „why join“- / „member pitch“-Kommentare zu „why bundle“ umformuliert.
    • +
  • BundlePage.vue — das memberPriceLabel-Computed und die Mitgliederpreis-Zeile in beiden Hero-Blöcken (Desktop und mobil) entfernt.
    • +
  • HomePage.vue — memberPrice aus dem lokalisierten Bundle-Mapping entfernt.
    • +
  • Texte (messages.js). Verwaiste Schlüssel bundle.memberPrice, bundles.joinCta, bundles.card.memberPrefix gelöscht. bundles.card.priceLabel → „Preis“ / „Price“ (war „Verkaufspreis“ / „Retail price“). Der Abschnitts-Untertitel + die drei Vorteile wurden von Mitgliedschafts-Vorzügen zu Bundle-Mehrwert umgeschrieben (keine Ersparnis-Aussage, da der Preis jetzt einheitlich ist): +
      +
    • sub: „Kuratierte Sets … in einem Paket.“ / „Curated sets … in a single pack.“
      • +
    • Vorteile: Aufeinander abgestimmt · Alles für einen Bereich · In einer Lieferung (EN: Chosen to work together · Everything for one area · In a single delivery).
      • +
    • ds.bundleCard.description / ds.bundles.description aktualisiert, um die Mitgliederpreis- / Mitglieder-CTA-Erwähnungen zu entfernen.
      • +
    +
    • +
+

Das headline.em bleibt „Vorteile / Benefits“ — es liest sich nun als die Vorteile der Bundles statt als Mitgliedschafts-Vorzüge.

+

Auf der Website ansehen

+
+
+ + +
+
§23

Second-Fold-Banner-Bild — Pulver, nicht Bad (L7)

+
src/pages/HomePage.vue
+
+

Das cremefarbene Second-Fold-Banner lautet „Ein Pulver, hundert Anwendungen im Haushalt“ / „One powder, a hundred uses around the home“, zeigte aber das Bad 500 g (bath)-Produkt — und sein In-den-Warenkorb + „Mehr erfahren“-Link verwiesen ebenfalls dorthin, was der Pulver-Botschaft widersprach. Das gesamte Banner auf Pulver umgeleitet:

+
    +
  • imgBanner → /products/kaiser-natron-pulver-3.490-g-eimer.webp (der Großeimer — verstärkt visuell „hundert Anwendungen“; bewusst nicht die 250 g Großpackung, die bereits der First-Fold-Hero ist).
    • +
  • bannerProductId → kaiser-natron-pulver-3490-g-eimer, sodass der CTA das Pulver hinzufügt und „Mehr erfahren“ auf /shop/kaiser-natron-pulver-3490-g-eimer verlinkt.
    • +
  • image-alt → „Kaiser-Natron® Pulver 3.490 g Eimer“.
    • +
+

Kein neues Asset nötig — das Eimer-Bild war bereits in public/products/ ausgeliefert.

+

Auf der Website ansehen

+
+
+ + +
+
§24

Revitalization-Abschnitt von der Startseite entfernt

+
src/pages/HomePage.vueShopPage.vueCategoryPage.vueBundlePage.vueProductPage.vueKaiserhacksPage.vueLoginPage.vueRegisterPage.vueLegalPage.vue
+
+

Der Markeninhaber markierte den Namen „Revitalization Center“ + Icons als off-brand. Der Abschnitt wurde vorerst von der öffentlichen Seite entfernt:

+
    +
  • HomePage.vue — der <Revitalization>-Block und die zwei diagonalen SVG-Divider, die ihn einrahmten, entfernt (das cremefarbene Banner fließt jetzt direkt in den cremefarbenen About-Abschnitt über), plus der Revitalization-Import und das revitCopy-Computed.
    • +
  • Den jetzt toten Eintrag { key: 'nav.revitalization', href: '/#revitalize' } aus dem Nav-Array jeder Seite gestrippt (9 Dateien), sodass nichts mehr auf den fehlenden Anchor verlinkt.
    • +
+

In Reserve behalten (nicht gelöscht): Revitalization.vue, seine Design-System-Doku-Seite, die revit.*-i18n-Schlüssel und die /design/preview/revitalization-Route — sodass der Abschnitt (mit korrigiertem Namen) durch erneutes Hinzufügen des Imports, von revitCopy, des Render-Blocks und der Nav-Einträge wiederhergestellt werden kann.

+

Auf der Website ansehen

+
+
+ + +
+
§25

Sport-Profi zu Wäsche umkategorisiert

+
src/api/products.js
+
+

Markeninhaber-Review: Sport Profi ist ein Wäscheprodukt und gehört unter Haushalt, nicht unter Baden & Pflege. In der Vier-Gruppen-Taxonomie ist Wäsche = wash, daher änderte sich USE_CASE_BY_CATEGORY.Sport von 'care' → 'wash'. Das Produkt kaiser-natron-sport-profi-250-ml erscheint jetzt im Wäsche / wash-Abschnitt (plum) statt unter Pflege / care. Der Doc-Kommentar wurde entsprechend aktualisiert.

+

Auf der Website ansehen

+
+
+ + +
+
§26

„Das Original aus Österreich“ entfernt (G1)

+
src/i18n/messages.js
+
+

Markeninhaber-Review: die Aussage „Original aus Österreich“ ist nicht zutreffend. Der einleitende Satz wurde aus footer.tagline (DE + EN) entfernt; die Tagline beginnt jetzt mit „Reines Natron für Küche, Haushalt und Pflege …“ / „Pure sodium bicarbonate for the kitchen, the home, and personal care …“.

+
ℹ️

Andere Österreich-bezogene Strings bleiben bestehen und sind separate Entscheidungen, nicht Teil dieser Änderung: footer.madeIn / product.prop.made-in-austria („In Österreich abgefüllt“ / „Bottled in Austria“) und die Wiener Adresse im Impressum/Datenschutz. Beim Nutzer nachfragen, ob die Herkunftskorrektur auf diese ausgeweitet werden soll.

+

Auf der Website ansehen

+
+
+ + +
+
§27

Shop-Hero — schräge Kategorie-Sprungbuttons + weiße Lücke entfernt

+
src/pages/ShopPage.vue
+
+

Sprungbuttons. Unter dem Titel + Sub des Shop-Heros scrollt eine Reihe von vier schrägen Parallelogramm-Buttons (einer pro Anwendungsgruppe, jeder mit seiner eigenen Kategorie-Farbe gefüllt) sanft zum passenden Abschnitt:

+
+
Küche / Kitchendark ink label
+
Reinigung / Cleanwhite label
+
Wäsche / Washwhite label
+
Pflege / Carewhite label
+
+
    +
  • Gerendert durch das Durchlaufen von sections; das Label ist section.feature.
    • +
  • Form: -skew-x-12 auf dem Button mit einem Gegen-Skew skew-x-12 auf dem inneren <span>, damit der Text aufrecht bleibt — greift die schräge (Soulmates-)CI auf.
    • +
  • Farb-Mapping CAT_BTN: bg-cat-kitchen text-brand (Lime ist hell → dunkles Ink), die anderen drei bg-cat-* text-white.
    • +
  • scrollToSection(id) ruft el.scrollIntoView({ behavior: 'smooth' }) auf; das bestehende scroll-mt jedes Abschnitts hält das Ziel knapp unter der Sticky-Nav.
    • +
+

Weiße Lücke entfernt. Das dünne weiße Band (-mt-px h-6 md:h-10 bg-cream) und der vorangehende WaveDivider from="brand" to="cream" — in §20 hinzugefügt — sind weg. Der grüne Hero fließt jetzt über eine einzige Diagonale direkt in das erste Farbbanner: die Abschnittsschleife ist (section, i) und der erste Divider ist :from="i === 0 ? 'brand' : 'cream'".

+

Auf der Website ansehen

+
+
+ + +
+
§28

/design-Showcase auf das Rebrand aktualisiert

+
design/ColorsSection.vueTypographySection.vueHeroSection.vuepreviews/HeroPreview.vuei18n/messages.jstokens.cssHero.vueSearch.vueStripePaymentMount.vueExpressCheckoutMount.vue
+
+

Der /design-Styleguide beschrieb noch das alte Design (Fraunces + DM Sans, „pine green“, warmgelbe CTAs, drei Hero-Töne) und ließ die neuen Tokens aus. Alle 26 Abschnitte geprüft und jeden Drift korrigiert:

+
    +
  • Farben. ColorsSection zeigt jetzt das Mint-highlight, die vier Kategorie-Farben (cat-kitchen/clean/wash/care) sowie brand-float und cream-dark. Neue Gruppentitel ds.colors.group.highlight / .categories; ds.colors.description umgeschrieben.
    • +
  • Typografie. Beide Karten lesen jetzt Zeitung (war Fraunces/DM Sans); ein fluider Headline-Scale-Block hinzugefügt (text-display / text-headline-lg / text-headline-md). Beschreibungen auf die einzige Zeitung-Familie umgeschrieben.
    • +
  • Hero. Die vier Kategorie-Banner-Töne (kitchen/clean/wash/care) zum Ton-Umschalter und zum HeroPreview-Validator hinzugefügt; ds.hero.description „three surface tones“ → seven.
    • +
  • Buttons. ds.buttons.description korrigiert — accent ist crimson (war „warm-yellow“), „pine-green“ → „brand-green“.
    • +
  • Revitalization. Die Showcase-Beschreibung weist darauf hin, dass es in Reserve liegt / nicht auf der Live-Seite verwendet wird (in §24 entfernt).
    • +
  • Veraltete Referenzen ausgeräumt. tokens.css-Header neu geschrieben; Checkout-Font in den Stripe- / Express-Mounts von hartkodiertem DM Sans → den --font-sans-Stack geändert; „Fraunces“- / „pine green“-Kommentare korrigiert.
    • +
+

In /design öffnen

+
+
+ + +
+
★

Schnellreferenz — die zwei neuen Farben

+
+
+
Crimson#cc0230
+
Mint#6eceb2
+
White#ffffff
+
+ 
Crimson  #cc0230   — all buttons / CTAs / solid pills (with #ffffff text)
+Mint     #6eceb2   — nav tab + footer link hover/active highlight
+White    #ffffff   — page backgrounds (cream + surface) and button text on green
+

In /design öffnen

+
+
+ +
+ Kaiser-Natron® — Entwickler-Änderungsprotokoll + 28 dokumentierte Änderungen · feat/shop-category-sections +
+ +
+ + diff --git a/public/dev-doc.html b/public/dev-doc.html index 743cb4c..e24b5f2 100644 --- a/public/dev-doc.html +++ b/public/dev-doc.html @@ -329,6 +329,7 @@

Kaiser-Natron® restyle —
every change, documented

A plain-language summary of every visual change in this restyle pass — the exact file, what changed, and the CSS / Tailwind classes involved. Organised by theme so you can review one concern at a time.

Updated 24 June 2026 · Branch feat/shop-category-sections · 28 changes

+

Deutsch ↗

diff --git a/public/review-doc-de.html b/public/review-doc-de.html new file mode 100644 index 0000000..0adcb4a --- /dev/null +++ b/public/review-doc-de.html @@ -0,0 +1,425 @@ + + + + + +Kaiser-Natron® — Markenreview, Status + + + + +
+
+

Markenreview · Umsetzungsstand

+

Kaiser-Natron® Website-Review —
was erledigt ist, was als Nächstes kommt

+

Jeder Punkt aus dem Markeninhaber-Review, abgeglichen mit dem aktuellen Build. Jeder Eintrag trägt seinen tatsächlichen Status und eine kurze Notiz dazu, was geändert wurde oder was noch benötigt wird.

+

Erstellt am 24. Juni 2026 · Branch feat/shop-category-sections · 28 Review-Punkte · English ↗

+
+
+ +
+ +
+
18
Erledigt
+
2
Geprüft / beibehalten
+
2
In Arbeit
+
6
Eingabe nötig
+
+ +
+ Erledigt — umgesetzt & auf dem Branch + Geprüft — auf Ihre Entscheidung hin beibehalten / bestätigt + In Arbeit — teilweise erledigt + Eingabe nötig — Rechtstext, Inhalt oder eine Entscheidung +
+ + +
+

Layout 15 Punkte

+ +
+
Erledigt +

Das Gesamtlayout passt nicht zur Markenidentität (CI) von Kaiser-Natron®.

+

An die CI angepasst: die offizielle Markenpalette, die Schrift Zeitung, die schrägen (Soulmates-)Trennlinien und das offizielle Artwork sind alle vorhanden. Die ganzheitliche Konsistenz bleibt als Leitlinie für jede Änderung bestehen.

+
+ +
+
Geprüft +

Das Kaiser-Natron®-Logo auf der Startseite ist viel zu klein und nicht prominent genug.

+

In der aktuellen Größe beibehalten auf Ihre Entscheidung in dieser Sitzung hin — jederzeit erneut anpassbar, falls Sie es vergrößern möchten.

+
+ +
+
Erledigt +

Die Quelle wurde verfälscht dargestellt (Berge, Hebes Haar, der „Berg“ neben ihrem Kopf, der Bach). Alle Illustrationen sollten dem originalen Kaiser-Natron®-Design entsprechen.

+

Marken-Hero neu aufgebaut mit dem offiziellen Artwork von Hebe + Wasserfall, das die verzerrte Komposition ersetzt.

+
+ +
+
Erledigt +

Falsche Schrift und falsche Farbpalette.

+

Korrigiert: selbst gehostete Schrift Zeitung und die offizielle Markenpalette (Grün #006548, Karmesinrot, Mint, Gold) durchgängig.

+
+ +
+
Erledigt +

Das schräge Soulmates-Konzept geht verloren; wellenförmige Elemente passen nicht zur Struktur.

+

Wellen entfernt. Alle Abschnitts-Trennlinien sind nun schräg/diagonal und greifen die Geometrie des Logos auf, um die Markenwiedererkennung wiederherzustellen.

+
+ +
+
Erledigt +

Das Bild der 250-g-Packung: Hintergrundfarbe und Produktbild sind visuell nicht aufeinander abgestimmt.

+

Gelöst: das Artwork der 250-g-Schachtel wurde in das Markengrün umgefärbt, sodass Produkt und Hintergrund zusammenpassen.

+
+ +
+
Erledigt +

„…für alles, was glänzen soll. Reinigt, backt und neutralisiert…“ passt nicht zum Tone of Voice.

+

Neu formuliert in Richtung Vielseitigkeit — „Kaiser-Natron® für fast alles im Alltag“ / „…for almost anything at home“, aus der Live-Markensprache übernommen.

+
+ +
+
Erledigt +

Unter „Bundles & Benefits“: KI-generierte Bilder müssen ab August mit einem Symbol als KI-Inhalt gekennzeichnet werden.

+

Gekennzeichnet: ein dezenter Hinweis „AI Edited“ sitzt nun auf jedem KI-komponierten Bundle-Bild. Er schaltet sich automatisch ab, sobald echte Fotos sie ersetzen.

+
+ +
+
In Arbeit +

Die Produktdarstellungen in den KI-Bildern sind ungenau; als Hersteller würde ich KI-Bilder ganz vermeiden.

+

Vorerst gekennzeichnet mit dem AI-Edited-Badge. Die vollständige Entfernung ist vorbereitet und einsatzbereit — es braucht nur Ihre echte Produktfotografie zum Einsetzen.

+
+ +
+
Erledigt +

„Ein Pulver, hundert Anwendungen…“ passt nicht zum darüber gezeigten Badbild; das Pulverprodukt sollte gezeigt werden.

+

In dieser Sitzung behoben: das Banner zeigt nun das Pulver (den Großgebinde-Eimer), und sein „in den Warenkorb“ / „mehr erfahren“ verweist auf dieses Pulverprodukt.

+
+ +
+
Erledigt +

Die Kategorien „Körperpflege“, „Haushalt“ und „Küche“ sind durcheinander, und „Küche“ ist praktisch verloren gegangen.

+

Wiederhergestellt: der Shop ist in vier klare Kategoriebereiche neu aufgebaut — Küche, Reinigung, Wäsche, Pflege — und Küche hat nun einen eigenen Bereich und eine eigenständige Seite.

+
+ +
+
Erledigt +

Das Farbcodierungskonzept der Produktgruppen ist verloren gegangen. +

+

Wiederhergestellt aus den markeneigenen Gruppenfarben — Küche (Limette), Reinigung (Grapefruit), Wäsche (Pflaume), Pflege (Orange) — als vollbreite Banner und Trennlinien.

+
+ +
+
Erledigt +

Die Icons und der Name des „Revitalization Center“ passen nicht zur Markenidentität.

+

Bereich vorerst entfernt von der Website, sodass weder die markenfremden Icons noch der Name erscheinen. Die Komponente bleibt in Reserve und kann jederzeit mit der korrekten Benennung zurückkehren, wenn Sie es wünschen.

+
+ +
+
Erledigt +

Das ®-Symbol fehlt an mehreren Stellen, und die Schreibweise sollte überprüft werden.

+

Geprüft: ® wurde zu jeder sichtbaren Nennung hinzugefügt und der Name durchgängig als „Kaiser-Natron®“ mit Bindestrich geschrieben.

+
+ +
+
Erledigt +

Das Kaiser-Natron®-Logo sollte weiß sein.

+

Als in Ordnung bestätigt: das Logo wird auf grünen/dunklen Flächen weiß und auf hellen Flächen in Markengrün dargestellt — das jeweils richtige Verhalten im Kontext. So freigegeben.

+
+
+ + +
+

Benutzeroberfläche 6 Punkte

+ +
+
Bestätigt +

Fehlendes Navigationsmenü in der mobilen Ansicht.

+

Die Navigation ist vorhanden auf Mobilgeräten (im aktuellen Build geprüft). Falls ein bestimmtes Gerät sie bei Ihnen ausgeblendet hat, senden Sie uns einen Screenshot und wir gehen dem nach.

+
+ +
+
Erledigt +

Die Animation von Hebe ist meiner Meinung nach nicht gelungen.

+

Aktualisiert: die Intro wurde rund um das offizielle Artwork von Hebe + Wasserfall überarbeitet und greift damit das Anliegen zur Animation auf.

+
+ +
+
Erledigt +

„Bundles & Benefits“: „Als Mitglied…“ — Mitglied wovon? Keine Information, wie man eines wird oder was es kostet.

+

Mitgliedschaft vollständig entfernt in dieser Sitzung — der Beitritts-Button, der „Mitgliederpreis“ und alle Mitglieder-Formulierungen sind verschwunden. Bundles zeigen nun einen einzigen Preis mit schlichtem Text zum Bundle-Wert.

+
+ +
+
In Arbeit +

Die Seitenstruktur ergibt keinen Sinn: Drei Klassiker → 250-g-Packung → Bundles → Badbild mit allgemeinem Text. Die 250-g-Packung und das Badbild sind falsch platziert.

+

Das Badbild ist gelöst (jetzt Pulver, siehe oben). Die Neuanordnung der Abschnitte ist der offene Teil — Ihre vollständige Notiz hier gibt uns genau das, was nötig ist, und sie ist als nächste Layout-Aufgabe eingeplant.

+
+ +
+
Erledigt +

Der Shop sollte nach Produktkategorien organisiert sein. Sport Profi ist ein Wäscheprodukt und gehört unter „Haushalt“, nicht unter „Baden & Pflege“.

+

Der Shop ist nach Kategorie organisiert, und Sport Profi ist nun unter Wäsche (Haushalt) einsortiert, nicht mehr unter Pflege.

+
+ +
+
Eingabe nötig +

Die Produkte von Holste und Linda haben keine Produktbeschreibungen.

+

Diese stehen nicht auf der Kaiser-Natron®-Website, daher muss der Text von Ihnen kommen (oder genehmigen Sie, dass wir Platzhalter zur Prüfung entwerfen).

+
+
+ + +
+

Allgemein & Rechtliches 7 Punkte

+ +
+
Erledigt +

„Das Original aus Österreich.“ Das ist meiner Meinung nach nicht zutreffend.

+

Entfernt: die Aussage „Original aus Österreich“ wurde aus dem Footer-Slogan (DE + EN) gelöscht. Der Slogan handelt nun schlicht von reinem Natron für Küche, Haushalt und Pflege.

+
+ +
+
Eingabe nötig +

Allgemeine Geschäftsbedingungen (AGB) fehlen.

+

Die Seitenstruktur kann sofort angelegt werden; der Rechtstext muss von Ihnen kommen.

+
+ +
+
Eingabe nötig +

Widerruf / Widerrufsrecht fehlt. Ein Kündigungsbutton ist seit Juni 2026 verpflichtend.

+

Wir können den „Vertrag kündigen“-Button + Ablauf jetzt mit Platzhaltertext aufbauen; die verbindliche Rechtsformulierung kommt von Ihnen.

+
+ +
+
Eingabe nötig +

Versandinformationen fehlen.

+

Benötigt Ihre Versandbedingungen; wir platzieren sie im Checkout und auf einer eigenen Seite.

+
+ +
+
Eingabe nötig +

Lieferkosten fehlen.

+

Benötigt Ihre Tarife (pauschal / gestaffelt / kostenfrei ab Schwellenwert) zur Anzeige im Warenkorb und Checkout.

+
+ +
+
Erledigt +

Zahlungsoptionen fehlen.

+

Nicht fehlend — die Zahlungsoptionen sind bereits auf der Website vorhanden, hier ist also keine Änderung nötig.

+
+ +
+
Eingabe nötig +

Transparenz: Die Website scheint sich als offizieller Hersteller zu präsentieren, während das Impressum etwas anderes aussagt — das könnte Kunden verwirren.

+

Dies ist eine Positionierungsentscheidung für Sie (offizieller Hersteller vs. Wiederverkäufer). Sobald entschieden, machen wir die Darstellung über die gesamte Website und das Impressum hinweg konsistent.

+
+
+ +
+ Kaiser-Natron® — Umsetzungsstand des Markenreviews + 18 erledigt · 2 beibehalten · 2 in Arbeit · 6 warten auf Eingabe +
+ +
+ + diff --git a/public/review-doc.html b/public/review-doc.html index 1021299..a9032a4 100644 --- a/public/review-doc.html +++ b/public/review-doc.html @@ -212,6 +212,7 @@

Kaiser-Natron® website review —
what's done, what's next

Every point from the brand-owner review, tracked against the current build. Each item carries its real status and a short note on what was changed or what's still needed.

Prepared 24 June 2026 · Branch feat/shop-category-sections · 28 review points

+

Deutsch ↗

diff --git a/public/simple-doc-de.html b/public/simple-doc-de.html new file mode 100644 index 0000000..6f8d54a --- /dev/null +++ b/public/simple-doc-de.html @@ -0,0 +1,313 @@ + + + + + +Kaiser-Natron® — Was sich geändert hat (Überblick in einfacher Sprache) + + + + +
+
+

Überblick in einfacher Sprache

+

Kaiser-Natron® —
was sich geändert hat, einfach erklärt

+

Eine nicht-technische Zusammenfassung der gestalterischen und inhaltlichen Änderungen an der Website. Die ausführliche Entwicklerversion finden Sie unter /dev-doc-de — das ist dieselbe Geschichte, nur ohne den Code.

+

Aktualisiert am 24. Juni 2026 · Branch feat/shop-category-sections

+

English ↗

+
+
+ +
+ +
+ Alles Folgende rückt die Website näher an die etablierte Marke Kaiser-Natron® heran — die offizielle Farbpalette, die Schrift und das kantige Design — anstatt einen neuen Look einzuführen. +
+ +
+

Erscheinungsbild

+
    +
  • Farben. Die Website verwendet jetzt die offizielle Markenpalette: das tiefe Markengrün #006548, ein kräftiges Rot #cc0230 für alles Anklickbare (Buttons, „In den Warenkorb“) und ein sanftes Mint #6eceb2, das Links aufleuchten lässt, wenn Sie mit der Maus darüberfahren. Das warme Gelb #e9c84b dient jetzt nur noch als Hervorhebung von Text auf Grün. (Vollständige Übersicht ganz unten.)
    Auf der Website ansehen
    • +
  • Hintergründe sind weiß. Die Seiten liegen jetzt auf sauberem Weiß #ffffff statt auf den alten getönten Flächen, sodass Produkte und Text besser hervortreten.
    Auf der Website ansehen
    • +
  • Markenschrift. Überschriften und Text verwenden die markeneigene Schrift „Zeitung“, die von der Website selbst gehostet wird (eine lokale .woff2-Datei, nicht von Google geliehen), damit sie immer gleich aussieht und schnell lädt. Eine Schriftfamilie für alles — Überschriften und Fließtext.
    Auf der Website ansehen
    • +
  • Diagonale Abschnittstrenner. Die welligen Linien zwischen den farbigen Bändern wurden durch saubere diagonale Kanten ersetzt.
    Auf der Website ansehen
    • +
  • Buttons. Alle Buttons haben jetzt einen einheitlichen Stil — rot mit weißer Schrift. Die großen „Handlungsaufforderungs“-Buttons auf den Hero-Bannern heben sich klar ab.
    Auf der Website ansehen
    • +
  • Gelbe Hervorhebung entfernt. Überschriften verwenden nicht mehr den alten gelben Akzent; sie wirken jetzt klarer.
    Auf der Website ansehen
    • +
+
+ +
+

Markendetails

+
    +
  • Markenzeichen & Schreibweise. Jede sichtbare Nennung lautet jetzt Kaiser-Natron® — mit Bindestrich und dem Zeichen ®.
    Auf der Website ansehen
    • +
  • Hero-Überschrift. Der einleitende Satz betont jetzt die Vielseitigkeit — „Kaiser-Natron® für fast alles im Haushalt“ — statt der alten Formulierung „das glänzen soll“.
    Auf der Website ansehen
    • +
  • Intro-Bild. Das Marken-Intro verwendet das offizielle Hebe- und Wasserfall-Motiv.
    Auf der Website ansehen
    • +
  • Bild der 250-g-Packung. Das große Packungsbild wurde auf das korrekte Markengrün umgefärbt, sodass es nicht mehr mit seinem Hintergrund kollidiert.
    Auf der Website ansehen
    • +
  • Banner „Ein Pulver, hundert Anwendungen“. Dieses Banner zeigte früher das Bade-Produkt, was nicht zur Botschaft passte. Jetzt zeigt es das Pulver (den großen Eimer), und seine Buttons fügen dieses Pulverprodukt hinzu bzw. verlinken darauf.
    Auf der Website ansehen
    • +
  • Logo & Suche. Die Preise im Such-Dropdown sind jetzt weiß, damit sie auf der grünen Leiste lesbar sind.
    Auf der Website ansehen
    • +
+
+ +
+

Ehrlichkeit & Inhalt

+
    +
  • Hinweis „KI-bearbeitet“ auf Bundle-Bildern. Die Bundle-Fotos, die mit KI-Unterstützung erstellt wurden, tragen jetzt eine kleine, ehrliche Bildunterschrift „KI-bearbeitet“. (Diese kann ausgeblendet werden, sobald echte Fotografien sie ersetzen.)
    Auf der Website ansehen
    • +
  • Revitalisierungs-Bereich entfernt. Der nicht markenkonforme Bereich „Revitalization Center“ (Icons + Name, die der Inhaber beanstandet hat) wurde vorerst von der Website genommen. Er bleibt in Reserve und kann später mit korrigiertem Namen zurückkehren.
    Auf der Website ansehen
    • +
  • „Das Original aus Österreich“ entfernt. Diese Aussage ist aus dem Footer-Slogan (deutsch + englisch) verschwunden, der jetzt nur noch reines Natron für Küche, Haushalt und Pflege beschreibt.
    Auf der Website ansehen
    • +
  • Mitgliedschaft vollständig entfernt. Es gibt kein Mitgliedschaftsprogramm, daher ist jede Spur davon verschwunden: der Button „Mitglied werden“, der niedrigere „Mitgliederpreis“ und die Formulierungen zu Mitgliedervorteilen. Bundles zeigen jetzt einen einzigen Preis, den alle zahlen, und der Abschnitt erklärt, warum ein Bundle praktisch ist (zusammengestellte Sets, alles für einen Bereich, eine Lieferung) statt Mitglieder-Ersparnissen.
    Auf der Website ansehen
    • +
+
+ +
+

Der Shop, nach Anwendung

+
    +
  • + Vier farblich gekennzeichnete Bereiche. Der Shop ist jetzt danach gegliedert, was Sie gerade tun, jeweils mit eigener Markenfarbe: +
    +
    Küche / Kitchen — Limettengrün #c6d47d (Backen, Kochen, Verdauung)
    +
    Reinigung / Clean — Grapefruitrot #eb5a61 (Haushaltsreinigung)
    +
    Wäsche / Wash — Pflaume #c15a7e (Wäsche & Textilpflege)
    +
    Pflege / Care — Orange #f1864c (Bad, Körper)
    +
    + Auf der Website ansehen +
    • +
  • Banner. Jeder Bereich beginnt mit einem farbigen Banner über die volle Breite, das sein Top-Produkt zeigt, mit einem Button „In den Warenkorb“ und einem Button „Mehr erfahren“.
    Auf der Website ansehen
    • +
  • Schnellzugriff auf Kategorien. Unter der Hauptüberschrift des Shops gibt es jetzt eine Reihe abgeschrägter Buttons — einen pro Kategorie, jeder in seiner eigenen Farbe —, die Sie sanft zum jeweiligen Bereich scrollen. Der grüne Kopfbereich geht jetzt nahtlos in den ersten farbigen Bereich über (die kleine weiße Lücke ist verschwunden).
    Auf der Website ansehen
    • +
  • Sport Profi zur Wäsche verschoben. Es ist ein Wäscheprodukt und steht daher jetzt unter Wäsche / Wash statt unter Pflege.
    Auf der Website ansehen
    • +
+
+ +
+

Kategorieseiten

+
    +
  • Drei eigene Seiten sind jetzt erreichbar über den Footer: Küche, Reinigung (Haushalt) und Pflege — jede eine ausführlichere Landingpage mit eigenen Produkten, Vorteilen und Handlungsaufforderung.
    Auf der Website ansehen
    • +
  • Einheitliche Bezeichnungen. Diese Seiten und ihre Footer-Links verwenden jetzt dieselben Kurzbezeichnungen wie die Shop-Bereiche, sodass alles einheitlich klingt.
    Auf der Website ansehen
    • +
  • Die Seite Wäsche / Wash ist zurückgestellt, bis die Markentexte dafür vorliegen — die Wäsche ist in der Zwischenzeit bereits durch den Wash-Bereich des Shops abgedeckt.
    Auf der Website ansehen
    • +
+
+ +
+

Kurzreferenz (für den Entwickler)

+

Das Designsystem öffnen

+

Die genauen Werte, falls sie hilfreich sind — nichts, worauf Sie reagieren müssten.

+
+
Markengrün#006548
+
Rot — Buttons/CTAs#cc0230
+
Mint — Link-Hover#6eceb2
+
Gelb — Hervorhebung auf Grün#e9c84b
+
Weiß — Hintergründe#ffffff
+
Küche — Limette#c6d47d
+
Reinigung — Grapefruit#eb5a61
+
Wäsche — Pflaume#c15a7e
+
Pflege — Orange#f1864c
+
+
    +
  • Schrift: Zeitung (selbst gehostete .woff2), eine Familie für Überschriften und Fließtext.
    • +
  • Buttons: vollständig abgerundete „Pillen“-Form; rote Füllung mit weißer Schrift.
    • +
  • Trenner: gerade diagonale Kanten zwischen den farbigen Bändern (keine Wellen).
    • +
  • Vollständige technische Details: siehe /dev-doc-de.
    • +
+
+ +
+

Warten noch auf eine Entscheidung (Inhaltsverantwortliche)

+
    +
  • Verbleibende Herkunftsangaben. Die Zeile „Original aus Österreich“ ist weg, aber einige Erwähnungen von „abgefüllt in Österreich“ sowie die Wiener Impressumsadresse bleiben bestehen. Sagen Sie uns Bescheid, ob die Korrektur auch darauf ausgeweitet werden soll.
    • +
  • Produktbeschreibungen Holste & Linda. Diese stehen nicht auf der Markenseite, daher müssen die Texte von Ihnen kommen.
    • +
  • Landingpage Wäsche / Wash. Liefern Sie Texte, wenn Sie eine eigene Seite wünschen.
    • +
  • Rechtliche Seiten. AGB, Widerruf/Stornierung, Versand, Lieferkosten und der Transparenzhinweis Hersteller vs. Wiederverkäufer.
    • +
+
+ +
+ Kaiser-Natron® — Änderungsübersicht in einfacher Sprache + Ausführliche Version: /dev-doc-de +
+ +
+ + diff --git a/public/simple-doc.html b/public/simple-doc.html index 2f682a7..d6c5d47 100644 --- a/public/simple-doc.html +++ b/public/simple-doc.html @@ -198,6 +198,7 @@

Kaiser-Natron® —
what changed, in plain words

A non-technical summary of the visual and content changes to the site. The detailed developer version lives at /dev-doc — this is the same story without the code.

Updated 24 June 2026 · Branch feat/shop-category-sections

+

Deutsch ↗

diff --git a/vite.config.js b/vite.config.js index 4c47cc3..f3a0626 100644 --- a/vite.config.js +++ b/vite.config.js @@ -8,7 +8,10 @@ import { fileURLToPath, URL } from 'node:url' // (try_files $uri $uri.html …). This dev-only middleware mirrors that so // the same clean URLs (/dev-doc, /simple-doc, /review-doc) work under // `vite dev` instead of being swallowed by the SPA history fallback. -const DOC_SLUGS = ['dev-doc', 'simple-doc', 'review-doc'] +const DOC_SLUGS = [ + 'dev-doc', 'simple-doc', 'review-doc', + 'dev-doc-de', 'simple-doc-de', 'review-doc-de', +] function cleanDocUrls() { return { name: 'clean-doc-urls',