Entwickler-Handoff · Restyle-Änderungsprotokoll
+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.
+ + +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.
+Zwei neue Farben wurden eingeführt und zwei bestehende umgewidmet.
+| Token | Wert | Bedeutung |
|---|---|---|
--color-accent-fill | #cc0230 | Crimson — die neue Füllung für alle gefüllten CTA-Buttons, Pills und Chips |
--color-accent-fill-hover | oklch(accent-fill − 12% black) | Dunkleres Crimson für Hover |
--color-accent-fill-ink | #ffffff | Weiß — die Text-/Icon-Farbe, die auf Crimson liegt |
--color-highlight | #6eceb2 | Mint — 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.
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 -->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.
Button.vue ist die alleinige Quelle der Wahrheit für Buttons. Varianten werden mit <Button variant="…"> ausgewählt.
// 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',| Variante | Vorher | Nachher |
|---|---|---|
primary (grüner Button) | grüne Füllung, gelber Text | grüne Füllung, weißer Text — bg-brand text-white border-brand |
accent (Haupt-CTA) | gelbe Füllung, grüner Text | crimson Füllung, weißer Text — bg-accent-fill text-accent-fill-ink border-accent-fill |
secondary | Outline | crimson Füllung, weißer Text (gleich wie accent) |
ghost / danger | unverändert | unverä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.
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.
Jeder In-den-Warenkorb-Button ist jetzt die crimsonfarbene accent-Variante.
| Datei | Änderung |
|---|---|
ProductCard.vue | ctaVariant-Prop-Standard 'primary' → 'accent' |
BundleCard.vue | In-den-Warenkorb-<Button> variant="primary" → "accent" |
ShopPage.vue | Produktraster :cta-variant="… 'accent' : 'primary'" → cta-variant="accent" (kein Wechseln mehr) |
ProductPage.vue | Haupt-In-den-Warenkorb bereits accent (unverändert) |
BundlePage.vue | In-den-Warenkorb bereits accent (unverändert) |
<!-- checkout button -->
+<Button variant="accent" …> <!-- was variant="primary" -->Alle zuvor gelben gefüllten Flächen verwenden jetzt das Crimson-Token-Paar bg-accent-fill + text-accent-fill-ink.
| Datei | Element |
|---|---|
IconButton.vue | accent-Variante (Warenkorb-Icon-Button) |
LanguageSwitcher.vue | aktive Sprach-Pill (alle 3 Töne) |
Navbar.vue | mobile Warenkorb-CTA-Pill |
Kaiserhacks.vue | Video-Play-Chip |
Badge.vue | accent-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);
+}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.
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.vue | Headline-<em>-Betonung: text-accent-soft → text-cream |
BrandHero.vue, Revitalization.vue | gleicher Betonungs-Tausch |
CategoryPage.vue, ShopPage.vue, Kaiserhacks.vue | Hero-Eyebrows: text-accent → text-cream/75 |
(--color-cream ist jetzt #ffffff, daher lesen sich diese als Weiß auf den grünen Heros.)
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 ZDie 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).
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).
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.
src/assets/brand/; die extrahierten Pfaddaten liegen in src/components/heroFigures.js (ladyMint, ladyWhite, waterfall).#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.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)).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.
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).
public/products/*.webp (als statische Assets ausgeliefert; der Build spiegelt sie nach dist/products/*.webp). Konvention: transparentes RGBA, ~1200 px hoch.quality 92, keine Skalierung nötig — entspricht bereits den Originalmaßen), sodass Kanten/Text scharf bleiben.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.
Der Markenname wird jetzt durchgängig Kaiser-Natron® geschrieben — mit Bindestrich und ®-Zeichen — bei jeder sichtbaren Erwähnung. Zwei Probleme wurden behoben:
+brand trugen keine Markenkennzeichnung. (Der lange Kaiserhacks-Rezepttext und die title-Felder der Produkte hatten bereits Kaiser-Natron® und blieben unverändert.)Kaiser Natron. Alle wurden auf die Bindestrich-Form vereinheitlicht.| Datei | Was sich änderte |
|---|---|
src/i18n/messages.js | shop.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.js | brand: 'Kaiser-Natron' → 'Kaiser-Natron®' (alle 11 Produkte; in den Suchergebnissen über Search.vue angezeigt) |
src/design-system/components/Logo.vue | standardmäßiges barrierefreies title-Prop 'Kaiser Natron' → 'Kaiser-Natron®' |
src/design-system/components/Navbar.vue | Logo-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).
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."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.
Der Revitalization-Abschnitt wurde zurückgestutzt. Vollständig entfernt:
+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.
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.)
tokens.css — der alte „Haushalt“-Klumpen wurde in Clean (Reinigung) und Wash (Wäsche) aufgeteilt:
| Token | Hex | Abschnitt | Produkte |
|---|---|---|---|
--color-cat-kitchen | #c6d47d (lime) | Küche / cook | Pulver, Tabletten |
--color-cat-clean | #eb5a61 (grapefruit) | Reinigung / clean | Reiniger, Sprays, Entkalker |
--color-cat-wash | #c15a7e (plum) | Wäsche / wash | Waschsoda, Stärke, Fleckentferner |
--color-cat-care | #f1864c (orange) | Pflege / care | Bad, Fußbad, Sport |
Tailwind v4 emittiert automatisch bg-cat-kitchen / bg-cat-clean / bg-cat-wash / bg-cat-care.
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.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.
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.
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.
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.
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.
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-case | Eyebrow + Footer-Label — DE / EN | war |
|---|---|---|---|
/kueche | cook | Küche / Kitchen | „Küche & Backen“ / „Kitchen & baking“ |
/haushalt | clean | Reinigung / Clean | „Haushalt & Reinigung“ / „Home & cleaning“ |
/pflege | care | Pflege / 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.
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).
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.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):
+ 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.
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.
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.{ 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.
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.
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.
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:
+sections; das Label ist section.feature.-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.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'".
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:
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.text-display / text-headline-lg / text-headline-md). Beschreibungen auf die einzige Zeitung-Familie umgeschrieben.HeroPreview-Validator hinzugefügt; ds.hero.description „three surface tones“ → seven.ds.buttons.description korrigiert — accent ist crimson (war „warm-yellow“), „pine-green“ → „brand-green“.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.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 greenA 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.
+ 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 @@ + + + + + +Markenreview · Umsetzungsstand
+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.
+ +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.
+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.
+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.
+Falsche Schrift und falsche Farbpalette.
Korrigiert: selbst gehostete Schrift Zeitung und die offizielle Markenpalette (Grün #006548, Karmesinrot, Mint, Gold) durchgängig.
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.
+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.
+„…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.
+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.
+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.
+„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.
+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.
+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.
+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.
+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.
+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.
+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.
+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.
+„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.
+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.
+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.
+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).
+„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.
+Allgemeine Geschäftsbedingungen (AGB) fehlen.
Die Seitenstruktur kann sofort angelegt werden; der Rechtstext muss von Ihnen kommen.
+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.
+Versandinformationen fehlen.
Benötigt Ihre Versandbedingungen; wir platzieren sie im Checkout und auf einer eigenen Seite.
+Lieferkosten fehlen.
Benötigt Ihre Tarife (pauschal / gestaffelt / kostenfrei ab Schwellenwert) zur Anzeige im Warenkorb und Checkout.
+Zahlungsoptionen fehlen.
Nicht fehlend — die Zahlungsoptionen sind bereits auf der Website vorhanden, hier ist also keine Änderung 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.
+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.
+ 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 @@ + + + + + +Überblick in einfacher Sprache
+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.
+ + +#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.)#ffffff statt auf den alten getönten Flächen, sodass Produkte und Text besser hervortreten..woff2-Datei, nicht von Google geliehen), damit sie immer gleich aussieht und schnell lädt. Eine Schriftfamilie für alles — Überschriften und Fließtext.#c6d47d (Backen, Kochen, Verdauung)#eb5a61 (Haushaltsreinigung)#c15a7e (Wäsche & Textilpflege)#f1864c (Bad, Körper)Die genauen Werte, falls sie hilfreich sind — nichts, worauf Sie reagieren müssten.
+.woff2), eine Familie für Überschriften und Fließtext.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.
+ 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 @@ + + + + + +Entwickler-Handoff · Restyle-Änderungsprotokoll
+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.
+ + +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.
+Zwei neue Farben wurden eingeführt und zwei bestehende umgewidmet.
+| Token | Wert | Bedeutung |
|---|---|---|
--color-accent-fill | #cc0230 | Crimson — die neue Füllung für alle gefüllten CTA-Buttons, Pills und Chips |
--color-accent-fill-hover | oklch(accent-fill − 12% black) | Dunkleres Crimson für Hover |
--color-accent-fill-ink | #ffffff | Weiß — die Text-/Icon-Farbe, die auf Crimson liegt |
--color-highlight | #6eceb2 | Mint — 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.
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 -->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.
Button.vue ist die alleinige Quelle der Wahrheit für Buttons. Varianten werden mit <Button variant="…"> ausgewählt.
// 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',| Variante | Vorher | Nachher |
|---|---|---|
primary (grüner Button) | grüne Füllung, gelber Text | grüne Füllung, weißer Text — bg-brand text-white border-brand |
accent (Haupt-CTA) | gelbe Füllung, grüner Text | crimson Füllung, weißer Text — bg-accent-fill text-accent-fill-ink border-accent-fill |
secondary | Outline | crimson Füllung, weißer Text (gleich wie accent) |
ghost / danger | unverändert | unverä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.
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.
Jeder In-den-Warenkorb-Button ist jetzt die crimsonfarbene accent-Variante.
| Datei | Änderung |
|---|---|
ProductCard.vue | ctaVariant-Prop-Standard 'primary' → 'accent' |
BundleCard.vue | In-den-Warenkorb-<Button> variant="primary" → "accent" |
ShopPage.vue | Produktraster :cta-variant="… 'accent' : 'primary'" → cta-variant="accent" (kein Wechseln mehr) |
ProductPage.vue | Haupt-In-den-Warenkorb bereits accent (unverändert) |
BundlePage.vue | In-den-Warenkorb bereits accent (unverändert) |
<!-- checkout button -->
+<Button variant="accent" …> <!-- was variant="primary" -->Alle zuvor gelben gefüllten Flächen verwenden jetzt das Crimson-Token-Paar bg-accent-fill + text-accent-fill-ink.
| Datei | Element |
|---|---|
IconButton.vue | accent-Variante (Warenkorb-Icon-Button) |
LanguageSwitcher.vue | aktive Sprach-Pill (alle 3 Töne) |
Navbar.vue | mobile Warenkorb-CTA-Pill |
Kaiserhacks.vue | Video-Play-Chip |
Badge.vue | accent-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);
+}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.
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.vue | Headline-<em>-Betonung: text-accent-soft → text-cream |
BrandHero.vue, Revitalization.vue | gleicher Betonungs-Tausch |
CategoryPage.vue, ShopPage.vue, Kaiserhacks.vue | Hero-Eyebrows: text-accent → text-cream/75 |
(--color-cream ist jetzt #ffffff, daher lesen sich diese als Weiß auf den grünen Heros.)
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 ZDie 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).
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).
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.
src/assets/brand/; die extrahierten Pfaddaten liegen in src/components/heroFigures.js (ladyMint, ladyWhite, waterfall).#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.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)).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.
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).
public/products/*.webp (als statische Assets ausgeliefert; der Build spiegelt sie nach dist/products/*.webp). Konvention: transparentes RGBA, ~1200 px hoch.quality 92, keine Skalierung nötig — entspricht bereits den Originalmaßen), sodass Kanten/Text scharf bleiben.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.
Der Markenname wird jetzt durchgängig Kaiser-Natron® geschrieben — mit Bindestrich und ®-Zeichen — bei jeder sichtbaren Erwähnung. Zwei Probleme wurden behoben:
+brand trugen keine Markenkennzeichnung. (Der lange Kaiserhacks-Rezepttext und die title-Felder der Produkte hatten bereits Kaiser-Natron® und blieben unverändert.)Kaiser Natron. Alle wurden auf die Bindestrich-Form vereinheitlicht.| Datei | Was sich änderte |
|---|---|
src/i18n/messages.js | shop.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.js | brand: 'Kaiser-Natron' → 'Kaiser-Natron®' (alle 11 Produkte; in den Suchergebnissen über Search.vue angezeigt) |
src/design-system/components/Logo.vue | standardmäßiges barrierefreies title-Prop 'Kaiser Natron' → 'Kaiser-Natron®' |
src/design-system/components/Navbar.vue | Logo-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).
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."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.
Der Revitalization-Abschnitt wurde zurückgestutzt. Vollständig entfernt:
+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.
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.)
tokens.css — der alte „Haushalt“-Klumpen wurde in Clean (Reinigung) und Wash (Wäsche) aufgeteilt:
| Token | Hex | Abschnitt | Produkte |
|---|---|---|---|
--color-cat-kitchen | #c6d47d (lime) | Küche / cook | Pulver, Tabletten |
--color-cat-clean | #eb5a61 (grapefruit) | Reinigung / clean | Reiniger, Sprays, Entkalker |
--color-cat-wash | #c15a7e (plum) | Wäsche / wash | Waschsoda, Stärke, Fleckentferner |
--color-cat-care | #f1864c (orange) | Pflege / care | Bad, Fußbad, Sport |
Tailwind v4 emittiert automatisch bg-cat-kitchen / bg-cat-clean / bg-cat-wash / bg-cat-care.
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.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.
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.
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.
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.
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.
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-case | Eyebrow + Footer-Label — DE / EN | war |
|---|---|---|---|
/kueche | cook | Küche / Kitchen | „Küche & Backen“ / „Kitchen & baking“ |
/haushalt | clean | Reinigung / Clean | „Haushalt & Reinigung“ / „Home & cleaning“ |
/pflege | care | Pflege / 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.
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).
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.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):
+ 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.
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.
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.{ 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.
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.
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.
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:
+sections; das Label ist section.feature.-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.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'".
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:
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.text-display / text-headline-lg / text-headline-md). Beschreibungen auf die einzige Zeitung-Familie umgeschrieben.HeroPreview-Validator hinzugefügt; ds.hero.description „three surface tones“ → seven.ds.buttons.description korrigiert — accent ist crimson (war „warm-yellow“), „pine-green“ → „brand-green“.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.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 greenA 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.
+ 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 @@ + + + + + +Markenreview · Umsetzungsstand
+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.
+ +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.
+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.
+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.
+Falsche Schrift und falsche Farbpalette.
Korrigiert: selbst gehostete Schrift Zeitung und die offizielle Markenpalette (Grün #006548, Karmesinrot, Mint, Gold) durchgängig.
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.
+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.
+„…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.
+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.
+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.
+„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.
+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.
+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.
+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.
+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.
+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.
+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.
+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.
+„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.
+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.
+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.
+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).
+„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.
+Allgemeine Geschäftsbedingungen (AGB) fehlen.
Die Seitenstruktur kann sofort angelegt werden; der Rechtstext muss von Ihnen kommen.
+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.
+Versandinformationen fehlen.
Benötigt Ihre Versandbedingungen; wir platzieren sie im Checkout und auf einer eigenen Seite.
+Lieferkosten fehlen.
Benötigt Ihre Tarife (pauschal / gestaffelt / kostenfrei ab Schwellenwert) zur Anzeige im Warenkorb und Checkout.
+Zahlungsoptionen fehlen.
Nicht fehlend — die Zahlungsoptionen sind bereits auf der Website vorhanden, hier ist also keine Änderung 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.
+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.
+ 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 @@ + + + + + +Überblick in einfacher Sprache
+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.
+ + +#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.)#ffffff statt auf den alten getönten Flächen, sodass Produkte und Text besser hervortreten..woff2-Datei, nicht von Google geliehen), damit sie immer gleich aussieht und schnell lädt. Eine Schriftfamilie für alles — Überschriften und Fließtext.#c6d47d (Backen, Kochen, Verdauung)#eb5a61 (Haushaltsreinigung)#c15a7e (Wäsche & Textilpflege)#f1864c (Bad, Körper)Die genauen Werte, falls sie hilfreich sind — nichts, worauf Sie reagieren müssten.
+.woff2), eine Familie für Überschriften und Fließtext.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.
+ 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',