diff --git a/dist/simple-doc.html b/dist/simple-doc.html
new file mode 100644
index 0000000..7ad2bf3
--- /dev/null
+++ b/dist/simple-doc.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Kaiser-Natron® — What Changed (Plain-Language Guide)</title>
+<style>
+  :root {
+    --brand: #006548;
+    --brand-soft: #4a9079;
+    --crimson: #cc0230;
+    --mint: #6eceb2;
+    --gold: #e9c84b;
+    --ink: #0a2c20;
+    --muted: #5c7a6f;
+    --paper: #ffffff;
+    --cream: #f4f7f4;
+    --line: #d9e4df;
+    --kitchen: #c6d47d;
+    --clean: #eb5a61;
+    --wash: #c15a7e;
+    --care: #f1864c;
+    --serif: 'Zeitung', 'Iowan Old Style', 'Palatino', Georgia, serif;
+    --sans: 'Zeitung', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  }
+  * { box-sizing: border-box; }
+  html { -webkit-font-smoothing: antialiased; }
+  body {
+    margin: 0;
+    font-family: var(--sans);
+    color: var(--ink);
+    background: var(--cream);
+    line-height: 1.6;
+  }
+  .wrap { max-width: 860px; margin: 0 auto; padding: 0 24px 80px; }
+
+  /* Header */
+  header.hero {
+    background: var(--brand);
+    color: #fff;
+    padding: 56px 24px 64px;
+    position: relative;
+    overflow: hidden;
+  }
+  header.hero::after {
+    content: "";
+    position: absolute;
+    left: 0; right: 0; bottom: -1px;
+    height: 64px;
+    background: var(--cream);
+    clip-path: polygon(0 100%, 100% 100%, 100% 38%);
+  }
+  .hero-inner { max-width: 860px; margin: 0 auto; position: relative; z-index: 1; }
+  .eyebrow {
+    text-transform: uppercase;
+    letter-spacing: .22em;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--mint);
+    margin: 0 0 14px;
+  }
+  h1 {
+    font-family: var(--serif);
+    font-weight: 600;
+    font-size: clamp(30px, 5vw, 46px);
+    line-height: 1.05;
+    margin: 0 0 14px;
+    letter-spacing: -0.01em;
+  }
+  h1 em { font-style: italic; font-weight: 300; color: var(--mint); }
+  .hero p { max-width: 60ch; color: rgba(255,255,255,.85); margin: 0; font-size: 16px; }
+  .meta { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.7); }
+
+  /* Intro */
+  .intro {
+    background: var(--paper);
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    padding: 18px 22px;
+    margin: -34px 0 38px;
+    position: relative;
+    z-index: 2;
+    box-shadow: 0 10px 30px rgba(0,101,72,.07);
+    font-size: 15px;
+    color: var(--muted);
+  }
+
+  /* Sections */
+  section.group { margin-bottom: 34px; }
+  .group > h2 {
+    font-family: var(--serif);
+    font-size: 24px;
+    font-weight: 600;
+    margin: 0 0 16px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid var(--brand);
+  }
+  ul.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
+  ul.items li {
+    background: var(--paper);
+    border: 1px solid var(--line);
+    border-left: 4px solid var(--mint);
+    border-radius: 10px;
+    padding: 14px 16px;
+    font-size: 15px;
+  }
+  ul.items li strong { color: var(--brand); font-weight: 600; }
+  ul.items li em { font-style: italic; color: var(--ink); }
+
+  /* Category swatch list */
+  .cats { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
+  .cat { display: flex; align-items: center; gap: 12px; font-size: 14px; }
+  .cat .sw { width: 26px; height: 18px; border-radius: 4px; flex: none; border: 1px solid rgba(0,0,0,.06); }
+
+  /* "Waiting on you" — crimson accent */
+  .group.waiting > h2 { border-bottom-color: var(--crimson); }
+  .group.waiting ul.items li { border-left-color: var(--crimson); }
+
+  footer.foot {
+    margin-top: 44px;
+    padding-top: 20px;
+    border-top: 1px solid var(--line);
+    font-size: 12.5px;
+    color: var(--muted);
+    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
+  }
+
+  @media print {
+    body { background: #fff; }
+    .intro, ul.items li { box-shadow: none; }
+    ul.items li { break-inside: avoid; }
+  }
+</style>
+</head>
+<body>
+
+<header class="hero">
+  <div class="hero-inner">
+    <p class="eyebrow">Plain-Language Guide</p>
+    <h1>Kaiser-Natron<sup>®</sup> —<br><em>what changed, in plain words</em></h1>
+    <p>A non-technical summary of the visual and content changes to the site. The detailed developer version lives at <strong>/dev-doc.html</strong> — this is the same story without the code.</p>
+    <p class="meta">Updated 24 June 2026 · Branch feat/shop-category-sections</p>
+  </div>
+</header>
+
+<div class="wrap">
+
+  <div class="intro">
+    Everything below pulls the site <em>toward</em> the established Kaiser-Natron® brand — the official palette, typeface and angular design — rather than introducing a new look.
+  </div>
+
+  <section class="group">
+    <h2>Look &amp; feel</h2>
+    <ul class="items">
+      <li><strong>Colours.</strong> The site now uses the official brand palette: the deep brand green, a crimson red for anything clickable (buttons, "add to cart"), and a soft mint that lights up links when you hover them.</li>
+      <li><strong>Backgrounds are white.</strong> Pages sit on clean white instead of the old tinted panels, so products and text stand out.</li>
+      <li><strong>Brand typeface.</strong> Headlines and text use the brand's own "Zeitung" font, loaded directly by the site (not borrowed from Google), so it always looks the same and loads fast.</li>
+      <li><strong>Section dividers are diagonal.</strong> The wavy lines between coloured bands were replaced with clean diagonal edges.</li>
+      <li><strong>Buttons.</strong> All buttons share one consistent style — crimson with white text. The big "call to action" buttons on hero banners stand out clearly.</li>
+      <li><strong>Removed the yellow highlight.</strong> Headlines no longer use the old yellow accent; they're cleaner now.</li>
+    </ul>
+  </section>
+
+  <section class="group">
+    <h2>Brand details</h2>
+    <ul class="items">
+      <li><strong>Trademark &amp; spelling.</strong> Every visible mention now reads <strong>Kaiser-Natron®</strong> — hyphenated, with the ® symbol.</li>
+      <li><strong>Hero headline.</strong> The opening line now speaks to versatility — <em>"Kaiser-Natron® for almost anything at home"</em> — instead of the old "that should shine" wording.</li>
+      <li><strong>Intro artwork.</strong> The brand intro uses the official Hebe + waterfall artwork.</li>
+      <li><strong>250 g pack image.</strong> The large pack image was recoloured to the correct brand green so it no longer clashes with its background.</li>
+      <li><strong>"One powder, a hundred uses" banner.</strong> This banner used to show the <em>bath</em> product, which didn't match its message. It now shows <strong>powder</strong> (the bulk bucket), and its buttons add/link to that powder product.</li>
+      <li><strong>Logo &amp; search.</strong> Prices in the search dropdown are now white so they're readable on the green bar.</li>
+    </ul>
+  </section>
+
+  <section class="group">
+    <h2>Honesty &amp; content</h2>
+    <ul class="items">
+      <li><strong>"AI Edited" note on bundle images.</strong> The bundle photos that were AI-assisted now carry a small, honest "AI Edited" caption. (These can be switched off the moment real photographs replace them.)</li>
+      <li><strong>Revitalization section removed.</strong> The off-brand "Revitalization Center" section (icons + name the owner flagged) is taken off the site for now. It's kept in reserve and can return with a corrected name later.</li>
+      <li><strong>"The Original from Austria" removed.</strong> That claim is gone from the footer tagline (German + English), which now just describes pure natron for the kitchen, home and care.</li>
+      <li><strong>Membership fully removed.</strong> There's no membership programme, so every trace of one is gone: the "become a member" button, the lower "member price", and the member-perks wording. <strong>Bundles now show a single price</strong> everyone pays, and the section talks about why a bundle is handy (curated sets, everything for one area, one delivery) instead of member savings.</li>
+    </ul>
+  </section>
+
+  <section class="group">
+    <h2>The shop, by use</h2>
+    <ul class="items">
+      <li>
+        <strong>Four colour-coded sections.</strong> The shop is now organised by what you're doing, each with its own brand colour:
+        <div class="cats">
+          <div class="cat"><span class="sw" style="background:var(--kitchen)"></span> <span><strong>Küche / Kitchen</strong> — lime green (baking, cooking, digestion)</span></div>
+          <div class="cat"><span class="sw" style="background:var(--clean)"></span> <span><strong>Reinigung / Clean</strong> — grapefruit red (household cleaning)</span></div>
+          <div class="cat"><span class="sw" style="background:var(--wash)"></span> <span><strong>Wäsche / Wash</strong> — plum (laundry &amp; textile care)</span></div>
+          <div class="cat"><span class="sw" style="background:var(--care)"></span> <span><strong>Pflege / Care</strong> — orange (bath, body)</span></div>
+        </div>
+      </li>
+      <li><strong>Banners.</strong> Each section opens with a full-width colour banner showing its star product, with an "add to cart" and a "learn more" button.</li>
+      <li><strong>Quick category buttons.</strong> Under the shop's main heading there's now a row of angled buttons — one per category, each in its own colour — that smoothly scroll you down to that section. The green header now flows straight into the first coloured section (the little white gap is gone).</li>
+      <li><strong>Sport Profi moved to Laundry.</strong> It's a laundry product, so it now sits under Wäsche / Wash instead of Care.</li>
+    </ul>
+  </section>
+
+  <section class="group">
+    <h2>Category pages</h2>
+    <ul class="items">
+      <li><strong>Three dedicated pages are now reachable</strong> from the footer: <strong>Küche</strong>, <strong>Reinigung</strong> (Haushalt) and <strong>Pflege</strong> — each a fuller landing page with its own products, benefits and call-to-action.</li>
+      <li><strong>Consistent names.</strong> These pages and their footer links now use the same short names as the shop sections, so everything reads the same way.</li>
+      <li><strong>Wäsche / Wash page is on hold</strong> until its brand copy is supplied — laundry is already covered by the shop's Wash section in the meantime.</li>
+    </ul>
+  </section>
+
+  <section class="group waiting">
+    <h2>Still waiting on a decision (content owner)</h2>
+    <ul class="items">
+      <li><strong>Remaining origin wording.</strong> The "Original from Austria" line is gone, but a couple of "bottled in Austria" mentions and the Vienna imprint address remain. Let us know if the correction should extend to those.</li>
+      <li><strong>Holste &amp; Linda product descriptions.</strong> These aren't on the brand site, so the copy needs to come from you.</li>
+      <li><strong>Wäsche / Wash landing page.</strong> Provide copy if you want a dedicated page.</li>
+      <li><strong>Legal pages.</strong> Terms (AGB), withdrawal/cancellation, shipping, delivery costs, and the manufacturer-vs-reseller transparency note.</li>
+    </ul>
+  </section>
+
+  <footer class="foot">
+    <span>Kaiser-Natron® — plain-language change guide</span>
+    <span>Detailed version: /dev-doc.html</span>
+  </footer>
+
+</div>
+</body>
+</html>
diff --git a/public/simple-doc.html b/public/simple-doc.html
new file mode 100644
index 0000000..7ad2bf3
--- /dev/null
+++ b/public/simple-doc.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Kaiser-Natron® — What Changed (Plain-Language Guide)</title>
+<style>
+  :root {
+    --brand: #006548;
+    --brand-soft: #4a9079;
+    --crimson: #cc0230;
+    --mint: #6eceb2;
+    --gold: #e9c84b;
+    --ink: #0a2c20;
+    --muted: #5c7a6f;
+    --paper: #ffffff;
+    --cream: #f4f7f4;
+    --line: #d9e4df;
+    --kitchen: #c6d47d;
+    --clean: #eb5a61;
+    --wash: #c15a7e;
+    --care: #f1864c;
+    --serif: 'Zeitung', 'Iowan Old Style', 'Palatino', Georgia, serif;
+    --sans: 'Zeitung', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  }
+  * { box-sizing: border-box; }
+  html { -webkit-font-smoothing: antialiased; }
+  body {
+    margin: 0;
+    font-family: var(--sans);
+    color: var(--ink);
+    background: var(--cream);
+    line-height: 1.6;
+  }
+  .wrap { max-width: 860px; margin: 0 auto; padding: 0 24px 80px; }
+
+  /* Header */
+  header.hero {
+    background: var(--brand);
+    color: #fff;
+    padding: 56px 24px 64px;
+    position: relative;
+    overflow: hidden;
+  }
+  header.hero::after {
+    content: "";
+    position: absolute;
+    left: 0; right: 0; bottom: -1px;
+    height: 64px;
+    background: var(--cream);
+    clip-path: polygon(0 100%, 100% 100%, 100% 38%);
+  }
+  .hero-inner { max-width: 860px; margin: 0 auto; position: relative; z-index: 1; }
+  .eyebrow {
+    text-transform: uppercase;
+    letter-spacing: .22em;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--mint);
+    margin: 0 0 14px;
+  }
+  h1 {
+    font-family: var(--serif);
+    font-weight: 600;
+    font-size: clamp(30px, 5vw, 46px);
+    line-height: 1.05;
+    margin: 0 0 14px;
+    letter-spacing: -0.01em;
+  }
+  h1 em { font-style: italic; font-weight: 300; color: var(--mint); }
+  .hero p { max-width: 60ch; color: rgba(255,255,255,.85); margin: 0; font-size: 16px; }
+  .meta { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.7); }
+
+  /* Intro */
+  .intro {
+    background: var(--paper);
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    padding: 18px 22px;
+    margin: -34px 0 38px;
+    position: relative;
+    z-index: 2;
+    box-shadow: 0 10px 30px rgba(0,101,72,.07);
+    font-size: 15px;
+    color: var(--muted);
+  }
+
+  /* Sections */
+  section.group { margin-bottom: 34px; }
+  .group > h2 {
+    font-family: var(--serif);
+    font-size: 24px;
+    font-weight: 600;
+    margin: 0 0 16px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid var(--brand);
+  }
+  ul.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
+  ul.items li {
+    background: var(--paper);
+    border: 1px solid var(--line);
+    border-left: 4px solid var(--mint);
+    border-radius: 10px;
+    padding: 14px 16px;
+    font-size: 15px;
+  }
+  ul.items li strong { color: var(--brand); font-weight: 600; }
+  ul.items li em { font-style: italic; color: var(--ink); }
+
+  /* Category swatch list */
+  .cats { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
+  .cat { display: flex; align-items: center; gap: 12px; font-size: 14px; }
+  .cat .sw { width: 26px; height: 18px; border-radius: 4px; flex: none; border: 1px solid rgba(0,0,0,.06); }
+
+  /* "Waiting on you" — crimson accent */
+  .group.waiting > h2 { border-bottom-color: var(--crimson); }
+  .group.waiting ul.items li { border-left-color: var(--crimson); }
+
+  footer.foot {
+    margin-top: 44px;
+    padding-top: 20px;
+    border-top: 1px solid var(--line);
+    font-size: 12.5px;
+    color: var(--muted);
+    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
+  }
+
+  @media print {
+    body { background: #fff; }
+    .intro, ul.items li { box-shadow: none; }
+    ul.items li { break-inside: avoid; }
+  }
+</style>
+</head>
+<body>
+
+<header class="hero">
+  <div class="hero-inner">
+    <p class="eyebrow">Plain-Language Guide</p>
+    <h1>Kaiser-Natron<sup>®</sup> —<br><em>what changed, in plain words</em></h1>
+    <p>A non-technical summary of the visual and content changes to the site. The detailed developer version lives at <strong>/dev-doc.html</strong> — this is the same story without the code.</p>
+    <p class="meta">Updated 24 June 2026 · Branch feat/shop-category-sections</p>
+  </div>
+</header>
+
+<div class="wrap">
+
+  <div class="intro">
+    Everything below pulls the site <em>toward</em> the established Kaiser-Natron® brand — the official palette, typeface and angular design — rather than introducing a new look.
+  </div>
+
+  <section class="group">
+    <h2>Look &amp; feel</h2>
+    <ul class="items">
+      <li><strong>Colours.</strong> The site now uses the official brand palette: the deep brand green, a crimson red for anything clickable (buttons, "add to cart"), and a soft mint that lights up links when you hover them.</li>
+      <li><strong>Backgrounds are white.</strong> Pages sit on clean white instead of the old tinted panels, so products and text stand out.</li>
+      <li><strong>Brand typeface.</strong> Headlines and text use the brand's own "Zeitung" font, loaded directly by the site (not borrowed from Google), so it always looks the same and loads fast.</li>
+      <li><strong>Section dividers are diagonal.</strong> The wavy lines between coloured bands were replaced with clean diagonal edges.</li>
+      <li><strong>Buttons.</strong> All buttons share one consistent style — crimson with white text. The big "call to action" buttons on hero banners stand out clearly.</li>
+      <li><strong>Removed the yellow highlight.</strong> Headlines no longer use the old yellow accent; they're cleaner now.</li>
+    </ul>
+  </section>
+
+  <section class="group">
+    <h2>Brand details</h2>
+    <ul class="items">
+      <li><strong>Trademark &amp; spelling.</strong> Every visible mention now reads <strong>Kaiser-Natron®</strong> — hyphenated, with the ® symbol.</li>
+      <li><strong>Hero headline.</strong> The opening line now speaks to versatility — <em>"Kaiser-Natron® for almost anything at home"</em> — instead of the old "that should shine" wording.</li>
+      <li><strong>Intro artwork.</strong> The brand intro uses the official Hebe + waterfall artwork.</li>
+      <li><strong>250 g pack image.</strong> The large pack image was recoloured to the correct brand green so it no longer clashes with its background.</li>
+      <li><strong>"One powder, a hundred uses" banner.</strong> This banner used to show the <em>bath</em> product, which didn't match its message. It now shows <strong>powder</strong> (the bulk bucket), and its buttons add/link to that powder product.</li>
+      <li><strong>Logo &amp; search.</strong> Prices in the search dropdown are now white so they're readable on the green bar.</li>
+    </ul>
+  </section>
+
+  <section class="group">
+    <h2>Honesty &amp; content</h2>
+    <ul class="items">
+      <li><strong>"AI Edited" note on bundle images.</strong> The bundle photos that were AI-assisted now carry a small, honest "AI Edited" caption. (These can be switched off the moment real photographs replace them.)</li>
+      <li><strong>Revitalization section removed.</strong> The off-brand "Revitalization Center" section (icons + name the owner flagged) is taken off the site for now. It's kept in reserve and can return with a corrected name later.</li>
+      <li><strong>"The Original from Austria" removed.</strong> That claim is gone from the footer tagline (German + English), which now just describes pure natron for the kitchen, home and care.</li>
+      <li><strong>Membership fully removed.</strong> There's no membership programme, so every trace of one is gone: the "become a member" button, the lower "member price", and the member-perks wording. <strong>Bundles now show a single price</strong> everyone pays, and the section talks about why a bundle is handy (curated sets, everything for one area, one delivery) instead of member savings.</li>
+    </ul>
+  </section>
+
+  <section class="group">
+    <h2>The shop, by use</h2>
+    <ul class="items">
+      <li>
+        <strong>Four colour-coded sections.</strong> The shop is now organised by what you're doing, each with its own brand colour:
+        <div class="cats">
+          <div class="cat"><span class="sw" style="background:var(--kitchen)"></span> <span><strong>Küche / Kitchen</strong> — lime green (baking, cooking, digestion)</span></div>
+          <div class="cat"><span class="sw" style="background:var(--clean)"></span> <span><strong>Reinigung / Clean</strong> — grapefruit red (household cleaning)</span></div>
+          <div class="cat"><span class="sw" style="background:var(--wash)"></span> <span><strong>Wäsche / Wash</strong> — plum (laundry &amp; textile care)</span></div>
+          <div class="cat"><span class="sw" style="background:var(--care)"></span> <span><strong>Pflege / Care</strong> — orange (bath, body)</span></div>
+        </div>
+      </li>
+      <li><strong>Banners.</strong> Each section opens with a full-width colour banner showing its star product, with an "add to cart" and a "learn more" button.</li>
+      <li><strong>Quick category buttons.</strong> Under the shop's main heading there's now a row of angled buttons — one per category, each in its own colour — that smoothly scroll you down to that section. The green header now flows straight into the first coloured section (the little white gap is gone).</li>
+      <li><strong>Sport Profi moved to Laundry.</strong> It's a laundry product, so it now sits under Wäsche / Wash instead of Care.</li>
+    </ul>
+  </section>
+
+  <section class="group">
+    <h2>Category pages</h2>
+    <ul class="items">
+      <li><strong>Three dedicated pages are now reachable</strong> from the footer: <strong>Küche</strong>, <strong>Reinigung</strong> (Haushalt) and <strong>Pflege</strong> — each a fuller landing page with its own products, benefits and call-to-action.</li>
+      <li><strong>Consistent names.</strong> These pages and their footer links now use the same short names as the shop sections, so everything reads the same way.</li>
+      <li><strong>Wäsche / Wash page is on hold</strong> until its brand copy is supplied — laundry is already covered by the shop's Wash section in the meantime.</li>
+    </ul>
+  </section>
+
+  <section class="group waiting">
+    <h2>Still waiting on a decision (content owner)</h2>
+    <ul class="items">
+      <li><strong>Remaining origin wording.</strong> The "Original from Austria" line is gone, but a couple of "bottled in Austria" mentions and the Vienna imprint address remain. Let us know if the correction should extend to those.</li>
+      <li><strong>Holste &amp; Linda product descriptions.</strong> These aren't on the brand site, so the copy needs to come from you.</li>
+      <li><strong>Wäsche / Wash landing page.</strong> Provide copy if you want a dedicated page.</li>
+      <li><strong>Legal pages.</strong> Terms (AGB), withdrawal/cancellation, shipping, delivery costs, and the manufacturer-vs-reseller transparency note.</li>
+    </ul>
+  </section>
+
+  <footer class="foot">
+    <span>Kaiser-Natron® — plain-language change guide</span>
+    <span>Detailed version: /dev-doc.html</span>
+  </footer>
+
+</div>
+</body>
+</html>
