diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..433b482
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+*.min.css
diff --git a/templates/share/page.ejs b/templates/share/page.ejs
index 2818912..594184b 100644
--- a/templates/share/page.ejs
+++ b/templates/share/page.ejs
@@ -34,7 +34,15 @@
     if (subRoot.note.hasRelation("shareOpenGraphImage")) {
         ogImageRel = `api/images/${subRoot.note.getRelation("shareOpenGraphImage").value}/image.png`;
     }
-    const ogImage = ogImageRel ? rootUrl + ogImageRel : "";
+    // Per-article OG image: a thumbnail child note beats the site-wide fallback.
+    if (note.getLabelValue("publish") === "true") {
+        try {
+            const thumbs = (note.getChildNotes() || [])
+                .filter(n => /^(?:thumb|.+_thumb)\.[A-Za-z0-9]+$/i.test(n.title));
+            if (thumbs.length) ogImageRel = `api/notes/${thumbs[0].noteId}/download`;
+        } catch (e) {}
+    }
+    const ogImage = ogImageRel ? (ogImageRel.startsWith("http") ? ogImageRel : rootUrl + ogImageRel) : "";
 
     const jsonLd = [];
     if (note.noteId === subRoot.note.noteId) {
@@ -71,8 +79,9 @@
     <title><%= pageTitle %></title>
     <% if (pageUrl) { %><link rel="canonical" href="<%= pageUrl %>"><% } %>
     <script>
-        // Site theme toggle (light/dark); default is dark.
-        const theme = localStorage.getItem("theme") || "dark";
+        // Site theme toggle: explicit choice wins, else follow OS, else dark.
+        const theme = localStorage.getItem("theme")
+            || (window.matchMedia && matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
         document.documentElement.classList.add(`theme-${theme}`);
 
         window.glob = {
@@ -127,6 +136,7 @@ content = content.replaceAll(headingRe, (...match) => {
 });
 %>
 <body data-note-id="<%= note.noteId %>" class="type-<%= note.type %>" data-ancestor-note-id="<%= subRoot.note.noteId %>">
+<a href="#content" class="skip-link">Skip to content</a>
 <%- renderSnippets("body:start") %>
 <div id="header">
     <button aria-label="<%= t("share_theme.toggle-navigation") %>" id="left-pane-toggle-button" class="header-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg></button>
@@ -180,7 +190,21 @@ content = content.replaceAll(headingRe, (...match) => {
                     <p><%= t("share_page.no-content") %></p>
                 <% } else { %>
                     <%
-                    content = content.replace(/<img /g, `<img alt="${t("share_theme.image_alt")}" loading="lazy" `);
+                    const pageTitleEsc = note.title.replace(/"/g, "&quot;");
+                    content = content.replace(/<img\b([^>]*)>/g, (m, attrs) => {
+                        let a = attrs;
+                        if (!/\bloading=/i.test(a)) a += ' loading="lazy"';
+                        if (!/\bdecoding=/i.test(a)) a += ' decoding="async"';
+                        if (!/\balt=/i.test(a)) {
+                            let alt = pageTitleEsc;
+                            const srcm = a.match(/src="[^"]*\/([^"?]+)"/);
+                            if (srcm && !/\/download$/i.test(srcm[1])) {
+                                alt = decodeURIComponent(srcm[1]).replace(/[-_]+/g, " ").replace(/\.[A-Za-z0-9]+$/, "").trim() || alt;
+                            }
+                            a += ` alt="${alt}"`;
+                        }
+                        return "<img" + a + ">";
+                    });
                     %>
                     <%- content %>
                 <% } %>
diff --git a/theme/blog_share_base.css b/theme/blog_share_base.css
new file mode 100644
index 0000000..cd63141
--- /dev/null
+++ b/theme/blog_share_base.css
@@ -0,0 +1,507 @@
+/*
+ * Blog Share – BASE stylesheet (layout/components, palette-independent).
+ * All colors are var(...) driven; per-palette overrides live in blog_share_theme_*.css.
+ */
+
+/* ---------- Header: Logo durch Laptop-Emoji ---------- */
+#header-logo img {
+    display: none;
+}
+
+#header-logo::before {
+    content: "💻";
+    font-size: 1.5em;
+    line-height: 1;
+    margin-right: 8px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+/* ---------- Buy Me a Coffee (original, lokal) ---------- */
+@font-face {
+    font-family: "Cookie";
+    src: url(/api/notes/__COOKIE_FONT_ID__/download) format("woff2");
+    font-weight: 400;
+    font-display: swap;
+}
+
+#bmc-links {
+    margin-top: auto;
+    padding: 8px 25px 4px;
+    background: var(--background-secondary);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.bmc-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 6px 4px 24px;
+    border-radius: 6px;
+    color: var(--text-heading);
+    text-decoration: none;
+    font-size: 0.9em;
+    transition: background-color 150ms ease, color 150ms ease;
+}
+
+.bmc-link:hover {
+    background: var(--background-highlight);
+    color: var(--text-heading);
+    text-decoration: none;
+}
+
+.bmc-link .tn-icon {
+    color: var(--text-link);
+}
+
+/* ---------- Reading time ---------- */
+.reading-time {
+    font-size: 0.8em;
+    color: var(--text-menu);
+    margin: -0.9em 0 1.25em;
+}
+
+/* ---------- Blog pagination ---------- */
+.blog-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin: 1.5em 0 0;
+    padding-top: 1em;
+    border-top: 1px solid var(--background-highlight);
+}
+
+.blog-pagination .blog-page-num {
+    font-size: 0.85em;
+    color: var(--text-menu);
+}
+
+/* ---------- Share footer navigation (built-in prev/next) ausblenden ---------- */
+#content-footer .navigation {
+    display: none;
+}
+
+/* ---------- Prev/Next ---------- */
+.blog-prevnext {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    margin: 1.5em 0 0;
+    padding-top: 1em;
+    border-top: 1px solid var(--background-highlight);
+}
+
+.blog-pn {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    max-width: 45%;
+    color: var(--text-heading);
+    text-decoration: none;
+    transition: color 150ms ease;
+}
+
+.blog-pn.next {
+    margin-left: auto;
+    align-items: flex-end;
+    text-align: right;
+}
+
+.blog-pn-label {
+    font-size: 0.72em;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-menu);
+}
+
+.blog-pn:hover {
+    color: var(--text-link);
+    text-decoration: none;
+}
+
+.blog-pn.empty {
+    display: none;
+}
+
+/* ---------- Search ---------- */
+.blog-search {
+    margin: 0.5em 0 1em;
+}
+
+.blog-search-input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px 14px;
+    border-radius: 8px;
+    border: 1px solid var(--background-highlight);
+    background: var(--background-secondary);
+    color: var(--text-heading);
+    font-size: 1em;
+}
+
+.blog-search-input:focus {
+    outline: none;
+    border-color: var(--text-link);
+}
+
+.blog-search-list {
+    list-style: none;
+    padding: 0;
+    margin: 1em 0 0;
+}
+
+.blog-search-hit {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    border: 1px solid var(--background-highlight);
+    background: var(--blog-card-bg);
+    color: var(--text-heading);
+    text-decoration: none;
+    margin-bottom: 8px;
+    transition: border-color 150ms ease;
+}
+
+.blog-search-hit:hover {
+    border-color: var(--text-link);
+    text-decoration: none;
+}
+
+.blog-search-path {
+    font-size: 0.8em;
+    color: var(--text-menu);
+}
+
+.blog-search-none {
+    color: var(--text-menu);
+}
+
+/* ---------- Blog index (generated article list) ---------- */
+.blog-post {
+    padding: 1.2em 1.4em;
+    margin-bottom: 1.25em;
+    border: 1px solid var(--background-highlight);
+    border-radius: 10px;
+    background: var(--blog-card-bg);
+    transition: border-color 150ms ease, box-shadow 150ms ease;
+    cursor: pointer;
+}
+
+.blog-post:last-child {
+    margin-bottom: 0;
+}
+
+.blog-post:hover {
+    border-color: var(--text-link);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+}
+
+#content .blog-post:first-of-type {
+    margin-top: 1.5em;
+}
+
+/* ---------- Blog post thumbnails (Bild links, Teaser rechts) ---------- */
+.blog-post-inner {
+    display: flex;
+    gap: 16px;
+    align-items: stretch;
+}
+
+.blog-thumb-link {
+    flex: 0 0 auto;
+    width: min(256px, 35%);
+    text-decoration: none;
+}
+
+.blog-thumb {
+    display: block;
+    width: 100%;
+    height: 100%;
+    max-height: 256px;
+    object-fit: cover;
+    border-radius: 8px;
+    border: 1px solid var(--background-highlight);
+}
+
+.blog-post-body {
+    flex: 1;
+    min-width: 0;
+}
+
+.blog-post-title {
+    margin: 0 0 0.25em;
+}
+
+.blog-post-title a {
+    color: var(--text-heading);
+    text-decoration: none;
+    transition: color 150ms ease;
+}
+
+.blog-post-title a:hover {
+    color: var(--text-link);
+    text-decoration: none;
+}
+
+.blog-post-meta {
+    display: flex;
+    gap: 12px;
+    font-size: 0.85em;
+    color: var(--text-menu);
+    margin-bottom: 0.5em;
+}
+
+.blog-post-date {
+    font-variant-numeric: tabular-nums;
+    opacity: 0.85;
+}
+
+.blog-post-category {
+    background: var(--background-highlight);
+    border-radius: 8px;
+    padding: 1px 10px;
+    color: var(--text-heading);
+    font-weight: 600;
+}
+
+.blog-post-summary {
+    margin: 0 0 0.5em;
+    color: var(--text-primary);
+}
+
+.blog-post-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.tag {
+    font-size: 0.78em;
+    color: var(--text-link);
+    background: var(--background-secondary);
+    border: 1px solid var(--background-highlight);
+    border-radius: 8px;
+    padding: 1px 8px;
+}
+
+a.tag {
+    text-decoration: none;
+    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+
+a.tag:hover {
+    background: var(--background-highlight);
+    border-color: var(--text-link);
+    color: var(--text-heading);
+    text-decoration: none;
+}
+
+/* ---------- Article meta (date/category on individual pages) ---------- */
+.article-meta {
+    display: flex;
+    gap: 12px;
+    font-size: 0.9em;
+    color: var(--text-menu);
+    margin-bottom: 1em;
+    padding-bottom: 1em;
+    border-bottom: 1px solid var(--background-highlight);
+}
+
+/* ---------- Eingebettete Bilder: Radius wie Code-Blöcke (8px) ---------- */
+#content figure.image {
+    margin: 1.25em auto;
+}
+
+#content figure img,
+#content img:not(.blog-thumb) {
+    border-radius: 8px;
+}
+
+/* ---------- Category subcategories ---------- */
+.blog-subcategories {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 0 0 1.25em;
+}
+
+.blog-subcategory {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--background-secondary);
+    border: 1px solid var(--background-highlight);
+    border-radius: 8px;
+    padding: 4px 12px;
+    color: var(--text-heading);
+    text-decoration: none;
+    font-weight: 600;
+    transition: background-color 150ms ease, border-color 150ms ease;
+}
+
+.blog-subcategory i {
+    color: var(--text-link);
+}
+
+.blog-subcategory:hover {
+    background: var(--background-highlight);
+    border-color: var(--text-link);
+    color: var(--text-heading);
+    text-decoration: none;
+}
+
+/* ---------- Digital Garden note table ---------- */
+.blog-garden-table {
+    width: 100%;
+}
+
+.blog-garden-table tbody td:first-child {
+    background: transparent !important;
+    font-weight: normal;
+}
+
+.note-type {
+    display: inline-block;
+    font-size: 0.8em;
+    padding: 2px 10px;
+    border-radius: 8px;
+    background: var(--background-highlight);
+    color: var(--text-heading);
+    font-weight: 600;
+    text-transform: capitalize;
+    white-space: nowrap;
+}
+
+/* ---------- Code: line numbers + copy button ---------- */
+pre.code-processed {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    line-height: 1.6;
+}
+
+pre.code-processed .code-wrap {
+    flex: 1;
+    min-width: 0;
+    overflow-x: auto;
+    border-radius: 8px;
+}
+
+pre.code-processed .code-wrap code {
+    display: block;
+    line-height: inherit;
+    padding: 0;
+    margin: 0;
+}
+
+pre.code-processed .code-lines {
+    flex-shrink: 0;
+    user-select: none;
+    text-align: right;
+    padding: 0 12px 0 0;
+    margin: 0 12px 0 0;
+    border-right: 1px solid var(--background-highlight);
+    color: var(--text-menu);
+    white-space: pre;
+    font-family: "JetBrains Mono", Consolas, monospace;
+    font-size: 1em;
+    line-height: inherit;
+}
+
+pre.code-processed .code-copy-btn,
+.mermaid-source pre .code-copy-btn {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    z-index: 2;
+    font-size: 0.75em;
+    padding: 2px 10px;
+    border-radius: 6px;
+    border: 1px solid var(--background-highlight);
+    background: var(--background-secondary);
+    color: var(--text-heading);
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 150ms ease;
+}
+
+pre.code-processed:hover .code-copy-btn,
+.mermaid-source pre:hover .code-copy-btn {
+    opacity: 1;
+}
+
+pre.code-processed .code-copy-btn:hover,
+.mermaid-source pre .code-copy-btn:hover {
+    border-color: var(--text-link);
+    opacity: 1;
+}
+
+/* ---------- Scrollbars ---------- */
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-hover);
+}
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* ---------- Mobile: Menu always on top (above 3D viewer overlays) ---------- */
+@media (max-width: 48em) {
+    #left-pane,
+    #toc-pane {
+        z-index: 1000;
+    }
+    #header {
+        position: relative;
+        z-index: 1000;
+    }
+}
+
+/* ---------- Palette preview images: subtle frame so bars stay visible on any background ---------- */
+#content figure.image img.palette-img {
+    border: 1px solid var(--background-highlight);
+    border-radius: 6px;
+}
+
+/* ---------- Tall images: cap height so long screenshots don't dominate the reader ---------- */
+#content figure.image img:not(.palette-img) {
+    max-height: 85vh;
+    width: auto;
+}
+
+/* ---------- a11y: consistent keyboard focus ring ---------- */
+#content a:focus-visible,
+#menu a:focus-visible,
+#childLinks a:focus-visible,
+#site-header input:focus-visible,
+.blog-search-header-input:focus-visible,
+#header button:focus-visible,
+.theme-selection .switch input:focus-visible + .slider {
+    outline: 2px solid var(--text-link);
+    outline-offset: 2px;
+    border-radius: 6px;
+}
+
+/* ---------- a11y: skip link ---------- */
+.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--background-active);color:var(--background-secondary);padding:8px 14px;border-radius:0 0 8px 0;font-size:.9em;text-decoration:none}
+.skip-link:focus{left:0}
diff --git a/theme/blog_share_theme_coffee.css b/theme/blog_share_theme_coffee.css
index f702a33..0399941 100644
--- a/theme/blog_share_theme_coffee.css
+++ b/theme/blog_share_theme_coffee.css
@@ -1,3 +1,8 @@
+/*
+ * Coffee palette overrides (share) — variables + color-specific components.
+ * Layout/components live in blog_share_base.css (loaded alongside this file).
+ */
+
 /*
  * Coffee Share Theme for Richard's Blog (Trilium Public Share)
  * Light:  Coffee Latte (cream #E8E3C3 / ink #2D1A1D, accent #8e2d53)
@@ -45,59 +50,6 @@ body {
     font-family: "Inter", "Montserrat", "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
 }
 
-/* ---------- Header: Logo durch Laptop-Emoji ---------- */
-#header-logo img {
-    display: none;
-}
-
-#header-logo::before {
-    content: "💻";
-    font-size: 1.5em;
-    line-height: 1;
-    margin-right: 8px;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-/* ---------- Buy Me a Coffee (original, lokal) ---------- */
-@font-face {
-    font-family: "Cookie";
-    src: url(/api/notes/__COOKIE_FONT_ID__/download) format("woff2");
-    font-weight: 400;
-    font-display: swap;
-}
-
-#bmc-links {
-    margin-top: auto;
-    padding: 8px 25px 4px;
-    background: var(--background-secondary);
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.bmc-link {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 4px 6px 4px 24px;
-    border-radius: 6px;
-    color: var(--text-heading);
-    text-decoration: none;
-    font-size: 0.9em;
-    transition: background-color 150ms ease, color 150ms ease;
-}
-
-.bmc-link:hover {
-    background: var(--background-highlight);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-
-.bmc-link .tn-icon {
-    color: var(--text-link);
-}
-
 /* ---------- Menu: wie Footer-Links gestalten ---------- */
 #menu a {
     color: var(--text-heading);
@@ -192,131 +144,6 @@ body {
     display: inline-block;
 }
 
-/* ---------- Reading time ---------- */
-.reading-time {
-    font-size: 0.8em;
-    color: var(--text-menu);
-    margin: -0.9em 0 1.25em;
-}
-
-/* ---------- Blog pagination ---------- */
-.blog-pagination {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    margin: 1.5em 0 0;
-    padding-top: 1em;
-    border-top: 1px solid var(--background-highlight);
-}
-
-.blog-pagination .blog-page-num {
-    font-size: 0.85em;
-    color: var(--text-menu);
-}
-
-/* ---------- Share footer navigation (built-in prev/next) ausblenden ---------- */
-#content-footer .navigation {
-    display: none;
-}
-
-/* ---------- Prev/Next ---------- */
-.blog-prevnext {
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-    margin: 1.5em 0 0;
-    padding-top: 1em;
-    border-top: 1px solid var(--background-highlight);
-}
-
-.blog-pn {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    max-width: 45%;
-    color: var(--text-heading);
-    text-decoration: none;
-    transition: color 150ms ease;
-}
-
-.blog-pn.next {
-    margin-left: auto;
-    align-items: flex-end;
-    text-align: right;
-}
-
-.blog-pn-label {
-    font-size: 0.72em;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--text-menu);
-}
-
-.blog-pn:hover {
-    color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-pn.empty {
-    display: none;
-}
-
-/* ---------- Search ---------- */
-.blog-search {
-    margin: 0.5em 0 1em;
-}
-
-.blog-search-input {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10px 14px;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-    background: var(--background-secondary);
-    color: var(--text-heading);
-    font-size: 1em;
-}
-
-.blog-search-input:focus {
-    outline: none;
-    border-color: var(--text-link);
-}
-
-.blog-search-list {
-    list-style: none;
-    padding: 0;
-    margin: 1em 0 0;
-}
-
-.blog-search-hit {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 8px 12px;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-    background: var(--blog-card-bg);
-    color: var(--text-heading);
-    text-decoration: none;
-    margin-bottom: 8px;
-    transition: border-color 150ms ease;
-}
-
-.blog-search-hit:hover {
-    border-color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-search-path {
-    font-size: 0.8em;
-    color: var(--text-menu);
-}
-
-.blog-search-none {
-    color: var(--text-menu);
-}
-
 /* ---------- Header-Suche (ersetzt eingebaute) ---------- */
 .search-item {
     position: relative;
@@ -552,137 +379,6 @@ html.theme-light body.is-garden #content h1#title {
     border-bottom-color: rgba(85, 103, 83, 0.40) !important;
 }
 
-/* ---------- Blog index (generated article list) ---------- */
-.blog-post {
-    padding: 1.2em 1.4em;
-    margin-bottom: 1.25em;
-    border: 1px solid var(--background-highlight);
-    border-radius: 10px;
-    background: var(--blog-card-bg);
-    transition: border-color 150ms ease, box-shadow 150ms ease;
-    cursor: pointer;
-}
-
-.blog-post:last-child {
-    margin-bottom: 0;
-}
-
-.blog-post:hover {
-    border-color: var(--text-link);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
-}
-
-#content .blog-post:first-of-type {
-    margin-top: 1.5em;
-}
-
-/* ---------- Blog post thumbnails (Bild links, Teaser rechts) ---------- */
-.blog-post-inner {
-    display: flex;
-    gap: 16px;
-    align-items: stretch;
-}
-
-.blog-thumb-link {
-    flex: 0 0 auto;
-    width: min(256px, 35%);
-    text-decoration: none;
-}
-
-.blog-thumb {
-    display: block;
-    width: 100%;
-    height: 100%;
-    max-height: 256px;
-    object-fit: cover;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-}
-
-.blog-post-body {
-    flex: 1;
-    min-width: 0;
-}
-
-.blog-post-title {
-    margin: 0 0 0.25em;
-}
-
-.blog-post-title a {
-    color: var(--text-heading);
-    text-decoration: none;
-    transition: color 150ms ease;
-}
-
-.blog-post-title a:hover {
-    color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-post-meta {
-    display: flex;
-    gap: 12px;
-    font-size: 0.85em;
-    color: var(--text-menu);
-    margin-bottom: 0.5em;
-}
-
-.blog-post-date {
-    font-variant-numeric: tabular-nums;
-    opacity: 0.85;
-}
-
-.blog-post-category {
-    background: var(--background-highlight);
-    border-radius: 8px;
-    padding: 1px 10px;
-    color: var(--text-heading);
-    font-weight: 600;
-}
-
-.blog-post-summary {
-    margin: 0 0 0.5em;
-    color: var(--text-primary);
-}
-
-.blog-post-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-}
-
-.tag {
-    font-size: 0.78em;
-    color: var(--text-link);
-    background: var(--background-secondary);
-    border: 1px solid var(--background-highlight);
-    border-radius: 8px;
-    padding: 1px 8px;
-}
-
-a.tag {
-    text-decoration: none;
-    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
-}
-
-a.tag:hover {
-    background: var(--background-highlight);
-    border-color: var(--text-link);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-
-/* ---------- Article meta (date/category on individual pages) ---------- */
-.article-meta {
-    display: flex;
-    gap: 12px;
-    font-size: 0.9em;
-    color: var(--text-menu);
-    margin-bottom: 1em;
-    padding-bottom: 1em;
-    border-bottom: 1px solid var(--background-highlight);
-}
-
 /* ---------- Headings (h2-h6) - Harbor header boxes ---------- */
 html.theme-dark {
     --header-h2-bg: rgba(231, 90, 80, 0.30);
@@ -800,16 +496,6 @@ html.theme-light #content code {
     border-color: #aeaa92;
 }
 
-/* ---------- Eingebettete Bilder: Radius wie Code-Blöcke (8px) ---------- */
-#content figure.image {
-    margin: 1.25em auto;
-}
-
-#content figure img,
-#content img:not(.blog-thumb) {
-    border-radius: 8px;
-}
-
 /* ---------- 3D model viewer (STL / STEP) ---------- */
 .model-viewer {
     position: relative;
@@ -1025,6 +711,7 @@ html.theme-light .model-viewer-progress-fill {
 .hljs-strong {
     font-weight: bold;
 }
+
 /* ---------- Light mode: Harbor light highlighter ---------- */
 html.theme-light .hljs,
 html.theme-light pre code.hljs {
@@ -1100,6 +787,7 @@ html.theme-light .hljs-tag {
 html.theme-light .hljs-meta .hljs-string {
     color: #4f6b00;
 }
+
 /* ---------- Admonitions (Trilium-style, gefüllt) ---------- */
 .admonition {
     --accent-color: var(--background-highlight);
@@ -1156,6 +844,7 @@ html.theme-light .admonition.warning { --admonition-bg: rgba(220, 129, 100, 0.20
 .admonition.important::before { content: "\ea7c"; }
 .admonition.caution::before { content: "\eac7"; }
 .admonition.warning::before { content: "\eac5"; }
+
 /* ---------- Tables (Harbor, theme-aware) ---------- */
 html.theme-dark {
     --table-header-bg: rgba(231, 90, 80, 0.20);
@@ -1248,59 +937,7 @@ html.theme-light {
 #content table thead th.col-hover {
     background-color: rgba(94, 129, 172, 0.18) !important;
 }
-/* ---------- Category subcategories ---------- */
-.blog-subcategories {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 0 0 1.25em;
-}
 
-.blog-subcategory {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    background: var(--background-secondary);
-    border: 1px solid var(--background-highlight);
-    border-radius: 8px;
-    padding: 4px 12px;
-    color: var(--text-heading);
-    text-decoration: none;
-    font-weight: 600;
-    transition: background-color 150ms ease, border-color 150ms ease;
-}
-
-.blog-subcategory i {
-    color: var(--text-link);
-}
-
-.blog-subcategory:hover {
-    background: var(--background-highlight);
-    border-color: var(--text-link);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-/* ---------- Digital Garden note table ---------- */
-.blog-garden-table {
-    width: 100%;
-}
-
-.blog-garden-table tbody td:first-child {
-    background: transparent !important;
-    font-weight: normal;
-}
-
-.note-type {
-    display: inline-block;
-    font-size: 0.8em;
-    padding: 2px 10px;
-    border-radius: 8px;
-    background: var(--background-highlight);
-    color: var(--text-heading);
-    font-weight: 600;
-    text-transform: capitalize;
-    white-space: nowrap;
-}
 /* ---------- Digital Garden rows: clickable + sage hover ---------- */
 .blog-garden-table tbody tr {
     cursor: pointer;
@@ -1422,6 +1059,7 @@ html.theme-light .note-state.state-unknown {
 html.theme-light .note-state.state-unknown i {
     color: #E8E3C3;
 }
+
 /* ---------- Code notes: always Harbordark like code boxes ---------- */
 #content.type-code pre {
     background-color: #2d2118 !important;
@@ -1447,69 +1085,7 @@ html.theme-light #content.type-code pre {
 html.theme-light #content.type-code code {
     color: #2D1A1D;
 }
-/* ---------- Code: line numbers + copy button ---------- */
-pre.code-processed {
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    line-height: 1.6;
-}
 
-pre.code-processed .code-wrap {
-    flex: 1;
-    min-width: 0;
-    overflow-x: auto;
-    border-radius: 8px;
-}
-
-pre.code-processed .code-wrap code {
-    display: block;
-    line-height: inherit;
-    padding: 0;
-    margin: 0;
-}
-
-pre.code-processed .code-lines {
-    flex-shrink: 0;
-    user-select: none;
-    text-align: right;
-    padding: 0 12px 0 0;
-    margin: 0 12px 0 0;
-    border-right: 1px solid var(--background-highlight);
-    color: var(--text-menu);
-    white-space: pre;
-    font-family: "JetBrains Mono", Consolas, monospace;
-    font-size: 1em;
-    line-height: inherit;
-}
-
-pre.code-processed .code-copy-btn,
-.mermaid-source pre .code-copy-btn {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    z-index: 2;
-    font-size: 0.75em;
-    padding: 2px 10px;
-    border-radius: 6px;
-    border: 1px solid var(--background-highlight);
-    background: var(--background-secondary);
-    color: var(--text-heading);
-    cursor: pointer;
-    opacity: 0.6;
-    transition: opacity 150ms ease;
-}
-
-pre.code-processed:hover .code-copy-btn,
-.mermaid-source pre:hover .code-copy-btn {
-    opacity: 1;
-}
-
-pre.code-processed .code-copy-btn:hover,
-.mermaid-source pre .code-copy-btn:hover {
-    border-color: var(--text-link);
-    opacity: 1;
-}
 /* ---------- highlight.js line numbers ---------- */
 #content .hljs-ln {
     border-collapse: collapse;
@@ -1568,29 +1144,6 @@ html.theme-light #content .hljs-ln tbody tr:hover td.col-hover {
     white-space: pre;
     vertical-align: top;
 }
-/* ---------- Scrollbars (Harbor) ---------- */
-::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--scrollbar-track);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb);
-    border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-hover);
-}
-
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-}
 
 /* ---------- Code boxes: scrollbars ---------- */
 pre,
@@ -1881,24 +1434,9 @@ html.theme-light .mermaid svg .cluster-label text {
     fill: #4f6b00 !important;
     color: #4f6b00 !important;
 }
+
 /* ---------- G-code / Zusatz-Scopes (name = G/M-Codes, attr = Parameter) ---------- */
 .hljs-name { color: #ffda92; }
 .hljs-attr { color: #cf90a2; }
 html.theme-light .hljs-name { color: #8e2d53; }
 html.theme-light .hljs-attr { color: #4f6b00; }
-/* ---------- Mobile: Menu always on top (above 3D viewer overlays) ---------- */
-@media (max-width: 48em) {
-    #left-pane,
-    #toc-pane {
-        z-index: 1000;
-    }
-    #header {
-        position: relative;
-        z-index: 1000;
-    }
-}
-/* ---------- Palette preview images: subtle frame so bars stay visible on any background ---------- */
-#content figure.image img.palette-img {
-    border: 1px solid var(--background-highlight);
-    border-radius: 6px;
-}
diff --git a/theme/blog_share_theme_gruvbox.css b/theme/blog_share_theme_gruvbox.css
index 6f515bc..41bbc06 100644
--- a/theme/blog_share_theme_gruvbox.css
+++ b/theme/blog_share_theme_gruvbox.css
@@ -1,3 +1,8 @@
+/*
+ * Gruvbox palette overrides (share) — variables + color-specific components.
+ * Layout/components live in blog_share_base.css (loaded alongside this file).
+ */
+
 /*
  * Gruvbox Share Theme for Richard's Blog (Trilium Public Share)
  * Palette: bg #282828 / #3c3836 / #504945 / #1d2021   fg #ebdbb2 / #fbf1c7
@@ -45,59 +50,6 @@ body {
     font-family: "Inter", "Montserrat", "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
 }
 
-/* ---------- Header: Logo durch Laptop-Emoji ---------- */
-#header-logo img {
-    display: none;
-}
-
-#header-logo::before {
-    content: "💻";
-    font-size: 1.5em;
-    line-height: 1;
-    margin-right: 8px;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-/* ---------- Buy Me a Coffee (original, lokal) ---------- */
-@font-face {
-    font-family: "Cookie";
-    src: url(/api/notes/__COOKIE_FONT_ID__/download) format("woff2");
-    font-weight: 400;
-    font-display: swap;
-}
-
-#bmc-links {
-    margin-top: auto;
-    padding: 8px 25px 4px;
-    background: var(--background-secondary);
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.bmc-link {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 4px 6px 4px 24px;
-    border-radius: 6px;
-    color: var(--text-heading);
-    text-decoration: none;
-    font-size: 0.9em;
-    transition: background-color 150ms ease, color 150ms ease;
-}
-
-.bmc-link:hover {
-    background: var(--background-highlight);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-
-.bmc-link .tn-icon {
-    color: var(--text-link);
-}
-
 /* ---------- Menu: wie Footer-Links gestalten ---------- */
 #menu a {
     color: var(--text-heading);
@@ -192,131 +144,6 @@ body {
     display: inline-block;
 }
 
-/* ---------- Reading time ---------- */
-.reading-time {
-    font-size: 0.8em;
-    color: var(--text-menu);
-    margin: -0.9em 0 1.25em;
-}
-
-/* ---------- Blog pagination ---------- */
-.blog-pagination {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    margin: 1.5em 0 0;
-    padding-top: 1em;
-    border-top: 1px solid var(--background-highlight);
-}
-
-.blog-pagination .blog-page-num {
-    font-size: 0.85em;
-    color: var(--text-menu);
-}
-
-/* ---------- Share footer navigation (built-in prev/next) ausblenden ---------- */
-#content-footer .navigation {
-    display: none;
-}
-
-/* ---------- Prev/Next ---------- */
-.blog-prevnext {
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-    margin: 1.5em 0 0;
-    padding-top: 1em;
-    border-top: 1px solid var(--background-highlight);
-}
-
-.blog-pn {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    max-width: 45%;
-    color: var(--text-heading);
-    text-decoration: none;
-    transition: color 150ms ease;
-}
-
-.blog-pn.next {
-    margin-left: auto;
-    align-items: flex-end;
-    text-align: right;
-}
-
-.blog-pn-label {
-    font-size: 0.72em;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--text-menu);
-}
-
-.blog-pn:hover {
-    color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-pn.empty {
-    display: none;
-}
-
-/* ---------- Search ---------- */
-.blog-search {
-    margin: 0.5em 0 1em;
-}
-
-.blog-search-input {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10px 14px;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-    background: var(--background-secondary);
-    color: var(--text-heading);
-    font-size: 1em;
-}
-
-.blog-search-input:focus {
-    outline: none;
-    border-color: var(--text-link);
-}
-
-.blog-search-list {
-    list-style: none;
-    padding: 0;
-    margin: 1em 0 0;
-}
-
-.blog-search-hit {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 8px 12px;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-    background: var(--blog-card-bg);
-    color: var(--text-heading);
-    text-decoration: none;
-    margin-bottom: 8px;
-    transition: border-color 150ms ease;
-}
-
-.blog-search-hit:hover {
-    border-color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-search-path {
-    font-size: 0.8em;
-    color: var(--text-menu);
-}
-
-.blog-search-none {
-    color: var(--text-menu);
-}
-
 /* ---------- Header-Suche (ersetzt eingebaute) ---------- */
 .search-item {
     position: relative;
@@ -552,137 +379,6 @@ html.theme-light body.is-garden #content h1#title {
     border-bottom-color: rgba(184, 187, 38, 0.45) !important;
 }
 
-/* ---------- Blog index (generated article list) ---------- */
-.blog-post {
-    padding: 1.2em 1.4em;
-    margin-bottom: 1.25em;
-    border: 1px solid var(--background-highlight);
-    border-radius: 10px;
-    background: var(--blog-card-bg);
-    transition: border-color 150ms ease, box-shadow 150ms ease;
-    cursor: pointer;
-}
-
-.blog-post:last-child {
-    margin-bottom: 0;
-}
-
-.blog-post:hover {
-    border-color: var(--text-link);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
-}
-
-#content .blog-post:first-of-type {
-    margin-top: 1.5em;
-}
-
-/* ---------- Blog post thumbnails (Bild links, Teaser rechts) ---------- */
-.blog-post-inner {
-    display: flex;
-    gap: 16px;
-    align-items: stretch;
-}
-
-.blog-thumb-link {
-    flex: 0 0 auto;
-    width: min(256px, 35%);
-    text-decoration: none;
-}
-
-.blog-thumb {
-    display: block;
-    width: 100%;
-    height: 100%;
-    max-height: 256px;
-    object-fit: cover;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-}
-
-.blog-post-body {
-    flex: 1;
-    min-width: 0;
-}
-
-.blog-post-title {
-    margin: 0 0 0.25em;
-}
-
-.blog-post-title a {
-    color: var(--text-heading);
-    text-decoration: none;
-    transition: color 150ms ease;
-}
-
-.blog-post-title a:hover {
-    color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-post-meta {
-    display: flex;
-    gap: 12px;
-    font-size: 0.85em;
-    color: var(--text-menu);
-    margin-bottom: 0.5em;
-}
-
-.blog-post-date {
-    font-variant-numeric: tabular-nums;
-    opacity: 0.85;
-}
-
-.blog-post-category {
-    background: var(--background-highlight);
-    border-radius: 8px;
-    padding: 1px 10px;
-    color: var(--text-heading);
-    font-weight: 600;
-}
-
-.blog-post-summary {
-    margin: 0 0 0.5em;
-    color: var(--text-primary);
-}
-
-.blog-post-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-}
-
-.tag {
-    font-size: 0.78em;
-    color: var(--text-link);
-    background: var(--background-secondary);
-    border: 1px solid var(--background-highlight);
-    border-radius: 8px;
-    padding: 1px 8px;
-}
-
-a.tag {
-    text-decoration: none;
-    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
-}
-
-a.tag:hover {
-    background: var(--background-highlight);
-    border-color: var(--text-link);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-
-/* ---------- Article meta (date/category on individual pages) ---------- */
-.article-meta {
-    display: flex;
-    gap: 12px;
-    font-size: 0.9em;
-    color: var(--text-menu);
-    margin-bottom: 1em;
-    padding-bottom: 1em;
-    border-bottom: 1px solid var(--background-highlight);
-}
-
 /* ---------- Headings (h2-h6) - Gruvbox header boxes ---------- */
 html.theme-dark {
     --header-h2-bg: rgba(131, 165, 152, 0.35);
@@ -800,16 +496,6 @@ html.theme-light #content code {
     border-color: #bdae93;
 }
 
-/* ---------- Eingebettete Bilder: Radius wie Code-Blöcke (8px) ---------- */
-#content figure.image {
-    margin: 1.25em auto;
-}
-
-#content figure img,
-#content img:not(.blog-thumb) {
-    border-radius: 8px;
-}
-
 /* ---------- 3D model viewer (STL / STEP) ---------- */
 .model-viewer {
     position: relative;
@@ -1025,6 +711,7 @@ html.theme-light .model-viewer-progress-fill {
 .hljs-strong {
     font-weight: bold;
 }
+
 /* ---------- Light mode: Gruvbox Light highlighter ---------- */
 html.theme-light .hljs,
 html.theme-light pre code.hljs {
@@ -1100,6 +787,7 @@ html.theme-light .hljs-tag {
 html.theme-light .hljs-meta .hljs-string {
     color: #79740e;
 }
+
 /* ---------- Admonitions (Trilium-style, gefüllt) ---------- */
 .admonition {
     --accent-color: var(--background-highlight);
@@ -1156,6 +844,7 @@ html.theme-light .admonition.warning { --admonition-bg: rgba(226, 170, 3, 0.20);
 .admonition.important::before { content: "\ea7c"; }
 .admonition.caution::before { content: "\eac7"; }
 .admonition.warning::before { content: "\eac5"; }
+
 /* ---------- Tables (Gruvbox, theme-aware) ---------- */
 html.theme-dark {
     --table-header-bg: rgba(131, 165, 152, 0.30);
@@ -1248,59 +937,7 @@ html.theme-light {
 #content table thead th.col-hover {
     background-color: rgba(254, 128, 25, 0.14) !important;
 }
-/* ---------- Category subcategories ---------- */
-.blog-subcategories {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 0 0 1.25em;
-}
 
-.blog-subcategory {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    background: var(--background-secondary);
-    border: 1px solid var(--background-highlight);
-    border-radius: 8px;
-    padding: 4px 12px;
-    color: var(--text-heading);
-    text-decoration: none;
-    font-weight: 600;
-    transition: background-color 150ms ease, border-color 150ms ease;
-}
-
-.blog-subcategory i {
-    color: var(--text-link);
-}
-
-.blog-subcategory:hover {
-    background: var(--background-highlight);
-    border-color: var(--text-link);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-/* ---------- Digital Garden note table ---------- */
-.blog-garden-table {
-    width: 100%;
-}
-
-.blog-garden-table tbody td:first-child {
-    background: transparent !important;
-    font-weight: normal;
-}
-
-.note-type {
-    display: inline-block;
-    font-size: 0.8em;
-    padding: 2px 10px;
-    border-radius: 8px;
-    background: var(--background-highlight);
-    color: var(--text-heading);
-    font-weight: 600;
-    text-transform: capitalize;
-    white-space: nowrap;
-}
 /* ---------- Digital Garden rows: clickable + green hover ---------- */
 .blog-garden-table tbody tr {
     cursor: pointer;
@@ -1422,6 +1059,7 @@ html.theme-light .note-state.state-unknown {
 html.theme-light .note-state.state-unknown i {
     color: #f9f5d7;
 }
+
 /* ---------- Code notes: always Gruvbox dark like code boxes ---------- */
 #content.type-code pre {
     background-color: #282828 !important;
@@ -1447,69 +1085,7 @@ html.theme-light #content.type-code pre {
 html.theme-light #content.type-code code {
     color: #3c3836;
 }
-/* ---------- Code: line numbers + copy button ---------- */
-pre.code-processed {
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    line-height: 1.6;
-}
 
-pre.code-processed .code-wrap {
-    flex: 1;
-    min-width: 0;
-    overflow-x: auto;
-    border-radius: 8px;
-}
-
-pre.code-processed .code-wrap code {
-    display: block;
-    line-height: inherit;
-    padding: 0;
-    margin: 0;
-}
-
-pre.code-processed .code-lines {
-    flex-shrink: 0;
-    user-select: none;
-    text-align: right;
-    padding: 0 12px 0 0;
-    margin: 0 12px 0 0;
-    border-right: 1px solid var(--background-highlight);
-    color: var(--text-menu);
-    white-space: pre;
-    font-family: "JetBrains Mono", Consolas, monospace;
-    font-size: 1em;
-    line-height: inherit;
-}
-
-pre.code-processed .code-copy-btn,
-.mermaid-source pre .code-copy-btn {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    z-index: 2;
-    font-size: 0.75em;
-    padding: 2px 10px;
-    border-radius: 6px;
-    border: 1px solid var(--background-highlight);
-    background: var(--background-secondary);
-    color: var(--text-heading);
-    cursor: pointer;
-    opacity: 0.6;
-    transition: opacity 150ms ease;
-}
-
-pre.code-processed:hover .code-copy-btn,
-.mermaid-source pre:hover .code-copy-btn {
-    opacity: 1;
-}
-
-pre.code-processed .code-copy-btn:hover,
-.mermaid-source pre .code-copy-btn:hover {
-    border-color: var(--text-link);
-    opacity: 1;
-}
 /* ---------- highlight.js line numbers ---------- */
 #content .hljs-ln {
     border-collapse: collapse;
@@ -1568,29 +1144,6 @@ html.theme-light #content .hljs-ln tbody tr:hover td.col-hover {
     white-space: pre;
     vertical-align: top;
 }
-/* ---------- Scrollbars (Gruvbox) ---------- */
-::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--scrollbar-track);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb);
-    border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-hover);
-}
-
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-}
 
 /* ---------- Code boxes: scrollbars ---------- */
 pre,
@@ -1881,24 +1434,9 @@ html.theme-light .mermaid svg .cluster-label text {
     fill: #504945 !important;
     color: #504945 !important;
 }
+
 /* ---------- G-code / Zusatz-Scopes (name = G/M-Codes, attr = Parameter) ---------- */
 .hljs-name { color: #fabd2f; }
 .hljs-attr { color: #83a598; }
 html.theme-light .hljs-name { color: #076678; }
 html.theme-light .hljs-attr { color: #427b58; }
-/* ---------- Mobile: Menu always on top (above 3D viewer overlays) ---------- */
-@media (max-width: 48em) {
-    #left-pane,
-    #toc-pane {
-        z-index: 1000;
-    }
-    #header {
-        position: relative;
-        z-index: 1000;
-    }
-}
-/* ---------- Palette preview images: subtle frame so bars stay visible on any background ---------- */
-#content figure.image img.palette-img {
-    border: 1px solid var(--background-highlight);
-    border-radius: 6px;
-}
diff --git a/theme/blog_share_theme_harbor.css b/theme/blog_share_theme_harbor.css
index 8cb696b..904cc94 100644
--- a/theme/blog_share_theme_harbor.css
+++ b/theme/blog_share_theme_harbor.css
@@ -1,3 +1,8 @@
+/*
+ * Harbor palette overrides (share) — variables + color-specific components.
+ * Layout/components live in blog_share_base.css (loaded alongside this file).
+ */
+
 /*
  * Harbor Share Theme for Richard's Blog (Trilium Public Share)
  * Light:  Harbor  (paper #dfe4c4 / ink #1c2d28, accent #5e81ac)
@@ -45,59 +50,6 @@ body {
     font-family: "Inter", "Montserrat", "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
 }
 
-/* ---------- Header: Logo durch Laptop-Emoji ---------- */
-#header-logo img {
-    display: none;
-}
-
-#header-logo::before {
-    content: "💻";
-    font-size: 1.5em;
-    line-height: 1;
-    margin-right: 8px;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-/* ---------- Buy Me a Coffee (original, lokal) ---------- */
-@font-face {
-    font-family: "Cookie";
-    src: url(/api/notes/__COOKIE_FONT_ID__/download) format("woff2");
-    font-weight: 400;
-    font-display: swap;
-}
-
-#bmc-links {
-    margin-top: auto;
-    padding: 8px 25px 4px;
-    background: var(--background-secondary);
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.bmc-link {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 4px 6px 4px 24px;
-    border-radius: 6px;
-    color: var(--text-heading);
-    text-decoration: none;
-    font-size: 0.9em;
-    transition: background-color 150ms ease, color 150ms ease;
-}
-
-.bmc-link:hover {
-    background: var(--background-highlight);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-
-.bmc-link .tn-icon {
-    color: var(--text-link);
-}
-
 /* ---------- Menu: wie Footer-Links gestalten ---------- */
 #menu a {
     color: var(--text-heading);
@@ -192,131 +144,6 @@ body {
     display: inline-block;
 }
 
-/* ---------- Reading time ---------- */
-.reading-time {
-    font-size: 0.8em;
-    color: var(--text-menu);
-    margin: -0.9em 0 1.25em;
-}
-
-/* ---------- Blog pagination ---------- */
-.blog-pagination {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    margin: 1.5em 0 0;
-    padding-top: 1em;
-    border-top: 1px solid var(--background-highlight);
-}
-
-.blog-pagination .blog-page-num {
-    font-size: 0.85em;
-    color: var(--text-menu);
-}
-
-/* ---------- Share footer navigation (built-in prev/next) ausblenden ---------- */
-#content-footer .navigation {
-    display: none;
-}
-
-/* ---------- Prev/Next ---------- */
-.blog-prevnext {
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-    margin: 1.5em 0 0;
-    padding-top: 1em;
-    border-top: 1px solid var(--background-highlight);
-}
-
-.blog-pn {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    max-width: 45%;
-    color: var(--text-heading);
-    text-decoration: none;
-    transition: color 150ms ease;
-}
-
-.blog-pn.next {
-    margin-left: auto;
-    align-items: flex-end;
-    text-align: right;
-}
-
-.blog-pn-label {
-    font-size: 0.72em;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--text-menu);
-}
-
-.blog-pn:hover {
-    color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-pn.empty {
-    display: none;
-}
-
-/* ---------- Search ---------- */
-.blog-search {
-    margin: 0.5em 0 1em;
-}
-
-.blog-search-input {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10px 14px;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-    background: var(--background-secondary);
-    color: var(--text-heading);
-    font-size: 1em;
-}
-
-.blog-search-input:focus {
-    outline: none;
-    border-color: var(--text-link);
-}
-
-.blog-search-list {
-    list-style: none;
-    padding: 0;
-    margin: 1em 0 0;
-}
-
-.blog-search-hit {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 8px 12px;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-    background: var(--blog-card-bg);
-    color: var(--text-heading);
-    text-decoration: none;
-    margin-bottom: 8px;
-    transition: border-color 150ms ease;
-}
-
-.blog-search-hit:hover {
-    border-color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-search-path {
-    font-size: 0.8em;
-    color: var(--text-menu);
-}
-
-.blog-search-none {
-    color: var(--text-menu);
-}
-
 /* ---------- Header-Suche (ersetzt eingebaute) ---------- */
 .search-item {
     position: relative;
@@ -552,137 +379,6 @@ html.theme-light body.is-garden #content h1#title {
     border-bottom-color: rgba(85, 103, 83, 0.40) !important;
 }
 
-/* ---------- Blog index (generated article list) ---------- */
-.blog-post {
-    padding: 1.2em 1.4em;
-    margin-bottom: 1.25em;
-    border: 1px solid var(--background-highlight);
-    border-radius: 10px;
-    background: var(--blog-card-bg);
-    transition: border-color 150ms ease, box-shadow 150ms ease;
-    cursor: pointer;
-}
-
-.blog-post:last-child {
-    margin-bottom: 0;
-}
-
-.blog-post:hover {
-    border-color: var(--text-link);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
-}
-
-#content .blog-post:first-of-type {
-    margin-top: 1.5em;
-}
-
-/* ---------- Blog post thumbnails (Bild links, Teaser rechts) ---------- */
-.blog-post-inner {
-    display: flex;
-    gap: 16px;
-    align-items: stretch;
-}
-
-.blog-thumb-link {
-    flex: 0 0 auto;
-    width: min(256px, 35%);
-    text-decoration: none;
-}
-
-.blog-thumb {
-    display: block;
-    width: 100%;
-    height: 100%;
-    max-height: 256px;
-    object-fit: cover;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-}
-
-.blog-post-body {
-    flex: 1;
-    min-width: 0;
-}
-
-.blog-post-title {
-    margin: 0 0 0.25em;
-}
-
-.blog-post-title a {
-    color: var(--text-heading);
-    text-decoration: none;
-    transition: color 150ms ease;
-}
-
-.blog-post-title a:hover {
-    color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-post-meta {
-    display: flex;
-    gap: 12px;
-    font-size: 0.85em;
-    color: var(--text-menu);
-    margin-bottom: 0.5em;
-}
-
-.blog-post-date {
-    font-variant-numeric: tabular-nums;
-    opacity: 0.85;
-}
-
-.blog-post-category {
-    background: var(--background-highlight);
-    border-radius: 8px;
-    padding: 1px 10px;
-    color: var(--text-heading);
-    font-weight: 600;
-}
-
-.blog-post-summary {
-    margin: 0 0 0.5em;
-    color: var(--text-primary);
-}
-
-.blog-post-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-}
-
-.tag {
-    font-size: 0.78em;
-    color: var(--text-link);
-    background: var(--background-secondary);
-    border: 1px solid var(--background-highlight);
-    border-radius: 8px;
-    padding: 1px 8px;
-}
-
-a.tag {
-    text-decoration: none;
-    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
-}
-
-a.tag:hover {
-    background: var(--background-highlight);
-    border-color: var(--text-link);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-
-/* ---------- Article meta (date/category on individual pages) ---------- */
-.article-meta {
-    display: flex;
-    gap: 12px;
-    font-size: 0.9em;
-    color: var(--text-menu);
-    margin-bottom: 1em;
-    padding-bottom: 1em;
-    border-bottom: 1px solid var(--background-highlight);
-}
-
 /* ---------- Headings (h2-h6) - Harbor header boxes ---------- */
 html.theme-dark {
     --header-h2-bg: rgba(231, 90, 80, 0.30);
@@ -800,16 +496,6 @@ html.theme-light #content code {
     border-color: #b3ba96;
 }
 
-/* ---------- Eingebettete Bilder: Radius wie Code-Blöcke (8px) ---------- */
-#content figure.image {
-    margin: 1.25em auto;
-}
-
-#content figure img,
-#content img:not(.blog-thumb) {
-    border-radius: 8px;
-}
-
 /* ---------- 3D model viewer (STL / STEP) ---------- */
 .model-viewer {
     position: relative;
@@ -1025,6 +711,7 @@ html.theme-light .model-viewer-progress-fill {
 .hljs-strong {
     font-weight: bold;
 }
+
 /* ---------- Light mode: Harbor light highlighter ---------- */
 html.theme-light .hljs,
 html.theme-light pre code.hljs {
@@ -1100,6 +787,7 @@ html.theme-light .hljs-tag {
 html.theme-light .hljs-meta .hljs-string {
     color: #556753;
 }
+
 /* ---------- Admonitions (Trilium-style, gefüllt) ---------- */
 .admonition {
     --accent-color: var(--background-highlight);
@@ -1156,6 +844,7 @@ html.theme-light .admonition.warning { --admonition-bg: rgba(220, 129, 100, 0.20
 .admonition.important::before { content: "\ea7c"; }
 .admonition.caution::before { content: "\eac7"; }
 .admonition.warning::before { content: "\eac5"; }
+
 /* ---------- Tables (Harbor, theme-aware) ---------- */
 html.theme-dark {
     --table-header-bg: rgba(231, 90, 80, 0.20);
@@ -1248,59 +937,7 @@ html.theme-light {
 #content table thead th.col-hover {
     background-color: rgba(94, 129, 172, 0.18) !important;
 }
-/* ---------- Category subcategories ---------- */
-.blog-subcategories {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 0 0 1.25em;
-}
 
-.blog-subcategory {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    background: var(--background-secondary);
-    border: 1px solid var(--background-highlight);
-    border-radius: 8px;
-    padding: 4px 12px;
-    color: var(--text-heading);
-    text-decoration: none;
-    font-weight: 600;
-    transition: background-color 150ms ease, border-color 150ms ease;
-}
-
-.blog-subcategory i {
-    color: var(--text-link);
-}
-
-.blog-subcategory:hover {
-    background: var(--background-highlight);
-    border-color: var(--text-link);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-/* ---------- Digital Garden note table ---------- */
-.blog-garden-table {
-    width: 100%;
-}
-
-.blog-garden-table tbody td:first-child {
-    background: transparent !important;
-    font-weight: normal;
-}
-
-.note-type {
-    display: inline-block;
-    font-size: 0.8em;
-    padding: 2px 10px;
-    border-radius: 8px;
-    background: var(--background-highlight);
-    color: var(--text-heading);
-    font-weight: 600;
-    text-transform: capitalize;
-    white-space: nowrap;
-}
 /* ---------- Digital Garden rows: clickable + sage hover ---------- */
 .blog-garden-table tbody tr {
     cursor: pointer;
@@ -1422,6 +1059,7 @@ html.theme-light .note-state.state-unknown {
 html.theme-light .note-state.state-unknown i {
     color: #dfe4c4;
 }
+
 /* ---------- Code notes: always Harbordark like code boxes ---------- */
 #content.type-code pre {
     background-color: #222222 !important;
@@ -1447,69 +1085,7 @@ html.theme-light #content.type-code pre {
 html.theme-light #content.type-code code {
     color: #1c2d28;
 }
-/* ---------- Code: line numbers + copy button ---------- */
-pre.code-processed {
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    line-height: 1.6;
-}
 
-pre.code-processed .code-wrap {
-    flex: 1;
-    min-width: 0;
-    overflow-x: auto;
-    border-radius: 8px;
-}
-
-pre.code-processed .code-wrap code {
-    display: block;
-    line-height: inherit;
-    padding: 0;
-    margin: 0;
-}
-
-pre.code-processed .code-lines {
-    flex-shrink: 0;
-    user-select: none;
-    text-align: right;
-    padding: 0 12px 0 0;
-    margin: 0 12px 0 0;
-    border-right: 1px solid var(--background-highlight);
-    color: var(--text-menu);
-    white-space: pre;
-    font-family: "JetBrains Mono", Consolas, monospace;
-    font-size: 1em;
-    line-height: inherit;
-}
-
-pre.code-processed .code-copy-btn,
-.mermaid-source pre .code-copy-btn {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    z-index: 2;
-    font-size: 0.75em;
-    padding: 2px 10px;
-    border-radius: 6px;
-    border: 1px solid var(--background-highlight);
-    background: var(--background-secondary);
-    color: var(--text-heading);
-    cursor: pointer;
-    opacity: 0.6;
-    transition: opacity 150ms ease;
-}
-
-pre.code-processed:hover .code-copy-btn,
-.mermaid-source pre:hover .code-copy-btn {
-    opacity: 1;
-}
-
-pre.code-processed .code-copy-btn:hover,
-.mermaid-source pre .code-copy-btn:hover {
-    border-color: var(--text-link);
-    opacity: 1;
-}
 /* ---------- highlight.js line numbers ---------- */
 #content .hljs-ln {
     border-collapse: collapse;
@@ -1568,29 +1144,6 @@ html.theme-light #content .hljs-ln tbody tr:hover td.col-hover {
     white-space: pre;
     vertical-align: top;
 }
-/* ---------- Scrollbars (Harbor) ---------- */
-::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--scrollbar-track);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb);
-    border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-hover);
-}
-
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-}
 
 /* ---------- Code boxes: scrollbars ---------- */
 pre,
@@ -1881,24 +1434,9 @@ html.theme-light .mermaid svg .cluster-label text {
     fill: #556753 !important;
     color: #556753 !important;
 }
+
 /* ---------- G-code / Zusatz-Scopes (name = G/M-Codes, attr = Parameter) ---------- */
 .hljs-name { color: #E1CE98; }
 .hljs-attr { color: #77838a; }
 html.theme-light .hljs-name { color: #4c6c94; }
 html.theme-light .hljs-attr { color: #556753; }
-/* ---------- Mobile: Menu always on top (above 3D viewer overlays) ---------- */
-@media (max-width: 48em) {
-    #left-pane,
-    #toc-pane {
-        z-index: 1000;
-    }
-    #header {
-        position: relative;
-        z-index: 1000;
-    }
-}
-/* ---------- Palette preview images: subtle frame so bars stay visible on any background ---------- */
-#content figure.image img.palette-img {
-    border: 1px solid var(--background-highlight);
-    border-radius: 6px;
-}
diff --git a/theme/blog_share_theme_solarized.css b/theme/blog_share_theme_solarized.css
index 0f528dc..6c869c5 100644
--- a/theme/blog_share_theme_solarized.css
+++ b/theme/blog_share_theme_solarized.css
@@ -1,3 +1,8 @@
+/*
+ * Solarized palette overrides (share) — variables + color-specific components.
+ * Layout/components live in blog_share_base.css (loaded alongside this file).
+ */
+
 /*
  * Solarized Share Theme (light/dark)
  * Solarized by Ethan Schoonover (https://ethanschoonover.com/solarized/, MIT)
@@ -50,59 +55,6 @@ body {
     font-family: "Inter", "Montserrat", "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
 }
 
-/* ---------- Header: Logo durch Laptop-Emoji ---------- */
-#header-logo img {
-    display: none;
-}
-
-#header-logo::before {
-    content: "💻";
-    font-size: 1.5em;
-    line-height: 1;
-    margin-right: 8px;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-/* ---------- Buy Me a Coffee (original, lokal) ---------- */
-@font-face {
-    font-family: "Cookie";
-    src: url(/api/notes/__COOKIE_FONT_ID__/download) format("woff2");
-    font-weight: 400;
-    font-display: swap;
-}
-
-#bmc-links {
-    margin-top: auto;
-    padding: 8px 25px 4px;
-    background: var(--background-secondary);
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.bmc-link {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 4px 6px 4px 24px;
-    border-radius: 6px;
-    color: var(--text-heading);
-    text-decoration: none;
-    font-size: 0.9em;
-    transition: background-color 150ms ease, color 150ms ease;
-}
-
-.bmc-link:hover {
-    background: var(--background-highlight);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-
-.bmc-link .tn-icon {
-    color: var(--text-link);
-}
-
 /* ---------- Menu: wie Footer-Links gestalten ---------- */
 #menu a {
     color: var(--text-heading);
@@ -197,131 +149,6 @@ body {
     display: inline-block;
 }
 
-/* ---------- Reading time ---------- */
-.reading-time {
-    font-size: 0.8em;
-    color: var(--text-menu);
-    margin: -0.9em 0 1.25em;
-}
-
-/* ---------- Blog pagination ---------- */
-.blog-pagination {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    margin: 1.5em 0 0;
-    padding-top: 1em;
-    border-top: 1px solid var(--background-highlight);
-}
-
-.blog-pagination .blog-page-num {
-    font-size: 0.85em;
-    color: var(--text-menu);
-}
-
-/* ---------- Share footer navigation (built-in prev/next) ausblenden ---------- */
-#content-footer .navigation {
-    display: none;
-}
-
-/* ---------- Prev/Next ---------- */
-.blog-prevnext {
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-    margin: 1.5em 0 0;
-    padding-top: 1em;
-    border-top: 1px solid var(--background-highlight);
-}
-
-.blog-pn {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    max-width: 45%;
-    color: var(--text-heading);
-    text-decoration: none;
-    transition: color 150ms ease;
-}
-
-.blog-pn.next {
-    margin-left: auto;
-    align-items: flex-end;
-    text-align: right;
-}
-
-.blog-pn-label {
-    font-size: 0.72em;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--text-menu);
-}
-
-.blog-pn:hover {
-    color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-pn.empty {
-    display: none;
-}
-
-/* ---------- Search ---------- */
-.blog-search {
-    margin: 0.5em 0 1em;
-}
-
-.blog-search-input {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10px 14px;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-    background: var(--background-secondary);
-    color: var(--text-heading);
-    font-size: 1em;
-}
-
-.blog-search-input:focus {
-    outline: none;
-    border-color: var(--text-link);
-}
-
-.blog-search-list {
-    list-style: none;
-    padding: 0;
-    margin: 1em 0 0;
-}
-
-.blog-search-hit {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 8px 12px;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-    background: var(--blog-card-bg);
-    color: var(--text-heading);
-    text-decoration: none;
-    margin-bottom: 8px;
-    transition: border-color 150ms ease;
-}
-
-.blog-search-hit:hover {
-    border-color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-search-path {
-    font-size: 0.8em;
-    color: var(--text-menu);
-}
-
-.blog-search-none {
-    color: var(--text-menu);
-}
-
 /* ---------- Header-Suche (ersetzt eingebaute) ---------- */
 .search-item {
     position: relative;
@@ -557,137 +384,6 @@ html.theme-light body.is-garden #content h1#title {
     border-bottom-color: rgba(88, 110, 117, 0.40) !important;
 }
 
-/* ---------- Blog index (generated article list) ---------- */
-.blog-post {
-    padding: 1.2em 1.4em;
-    margin-bottom: 1.25em;
-    border: 1px solid var(--background-highlight);
-    border-radius: 10px;
-    background: var(--blog-card-bg);
-    transition: border-color 150ms ease, box-shadow 150ms ease;
-    cursor: pointer;
-}
-
-.blog-post:last-child {
-    margin-bottom: 0;
-}
-
-.blog-post:hover {
-    border-color: var(--text-link);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
-}
-
-#content .blog-post:first-of-type {
-    margin-top: 1.5em;
-}
-
-/* ---------- Blog post thumbnails (Bild links, Teaser rechts) ---------- */
-.blog-post-inner {
-    display: flex;
-    gap: 16px;
-    align-items: stretch;
-}
-
-.blog-thumb-link {
-    flex: 0 0 auto;
-    width: min(256px, 35%);
-    text-decoration: none;
-}
-
-.blog-thumb {
-    display: block;
-    width: 100%;
-    height: 100%;
-    max-height: 256px;
-    object-fit: cover;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-}
-
-.blog-post-body {
-    flex: 1;
-    min-width: 0;
-}
-
-.blog-post-title {
-    margin: 0 0 0.25em;
-}
-
-.blog-post-title a {
-    color: var(--text-heading);
-    text-decoration: none;
-    transition: color 150ms ease;
-}
-
-.blog-post-title a:hover {
-    color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-post-meta {
-    display: flex;
-    gap: 12px;
-    font-size: 0.85em;
-    color: var(--text-menu);
-    margin-bottom: 0.5em;
-}
-
-.blog-post-date {
-    font-variant-numeric: tabular-nums;
-    opacity: 0.85;
-}
-
-.blog-post-category {
-    background: var(--background-highlight);
-    border-radius: 8px;
-    padding: 1px 10px;
-    color: var(--text-heading);
-    font-weight: 600;
-}
-
-.blog-post-summary {
-    margin: 0 0 0.5em;
-    color: var(--text-primary);
-}
-
-.blog-post-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-}
-
-.tag {
-    font-size: 0.78em;
-    color: var(--text-link);
-    background: var(--background-secondary);
-    border: 1px solid var(--background-highlight);
-    border-radius: 8px;
-    padding: 1px 8px;
-}
-
-a.tag {
-    text-decoration: none;
-    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
-}
-
-a.tag:hover {
-    background: var(--background-highlight);
-    border-color: var(--text-link);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-
-/* ---------- Article meta (date/category on individual pages) ---------- */
-.article-meta {
-    display: flex;
-    gap: 12px;
-    font-size: 0.9em;
-    color: var(--text-menu);
-    margin-bottom: 1em;
-    padding-bottom: 1em;
-    border-bottom: 1px solid var(--background-highlight);
-}
-
 /* ---------- Headings (h2-h6) - Harbor header boxes ---------- */
 html.theme-dark {
     --header-h2-bg: rgba(38, 107, 210, 0.30);
@@ -805,16 +501,6 @@ html.theme-light #content code {
     border-color: #93a1a1;
 }
 
-/* ---------- Eingebettete Bilder: Radius wie Code-Blöcke (8px) ---------- */
-#content figure.image {
-    margin: 1.25em auto;
-}
-
-#content figure img,
-#content img:not(.blog-thumb) {
-    border-radius: 8px;
-}
-
 /* ---------- 3D model viewer (STL / STEP) ---------- */
 .model-viewer {
     position: relative;
@@ -1030,6 +716,7 @@ html.theme-light .model-viewer-progress-fill {
 .hljs-strong {
     font-weight: bold;
 }
+
 /* ---------- Light mode: Harbor light highlighter ---------- */
 html.theme-light .hljs,
 html.theme-light pre code.hljs {
@@ -1105,6 +792,7 @@ html.theme-light .hljs-tag {
 html.theme-light .hljs-meta .hljs-string {
     color: #586e75;
 }
+
 /* ---------- Admonitions (Trilium-style, gefüllt) ---------- */
 .admonition {
     --accent-color: var(--background-highlight);
@@ -1161,6 +849,7 @@ html.theme-light .admonition.warning { --admonition-bg: rgba(203, 75, 22, 0.20);
 .admonition.important::before { content: "\ea7c"; }
 .admonition.caution::before { content: "\eac7"; }
 .admonition.warning::before { content: "\eac5"; }
+
 /* ---------- Tables (Harbor, theme-aware) ---------- */
 html.theme-dark {
     --table-header-bg: rgba(38, 107, 210, 0.20);
@@ -1253,59 +942,7 @@ html.theme-light {
 #content table thead th.col-hover {
     background-color: rgba(38, 107, 210, 0.18) !important;
 }
-/* ---------- Category subcategories ---------- */
-.blog-subcategories {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 0 0 1.25em;
-}
 
-.blog-subcategory {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    background: var(--background-secondary);
-    border: 1px solid var(--background-highlight);
-    border-radius: 8px;
-    padding: 4px 12px;
-    color: var(--text-heading);
-    text-decoration: none;
-    font-weight: 600;
-    transition: background-color 150ms ease, border-color 150ms ease;
-}
-
-.blog-subcategory i {
-    color: var(--text-link);
-}
-
-.blog-subcategory:hover {
-    background: var(--background-highlight);
-    border-color: var(--text-link);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-/* ---------- Digital Garden note table ---------- */
-.blog-garden-table {
-    width: 100%;
-}
-
-.blog-garden-table tbody td:first-child {
-    background: transparent !important;
-    font-weight: normal;
-}
-
-.note-type {
-    display: inline-block;
-    font-size: 0.8em;
-    padding: 2px 10px;
-    border-radius: 8px;
-    background: var(--background-highlight);
-    color: var(--text-heading);
-    font-weight: 600;
-    text-transform: capitalize;
-    white-space: nowrap;
-}
 /* ---------- Digital Garden rows: clickable + sage hover ---------- */
 .blog-garden-table tbody tr {
     cursor: pointer;
@@ -1427,6 +1064,7 @@ html.theme-light .note-state.state-unknown {
 html.theme-light .note-state.state-unknown i {
     color: #fdf6e3;
 }
+
 /* ---------- Code notes: always Harbordark like code boxes ---------- */
 #content.type-code pre {
     background-color: #073642 !important;
@@ -1452,69 +1090,7 @@ html.theme-light #content.type-code pre {
 html.theme-light #content.type-code code {
     color: #657b83;
 }
-/* ---------- Code: line numbers + copy button ---------- */
-pre.code-processed {
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    line-height: 1.6;
-}
 
-pre.code-processed .code-wrap {
-    flex: 1;
-    min-width: 0;
-    overflow-x: auto;
-    border-radius: 8px;
-}
-
-pre.code-processed .code-wrap code {
-    display: block;
-    line-height: inherit;
-    padding: 0;
-    margin: 0;
-}
-
-pre.code-processed .code-lines {
-    flex-shrink: 0;
-    user-select: none;
-    text-align: right;
-    padding: 0 12px 0 0;
-    margin: 0 12px 0 0;
-    border-right: 1px solid var(--background-highlight);
-    color: var(--text-menu);
-    white-space: pre;
-    font-family: "JetBrains Mono", Consolas, monospace;
-    font-size: 1em;
-    line-height: inherit;
-}
-
-pre.code-processed .code-copy-btn,
-.mermaid-source pre .code-copy-btn {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    z-index: 2;
-    font-size: 0.75em;
-    padding: 2px 10px;
-    border-radius: 6px;
-    border: 1px solid var(--background-highlight);
-    background: var(--background-secondary);
-    color: var(--text-heading);
-    cursor: pointer;
-    opacity: 0.6;
-    transition: opacity 150ms ease;
-}
-
-pre.code-processed:hover .code-copy-btn,
-.mermaid-source pre:hover .code-copy-btn {
-    opacity: 1;
-}
-
-pre.code-processed .code-copy-btn:hover,
-.mermaid-source pre .code-copy-btn:hover {
-    border-color: var(--text-link);
-    opacity: 1;
-}
 /* ---------- highlight.js line numbers ---------- */
 #content .hljs-ln {
     border-collapse: collapse;
@@ -1573,29 +1149,6 @@ html.theme-light #content .hljs-ln tbody tr:hover td.col-hover {
     white-space: pre;
     vertical-align: top;
 }
-/* ---------- Scrollbars (Harbor) ---------- */
-::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--scrollbar-track);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb);
-    border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-hover);
-}
-
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-}
 
 /* ---------- Code boxes: scrollbars ---------- */
 pre,
@@ -1886,24 +1439,9 @@ html.theme-light .mermaid svg .cluster-label text {
     fill: #586e75 !important;
     color: #586e75 !important;
 }
+
 /* ---------- G-code / Zusatz-Scopes (name = G/M-Codes, attr = Parameter) ---------- */
 .hljs-name { color: #b58900; }
 .hljs-attr { color: #839496; }
 html.theme-light .hljs-name { color: #268bd2; }
 html.theme-light .hljs-attr { color: #586e75; }
-/* ---------- Mobile: Menu always on top (above 3D viewer overlays) ---------- */
-@media (max-width: 48em) {
-    #left-pane,
-    #toc-pane {
-        z-index: 1000;
-    }
-    #header {
-        position: relative;
-        z-index: 1000;
-    }
-}
-/* ---------- Palette preview images: subtle frame so bars stay visible on any background ---------- */
-#content figure.image img.palette-img {
-    border: 1px solid var(--background-highlight);
-    border-radius: 6px;
-}
diff --git a/theme/blog_share_theme_tokyonight.css b/theme/blog_share_theme_tokyonight.css
index 682b2b8..3cb315b 100644
--- a/theme/blog_share_theme_tokyonight.css
+++ b/theme/blog_share_theme_tokyonight.css
@@ -1,3 +1,8 @@
+/*
+ * Tokyo Night palette overrides (share) — variables + color-specific components.
+ * Layout/components live in blog_share_base.css (loaded alongside this file).
+ */
+
 /*
  * Tokyo Night Share Theme (light/dark)
  * Based on tokyonight.nvim (https://github.com/folke/tokyonight.nvim, Apache-2.0)
@@ -50,59 +55,6 @@ body {
     font-family: "Inter", "Montserrat", "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
 }
 
-/* ---------- Header: Logo durch Laptop-Emoji ---------- */
-#header-logo img {
-    display: none;
-}
-
-#header-logo::before {
-    content: "💻";
-    font-size: 1.5em;
-    line-height: 1;
-    margin-right: 8px;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-/* ---------- Buy Me a Coffee (original, lokal) ---------- */
-@font-face {
-    font-family: "Cookie";
-    src: url(/api/notes/__COOKIE_FONT_ID__/download) format("woff2");
-    font-weight: 400;
-    font-display: swap;
-}
-
-#bmc-links {
-    margin-top: auto;
-    padding: 8px 25px 4px;
-    background: var(--background-secondary);
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.bmc-link {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 4px 6px 4px 24px;
-    border-radius: 6px;
-    color: var(--text-heading);
-    text-decoration: none;
-    font-size: 0.9em;
-    transition: background-color 150ms ease, color 150ms ease;
-}
-
-.bmc-link:hover {
-    background: var(--background-highlight);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-
-.bmc-link .tn-icon {
-    color: var(--text-link);
-}
-
 /* ---------- Menu: wie Footer-Links gestalten ---------- */
 #menu a {
     color: var(--text-heading);
@@ -197,131 +149,6 @@ body {
     display: inline-block;
 }
 
-/* ---------- Reading time ---------- */
-.reading-time {
-    font-size: 0.8em;
-    color: var(--text-menu);
-    margin: -0.9em 0 1.25em;
-}
-
-/* ---------- Blog pagination ---------- */
-.blog-pagination {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    margin: 1.5em 0 0;
-    padding-top: 1em;
-    border-top: 1px solid var(--background-highlight);
-}
-
-.blog-pagination .blog-page-num {
-    font-size: 0.85em;
-    color: var(--text-menu);
-}
-
-/* ---------- Share footer navigation (built-in prev/next) ausblenden ---------- */
-#content-footer .navigation {
-    display: none;
-}
-
-/* ---------- Prev/Next ---------- */
-.blog-prevnext {
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-    margin: 1.5em 0 0;
-    padding-top: 1em;
-    border-top: 1px solid var(--background-highlight);
-}
-
-.blog-pn {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    max-width: 45%;
-    color: var(--text-heading);
-    text-decoration: none;
-    transition: color 150ms ease;
-}
-
-.blog-pn.next {
-    margin-left: auto;
-    align-items: flex-end;
-    text-align: right;
-}
-
-.blog-pn-label {
-    font-size: 0.72em;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--text-menu);
-}
-
-.blog-pn:hover {
-    color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-pn.empty {
-    display: none;
-}
-
-/* ---------- Search ---------- */
-.blog-search {
-    margin: 0.5em 0 1em;
-}
-
-.blog-search-input {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10px 14px;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-    background: var(--background-secondary);
-    color: var(--text-heading);
-    font-size: 1em;
-}
-
-.blog-search-input:focus {
-    outline: none;
-    border-color: var(--text-link);
-}
-
-.blog-search-list {
-    list-style: none;
-    padding: 0;
-    margin: 1em 0 0;
-}
-
-.blog-search-hit {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 8px 12px;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-    background: var(--blog-card-bg);
-    color: var(--text-heading);
-    text-decoration: none;
-    margin-bottom: 8px;
-    transition: border-color 150ms ease;
-}
-
-.blog-search-hit:hover {
-    border-color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-search-path {
-    font-size: 0.8em;
-    color: var(--text-menu);
-}
-
-.blog-search-none {
-    color: var(--text-menu);
-}
-
 /* ---------- Header-Suche (ersetzt eingebaute) ---------- */
 .search-item {
     position: relative;
@@ -557,137 +384,6 @@ html.theme-light body.is-garden #content h1#title {
     border-bottom-color: rgba(160, 166, 194, 0.40) !important;
 }
 
-/* ---------- Blog index (generated article list) ---------- */
-.blog-post {
-    padding: 1.2em 1.4em;
-    margin-bottom: 1.25em;
-    border: 1px solid var(--background-highlight);
-    border-radius: 10px;
-    background: var(--blog-card-bg);
-    transition: border-color 150ms ease, box-shadow 150ms ease;
-    cursor: pointer;
-}
-
-.blog-post:last-child {
-    margin-bottom: 0;
-}
-
-.blog-post:hover {
-    border-color: var(--text-link);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
-}
-
-#content .blog-post:first-of-type {
-    margin-top: 1.5em;
-}
-
-/* ---------- Blog post thumbnails (Bild links, Teaser rechts) ---------- */
-.blog-post-inner {
-    display: flex;
-    gap: 16px;
-    align-items: stretch;
-}
-
-.blog-thumb-link {
-    flex: 0 0 auto;
-    width: min(256px, 35%);
-    text-decoration: none;
-}
-
-.blog-thumb {
-    display: block;
-    width: 100%;
-    height: 100%;
-    max-height: 256px;
-    object-fit: cover;
-    border-radius: 8px;
-    border: 1px solid var(--background-highlight);
-}
-
-.blog-post-body {
-    flex: 1;
-    min-width: 0;
-}
-
-.blog-post-title {
-    margin: 0 0 0.25em;
-}
-
-.blog-post-title a {
-    color: var(--text-heading);
-    text-decoration: none;
-    transition: color 150ms ease;
-}
-
-.blog-post-title a:hover {
-    color: var(--text-link);
-    text-decoration: none;
-}
-
-.blog-post-meta {
-    display: flex;
-    gap: 12px;
-    font-size: 0.85em;
-    color: var(--text-menu);
-    margin-bottom: 0.5em;
-}
-
-.blog-post-date {
-    font-variant-numeric: tabular-nums;
-    opacity: 0.85;
-}
-
-.blog-post-category {
-    background: var(--background-highlight);
-    border-radius: 8px;
-    padding: 1px 10px;
-    color: var(--text-heading);
-    font-weight: 600;
-}
-
-.blog-post-summary {
-    margin: 0 0 0.5em;
-    color: var(--text-primary);
-}
-
-.blog-post-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-}
-
-.tag {
-    font-size: 0.78em;
-    color: var(--text-link);
-    background: var(--background-secondary);
-    border: 1px solid var(--background-highlight);
-    border-radius: 8px;
-    padding: 1px 8px;
-}
-
-a.tag {
-    text-decoration: none;
-    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
-}
-
-a.tag:hover {
-    background: var(--background-highlight);
-    border-color: var(--text-link);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-
-/* ---------- Article meta (date/category on individual pages) ---------- */
-.article-meta {
-    display: flex;
-    gap: 12px;
-    font-size: 0.9em;
-    color: var(--text-menu);
-    margin-bottom: 1em;
-    padding-bottom: 1em;
-    border-bottom: 1px solid var(--background-highlight);
-}
-
 /* ---------- Headings (h2-h6) - Harbor header boxes ---------- */
 html.theme-dark {
     --header-h2-bg: rgba(122, 162, 247, 0.30);
@@ -805,16 +501,6 @@ html.theme-light #content code {
     border-color: #9aa5ce;
 }
 
-/* ---------- Eingebettete Bilder: Radius wie Code-Blöcke (8px) ---------- */
-#content figure.image {
-    margin: 1.25em auto;
-}
-
-#content figure img,
-#content img:not(.blog-thumb) {
-    border-radius: 8px;
-}
-
 /* ---------- 3D model viewer (STL / STEP) ---------- */
 .model-viewer {
     position: relative;
@@ -1030,6 +716,7 @@ html.theme-light .model-viewer-progress-fill {
 .hljs-strong {
     font-weight: bold;
 }
+
 /* ---------- Light mode: Harbor light highlighter ---------- */
 html.theme-light .hljs,
 html.theme-light pre code.hljs {
@@ -1105,6 +792,7 @@ html.theme-light .hljs-tag {
 html.theme-light .hljs-meta .hljs-string {
     color: #a0a6c2;
 }
+
 /* ---------- Admonitions (Trilium-style, gefüllt) ---------- */
 .admonition {
     --accent-color: var(--background-highlight);
@@ -1161,6 +849,7 @@ html.theme-light .admonition.warning { --admonition-bg: rgba(177, 92, 0, 0.20);
 .admonition.important::before { content: "\ea7c"; }
 .admonition.caution::before { content: "\eac7"; }
 .admonition.warning::before { content: "\eac5"; }
+
 /* ---------- Tables (Harbor, theme-aware) ---------- */
 html.theme-dark {
     --table-header-bg: rgba(122, 162, 247, 0.20);
@@ -1253,59 +942,7 @@ html.theme-light {
 #content table thead th.col-hover {
     background-color: rgba(122, 162, 247, 0.18) !important;
 }
-/* ---------- Category subcategories ---------- */
-.blog-subcategories {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 0 0 1.25em;
-}
 
-.blog-subcategory {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    background: var(--background-secondary);
-    border: 1px solid var(--background-highlight);
-    border-radius: 8px;
-    padding: 4px 12px;
-    color: var(--text-heading);
-    text-decoration: none;
-    font-weight: 600;
-    transition: background-color 150ms ease, border-color 150ms ease;
-}
-
-.blog-subcategory i {
-    color: var(--text-link);
-}
-
-.blog-subcategory:hover {
-    background: var(--background-highlight);
-    border-color: var(--text-link);
-    color: var(--text-heading);
-    text-decoration: none;
-}
-/* ---------- Digital Garden note table ---------- */
-.blog-garden-table {
-    width: 100%;
-}
-
-.blog-garden-table tbody td:first-child {
-    background: transparent !important;
-    font-weight: normal;
-}
-
-.note-type {
-    display: inline-block;
-    font-size: 0.8em;
-    padding: 2px 10px;
-    border-radius: 8px;
-    background: var(--background-highlight);
-    color: var(--text-heading);
-    font-weight: 600;
-    text-transform: capitalize;
-    white-space: nowrap;
-}
 /* ---------- Digital Garden rows: clickable + sage hover ---------- */
 .blog-garden-table tbody tr {
     cursor: pointer;
@@ -1427,6 +1064,7 @@ html.theme-light .note-state.state-unknown {
 html.theme-light .note-state.state-unknown i {
     color: #e1e2e7;
 }
+
 /* ---------- Code notes: always Harbordark like code boxes ---------- */
 #content.type-code pre {
     background-color: #1a1b26 !important;
@@ -1452,69 +1090,7 @@ html.theme-light #content.type-code pre {
 html.theme-light #content.type-code code {
     color: #3760bf;
 }
-/* ---------- Code: line numbers + copy button ---------- */
-pre.code-processed {
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    line-height: 1.6;
-}
 
-pre.code-processed .code-wrap {
-    flex: 1;
-    min-width: 0;
-    overflow-x: auto;
-    border-radius: 8px;
-}
-
-pre.code-processed .code-wrap code {
-    display: block;
-    line-height: inherit;
-    padding: 0;
-    margin: 0;
-}
-
-pre.code-processed .code-lines {
-    flex-shrink: 0;
-    user-select: none;
-    text-align: right;
-    padding: 0 12px 0 0;
-    margin: 0 12px 0 0;
-    border-right: 1px solid var(--background-highlight);
-    color: var(--text-menu);
-    white-space: pre;
-    font-family: "JetBrains Mono", Consolas, monospace;
-    font-size: 1em;
-    line-height: inherit;
-}
-
-pre.code-processed .code-copy-btn,
-.mermaid-source pre .code-copy-btn {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    z-index: 2;
-    font-size: 0.75em;
-    padding: 2px 10px;
-    border-radius: 6px;
-    border: 1px solid var(--background-highlight);
-    background: var(--background-secondary);
-    color: var(--text-heading);
-    cursor: pointer;
-    opacity: 0.6;
-    transition: opacity 150ms ease;
-}
-
-pre.code-processed:hover .code-copy-btn,
-.mermaid-source pre:hover .code-copy-btn {
-    opacity: 1;
-}
-
-pre.code-processed .code-copy-btn:hover,
-.mermaid-source pre .code-copy-btn:hover {
-    border-color: var(--text-link);
-    opacity: 1;
-}
 /* ---------- highlight.js line numbers ---------- */
 #content .hljs-ln {
     border-collapse: collapse;
@@ -1573,29 +1149,6 @@ html.theme-light #content .hljs-ln tbody tr:hover td.col-hover {
     white-space: pre;
     vertical-align: top;
 }
-/* ---------- Scrollbars (Harbor) ---------- */
-::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--scrollbar-track);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb);
-    border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-hover);
-}
-
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-}
 
 /* ---------- Code boxes: scrollbars ---------- */
 pre,
@@ -1886,24 +1439,9 @@ html.theme-light .mermaid svg .cluster-label text {
     fill: #a0a6c2 !important;
     color: #a0a6c2 !important;
 }
+
 /* ---------- G-code / Zusatz-Scopes (name = G/M-Codes, attr = Parameter) ---------- */
 .hljs-name { color: #e0af68; }
 .hljs-attr { color: #a9b1d6; }
 html.theme-light .hljs-name { color: #2e7de9; }
 html.theme-light .hljs-attr { color: #a0a6c2; }
-/* ---------- Mobile: Menu always on top (above 3D viewer overlays) ---------- */
-@media (max-width: 48em) {
-    #left-pane,
-    #toc-pane {
-        z-index: 1000;
-    }
-    #header {
-        position: relative;
-        z-index: 1000;
-    }
-}
-/* ---------- Palette preview images: subtle frame so bars stay visible on any background ---------- */
-#content figure.image img.palette-img {
-    border: 1px solid var(--background-highlight);
-    border-radius: 6px;
-}
diff --git a/tools/__pycache__/minify_css.cpython-311.pyc b/tools/__pycache__/minify_css.cpython-311.pyc
new file mode 100644
index 0000000..040d29f
Binary files /dev/null and b/tools/__pycache__/minify_css.cpython-311.pyc differ
diff --git a/tools/minify_css.py b/tools/minify_css.py
new file mode 100644
index 0000000..c344e81
--- /dev/null
+++ b/tools/minify_css.py
@@ -0,0 +1,33 @@
+import re, sys, glob, os
+
+def minify(css: str) -> str:
+    # 1) strip comments but protect strings
+    out=[]; i=0; n=len(css)
+    while i<n:
+        c=css[i]
+        if c in "\"'":
+            q=c; out.append(c); i+=1
+            while i<n and css[i]!=q:
+                if css[i]=="\\": out.append(css[i]); i+=1
+                out.append(css[i]); i+=1
+            if i<n: out.append(css[i]); i+=1
+        elif css[i:i+2]=="/*":
+            j=css.find("*/", i+2); i=(j+2) if j>=0 else n
+        else:
+            out.append(c); i+=1
+    s="".join(out)
+    # 2) collapse whitespace
+    s=re.sub(r"\s+"," ", s).strip()
+    # 3) remove spaces around punctuation (string-aware: simple heuristic ok for CSS)
+    s=re.sub(r"\s*([{}:;,>~+])\s*", r"\1", s)
+    s=s.replace(";}", "}")
+    s=re.sub(r"\s+"," ", s)
+    return s
+
+if __name__=="__main__":
+    if len(sys.argv)>1:
+        for f in sys.argv[1:]:
+            print(minify(open(f,encoding="utf-8").read()))
+    else:
+        for f in sorted(glob.glob("theme/blog_share_*.css")):
+            print(f, "->", len(f""))
