diff --git a/CHANGELOG.md b/CHANGELOG.md
index 69080d8..366acf5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,35 @@
 # Changelog
 
+## 0.12.0 — 2026-09-30
+
+Import & Modernize, and 90 layouts. See the [release notes](docs/RELEASE-0.12.0.md).
+
+- **Modernize tab.** Paste or import any Bricks JSON and BricksSnap rebuilds it on its design system. See [Modernize](docs/MODERNIZE.md).
+  - Colors become tokens by role, and the source's brand colors are replaced by the kit's.
+  - Font sizes, spacing and corners land on the kit's fluid scale.
+  - Repeated inline styles become `bs-<block>-<role>` classes.
+  - Missing mobile rules are added.
+  - The brand kit restyles the result.
+  - Compare before and after at three widths, read the report, then download, copy or open it in Staging. It runs locally.
+- **MCP.** New tool `bricks_modernize_template` (eleven tools).
+- **50 new layouts (90 in total)** for every section type, among them:
+  - bento hero, hero with form, hero with numbers;
+  - photo service cards and service tabs;
+  - vertical steps;
+  - pricing switch, plans as rows, price tiles;
+  - quote wall;
+  - team photo cards;
+  - portfolio bento and project index;
+  - FAQ accordion;
+  - logo tiles and marquee;
+  - masonry and bento gallery;
+  - CTA with background image;
+  - big-name footer;
+  - split login, 404 and coming-soon pages.
+- **Native tabs and accordion.** The pricing switch and service tabs use Bricks' nested tabs, and the FAQ accordion uses Bricks' nested accordion with FAQ schema. The preview shows them as Bricks does (first tab open), and the validator accepts their `_hidden` classes.
+- **Remote library.** 206 templates: 13 designs as pages and all 90 layouts as sections, in German and English.
+- **Roadmap.** "Open in BricksSnap" cooperation with template libraries and a community gallery with an explicit open license are planned for later.
+
 ## 0.11.1 — 2026-09-30
 
 - **Pointer cursor.** Everything clickable (buttons, tabs, filter chips, cards, selects, checkboxes, expandable sections) shows the hand cursor again. Tailwind CSS v4 gives buttons the default arrow; disabled controls now show "not allowed". Suggested on the Bricks forum.
diff --git a/README.md b/README.md
index ac54e0a..d4bf0fb 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,8 @@ A Next.js tool that creates editable **Bricks Builder JSON templates**. Build mo
 
 Free for your own and your clients' websites. You may not offer BricksSnap itself to others as a hosted app or sell it; see [licensing](LICENSING.md).
 
+**v0.12: [Import & Modernize](docs/MODERNIZE.md) and 90 layouts** ([release notes](docs/RELEASE-0.12.0.md)). Paste any Bricks JSON and get it back on your design system: tokens instead of fixed colors, fluid sizes, clean `bs-` classes and mobile rules, restyled by your brand kit. The Studio grows from 40 to 90 layouts, including bento grids, a pricing switch and a FAQ accordion built on Bricks' native tabs and accordion.
+
 **v0.9: Library of ready-made designs.** 12 complete designs for different industries and styles, as pages and sections, in the app and in Bricks' remote library ([release notes](docs/RELEASE-0.9.0.md)).
 
 **v0.8: [Studio](docs/STUDIO.md)** ([release notes](docs/RELEASE-0.8.0.md)). Pick from 40 layouts in five style directions, set your brand color, fonts, corners and spacing, and get copy written for your industry in German or English. Export native Bricks JSON whose global classes follow one design system, and install that system's palette and variables on a connected site.
@@ -27,7 +29,8 @@ v0.5 builds on v0.4's [read-only connection](docs/RELEASE-0.4.0.md) and v0.3's [
 
 ## Features
 
-- Studio: 40 layouts in 22 section types and five style directions, a brand kit (color, fonts, corners, spacing, light/dark), industry copy in German or English, live preview at three widths, quality checks
+- Studio: 90 layouts in 22 section types and five style directions, a brand kit (color, fonts, corners, spacing, light/dark), industry copy in German or English, live preview at three widths, quality checks
+- Modernize: any Bricks JSON rebuilt on the design system (tokens, fluid scale, `bs-` classes, mobile rules), locally in the browser
 - Design system: `bs-` global classes with `var(--bs-*, fallback)` values; palette and variables installable on a connected site with ownership guards
 - Pre-built template library (Hero, Navbar, Features, Pricing, Testimonials, Footer and more)
 - Full page presets
@@ -38,7 +41,7 @@ v0.5 builds on v0.4's [read-only connection](docs/RELEASE-0.4.0.md) and v0.3's [
 - Bricks 2.4.1 native element/control registry, reference repair and responsive defaults
 - Export types and preservation of global classes/component metadata
 - Staging workspace: prepend/append sections or insert after a root, with ID collision handling and structural comparison
-- Ten MCP tools over optional HTTP or local stdio; Studio pages, section generation, page assembly, merge and comparison
+- Eleven MCP tools over optional HTTP or local stdio; Studio pages, modernizing Bricks JSON, section generation, page assembly, merge and comparison
 - Local WordPress connection: page search, live page import with Bricks' document digest, site class and palette import, class conflict warnings
 - Bricks-rendered before/after preview (1280/390 px), guarded apply with read-back verification and revision restore
 - Import of external images into the site's media library and guarded creation of missing global classes before applying
diff --git a/docs/CLIENTS.md b/docs/CLIENTS.md
index 2febc51..f1332c8 100644
--- a/docs/CLIENTS.md
+++ b/docs/CLIENTS.md
@@ -52,7 +52,7 @@ Other clients use the same command and environment in their JSON format.
 ## Tool discovery
 
 - **Bricks tools.** The site exposes a few Bricks abilities as direct tools, for example `bricks-get-design-context`. Others are called through `mcp-adapter-execute-ability` with `{ "ability_name": "bricks/…", "parameters": {…} }`. Use `mcp-adapter-get-ability-info` for exact parameters: Bricks rejects unknown keys.
-- **BricksSnap tools.** BricksSnap's ten tools start with `bricks_` (underscores), for example `bricks_kit_page` or `bricks_merge_templates`.
+- **BricksSnap tools.** BricksSnap's eleven tools start with `bricks_` (underscores), for example `bricks_kit_page` or `bricks_merge_templates`.
 
 ## Workflows that combine both
 
diff --git a/docs/MODERNIZE.md b/docs/MODERNIZE.md
new file mode 100644
index 0000000..740b2d5
--- /dev/null
+++ b/docs/MODERNIZE.md
@@ -0,0 +1,78 @@
+# Import & Modernize: bring any section onto your design system
+
+The **Modernize** tab takes Bricks JSON you already have and rebuilds it on BricksSnap's design system. Sources include a section copied from a client site, an old project or a template you own. Afterwards the brand kit restyles it like any Studio layout: color, fonts, corners, spacing and dark mode.
+
+It runs in your browser. Nothing is uploaded and nothing is fetched from other sites: you bring the JSON.
+
+## What it changes
+
+| Before | After |
+|---|---|
+| Fixed colors (`#7c3aed`, `rgba(…)`) | Design tokens by role: section and card backgrounds, headings, text, muted text, borders, buttons, icons, shadows. Alpha stays as `color-mix(in srgb, var(--bs-…) N%, transparent)`. |
+| Font sizes in px or rem | The kit's type scale (`--bs-text-s` … `--bs-text-display`), fluid with `clamp()` |
+| Spacing and corners | The kit's spacing and radius tokens (`--bs-space-*`, `--bs-radius-*`, `--bs-radius-btn`), sections on `--bs-space-section` and `--bs-gutter` |
+| The same inline styles on many elements | One global class per role, `bs-<block>-<role>`, shared by every element that looked the same |
+| Source classes (for example `feature-card`) | Merged into the new classes; the element keeps its own overrides |
+| Font families | The kit's heading and body fonts |
+| Framework variables (Automatic CSS, Core Framework) | Mapped by name to BricksSnap tokens where the meaning is clear; unknown ones are kept and listed |
+| Custom CSS with `%root%`, `#brxe-…` or old class names | Rewritten to the new class; colors and sizes inside mapped like the controls |
+
+**Brand colors.** Modernize detects the source's brand colors: saturated mid-tone colors, weighted by how often they are used. They become `primary` and `accent`, so your kit's brand color replaces them everywhere. Tints and near-whites are not mistaken for the brand.
+
+**Buttons.** Bricks button presets (style, size, outline) become explicit, token-based buttons: the primary fill with readable text, outlines with the kit's border color, and the kit's button radius.
+
+## Mobile rules it adds
+
+Many library sections were built for desktop only. Modernize adds what is missing and lists each rule in the report:
+
+- **Sections:** vertical rhythm from `--bs-space-section` and side gutters when they have none.
+- **Containers:** full width up to the kit's container width.
+- **Grids:** with three or more columns, two columns on tablets; one column on phones.
+- **Button rows:** wrap, and stack at full width on phones.
+- **Rows of cards or blocks:** stack on phones.
+- **Stacks without gaps:** spacing from the kit.
+- **Fixed widths over 480 px:** become a maximum width, so they shrink on small screens.
+
+## How to use it
+
+1. **Paste Bricks JSON** or **Import JSON file** (up to 2 MB). Bricks' clipboard format, template exports and plain element arrays work. **Load example** shows a feature section written the way many libraries ship them.
+2. Optionally set the **class prefix**, for example `features` for `bs-features-card`. By default it comes from the section's label or first heading.
+3. Set the brand kit on the left. It starts with your Studio kit.
+4. Compare **After**, **Before** or **Side by side** at desktop, tablet and phone width.
+5. Read **What changed**:
+   - colors and the token each became;
+   - font sizes;
+   - spacing and radii;
+   - created classes;
+   - mobile rules;
+   - warnings;
+   - quality checks.
+6. **Take it to Bricks:** download the import file, copy it for Ctrl+V, or **Open in Staging** to compare it against a page on your site, save it there and install the design system.
+
+## Limits
+
+- **Images** keep their source URLs. Replace them or import them into the media library (Staging → Before saving).
+- **Framework utility classes without styles in the file** (for example Automatic CSS utilities) are listed. Their look is not in the JSON, so it cannot be carried over.
+- **Unknown variables** stay as they are. Define them on the site or replace them.
+- **Interactions, queries and dynamic data** are kept, not modernized.
+- Always review the result in Bricks before publishing.
+
+## Only import what you may use
+
+Modernize changes the design, not the rights. Use it on JSON you created, received from a client, or licensed. Do not use it to repackage other people's templates. Free libraries such as BricksBoard or DigiSavvy's templates have their own terms.
+
+## From MCP clients
+
+**`bricks_modernize_template`** takes:
+
+- `json`: the Bricks JSON as a string, up to 2 MB;
+- optionally `kit`, `block` (the class prefix) and `title`.
+
+It returns:
+
+- the modernized template;
+- the design system;
+- the report;
+- the quality checks.
+
+For example: "Modernize this Bricks section with BricksSnap in the Soft style with my brand color #0f766e and give me the JSON."
diff --git a/docs/RELEASE-0.12.0.md b/docs/RELEASE-0.12.0.md
new file mode 100644
index 0000000..3a09ce1
--- /dev/null
+++ b/docs/RELEASE-0.12.0.md
@@ -0,0 +1,78 @@
+# BricksSnap 0.12.0: Import & Modernize, and 90 layouts
+
+Many Bricks users already have sections: from old projects, from clients, from free libraries. They often use fixed colors, px sizes, repeated inline styles and no mobile rules. 0.12.0 brings them onto the same design system as the Studio, and more than doubles the Studio's own layouts.
+
+## 1. Import & Modernize
+
+A new **Modernize** tab takes any Bricks JSON and rebuilds it on BricksSnap's tokens:
+
+- **Colors:** fixed colors become design tokens by role (backgrounds, headings, text, borders, buttons, icons, shadows). The source's brand colors are detected and replaced by your kit's.
+- **Sizes:** font sizes, spacing and corners land on the kit's scale, fluid with `clamp()` instead of fixed px.
+- **Classes:** repeated inline styles become one clean `bs-<block>-<role>` global class per role.
+- **Mobile:** missing rules are added, and the report lists each one:
+  - grids collapse on tablets and phones;
+  - button rows stack at full width;
+  - sections get rhythm and gutters;
+  - fixed widths become maxima.
+- **Brand kit:** the result follows color, fonts, corners, spacing and dark mode like any Studio section.
+
+You compare before and after at three widths, read a report of every change, and take the result to Bricks by download, clipboard or Staging.
+
+It runs locally in the browser, and nothing is fetched: you bring the JSON. Use it on sections you made, received from a client or licensed. It is not a way to repackage other people's templates. See [Modernize](MODERNIZE.md).
+
+**MCP.** The new `bricks_modernize_template` tool does the same for Claude, ChatGPT and other clients. The server now has eleven tools.
+
+## 2. 90 layouts instead of 40
+
+50 new layouts cover every section type. They reuse the kit's classes, so every layout works with every brand kit, industry and language:
+
+| Section | New layouts |
+|---|---|
+| Header | centred logo, floating bar, dark |
+| Hero | bento tiles, centred with numbers, statement with wide image, image left with social proof, with enquiry form |
+| Services | numbered, photo cards, tabs |
+| Benefits | cards with icons, image in the middle, dark with rules |
+| Steps | vertical with line, centred numbers |
+| Numbers | cards, image with numbers |
+| Pricing | with switch, plans as rows, price tiles |
+| Reviews | quote wall, one featured quote, large photo |
+| Team | photo cards, list |
+| Portfolio | bento, project index |
+| Timeline | horizontal |
+| About | with numbers, photo collage, statement with wide image |
+| FAQ | accordion, cards |
+| Blog | one featured post, list |
+| Logos | tiles, marquee |
+| Gallery | masonry, bento |
+| Call to action | background image, minimal with rules, card with photo |
+| Contact | contact cards, centred form |
+| Footer | big name, with call to action |
+| Login, 404, coming soon | split screens with image |
+
+**Native Bricks tabs and accordion.** The pricing switch and the service tabs use Bricks' nested tabs; the FAQ accordion uses Bricks' nested accordion with FAQ schema. Bricks' own script switches them, and you edit each tab and answer in the builder.
+
+**Pricing switch.** The industries' sample prices are one-off, hourly or per-visit prices, so the switch shows **Packages / Single prices**. A computed "yearly" price would be wrong. For monthly and yearly billing, rename the two tabs in Bricks and enter your yearly prices in the second pane.
+
+The remote library in Bricks now serves 206 templates: 13 designs as pages and all 90 layouts as sections, in German and English.
+
+## Later
+
+Cooperation instead of copying:
+- an "Open in BricksSnap" link for template libraries that want it;
+- a community gallery with an explicit open license.
+
+These are on the [roadmap](ROADMAP.md) and not part of this release.
+
+## Verified
+
+- **Automated:** 255 tests.
+  - Every layout validates in every style.
+  - The one-class-per-CSS-property rule holds for all 90 layouts.
+  - No class name is defined twice.
+  - Tabs and accordion have Bricks' structure.
+  - The modernize engine is tested on its own pricing and hero fixtures.
+- **Visual:** all 50 new layouts at desktop and phone width in the Clean kit, and in a dark Warm kit.
+- **Against Bricks 2.4.2 on the test site (read-only):**
+  - Bricks' frontend script and styles use the same tab, pane, accordion and `brx-open` classes as the layouts.
+  - `render-elements` outputs the `_hidden` classes the nested elements rely on.
+- **App:** the Studio renders all 90 thumbnails in about 0.1 s, and a kit change redraws them in about 0.15 s.
diff --git a/docs/REMOTE-LIBRARY.md b/docs/REMOTE-LIBRARY.md
index 1c3dcb8..9fc071c 100644
--- a/docs/REMOTE-LIBRARY.md
+++ b/docs/REMOTE-LIBRARY.md
@@ -2,10 +2,10 @@
 
 A BricksSnap deployment can act as a **Remote Library** source in Bricks. Bricks users browse the design library in the builder and insert pages and sections like templates from any other Bricks site. No JSON download is needed.
 
-Since 0.9.0 the library serves the Studio's designs instead of the older classic catalog, in German and English (106 templates):
+Since 0.9.0 the library serves the Studio's designs instead of the older classic catalog, in German and English (206 templates since 0.12.0):
 
 - **Pages.** Each of the 13 designs (for example "Nord", "Trattoria", "Lachfalte") as a complete page.
-- **Sections.** All 40 layouts as single sections, in the "Fundament" design.
+- **Sections.** All 90 layouts as single sections, in the "Fundament" design.
 
 Styling travels as `bs-` global classes. Class IDs are the same in every design, so sections inserted later take on the look of the first design the site received. To change the look everywhere, install the design system from the Studio (see [Studio](STUDIO.md)).
 
diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
index 5cdfb85..5970367 100644
--- a/docs/ROADMAP.md
+++ b/docs/ROADMAP.md
@@ -68,6 +68,18 @@ Delivered in 0.8.0 (see [release notes](RELEASE-0.8.0.md)):
 - **App.** Light workbench redesign; Claude through MCP with current models.
 - **Not included.** Loading the kit's web fonts in Bricks, theme styles, and Studio layouts in the remote library.
 
+## v0.12 — Import & Modernize and more layouts
+
+Delivered in 0.12.0 (see [release notes](RELEASE-0.12.0.md)):
+- **Modernize.** Any Bricks JSON rebuilt on the design system, in the app and as the MCP tool `bricks_modernize_template` ([Modernize](MODERNIZE.md)).
+- **Layouts.** 90 instead of 40, with Bricks' nested tabs and accordion where a section switches or folds.
+- **Not included.** Importing from template libraries directly. BricksSnap does not fetch or redistribute other people's templates.
+
+## Later: cooperation instead of copying
+
+- **"Open in BricksSnap".** Template libraries that want it could link their sections to the Modernize tab, so users bring a section onto their own design system with one click. This needs the library's consent and a small, documented hand-over (for example a URL with the JSON or a postMessage from a library page).
+- **Community gallery.** Sections shared by their authors under an explicit open license (for example CC0 or MIT), with author credit, moderation and a license on every entry. Only then may BricksSnap offer others' sections.
+
 ## 2.0 milestone
 
 Use the 2.0 name when a connected site can be read, a change reviewed, applied, verified and recovered through a tested workflow. Intermediate releases should deliver useful complete workflows without implying that later phases are already available.
diff --git a/docs/SETUP.md b/docs/SETUP.md
index 33abab0..4967163 100644
--- a/docs/SETUP.md
+++ b/docs/SETUP.md
@@ -42,7 +42,7 @@ Anthropic does not permit third-party apps to offer a Claude.ai sign-in or to ro
 - **claude.ai and the Claude apps:** Customize → Connectors → + → **Add custom connector** with `https://your-deployment/api/mcp` ([Anthropic help](https://support.claude.com/en/articles/11175166-get-started-with-custom-connectors-using-remote-mcp)). Claude connects from Anthropic's cloud, so the deployment must be public HTTPS with `BRICKSSNAP_MCP_ENABLED=true`.
 - **Inside BricksSnap:** choose Anthropic in Settings with an API key from the Claude Console; the model defaults to `claude-sonnet-5-5` (also `claude-opus-5-5`, `claude-haiku-4-5-20251001`).
 
-The opt-in stateless endpoint provides ten tools: `bricks_get_schema`, `bricks_list_templates`, `bricks_get_template`, `bricks_validate_template`, `bricks_generate_section`, `bricks_assemble_page`, `bricks_kit_options`, `bricks_kit_page`, `bricks_merge_templates` and `bricks_compare_templates`. It cannot access API keys, WordPress or private files, or publish pages. It currently has no authentication because it only provides public computations; apply hosting rate limits. Leave disabled when unused. For local stdio clients and the staging workflow, see [Staging and MCP](STAGING-MCP.md).
+The opt-in stateless endpoint provides eleven tools: `bricks_get_schema`, `bricks_list_templates`, `bricks_get_template`, `bricks_validate_template`, `bricks_generate_section`, `bricks_assemble_page`, `bricks_kit_options`, `bricks_kit_page`, `bricks_modernize_template`, `bricks_merge_templates` and `bricks_compare_templates`. It cannot access API keys, WordPress or private files, or publish pages. It currently has no authentication because it only provides public computations; apply hosting rate limits. Leave disabled when unused. For local stdio clients and the staging workflow, see [Staging and MCP](STAGING-MCP.md).
 
 ## Export and compatibility
 
diff --git a/docs/STAGING-MCP.md b/docs/STAGING-MCP.md
index 62cde8c..ac742a2 100644
--- a/docs/STAGING-MCP.md
+++ b/docs/STAGING-MCP.md
@@ -63,6 +63,7 @@ HTTP uses the same tools at `/api/mcp`, opt-in as described in [Setup](SETUP.md)
 | `bricks_assemble_page` | `prompt`, ordered `sections` array (1–12), optional preset/palette IDs; page and warnings. |
 | `bricks_kit_options` | None; style directions, font pairs, industries and every section type with its layouts. |
 | `bricks_kit_page` | `sections` (type, optional `variant`, 1–16), optional `kit` and `profile`, `title`; Studio sections or page with global classes, design system and quality checks. See [Studio](STUDIO.md). |
+| `bricks_modernize_template` | JSON string `json` (up to 2 MB), optional `kit`, `block` (class prefix) and `title`; the section on BricksSnap's design system with the design system, a report of every change and quality checks. See [Modernize](MODERNIZE.md). |
 | `bricks_merge_templates` | JSON strings `baseline` and `addition`, `position` (`append`, `prepend`, `after`), `afterId` for `after`; staged template, diff, ID remapping and warnings. |
 | `bricks_compare_templates` | JSON strings `baseline` and `proposal`; element deltas, counts and metadata keys that differ. |
 
diff --git a/docs/STUDIO.md b/docs/STUDIO.md
index 296c187..1a6d9d2 100644
--- a/docs/STUDIO.md
+++ b/docs/STUDIO.md
@@ -35,7 +35,9 @@ The texts are templates: read and adjust them before publishing. Nothing leaves
 
 ## 3. Sections
 
-The **Sections** view shows all 40 layouts in 22 section types, grouped by type and rendered live at 1280 px. The section types are header, hero, services, benefits, steps, numbers, pricing, reviews, team, portfolio, timeline, about, FAQ, blog, logos, gallery, call to action, contact, footer, login, 404 and coming soon.
+The **Sections** view shows all 90 layouts in 22 section types, grouped by type and rendered live at 1280 px. The section types are header, hero, services, benefits, steps, numbers, pricing, reviews, team, portfolio, timeline, about, FAQ, blog, logos, gallery, call to action, contact, footer, login, 404 and coming soon. Since 0.12 each type has at least two layouts, among them bento grids, a pricing switch, service tabs, a FAQ accordion, a quote wall, a logo marquee and masonry galleries.
+
+- **Tabs and accordion.** The pricing switch and the service tabs use Bricks' nested tabs. The FAQ accordion uses Bricks' nested accordion with FAQ schema. Bricks' own script switches them; the preview shows the first tab open and the answers closed. Edit each tab and answer in the builder. For monthly and yearly prices, rename the switch's tabs (**Packages / Single prices**) and enter your prices in the panes.
 
 - **Copy.** Copies a single section. Paste it in the Bricks editor with Ctrl+V.
 - **Add to page.** Adds the section to your page. A header goes first, a footer last, and anything else goes before the footer.
@@ -52,6 +54,10 @@ The **Sections** view shows all 40 layouts in 22 section types, grouped by type
   - **Copy for Bricks (Ctrl+V).** Pastes the page into the editor.
   - **Open in Staging.** Loads the page as a new section or version, to review it against a page of a connected site, save it there, or install the design system.
 
+## Modernize your own sections
+
+The **Modernize** tab brings Bricks JSON you already have onto the same design system: tokens instead of fixed colors, the kit's scale instead of px, `bs-` classes instead of repeated inline styles, and mobile rules. The brand kit then restyles it like a Studio layout. See [Modernize](MODERNIZE.md).
+
 ## How the output is built
 
 **tokens → Bricks palette and variables → BEM global classes → elements**
@@ -94,9 +100,10 @@ Since 0.10 an install is not a one-way street.
 
 ## From Claude, ChatGPT and other MCP clients
 
-The MCP server offers two Studio tools:
+The MCP server offers three Studio tools:
 
 - **`bricks_kit_options`** lists style directions, font pairs, industries and every section type with its layouts.
+- **`bricks_modernize_template`** rebuilds Bricks JSON on the design system (see [Modernize](MODERNIZE.md)).
 - **`bricks_kit_page`** builds sections or a page. It takes `sections` (type and optional `variant`), an optional `kit` (style, primary, accent, fonts, radius, spacing, mode) and an optional `profile` (industry, language, name, city, phone, email, address, tagline, services). It returns the Bricks import object, the design system and the quality checks.
 
 For example: "Use BricksSnap to build a homepage for a vehicle registration service in Bremen in the Warm style with a green brand color, in German, and give me the Bricks JSON."
diff --git a/package-lock.json b/package-lock.json
index d5b696a..1fc5550 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "brickssnap",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "brickssnap",
-      "version": "0.11.1",
+      "version": "0.12.0",
       "license": "PolyForm-Shield-1.0.0",
       "dependencies": {
         "@modelcontextprotocol/sdk": "^1.30.1",
diff --git a/package.json b/package.json
index f93cc49..1394eba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "brickssnap",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "scripts": {
     "dev": "next dev --webpack",
     "dev:local": "node scripts/dev-local.mjs",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4cc19e0..46e555c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -14,6 +14,7 @@ import ConnectionGuide from "@/components/ConnectionGuide";
 import StagingWorkspace from "@/components/StagingWorkspace";
 import KitStudio, { type KitSelection, type Saved } from "@/components/kit/KitStudio";
 import KitLibrary, { type StudioPreset } from "@/components/kit/KitLibrary";
+import KitModernize from "@/components/kit/KitModernize";
 import { DESIGNS } from "@/lib/kit/library";
 import { VARIANTS } from "@/lib/kit/sections";
 import packageJson from "../../package.json";
@@ -21,10 +22,11 @@ import packageJson from "../../package.json";
 // Default import: webpack no longer supports named exports from JSON modules.
 const { version } = packageJson;
 
-type Tab = "studio" | "generator" | "library" | "staging";
+type Tab = "studio" | "generator" | "library" | "modernize" | "staging";
 const TABS: Array<{ id: Tab; label: string }> = [
   { id: "studio", label: "Studio" },
   { id: "library", label: "Library" },
+  { id: "modernize", label: "Modernize" },
   { id: "generator", label: "Generator" },
   { id: "staging", label: "Staging" },
 ];
@@ -288,6 +290,17 @@ export default function Home() {
           </div>
         )}
 
+        {activeTab === "modernize" && (
+          <div className="animate-fade-in space-y-8">
+            <div className="max-w-3xl">
+              <p className="label-mono mb-3">Import &amp; modernize</p>
+              <h2 className="text-[32px] font-semibold leading-[1.1] tracking-[-0.03em] sm:text-[44px]">Bring any section. Make it yours.</h2>
+              <p className="mt-4 text-[15px] leading-relaxed text-text">Paste Bricks JSON from an old project, a client site or a component library. BricksSnap maps its colors, font sizes, spacing and radii to your design system, turns inline styles into clean <span className="font-mono text-sm">bs-</span> classes and adds the mobile rules it is missing. Then the brand kit restyles it like any Studio section.</p>
+            </div>
+            <KitModernize onOpenInStaging={openKitInStaging}/>
+          </div>
+        )}
+
         {activeTab === "library" && (
           <div className="animate-fade-in space-y-8">
             <div className="max-w-3xl">
diff --git a/src/components/kit/KitControls.tsx b/src/components/kit/KitControls.tsx
index 11588dd..af29c91 100644
--- a/src/components/kit/KitControls.tsx
+++ b/src/components/kit/KitControls.tsx
@@ -36,7 +36,7 @@ function ColorField({ id, label, value, onChange }: { id: string; label: string;
   </div>;
 }
 
-export default function KitControls({ kit, onKit, profile, onProfile }: { kit: BrandKit; onKit: (kit: BrandKit) => void; profile: BusinessProfile; onProfile: (profile: BusinessProfile) => void }) {
+export default function KitControls({ kit, onKit, profile, onProfile, showBusiness = true }: { kit: BrandKit; onKit: (kit: BrandKit) => void; profile: BusinessProfile; onProfile: (profile: BusinessProfile) => void; showBusiness?: boolean }) {
   const [services, setServices] = useState(profile.services?.join("\n") ?? "");
   const checks = contrastChecks(resolveKit(kit)).filter(check => !check.ok);
   const field = (key: "name" | "city" | "phone" | "email" | "address", label: string, placeholder: string, type = "text") =>
@@ -86,7 +86,7 @@ export default function KitControls({ kit, onKit, profile, onProfile }: { kit: B
       <Segmented label="Mode" value={kit.mode} options={[{ id: "light", label: "Light" }, { id: "dark", label: "Dark" }]} onChange={mode => onKit({ ...kit, mode })}/>
     </section>
 
-    <section aria-labelledby="kit-business" className="space-y-4">
+    {showBusiness && <section aria-labelledby="kit-business" className="space-y-4">
       <h3 id="kit-business" className="label-mono">Business</h3>
       <div>
         <label htmlFor="kit-industry" className="mb-1.5 block text-xs font-medium text-text">Industry</label>
@@ -108,6 +108,6 @@ export default function KitControls({ kit, onKit, profile, onProfile }: { kit: B
           onChange={e => { setServices(e.target.value); const list = e.target.value.split("\n").map(s => s.trim()).filter(Boolean).slice(0, 6); onProfile({ ...profile, services: list.length ? list : undefined }); }}/>
       </div>
       <p className="text-xs leading-relaxed text-muted">Texts are written for the industry and filled with your details. Nothing leaves your browser.</p>
-    </section>
+    </section>}
   </div>;
 }
diff --git a/src/components/kit/KitModernize.tsx b/src/components/kit/KitModernize.tsx
new file mode 100644
index 0000000..874ec92
--- /dev/null
+++ b/src/components/kit/KitModernize.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import { useDeferredValue, useMemo, useRef, useState } from "react";
+import { buildBricksImportJson } from "@/lib/bricks-export";
+import { copyToClipboard, downloadText } from "@/lib/clipboard";
+import { KIT_FONT_VARS } from "@/lib/kit/app-fonts";
+import { renderPreview } from "@/lib/kit/preview";
+import { DEFAULT_KIT, normalizeKit, resolveKit, type BrandKit } from "@/lib/kit/tokens";
+import { modernizeTemplate, parseColor } from "@/lib/modernize";
+import { MODERNIZE_EXAMPLE } from "@/lib/modernize-example";
+import KitControls from "./KitControls";
+import KitPreviewFrame from "./KitPreviewFrame";
+import type { KitSelection } from "./KitStudio";
+
+const VIEWPORTS = { desktop: 1280, tablet: 820, phone: 390 } as const;
+type Viewport = keyof typeof VIEWPORTS;
+const secondary = "inline-flex h-9 items-center justify-center gap-2 rounded-lg border border-border bg-card px-3 text-sm font-medium text-foreground hover:border-border-hover hover:bg-subtle disabled:opacity-40";
+const primary = "inline-flex h-9 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-white hover:bg-primary-hover disabled:opacity-40";
+const segment = (active: boolean) => `h-8 rounded-md px-3 text-xs ${active ? "bg-card font-medium text-foreground shadow-[0_1px_2px_rgba(28,25,23,.08)]" : "text-muted hover:text-foreground"}`;
+
+/** Starts from the Studio's last kit in this browser. */
+function studioKit(): BrandKit {
+  try { const saved = JSON.parse(localStorage.getItem("brickssnap_kit_studio") ?? "null"); if (saved?.kit) return normalizeKit(saved.kit); } catch { /* Not essential. */ }
+  return DEFAULT_KIT;
+}
+
+function Swatch({ color }: { color: string }) {
+  return <span className="inline-block h-4 w-4 shrink-0 rounded-full border border-black/10 align-middle" style={{ background: color }} aria-hidden/>;
+}
+
+/** Import any Bricks JSON and rebuild it on the brand kit's tokens and bs- classes. */
+export default function KitModernize({ onOpenInStaging }: { onOpenInStaging: (selection: KitSelection) => void }) {
+  const [kit, setKit] = useState<BrandKit>(studioKit);
+  const [text, setText] = useState("");
+  const [parsed, setParsed] = useState<unknown>(null);
+  const [parseError, setParseError] = useState("");
+  const [block, setBlock] = useState("");
+  const [view, setView] = useState<"after" | "before" | "compare">("after");
+  const [viewport, setViewport] = useState<Viewport>("desktop");
+  const [status, setStatus] = useState("");
+  const file = useRef<HTMLInputElement>(null);
+
+  const shownKit = useDeferredValue(kit);
+  const shownBlock = useDeferredValue(block);
+  const outcome = useMemo(() => {
+    if (parsed === null) return null;
+    try { return { result: modernizeTemplate(parsed, { kit: shownKit, block: shownBlock || undefined }) }; }
+    catch (error) { return { error: error instanceof Error ? error.message : "This JSON could not be read." }; }
+  }, [parsed, shownKit, shownBlock]);
+  const result = outcome && "result" in outcome ? outcome.result : null;
+  const previews = useMemo(() => {
+    if (!result) return null;
+    const variables = result.designSystem.css.replace(/^:root \{\n/, "").replace(/\n\}$/, "");
+    return { before: renderPreview(result.source), after: renderPreview(result.template, { variables, fonts: KIT_FONT_VARS }) };
+  }, [result]);
+  const colors = resolveKit(shownKit).colors as Record<string, string>;
+
+  const flash = (message: string) => { setStatus(message); window.setTimeout(() => setStatus(s => (s === message ? "" : s)), 2500); };
+  const read = (value: string) => {
+    setText(value);
+    if (!value.trim()) { setParsed(null); setParseError(""); return; }
+    try { setParsed(JSON.parse(value)); setParseError(""); }
+    catch { setParsed(null); setParseError("This is not valid JSON. Copy a section in Bricks (Ctrl+C) or export a template, and paste the whole text."); }
+  };
+  const loadFile = async (f?: File) => {
+    if (!f) return;
+    if (f.size > 2_000_000) { setParseError("Choose a JSON file smaller than 2 MB."); return; }
+    read(await f.text());
+  };
+  const title = result ? `Modernized ${result.block}` : "Modernized";
+  const type = result && result.template.content.filter(el => el.parent === 0).length > 1 ? "content" : "section";
+  const r = result?.report;
+
+  const frame = (which: "before" | "after", width: number) => previews && <div className="overflow-hidden rounded-xl border border-border bg-subtle">
+    <div className="mx-auto bg-white" style={{ maxWidth: width }}><KitPreviewFrame html={previews[which].html} css={previews[which].css} width={width} title={`${which === "before" ? "Before" : "After"}: ${title}`}/></div>
+  </div>;
+
+  return <div className="grid gap-6 lg:grid-cols-[300px_minmax(0,1fr)] lg:gap-8">
+    <aside className="lg:sticky lg:top-[88px] lg:max-h-[calc(100vh-104px)] lg:overflow-y-auto lg:pr-2">
+      <div className="rounded-xl border border-border bg-card p-5">
+        <KitControls kit={kit} onKit={setKit} profile={{ industry: "business", language: "en" }} onProfile={() => {}} showBusiness={false}/>
+      </div>
+    </aside>
+
+    <div className="min-w-0 space-y-6">
+      <section aria-labelledby="mz-input" className="space-y-3 rounded-xl border border-border bg-card p-5">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <h3 id="mz-input" className="text-base font-semibold">1. Paste Bricks JSON</h3>
+            <p className="mt-1 max-w-2xl text-sm text-muted">In Bricks, select a section in the structure panel and press <kbd className="rounded border border-border px-1 font-mono text-xs">Ctrl+C</kbd>, or export a template. Components from a library work too, as long as you may use them. Everything runs in your browser; nothing is uploaded.</p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <button type="button" className={secondary} onClick={() => file.current?.click()}>Import JSON file</button>
+            <button type="button" className={secondary} onClick={() => read(JSON.stringify(MODERNIZE_EXAMPLE, null, 2))}>Load example</button>
+          </div>
+        </div>
+        <input ref={file} type="file" accept="application/json,.json" className="sr-only" onChange={e => { void loadFile(e.target.files?.[0]); e.target.value = ""; }}/>
+        <label htmlFor="mz-json" className="sr-only">Bricks JSON</label>
+        <textarea id="mz-json" value={text} onChange={e => read(e.target.value)} spellCheck={false} rows={7} placeholder='{"content":[{"id":"abc123","name":"section", …}], "globalClasses":[…]}'
+          className="w-full resize-y rounded-lg border border-border bg-subtle p-3 font-mono text-xs text-foreground focus:border-primary focus:outline-none"/>
+        <div className="flex flex-wrap items-center gap-3">
+          <label htmlFor="mz-block" className="text-sm text-text">Class prefix</label>
+          <div className="flex items-center rounded-lg border border-border bg-card pl-3 text-sm focus-within:border-primary">
+            <span className="font-mono text-xs text-muted">bs-</span>
+            <input id="mz-block" value={block} onChange={e => setBlock(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, "").slice(0, 24))} placeholder={result?.block ?? "auto"} className="h-9 w-40 bg-transparent px-1 font-mono text-xs focus:outline-none"/>
+            <span className="pr-3 font-mono text-xs text-muted">-card</span>
+          </div>
+          <span className="text-xs text-muted">Give each imported block its own prefix, so classes of different blocks never mix.</span>
+        </div>
+        {(parseError || (outcome && "error" in outcome)) && <p role="alert" className="rounded-lg border border-danger/30 bg-danger/5 p-3 text-sm text-danger">{parseError || (outcome && "error" in outcome ? outcome.error : "")}</p>}
+      </section>
+
+      {result && previews && r && <>
+        <section aria-labelledby="mz-preview" className="space-y-4">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <h3 id="mz-preview" className="text-base font-semibold">2. Before and after</h3>
+            <div className="flex flex-wrap gap-2">
+              <div className="flex rounded-lg border border-border bg-subtle p-0.5" role="group" aria-label="Show">
+                {(["after", "before", "compare"] as const).map(v => <button key={v} type="button" aria-pressed={view === v} onClick={() => setView(v)} className={segment(view === v)}>{v === "after" ? "After" : v === "before" ? "Before" : "Side by side"}</button>)}
+              </div>
+              <div className="flex rounded-lg border border-border bg-subtle p-0.5" role="group" aria-label="Preview width">
+                {(Object.keys(VIEWPORTS) as Viewport[]).map(v => <button key={v} type="button" aria-pressed={viewport === v} onClick={() => setViewport(v)} className={segment(viewport === v)}>{v[0].toUpperCase() + v.slice(1)} <span className="font-mono text-[11px] text-muted">{VIEWPORTS[v]}</span></button>)}
+              </div>
+            </div>
+          </div>
+          {view === "compare"
+            ? <div className="grid gap-4 xl:grid-cols-2">
+              <div className="min-w-0 space-y-2"><p className="label-mono">Before · as in the file</p>{frame("before", VIEWPORTS[viewport])}</div>
+              <div className="min-w-0 space-y-2"><p className="label-mono">After · on your brand kit</p>{frame("after", VIEWPORTS[viewport])}</div>
+            </div>
+            : frame(view, VIEWPORTS[viewport])}
+          {view !== "after" && <p className="text-xs text-muted">“Before” shows the file&apos;s own styles only; styles from a framework such as Automatic CSS are not part of the file.</p>}
+        </section>
+
+        <section aria-labelledby="mz-report" className="space-y-4 rounded-xl border border-border bg-card p-5">
+          <h3 id="mz-report" className="text-base font-semibold">3. What changed</h3>
+          <ul className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-5">
+            {[
+              [r.colors.length, "colors → tokens"], [r.fontSizes.length, "font sizes on the scale"], [r.spacing + r.radii, "spacing and radii"],
+              [r.classes.created.length, `bs- classes${r.classes.sourceMerged.length ? ` (from ${r.classes.sourceMerged.length} source)` : ""}`], [r.mobile.length, "mobile and rhythm rules"],
+            ].map(([n, label]) => <li key={String(label)} className="rounded-lg border border-border bg-subtle p-3"><span className="block text-xl font-semibold">{n}</span><span className="text-xs text-muted">{label}</span></li>)}
+          </ul>
+          {r.brand.primary && <p className="text-sm text-text">Brand colors found: <Swatch color={r.brand.primary}/> <span className="font-mono text-xs">{r.brand.primary}</span> → primary{r.brand.accent && <>, <Swatch color={r.brand.accent}/> <span className="font-mono text-xs">{r.brand.accent}</span> → accent</>}.</p>}
+          <details className="text-sm"><summary className="font-medium">Colors ({r.colors.length})</summary>
+            <ul className="mt-2 grid gap-1.5 sm:grid-cols-2">{r.colors.map(c => {
+              const rgb = parseColor(c.from.split(" ")[0]);
+              return <li key={c.from} className="flex items-center gap-2 font-mono text-xs">{rgb ? <Swatch color={c.from.split(" ")[0]}/> : <span className="w-4"/>}<span className="truncate">{c.from}</span><span aria-hidden>→</span>{colors[c.to] && <Swatch color={colors[c.to]}/>}<span>--bs-{c.to}</span><span className="text-muted">×{c.count}</span></li>;
+            })}</ul>
+          </details>
+          {r.fontSizes.length > 0 && <details className="text-sm"><summary className="font-medium">Font sizes ({r.fontSizes.length})</summary>
+            <ul className="mt-2 grid gap-1 font-mono text-xs sm:grid-cols-3">{r.fontSizes.map(f => <li key={f.from}>{f.from} → {f.to}</li>)}</ul>
+          </details>}
+          {r.mobile.length > 0 && <details className="text-sm"><summary className="font-medium">Mobile and rhythm rules ({r.mobile.length})</summary>
+            <ul className="mt-2 list-disc space-y-1 pl-5 text-text">{r.mobile.map(m => <li key={m}>{m}</li>)}</ul>
+          </details>}
+          <details className="text-sm"><summary className="font-medium">Classes ({r.classes.created.length})</summary>
+            <p className="mt-2 break-words font-mono text-xs text-text">{r.classes.created.join(" · ")}</p>
+          </details>
+          {(r.warnings.length > 0 || result.quality.some(q => q.level === "warning")) && <ul className="space-y-1.5 text-sm">
+            {[...r.warnings, ...result.quality.filter(q => q.level === "warning").map(q => q.message)].map(w => <li key={w} className="flex gap-2 text-text"><span aria-hidden className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-warning"/>{w}</li>)}
+          </ul>}
+        </section>
+
+        <section aria-labelledby="mz-export" className="space-y-3 rounded-xl border border-border bg-card p-5">
+          <h3 id="mz-export" className="text-base font-semibold">4. Take it to Bricks</h3>
+          <p className="text-sm text-muted">The block now uses <span className="font-mono text-xs">var(--bs-…)</span> tokens with fallbacks, so it looks like this preview on any site. Install the design system in Staging to change color, fonts, radius and spacing for it and every Studio section in one place.</p>
+          <div className="flex flex-wrap items-center gap-2">
+            <button type="button" className={primary} onClick={() => downloadText(`${title.toLowerCase().replace(/[^a-z0-9]+/g, "-")}.json`, JSON.stringify(buildBricksImportJson(result.template, title, type), null, 2))}>Download for Bricks import</button>
+            <button type="button" className={secondary} onClick={async () => { try { await copyToClipboard(JSON.stringify(result.template)); flash("Copied. Paste it in Bricks with Ctrl+V."); } catch { flash("Clipboard unavailable. Download the file instead."); } }}>Copy for Bricks (Ctrl+V)</button>
+            <button type="button" className={secondary} onClick={() => onOpenInStaging({ template: result.template, designSystem: result.designSystem, kit: result.resolved.kit, title })}>Open in Staging</button>
+            <span role="status" className="text-xs text-muted">{status}</span>
+          </div>
+        </section>
+      </>}
+    </div>
+  </div>;
+}
diff --git a/src/lib/bricks-validator.ts b/src/lib/bricks-validator.ts
index 40c44c2..ae3def2 100644
--- a/src/lib/bricks-validator.ts
+++ b/src/lib/bricks-validator.ts
@@ -7,7 +7,8 @@ import type { BricksElement } from "./bricks-engine";
 import { normalizeSettings } from "./bricks-settings";
 import schema from "../data/bricks-schema.json";
 export const BRICKS_ELEMENT_NAMES = new Set<string>(Object.keys(schema.elements));
-const metaControls = new Set(["_cssGlobalClasses", "_conditions", "_interactions", "_hideElementBuilder", "_hideElementFrontend", "_attributes"]);
+// _hidden carries the classes Bricks' nestable elements rely on (tab-title, accordion-content-wrapper, …).
+const metaControls = new Set(["_cssGlobalClasses", "_conditions", "_interactions", "_hideElementBuilder", "_hideElementFrontend", "_attributes", "_hidden"]);
 const controlSets = new Map(Object.entries(schema.elements).map(([name, element]) => [name, new Set([...schema.commonControls, ...element.controls, ...metaControls])]));
 
 // A Bricks id is always a 6-char lowercase alphanumeric string.
diff --git a/src/lib/kit/preview.ts b/src/lib/kit/preview.ts
index 23fe558..042bb56 100644
--- a/src/lib/kit/preview.ts
+++ b/src/lib/kit/preview.ts
@@ -221,10 +221,14 @@ export function renderPreview(template: Pick<BricksTemplate, "content" | "global
     const s = el.settings;
     const idAttr = typeof s._cssId === "string" && /^[A-Za-z][\w-]*$/.test(s._cssId) ? s._cssId : `brxe-${el.id}`;
     const selector = `#${idAttr}`;
-    const own = Object.fromEntries(Object.entries(s).filter(([k]) => k.startsWith("_") && k !== "_cssGlobalClasses" && k !== "_cssId" && k !== "_attributes"));
+    const own = Object.fromEntries(Object.entries(s).filter(([k]) => k.startsWith("_") && k !== "_cssGlobalClasses" && k !== "_cssId" && k !== "_attributes" && k !== "_hidden"));
     const r = rulesFor(selector, own, el.name);
     rules.push(...r.rules); custom += r.custom;
-    const classes = [`brxe-${el.name}`, ...(Array.isArray(s._cssGlobalClasses) ? s._cssGlobalClasses.map(id => classNames.get(String(id))).filter(Boolean) : [])];
+    // Nestable elements mark their parts with _hidden classes; Bricks' script opens the first tab.
+    const hidden = String((s._hidden as { _cssClasses?: unknown } | undefined)?._cssClasses ?? "").split(/\s+/).filter(c => /^[a-z][a-z-]*$/.test(c));
+    const firstChild = el.parent !== 0 && byId.get(String(el.parent))?.children[0] === el.id;
+    const open = firstChild && hidden.some(c => c === "tab-title" || c === "tab-pane") ? ["brx-open"] : [];
+    const classes = [`brxe-${el.name}`, ...hidden, ...open, ...(Array.isArray(s._cssGlobalClasses) ? s._cssGlobalClasses.map(id => classNames.get(String(id))).filter(Boolean) : [])];
     const attrs = `id="${esc(idAttr)}" class="${esc(classes.join(" "))}"${Array.isArray(s._attributes) ? (s._attributes as Array<{ name?: string; value?: string }>).filter(a => a.name && /^(aria-[\w-]+|role|data-[\w-]+)$/.test(a.name)).map(a => ` ${a.name}="${esc(String(a.value ?? ""))}"`).join("") : ""}`;
     const children = el.children.map(id => byId.get(id)).filter((c): c is BricksElement => !!c).map(render).join("");
     const text = typeof s.text === "string" ? safeHtml(s.text) : "";
@@ -271,4 +275,12 @@ const BASE_CSS = `@layer bricks {
 .bsp .brxe-form .form-group { width: 100%; margin-bottom: 12px; }
 .bsp .brxe-form .bsp-check { display: flex; gap: 8px; align-items: baseline; width: 100%; margin-bottom: 12px; font-size: 14px; }
 .bsp .brxe-form .bsp-check input { width: auto; }
+.bsp .brxe-tabs-nested { display: flex; flex-direction: column; width: 100%; }
+.bsp .brxe-tabs-nested .tab-menu { display: flex; }
+.bsp .brxe-tabs-nested .tab-title { cursor: pointer; }
+.bsp .brxe-tabs-nested .tab-pane { display: none; }
+.bsp .brxe-tabs-nested .tab-pane.brx-open { display: block; }
+.bsp .brxe-accordion-nested { display: flex; flex-direction: column; width: 100%; }
+.bsp .brxe-accordion-nested .accordion-content-wrapper { display: none; }
+.bsp .brxe-accordion-nested .brx-open > .accordion-content-wrapper { display: block; }
 }`;
diff --git a/src/lib/kit/sections/common.ts b/src/lib/kit/sections/common.ts
index 08ee696..854dab7 100644
--- a/src/lib/kit/sections/common.ts
+++ b/src/lib/kit/sections/common.ts
@@ -1,8 +1,8 @@
-import { button, container, div, heading, icon, image, section, text, textLink, type ClassLibrary, type KitNode } from "../build";
+import { button, container, div, heading, icon, image, node, section, text, textLink, type ClassLibrary, type KitNode } from "../build";
 import type { Content, Link } from "../content";
 import { PHOTOS, type PhotoKey } from "../images";
 import type { IconKey } from "../icons";
-import { sx } from "../styles";
+import { merge, sx } from "../styles";
 import type { Language, ResolvedKit } from "../tokens";
 
 export const SECTION_TYPES = [
@@ -78,6 +78,26 @@ export function infoRow(iconKey: IconKey, label: string, value: string, href?: s
   ], label);
 }
 
+/**
+ * Bricks' nested tabs: a tab menu and one pane per tab. Bricks marks the parts through _hidden
+ * classes (tab-menu, tab-title, tab-content, tab-pane) and its script opens a tab with brx-open, so
+ * pane classes never set display. The look is "pill" (a switch) or "line" (underlined tabs).
+ */
+export function tabs(look: "pill" | "line", items: Array<{ label: string; pane: KitNode }>, label: string): KitNode {
+  return node("tabs-nested", "bs-tabs", {}, [
+    node("block", `bs-tabs__menu bs-tabs__menu--${look}`, { _hidden: { _cssClasses: "tab-menu" } }, items.map(item => node("div", `bs-tabs__title bs-tabs__title--${look}`, { _hidden: { _cssClasses: "tab-title" } }, [text(item.label, "bs-tabs__label", "span")], "Tab")), "Tab menu"),
+    node("block", "bs-tabs__content", { _hidden: { _cssClasses: "tab-content" } }, items.map(item => node("block", "bs-tabs__pane", { _hidden: { _cssClasses: "tab-pane" } }, [item.pane], "Pane")), "Tab content"),
+  ], label);
+}
+
+/** Bricks' nested accordion with FAQ schema; Bricks' script opens an item (brx-open), so content never sets display. */
+export function accordion(items: Array<{ title: string; body: KitNode[] }>, label: string): KitNode {
+  return node("accordion-nested", "bs-acc", { faqSchema: true }, items.map(item => node("block", "bs-acc__item", {}, [
+    node("block", "bs-acc__title", { _hidden: { _cssClasses: "accordion-title-wrapper" } }, [heading("h3", item.title, "bs-acc__q"), icon("add", "bs-acc__icon")], "Title"),
+    node("block", "bs-acc__content", { _hidden: { _cssClasses: "accordion-content-wrapper" } }, item.body, "Content"),
+  ], item.title)), label);
+}
+
 /** Classes used by the helpers above beyond the shared library. */
 export function commonClasses(r: ResolvedKit): ClassLibrary {
   const x = sx(r);
@@ -89,5 +109,33 @@ export function commonClasses(r: ResolvedKit): ClassLibrary {
     "bs-info__body": { _display: "flex", _direction: "column", _rowGap: "2px" },
     "bs-info__label": { ...x.type({ size: "text-xs", weight: "600", ls: "0.08em", transform: "uppercase", color: "muted" }), _margin: { top: "0", bottom: "0" } },
     "bs-info__value": { ...x.type({ size: "text-m", weight: "500", color: "heading", decoration: "none" }), _margin: { top: "0", bottom: "0" } },
+
+    // Tabs: layout classes plus one look per part.
+    "bs-tabs": { _display: "flex", _direction: "column", _rowGap: x.v("space-l"), _alignItems: "stretch", _width: "100%" },
+    "bs-tabs__menu": { _direction: "row", _flexWrap: "wrap", _rowGap: "4px" },
+    "bs-tabs__menu--pill": merge(x.bg("surface"), x.line("1px", "border"), x.round("999px"), x.pad("4px"), { _columnGap: "4px", _width: "auto", _alignSelf: "center" }),
+    "bs-tabs__menu--line": { _columnGap: x.v("space-m"), _width: "100%", _border: { width: { top: "0", right: "0", bottom: "1px", left: "0" }, style: "solid", color: x.color("border") } },
+    "bs-tabs__title": { _cursor: "pointer", _cssTransition: "background-color .2s ease, color .2s ease, border-color .2s ease" },
+    "bs-tabs__title--pill": merge(x.pad("10px", "20px"), x.round("999px"), x.type({ size: "text-s", weight: "600", lh: "1.2", color: "muted" }), {
+      _cssCustom: `.bs-tabs__title--pill.brx-open { background-color: ${x.v("primary")}; color: ${x.v("on-primary")}; }`,
+    }),
+    "bs-tabs__title--line": merge(x.pad("12px", "2px"), x.type({ size: "text-m", weight: "600", lh: "1.3", color: "muted" }), {
+      _border: { width: { top: "0", right: "0", bottom: "2px", left: "0" }, style: "solid", color: { raw: "transparent" } }, _margin: { bottom: "-1px" },
+      _cssCustom: `.bs-tabs__title--line.brx-open { color: ${x.v("heading")}; border-bottom-color: ${x.v("primary")}; }`,
+    }),
+    "bs-tabs__label": { _cssCustom: ".bs-tabs__label { white-space: nowrap; }" },
+    "bs-tabs__content": { _width: "100%" },
+    "bs-tabs__pane": { _width: "100%" },
+
+    // Accordion
+    "bs-acc": { _width: "100%", _widthMax: "860px", _margin: { left: "auto", right: "auto" } },
+    "bs-acc__item": { _width: "100%", _border: { width: { top: "0", right: "0", bottom: "1px", left: "0" }, style: "solid", color: x.color("border") }, _cssCustom: `.bs-acc__item:first-child { border-top: 1px solid ${x.v("border")}; }` },
+    "bs-acc__title": { _direction: "row", _flexWrap: "nowrap", _justifyContent: "space-between", _alignItems: "center", _columnGap: x.v("space-m"), _padding: { top: x.v("space-m"), right: "0", bottom: x.v("space-m"), left: "0" }, _cursor: "pointer", _width: "100%" },
+    "bs-acc__q": merge(x.type({ size: "text-l", weight: "heading-weight", ls: "heading-tracking", lh: "1.35", color: "heading" }), { _margin: { top: "0", bottom: "0" } }, x.font("bs-acc__q", "heading", " text-wrap: balance;")),
+    "bs-acc__icon": merge(x.type({ size: "22px", color: "link" }), {
+      _flexShrink: "0", _cssTransition: "transform .2s ease",
+      _cssCustom: `.bs-acc__item.brx-open .bs-acc__icon, .bs-acc__title[aria-expanded="true"] .bs-acc__icon { transform: rotate(45deg); }`,
+    }),
+    "bs-acc__content": { _widthMax: "720px", _padding: { top: "0", right: "0", bottom: x.v("space-m"), left: "0" } },
   };
 }
diff --git a/src/lib/kit/sections/conversion-plus.ts b/src/lib/kit/sections/conversion-plus.ts
new file mode 100644
index 0000000..68bc5ba
--- /dev/null
+++ b/src/lib/kit/sections/conversion-plus.ts
@@ -0,0 +1,271 @@
+import { button, div, heading, icon, image, node, text, textLink, type KitNode } from "../build";
+import { PHOTOS } from "../images";
+import { merge, sx } from "../styles";
+import type { ResolvedKit } from "../tokens";
+import { accordion, actions, band, checklist, infoRow, intro, stars, tabs, type Ctx, type Variant } from "./common";
+import { planCard, quoteCard } from "./conversion";
+import { telHref } from "./header-hero";
+import { form } from "./more";
+
+/** More layouts for pricing, testimonials, FAQ, calls to action, contact and logos. */
+function convertPlusClasses(r: ResolvedKit) {
+  const x = sx(r);
+  const none = { top: "0", bottom: "0" };
+  return {
+    // Pricing
+    "bs-plan-rows": { _display: "flex", _direction: "column", _rowGap: x.v("space-m"), _width: "100%" },
+    "bs-plan-row": merge(x.bg("surface"), x.round("radius-l"), x.pad("space-card"), {
+      _display: "grid", _gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 0.8fr)", "_gridTemplateColumns:tablet_portrait": "minmax(0, 1fr)", _gridGap: x.v("space-m"), _alignItems: "center", _width: "100%",
+    }),
+    "bs-plan-row--default": x.line("1px", "border"),
+    "bs-plan-row--featured": merge(x.line("2px", "primary-edge"), x.shadow("24px", "60px", "-30px")),
+    "bs-plan-row__head": { _display: "flex", _direction: "column", _rowGap: "6px", _alignItems: "flex-start" },
+    "bs-plan-row__buy": { _display: "flex", _direction: "column", _rowGap: x.v("space-s"), _alignItems: "stretch" },
+    "bs-badge--solid": merge(x.type({ size: "text-xs", weight: "700", ls: "0.06em", transform: "uppercase", color: "on-primary" }), x.bg("primary"), x.pad("4px", "10px"), x.round("999px"), { _display: "inline-flex", _margin: none }),
+    "bs-price-tiles": { _display: "grid", _gridTemplateColumns: "repeat(3, minmax(0, 1fr))", "_gridTemplateColumns:tablet_portrait": "repeat(2, minmax(0, 1fr))", "_gridTemplateColumns:mobile_landscape": "minmax(0, 1fr)", _gridGap: x.v("space-s"), _width: "100%" },
+
+    // Testimonials
+    "bs-wall": { _display: "block", _width: "100%", _cssCustom: `.bs-wall { columns: 3 260px; column-gap: ${x.v("space-m")}; }\n.bs-wall > * { break-inside: avoid; margin-bottom: ${x.v("space-m")}; }` },
+    "bs-wall__rating": merge(x.bg("primary"), x.round("radius-l"), x.pad("space-card"), x.type({ color: "on-primary" }), {
+      _display: "flex", _direction: "column", _rowGap: "8px", _alignItems: "flex-start",
+      _cssCustom: `.bs-wall__rating .bs-stars__icon { color: ${x.v("on-primary")}; }`,
+    }),
+    "bs-wall__score": merge(x.type({ size: "text-display", weight: "heading-weight", ls: "heading-tracking", lh: "1", color: "inherit" }), { _margin: none }, x.font("bs-wall__score", "heading")),
+    "bs-wall__meta": merge(x.type({ size: "text-s", color: "inherit" }), { _margin: none, _opacity: "0.88" }),
+    "bs-quote-bento": { _display: "grid", _gridTemplateColumns: "minmax(0, 1.25fr) minmax(0, 1fr)", "_gridTemplateColumns:tablet_portrait": "minmax(0, 1fr)", _gridGap: x.v("space-m"), _width: "100%" },
+    "bs-quote-feature": merge(x.bg("primary"), x.round("radius-l"), x.pad("space-l"), x.type({ color: "on-primary" }), {
+      _display: "flex", _direction: "column", _rowGap: x.v("space-m"), _justifyContent: "space-between", _gridItemRowSpan: "2", "_gridItemRowSpan:tablet_portrait": "1",
+    }),
+    "bs-quote-feature__mark": merge(x.type({ size: "40px", color: "inherit" }), { _opacity: "0.7" }),
+    "bs-quote-feature__text": merge(x.type({ size: "text-xl", lh: "1.4", weight: "heading-weight", ls: "heading-tracking", color: "inherit" }), { _margin: none }, x.font("bs-quote-feature__text", "heading", " text-wrap: pretty;")),
+    "bs-quote-feature__name": merge(x.type({ size: "text-s", weight: "600", color: "inherit" }), { _margin: none }),
+    "bs-quote-feature__role": merge(x.type({ size: "text-s", color: "inherit" }), { _margin: none, _opacity: "0.85" }),
+    "bs-quote-large": merge(x.type({ size: "text-2xl", lh: "1.35", weight: "heading-weight", ls: "heading-tracking", color: "heading" }), { _margin: none }, x.font("bs-quote-large", "heading", " text-wrap: pretty;")),
+
+    // Calls to action
+    "bs-cta-image": { _position: "relative", _overflow: "hidden", _cssCustom: `.bs-cta-image::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, ${x.v("inverse")} 80%, transparent); }\n.bs-cta-image > * { position: relative; z-index: 1; }` },
+    "bs-cta-lines": merge({ _display: "flex", _direction: "column", _rowGap: x.v("space-m"), _alignItems: "center", _width: "100%", _padding: { top: x.v("space-l"), right: "0", bottom: x.v("space-l"), left: "0" } }, x.type({ align: "center" }), {
+      _border: { width: { top: "1px", right: "0", bottom: "1px", left: "0" }, style: "solid", color: x.color("border") },
+    }),
+    "bs-cta-card": merge(x.round("radius-l"), { _display: "grid", _gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 0.9fr)", "_gridTemplateColumns:tablet_portrait": "minmax(0, 1fr)", _overflow: "hidden", _width: "100%" }),
+    "bs-cta-card__text": merge(x.pad("space-l"), { _display: "flex", _direction: "column", _rowGap: x.v("space-m"), _justifyContent: "center", _alignItems: "flex-start" }),
+    "bs-cta-card__img": { _width: "100%", _height: "100%", _heightMin: "280px", _objectFit: "cover" },
+
+    // Contact
+    "bs-contact-card__value": merge(x.type({ size: "text-m", weight: "600", color: "heading", decoration: "none" }), { _margin: none, _cssCustom: ".bs-contact-card__value { overflow-wrap: anywhere; }" }),
+    "bs-center-form": { _display: "flex", _direction: "column", _rowGap: x.v("space-l"), _alignItems: "center", _width: "100%" },
+    "bs-narrow": { _widthMax: "720px" },
+    "bs-contact-inline": { _display: "flex", _direction: "row", "_direction:mobile_landscape": "column", _flexWrap: "wrap", _justifyContent: "center", _alignItems: "flex-start", _columnGap: x.v("space-l"), _rowGap: x.v("space-s") },
+
+    // Logos
+    "bs-logo-tiles": { _display: "grid", _gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", _gridGap: x.v("space-s"), _width: "100%" },
+    "bs-logo-tile": merge(x.bg("surface-alt"), x.round("radius-m"), x.pad("space-s"), { _display: "flex", _alignItems: "center", _justifyContent: "center", _heightMin: "96px", _cssCustom: ".bs-logo-tile .bs-logos__name { white-space: normal; text-align: center; }" }),
+    "bs-marquee": { _width: "100%", _overflow: "hidden", _cssCustom: ".bs-marquee { mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }" },
+    "bs-marquee__track": { _display: "flex", _direction: "row", _width: "max-content", _cssCustom: ".bs-marquee__track { animation: bs-marquee 32s linear infinite; }\n.bs-marquee:hover .bs-marquee__track { animation-play-state: paused; }\n@keyframes bs-marquee { to { transform: translateX(-50%); } }\n@media (prefers-reduced-motion: reduce) { .bs-marquee__track { animation: none; } }" },
+    "bs-marquee__group": { _display: "flex", _direction: "row", _alignItems: "center", _columnGap: "clamp(40px, 6vw, 80px)", _padding: { top: "8px", right: "clamp(40px, 6vw, 80px)", bottom: "8px", left: "0" } },
+  };
+}
+
+const pricingBand = (ctx: Ctx, children: Array<KitNode | null>, surface: "page" | "alt" = "page") => band({ surface, label: "Pricing", id: ctx.c.anchors.pricing, classes: "bs-pricing" }, children);
+const priceRows = (ctx: Ctx) => div("bs-menu", ctx.c.pricing.list.map(row => div("bs-menu__row", [div("bs-menu__name", [heading("h3", row.name, "bs-plan__name"), text(row.detail, "bs-small")]), text(row.price, "bs-menu__price")], row.name)), "Price list");
+const quoted = (ctx: Ctx, quote: string) => (ctx.c.lang === "de" ? `„${quote}“` : `“${quote}”`);
+
+export const pricingPlusVariants: Variant[] = [
+  {
+    // Bricks' nested tabs as a switch; rename the tabs (e.g. monthly/yearly) and edit the panes in Bricks.
+    type: "pricing", id: "switch", name: { de: "Mit Umschalter", en: "With switch" }, classes: convertPlusClasses,
+    build: ctx => pricingBand(ctx, [
+      intro({ eyebrow: ctx.c.pricing.eyebrow, title: ctx.c.pricing.title, lead: ctx.c.pricing.lead, center: true }),
+      tabs("pill", [
+        { label: ctx.c.lang === "de" ? "Pakete" : "Packages", pane: div("bs-plans", ctx.c.pricing.plans.map(plan => planCard(ctx, plan)), "Plans") },
+        { label: ctx.c.lang === "de" ? "Einzelpreise" : "Single prices", pane: priceRows(ctx) },
+      ], "Pricing switch"),
+      text(ctx.c.pricing.note, "bs-note"),
+    ], "alt"),
+  },
+  {
+    type: "pricing", id: "rows", name: { de: "Pakete als Zeilen", en: "Plans as rows" }, classes: convertPlusClasses,
+    build: ctx => pricingBand(ctx, [
+      intro({ eyebrow: ctx.c.pricing.eyebrow, title: ctx.c.pricing.title, lead: ctx.c.pricing.lead }),
+      div("bs-plan-rows", ctx.c.pricing.plans.map(plan => div(`bs-plan-row ${plan.featured ? "bs-plan-row--featured" : "bs-plan-row--default"}`, [
+        div("bs-plan-row__head", [plan.featured ? text(ctx.c.ui.mostPopular, "bs-badge--solid") : null, heading("h3", plan.name, "bs-title bs-size--s"), text(plan.description, "bs-card__text")]),
+        checklist(plan.features),
+        div("bs-plan-row__buy", [
+          div("bs-price-row", [text(plan.price, "bs-price"), text(plan.unit, "bs-small")]),
+          button(plan.cta.label, plan.cta.href, `bs-btn bs-btn-size--m ${plan.featured ? "bs-btn--primary" : "bs-btn--secondary"}`),
+        ]),
+      ], plan.name)), "Plans"),
+      text(ctx.c.pricing.note, "bs-note"),
+    ]),
+  },
+  {
+    type: "pricing", id: "tiles", name: { de: "Preiskacheln", en: "Price tiles" }, classes: convertPlusClasses,
+    build: ctx => pricingBand(ctx, [
+      intro({ eyebrow: ctx.c.pricing.eyebrow, title: ctx.c.pricing.title, lead: ctx.c.pricing.lead, center: true }),
+      div("bs-price-tiles", ctx.c.pricing.list.map(row => div("bs-card", [heading("h3", row.name, "bs-plan__name"), text(row.detail, "bs-card__text"), text(row.price, "bs-menu__price")], row.name)), "Prices"),
+      text(ctx.c.pricing.note, "bs-note"),
+    ], "alt"),
+  },
+];
+
+export const testimonialPlusVariants: Variant[] = [
+  {
+    type: "testimonials", id: "wall", name: { de: "Stimmen-Wand", en: "Quote wall" }, classes: convertPlusClasses,
+    build: ctx => band({ surface: "alt", label: "Testimonials" }, [
+      intro({ eyebrow: ctx.c.testimonials.eyebrow, title: ctx.c.testimonials.title }),
+      div("bs-wall", [
+        div("bs-wall__rating", [stars(), text(ctx.c.testimonials.rating.score, "bs-wall__score"), text(`${ctx.c.testimonials.rating.count} · ${ctx.c.testimonials.rating.source}`, "bs-wall__meta")], "Rating"),
+        ...ctx.c.testimonials.items.map(item => quoteCard(ctx, item)),
+      ], "Quotes"),
+    ]),
+  },
+  {
+    type: "testimonials", id: "featured", name: { de: "Ein Zitat groß", en: "One quote featured" }, classes: convertPlusClasses,
+    build: ctx => {
+      const [first, ...rest] = ctx.c.testimonials.items;
+      const p = PHOTOS[first.photo];
+      return band({ surface: "page", label: "Testimonials" }, [
+        intro({ eyebrow: ctx.c.testimonials.eyebrow, title: ctx.c.testimonials.title }),
+        div("bs-quote-bento", [
+          div("bs-quote-feature", [
+            icon("quote", "bs-quote-feature__mark"),
+            text(first.quote, "bs-quote-feature__text"),
+            div("bs-quote__author", [image(p.url, p.alt[ctx.c.lang], "bs-avatar"), div("bs-quote__meta", [text(first.name, "bs-quote-feature__name"), text(first.role, "bs-quote-feature__role")])]),
+          ], first.name),
+          ...rest.slice(0, 2).map(item => quoteCard(ctx, item)),
+        ], "Quotes"),
+      ]);
+    },
+  },
+  {
+    type: "testimonials", id: "photo", name: { de: "Mit großem Foto", en: "With large photo" }, classes: convertPlusClasses,
+    build: ctx => {
+      const item = ctx.c.testimonials.items[0];
+      const p = PHOTOS[item.photo];
+      return band({ surface: "alt", label: "Testimonial" }, [
+        div("bs-split", [
+          image(p.url, p.alt[ctx.c.lang], "bs-media bs-ratio--4x5"),
+          div("bs-stack", [
+            text(ctx.c.testimonials.eyebrow, "bs-eyebrow"),
+            heading("h2", ctx.c.testimonials.title, "bs-title bs-size--s"),
+            stars(),
+            text(quoted(ctx, item.quote), "bs-quote-large"),
+            div("bs-quote__meta", [text(item.name, "bs-quote__name"), text(item.role, "bs-small")]),
+            text(`${ctx.c.testimonials.rating.score} · ${ctx.c.testimonials.rating.count} · ${ctx.c.testimonials.rating.source}`, "bs-small"),
+          ], "Quote"),
+        ]),
+      ]);
+    },
+  },
+];
+
+export const faqPlusVariants: Variant[] = [
+  {
+    type: "faq", id: "accordion", name: { de: "Aufklappbar", en: "Accordion" }, classes: convertPlusClasses,
+    build: ctx => band({ surface: "page", label: "FAQ", id: ctx.c.anchors.faq }, [
+      intro({ eyebrow: ctx.c.faq.eyebrow, title: ctx.c.faq.title, lead: ctx.c.faq.lead, center: true }),
+      accordion(ctx.c.faq.items.map(item => ({ title: item.q, body: [text(item.a, "bs-text")] })), "Questions"),
+    ]),
+  },
+  {
+    type: "faq", id: "cards", name: { de: "Karten", en: "Cards" }, classes: convertPlusClasses,
+    build: ctx => band({ surface: "alt", label: "FAQ", id: ctx.c.anchors.faq }, [
+      intro({ eyebrow: ctx.c.faq.eyebrow, title: ctx.c.faq.title, lead: ctx.c.faq.lead, center: true }),
+      div("bs-grid bs-cols--2", ctx.c.faq.items.map(item => div("bs-card", [heading("h3", item.q, "bs-card__title"), text(item.a, "bs-card__text")], item.q)), "Questions"),
+    ]),
+  },
+];
+
+export const ctaPlusVariants: Variant[] = [
+  {
+    type: "cta", id: "image", name: { de: "Mit Hintergrundbild", en: "With background image" }, classes: convertPlusClasses,
+    build: ctx => band({
+      surface: "inverse", label: "Call to action", classes: "bs-cta-image", containerClasses: "bs-align--center",
+      settings: { _background: { image: { url: PHOTOS[ctx.c.about.image].url, size: "full" }, size: "cover", position: "center center", repeat: "no-repeat" } },
+    }, [
+      intro({ eyebrow: ctx.c.cta.eyebrow, title: ctx.c.cta.title, lead: ctx.c.cta.lead, center: true }),
+      actions([ctx.c.cta.primary, ctx.c.cta.secondary], "inverse"),
+    ]),
+  },
+  {
+    type: "cta", id: "minimal", name: { de: "Schlicht mit Linien", en: "Minimal with rules" }, classes: convertPlusClasses,
+    build: ctx => band({ surface: "page", space: "tight", label: "Call to action" }, [
+      div("bs-cta-lines", [heading("h2", ctx.c.cta.title, "bs-title bs-size--l"), actions([ctx.c.cta.primary, ctx.c.cta.secondary])], "CTA"),
+    ]),
+  },
+  {
+    type: "cta", id: "photo", name: { de: "Karte mit Foto", en: "Card with photo" }, classes: convertPlusClasses,
+    build: ctx => {
+      const p = PHOTOS[ctx.c.about.secondImage];
+      return band({ surface: "page", label: "Call to action" }, [
+        // bs-surface--primary on the card colours its text like a primary band.
+        div("bs-surface--primary bs-cta-card", [
+          div("bs-cta-card__text", [intro({ eyebrow: ctx.c.cta.eyebrow, title: ctx.c.cta.title, lead: ctx.c.cta.lead, size: "l" }), actions([ctx.c.cta.primary, ctx.c.cta.secondary], "primary")]),
+          image(p.url, p.alt[ctx.c.lang], "bs-cta-card__img"),
+        ], "CTA card"),
+      ]);
+    },
+  },
+];
+
+function contactItems(ctx: Ctx): Array<{ icon: "call" | "mail" | "pin" | "time"; title: string; value: string; href?: string }> {
+  return [
+    { icon: "call", title: ctx.c.ui.callUs, value: ctx.c.brand.phone, href: telHref(ctx.c.brand.phone) },
+    ...(ctx.c.brand.email ? [{ icon: "mail" as const, title: ctx.c.ui.writeUs, value: ctx.c.brand.email, href: `mailto:${ctx.c.brand.email}` }] : []),
+    { icon: "pin", title: ctx.c.contact.addressTitle, value: ctx.c.brand.address },
+    { icon: "time", title: ctx.c.contact.hoursTitle, value: ctx.c.brand.hours.join(" · ") },
+  ];
+}
+
+export const contactPlusVariants: Variant[] = [
+  {
+    type: "contact", id: "cards", name: { de: "Kontaktkarten", en: "Contact cards" }, classes: convertPlusClasses,
+    build: ctx => {
+      const items = contactItems(ctx);
+      return band({ surface: "page", label: "Contact", id: ctx.c.anchors.contact }, [
+        intro({ eyebrow: ctx.c.contact.eyebrow, title: ctx.c.contact.title, lead: ctx.c.contact.lead, center: true }),
+        div(`bs-grid ${items.length === 4 ? "bs-cols--4" : "bs-cols--3"}`, items.map(item => div("bs-card", [
+          icon(item.icon, "bs-card__icon"), heading("h3", item.title, "bs-card__title"),
+          item.href ? textLink(item.value, item.href, "bs-contact-card__value") : text(item.value, "bs-card__text"),
+        ], item.title)), "Contact details"),
+      ]);
+    },
+  },
+  {
+    type: "contact", id: "centered", name: { de: "Formular zentriert", en: "Centred form" }, classes: convertPlusClasses,
+    build: ctx => band({ surface: "alt", label: "Contact", id: ctx.c.anchors.contact }, [
+      div("bs-center-form", [
+        intro({ eyebrow: ctx.c.contact.eyebrow, title: ctx.c.contact.title, lead: ctx.c.contact.lead, center: true }),
+        div("bs-form-card bs-narrow", [form(ctx, [
+          { type: "text", label: ctx.c.contact.labels.name, required: true, width: 50 },
+          { type: "email", label: ctx.c.contact.labels.email, required: true, width: 50 },
+          { type: "tel", label: ctx.c.contact.labels.phone },
+          { type: "textarea", label: ctx.c.contact.labels.message, required: true },
+          { type: "checkbox", label: ctx.c.contact.labels.privacy, required: true },
+        ], ctx.c.contact.labels.submit)], "Form"),
+        div("bs-contact-inline", contactItems(ctx).slice(0, 3).map(item => infoRow(item.icon, item.title, item.value, item.href)), "Contact details"),
+      ]),
+    ]),
+  },
+];
+
+export const logosPlusVariants: Variant[] = [
+  {
+    type: "logos", id: "tiles", name: { de: "Kacheln", en: "Tiles" }, classes: convertPlusClasses,
+    build: ctx => band({ surface: "page", space: "tight", label: "Logos", containerClasses: "bs-align--center" }, [
+      text(ctx.c.logos.title, "bs-small"),
+      div("bs-logo-tiles", ctx.c.logos.names.map(name => div("bs-logo-tile", [text(name, "bs-logos__name")], name)), "Logos"),
+    ]),
+  },
+  {
+    type: "logos", id: "marquee", name: { de: "Laufband", en: "Marquee" }, classes: convertPlusClasses,
+    build: ctx => band({ surface: "page", space: "tight", label: "Logos", containerClasses: "bs-align--center" }, [
+      text(ctx.c.logos.title, "bs-small"),
+      // The second copy closes the loop and is hidden from screen readers.
+      div("bs-marquee", [div("bs-marquee__track", [
+        div("bs-marquee__group", ctx.c.logos.names.map(name => text(name, "bs-logos__name")), "Logos"),
+        node("div", "bs-marquee__group", { _attributes: [{ name: "aria-hidden", value: "true" }] }, ctx.c.logos.names.map(name => text(name, "bs-logos__name")), "Logos (loop)"),
+      ])], "Marquee"),
+    ]),
+  },
+];
diff --git a/src/lib/kit/sections/conversion.ts b/src/lib/kit/sections/conversion.ts
index 42b375f..b1fef44 100644
--- a/src/lib/kit/sections/conversion.ts
+++ b/src/lib/kit/sections/conversion.ts
@@ -32,7 +32,7 @@ function pricingClasses(r: ResolvedKit) {
 
 const pricingBand = (ctx: Ctx, children: Array<KitNode | null>, surface: "page" | "alt" = "page") => band({ surface, label: "Pricing", id: ctx.c.anchors.pricing, classes: "bs-pricing" }, children);
 
-function planCard(ctx: Ctx, plan: Ctx["c"]["pricing"]["plans"][number]): KitNode {
+export function planCard(ctx: Ctx, plan: Ctx["c"]["pricing"]["plans"][number]): KitNode {
   return div(`bs-plan ${plan.featured ? "bs-plan--featured" : "bs-plan--default"}`, [
     plan.featured ? text(ctx.c.ui.mostPopular, "bs-plan__badge") : null,
     heading("h3", plan.name, "bs-plan__name"),
@@ -97,7 +97,7 @@ function testimonialClasses(r: ResolvedKit) {
   };
 }
 
-function quoteCard(ctx: Ctx, item: Ctx["c"]["testimonials"]["items"][number]): KitNode {
+export function quoteCard(ctx: Ctx, item: Ctx["c"]["testimonials"]["items"][number]): KitNode {
   const p = PHOTOS[item.photo];
   return div("bs-card bs-quote", [
     stars(),
diff --git a/src/lib/kit/sections/header-hero-plus.ts b/src/lib/kit/sections/header-hero-plus.ts
new file mode 100644
index 0000000..e7a9dde
--- /dev/null
+++ b/src/lib/kit/sections/header-hero-plus.ts
@@ -0,0 +1,167 @@
+import { button, div, heading, image, node, text, type KitNode } from "../build";
+import { PHOTOS } from "../images";
+import { merge, sx } from "../styles";
+import type { ResolvedKit } from "../tokens";
+import { actions, band, checklist, infoRow, photo, stars, type Ctx, type Variant } from "./common";
+import { brand, navLinks, telHref } from "./header-hero";
+import { form } from "./more";
+
+/** More headers and heroes; shared parts come from header-hero.ts. */
+function headerPlusClasses(r: ResolvedKit) {
+  const x = sx(r);
+  return {
+    // Centred logo: navigation and actions share the free space, so the brand sits in the middle.
+    "bs-nav--grow": { _flexGrow: "1", _flexBasis: "0" },
+    "bs-header__actions--grow": { _flexGrow: "1", _flexBasis: "0", _justifyContent: "flex-end" },
+    "bs-header__pill": merge(x.bg("surface"), x.line("1px", "border"), x.round("999px"), x.pad("10px", "10px", "10px", "24px"), x.shadow("10px", "30px", "-18px")),
+  };
+}
+
+const bar = (ctx: Ctx, children: KitNode[], o: { surface?: "page" | "alt" | "inverse"; containerClasses?: string; classes?: string } = {}) =>
+  band({ surface: o.surface ?? "page", space: "bar", label: "Header", classes: o.classes, containerClasses: `bs-header__bar ${o.containerClasses ?? ""}`.trim() }, children);
+
+export const headerPlusVariants: Variant[] = [
+  {
+    type: "navbar", id: "centered", name: { de: "Logo in der Mitte", en: "Centred logo" }, classes: headerPlusClasses,
+    build: ctx => bar(ctx, [
+      { ...navLinks(ctx), classes: ["bs-nav", "bs-nav--grow"] },
+      brand(ctx),
+      div("bs-header__actions bs-header__actions--grow", [button(ctx.c.navCta.label, ctx.c.navCta.href, "bs-btn bs-btn-size--s bs-btn--primary")]),
+    ], { classes: "bs-header" }),
+  },
+  {
+    type: "navbar", id: "floating", name: { de: "Schwebende Leiste", en: "Floating bar" }, classes: headerPlusClasses,
+    build: ctx => bar(ctx, [
+      brand(ctx),
+      navLinks(ctx),
+      div("bs-header__actions", [button(ctx.c.navCta.label, ctx.c.navCta.href, "bs-btn bs-btn-size--s bs-btn--primary")]),
+    ], { surface: "alt", containerClasses: "bs-header__pill" }),
+  },
+  {
+    type: "navbar", id: "dark", name: { de: "Dunkel", en: "Dark" }, classes: headerPlusClasses,
+    build: ctx => bar(ctx, [
+      brand(ctx),
+      navLinks(ctx),
+      div("bs-header__actions", [button(ctx.c.navCta.label, ctx.c.navCta.href, "bs-btn bs-btn-size--s bs-btn--on-dark")]),
+    ], { surface: "inverse" }),
+  },
+];
+
+function heroPlusClasses(r: ResolvedKit) {
+  const x = sx(r);
+  const none = { top: "0", bottom: "0" };
+  return {
+    "bs-hero-bento": { _display: "grid", _gridTemplateColumns: "minmax(0, 1.2fr) minmax(0, 1fr)", _gridGap: x.v("space-s"), _width: "100%" },
+    // Bricks has no grid span control on image elements, so the span lives in class CSS.
+    "bs-hero-bento__main": merge(x.round("radius-l"), { _width: "100%", _height: "100%", _heightMin: "340px", _objectFit: "cover", _cssCustom: ".bs-hero-bento__main { grid-row: span 2; }" }),
+    "bs-hero-bento__tile": merge(x.round("radius-l"), x.pad("space-card"), { _display: "flex", _direction: "column", _justifyContent: "flex-end", _rowGap: "6px", _heightMin: "160px" }),
+    "bs-hero-bento__tile--primary": merge(x.bg("primary"), x.type({ color: "on-primary" })),
+    "bs-hero-bento__tile--soft": merge(x.bg("primary-soft"), x.type({ color: "heading" })),
+    "bs-hero-bento__value": merge(x.type({ size: "text-3xl", weight: "heading-weight", ls: "heading-tracking", lh: "1", color: "inherit" }), { _margin: none }, x.font("bs-hero-bento__value", "heading")),
+    "bs-hero-bento__label": merge(x.type({ size: "text-s", lh: "1.4", color: "inherit" }), { _margin: none, _opacity: "0.88" }),
+
+    "bs-hero-stats": {
+      _display: "grid", _gridTemplateColumns: "repeat(4, minmax(0, 1fr))", "_gridTemplateColumns:mobile_landscape": "repeat(2, minmax(0, 1fr))", _gridGap: x.v("space-m"), _width: "100%",
+      _padding: { top: x.v("space-l"), right: "0", bottom: "0", left: "0" }, _border: { width: { top: "1px", right: "0", bottom: "0", left: "0" }, style: "solid", color: x.color("border") },
+    },
+    "bs-hero-stats__item": merge({ _alignItems: "center" }, x.type({ align: "center" })),
+
+    "bs-hero__statement": { _widthMax: "1000px" },
+    "bs-hero-meta": { _display: "grid", _gridTemplateColumns: "minmax(0, 1fr) auto", "_gridTemplateColumns:tablet_portrait": "minmax(0, 1fr)", _gridGap: x.v("space-m"), _alignItems: "end", _width: "100%" },
+    "bs-ratio--wide": { _aspectRatio: "21/9", "_aspectRatio:mobile_landscape": "4/3" },
+
+    "bs-hero__trust": { _display: "flex", _direction: "row", _flexWrap: "wrap", _alignItems: "center", _columnGap: "14px", _rowGap: "8px" },
+    "bs-avatars": { _display: "flex", _direction: "row" },
+    "bs-avatars__img": merge(x.round("999px"), x.line("2px", "bg"), { _width: "40px", _height: "40px", _objectFit: "cover", _cssCustom: ".bs-avatars__img + .bs-avatars__img { margin-left: -10px; }" }),
+    "bs-hero__trust-text": { _display: "flex", _direction: "column", _rowGap: "2px" },
+  };
+}
+
+const heroText = (ctx: Ctx, extra: Array<KitNode | null> = []) => div("bs-hero__content", [
+  text(ctx.c.hero.eyebrow, "bs-eyebrow"),
+  heading("h1", ctx.c.hero.title, "bs-title bs-size--display"),
+  text(ctx.c.hero.lead, "bs-lead"),
+  actions([ctx.c.hero.primary, ctx.c.hero.secondary]),
+  ...extra,
+], "Hero text");
+
+const trust = (ctx: Ctx) => div("bs-hero__trust", [
+  div("bs-avatars", ctx.c.testimonials.items.map(item => image(PHOTOS[item.photo].url, PHOTOS[item.photo].alt[ctx.c.lang], "bs-avatars__img")), "Customers"),
+  div("bs-hero__trust-text", [stars(), text(`${ctx.c.testimonials.rating.score} · ${ctx.c.testimonials.rating.count}`, "bs-small")]),
+], "Trust");
+
+export const heroPlusVariants: Variant[] = [
+  {
+    type: "hero", id: "bento", name: { de: "Bento mit Kacheln", en: "Bento tiles" }, classes: heroPlusClasses,
+    build: ctx => {
+      const stat = ctx.c.stats.items[0];
+      const main = PHOTOS[ctx.c.hero.image];
+      return band({ surface: "page", label: "Hero", classes: "bs-hero" }, [
+        div("bs-split", [
+          heroText(ctx),
+          div("bs-hero-bento", [
+            image(main.url, main.alt[ctx.c.lang], "bs-hero-bento__main"),
+            div("bs-hero-bento__tile bs-hero-bento__tile--primary", [text(stat.value, "bs-hero-bento__value"), text(stat.label, "bs-hero-bento__label")], stat.label),
+            div("bs-hero-bento__tile bs-hero-bento__tile--soft", [stars(), text(ctx.c.testimonials.rating.score, "bs-hero-bento__value"), text(`${ctx.c.testimonials.rating.count} · ${ctx.c.testimonials.rating.source}`, "bs-hero-bento__label")], "Rating"),
+          ], "Tiles"),
+        ]),
+      ]);
+    },
+  },
+  {
+    type: "hero", id: "stats", name: { de: "Zentriert mit Zahlen", en: "Centred with numbers" }, classes: heroPlusClasses,
+    build: ctx => band({ surface: "page", label: "Hero", classes: "bs-hero", containerClasses: "bs-align--center" }, [
+      node("div", "bs-intro--center", {}, [
+        text(ctx.c.hero.eyebrow, "bs-eyebrow"),
+        heading("h1", ctx.c.hero.title, "bs-title bs-size--display"),
+        text(ctx.c.hero.lead, "bs-lead"),
+        actions([ctx.c.hero.primary, ctx.c.hero.secondary]),
+      ], "Hero text"),
+      div("bs-hero-stats", ctx.c.stats.items.map(stat => div("bs-stat bs-hero-stats__item", [text(stat.value, "bs-stat__value"), text(stat.label, "bs-stat__label")], stat.label)), "Numbers"),
+    ]),
+  },
+  {
+    type: "hero", id: "statement", name: { de: "Große Aussage mit Bildband", en: "Statement with wide image" }, classes: heroPlusClasses,
+    build: ctx => {
+      const p = PHOTOS[ctx.c.hero.image];
+      return band({ surface: "page", label: "Hero", classes: "bs-hero" }, [
+        text(ctx.c.hero.eyebrow, "bs-eyebrow"),
+        heading("h1", ctx.c.hero.title, "bs-title bs-size--display bs-hero__statement"),
+        div("bs-hero-meta", [text(ctx.c.hero.lead, "bs-lead"), actions([ctx.c.hero.primary, ctx.c.hero.secondary])]),
+        image(p.url, p.alt[ctx.c.lang], "bs-media bs-ratio--wide"),
+      ]);
+    },
+  },
+  {
+    type: "hero", id: "reverse", name: { de: "Bild links mit Kundenstimmen", en: "Image left with social proof" }, classes: heroPlusClasses,
+    build: ctx => band({ surface: "alt", label: "Hero", classes: "bs-hero" }, [
+      div("bs-split", [
+        photo(ctx, ctx.c.hero.image, "hero"),
+        heroText(ctx, [checklist(ctx.c.hero.points), trust(ctx)]),
+      ]),
+    ]),
+  },
+  {
+    type: "hero", id: "form", name: { de: "Mit Anfrageformular", en: "With enquiry form" }, classes: heroPlusClasses,
+    build: ctx => band({ surface: "alt", label: "Hero", classes: "bs-hero" }, [
+      div("bs-split", [
+        div("bs-hero__content", [
+          text(ctx.c.hero.eyebrow, "bs-eyebrow"),
+          heading("h1", ctx.c.hero.title, "bs-title bs-size--display"),
+          text(ctx.c.hero.lead, "bs-lead"),
+          checklist(ctx.c.hero.points),
+          infoRow("call", ctx.c.ui.callUs, ctx.c.brand.phone, telHref(ctx.c.brand.phone)),
+        ], "Hero text"),
+        div("bs-form-card", [
+          heading("h2", ctx.c.contact.formTitle, "bs-card__title"),
+          form(ctx, [
+            { type: "text", label: ctx.c.contact.labels.name, required: true },
+            { type: "tel", label: ctx.c.contact.labels.phone, required: true },
+            { type: "textarea", label: ctx.c.contact.labels.message },
+            { type: "checkbox", label: ctx.c.contact.labels.privacy, required: true },
+          ], ctx.c.contact.labels.submit),
+        ], "Form"),
+      ]),
+    ]),
+  },
+];
diff --git a/src/lib/kit/sections/header-hero.ts b/src/lib/kit/sections/header-hero.ts
index 9d2b029..966b21f 100644
--- a/src/lib/kit/sections/header-hero.ts
+++ b/src/lib/kit/sections/header-hero.ts
@@ -4,12 +4,12 @@ import { merge, sx } from "../styles";
 import type { ResolvedKit } from "../tokens";
 import { actions, band, checklist, photo, stars, type Ctx, type Variant } from "./common";
 
-const telHref = (phone: string) => `tel:${phone.replace(/[^\d+]/g, "")}`;
+export const telHref = (phone: string) => `tel:${phone.replace(/[^\d+]/g, "")}`;
 
-function brand(ctx: Ctx): KitNode {
+export function brand(ctx: Ctx): KitNode {
   return textLink(ctx.c.brand.name, "/", "bs-brand");
 }
-function navLinks(ctx: Ctx): KitNode {
+export function navLinks(ctx: Ctx): KitNode {
   return node("div", "bs-nav", { tag: "nav", _attributes: [{ name: "aria-label", value: ctx.c.lang === "de" ? "Hauptnavigation" : "Main navigation" }] }, ctx.c.nav.map(link => textLink(link.label, link.href, "bs-nav__link")), "Navigation");
 }
 
diff --git a/src/lib/kit/sections/index.ts b/src/lib/kit/sections/index.ts
index f3a36b9..e1f0b28 100644
--- a/src/lib/kit/sections/index.ts
+++ b/src/lib/kit/sections/index.ts
@@ -6,12 +6,21 @@ import { headerVariants, heroVariants } from "./header-hero";
 import { featuresVariants, servicesVariants } from "./services";
 import { ctaVariants, pricingVariants, testimonialVariants } from "./conversion";
 import { footerVariants, moreVariants } from "./more";
+import { headerPlusVariants, heroPlusVariants } from "./header-hero-plus";
+import { contentPlusVariants, featuresPlusVariants, portfolioPlusVariants, servicesPlusVariants, statsPlusVariants, stepsPlusVariants, teamPlusVariants, timelinePlusVariants } from "./services-plus";
+import { contactPlusVariants, ctaPlusVariants, faqPlusVariants, logosPlusVariants, pricingPlusVariants, testimonialPlusVariants } from "./conversion-plus";
+import { blogPlusVariants, footerPlusVariants, galleryPlusVariants, screenPlusVariants } from "./more-plus";
 
 export { SECTION_TYPES, type SectionType, type Variant } from "./common";
 
 export const VARIANTS: Variant[] = [
   ...headerVariants, ...heroVariants, ...servicesVariants, ...featuresVariants, ...pricingVariants,
   ...testimonialVariants, ...ctaVariants, ...footerVariants, ...moreVariants,
+  // Added in 0.12; each type keeps its first layout as the default.
+  ...headerPlusVariants, ...heroPlusVariants, ...servicesPlusVariants, ...featuresPlusVariants, ...stepsPlusVariants, ...statsPlusVariants,
+  ...contentPlusVariants, ...timelinePlusVariants, ...teamPlusVariants, ...portfolioPlusVariants, ...pricingPlusVariants, ...testimonialPlusVariants,
+  ...faqPlusVariants, ...ctaPlusVariants, ...contactPlusVariants, ...logosPlusVariants, ...blogPlusVariants, ...galleryPlusVariants,
+  ...footerPlusVariants, ...screenPlusVariants,
 ];
 
 export const isSectionType = (value: unknown): value is SectionType => typeof value === "string" && (SECTION_TYPES as readonly string[]).includes(value);
diff --git a/src/lib/kit/sections/more-plus.ts b/src/lib/kit/sections/more-plus.ts
new file mode 100644
index 0000000..4031b37
--- /dev/null
+++ b/src/lib/kit/sections/more-plus.ts
@@ -0,0 +1,171 @@
+import { button, div, heading, image, node, text, textLink } from "../build";
+import { PHOTOS } from "../images";
+import { merge, sx } from "../styles";
+import type { ResolvedKit } from "../tokens";
+import { actions, band, intro, photo, type Ctx, type Variant } from "./common";
+import { legalRow, form, socials } from "./more";
+
+/** More layouts for articles, galleries, footers and single-purpose pages. */
+function morePlusClasses(r: ResolvedKit) {
+  const x = sx(r);
+  const none = { top: "0", bottom: "0" };
+  const bottomLine = { _border: { width: { top: "0", right: "0", bottom: "1px", left: "0" }, style: "solid", color: x.color("border") } };
+  return {
+    // Articles
+    "bs-blog-feature": { _display: "grid", _gridTemplateColumns: "minmax(0, 1.25fr) minmax(0, 1fr)", "_gridTemplateColumns:tablet_portrait": "minmax(0, 1fr)", _gridGap: x.v("space-xl"), _alignItems: "start", _width: "100%" },
+    "bs-blog-side": { _display: "flex", _direction: "column", _rowGap: x.v("space-m"), _width: "100%" },
+    "bs-post-row": merge({ _display: "grid", _gridTemplateColumns: "140px minmax(0, 1fr)", "_gridTemplateColumns:mobile_portrait": "96px minmax(0, 1fr)", _columnGap: x.v("space-m"), _alignItems: "start", _padding: { top: "0", right: "0", bottom: x.v("space-m"), left: "0" } }, bottomLine),
+    "bs-post-row__img": merge(x.round("radius-m"), { _width: "100%", _aspectRatio: "1/1", _objectFit: "cover" }),
+    "bs-post-list": { _display: "flex", _direction: "column", _width: "100%" },
+    "bs-post-line": merge({ _display: "grid", _gridTemplateColumns: "minmax(0, 1fr) 280px", "_gridTemplateColumns:mobile_landscape": "minmax(0, 1fr)", _gridGap: x.v("space-l"), _alignItems: "center", _padding: { top: x.v("space-l"), right: "0", bottom: x.v("space-l"), left: "0" } }, bottomLine),
+    "bs-post-line__img": merge(x.round("radius-m"), { _width: "100%", _aspectRatio: "4/3", _objectFit: "cover", "_order:mobile_landscape": "-1" }),
+
+    // Galleries
+    "bs-masonry": { _display: "block", _width: "100%", _cssCustom: `.bs-masonry { columns: 3 150px; column-gap: ${x.v("space-s")}; }` },
+    "bs-masonry__img": merge(x.round("radius-m"), { _display: "block", _width: "100%", _objectFit: "cover", _margin: { top: "0", bottom: x.v("space-s") }, _cssCustom: ".bs-masonry__img { break-inside: avoid; }" }),
+    "bs-gbento": { _display: "grid", _gridTemplateColumns: "repeat(4, minmax(0, 1fr))", "_gridTemplateColumns:mobile_landscape": "repeat(2, minmax(0, 1fr))", _gridAutoRows: "clamp(130px, 15vw, 220px)", _gridGap: x.v("space-s"), _width: "100%" },
+    "bs-gbento__cell": { _overflow: "hidden" },
+    "bs-gbento__cell--big": { _gridItemColumnSpan: "2", _gridItemRowSpan: "2", "_gridItemRowSpan:mobile_landscape": "1" },
+    "bs-gbento__cell--wide": { _gridItemColumnSpan: "2" },
+
+    // Footers
+    "bs-footer__giant": merge(x.type({ size: "clamp(48px, 9vw, 150px)", weight: "heading-weight", ls: "-0.04em", lh: "0.95", color: "inherit" }), { _margin: none, _width: "100%" }, x.font("bs-footer__giant", "heading", " overflow-wrap: anywhere; text-wrap: balance;")),
+    "bs-footer__top": merge({ _display: "flex", _direction: "row", "_direction:tablet_portrait": "column", _justifyContent: "space-between", _alignItems: "center", "_alignItems:tablet_portrait": "flex-start", _columnGap: x.v("space-l"), _rowGap: x.v("space-m"), _width: "100%", _padding: { top: "0", right: "0", bottom: x.v("space-l"), left: "0" } }, {
+      _border: { width: { top: "0", right: "0", bottom: "1px", left: "0" }, style: "solid", color: { raw: "currentColor" } }, _cssCustom: ".bs-footer__top { border-bottom-color: color-mix(in srgb, currentColor 18%, transparent); }",
+    }),
+
+    // Single-purpose pages
+    "bs-screen-split": { _display: "grid", _gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)", "_gridTemplateColumns:tablet_portrait": "minmax(0, 1fr)", _gridGap: x.v("space-xl"), _alignItems: "center", _width: "100%" },
+    "bs-screen-split__text": { _display: "flex", _direction: "column", _rowGap: x.v("space-m"), _alignItems: "flex-start", _widthMax: "560px" },
+    "bs-link-row": { _display: "flex", _direction: "row", _flexWrap: "wrap", _columnGap: x.v("space-m"), _rowGap: "8px" },
+    "bs-notify": { _width: "100%", _widthMax: "480px" },
+  };
+}
+
+const postMeta = (post: Ctx["c"]["blog"]["posts"][number]) => text(`${post.category} · ${post.date}`, "bs-post__meta");
+const readMore = (ctx: Ctx) => textLink(ctx.c.ui.readMore, "#", "bs-link", "arrow-forward");
+
+export const blogPlusVariants: Variant[] = [
+  {
+    type: "blog", id: "featured", name: { de: "Ein Beitrag groß", en: "One post featured" }, classes: morePlusClasses,
+    build: ctx => {
+      const [first, ...rest] = ctx.c.blog.posts;
+      return band({ surface: "page", label: "Blog" }, [
+        intro({ eyebrow: ctx.c.blog.eyebrow, title: ctx.c.blog.title, lead: ctx.c.blog.lead }),
+        div("bs-blog-feature", [
+          div("bs-post", [photo(ctx, first.image, "16x10"), postMeta(first), heading("h3", first.title, "bs-title bs-size--s"), text(first.excerpt, "bs-card__text"), readMore(ctx)], first.title),
+          div("bs-blog-side", rest.slice(0, 3).map(post => div("bs-post-row", [
+            image(PHOTOS[post.image].url, PHOTOS[post.image].alt[ctx.c.lang], "bs-post-row__img"),
+            div("bs-post", [postMeta(post), heading("h3", post.title, "bs-card__title"), readMore(ctx)]),
+          ], post.title)), "More articles"),
+        ]),
+      ]);
+    },
+  },
+  {
+    type: "blog", id: "list", name: { de: "Liste", en: "List" }, classes: morePlusClasses,
+    build: ctx => band({ surface: "page", label: "Blog" }, [
+      intro({ eyebrow: ctx.c.blog.eyebrow, title: ctx.c.blog.title, lead: ctx.c.blog.lead }),
+      div("bs-post-list", ctx.c.blog.posts.map(post => div("bs-post-line", [
+        div("bs-post", [postMeta(post), heading("h3", post.title, "bs-title bs-size--s"), text(post.excerpt, "bs-card__text"), readMore(ctx)]),
+        image(PHOTOS[post.image].url, PHOTOS[post.image].alt[ctx.c.lang], "bs-post-line__img"),
+      ], post.title)), "Articles"),
+    ]),
+  },
+];
+
+export const galleryPlusVariants: Variant[] = [
+  {
+    type: "gallery", id: "masonry", name: { de: "Mauerwerk", en: "Masonry" }, classes: morePlusClasses,
+    build: ctx => band({ surface: "page", label: "Gallery" }, [
+      intro({ eyebrow: ctx.c.gallery.eyebrow, title: ctx.c.gallery.title }),
+      div("bs-masonry", ctx.c.gallery.images.map((key, i) => { const p = PHOTOS[key]; return image(p.url, p.alt[ctx.c.lang], `bs-masonry__img bs-ratio--${["4x5", "1x1", "4x3"][i % 3]}`); }), "Images"),
+    ]),
+  },
+  {
+    type: "gallery", id: "bento", name: { de: "Bento", en: "Bento" }, classes: morePlusClasses,
+    build: ctx => band({ surface: "alt", label: "Gallery" }, [
+      intro({ eyebrow: ctx.c.gallery.eyebrow, title: ctx.c.gallery.title }),
+      // Six photos fill four columns and three rows: one big, three wide, two small.
+      div("bs-gbento", ctx.c.gallery.images.slice(0, 6).map((key, i) => {
+        const p = PHOTOS[key];
+        const size = i === 0 ? " bs-gbento__cell--big" : [1, 4, 5].includes(i) ? " bs-gbento__cell--wide" : "";
+        return div(`bs-gbento__cell${size}`, [image(p.url, p.alt[ctx.c.lang], "bs-gallery__item")]);
+      }), "Images"),
+    ]),
+  },
+];
+
+export const footerPlusVariants: Variant[] = [
+  {
+    type: "footer", id: "big", name: { de: "Großer Name", en: "Big name" }, classes: morePlusClasses,
+    build: ctx => band({ surface: "inverse", space: "tight", label: "Footer", classes: "bs-footer" }, [
+      div("bs-footer__grid", [
+        div("bs-footer__col", [text(ctx.c.footer.tagline, "bs-footer__small"), socials()], "Brand"),
+        ...ctx.c.footer.columns.map(col => div("bs-footer__col", [text(col.title, "bs-footer__title"), ...col.links.map(link => textLink(link.label, link.href, "bs-footer__link"))], col.title)),
+        div("bs-footer__col", [text(ctx.c.contact.eyebrow, "bs-footer__title"), text(ctx.c.brand.phone, "bs-footer__small"), text(ctx.c.brand.address, "bs-footer__small")], "Contact"),
+      ]),
+      text(ctx.c.brand.name, "bs-footer__giant"),
+      legalRow(ctx),
+    ]),
+  },
+  {
+    type: "footer", id: "cta", name: { de: "Mit Aufruf", en: "With call to action" }, classes: morePlusClasses,
+    build: ctx => band({ surface: "inverse", space: "tight", label: "Footer", classes: "bs-footer" }, [
+      div("bs-footer__top", [intro({ title: ctx.c.cta.title, lead: ctx.c.cta.lead, size: "l" }), actions([ctx.c.cta.primary, ctx.c.cta.secondary], "inverse")], "Call to action"),
+      div("bs-footer__row", [
+        textLink(ctx.c.brand.name, "/", "bs-brand"),
+        node("div", "bs-footer__nav", { tag: "nav" }, ctx.c.nav.map(link => textLink(link.label, link.href, "bs-footer__link"))),
+        socials(),
+      ]),
+      legalRow(ctx),
+    ]),
+  },
+];
+
+export const screenPlusVariants: Variant[] = [
+  {
+    type: "login", id: "split", name: { de: "Mit Bild", en: "With image" }, classes: morePlusClasses,
+    build: ctx => band({ surface: "page", label: "Login", classes: "bs-screen" }, [
+      div("bs-screen-split", [
+        photo(ctx, ctx.c.hero.image, "hero"),
+        div("bs-screen-split__text", [
+          text(ctx.c.brand.name, "bs-eyebrow"),
+          heading("h1", ctx.c.login.title, "bs-title bs-size--l"),
+          text(ctx.c.login.text, "bs-lead"),
+          div("bs-form-card", [form(ctx, [{ type: "email", label: ctx.c.login.email, required: true }, { type: "password", label: ctx.c.login.password, required: true }], ctx.c.login.submit, ["login"]), textLink(ctx.c.login.forgot, "#", "bs-link")]),
+        ], "Sign in"),
+      ]),
+    ]),
+  },
+  {
+    type: "404", id: "split", name: { de: "Mit Bild und Links", en: "With image and links" }, classes: morePlusClasses,
+    build: ctx => band({ surface: "alt", label: "404", classes: "bs-screen" }, [
+      div("bs-screen-split", [
+        div("bs-screen-split__text", [
+          text("404", "bs-code"),
+          heading("h1", ctx.c.notFound.title, "bs-title bs-size--l"),
+          text(ctx.c.notFound.text, "bs-lead"),
+          button(ctx.c.notFound.cta.label, ctx.c.notFound.cta.href, "bs-btn bs-btn-size--m bs-btn--primary"),
+          node("div", "bs-link-row", { tag: "nav" }, ctx.c.nav.map(link => textLink(link.label, link.href, "bs-link"))),
+        ], "Not found"),
+        photo(ctx, ctx.c.about.image, "4x3"),
+      ]),
+    ]),
+  },
+  {
+    type: "coming-soon", id: "split", name: { de: "Mit Bild und Benachrichtigung", en: "With image and notify form" }, classes: morePlusClasses,
+    build: ctx => band({ surface: "page", label: "Coming soon", classes: "bs-screen" }, [
+      div("bs-screen-split", [
+        div("bs-screen-split__text", [
+          text(ctx.c.comingSoon.eyebrow, "bs-eyebrow"),
+          heading("h1", ctx.c.comingSoon.title, "bs-title bs-size--display"),
+          text(ctx.c.comingSoon.text, "bs-lead"),
+          div("bs-notify", [form(ctx, [{ type: "email", label: ctx.c.contact.labels.email, required: true }], ctx.c.lang === "de" ? "Benachrichtigen" : "Notify me")], "Notify form"),
+          text(`${ctx.c.brand.phone} · ${ctx.c.brand.address}`, "bs-small"),
+        ], "Coming soon"),
+        photo(ctx, ctx.c.hero.image, "hero"),
+      ]),
+    ]),
+  },
+];
diff --git a/src/lib/kit/sections/more.ts b/src/lib/kit/sections/more.ts
index 5a78318..889330f 100644
--- a/src/lib/kit/sections/more.ts
+++ b/src/lib/kit/sections/more.ts
@@ -3,8 +3,8 @@ import { PHOTOS } from "../images";
 import { merge, sx } from "../styles";
 import type { ResolvedKit } from "../tokens";
 import { actions, band, checklist, infoRow, intro, photo, type Ctx, type Variant } from "./common";
+import { telHref } from "./header-hero";
 
-const telHref = (phone: string) => `tel:${phone.replace(/[^\d+]/g, "")}`;
 
 function footerClasses(r: ResolvedKit) {
   const x = sx(r);
@@ -26,8 +26,8 @@ function footerClasses(r: ResolvedKit) {
   };
 }
 
-const socials = () => div("bs-socials", (["logo-instagram", "logo-facebook", "logo-linkedin"] as const).map(key => icon(key, "bs-socials__icon", "#")), "Social links");
-const legalRow = (ctx: Ctx) => div("bs-footer__bottom", [
+export const socials = () => div("bs-socials", (["logo-instagram", "logo-facebook", "logo-linkedin"] as const).map(key => icon(key, "bs-socials__icon", "#")), "Social links");
+export const legalRow = (ctx: Ctx) => div("bs-footer__bottom", [
   text(ctx.c.footer.copyright, "bs-footer__small"),
   div("bs-footer__legal", ctx.c.footer.legal.map(link => textLink(link.label, link.href, "bs-footer__link"))),
 ], "Legal");
@@ -115,7 +115,7 @@ function moreClasses(r: ResolvedKit) {
 }
 
 /** Bricks form with the kit's colors; fields depend on the purpose. */
-function form(ctx: Ctx, fields: Array<{ type: string; label: string; required?: boolean; width?: number }>, submit: string, actions: string[] = ["email"]): KitNode {
+export function form(ctx: Ctx, fields: Array<{ type: string; label: string; required?: boolean; width?: number }>, submit: string, actions: string[] = ["email"]): KitNode {
   const { x } = ctx;
   const fieldId = (i: number) => `f${String(i + 1).padStart(5, "0")}`;
   return node("form", "bs-form", {
diff --git a/src/lib/kit/sections/services-plus.ts b/src/lib/kit/sections/services-plus.ts
new file mode 100644
index 0000000..c39dcbc
--- /dev/null
+++ b/src/lib/kit/sections/services-plus.ts
@@ -0,0 +1,315 @@
+import { div, heading, icon, image, text, textLink, type KitNode } from "../build";
+import { PHOTOS, type PhotoKey } from "../images";
+import { merge, sx } from "../styles";
+import type { ResolvedKit } from "../tokens";
+import { band, checklist, intro, photo, tabs, type Ctx, type Variant } from "./common";
+
+/** More layouts for services, benefits, process, numbers, about, history, team and work. */
+function bodyPlusClasses(r: ResolvedKit) {
+  const x = sx(r);
+  const none = { top: "0", bottom: "0" };
+  const topLine = (width = "1px", color: string | null = "border") => ({ _border: { width: { top: width, right: "0", bottom: "0", left: "0" }, style: "solid", color: color ? x.color(color) : { raw: "color-mix(in srgb, currentColor 22%, transparent)" } } });
+  const bottomLine = { _border: { width: { top: "0", right: "0", bottom: "1px", left: "0" }, style: "solid", color: x.color("border") } };
+  // A photo as background with a dark scrim and white text: photos need it in light and dark mode alike.
+  const overlay = (className: string) => ({
+    _position: "relative", _overflow: "hidden",
+    _cssCustom: `.${className}::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / 0.78) 100%); }\n.${className} > * { position: relative; z-index: 1; }`,
+  });
+  const onPhoto = { raw: "#ffffff" };
+  return {
+    // Services
+    "bs-num-grid": { _display: "grid", _gridTemplateColumns: "repeat(3, minmax(0, 1fr))", "_gridTemplateColumns:tablet_portrait": "repeat(2, minmax(0, 1fr))", "_gridTemplateColumns:mobile_landscape": "minmax(0, 1fr)", _columnGap: x.v("space-l"), _rowGap: x.v("space-l"), _width: "100%" },
+    "bs-num-item": merge({ _display: "flex", _direction: "column", _rowGap: "10px", _alignItems: "flex-start", _padding: { top: x.v("space-m"), right: "0", bottom: "0", left: "0" } }, topLine()),
+    "bs-num-item__num": merge(x.type({ size: "text-2xl", weight: "heading-weight", ls: "heading-tracking", lh: "1", color: "link" }), { _margin: none }, x.font("bs-num-item__num", "heading")),
+    "bs-photo-card": merge(x.bg("surface"), x.line("1px", "border"), x.round("radius-l"), { _display: "flex", _direction: "column", _overflow: "hidden", _cssTransition: "transform .2s ease, box-shadow .2s ease", "_transform:hover": { translateY: "-3px" } }),
+    "bs-photo-card__img": { _width: "100%", _aspectRatio: "4/3", _objectFit: "cover" },
+    "bs-photo-card__body": merge(x.pad("space-card"), { _display: "flex", _direction: "column", _rowGap: "10px", _alignItems: "flex-start", _flexGrow: "1" }),
+    "bs-photo-card__foot": { _display: "flex", _direction: "row", _justifyContent: "space-between", _alignItems: "center", _columnGap: x.v("space-s"), _flexWrap: "wrap", _width: "100%", _margin: { top: "auto" } },
+    "bs-price-inline": merge(x.type({ size: "text-s", weight: "600", color: "heading" }), { _margin: none }),
+    "bs-tab-panel": { _display: "grid", _gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)", "_gridTemplateColumns:tablet_portrait": "minmax(0, 1fr)", _gridGap: x.v("space-xl"), _alignItems: "center", _width: "100%" },
+
+    // Benefits
+    "bs-hcard": { _display: "flex", _direction: "row", _columnGap: x.v("space-s"), _alignItems: "flex-start", _width: "100%" },
+    "bs-hcard__body": { _display: "flex", _direction: "column", _rowGap: "6px" },
+    "bs-trio": { _display: "grid", _gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr)", "_gridTemplateColumns:tablet_portrait": "minmax(0, 1fr)", _gridGap: x.v("space-l"), _alignItems: "center", _width: "100%" },
+    "bs-trio__col": { _display: "flex", _direction: "column", _rowGap: x.v("space-l") },
+    "bs-trio__img": { "_order:tablet_portrait": "-1" },
+    "bs-line-item": merge({ _padding: { top: x.v("space-m"), right: "0", bottom: "0", left: "0" } }, topLine("1px", null)),
+
+    // Process
+    "bs-vsteps": { _display: "flex", _direction: "column", _width: "100%" },
+    "bs-vstep": {
+      _display: "grid", _gridTemplateColumns: "56px minmax(0, 1fr)", _columnGap: x.v("space-m"), _position: "relative", _padding: { top: "0", right: "0", bottom: x.v("space-l"), left: "0" },
+      _cssCustom: `.bs-vstep:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 60px; bottom: 4px; width: 2px; background: ${x.v("border")}; }`,
+    },
+    "bs-vstep__body": { _display: "flex", _direction: "column", _rowGap: "6px", _padding: { top: "12px", right: "0", bottom: "0", left: "0" } },
+    "bs-circle-num": merge(x.bg("primary"), x.round("999px"), x.type({ size: "text-l", weight: "700", lh: "1", color: "on-primary" }), {
+      _display: "flex", _alignItems: "center", _justifyContent: "center", _width: "56px", _height: "56px", _flexShrink: "0", _margin: none,
+    }, x.font("bs-circle-num", "heading")),
+    "bs-hstep": merge({ _display: "flex", _direction: "column", _rowGap: "12px", _alignItems: "center" }, x.type({ align: "center" })),
+
+    // Numbers
+    "bs-stats-2": { _display: "grid", _gridTemplateColumns: "repeat(2, minmax(0, 1fr))", _gridGap: x.v("space-m"), _width: "100%" },
+    "bs-stat--line": merge({ _padding: { top: x.v("space-s"), right: "0", bottom: "0", left: "0" } }, topLine("2px", "primary")),
+
+    // About
+    "bs-collage": { _position: "relative", _width: "100%", _padding: { top: "0", right: "0", bottom: x.v("space-l"), left: "0" } },
+    "bs-collage__main": { _widthMax: "82%" },
+    "bs-collage__inset": merge(x.round("radius-l"), x.line("6px", "bg"), { _position: "absolute", _right: "0", _bottom: "0", _width: "46%", _aspectRatio: "1/1", _objectFit: "cover" }, x.shadow("18px", "40px", "-20px")),
+    "bs-statement": { _display: "flex", _direction: "column", _rowGap: x.v("space-m"), _alignItems: "flex-start", _width: "100%" },
+    "bs-statement__title": { _widthMax: "980px" },
+    "bs-statement__cols": { _display: "grid", _gridTemplateColumns: "repeat(2, minmax(0, 1fr))", "_gridTemplateColumns:mobile_landscape": "minmax(0, 1fr)", _gridGap: x.v("space-l"), _width: "100%" },
+
+    // History
+    "bs-htimeline": { _display: "grid", _gridTemplateColumns: "repeat(4, minmax(0, 1fr))", "_gridTemplateColumns:tablet_portrait": "repeat(2, minmax(0, 1fr))", "_gridTemplateColumns:mobile_portrait": "minmax(0, 1fr)", _gridGap: x.v("space-l"), _width: "100%" },
+    "bs-htimeline__item": merge({ _display: "flex", _direction: "column", _rowGap: "8px", _position: "relative", _padding: { top: x.v("space-m"), right: "0", bottom: "0", left: "0" } }, topLine("2px"), {
+      _cssCustom: `.bs-htimeline__item::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: ${x.v("primary")}; box-shadow: 0 0 0 4px ${x.v("surface-alt")}; }`,
+    }),
+
+    // Team
+    // Photo cards stay two per row on phones instead of four very tall ones.
+    "bs-team-grid": { _display: "grid", _gridTemplateColumns: "repeat(4, minmax(0, 1fr))", "_gridTemplateColumns:tablet_portrait": "repeat(2, minmax(0, 1fr))", _gridGap: x.v("space-m"), "_gridGap:mobile_portrait": x.v("space-s"), _width: "100%" },
+    "bs-team-card": merge(x.round("radius-l"), x.pad("space-m"), overlay("bs-team-card"), { _display: "flex", _direction: "column", _justifyContent: "flex-end", _rowGap: "2px", _aspectRatio: "3/4" }),
+    "bs-team-card__name": merge(x.type({ size: "text-l", weight: "heading-weight", lh: "1.25" }), { _typography: { color: onPhoto }, _margin: none }, x.font("bs-team-card__name", "heading")),
+    "bs-team-card__role": merge(x.type({ size: "text-s" }), { _typography: { color: onPhoto }, _margin: none, _opacity: "0.85" }),
+    "bs-member-list": { _display: "flex", _direction: "column", _width: "100%" },
+    "bs-member-row": merge({ _display: "flex", _direction: "row", _alignItems: "center", _columnGap: x.v("space-m"), _padding: { top: x.v("space-s"), right: "0", bottom: x.v("space-s"), left: "0" } }, bottomLine),
+    "bs-member-row__body": { _display: "flex", _direction: "column", _rowGap: "2px" },
+
+    // Work
+    "bs-work-bento": { _display: "grid", _gridTemplateColumns: "repeat(3, minmax(0, 1fr))", "_gridTemplateColumns:tablet_portrait": "repeat(2, minmax(0, 1fr))", "_gridTemplateColumns:mobile_landscape": "minmax(0, 1fr)", _gridAutoRows: "clamp(220px, 24vw, 320px)", _gridGap: x.v("space-s"), _width: "100%" },
+    "bs-work-tile": merge(x.round("radius-l"), x.pad("space-m"), overlay("bs-work-tile"), { _display: "flex", _direction: "column", _justifyContent: "flex-end", _alignItems: "flex-start", _rowGap: "10px" }),
+    "bs-work-tile--tall": { _gridItemRowSpan: "2", "_gridItemRowSpan:tablet_portrait": "1" },
+    "bs-work-tile--wide": { _gridItemColumnSpan: "2", "_gridItemColumnSpan:tablet_portrait": "1" },
+    "bs-work-tile__title": merge(x.type({ size: "text-xl", weight: "heading-weight", lh: "1.25" }), { _typography: { color: onPhoto }, _margin: none }, x.font("bs-work-tile__title", "heading", " text-wrap: balance;")),
+    "bs-work-list": { _display: "flex", _direction: "column", _width: "100%" },
+    "bs-work-row": merge({ _display: "grid", _gridTemplateColumns: "56px minmax(0, 1fr) 200px", "_gridTemplateColumns:mobile_landscape": "40px minmax(0, 1fr)", _columnGap: x.v("space-m"), _alignItems: "center", _padding: { top: x.v("space-m"), right: "0", bottom: x.v("space-m"), left: "0" } }, bottomLine),
+    "bs-work-row__num": merge(x.type({ size: "text-s", weight: "700", color: "muted" }), { _margin: none }),
+    "bs-work-row__body": { _display: "flex", _direction: "column", _rowGap: "6px", _alignItems: "flex-start" },
+    "bs-work-row__img": merge(x.round("radius-m"), { _width: "100%", _aspectRatio: "16/10", _objectFit: "cover", "_display:mobile_landscape": "none" }),
+  };
+}
+
+const serviceBand = (ctx: Ctx, children: KitNode[], surface: "page" | "alt" = "page") =>
+  band({ surface, label: "Services", id: ctx.c.anchors.services, classes: "bs-services" }, children);
+const pad2 = (i: number) => String(i + 1).padStart(2, "0");
+const bgPhoto = (key: PhotoKey) => ({ _background: { image: { url: PHOTOS[key].url, size: "full" }, size: "cover", position: "center center", repeat: "no-repeat" } });
+const iconItem = (item: Ctx["c"]["features"]["items"][number], classes = "bs-icon-item") => div(classes, [icon(item.icon, "bs-card__icon"), heading("h3", item.title, "bs-card__title"), text(item.text, "bs-card__text")], item.title);
+const stat = (item: Ctx["c"]["stats"]["items"][number], classes = "bs-stat") => div(classes, [text(item.value, "bs-stat__value"), text(item.label, "bs-stat__label")], item.label);
+
+export const servicesPlusVariants: Variant[] = [
+  {
+    type: "services", id: "numbered", name: { de: "Nummeriert", en: "Numbered" }, classes: bodyPlusClasses,
+    build: ctx => serviceBand(ctx, [
+      intro({ eyebrow: ctx.c.services.eyebrow, title: ctx.c.services.title, lead: ctx.c.services.lead }),
+      div("bs-num-grid", ctx.c.services.items.map((item, i) => div("bs-num-item", [
+        text(pad2(i), "bs-num-item__num"), heading("h3", item.title, "bs-card__title"), text(item.text, "bs-card__text"), item.price ? text(item.price, "bs-price-tag") : null,
+      ], item.title)), "Services"),
+    ]),
+  },
+  {
+    type: "services", id: "photos", name: { de: "Bildkarten", en: "Photo cards" }, classes: bodyPlusClasses,
+    build: ctx => serviceBand(ctx, [
+      intro({ eyebrow: ctx.c.services.eyebrow, title: ctx.c.services.title, lead: ctx.c.services.lead, center: true }),
+      div("bs-grid bs-cols--3", ctx.c.services.items.map(item => div("bs-photo-card", [
+        image(PHOTOS[item.image].url, PHOTOS[item.image].alt[ctx.c.lang], "bs-photo-card__img"),
+        div("bs-photo-card__body", [
+          heading("h3", item.title, "bs-card__title"), text(item.text, "bs-card__text"),
+          div("bs-photo-card__foot", [item.price ? text(item.price, "bs-price-inline") : null, textLink(ctx.c.navCta.label, ctx.c.navCta.href, "bs-link", "arrow-forward")]),
+        ]),
+      ], item.title)), "Services"),
+    ], "alt"),
+  },
+  {
+    type: "services", id: "tabs", name: { de: "Tabs", en: "Tabs" }, classes: bodyPlusClasses,
+    build: ctx => serviceBand(ctx, [
+      intro({ eyebrow: ctx.c.services.eyebrow, title: ctx.c.services.title, lead: ctx.c.services.lead }),
+      tabs("line", ctx.c.services.items.slice(0, 4).map(item => ({
+        label: item.title,
+        pane: div("bs-tab-panel", [
+          photo(ctx, item.image, "4x3"),
+          div("bs-row__text", [icon(item.icon, "bs-card__icon"), heading("h3", item.title, "bs-title bs-size--l"), text(item.text, "bs-lead"), item.price ? text(item.price, "bs-price-inline") : null, textLink(ctx.c.navCta.label, ctx.c.navCta.href, "bs-link", "arrow-forward")]),
+        ]),
+      })), "Service tabs"),
+    ]),
+  },
+];
+
+export const featuresPlusVariants: Variant[] = [
+  {
+    type: "features", id: "cards", name: { de: "Karten mit Symbol", en: "Cards with icons" }, classes: bodyPlusClasses,
+    build: ctx => band({ surface: "alt", label: "Benefits", classes: "bs-features" }, [
+      intro({ eyebrow: ctx.c.features.eyebrow, title: ctx.c.features.title, lead: ctx.c.features.lead, center: true }),
+      div("bs-grid bs-cols--2", ctx.c.features.items.map(item => div("bs-card", [
+        div("bs-hcard", [icon(item.icon, "bs-card__icon"), div("bs-hcard__body", [heading("h3", item.title, "bs-card__title"), text(item.text, "bs-card__text")])]),
+      ], item.title)), "Benefits"),
+    ]),
+  },
+  {
+    type: "features", id: "trio", name: { de: "Bild in der Mitte", en: "Image in the middle" }, classes: bodyPlusClasses,
+    build: ctx => {
+      const items = ctx.c.features.items;
+      return band({ surface: "page", label: "Benefits", classes: "bs-features" }, [
+        intro({ eyebrow: ctx.c.features.eyebrow, title: ctx.c.features.title, lead: ctx.c.features.lead, center: true }),
+        div("bs-trio", [
+          div("bs-trio__col", items.slice(0, 2).map(item => iconItem(item))),
+          photo(ctx, ctx.c.about.secondImage, "hero", "bs-trio__img"),
+          div("bs-trio__col", items.slice(2, 4).map(item => iconItem(item))),
+        ], "Benefits"),
+      ]);
+    },
+  },
+  {
+    type: "features", id: "dark", name: { de: "Dunkel mit Linien", en: "Dark with rules" }, classes: bodyPlusClasses,
+    build: ctx => band({ surface: "inverse", label: "Benefits", classes: "bs-features" }, [
+      intro({ eyebrow: ctx.c.features.eyebrow, title: ctx.c.features.title, lead: ctx.c.features.lead }),
+      div("bs-icon-grid", ctx.c.features.items.map(item => iconItem(item, "bs-icon-item bs-line-item")), "Benefits"),
+    ]),
+  },
+];
+
+export const stepsPlusVariants: Variant[] = [
+  {
+    type: "steps", id: "vertical", name: { de: "Senkrecht mit Linie", en: "Vertical with line" }, classes: bodyPlusClasses,
+    build: ctx => band({ surface: "page", label: "Process" }, [
+      div("bs-svc-layout", [
+        div("bs-svc-layout__intro", [intro({ eyebrow: ctx.c.steps.eyebrow, title: ctx.c.steps.title, lead: ctx.c.steps.lead })]),
+        div("bs-vsteps", ctx.c.steps.items.map((step, i) => div("bs-vstep", [
+          text(String(i + 1), "bs-circle-num"),
+          div("bs-vstep__body", [heading("h3", step.title, "bs-card__title"), text(step.text, "bs-card__text")]),
+        ], step.title)), "Steps"),
+      ]),
+    ]),
+  },
+  {
+    type: "steps", id: "numbers", name: { de: "Zentriert mit Nummern", en: "Centred with numbers" }, classes: bodyPlusClasses,
+    build: ctx => band({ surface: "alt", label: "Process" }, [
+      intro({ eyebrow: ctx.c.steps.eyebrow, title: ctx.c.steps.title, lead: ctx.c.steps.lead, center: true }),
+      div(`bs-grid ${ctx.c.steps.items.length === 4 ? "bs-cols--4" : "bs-cols--3"}`, ctx.c.steps.items.map((step, i) => div("bs-hstep", [
+        text(String(i + 1), "bs-circle-num"), heading("h3", step.title, "bs-card__title"), text(step.text, "bs-card__text"),
+      ], step.title)), "Steps"),
+    ]),
+  },
+];
+
+export const statsPlusVariants: Variant[] = [
+  {
+    type: "stats", id: "cards", name: { de: "Zahlenkarten", en: "Number cards" }, classes: bodyPlusClasses,
+    build: ctx => band({ surface: "alt", label: "Stats" }, [
+      intro({ eyebrow: ctx.c.stats.eyebrow, title: ctx.c.stats.title, center: true }),
+      div("bs-grid bs-cols--4", ctx.c.stats.items.map(item => div("bs-card", [text(item.value, "bs-stat__value"), text(item.label, "bs-stat__label")], item.label)), "Stats"),
+    ]),
+  },
+  {
+    type: "stats", id: "split", name: { de: "Bild mit Zahlen", en: "Image with numbers" }, classes: bodyPlusClasses,
+    build: ctx => band({ surface: "page", label: "Stats" }, [
+      div("bs-split", [
+        photo(ctx, ctx.c.about.image, "4x3"),
+        div("bs-stack", [intro({ eyebrow: ctx.c.stats.eyebrow, title: ctx.c.stats.title }), div("bs-stats-2", ctx.c.stats.items.map(item => stat(item, "bs-stat bs-stat--line")), "Stats")]),
+      ]),
+    ]),
+  },
+];
+
+export const contentPlusVariants: Variant[] = [
+  {
+    type: "content", id: "numbers", name: { de: "Über uns mit Zahlen", en: "About with numbers" }, classes: bodyPlusClasses,
+    build: ctx => band({ surface: "page", label: "About", id: ctx.c.anchors.about }, [
+      div("bs-split", [
+        div("bs-stack", [intro({ eyebrow: ctx.c.about.eyebrow, title: ctx.c.about.title }), ...ctx.c.about.paragraphs.map(p => text(p, "bs-text"))], "About text"),
+        div("bs-stats-2", ctx.c.stats.items.map(item => div("bs-card", [text(item.value, "bs-stat__value"), text(item.label, "bs-stat__label")], item.label)), "Stats"),
+      ]),
+    ]),
+  },
+  {
+    type: "content", id: "collage", name: { de: "Bildcollage", en: "Photo collage" }, classes: bodyPlusClasses,
+    build: ctx => {
+      const second = PHOTOS[ctx.c.about.secondImage];
+      return band({ surface: "alt", label: "About", id: ctx.c.anchors.about }, [
+        div("bs-split", [
+          div("bs-collage", [photo(ctx, ctx.c.about.image, "4x5", "bs-collage__main"), image(second.url, second.alt[ctx.c.lang], "bs-collage__inset")], "Photos"),
+          div("bs-stack", [
+            intro({ eyebrow: ctx.c.about.eyebrow, title: ctx.c.about.title }),
+            ...ctx.c.about.paragraphs.map(p => text(p, "bs-text")),
+            checklist(ctx.c.about.points, "bs-text"),
+            textLink(ctx.c.navCta.label, ctx.c.navCta.href, "bs-link", "arrow-forward"),
+          ], "About text"),
+        ]),
+      ]);
+    },
+  },
+  {
+    type: "content", id: "statement", name: { de: "Leitsatz mit Bildband", en: "Statement with wide image" }, classes: bodyPlusClasses,
+    build: ctx => {
+      const p = PHOTOS[ctx.c.about.image];
+      return band({ surface: "page", label: "About", id: ctx.c.anchors.about }, [
+        div("bs-statement", [
+          text(ctx.c.about.eyebrow, "bs-eyebrow"),
+          heading("h2", ctx.c.about.title, "bs-title bs-size--xl bs-statement__title"),
+          div("bs-statement__cols", ctx.c.about.paragraphs.map(par => text(par, "bs-lead"))),
+        ], "Statement"),
+        image(p.url, p.alt[ctx.c.lang], "bs-media bs-ratio--wide"),
+      ]);
+    },
+  },
+];
+
+export const timelinePlusVariants: Variant[] = [
+  {
+    type: "timeline", id: "horizontal", name: { de: "Waagrecht", en: "Horizontal" }, classes: bodyPlusClasses,
+    build: ctx => band({ surface: "alt", label: "Timeline" }, [
+      intro({ eyebrow: ctx.c.timeline.eyebrow, title: ctx.c.timeline.title }),
+      div("bs-htimeline", ctx.c.timeline.items.map(item => div("bs-htimeline__item", [text(item.year, "bs-year"), heading("h3", item.title, "bs-card__title"), text(item.text, "bs-card__text")], item.year)), "Timeline"),
+    ]),
+  },
+];
+
+export const teamPlusVariants: Variant[] = [
+  {
+    type: "team", id: "overlay", name: { de: "Fotokarten", en: "Photo cards" }, classes: bodyPlusClasses,
+    build: ctx => band({ surface: "alt", label: "Team", id: ctx.c.anchors.team }, [
+      intro({ eyebrow: ctx.c.team.eyebrow, title: ctx.c.team.title, lead: ctx.c.team.lead, center: true }),
+      div("bs-team-grid", ctx.c.team.members.map(m => ({
+        name: "div", classes: ["bs-team-card"], settings: bgPhoto(m.photo), label: m.name,
+        children: [heading("h3", m.name, "bs-team-card__name"), text(m.role, "bs-team-card__role")],
+      })), "Members"),
+    ]),
+  },
+  {
+    type: "team", id: "list", name: { de: "Liste", en: "List" }, classes: bodyPlusClasses,
+    build: ctx => band({ surface: "page", label: "Team", id: ctx.c.anchors.team }, [
+      div("bs-svc-layout", [
+        div("bs-svc-layout__intro", [intro({ eyebrow: ctx.c.team.eyebrow, title: ctx.c.team.title, lead: ctx.c.team.lead })]),
+        div("bs-member-list", ctx.c.team.members.map(m => div("bs-member-row", [
+          image(PHOTOS[m.photo].url, PHOTOS[m.photo].alt[ctx.c.lang], "bs-avatar--l"),
+          div("bs-member-row__body", [heading("h3", m.name, "bs-card__title"), text(m.role, "bs-small")]),
+        ], m.name)), "Members"),
+      ]),
+    ]),
+  },
+];
+
+export const portfolioPlusVariants: Variant[] = [
+  {
+    type: "portfolio", id: "bento", name: { de: "Bento", en: "Bento" }, classes: bodyPlusClasses,
+    build: ctx => band({ surface: "page", label: "Portfolio", id: ctx.c.anchors.portfolio }, [
+      intro({ eyebrow: ctx.c.portfolio.eyebrow, title: ctx.c.portfolio.title, lead: ctx.c.portfolio.lead }),
+      // Four tiles fill three columns: a tall one, a wide one and two small ones.
+      div("bs-work-bento", ctx.c.portfolio.items.slice(0, 4).map((item, i) => ({
+        name: "div", classes: ["bs-work-tile", ...(i === 0 ? ["bs-work-tile--tall"] : i === 1 ? ["bs-work-tile--wide"] : [])], settings: bgPhoto(item.image), label: item.title,
+        children: [text(item.category, "bs-badge"), heading("h3", item.title, "bs-work-tile__title")],
+      })), "Projects"),
+    ]),
+  },
+  {
+    type: "portfolio", id: "index", name: { de: "Projektliste", en: "Project index" }, classes: bodyPlusClasses,
+    build: ctx => band({ surface: "page", label: "Portfolio", id: ctx.c.anchors.portfolio }, [
+      intro({ eyebrow: ctx.c.portfolio.eyebrow, title: ctx.c.portfolio.title, lead: ctx.c.portfolio.lead }),
+      div("bs-work-list", ctx.c.portfolio.items.map((item, i) => div("bs-work-row", [
+        text(pad2(i), "bs-work-row__num"),
+        div("bs-work-row__body", [heading("h3", item.title, "bs-title bs-size--l"), text(item.category, "bs-small")]),
+        image(PHOTOS[item.image].url, PHOTOS[item.image].alt[ctx.c.lang], "bs-work-row__img"),
+      ], item.title)), "Projects"),
+    ]),
+  },
+];
diff --git a/src/lib/mcp-server.ts b/src/lib/mcp-server.ts
index f1fdd02..a1107e5 100644
--- a/src/lib/mcp-server.ts
+++ b/src/lib/mcp-server.ts
@@ -14,6 +14,7 @@ import { generateKitTemplate, kitCatalog, kitTemplateType } from "./kit/generate
 import { SECTION_TYPES as KIT_SECTION_TYPES } from "./kit/sections";
 import { FONT_PAIR_IDS, RADIUS_IDS, SPACING_IDS, STYLE_IDS } from "./kit/tokens";
 import { INDUSTRY_IDS } from "./kit/content";
+import { modernizeTemplate } from "./modernize";
 
 // Default import: webpack no longer supports named exports from JSON modules.
 const { version } = packageJson;
@@ -91,6 +92,20 @@ export function createMcpServer() {
     const { palette, variables, category, css } = result.designSystem;
     return { template: buildBricksImportJson(result.template, title, kitTemplateType(sections)), designSystem: { palette, variables, category, css, fonts: result.designSystem.fonts }, quality: result.quality };
   }));
+  server.registerTool("bricks_modernize_template", {
+    description: "Import & Modernize: rebuild any Bricks JSON (a copied section, a template export, a library component the user may use) on the BricksSnap design system. Colors become design tokens by role (brand colors → primary/accent), font sizes, spacing and radii land on the token scale (px, rem at 62.5%, Automatic CSS / Core Framework variables), each element's styles move into one deduplicated bs-<block>-<role> global class, and missing mobile rules are added. Optional brand kit restyles it. Returns a Bricks import object, the design system, a report of every change and quality checks. Pure local computation; nothing is fetched or saved.",
+    inputSchema: {
+      json: z.string().max(2_000_000).describe("Bricks JSON: an element array, copied elements ({content, globalClasses}) or a template export."),
+      kit: z.object({ style: z.enum(STYLE_IDS), primary: hex, accent: hex, fonts: z.enum(FONT_PAIR_IDS), radius: z.enum(RADIUS_IDS), spacing: z.enum(SPACING_IDS), mode: z.enum(["light", "dark"]) }).partial().strict().optional(),
+      block: z.string().max(24).regex(/^[a-z0-9-]*$/).optional().describe("Class prefix after bs- (default: from the first heading)."),
+      title: z.string().max(120).default("Modernized section"),
+    }, annotations,
+  }, async ({ json, kit, block, title }) => safely(() => {
+    const result = modernizeTemplate(JSON.parse(json), { kit: kit ?? {}, ...(block ? { block } : {}) });
+    const roots = result.template.content.filter(el => el.parent === 0).length;
+    const { palette, variables, category, css, fonts } = result.designSystem;
+    return { template: buildBricksImportJson(result.template, title, roots > 1 ? "content" : "section"), designSystem: { palette, variables, category, css, fonts }, report: result.report, quality: result.quality };
+  }));
   server.registerTool("bricks_merge_templates", {
     description: "Stage an additive merge of two strict Bricks JSON templates: prepend, append, or after a top-level element. Preserves existing elements, remaps incoming ID collisions, rejects ambiguous references and dependency conflicts. Returns template, structural diff and warnings. Review in Bricks before publishing; never writes to WordPress.",
     inputSchema: { baseline: z.string().max(1_000_000), addition: z.string().max(1_000_000), position: z.enum(["prepend", "append", "after"]).default("append"), afterId: z.string().regex(/^[a-z0-9]{6}$/).optional() }, annotations,
diff --git a/src/lib/modernize-example.ts b/src/lib/modernize-example.ts
new file mode 100644
index 0000000..73f758f
--- /dev/null
+++ b/src/lib/modernize-example.ts
@@ -0,0 +1,35 @@
+/**
+ * BricksSnap's own example for the Modernize tab: a feature section written the way many Bricks
+ * libraries ship them (fixed hex colors, rem at 62.5%, a framework variable, a button preset, a
+ * utility class without styles, a three-column grid without mobile rules). Not taken from any library.
+ */
+const feature = (id: string, title: string, text: string) => [
+  { id: `c${id}`, name: "block", parent: "grid01", children: [`i${id}`, `t${id}`, `p${id}`], label: "Feature card", settings: { _cssGlobalClasses: ["fcard1"] } },
+  { id: `i${id}`, name: "icon", parent: `c${id}`, children: [], settings: { icon: { library: "ionicons", icon: "ion-md-flash" }, iconSize: "28px", iconColor: { hex: "#7c3aed" } } },
+  { id: `t${id}`, name: "heading", parent: `c${id}`, children: [], settings: { tag: "h3", text: title, _typography: { "font-size": "2.2rem", "font-family": "Montserrat", "font-weight": "700", color: { hex: "#1a1a2e" } } } },
+  { id: `p${id}`, name: "text-basic", parent: `c${id}`, children: [], settings: { text, _typography: { "font-size": "1.6rem", color: { hex: "#6b6b80" }, "line-height": "1.6" } } },
+];
+
+export const MODERNIZE_EXAMPLE = {
+  content: [
+    { id: "sect01", name: "section", parent: 0, children: ["cont01"], label: "Features", settings: { _cssGlobalClasses: ["util01"], _background: { color: { hex: "#faf7ff" } }, _padding: { top: "96px", bottom: "96px" } } },
+    { id: "cont01", name: "container", parent: "sect01", children: ["head01", "lead01", "grid01", "acts01"], settings: { _alignItems: "center", _rowGap: "2.4rem" } },
+    { id: "head01", name: "heading", parent: "cont01", children: [], settings: { tag: "h2", text: "Everything your team needs", _typography: { "font-size": "4.4rem", "font-family": "Montserrat", "font-weight": "800", color: { hex: "#1a1a2e" }, "text-align": "center" } } },
+    { id: "lead01", name: "text-basic", parent: "cont01", children: [], settings: { text: "Plan, build and ship in one place – without juggling five tools.", _typography: { "font-size": "1.9rem", color: { hex: "#6b6b80" }, "text-align": "center" }, _widthMax: "620px" } },
+    { id: "grid01", name: "div", parent: "cont01", children: ["ca01", "cb02", "cc03"], settings: { _display: "grid", _gridTemplateColumns: "1fr 1fr 1fr", _gridGap: "var(--grid-gap)", _width: "100%", _margin: { top: "24px" } } },
+    ...feature("a01", "Plan together", "Shared boards keep everyone on the same page."),
+    ...feature("b02", "Ship faster", "Automations take care of the busywork."),
+    ...feature("c03", "Stay in control", "Roles and audit logs for every change."),
+    { id: "acts01", name: "div", parent: "cont01", children: ["btn001", "btn002"], settings: { _display: "flex", _direction: "row", _columnGap: "1.6rem", _margin: { top: "16px" } } },
+    { id: "btn001", name: "button", parent: "acts01", children: [], settings: { text: "Start free", style: "primary", size: "lg", link: { type: "external", url: "#" } } },
+    { id: "btn002", name: "button", parent: "acts01", children: [], settings: { text: "See pricing", outline: true, link: { type: "external", url: "#" } } },
+  ],
+  globalClasses: [
+    { id: "util01", name: "section--l", settings: {} },
+    { id: "fcard1", name: "feature-card", settings: {
+      _background: { color: { hex: "#ffffff" } }, _padding: { top: "3.2rem", right: "3.2rem", bottom: "3.2rem", left: "3.2rem" }, _rowGap: "12px",
+      _border: { width: { top: "1px", right: "1px", bottom: "1px", left: "1px" }, style: "solid", color: { hex: "#ebe5f7" }, radius: { top: "18px", right: "18px", bottom: "18px", left: "18px" } },
+      _boxShadow: { values: { offsetX: "0", offsetY: "12px", blur: "32px", spread: "-12px" }, color: { rgb: "rgba(124, 58, 237, 0.18)" } },
+    } },
+  ],
+};
diff --git a/src/lib/modernize.ts b/src/lib/modernize.ts
new file mode 100644
index 0000000..aac0bd2
--- /dev/null
+++ b/src/lib/modernize.ts
@@ -0,0 +1,603 @@
+import type { BricksElement, BricksGlobalClass, BricksTemplate } from "./bricks-engine";
+import { validateBricksElements } from "./bricks-validator";
+import { stableJson } from "./template-staging";
+import { classId } from "./kit/build";
+import { designSystemFor, qualityChecks, type DesignSystem, type Quality } from "./kit/generate";
+import { cssVar, resolveKit, type BrandKit, type ColorToken, type ResolvedKit } from "./kit/tokens";
+
+/**
+ * Import & Modernize: turn any Bricks JSON (a copied section, a template export, a component from a
+ * library) into BricksSnap's system. Colors become design tokens by role, font sizes, spacing and radii
+ * land on the token scale, each element's styles move into one deduplicated `bs-<block>-<role>` class,
+ * and missing mobile rules are added. Afterwards the brand kit (color, fonts, radius, spacing, dark
+ * mode) restyles the block like any Studio section. Nothing is fetched: the user brings the JSON.
+ */
+
+type Settings = Record<string, unknown>;
+type Rgba = { r: number; g: number; b: number; a: number };
+type Role = "section-bg" | "bg" | "heading" | "text" | "border" | "button-bg" | "button-text" | "shadow" | "icon";
+type Context = "light" | "dark" | "primary";
+
+export type ModernizeOptions = {
+  kit?: Partial<BrandKit>;
+  /** Class prefix after "bs-": letters, digits and dashes (default: from the first heading). */
+  block?: string;
+  lang?: "de" | "en";
+};
+
+export type ModernizeReport = {
+  elements: number;
+  /** Source colors and the token each one became, most used first. */
+  colors: Array<{ from: string; to: ColorToken | "shadow-color"; count: number }>;
+  /** The source's brand colors, as detected. */
+  brand: { primary?: string; accent?: string };
+  fontSizes: Array<{ from: string; to: string; count: number }>;
+  spacing: number;
+  radii: number;
+  fontsReplaced: string[];
+  variables: { mapped: string[]; unknown: string[] };
+  classes: { created: string[]; sourceMerged: string[]; sourceMissing: string[] };
+  mobile: string[];
+  warnings: string[];
+};
+
+export type ModernizeResult = { template: BricksTemplate; source: BricksTemplate; resolved: ResolvedKit; designSystem: DesignSystem; report: ModernizeReport; quality: Quality[]; block: string };
+
+// Controls that are not styles: they stay on the element.
+const META = new Set(["_cssGlobalClasses", "_cssId", "_attributes", "_conditions", "_interactions", "_hidden", "_cssClasses", "_cssGlobalClassesSkipped"]);
+const isStyleKey = (key: string) => key.startsWith("_") && !META.has(key.split(":")[0]);
+const isRecord = (value: unknown): value is Settings => !!value && typeof value === "object" && !Array.isArray(value);
+
+// ─── Colors ─────────────────────────────────────────────────────────────────
+
+const NAMED: Record<string, string> = { white: "#ffffff", black: "#000000", transparent: "#00000000" };
+
+export function parseColor(input: string): Rgba | null {
+  const value = input.trim().toLowerCase();
+  if (NAMED[value]) return parseColor(NAMED[value]);
+  const hex = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(value);
+  if (hex) {
+    const h = hex[1].length <= 4 ? hex[1].split("").map(c => c + c).join("") : hex[1];
+    return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16), a: h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1 };
+  }
+  const fn = /^(rgba?|hsla?)\(([^)]+)\)$/.exec(value);
+  if (!fn) return null;
+  const parts = fn[2].split(/[\s,/]+/).filter(Boolean);
+  if (parts.length < 3) return null;
+  const alpha = parts[3] === undefined ? 1 : parts[3].endsWith("%") ? parseFloat(parts[3]) / 100 : parseFloat(parts[3]);
+  if (fn[1].startsWith("rgb")) {
+    const [r, g, b] = parts.slice(0, 3).map(p => (p.endsWith("%") ? parseFloat(p) * 2.55 : parseFloat(p)));
+    return [r, g, b, alpha].some(Number.isNaN) ? null : { r, g, b, a: alpha };
+  }
+  const h = parseFloat(parts[0]) / 360, s = parseFloat(parts[1]) / 100, l = parseFloat(parts[2]) / 100;
+  if ([h, s, l, alpha].some(Number.isNaN)) return null;
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
+  const hue = (t: number) => { t = (t + 1) % 1; return t < 1 / 6 ? p + (q - p) * 6 * t : t < 1 / 2 ? q : t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 : p; };
+  return { r: hue(h + 1 / 3) * 255, g: hue(h) * 255, b: hue(h - 1 / 3) * 255, a: alpha };
+}
+
+function hsl({ r, g, b }: Rgba): { h: number; s: number; l: number } {
+  const [R, G, B] = [r / 255, g / 255, b / 255];
+  const max = Math.max(R, G, B), min = Math.min(R, G, B), l = (max + min) / 2, d = max - min;
+  if (!d) return { h: 0, s: 0, l };
+  const s = d / (1 - Math.abs(2 * l - 1));
+  const h = max === R ? ((G - B) / d + 6) % 6 : max === G ? (B - R) / d + 2 : (R - G) / d + 4;
+  return { h: h * 60, s, l };
+}
+
+const hexOf = ({ r, g, b }: Rgba) => `#${[r, g, b].map(c => Math.round(Math.min(255, Math.max(0, c))).toString(16).padStart(2, "0")).join("")}`;
+const isChromatic = (c: Rgba) => { const { s, l } = hsl(c); return s > 0.28 && l > 0.12 && l < 0.94; };
+const hueDistance = (a: number, b: number) => { const d = Math.abs(a - b) % 360; return d > 180 ? 360 - d : d; };
+
+/** Framework color variables (Automatic CSS, Core Framework, Bricks defaults) as stand-in colors. */
+function colorForVariable(name: string): Rgba | "primary" | "primary-soft" | "primary-hover" | "accent" | null {
+  const n = name.replace(/^--/, "").toLowerCase();
+  if (/(primary|brand|action)/.test(n)) return /(ultra-light|light|trans|soft|tint|-10$|-20$|-bg$)/.test(n) ? "primary-soft" : /(dark|hover|-80$|-90$)/.test(n) ? "primary-hover" : "primary";
+  if (/(secondary|accent|tertiary|highlight)/.test(n)) return "accent";
+  if (/(white|ultra-light$|bg-body|body-bg|^bg$|^light$|base-ultra-light|bg-light|surface)/.test(n)) return parseColor(/(surface|bg-light|base-ultra-light)/.test(n) ? "#f4f4f5" : "#ffffff");
+  if (/(black|heading|title|text-dark|^dark$|base-ultra-dark|bg-dark|^base-dark)/.test(n)) return parseColor("#111111");
+  if (/(text-light|on-dark)/.test(n)) return parseColor("#ffffff");
+  if (/(border|divider|line)/.test(n)) return parseColor("#e4e4e7");
+  if (/(muted|gray|grey|neutral|shade|base|body|text)/.test(n)) return parseColor(/(text|body)/.test(n) ? "#3f3f46" : "#71717a");
+  return null;
+}
+
+type SizeKind = "font" | "space" | "radius";
+/** Framework size variables → a BricksSnap token name (without --bs-). */
+function tokenForSizeVariable(name: string, kind: SizeKind): string | null {
+  const n = name.replace(/^--/, "").toLowerCase();
+  if (kind === "font") {
+    const heading = /^(?:heading-|h|fs-h)([1-6])$/.exec(n);
+    if (heading) return ["text-display", "text-3xl", "text-2xl", "text-xl", "text-l", "text-m"][Number(heading[1]) - 1];
+    if (/(display|4xl|xxxl)/.test(n)) return "text-display";
+    if (/(3xl|xxl)/.test(n)) return "text-2xl";
+    if (/(2xl|-xl$|xl$)/.test(n)) return "text-xl";
+    if (/(-l$|-lg$|large)/.test(n)) return "text-l";
+    if (/(-xs$|xsmall)/.test(n)) return "text-xs";
+    if (/(-s$|-sm$|small)/.test(n)) return "text-s";
+    if (/(-m$|-md$|base|body|text$)/.test(n)) return "text-m";
+    return null;
+  }
+  if (kind === "radius") {
+    if (!/radius|round/.test(n)) return null;
+    if (/(btn|button)/.test(n)) return "radius-btn";
+    if (/(-s$|-sm$|small|-xs$)/.test(n)) return "radius-s";
+    if (/(-l$|-lg$|-xl$|large)/.test(n)) return "radius-l";
+    return "radius-m";
+  }
+  if (/(section|padding-block|space-section)/.test(n)) return "space-section";
+  if (/(gutter|padding-inline|container-gap|section-padding-x)/.test(n)) return "gutter";
+  if (!/(space|gap|spacing|pad)/.test(n)) return null;
+  if (/(-xxs$|-xs$|-2xs$)/.test(n)) return "space-xs";
+  if (/(-s$|-sm$)/.test(n)) return "space-s";
+  if (/(-l$|-lg$)/.test(n)) return "space-l";
+  if (/(-xl$|-xxl$|-2xl$)/.test(n)) return "space-xl";
+  return "space-m";
+}
+
+// ─── Sizes ──────────────────────────────────────────────────────────────────
+
+/** A length in px at a desktop width; Bricks sets html to 62.5%, so 1rem is 10px. */
+export function toPx(value: unknown): number | null {
+  if (typeof value === "number") return value;
+  if (typeof value !== "string") return null;
+  const v = value.trim();
+  const clamp = /^clamp\(([^,]+),([^,]+),([^)]+)\)$/.exec(v);
+  if (clamp) return toPx(clamp[3]);
+  const m = /^(-?\d*\.?\d+)(px|rem)?$/.exec(v);
+  if (!m) return null;
+  return parseFloat(m[1]) * (m[2] === "rem" ? 10 : 1);
+}
+
+// ─── The engine ─────────────────────────────────────────────────────────────
+
+const slugify = (value: string) => value.toLowerCase().normalize("NFKD").replace(/[̀-ͯ]/g, "").replace(/ß/g, "ss").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+const plainText = (value: unknown) => (typeof value === "string" ? value.replace(/<[^>]*>/g, " ").replace(/&[a-z#0-9]+;/gi, " ").replace(/\s+/g, " ").trim() : "");
+
+const ROLE_NAMES: Record<string, string> = {
+  section: "section", container: "container", block: "box", div: "box", heading: "title", "text-basic": "text", text: "text", "rich-text": "text",
+  button: "btn", "text-link": "link", image: "media", icon: "icon", list: "list", form: "form", "icon-box": "feature", video: "video", "nav-menu": "nav", "nav-nested": "nav", accordion: "accordion", "accordion-nested": "accordion", tabs: "tabs", "tabs-nested": "tabs",
+};
+
+/** Deep-merge Bricks settings the way the cascade applies them: later controls win per property. */
+function mergeStyles(target: Settings, source: Settings) {
+  for (const [key, value] of Object.entries(source)) {
+    if (key.startsWith("_cssCustom")) { target[key] = [target[key], value].filter(v => typeof v === "string" && v.trim()).join("\n"); continue; }
+    const prev = target[key];
+    if (isRecord(prev) && isRecord(value) && !("hex" in value) && !("raw" in value) && !("rgb" in value)) {
+      const merged: Settings = { ...prev };
+      for (const [k, v] of Object.entries(value)) merged[k] = isRecord(merged[k]) && isRecord(v) ? { ...(merged[k] as Settings), ...v } : v;
+      target[key] = merged;
+    } else target[key] = value;
+  }
+}
+
+function readInput(input: unknown): BricksTemplate {
+  const object = isRecord(input) ? input : {};
+  const raw = Array.isArray(input) ? input : Array.isArray(object.content) ? object.content : Array.isArray(object.elements) ? object.elements : null;
+  if (!raw) throw new Error("Paste Bricks JSON: an element list, a copied section or a template export with “content”.");
+  const validation = validateBricksElements(raw);
+  if (!validation.valid || !validation.elements.length) throw new Error(validation.violations[0] ?? "No usable Bricks elements found.");
+  const classes = Array.isArray(object.globalClasses) ? object.globalClasses.filter((c): c is BricksGlobalClass => isRecord(c) && typeof c.id === "string") : [];
+  return { content: validation.elements, source: "bricksCopiedElements", sourceUrl: "", version: "2.4.1", globalClasses: classes.map(c => ({ id: c.id, name: typeof c.name === "string" ? c.name : c.id, settings: isRecord(c.settings) ? c.settings : {} })), globalElements: [] };
+}
+
+export function modernizeTemplate(input: unknown, options: ModernizeOptions = {}): ModernizeResult {
+  const source = readInput(input);
+  const resolved = resolveKit(options.kit ?? {});
+  const v = (name: string) => cssVar(resolved, name);
+  const byId = new Map(source.content.map(el => [el.id, el]));
+  const sourceClasses = new Map(source.globalClasses.map(c => [c.id, c]));
+  const report: ModernizeReport = {
+    elements: source.content.length, colors: [], brand: {}, fontSizes: [], spacing: 0, radii: 0, fontsReplaced: [],
+    variables: { mapped: [], unknown: [] }, classes: { created: [], sourceMerged: [], sourceMissing: [] }, mobile: [], warnings: [],
+  };
+  const colorUse = new Map<string, { to: ColorToken | "shadow-color"; count: number }>();
+  const sizeUse = new Map<string, { to: string; count: number }>();
+  const fonts = new Set<string>();
+  const mappedVars = new Set<string>(), unknownVars = new Set<string>();
+
+  // Effective styles per element: source classes in order, then the element's own settings.
+  const effective = new Map<string, Settings>();
+  for (const el of source.content) {
+    const styles: Settings = {};
+    const refs = Array.isArray(el.settings._cssGlobalClasses) ? el.settings._cssGlobalClasses.filter((id): id is string => typeof id === "string") : [];
+    for (const id of refs) {
+      const cls = sourceClasses.get(id);
+      if (!cls) { report.classes.sourceMissing.push(id); continue; }
+      const own = Object.fromEntries(Object.entries(cls.settings).filter(([k]) => isStyleKey(k)));
+      if (!Object.keys(own).length) { report.classes.sourceMissing.push(cls.name); continue; }
+      // A class's custom CSS targets its own name; on the new class it targets %root%.
+      for (const key of Object.keys(own)) if (key.startsWith("_cssCustom") && typeof own[key] === "string") own[key] = (own[key] as string).replace(new RegExp(`\\.${cls.name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`, "g"), "%root%");
+      mergeStyles(styles, own);
+      report.classes.sourceMerged.push(cls.name);
+    }
+    const own = Object.fromEntries(Object.entries(el.settings).filter(([k]) => isStyleKey(k)));
+    const ownId = typeof el.settings._cssId === "string" ? el.settings._cssId : "";
+    for (const key of Object.keys(own)) if (key.startsWith("_cssCustom") && typeof own[key] === "string") {
+      own[key] = (own[key] as string).replace(new RegExp(`#(?:brxe-${el.id}${ownId ? `|${ownId.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}` : ""})(?![\\w-])`, "g"), "%root%");
+    }
+    mergeStyles(styles, own);
+    effective.set(el.id, styles);
+  }
+
+  // Brand colors: the most used chromatic source colors, weighted by where they appear.
+  const weights = new Map<string, { c: Rgba; w: number }>();
+  const weigh = (value: unknown, w: number) => {
+    const c = sourceColor(value);
+    // Tints and near-blacks are not brand colors: only saturated mid tones count.
+    if (c && typeof c !== "string" && c.a > 0.5 && isChromatic(c) && hsl(c).l >= 0.2 && hsl(c).l <= 0.8 && hsl(c).s >= 0.35) { const key = hexOf(c); const e = weights.get(key) ?? { c, w: 0 }; e.w += w; weights.set(key, e); }
+  };
+  for (const [id, styles] of effective) {
+    const el = byId.get(id)!;
+    for (const [key, value] of Object.entries(styles)) {
+      if (!isRecord(value)) continue;
+      if (key.startsWith("_background")) weigh(value.color, el.name === "button" ? 5 : 2);
+      if (key.startsWith("_typography")) weigh(value.color, el.name === "text-link" || el.name === "button" ? 3 : 2);
+      if (key.startsWith("_border")) weigh(value.color, 1);
+    }
+    for (const [key, value] of Object.entries(el.settings)) if (/color/i.test(key) && !key.startsWith("_")) weigh(value, /icon/i.test(key) ? 2 : 1);
+  }
+  const ranked = [...weights.values()].sort((a, b) => b.w - a.w);
+  const primary = ranked[0]?.c;
+  const accent = ranked.find(e => primary && hueDistance(hsl(e.c).h, hsl(primary).h) > 30)?.c;
+  if (primary) report.brand.primary = hexOf(primary);
+  if (accent) report.brand.accent = hexOf(accent);
+
+  function sourceColor(value: unknown): Rgba | "primary" | "primary-soft" | "primary-hover" | "accent" | null {
+    if (!isRecord(value)) return typeof value === "string" ? fromString(value) : null;
+    for (const key of ["hex", "rgb", "hsl"]) if (typeof value[key] === "string") { const c = parseColor(value[key] as string); if (c) return c; }
+    if (typeof value.raw === "string") return fromString(value.raw);
+    return null;
+  }
+  function fromString(value: string): Rgba | "primary" | "primary-soft" | "primary-hover" | "accent" | null {
+    const direct = parseColor(value);
+    if (direct) return direct;
+    const variable = /^var\(\s*(--[\w-]+)/.exec(value.trim());
+    if (!variable) return null;
+    if (/^--bs-/.test(variable[1])) return null;
+    const mapped = colorForVariable(variable[1]);
+    (mapped ? mappedVars : unknownVars).add(variable[1]);
+    return mapped;
+  }
+
+  /** The token a source color becomes, by role and by the background it sits on. */
+  function tokenFor(c: Rgba | "primary" | "primary-soft" | "primary-hover" | "accent", role: Role, context: Context): ColorToken | "shadow-color" {
+    if (role === "shadow") return "shadow-color";
+    if (typeof c === "string") {
+      if (c === "primary") return role === "heading" || role === "text" || role === "icon" ? (context === "light" ? "link" : "on-inverse") : role === "border" ? "primary-edge" : "primary";
+      if (c === "primary-hover") return role === "text" || role === "heading" ? "link" : "primary-hover";
+      if (c === "primary-soft") return role === "text" || role === "heading" ? "on-inverse" : "primary-soft";
+      return "accent";
+    }
+    const { h, l } = hsl(c);
+    if (isChromatic(c)) {
+      const brand = primary && hueDistance(h, hsl(primary).h) <= 30 ? primary : accent && hueDistance(h, hsl(accent).h) <= 30 ? accent : primary;
+      const family = brand === accent && accent !== primary ? "accent" : "primary";
+      const bl = brand ? hsl(brand).l : 0.5;
+      if (role === "heading" || role === "text" || role === "icon") return family === "accent" ? "accent" : context === "light" ? "link" : "on-inverse";
+      if (role === "border") return l > 0.8 ? (context === "light" ? "border" : "inverse-muted") : family === "accent" ? "accent" : "primary-edge";
+      if (l > bl + 0.25 || l > 0.88) return "primary-soft";
+      if (family === "primary" && l < bl - 0.1) return "primary-hover";
+      return family;
+    }
+    // Neutrals, read as a light-mode design; a dark kit then flips them together.
+    switch (role) {
+      case "section-bg": return l >= 0.995 ? "bg" : l >= 0.8 ? "surface-alt" : l < 0.35 ? "inverse" : "surface-alt";
+      case "bg": return l >= 0.97 ? (context === "light" ? "surface" : "on-inverse") : l >= 0.8 ? "surface-alt" : l < 0.35 ? "inverse" : "surface-alt";
+      case "button-bg": return l >= 0.9 ? (context === "light" ? "surface" : context === "primary" ? "on-primary" : "on-inverse") : "inverse";
+      case "button-text": return l >= 0.7 ? (context === "primary" ? "on-primary" : "on-inverse") : context === "light" ? "heading" : "inverse";
+      case "border": return context !== "light" ? "inverse-muted" : l >= 0.85 ? "border" : "border-strong";
+      case "heading": return l >= 0.8 ? (context === "primary" ? "on-primary" : "on-inverse") : l >= 0.55 ? (context === "light" ? "muted" : "inverse-muted") : context === "light" ? "heading" : "on-inverse";
+      default: return l >= 0.8 ? (context === "primary" ? "on-primary" : "on-inverse") : l >= 0.4 ? (context === "light" ? "muted" : "inverse-muted") : context === "light" ? (role === "icon" ? "heading" : "text") : "on-inverse";
+    }
+  }
+
+  function mapColor(value: unknown, role: Role, context: Context): Settings | null {
+    const c = sourceColor(value);
+    if (!c) return null;
+    const alpha = typeof c === "string" ? 1 : c.a;
+    if (alpha === 0) return { raw: "transparent" };
+    const token = tokenFor(c, role, context);
+    const from = typeof c === "string" ? String(isRecord(value) ? value.raw ?? c : value) : alpha < 1 ? `${hexOf(c)} ${Math.round(alpha * 100)}%` : hexOf(c);
+    const use = colorUse.get(from) ?? { to: token, count: 0 };
+    use.count++; colorUse.set(from, use);
+    const raw = alpha < 1 && token !== "shadow-color" ? `color-mix(in srgb, ${v(token)} ${Math.round(alpha * 100)}%, transparent)` : v(token);
+    return { raw };
+  }
+
+  // A neutral reference scale (Clean style at desktop): the source's hierarchy picks the step, the
+  // chosen style then sets how large each step is.
+  const typeSteps = ([["text-xs", 13], ["text-s", 15], ["text-m", 17], ["text-l", 21], ["text-xl", 25], ["text-2xl", 34], ["text-3xl", 46], ["text-display", 72]] as const).map(([t, px]) => ({ t, px }));
+  function fontSize(value: unknown): string | null {
+    if (typeof value === "string" && /var\(/.test(value)) return mapVars(value, "font");
+    const px = toPx(value);
+    if (px === null || px <= 0) return null;
+    const step = typeSteps.reduce((best, s) => (Math.abs(Math.log(px / s.px)) < Math.abs(Math.log(px / best.px)) ? s : best));
+    const key = `${Math.round(px)}px`;
+    const use = sizeUse.get(key) ?? { to: `--bs-${step.t}`, count: 0 };
+    use.count++; sizeUse.set(key, use);
+    return v(step.t);
+  }
+  function space(value: unknown, where: "section-y" | "section-x" | "other"): unknown {
+    if (value === "" || value === undefined || value === null) return value;
+    if (typeof value === "string" && /var\(/.test(value)) return mapVars(value, "space");
+    const px = toPx(value);
+    if (px === null || px < 0) return value;
+    if (where === "section-x" && px > 0) { report.spacing++; return v("gutter"); }
+    if (px <= 4) return value;
+    report.spacing++;
+    if (where === "section-y" && px >= 48) return v("space-section");
+    return v(px < 12 ? "space-xs" : px < 20 ? "space-s" : px < 32 ? "space-m" : px < 56 ? "space-l" : "space-xl");
+  }
+  function radius(value: unknown, button: boolean): unknown {
+    if (value === "" || value === undefined || value === null) return value;
+    if (typeof value === "string" && /var\(/.test(value)) return mapVars(value, "radius");
+    if (typeof value === "string" && /%$/.test(value.trim()) && parseFloat(value) >= 50) return "999px";
+    const px = toPx(value);
+    if (px === null || px === 0) return value;
+    report.radii++;
+    if (button) return px >= 40 ? "999px" : v("radius-btn");
+    if (px >= 200) return "999px";
+    const steps = (["radius-s", "radius-m", "radius-l"] as const).map(t => ({ t, px: toPx(resolved.vars[t]) ?? 8 }));
+    return v(steps.reduce((best, s) => (Math.abs(s.px - px) < Math.abs(best.px - px) ? s : best)).t);
+  }
+  /** Framework variables inside a value (e.g. calc(var(--space-m) * 2)) become BricksSnap tokens. */
+  function mapVars(value: string, kind: SizeKind): string {
+    return value.replace(/var\(\s*(--[\w-]+)\s*(?:,[^()]*(?:\([^()]*\)[^()]*)*)?\)/g, (match, name: string) => {
+      if (name.startsWith("--bs-")) return match;
+      const token = tokenForSizeVariable(name, kind);
+      if (!token) { unknownVars.add(name); return match; }
+      mappedVars.add(name);
+      return v(token);
+    });
+  }
+  /** Custom CSS: colors and framework variables by the property they sit in. */
+  function mapCss(css: string, context: Context): string {
+    return css.replace(/([\w-]+)(\s*:\s*)([^;{}]+)/g, (all, prop: string, sep: string, value: string) => {
+      const p = prop.toLowerCase();
+      const role: Role | null = p === "color" || p === "fill" ? "text" : /background/.test(p) ? "bg" : /shadow/.test(p) ? "shadow" : /^(border|outline|stroke)/.test(p) && !/radius|width|style/.test(p) ? "border" : null;
+      let mapped = value;
+      if (role) mapped = mapped.replace(/#[0-9a-f]{3,8}\b|rgba?\([^)]*\)|hsla?\([^)]*\)|var\(\s*--[\w-]+[^)]*\)/gi, c => (/^var\(\s*--bs-/.test(c) ? c : (mapColor(c, role, context)?.raw as string | undefined) ?? c));
+      const kind: SizeKind | null = /font-size/.test(p) ? "font" : /radius/.test(p) ? "radius" : /^(padding|margin|gap|row-gap|column-gap|inset|top|right|bottom|left)/.test(p) ? "space" : null;
+      if (kind) mapped = mapVars(mapped, kind);
+      return `${prop}${sep}${mapped}`;
+    });
+  }
+
+  // Every other color object (icon colors, form fields, gradients) by the name of its control.
+  function mapNestedColors(value: unknown, keyHint: string, context: Context): unknown {
+    if (Array.isArray(value)) return value.map(item => mapNestedColors(item, keyHint, context));
+    if (!isRecord(value)) return value;
+    if (("hex" in value || "rgb" in value || "raw" in value || "hsl" in value) && Object.keys(value).every(k => ["hex", "rgb", "raw", "hsl", "id", "name", "light", "dark"].includes(k))) {
+      const role: Role = /background|bg|gradient/i.test(keyHint) ? "bg" : /border/i.test(keyHint) ? "border" : /shadow/i.test(keyHint) ? "shadow" : /icon/i.test(keyHint) ? "icon" : "text";
+      return mapColor(value, role, context) ?? value;
+    }
+    return Object.fromEntries(Object.entries(value).map(([k, v2]) => [k, mapNestedColors(v2, `${keyHint}.${k}`, context)]));
+  }
+
+  const lightness = (value: unknown) => { const c = sourceColor(value); return c && typeof c !== "string" ? hsl(c).l : c === "primary" || c === "accent" || c === "primary-hover" ? 0.45 : c === "primary-soft" ? 0.95 : null; };
+
+  // ── Walk the tree top-down, with the background context each element sits on.
+  const out = new Map<string, { settings: Settings; styles: Settings }>();
+  const visit = (el: BricksElement, context: Context) => {
+    const styles = structuredClone(effective.get(el.id) ?? {});
+    const settings = Object.fromEntries(Object.entries(el.settings).filter(([k]) => !isStyleKey(k) && k !== "_cssGlobalClasses"));
+    const isSection = el.name === "section";
+    const isButton = el.name === "button";
+    const isHeading = el.name === "heading";
+
+    // Bricks button presets (primary, secondary, outline …) become explicit brand colors.
+    if (isButton) {
+      const preset = typeof settings.style === "string" ? settings.style : "";
+      const outline = settings.outline === true;
+      delete settings.style; delete settings.size; delete settings.outline; delete settings.circle;
+      const background = isRecord(styles._background) ? styles._background as Settings : {};
+      const typography = isRecord(styles._typography) ? styles._typography as Settings : {};
+      if (!background.color && !outline) {
+        const fill = preset === "secondary" ? "accent" : preset === "dark" ? "inverse" : preset === "light" ? "surface" : "primary";
+        styles._background = { ...background, color: { raw: v(fill) } };
+        if (!typography.color) styles._typography = { ...typography, color: { raw: v(fill === "primary" ? "on-primary" : fill === "inverse" ? "on-inverse" : fill === "surface" ? "heading" : "on-primary") } };
+      } else if (outline && !background.color) {
+        styles._border = { ...(isRecord(styles._border) ? styles._border as Settings : {}), width: { top: "1px", right: "1px", bottom: "1px", left: "1px" }, style: "solid", color: { raw: v(context === "light" ? "border-strong" : "inverse-muted") } };
+        if (!typography.color) styles._typography = { ...typography, color: { raw: v(context === "light" ? "heading" : "on-inverse") } };
+      }
+      if (!styles._padding) styles._padding = { top: "14px", right: "24px", bottom: "14px", left: "24px" };
+      const border = isRecord(styles._border) ? styles._border as Settings : {};
+      if (!border.radius) styles._border = { ...border, radius: { top: v("radius-btn"), right: v("radius-btn"), bottom: v("radius-btn"), left: v("radius-btn") } };
+    }
+
+    // This element's own background decides the context for its content.
+    const bg = isRecord(styles._background) ? (styles._background as Settings).color : undefined;
+    const bgColor = bg !== undefined ? sourceColor(bg) : null;
+    let own: Context = context;
+    const token = isRecord(bg) && typeof bg.raw === "string" ? /^var\(--bs-([\w-]+)/.exec(bg.raw)?.[1] : undefined;
+    if (token) own = ["primary", "accent", "primary-hover"].includes(token) ? "primary" : token === "inverse" ? "dark" : "light";
+    else if (bgColor) {
+      const l = lightness(bg) ?? 1;
+      const chroma = typeof bgColor === "string" ? bgColor !== "primary-soft" : isChromatic(bgColor);
+      own = chroma && l < 0.75 ? "primary" : l < 0.4 ? "dark" : l >= 0.75 ? "light" : own;
+    }
+    if (!bgColor && isRecord(styles._background) && (styles._background as Settings).image && !isButton) own = context === "light" ? "dark" : context;
+
+    for (const [key, value] of Object.entries(styles)) {
+      const [control] = key.split(":");
+      if (!isRecord(value) && control !== "_cssCustom" && typeof value !== "string" && typeof value !== "number") continue;
+      switch (control) {
+        case "_typography": {
+          const t = { ...(value as Settings) };
+          if (t["font-family"]) { fonts.add(String(t["font-family"])); delete t["font-family"]; delete t.fallback; }
+          if (t["font-size"] !== undefined) { const size = fontSize(t["font-size"]); if (size) t["font-size"] = size; }
+          if (t.color !== undefined) t.color = mapColor(t.color, isButton ? "button-text" : isHeading ? "heading" : el.name === "icon" ? "icon" : "text", own) ?? t.color;
+          if (isHeading && t["font-weight"] !== undefined && Number(t["font-weight"]) >= 500) t["font-weight"] = v("heading-weight");
+          styles[key] = t;
+          break;
+        }
+        case "_background": {
+          const b = { ...(value as Settings) };
+          if (b.color !== undefined) b.color = mapColor(b.color, isButton ? "button-bg" : isSection ? "section-bg" : "bg", context) ?? b.color;
+          styles[key] = mapNestedColors(b, key, context) as Settings;
+          break;
+        }
+        case "_border": {
+          const b = { ...(value as Settings) };
+          if (b.color !== undefined) b.color = mapColor(b.color, "border", own) ?? b.color;
+          if (isRecord(b.radius)) b.radius = Object.fromEntries(Object.entries(b.radius).map(([side, r]) => [side, radius(r, isButton)]));
+          styles[key] = b;
+          break;
+        }
+        case "_boxShadow": {
+          const s = { ...(value as Settings) };
+          if (s.color !== undefined) s.color = mapColor(s.color, "shadow", context) ?? s.color;
+          styles[key] = s;
+          break;
+        }
+        case "_padding": case "_margin": {
+          if (!isRecord(value)) break;
+          styles[key] = Object.fromEntries(Object.entries(value).map(([side, amount]) => [side, control === "_margin" && (amount === "auto" || toPx(amount) === 0)
+            ? amount : space(amount, isSection && control === "_padding" ? (side === "top" || side === "bottom" ? "section-y" : "section-x") : "other")]));
+          break;
+        }
+        case "_gap": case "_rowGap": case "_columnGap": case "_gridGap":
+          styles[key] = space(value, "other");
+          break;
+        case "_cssCustom":
+          if (typeof value === "string") styles[key] = mapCss(value, own);
+          break;
+        default:
+          if (typeof value === "string" && /var\(/.test(value)) styles[key] = mapVars(value, "space");
+          else if (isRecord(value)) styles[key] = mapNestedColors(value, key, own);
+      }
+    }
+
+    // Icons: color and size live in the class, so they follow the brand kit.
+    if (el.name === "icon") {
+      const t = isRecord(styles._typography) ? { ...(styles._typography as Settings) } : {};
+      if (settings.iconColor !== undefined && t.color === undefined) t.color = mapColor(settings.iconColor, "icon", own) ?? settings.iconColor;
+      if (settings.iconSize !== undefined && t["font-size"] === undefined) t["font-size"] = typeof settings.iconSize === "number" ? `${settings.iconSize}px` : settings.iconSize;
+      if (Object.keys(t).length) styles._typography = t;
+      delete settings.iconColor; delete settings.iconSize;
+    }
+    // Element-specific controls (form fields …) keep their place, with mapped colors.
+    for (const [key, value] of Object.entries(settings)) if (isRecord(value) || Array.isArray(value)) settings[key] = mapNestedColors(value, key, own);
+
+    // Base typography: fonts come from the design system (Bricks quotes its font-family control).
+    const typography = isRecord(styles._typography) ? styles._typography as Settings : {};
+    if (isHeading) {
+      const size = String(typography["font-size"] ?? "");
+      const lineHeight = /text-display/.test(size) ? "1.05" : /text-3xl/.test(size) ? "1.12" : /text-2xl/.test(size) ? "1.18" : "1.28";
+      styles._typography = { ...typography, ...(typography["line-height"] ? {} : { "line-height": lineHeight }), ...(typography.color ? {} : { color: { raw: v(own === "light" ? "heading" : own === "primary" ? "on-primary" : "on-inverse") } }), ...(typography["font-weight"] ? {} : { "font-weight": v("heading-weight") }), ...(typography["letter-spacing"] !== undefined || typography["text-transform"] === "uppercase" ? {} : { "letter-spacing": v("heading-tracking") }) };
+      styles._cssCustom = [styles._cssCustom, `%root% { font-family: ${v("font-heading")}; text-wrap: balance; overflow-wrap: anywhere; }`].filter(Boolean).join("\n");
+    }
+    if (el.parent === 0) {
+      if (!typography.color && !isHeading) styles._typography = { ...(styles._typography as Settings ?? {}), color: { raw: v(own === "light" ? "text" : own === "primary" ? "on-primary" : "on-inverse") } };
+      styles._cssCustom = [styles._cssCustom, `%root% { font-family: ${v("font-body")}; -webkit-font-smoothing: antialiased; }`].filter(Boolean).join("\n");
+    }
+
+    // ── Mobile rules, only where the source has none.
+    const label = el.label || plainText(el.settings.text).slice(0, 30) || el.name;
+    const hasResponsive = (control: string) => Object.keys(styles).some(k => k.startsWith(`${control}:`) && /tablet|mobile/.test(k));
+    if (isSection) {
+      const padding = isRecord(styles._padding) ? styles._padding as Settings : {};
+      if (!padding.top && !padding.bottom) { styles._padding = { ...padding, top: v("space-section"), bottom: v("space-section") }; report.mobile.push(`Section “${label}”: vertical rhythm from --bs-space-section.`); }
+      const p = styles._padding as Settings;
+      if (!toPx(p.left) && !toPx(p.right) && !/var\(/.test(String(p.left ?? "") + String(p.right ?? ""))) { styles._padding = { ...p, left: v("gutter"), right: v("gutter") }; report.mobile.push(`Section “${label}”: side gutter so content never touches the screen edge.`); }
+    }
+    if (el.name === "container" && !styles._widthMax && !styles._width) { styles._width = "100%"; styles._widthMax = v("container"); }
+    const columns = typeof styles._gridTemplateColumns === "string" ? countColumns(styles._gridTemplateColumns) : 0;
+    if (styles._display === "grid" && columns >= 2 && !hasResponsive("_gridTemplateColumns")) {
+      if (columns >= 3) styles["_gridTemplateColumns:tablet_portrait"] = "repeat(2, minmax(0, 1fr))";
+      styles[columns >= 4 ? "_gridTemplateColumns:mobile_portrait" : "_gridTemplateColumns:mobile_landscape"] = "minmax(0, 1fr)";
+      report.mobile.push(`Grid “${label}” (${columns} columns): ${columns >= 3 ? "2 columns on tablets, " : ""}1 column on phones.`);
+    }
+    const direction = styles._direction ?? styles._flexDirection;
+    const kids = el.children.map(id => byId.get(id)).filter((c): c is BricksElement => !!c);
+    if (direction === "row" && kids.length >= 2 && !hasResponsive("_direction") && !hasResponsive("_flexDirection")) {
+      const actions = kids.every(k => ["button", "text-link", "icon"].includes(k.name));
+      if (actions) {
+        styles._flexWrap = "wrap";
+        if (!styles._rowGap && !styles._gap) styles._rowGap = styles._columnGap ?? v("space-s");
+        styles["_direction:mobile_portrait"] = "column"; styles["_alignItems:mobile_portrait"] = "stretch"; styles["_width:mobile_portrait"] = "100%";
+        report.mobile.push(`Buttons “${label}”: wrap, and stack at full width on phones.`);
+      } else if (kids.some(k => ["block", "div", "container", "image"].includes(k.name))) {
+        styles["_direction:mobile_landscape"] = "column"; styles["_alignItems:mobile_landscape"] = "stretch";
+        if (!styles._rowGap && !styles._gap) styles["_rowGap:mobile_landscape"] = styles._columnGap ?? v("space-m");
+        report.mobile.push(`Row “${label}”: stacks on phones.`);
+      }
+    }
+    // Rhythm: stacked content without any gap or margins gets the kit's spacing.
+    const column = direction === undefined || direction === "column";
+    const spaced = styles._rowGap || styles._gap || styles._gridGap || kids.some(k => { const m = effective.get(k.id)?._margin; return isRecord(m) && (toPx(m.top) || toPx(m.bottom) || /var\(/.test(String(m.top ?? "") + String(m.bottom ?? ""))); });
+    if (column && styles._display !== "grid" && kids.length >= 2 && !spaced && ["container", "block", "div"].includes(el.name)) {
+      styles._rowGap = v(el.name === "container" ? "space-m" : "space-s");
+      report.mobile.push(`“${label}”: spacing between its ${kids.length} items from the kit.`);
+    }
+    for (const control of ["_width", "_widthMin"]) {
+      const px = toPx(styles[control]);
+      if (px !== null && px > 480 && el.parent !== 0) {
+        styles._widthMax = styles._widthMax ?? `${px}px`; styles[control] = control === "_width" ? "100%" : undefined;
+        if (styles[control] === undefined) delete styles[control];
+        report.mobile.push(`“${label}”: fixed width ${Math.round(px)}px became a maximum, so it shrinks on small screens.`);
+      }
+    }
+    if (typeof styles._widthMax === "string" && (toPx(styles._widthMax) ?? 0) >= 1000 && (el.name === "container" || isSection)) styles._widthMax = v("container");
+
+    out.set(el.id, { settings, styles });
+    for (const child of kids) visit(child, own);
+  };
+  for (const root of source.content.filter(el => el.parent === 0)) visit(root, "light");
+
+  // ── Classes: identical styles share one class, named after the element's role.
+  const firstHeading = source.content.find(el => el.name === "heading");
+  const STOP = new Set(["the", "a", "an", "our", "your", "we", "why", "how", "what", "who", "meet", "get", "der", "die", "das", "ein", "eine", "unser", "unsere", "ihr", "ihre", "wir", "so", "was", "wie", "und", "and"]);
+  const GENERIC = new Set(["section", "container", "block", "div", "wrapper", "inner", "root"]);
+  const rootLabel = slugify(source.content.find(el => el.parent === 0)?.label ?? "").split("-").find(w => w.length >= 3 && !GENERIC.has(w));
+  const block = slugify(options.block ?? "").slice(0, 24) || rootLabel?.slice(0, 16) || slugify(plainText(firstHeading?.settings.text)).split("-").find(w => w.length >= 3 && !STOP.has(w))?.slice(0, 16) || "block";
+  const byStyle = new Map<string, string>();
+  const used = new Map<string, number>();
+  const classes: BricksGlobalClass[] = [];
+  const content: BricksElement[] = source.content.map(el => {
+    const { settings, styles } = out.get(el.id)!;
+    const clean = Object.fromEntries(Object.entries(styles).filter(([, value]) => value !== undefined && value !== ""));
+    if (!Object.keys(clean).length) return { ...el, settings };
+    const key = `${el.name}|${stableJson(clean)}`;
+    let name = byStyle.get(key);
+    if (!name) {
+      const labelRole = el.label ? slugify(el.label).split("-").slice(0, 2).join("-") : "";
+      const role = labelRole && labelRole !== slugify(el.name) ? labelRole : ROLE_NAMES[el.name] ?? slugify(el.name);
+      const n = (used.get(role) ?? 0) + 1;
+      used.set(role, n);
+      name = `bs-${block}-${role}${n > 1 ? `-${n}` : ""}`;
+      byStyle.set(key, name);
+      // %root% in custom CSS targets the class.
+      const customised = Object.fromEntries(Object.entries(clean).map(([k, value]) => [k, k.startsWith("_cssCustom") && typeof value === "string" ? value.replaceAll("%root%", `.${name}`) : value]));
+      classes.push({ id: classId(name), name, settings: customised });
+    }
+    return { ...el, settings: { ...settings, _cssGlobalClasses: [classId(name)] } };
+  });
+
+  report.classes.created = classes.map(c => c.name);
+  report.classes.sourceMerged = [...new Set(report.classes.sourceMerged)];
+  report.classes.sourceMissing = [...new Set(report.classes.sourceMissing)];
+  report.colors = [...colorUse].map(([from, u]) => ({ from, to: u.to, count: u.count })).sort((a, b) => b.count - a.count);
+  report.fontSizes = [...sizeUse].map(([from, u]) => ({ from, to: u.to, count: u.count })).sort((a, b) => parseFloat(b.from) - parseFloat(a.from));
+  report.fontsReplaced = [...fonts];
+  report.variables = { mapped: [...mappedVars], unknown: [...unknownVars] };
+  report.mobile = [...new Set(report.mobile)];
+  if (report.classes.sourceMissing.length) report.warnings.push(`Classes without styles in the file (framework utilities such as Automatic CSS): ${report.classes.sourceMissing.slice(0, 8).join(", ")}${report.classes.sourceMissing.length > 8 ? ", …" : ""}. Their look is not included; spacing comes from BricksSnap's tokens instead.`);
+  if (unknownVars.size) report.warnings.push(`Unknown variables kept as they are: ${[...unknownVars].slice(0, 8).join(", ")}. Define them on the site or replace them.`);
+  if (fonts.size) report.warnings.push(`Fonts replaced by the brand kit's fonts: ${[...fonts].join(", ")}.`);
+  const images = source.content.filter(el => el.name === "image" || (isRecord(el.settings._background) && isRecord((el.settings._background as Settings).image))).length;
+  if (images) report.warnings.push(`${images} images keep their source URLs. Replace them or import them into the media library before publishing.`);
+
+  const template: BricksTemplate = { content, source: "bricksCopiedElements", sourceUrl: "", version: "2.4.1", globalClasses: classes, globalElements: [] };
+  return { template, source, resolved, designSystem: designSystemFor(resolved), report, quality: qualityChecks(resolved, content, options.lang ?? "en", false), block };
+}
+
+/** Columns in a grid-template-columns value: repeat(3, …), "1fr 1fr 2fr", minmax(…) … */
+function countColumns(value: string): number {
+  const repeat = /^repeat\(\s*(\d+)\s*,/.exec(value.trim());
+  if (repeat) return Number(repeat[1]);
+  const tracks = value.trim().replace(/\([^()]*(?:\([^()]*\)[^()]*)*\)/g, "x").split(/\s+/).filter(Boolean);
+  return tracks.length;
+}
diff --git a/tests/kit.test.ts b/tests/kit.test.ts
index baa287f..023cc8b 100644
--- a/tests/kit.test.ts
+++ b/tests/kit.test.ts
@@ -59,7 +59,8 @@ describe("generated templates", () => {
 
   it("never lets two classes on one element set the same CSS property", () => {
     for (const style of STYLE_IDS) {
-      const pages = [0, 16, 32].map(start => generateKitTemplate({ kit: { style }, profile: { industry: "agentur", language: "en" }, sections: LAYOUTS.slice(start, start + 16) }).template);
+      const starts = Array.from({ length: Math.ceil(LAYOUTS.length / 16) }, (_, i) => i * 16);
+      const pages = starts.map(start => generateKitTemplate({ kit: { style }, profile: { industry: "agentur", language: "en" }, sections: LAYOUTS.slice(start, start + 16) }).template);
       const classes = new Map(pages.flatMap(t => t.globalClasses).map(c => [c.id, c]));
       for (const el of pages.flatMap(t => t.content)) {
         const seen = new Map<string, string>();
@@ -74,6 +75,41 @@ describe("generated templates", () => {
     }
   });
 
+  it("offers at least 80 layouts, every class defined once", () => {
+    expect(LAYOUTS.length).toBeGreaterThanOrEqual(80);
+    expect(new Set(LAYOUTS.map(l => `${l.type}/${l.variant}`)).size).toBe(LAYOUTS.length);
+    // A class name defined by two factories would silently overwrite the other one.
+    const r = resolveKit({});
+    const owners = new Map<string, number>();
+    for (const factory of new Set(SECTION_TYPES.flatMap(type => variantsFor(type).map(v => v.classes)).filter(Boolean))) {
+      for (const name of Object.keys(factory!(r))) owners.set(name, (owners.get(name) ?? 0) + 1);
+    }
+    expect([...owners].filter(([, n]) => n > 1).map(([name]) => name)).toEqual([]);
+  });
+
+  it("builds switches and FAQs from Bricks' nested tabs and accordion", () => {
+    const { template } = generateKitTemplate({ kit: {}, profile: { industry: "handwerk", language: "de" }, sections: [{ type: "pricing", variant: "switch" }, { type: "faq", variant: "accordion" }] });
+    const byId = new Map(template.content.map(el => [el.id, el]));
+    const hidden = (id: string) => (byId.get(id)!.settings._hidden as { _cssClasses: string })._cssClasses;
+    const tabsEl = template.content.find(el => el.name === "tabs-nested")!;
+    const [menu, content] = tabsEl.children;
+    expect([hidden(menu), hidden(content)]).toEqual(["tab-menu", "tab-content"]);
+    expect(byId.get(menu)!.children.map(hidden)).toEqual(["tab-title", "tab-title"]);
+    expect(byId.get(content)!.children.map(hidden)).toEqual(["tab-pane", "tab-pane"]);
+    const acc = template.content.find(el => el.name === "accordion-nested")!;
+    expect(acc.settings.faqSchema).toBe(true);
+    const item = byId.get(acc.children[0])!;
+    expect(item.children.map(hidden)).toEqual(["accordion-title-wrapper", "accordion-content-wrapper"]);
+    expect(validateBricksElements(template.content).violations.filter(v => /undocumented/.test(v))).toEqual([]);
+    // Pane and content classes never set display: Bricks shows and hides them.
+    const library = classLibrary(resolveKit({}));
+    for (const name of ["bs-tabs__pane", "bs-tabs__content", "bs-acc__content"]) expect(Object.keys(library[name]).some(k => k.startsWith("_display"))).toBe(false);
+    const { html } = renderPreview(template);
+    expect(html.match(/tab-title brx-open/g)).toHaveLength(1);
+    expect(html.match(/tab-pane brx-open/g)).toHaveLength(1);
+    expect(html).toContain("accordion-content-wrapper");
+  });
+
   it("uses stable, unique class IDs", () => {
     const names = Object.keys(classLibrary(resolveKit({})));
     const ids = names.map(classId);
diff --git a/tests/mcp-stdio.test.ts b/tests/mcp-stdio.test.ts
index 10a4a21..2b5b492 100644
--- a/tests/mcp-stdio.test.ts
+++ b/tests/mcp-stdio.test.ts
@@ -32,7 +32,7 @@ it("runs the built CLI with real stdio discovery, generation, merge, diff and er
   try {
     await client.connect(transport);
 
-    expect((await client.listTools()).tools).toHaveLength(10);
+    expect((await client.listTools()).tools).toHaveLength(11);
 
     const page = await client.callTool({
       name: "bricks_assemble_page",
@@ -115,7 +115,7 @@ it("runs the built CLI with real stdio discovery, generation, merge, diff and er
 
     expect(invalid.isError).toBe(true);
 
-    expect((await client.listTools()).tools).toHaveLength(10);
+    expect((await client.listTools()).tools).toHaveLength(11);
   } finally {
     await client.close();
   }
diff --git a/tests/mcp.test.ts b/tests/mcp.test.ts
index 1055a58..8daa7b7 100644
--- a/tests/mcp.test.ts
+++ b/tests/mcp.test.ts
@@ -12,7 +12,7 @@ it("initializes, discovers tools and validates a ChatGPT-created template over H
   const init = await rpc("initialize", { protocolVersion: "2025-03-26", capabilities: {}, clientInfo: { name: "test", version: "1" } });
   expect(init.status).toBe(200); expect((await init.json()).result.serverInfo.name).toBe("BricksSnap");
   const list = await rpc("tools/list"); const tools = (await list.json()).result.tools;
-  expect(tools).toHaveLength(10); expect(tools.every((t: { annotations: { readOnlyHint: boolean } }) => t.annotations.readOnlyHint)).toBe(true);
+  expect(tools).toHaveLength(11); expect(tools.every((t: { annotations: { readOnlyHint: boolean } }) => t.annotations.readOnlyHint)).toBe(true);
   const call = await rpc("tools/call", { name: "bricks_validate_template", arguments: { json: JSON.stringify([{ id: "abc123", name: "text-link", parent: 0, children: [], settings: { text: "Contact" } }]), title: "ChatGPT Test" } });
   const result = (await call.json()).result;
   expect(result.isError).not.toBe(true); expect(result.structuredContent.template.title).toBe("ChatGPT Test");
@@ -50,3 +50,19 @@ it("lists kit options and builds a kit page with design system and quality check
   const bad = await rpc("tools/call", { name: "bricks_kit_page", arguments: { sections: [{ type: "nope" }] } });
   expect(JSON.stringify(await bad.json())).toMatch(/invalid|nope/i);
 });
+it("modernizes Bricks JSON onto the design system", async () => {
+  vi.stubEnv("BRICKSSNAP_MCP_ENABLED", "true");
+  await rpc("initialize", { protocolVersion: "2025-03-26", capabilities: {}, clientInfo: { name: "test", version: "1" } });
+  const { MODERNIZE_EXAMPLE } = await import("../src/lib/modernize-example");
+  const call = await rpc("tools/call", { name: "bricks_modernize_template", arguments: { json: JSON.stringify(MODERNIZE_EXAMPLE), kit: { style: "soft", primary: "#0f766e" }, block: "features" } });
+  const result = (await call.json()).result;
+  expect(result.isError).not.toBe(true);
+  const { template, designSystem, report } = result.structuredContent;
+  expect(template.type).toBe("section");
+  expect(template.globalClasses.every((c: { name: string }) => c.name.startsWith("bs-features-"))).toBe(true);
+  expect(designSystem.css).toContain("--bs-primary: #0f766e");
+  expect(report.brand.primary).toBe("#7c3aed");
+  expect(report.mobile.length).toBeGreaterThan(0);
+  const bad = await rpc("tools/call", { name: "bricks_modernize_template", arguments: { json: "{\"foo\":1}" } });
+  expect(JSON.stringify(await bad.json())).toMatch(/Paste Bricks JSON/);
+});
diff --git a/tests/modernize.test.ts b/tests/modernize.test.ts
new file mode 100644
index 0000000..baaf566
--- /dev/null
+++ b/tests/modernize.test.ts
@@ -0,0 +1,190 @@
+import { describe, expect, it } from "vitest";
+import { modernizeTemplate, parseColor, toPx } from "../src/lib/modernize";
+import { validateBricksElements } from "../src/lib/bricks-validator";
+import { readStagingTemplate } from "../src/lib/template-staging";
+import type { BricksElement } from "../src/lib/bricks-engine";
+
+// Own test templates in the style of common Bricks libraries (Automatic CSS variables, rem at 62.5%,
+// button presets, utility classes, custom CSS); not taken from any library.
+const card = (id: string, parent: string, children: string[], extra: Record<string, unknown> = {}) => ({
+  id, name: "block", parent, children, label: "Card",
+  settings: { _cssGlobalClasses: ["crd001"], _cssCustom: `#brxe-${id} .price { color: #ff5a1f; }`, ...extra },
+});
+const PRICING = {
+  content: [
+    { id: "sec001", name: "section", parent: 0, children: ["con001"], settings: { _cssGlobalClasses: ["utl001"], _background: { color: { hex: "#f8fafc" } } } },
+    { id: "con001", name: "container", parent: "sec001", children: ["hdg001", "txt001", "grd001"], settings: {} },
+    { id: "hdg001", name: "heading", parent: "con001", children: [], settings: { tag: "h2", text: "Pricing that scales", _typography: { "font-size": "4.8rem", color: { hex: "#0b1320" }, "font-family": "Poppins", "font-weight": "700" } } },
+    { id: "txt001", name: "text-basic", parent: "con001", children: [], settings: { text: "Simple plans for every team.", _typography: { "font-size": "1.8rem", color: { hex: "#6b7280" } } } },
+    { id: "grd001", name: "div", parent: "con001", children: ["crd101", "crd102", "crd103"], settings: { _display: "grid", _gridTemplateColumns: "repeat(3, 1fr)", _gridGap: "3.2rem", _width: "100%" } },
+    card("crd101", "grd001", ["ttl101", "btn101"]),
+    card("crd102", "grd001", ["ttl102", "btn102"]),
+    card("crd103", "grd001", ["ttl103", "btn103"], { _background: { color: { hex: "#ff5a1f" } } }),
+    { id: "ttl101", name: "heading", parent: "crd101", children: [], settings: { tag: "h3", text: "Starter", _typography: { "font-size": "24px", color: { hex: "#0b1320" } } } },
+    { id: "ttl102", name: "heading", parent: "crd102", children: [], settings: { tag: "h3", text: "Team", _typography: { "font-size": "24px", color: { hex: "#0b1320" } } } },
+    { id: "ttl103", name: "heading", parent: "crd103", children: [], settings: { tag: "h3", text: "Scale", _typography: { "font-size": "24px", color: { hex: "#ffffff" } } } },
+    { id: "btn101", name: "button", parent: "crd101", children: [], settings: { text: "Choose", style: "primary", size: "md", link: { type: "external", url: "#" } } },
+    { id: "btn102", name: "button", parent: "crd102", children: [], settings: { text: "Choose", style: "primary", size: "md", link: { type: "external", url: "#" } } },
+    { id: "btn103", name: "button", parent: "crd103", children: [], settings: { text: "Talk to us", link: { type: "external", url: "#" }, _background: { color: { hex: "#ffffff" } }, _typography: { color: { hex: "#ff5a1f" } } } },
+  ],
+  globalClasses: [
+    { id: "utl001", name: "pad--l", settings: {} },
+    { id: "crd001", name: "pricing-card", settings: {
+      _background: { color: { raw: "var(--white)" } }, _padding: { top: "32px", right: "32px", bottom: "32px", left: "32px" },
+      _border: { width: { top: "1px", right: "1px", bottom: "1px", left: "1px" }, style: "solid", color: { hex: "#e5e7eb" }, radius: { top: "12px", right: "12px", bottom: "12px", left: "12px" } },
+      _boxShadow: { values: { offsetX: "0", offsetY: "8px", blur: "24px", spread: "0" }, color: { rgb: "rgba(0, 0, 0, 0.08)" } },
+      _rowGap: "var(--space-m)", _cssCustom: ".pricing-card:hover { transform: translateY(-4px); border-color: var(--primary); }",
+    } },
+  ],
+};
+
+const HERO: BricksElement[] = [
+  { id: "hro001", name: "section", parent: 0, children: ["row001"], settings: { _background: { color: { hex: "#0f172a" } }, _padding: { top: "120px", bottom: "120px" } } },
+  { id: "row001", name: "div", parent: "hro001", children: ["col001", "col002"], settings: { _display: "flex", _direction: "row", _columnGap: "var(--grid-gap)" } },
+  { id: "col001", name: "block", parent: "row001", children: ["hh1001", "ht1001", "act001"], settings: {} },
+  { id: "col002", name: "block", parent: "row001", children: ["img001"], settings: { _width: "560px" } },
+  { id: "hh1001", name: "heading", parent: "col001", children: [], settings: { tag: "h1", text: "Launch faster", _typography: { "font-size": "clamp(4rem, 5vw, 6.4rem)", color: { hex: "#ffffff" } } } },
+  { id: "ht1001", name: "text-basic", parent: "col001", children: [], settings: { text: "Everything you need.", _typography: { color: { rgb: "rgba(255, 255, 255, 0.7)" }, "font-size": "var(--text-l)" } } },
+  { id: "act001", name: "div", parent: "col001", children: ["hb1001", "hb2001"], settings: { _display: "flex", _direction: "row", _columnGap: "12px" } },
+  { id: "hb1001", name: "button", parent: "act001", children: [], settings: { text: "Start", link: { type: "external", url: "#" }, _background: { color: { raw: "var(--primary)" } }, _typography: { color: { hex: "#ffffff" } } } },
+  { id: "hb2001", name: "button", parent: "act001", children: [], settings: { text: "Docs", outline: true, link: { type: "external", url: "#" } } },
+  { id: "img001", name: "image", parent: "col002", children: [], settings: { image: { url: "https://example.com/hero.jpg" }, altText: "Dashboard", _border: { radius: { top: "20px", right: "20px", bottom: "20px", left: "20px" } } } },
+];
+
+const colorsOf = (settings: unknown): string[] => {
+  const found: string[] = [];
+  const walk = (value: unknown, key = "") => {
+    if (Array.isArray(value)) value.forEach(v => walk(v, key));
+    else if (value && typeof value === "object") for (const [k, v] of Object.entries(value)) {
+      if ((k === "hex" || k === "rgb" || k === "raw") && typeof v === "string") found.push(v);
+      else walk(v, k);
+    }
+  };
+  walk(settings);
+  return found;
+};
+
+describe("modernize: parsing", () => {
+  it("reads hex, rgb(a), hsl and px/rem/clamp sizes", () => {
+    expect(parseColor("#fff")).toEqual({ r: 255, g: 255, b: 255, a: 1 });
+    expect(parseColor("rgba(0, 0, 0, 0.08)")).toMatchObject({ r: 0, a: 0.08 });
+    expect(parseColor("rgb(255 90 31 / 50%)")).toMatchObject({ r: 255, g: 90, b: 31, a: 0.5 });
+    expect(parseColor("hsl(0, 100%, 50%)")).toMatchObject({ r: 255, g: 0, b: 0 });
+    expect(toPx("4.8rem")).toBe(48);
+    expect(toPx("24px")).toBe(24);
+    expect(toPx("clamp(4rem, 5vw, 6.4rem)")).toBe(64);
+    expect(toPx("1.2em")).toBeNull();
+  });
+});
+
+describe("modernize: pricing block", () => {
+  const result = modernizeTemplate(PRICING, { kit: { style: "clean", primary: "#2563eb" } });
+  const { template, report } = result;
+  const el = (id: string) => template.content.find(e => e.id === id)!;
+  const cls = (id: string) => template.globalClasses.find(c => c.id === (el(id).settings._cssGlobalClasses as string[])[0])!;
+
+  it("produces valid Bricks JSON with one bs- class per styled element", () => {
+    expect(validateBricksElements(template.content).valid).toBe(true);
+    expect(() => readStagingTemplate(template)).not.toThrow();
+    for (const e of template.content) {
+      const refs = e.settings._cssGlobalClasses as string[] | undefined;
+      expect(refs?.length ?? 0).toBeLessThanOrEqual(1);
+      expect(Object.keys(e.settings).filter(k => k.startsWith("_") && !["_cssGlobalClasses", "_cssId"].includes(k))).toEqual([]);
+    }
+    expect(template.globalClasses.every(c => c.name.startsWith("bs-pricing-"))).toBe(true);
+    expect(result.block).toBe("pricing");
+  });
+
+  it("maps every color to a design token", () => {
+    const raws = template.globalClasses.flatMap(c => colorsOf(c.settings));
+    expect(raws.length).toBeGreaterThan(5);
+    for (const raw of raws) expect(raw).toMatch(/^(var\(--bs-|color-mix\(in srgb, var\(--bs-|transparent)/);
+    expect(report.brand.primary).toBe("#ff5a1f");
+    // The featured card takes the brand color; its white heading becomes on-primary.
+    expect(JSON.stringify(cls("crd103").settings._background)).toContain("var(--bs-primary,");
+    expect(JSON.stringify(cls("ttl103").settings._typography)).toContain("var(--bs-on-primary,");
+    expect(JSON.stringify(cls("hdg001").settings._typography)).toContain("var(--bs-heading,");
+    expect(JSON.stringify(cls("txt001").settings._typography)).toContain("var(--bs-muted,");
+    expect(JSON.stringify(cls("sec001").settings._background)).toContain("var(--bs-surface-alt,");
+    expect(JSON.stringify(cls("crd101").settings._boxShadow)).toContain("var(--bs-shadow-color,");
+  });
+
+  it("puts sizes, spacing and radii on the token scale and replaces fonts", () => {
+    expect((cls("hdg001").settings._typography as Record<string, string>)["font-size"]).toMatch(/^var\(--bs-text-3xl,/);
+    expect((cls("ttl101").settings._typography as Record<string, string>)["font-size"]).toMatch(/^var\(--bs-text-xl,/);
+    expect(cls("grd001").settings._gridGap).toMatch(/^var\(--bs-space-l,/);
+    expect((cls("crd101").settings._padding as Record<string, string>).top).toMatch(/^var\(--bs-space-l,/);
+    expect(cls("crd101").settings._rowGap).toMatch(/^var\(--bs-space-m,/);
+    expect(((cls("crd101").settings._border as Record<string, Record<string, string>>).radius).top).toMatch(/^var\(--bs-radius-/);
+    expect(JSON.stringify(cls("hdg001").settings)).not.toContain("Poppins");
+    expect(cls("hdg001").settings._cssCustom).toContain("var(--bs-font-heading,");
+    expect(report.fontsReplaced).toEqual(["Poppins"]);
+    expect(report.variables.mapped).toEqual(expect.arrayContaining(["--white", "--space-m", "--primary"]));
+  });
+
+  it("merges source classes, deduplicates identical styles and rewrites custom CSS", () => {
+    expect(el("crd101").settings._cssGlobalClasses).toEqual(el("crd102").settings._cssGlobalClasses);
+    expect(el("crd103").settings._cssGlobalClasses).not.toEqual(el("crd101").settings._cssGlobalClasses);
+    const css = String(cls("crd101").settings._cssCustom);
+    expect(css).toContain(`.${cls("crd101").name}:hover`);
+    expect(css).toContain(`.${cls("crd101").name} .price { color: var(--bs-link,`);
+    expect(css).toContain("border-color: var(--bs-primary-edge,");
+    expect(css).not.toMatch(/#brxe-|\.pricing-card|#ff5a1f/);
+    expect(report.classes.sourceMerged).toEqual(["pricing-card"]);
+    expect(report.classes.sourceMissing).toEqual(["pad--l"]);
+    expect(report.warnings.join(" ")).toMatch(/pad--l/);
+  });
+
+  it("turns button presets into brand buttons", () => {
+    const button = cls("btn101").settings;
+    expect(el("btn101").settings.style).toBeUndefined();
+    expect(JSON.stringify(button._background)).toContain("var(--bs-primary,");
+    expect(JSON.stringify(button._typography)).toContain("var(--bs-on-primary,");
+    expect(JSON.stringify(button._border)).toContain("var(--bs-radius-btn,");
+    expect(el("btn101").settings._cssGlobalClasses).toEqual(el("btn102").settings._cssGlobalClasses);
+  });
+
+  it("adds the missing mobile rules and section rhythm", () => {
+    const grid = cls("grd001").settings;
+    expect(grid["_gridTemplateColumns:tablet_portrait"]).toBe("repeat(2, minmax(0, 1fr))");
+    expect(grid["_gridTemplateColumns:mobile_landscape"]).toBe("minmax(0, 1fr)");
+    const padding = cls("sec001").settings._padding as Record<string, string>;
+    expect(padding.top).toMatch(/^var\(--bs-space-section,/);
+    expect(padding.left).toMatch(/^var\(--bs-gutter,/);
+    expect(report.mobile.join(" ")).toMatch(/Grid.*1 column on phones/);
+  });
+});
+
+describe("modernize: dark hero", () => {
+  const { template, report } = modernizeTemplate(HERO, { kit: { style: "bold", primary: "#dc2626" }, block: "Hero Dark!" });
+  const cls = (id: string) => template.globalClasses.find(c => c.id === (template.content.find(e => e.id === id)!.settings._cssGlobalClasses as string[])[0])!;
+
+  it("reads the dark background as inverse and light text on it", () => {
+    expect(template.globalClasses.every(c => c.name.startsWith("bs-hero-dark-"))).toBe(true);
+    expect(JSON.stringify(cls("hro001").settings._background)).toContain("var(--bs-inverse,");
+    expect(JSON.stringify(cls("hh1001").settings._typography)).toContain("var(--bs-on-inverse,");
+    expect(JSON.stringify(cls("ht1001").settings._typography)).toMatch(/color-mix\(in srgb, var\(--bs-on-inverse,[^)]*\) 70%, transparent\)/);
+    expect((cls("ht1001").settings._typography as Record<string, string>)["font-size"]).toMatch(/^var\(--bs-text-l,/);
+    expect((cls("hh1001").settings._typography as Record<string, string>)["font-size"]).toMatch(/^var\(--bs-text-display,/);
+    expect((cls("hro001").settings._padding as Record<string, string>).top).toMatch(/^var\(--bs-space-section,/);
+  });
+
+  it("stacks the row, frees the fixed width and wraps the buttons on phones", () => {
+    expect(cls("row001").settings["_direction:mobile_landscape"]).toBe("column");
+    expect(cls("col002").settings._width).toBe("100%");
+    expect(cls("col002").settings._widthMax).toBe("560px");
+    expect(cls("act001").settings["_direction:mobile_portrait"]).toBe("column");
+    expect(JSON.stringify(cls("hb1001").settings._background)).toContain("var(--bs-primary,");
+    expect(JSON.stringify(cls("hb1001").settings._typography)).toContain("var(--bs-on-primary,");
+    // The outline button on a dark band gets a light outline and text.
+    expect(JSON.stringify(cls("hb2001").settings._border)).toContain("var(--bs-inverse-muted,");
+    expect(JSON.stringify(cls("hb2001").settings._typography)).toContain("var(--bs-on-inverse,");
+    expect(report.mobile.length).toBeGreaterThanOrEqual(3);
+    expect(report.warnings.join(" ")).toMatch(/1 images keep their source URLs/);
+  });
+
+  it("rejects input without Bricks elements", () => {
+    expect(() => modernizeTemplate({ foo: 1 })).toThrow(/Paste Bricks JSON/);
+    expect(() => modernizeTemplate([])).toThrow();
+  });
+});