feat(theme): add Ash theme (currently active) + palette preview; docs/README to six themes

README.md

@@ -20,20 +20,22 @@ no external dependencies (except `highlight.js`, vendored in `lib/`).
 
 ## Themes
 
-The share ships with **three themes**, each with a dark and a light variant (toggled via the header
+The share ships with **six themes**, each with a dark and a light variant (toggled via the header
 switch / `html.theme-light` + `html.theme-dark`). They live in `theme/` and are set on the blog by
 pointing the `shareCss` relation at the matching note – see
 [`docs/switch-blog-theme.md`](docs/switch-blog-theme.md) for the step-by-step guide.
 
 | Theme | File | Palette (dark / light) | Source |
 |---|---|---|---|
+| **Ash** (active) | `theme/blog_share_theme_ash.css` | panel `#1c1b1f` / bone `#e6dfd1`, ember `#e0914f` steel `#7c9aa1` · paper `#e9e3d5` / ink `#2a2822` | Ash palette, Gruvbox-derived ([trilium-themes](https://git.familie-zink.org/zink/trilium-themes)) |
 | **Coffee** | `theme/blog_share_theme_coffee.css` | espresso `#1d150f` / latte-cream `#f0e2d0`, caramel `#e0a15c` · cream `#E8E3C3` / ink `#2D1A1D`, berry `#8e2d53` | [megabyte0x/omarchy-coffee-theme](https://github.com/megabyte0x/omarchy-coffee-theme) (MIT) |
-| **Harbor** | `theme/blog_share_theme_harbor.css` | near-black `#1b1b1b` / cream `#efebdc`, coral `#e75a50` · paper `#dfe4c4` / ink `#1c2d28`, nord-blue `#5e81ac` | [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbordark-theme) (MIT) |
+| **Harbor** | `theme/blog_share_theme_harbor.css` | near-black `#1b1b1b` / cream `#efebdc`, coral `#e75a50` · paper `#dfe4c4` / ink `#1c2d28`, nord-blue `#5e81ac` | [HANCORE-linux/omarchy-harbordark-theme](https://github.com/HANCORE-linux/omarchy-harbordark-theme) (MIT) |
-| **Gruvbox** (active) | `theme/blog_share_theme_gruvbox.css` | bg `#282828` / fg `#ebdbb2`, accents red/green/yellow/blue | [morhetz/gruvbox](https://github.com/morhetz/gruvbox) (MIT) |
+| **Gruvbox** | `theme/blog_share_theme_gruvbox.css` | bg `#282828` / fg `#ebdbb2`, accents red/green/yellow/blue | [morhetz/gruvbox](https://github.com/morhetz/gruvbox) (MIT) |
 | **Solarized** | `theme/blog_share_theme_solarized.css` | bg `#002b36` / fg `#839496`, blue `#268bd2` cyan `#2aa198` · bg `#fdf6e3` / fg `#657b83` | [Solarized by Ethan Schoonover](https://ethanschoonover.com/solarized/) (MIT) |
 | **Tokyo Night** | `theme/blog_share_theme_tokyonight.css` | storm `#24283b` / fg `#c0caf5`, blue `#7aa2f7` · day `#e1e2e7` / fg `#3760bf` | [tokyonight.nvim](https://github.com/folke/tokyonight.nvim) (Apache-2.0) |
 
 ![Coffee palette](assets/palette-coffee.png)
+![Ash palette](assets/palette-ash.png)
 ![Harbor palette](assets/palette-harbor.png)
 ![Gruvbox palette](assets/palette-gruvbox.png)
 ![Solarized palette](assets/palette-solarized.png)
@@ -42,7 +44,7 @@ pointing the `shareCss` relation at the matching note – see
 ## Features
 
 - Coffee dark / Coffee Latte light theme for the share, with a theme toggle in the header
-  (Gruvbox and Harbor are available as well – see the [Themes](#themes) section).
+  (Ash, Harbor, Gruvbox, Solarized and Tokyo Night are available as well – see the [Themes](#themes) section).
 - Blog index, category pages, sub-categories, tags and tag overview.
 - **Menu sorting**: articles in the left menu are sorted by publication date (newest first)
   and labelled `Fri 2026-08-28 <shortened title>` automatically. All date displays
@@ -85,6 +87,7 @@ pointing the `shareCss` relation at the matching note – see
 | `blog_generator.js` | backend script that generates index, feed, sitemap, search data, category & tag pages | code, `application/javascript;env=backend` |
 | `blog_publish_manager.js` | backend script that mirrors notes between `Unpublished` and the blog | code, `application/javascript;env=backend` |
 | `theme/blog_share_base.css` | **Base stylesheet** (layout/components, palette-independent, var()-driven) | code, `text/css` |
+| `theme/blog_share_theme_ash.css` | **Ash / Ash light share theme (currently active)** – Gruvbox-derived palette | code, `text/css` |
 | `theme/blog_share_theme_coffee.css` | Coffee / Coffee Latte share theme (palette overrides) | code, `text/css` |
 | `theme/blog_share_theme_harbor.css` | Harbor / Harbordark share theme | code, `text/css` |
 | `theme/blog_share_theme_gruvbox.css` | Gruvbox light/dark share theme | code, `text/css` |
@@ -147,6 +150,7 @@ Under **`.blog`** create one code note per file, using the file name as the note
 
 | Note title | File | mime |
 |---|---|---|
+| `blog_share_theme_ash.css` | `theme/blog_share_theme_ash.css` | `text/css` |
 | `blog_share_theme_coffee.css` | `theme/blog_share_theme_coffee.css` | `text/css` |
 | `blog_share_theme_harbor.css` | `theme/blog_share_theme_harbor.css` | `text/css` |
 | `blog_share_theme_gruvbox.css` | `theme/blog_share_theme_gruvbox.css` | `text/css` |
@@ -325,7 +329,7 @@ server {
 
 ## Customisation
 
-- **Theme**: pick one of `theme/blog_share_theme_{coffee,harbor,gruvbox,solarized,tokyonight}.css` and point the blog's
+- **Theme**: pick one of `theme/blog_share_theme_{ash,coffee,harbor,gruvbox,solarized,tokyonight}.css` and point the blog's
   `shareCss` relation at it – see [`docs/switch-blog-theme.md`](docs/switch-blog-theme.md). Each theme
   ships dark + light via `html.theme-light/dark`. The 3D viewer and Mermaid rendering read the theme's
   CSS variables, so they adapt automatically to whichever theme is active.

docs/switch-blog-theme.md

@@ -9,13 +9,14 @@ note IDs are given for reference.
 
 | Theme | Repo file | Live note | Dark / light |
 |---|---|---|---|
+| **Ash (active)** | `theme/blog_share_theme_ash.css` | `OCbcTyzbQJA2` | panel/bone · ember+steel / paper+ink |
 | Coffee (default) | `theme/blog_share_theme_coffee.css` | `NqZXcFRGi3II` | espresso / latte-cream |
 | Harbor | `theme/blog_share_theme_harbor.css` | `Ep54EDTwKxup` | harbordark / paper |
 | Gruvbox | `theme/blog_share_theme_gruvbox.css` | `edhL5cByGwqA` | gruvbox dark / light |
 | Solarized | `theme/blog_share_theme_solarized.css` | `UFxPR5IpTyfj` | base03 / base3 |
 | Tokyo Night | `theme/blog_share_theme_tokyonight.css` | `bf1OKYo3msZm` | storm / day |
 
-All three themes include a `html.theme-light` + `html.theme-dark` block, theme-aware **3D viewer**
+All six themes include a `html.theme-light` + `html.theme-dark` block, theme-aware **3D viewer**
 overlays and **Mermaid** rendering. The 3D viewer reads the theme's CSS variables
 (`--background-primary` for the canvas, `--background-active` for the model material), so it adapts
 automatically to whichever theme is active – no script changes needed.
@@ -70,4 +71,4 @@ If you want to add or customise a theme on a new Trilium instance:
 
 The palette-independent layout lives in **`blog_share_base.css`** (note under `.blog`, mime `text/css`). It is attached to the blog root with a **second `shareCss` relation that is inherited (`isInheritable`)**, alongside the per-palette theme relation. When you switch the active palette you change ONLY the theme `shareCss` target; the base relation stays untouched.
 
-Because the base is shared, add any **new generic rule (focus ring, image caps, component layout) to `blog_share_base.css`** instead of duplicating it across all five theme files. The themes now carry only the `:root` variables and the colour-specific components. For production you can serve the minified build via `tools/minify_css.py`.
+Because the base is shared, add any **new generic rule (focus ring, image caps, component layout) to `blog_share_base.css`** instead of duplicating it across all six theme files. The themes now carry only the `:root` variables and the colour-specific components. For production you can serve the minified build via `tools/minify_css.py`.

theme/blog_share_theme_ash.css

@@ -0,0 +1,167 @@
+/* Ash theme for blog share - recolored from the Gruvbox active theme.
+   Ash palette: Gruvbox hues cooled/desaturated (yurakuden AshPalette / trilium-themes). */
+html.theme-light{--background-primary:#e9e3d5;--background-secondary:#dcd5c3;--background-highlight:#c9c1ad;--background-active:#3d6b72;--blog-card-bg:#dcd5c3;--scrollbar-thumb:#c9c1ad;--scrollbar-hover:#c9c1ad;--scrollbar-track:#dcd5c3;--text-primary:#2a2822;--text-heading:#2a2822;--text-menu:#6f685c;--text-link:#3d6b72;--text-menu-active:#e9e3d5;color-scheme:light;--model-viewer-color:#5c6631}html.theme-dark{--background-primary:#1c1b1f;--background-secondary:#100f12;--background-highlight:#3a383d;--background-active:#7c9aa1;--blog-card-bg:#29282c;--scrollbar-thumb:#3a383d;--scrollbar-hover:#454148;--scrollbar-track:#100f12;--text-primary:#e6dfd1;--text-heading:#f3ede1;--text-menu:#999187;--text-link:#7c9aa1;--text-menu-active:#100f12;color-scheme:dark;--model-viewer-color:#8f9a5c}body{font-family:"Inter","Montserrat","Lucida Grande","Lucida Sans Unicode",arial,sans-serif}#menu a{color:var(--text-heading);gap:8px;font-size:0.9em;padding:4px 6px;border-color:transparent;transition:background-color 150ms ease,color 150ms ease}#menu a:hover{background:var(--background-highlight);color:var(--text-heading);border-color:transparent;text-decoration:none}#menu a.active{background:var(--background-active);color:var(--background-secondary);border-color:transparent}#menu .tn-icon{color:var(--text-link)}#bmc-wrap{padding:8px 14px 14px;background:var(--background-secondary);border-top:1px solid var(--background-highlight)}.bmc-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;padding:6px 12px 8px;border-radius:8px;background:#d6b46a;color:#100f12;border:2px solid #100f12;font-family:"Cookie","Brush Script MT",cursive;font-size:1.4em;line-height:1.1;text-decoration:none;transition:background-color 150ms ease,transform 150ms ease}.bmc-btn:hover{background:#e0914f;color:#100f12;text-decoration:none;transform:translateY(-1px)}.bmc-btn .bmc-emoji{font-size:1.15em}.bmc-copyright{margin-top:8px;font-size:0.75em;color:var(--text-menu);display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}.bmc-powered{display:inline-flex;align-items:center;gap:3px;color:var(--text-menu);text-decoration:none;transition:color 150ms ease}.bmc-powered:hover{color:var(--text-link);text-decoration:none}.powered-logo{width:1em;height:1em;display:inline-block}.search-item{position:relative}.blog-search-header-input{flex:1;min-width:0;padding:6px 10px 6px 32px;border-radius:6px;border:1px solid rgba(124,154,161,0.55);background:rgba(124,154,161,0.08);color:var(--text-heading);font-size:0.9em;transition:border-color 150ms ease,box-shadow 150ms ease}html.theme-light .blog-search-header-input{border-color:#3d6b72;background:rgba(61,107,114,0.10)}.blog-search-header-input:focus{outline:none;border-color:#7c9aa1;box-shadow:0 0 0 2px rgba(124,154,161,0.20)}html.theme-light .blog-search-header-input:focus{border-color:#3d6b72;box-shadow:0 0 0 2px rgba(61,107,114,0.15)}.search-item .search-icon{color:rgba(124,154,161,0.85)}html.theme-light .search-item .search-icon{color:#3d6b72}.tn-image{width:18px;height:18px;border-radius:4px;flex-shrink:0;vertical-align:middle}.tn-image-svg{color:var(--text-link)}.title-image{width:34px;height:34px;border-radius:6px;vertical-align:middle;margin-right:10px}.note-fallback{margin:1em 0;overflow:hidden}.note-fallback-link{font-size:0.9em}.mermaid-fallback{margin:1em 0}.mermaid-render{margin:1em 0;padding:14px;background:var(--background-secondary);border:1px solid var(--background-highlight);border-radius:8px;overflow-x:auto}.mermaid-render svg{max-width:100%;height:auto}.mermaid-source{margin:12px 0 0;text-align:center}.mermaid-source summary{cursor:pointer;font-size:0.85em;color:var(--text-menu);user-select:none;padding:4px 10px;border:1px solid var(--background-highlight);border-radius:6px;display:inline-block;background:var(--background-secondary)}.mermaid-source summary:hover{color:var(--text-heading);border-color:var(--text-link)}.mermaid-source pre{width:min(100%,820px);margin:8px auto 0;text-align:left;position:relative;overflow:hidden}#content .mermaid-source .hljs-ln{width:100%}.mindmap-render,.excalidraw-render{margin:1em 0;padding:14px;background:var(--background-secondary);border:1px solid var(--background-highlight);border-radius:8px;overflow-x:auto}.mindmap-svg{display:block;width:100%;height:auto}.excalidraw-svg{display:block;max-width:100%;height:auto}.mindmap-render svg text{user-select:none}.blog-search-overlay{display:none;position:absolute;top:calc(100%+4px);left:0;right:0;z-index:50;background:var(--background-secondary);border:1px solid var(--background-highlight);border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.25)}.blog-search-overlay.open{display:block}.blog-search-overlay-hit{display:flex;flex-direction:column;gap:1px;padding:7px 10px;color:var(--text-heading);text-decoration:none;font-size:0.85em;border-bottom:1px solid var(--background-highlight)}.blog-search-overlay-hit:last-child{border-bottom:none}.bloLine truncated
+
+
+/* ---------- mermaid xychart-beta (bar & line charts) ----------
+   flowchart selectors (.node/.edgePaths) don't match these; xychart renders
+   unclassed bar rects inside g[class*="bar-plot-N"], line paths inside
+   g[class*="line-plot-N"], axis/zero-line paths inside g[class*="-axis"],
+   plus an opaque full-bleed <rect class="background">. */
+.mermaid svg rect.background{fill:transparent !important;stroke:none !important}
+html.theme-dark .mermaid svg g[class*="bar-plot"] rect{fill:#7c9aa1 !important;stroke:#7c9aa1 !important}
+html.theme-dark .mermaid svg g[class*="line-plot"] path{fill:none !important;stroke:#e0914f !important;stroke-width:2px !important}
+html.theme-dark .mermaid svg g[class*="line-plot"] circle{fill:#e0914f !important}
+html.theme-dark .mermaid svg g[class*="-axis"] path,html.theme-dark .mermaid svg g[class*="-axis"] line{stroke:#999187 !important}
+html.theme-light .mermaid svg g[class*="bar-plot"] rect{fill:#3d6b72 !important;stroke:#3d6b72 !important}
+html.theme-light .mermaid svg g[class*="line-plot"] path{fill:none !important;stroke:#a85f1d !important;stroke-width:2px !important}
+html.theme-light .mermaid svg g[class*="line-plot"] circle{fill:#a85f1d !important}
+html.theme-light .mermaid svg g[class*="-axis"] path,html.theme-light .mermaid svg g[class*="-axis"] line{stroke:#6f685c !important}
+
+/* ---------- mermaid: uebrige Diagrammtypen (v11.16, Klassen aus Bundle-Sources verifiziert) ----------
+   Reihenfolge: shared (markers, background) -> sequence -> gantt/journey -> pie -> quadrant
+   -> class/state/er -> gitgraph -> timeline -> mindmap -> packet -> architecture -> sankey -> block */
+.mermaid svg rect.background{fill:transparent !important}
+html.theme-dark .mermaid svg marker path{fill:#999187 !important;stroke:#999187 !important}
+html.theme-light .mermaid svg marker path{fill:#6f685c !important;stroke:#6f685c !important}
+/* sequence */
+html.theme-dark .mermaid svg rect.actor,html.theme-dark .mermaid svg polygon.actor,html.theme-dark .mermaid svg path.actor{fill:#29282c !important;stroke:#7c9aa1 !important}
+html.theme-dark .mermaid svg .actor-line,html.theme-dark .mermaid svg line.actor-line{stroke:#999187 !important}
+html.theme-dark .mermaid svg .messageLine0,html.theme-dark .mermaid svg .messageLine1,html.theme-dark .mermaid svg .loopLine,html.theme-dark .mermaid svg line.loopLine{stroke:#999187 !important}
+html.theme-dark .mermaid svg rect.labelBox{fill:#3a383d !important;stroke:#999187 !important}
+html.theme-dark .mermaid svg .note,html.theme-dark .mermaid svg path.note{fill:#3a383d !important;stroke:#d6b46a !important}
+html.theme-dark .mermaid svg rect.box{fill:rgba(28,27,31,0.55) !important;stroke:#454148 !important}
+html.theme-dark .mermaid svg .actorActivations path,html.theme-dark .mermaid svg path.actorActivations{fill:rgba(124,154,161,0.25) !important;stroke:none !important}
+html.theme-dark .mermaid svg text.sequenceNumber{fill:#1c1b1f !important}
+html.theme-light .mermaid svg rect.actor,html.theme-light .mermaid svg polygon.actor,html.theme-light .mermaid svg path.actor{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
+html.theme-light .mermaid svg .actor-line,html.theme-light .mermaid svg line.actor-line{stroke:#6f685c !important}
+html.theme-light .mermaid svg .messageLine0,html.theme-light .mermaid svg .messageLine1,html.theme-light .mermaid svg .loopLine,html.theme-light .mermaid svg line.loopLine{stroke:#6f685c !important}
+html.theme-light .mermaid svg rect.labelBox{fill:#c9c1ad !important;stroke:#6f685c !important}
+html.theme-light .mermaid svg .note,html.theme-light .mermaid svg path.note{fill:#c9c1ad !important;stroke:#8a6a24 !important}
+html.theme-light .mermaid svg rect.box{fill:rgba(233,227,213,0.55) !important;stroke:#c9c1ad !important}
+html.theme-light .mermaid svg .actorActivations path,html.theme-light .mermaid svg path.actorActivations{fill:rgba(61,107,114,0.18) !important;stroke:none !important}
+/* gantt + user-journey (gleiche task-Klassen-Familie) */
+html.theme-dark .mermaid svg .grid .tick line{stroke:#3a383d !important}
+html.theme-dark .mermaid svg .grid path{stroke:#3a383d !important}
+html.theme-dark .mermaid svg .today{stroke:#c15c46 !important;stroke-width:2px !important}
+html.theme-dark .mermaid svg rect.task{fill:#3a383d !important;stroke:#7c9aa1 !important}
+html.theme-dark .mermaid svg rect.done{fill:#29282c !important;stroke:#454148 !important}
+html.theme-dark .mermaid svg rect.active{fill:#454148 !important;stroke:#d6b46a !important}
+html.theme-dark .mermaid svg rect.crit,html.theme-dark .mermaid svg rect.activeCrit,html.theme-dark .mermaid svg rect.doneCrit{fill:#29282c !important;stroke:#c15c46 !important}
+html.theme-dark .mermaid svg path.milestone{fill:#d6b46a !important;stroke:#d6b46a !important}
+html.theme-dark .mermaid svg rect.section,html.theme-dark .mermaid svg rect.section0,html.theme-dark .mermaid svg rect.section1{fill:rgba(28,27,31,0.35) !important;stroke:#3a383d !important}
+html.theme-light .mermaid svg .grid .tick line{stroke:#c9c1ad !important}
+html.theme-light .mermaid svg .grid path{stroke:#c9c1ad !important}
+html.theme-light .mermaid svg .today{stroke:#96392a !important;stroke-width:2px !important}
+html.theme-light .mermaid svg rect.task{fill:#c9c1ad !important;stroke:#3d6b72 !important}
+html.theme-light .mermaid svg rect.done{fill:#dcd5c3 !important;stroke:#c9c1ad !important}
+html.theme-light .mermaid svg rect.active{fill:#c9c1ad !important;stroke:#8a6a24 !important}
+html.theme-light .mermaid svg rect.crit,html.theme-light .mermaid svg rect.activeCrit,html.theme-light .mermaid svg rect.doneCrit{fill:#dcd5c3 !important;stroke:#96392a !important}
+html.theme-light .mermaid svg path.milestone{fill:#5c6631 !important;stroke:#5c6631 !important}
+html.theme-light .mermaid svg rect.section,html.theme-light .mermaid svg rect.section0,html.theme-light .mermaid svg rect.section1{fill:rgba(220,213,195,0.4) !important;stroke:#c9c1ad !important}
+/* pie: 8-Farben-Zyklus statt Default-Palette */
+html.theme-dark .mermaid svg .pieOuterCircle{stroke:#3a383d !important;fill:none !important}
+html.theme-dark .mermaid svg path.slice:nth-of-type(8n+1){fill:#7c9aa1 !important}
+html.theme-dark .mermaid svg path.slice:nth-of-type(8n+2){fill:#d6b46a !important}
+html.theme-dark .mermaid svg path.slice:nth-of-type(8n+3){fill:#c15c46 !important}
+html.theme-dark .mermaid svg path.slice:nth-of-type(8n+4){fill:#8f9a5c !important}
+html.theme-dark .mermaid svg path.slice:nth-of-type(8n+5){fill:#b47e99 !important}
+html.theme-dark .mermaid svg path.slice:nth-of-type(8n+6){fill:#e0914f !important}
+html.theme-dark .mermaid svg path.slice:nth-of-type(8n+7){fill:#8f9a5c !important}
+html.theme-dark .mermaid svg path.slice:nth-of-type(8n){fill:#999187 !important}
+html.theme-dark .mermaid svg path.slice{stroke:#1c1b1f !important}
+html.theme-light .mermaid svg .pieOuterCircle{stroke:#c9c1ad !important;fill:none !important}
+html.theme-light .mermaid svg path.slice:nth-of-type(8n+1){fill:#3d6b72 !important}
+html.theme-light .mermaid svg path.slice:nth-of-type(8n+2){fill:#5c6631 !important}
+html.theme-light .mermaid svg path.slice:nth-of-type(8n+3){fill:#96392a !important}
+html.theme-light .mermaid svg path.slice:nth-of-type(8n+4){fill:#5c6631 !important}
+html.theme-light .mermaid svg path.slice:nth-of-type(8n+5){fill:#7c4a66 !important}
+html.theme-light .mermaid svg path.slice:nth-of-type(8n+6){fill:#a85f1d !important}
+html.theme-light .mermaid svg path.slice:nth-of-type(8n+7){fill:#6a7539 !important}
+html.theme-light .mermaid svg path.slice:nth-of-type(8n){fill:#6f685c !important}
+html.theme-light .mermaid svg path.slice{stroke:#e9e3d5 !important}
+/* quadrant (nutzt chartBuilder-Achsen wie xychart -> bereits gedeckt) */
+html.theme-dark .mermaid svg .quadrants rect:nth-of-type(4n+1){fill:rgba(124,154,161,0.20) !important}
+html.theme-dark .mermaid svg .quadrants rect:nth-of-type(4n+2){fill:rgba(214,180,106,0.15) !important}
+html.theme-dark .mermaid svg .quadrants rect:nth-of-type(4n+3){fill:rgba(180,126,153,0.15) !important}
+html.theme-dark .mermaid svg .quadrants rect:nth-of-type(4n){fill:rgba(143,154,92,0.18) !important}
+html.theme-dark .mermaid svg .quadrants rect{stroke:#3a383d !important}
+html.theme-dark .mermaid svg .data-point circle{fill:#e0914f !important;stroke:#1c1b1f !important}
+html.theme-light .mermaid svg .quadrants rect:nth-of-type(4n+1){fill:rgba(61,107,114,0.12) !important}
+html.theme-light .mermaid svg .quadrants rect:nth-of-type(4n+2){fill:rgba(92,102,49,0.12) !important}
+html.theme-light .mermaid svg .quadrants rect:nth-of-type(4n+3){fill:rgba(124,74,102,0.12) !important}
+html.theme-light .mermaid svg .quadrants rect:nth-of-type(4n){fill:rgba(92,102,49,0.12) !important}
+html.theme-light .mermaid svg .quadrants rect{stroke:#c9c1ad !important}
+html.theme-light .mermaid svg .data-point circle{fill:#a85f1d !important;stroke:#e9e3d5 !important}
+/* class / state / er (flow-Familie erbt .node-Regeln; hier die Ergaenzungen) */
+html.theme-dark .mermaid svg path.divider{stroke:#999187 !important}
+html.theme-dark .mermaid svg .stateGroup path,html.theme-dark .mermaid svg .stateGroup rect{fill:#29282c !important;stroke:#7c9aa1 !important}
+html.theme-dark .mermaid svg .transition path,html.theme-dark .mermaid svg path.transition{fill:none !important;stroke:#999187 !important}
+html.theme-dark .mermaid svg .relationshipLine,html.theme-dark .mermaid svg .edgePath path{fill:none !important;stroke:#999187 !important}
+html.theme-light .mermaid svg path.divider{stroke:#6f685c !important}
+html.theme-light .mermaid svg .stateGroup path,html.theme-light .mermaid svg .stateGroup rect{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
+html.theme-light .mermaid svg .transition path,html.theme-light .mermaid svg path.transition{fill:none !important;stroke:#6f685c !important}
+html.theme-light .mermaid svg .relationshipLine,html.theme-light .mermaid svg .edgePath path{fill:none !important;stroke:#6f685c !important}
+/* gitGraph */
+html.theme-dark .mermaid svg circle.commit{fill:#d6b46a !important;stroke:#1c1b1f !important}
+html.theme-dark .mermaid svg path.branch,html.theme-dark .mermaid svg path.arrow{stroke:#7c9aa1 !important}
+html.theme-dark .mermaid svg .tag-hole{fill:#1c1b1f !important}
+html.theme-light .mermaid svg circle.commit{fill:#5c6631 !important;stroke:#e9e3d5 !important}
+html.theme-light .mermaid svg path.branch,html.theme-light .mermaid svg path.arrow{stroke:#3d6b72 !important}
+html.theme-light .mermaid svg .tag-hole{fill:#e9e3d5 !important}
+/* timeline */
+html.theme-dark .mermaid svg [class*="eventWrapper"] rect,html.theme-dark .mermaid svg [class*="eventWrapper"] path{fill:#29282c !important;stroke:#7c9aa1 !important}
+html.theme-dark .mermaid svg [class*="lineWrapper"] path,html.theme-dark .mermaid svg [class*="lineWrapper"] line{stroke:#999187 !important}
+html.theme-light .mermaid svg [class*="eventWrapper"] rect,html.theme-light .mermaid svg [class*="eventWrapper"] path{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
+html.theme-light .mermaid svg [class*="lineWrapper"] path,html.theme-light .mermaid svg [class*="lineWrapper"] line{stroke:#6f685c !important}
+/* mindmap (11.x-Renderer) */
+html.theme-dark .mermaid svg [class*="node-bkg"]{fill:#29282c !important;stroke:#7c9aa1 !important}
+html.theme-dark .mermaid svg [class^="node-line-"]{fill:none !important;stroke:#999187 !important}
+html.theme-light .mermaid svg [class*="node-bkg"]{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
+html.theme-light .mermaid svg [class^="node-line-"]{fill:none !important;stroke:#6f685c !important}
+/* packet */
+html.theme-dark .mermaid svg .packetBlock rect,html.theme-dark .mermaid svg rect.packetBlock{fill:#29282c !important;stroke:#7c9aa1 !important}
+html.theme-dark .mermaid svg .packetByte{stroke:#3a383d !important}
+html.theme-light .mermaid svg .packetBlock rect,html.theme-light .mermaid svg rect.packetBlock{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
+html.theme-light .mermaid svg .packetByte{stroke:#c9c1ad !important}
+/* architecture */
+html.theme-dark .mermaid svg .architecture-groups rect{fill:rgba(28,27,31,0.35) !important;stroke:#454148 !important}
+html.theme-dark .mermaid svg .architecture-services rect,html.theme-dark .mermaid svg .architecture-services path{fill:#29282c !important;stroke:#7c9aa1 !important}
+html.theme-dark .mermaid svg .architecture-edges path{stroke:#999187 !important;fill:none !important}
+html.theme-light .mermaid svg .architecture-groups rect{fill:rgba(220,213,195,0.4) !important;stroke:#c9c1ad !important}
+html.theme-light .mermaid svg .architecture-services rect,html.theme-light .mermaid svg .architecture-services path{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
+html.theme-light .mermaid svg .architecture-edges path{stroke:#6f685c !important;fill:none !important}
+/* sankey: siehe Dateiende (sankey v2) */
+/* block */
+html.theme-dark .mermaid svg g.block rect,html.theme-dark .mermaid svg g.block path{fill:#29282c !important;stroke:#7c9aa1 !important}
+html.theme-light .mermaid svg g.block rect,html.theme-light .mermaid svg g.block path{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
+
+/* ---------- sankey: node-colors kommen jetzt per init-directive aus dem diagramm
+   (conf.nodeColors, gemappt auf node-ids); gradiente folgen automatisch.
+   CSS haelt nur noch blend-mode + trennstroke. ---------- */
+html.theme-dark .mermaid svg .links g.link{mix-blend-mode:normal !important}
+html.theme-dark .mermaid svg .nodes g.node rect{stroke:#1c1b1f !important}
+html.theme-light .mermaid svg .links g.link{mix-blend-mode:normal !important}
+html.theme-light .mermaid svg .nodes g.node rect{stroke:#e9e3d5 !important}
+/* ---------- kanban ---------- */
+html.theme-dark .mermaid svg .sections rect,html.theme-dark .mermaid svg [class*="section"] rect{fill:rgba(28,27,31,0.35) !important;stroke:#3a383d !important}
+html.theme-dark .mermaid svg .items rect,html.theme-dark .mermaid svg [class*="item"] rect{fill:#29282c !important;stroke:#7c9aa1 !important}
+html.theme-light .mermaid svg .sections rect,html.theme-light .mermaid svg [class*="section"] rect{fill:rgba(220,213,195,0.4) !important;stroke:#c9c1ad !important}
+html.theme-light .mermaid svg .items rect,html.theme-light .mermaid svg [class*="item"] rect{fill:#dcd5c3 !important;stroke:#3d6b72 !important}
+/* ---------- venn ---------- */
+html.theme-dark .mermaid svg [class*="venn"] path:nth-of-type(6n+1),html.theme-dark .mermaid svg path.venn:nth-of-type(6n+1){fill:#7c9aa1 !important;stroke:#7c9aa1 !important}
+html.theme-dark .mermaid svg [class*="venn"] path:nth-of-type(6n+2),html.theme-dark .mermaid svg path.venn:nth-of-type(6n+2){fill:#d6b46a !important;stroke:#d6b46a !important}
+html.theme-dark .mermaid svg [class*="venn"] path:nth-of-type(6n+3),html.theme-dark .mermaid svg path.venn:nth-of-type(6n+3){fill:#b47e99 !important;stroke:#b47e99 !important}
+html.theme-dark .mermaid svg [class*="venn"] path:nth-of-type(6n+4),html.theme-dark .mermaid svg path.venn:nth-of-type(6n+4){fill:#8f9a5c !important;stroke:#8f9a5c !important}
+html.theme-dark .mermaid svg [class*="venn"] path:nth-of-type(6n+5),html.theme-dark .mermaid svg path.venn:nth-of-type(6n+5){fill:#e0914f !important;stroke:#e0914f !important}
+html.theme-dark .mermaid svg [class*="venn"] path:nth-of-type(6n),html.theme-dark .mermaid svg path.venn:nth-of-type(6n){fill:#8f9a5c !important;stroke:#8f9a5c !important}
+html.theme-dark .mermaid svg [class*="venn"] path{fill-opacity:0.45 !important;stroke-width:2px !important}
+html.theme-light .mermaid svg [class*="venn"] path:nth-of-type(6n+1),html.theme-light .mermaid svg path.venn:nth-of-type(6n+1){fill:#3d6b72 !important;stroke:#3d6b72 !important}
+html.theme-light .mermaid svg [class*="venn"] path:nth-of-type(6n+2),html.theme-light .mermaid svg path.venn:nth-of-type(6n+2){fill:#5c6631 !important;stroke:#5c6631 !important}
+html.theme-light .mermaid svg [class*="venn"] path:nth-of-type(6n+3),html.theme-light .mermaid svg path.venn:nth-of-type(6n+3){fill:#7c4a66 !important;stroke:#7c4a66 !important}
+html.theme-light .mermaid svg [class*="venn"] path:nth-of-type(6n+4),html.theme-light .mermaid svg path.venn:nth-of-type(6n+4){fill:#5c6631 !important;stroke:#5c6631 !important}
+html.theme-light .mermaid svg [class*="venn"] path:nth-of-type(6n+5),html.theme-light .mermaid svg path.venn:nth-of-type(6n+5){fill:#a85f1d !important;stroke:#a85f1d !important}
+html.theme-light .mermaid svg [class*="venn"] path:nth-of-type(6n),html.theme-light .mermaid svg path.venn:nth-of-type(6n){fill:#6a7539 !important;stroke:#6a7539 !important}
+html.theme-light .mermaid svg [class*="venn"] path{fill-opacity:0.35 !important;stroke-width:2px !important}
+
+/* ---------- sankey: bars & link-gradiente beziehen ihre farben beide aus conf.nodeColors (init-directive), koennen nicht mehr auseinanderlaufen; flowchart .node-rect-regel ist per :not(:has(> g.nodes)) raus. */