blog_share_theme.css

/*
 * Gruvbox Share Theme for Richard's Blog (Trilium Public Share)
 * Palette: bg #282828 / #3c3836 / #504945 / #1d2021   fg #ebdbb2 / #fbf1c7
 *          red #fb4934 green #b8bb26 yellow #fabd2f
 *          blue #83a598 purple #d3869b aqua #8ec07c orange #fe8019
 */

html.theme-light {
    --background-primary: #fbf1c7;
    --background-secondary: #ebdbb2;
    --background-highlight: #d5c4a1;
    --background-active: #83a598;
    --blog-card-bg: #ebdbb2;
    --scrollbar-thumb: #d5c4a1;
    --scrollbar-hover: #bdae93;
    --scrollbar-track: #ebdbb2;
    --text-primary: #3c3836;
    --text-heading: #282828;
    --text-menu: #504945;
    --text-link: #076678;
    --text-menu-active: #fbf1c7;
    color-scheme: light;
}

html.theme-dark {
    --background-primary: #282828;
    --background-secondary: #1d2021;
    --background-highlight: #504945;
    --background-active: #83a598;
    --blog-card-bg: #3c3836;
    --scrollbar-thumb: #504945;
    --scrollbar-hover: #665c54;
    --scrollbar-track: #1d2021;
    --text-primary: #ebdbb2;
    --text-heading: #fbf1c7;
    --text-menu: #a89984;
    --text-link: #83a598;
    --text-menu-active: #1d2021;
    color-scheme: dark;
}

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/qlZKEUC2BfCT/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);
    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: #fabd2f;
    color: #1d2021;
    border: 2px solid #1d2021;
    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: #fe8019;
    color: #1d2021;
    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;
}

/* ---------- 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;
}

.blog-search-header-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px 6px 32px;
    border-radius: 6px;
    border: 1px solid rgba(131, 165, 152, 0.55);
    background: rgba(131, 165, 152, 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: #076678;
    background: rgba(7, 102, 120, 0.10);
}

.blog-search-header-input:focus {
    outline: none;
    border-color: #83a598;
    box-shadow: 0 0 0 2px rgba(131, 165, 152, 0.20);
}

html.theme-light .blog-search-header-input:focus {
    border-color: #076678;
    box-shadow: 0 0 0 2px rgba(7, 102, 120, 0.15);
}

.search-item .search-icon {
    color: rgba(131, 165, 152, 0.85);
}

html.theme-light .search-item .search-icon {
    color: #076678;
}

.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%;
}

/* ---------- Rendered widgets: mind map + excalidraw ---------- */
.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;
}

.blog-search-overlay-hit:hover {
    background: var(--background-highlight);
    text-decoration: none;
}

.blog-search-overlay-hit .s {
    font-size: 0.75em;
    color: var(--text-menu);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-search-overlay .blog-search-none {
    padding: 8px 10px;
    font-size: 0.85em;
}

#main {
    max-width: min(92vw, 1200px);
}

#site-header {
    padding-bottom: 10px;
}

#title {
    font-family: "JetBrains Mono", "Montserrat", monospace;
    letter-spacing: -0.02em;
}

body.is-garden #title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.is-garden #title .note-state {
    margin-left: auto;
    flex-shrink: 0;
}

body.is-garden #content h1#title {
    background-color: rgba(184, 187, 38, 0.35) !important;
    border-bottom-color: rgba(184, 187, 38, 0.60) !important;
}

html.theme-light body.is-garden #content h1#title {
    background-color: rgba(184, 187, 38, 0.20) !important;
    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);
    --header-h2-border: rgba(131, 165, 152, 0.7);
    --header-h3-bg: rgba(142, 192, 124, 0.25);
    --header-h3-border: rgba(142, 192, 124, 0.6);
    --header-h4-bg: rgba(250, 189, 47, 0.25);
    --header-h4-border: rgba(250, 189, 47, 0.6);
    --header-h5-bg: rgba(211, 134, 155, 0.25);
    --header-h5-border: rgba(211, 134, 155, 0.6);
    --header-h6-bg: rgba(254, 128, 25, 0.25);
    --header-h6-border: rgba(254, 128, 25, 0.6);
    --header-h1-bg: rgba(251, 73, 52, 0.30);
    --header-h1-border: rgba(251, 73, 52, 0.6);
}

html.theme-light {
    --header-h2-bg: rgba(7, 102, 120, 0.18);
    --header-h2-border: rgba(7, 102, 120, 0.45);
    --header-h3-bg: rgba(121, 116, 14, 0.10);
    --header-h3-border: rgba(121, 116, 14, 0.35);
    --header-h4-bg: rgba(181, 118, 20, 0.10);
    --header-h4-border: rgba(181, 118, 20, 0.35);
    --header-h5-bg: rgba(143, 63, 113, 0.10);
    --header-h5-border: rgba(143, 63, 113, 0.35);
    --header-h6-bg: rgba(175, 58, 3, 0.10);
    --header-h6-border: rgba(175, 58, 3, 0.35);
    --header-h1-bg: rgba(157, 0, 6, 0.12);
    --header-h1-border: rgba(157, 0, 6, 0.40);
}

#content h1 {
    background-color: var(--header-h1-bg);
    border-bottom: 2px solid var(--header-h1-border);
    border-radius: 4px;
    padding: 0.3em 0.4em;
    font-size: 1.6em;
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 1.25em;
}

#content h2 {
    background-color: var(--header-h2-bg);
    border-bottom: 2px solid var(--header-h2-border);
    border-radius: 4px;
    padding: 0.25em 0.4em;
}

#content h3 {
    background-color: var(--header-h3-bg);
    border-bottom: 2px solid var(--header-h3-border);
    border-radius: 4px;
    padding: 0.2em 0.35em;
}

#content h4 {
    background-color: var(--header-h4-bg);
    border-bottom: 2px solid var(--header-h4-border);
    border-radius: 4px;
    padding: 0.2em 0.35em;
}

#content h5 {
    background-color: var(--header-h5-bg);
    border-bottom: 2px solid var(--header-h5-border);
    border-radius: 4px;
    padding: 0.2em 0.35em;
}

#content h6 {
    background-color: var(--header-h6-bg);
    border-bottom: 2px solid var(--header-h6-border);
    border-radius: 4px;
    padding: 0.2em 0.35em;
}

#childLinks {
    display: none;
}

#index {
    display: none;
}

/* ---------- Code blocks - Gruvbox Dark (always, also in light mode) ---------- */
.ck-content pre,
#content pre {
    background-color: #282828;
    color: #ebdbb2;
    border: 1px solid #504945;
    border-radius: 8px;
}

.ck-content code,
#content code {
    background-color: #3c3836;
    color: #ebdbb2;
    border-color: #504945;
    border-radius: 8px;
    padding: 0.1em 0.35em;
}

html.theme-light .ck-content pre,
html.theme-light #content pre {
    background-color: #fbf1c7;
    color: #3c3836;
    border-color: #d5c4a1;
}

html.theme-light .ck-content code,
html.theme-light #content code {
    background-color: #d5c4a1;
    color: #3c3836;
    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;
    box-sizing: border-box;
    width: calc(100vw - 24px);
    margin: 1em 0;
    margin-left: calc(50% - (100vw - 24px) / 2);
    background: #1d2021;
    border: 1px solid var(--background-highlight);
    border-radius: 8px;
    overflow: hidden;
}

.model-viewer.model-viewer-inline {
    width: 100%;
    margin-left: 0;
}

.model-viewer-data {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 3;
    display: none;
    font-size: 0.75em;
    color: #a89984;
    background: rgba(40, 40, 40, 0.8);
    border: 1px solid #504945;
    border-radius: 6px;
    padding: 2px 10px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.model-viewer-canvas {
    position: relative;
    width: 100%;
    height: min(70vh, 900px);
    min-height: 420px;
}

.model-viewer-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px;
    box-sizing: border-box;
    color: #a89984;
    font-size: 0.9em;
}

.model-viewer-status.error {
    color: #fb4934;
}

.model-viewer-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    height: 6px;
    width: min(60%, 480px);
    margin: 0 auto;
    background: #3c3836;
    border-radius: 3px;
    overflow: hidden;
}

.model-viewer-progress-fill {
    height: 100%;
    width: 0;
    background: #b8bb26;
    border-radius: 3px;
    transition: width 150ms ease;
}

.model-viewer-progress-fill.indeterminate {
    width: 40%;
    animation: model-progress 1.1s ease-in-out infinite;
}

@keyframes model-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.model-viewer-hint {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 0.75em;
    color: #a89984;
    z-index: 2;
    pointer-events: none;
}

.model-viewer-caption {
    font-size: 0.85em;
    font-style: italic;
    color: var(--text-menu);
    text-align: center;
    padding: 4px 12px;
    background: var(--background-secondary);
    border-top: 1px solid var(--background-highlight);
}

.model-viewer canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- Bildunterschriften (Gruvbox) ---------- */
#content figcaption {
    font-size: 0.85em;
    font-style: italic;
    color: var(--text-menu);
    text-align: center;
    margin-top: 8px;
    padding: 4px 12px;
    background: var(--background-secondary);
    border: 1px solid var(--background-highlight);
    border-radius: 8px;
    display: inline-block;
}

.hljs {
    background: #282828;
    color: #ebdbb2;
}

.hljs-comment,
.hljs-quote {
    color: #928374;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
    color: #fb4934;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
    color: #d3869b;
}

.hljs-string,
.hljs-doctag {
    color: #b8bb26;
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
    color: #fe8019;
}

.hljs-type,
.hljs-class .hljs-title,
.hljs-attribute {
    color: #fabd2f;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-deletion,
.hljs-addition {
    color: #d3869b;
}

.hljs-built_in,
.hljs-builtin-name,
.hljs-params {
    color: #8ec07c;
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: bold;
}
/* ---------- Light mode: Gruvbox Light highlighter ---------- */
html.theme-light .hljs,
html.theme-light pre code.hljs {
    background: #fbf1c7 !important;
    color: #3c3836;
}

html.theme-light .hljs-comment,
html.theme-light .hljs-quote {
    color: #928374;
}

html.theme-light .hljs-keyword,
html.theme-light .hljs-selector-tag,
html.theme-light .hljs-subst {
    color: #9d0006;
}

html.theme-light .hljs-number,
html.theme-light .hljs-literal,
html.theme-light .hljs-variable,
html.theme-light .hljs-template-variable,
html.theme-light .hljs-tag .hljs-attr {
    color: #8f3f71;
}

html.theme-light .hljs-string,
html.theme-light .hljs-doctag {
    color: #79740e;
}

html.theme-light .hljs-title,
html.theme-light .hljs-section,
html.theme-light .hljs-selector-id {
    color: #af3a03;
}

html.theme-light .hljs-type,
html.theme-light .hljs-class .hljs-title,
html.theme-light .hljs-attribute {
    color: #b57614;
}

html.theme-light .hljs-symbol,
html.theme-light .hljs-bullet,
html.theme-light .hljs-link,
html.theme-light .hljs-meta,
html.theme-light .hljs-deletion,
html.theme-light .hljs-addition {
    color: #8f3f71;
}

html.theme-light .hljs-built_in,
html.theme-light .hljs-builtin-name,
html.theme-light .hljs-params {
    color: #427b58;
}

html.theme-light .hljs-regexp,
html.theme-light .hljs-operator,
html.theme-light .hljs-selector-attr,
html.theme-light .hljs-selector-pseudo,
html.theme-light .hljs-selector-class,
html.theme-light .hljs-template-tag {
    color: #8f3f71;
}

html.theme-light .hljs-name,
html.theme-light .hljs-tag {
    color: #076678;
}

html.theme-light .hljs-meta .hljs-string {
    color: #79740e;
}
/* ---------- Admonitions (Trilium-style, gefüllt) ---------- */
.admonition {
    --accent-color: var(--background-highlight);
    --admonition-bg: var(--background-secondary);
    border: 1px solid var(--accent-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    background: var(--admonition-bg);
    border-radius: 0.5em;
    padding: 1em;
    padding-inline-start: 2.5em;
    margin: 1.25em 0;
    position: relative;
    overflow: hidden;
}

html.theme-dark .admonition.note { --admonition-bg: rgba(105, 199, 255, 0.16); }
html.theme-dark .admonition.tip { --admonition-bg: rgba(64, 192, 37, 0.14); }
html.theme-dark .admonition.important { --admonition-bg: rgba(152, 57, 247, 0.18); }
html.theme-dark .admonition.caution { --admonition-bg: rgba(255, 46, 46, 0.16); }
html.theme-dark .admonition.warning { --admonition-bg: rgba(226, 170, 3, 0.14); }
html.theme-dark .admonition { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

html.theme-light .admonition.note { --admonition-bg: rgba(105, 199, 255, 0.22); }
html.theme-light .admonition.tip { --admonition-bg: rgba(64, 192, 37, 0.16); }
html.theme-light .admonition.important { --admonition-bg: rgba(152, 57, 247, 0.15); }
html.theme-light .admonition.caution { --admonition-bg: rgba(255, 46, 46, 0.15); }
html.theme-light .admonition.warning { --admonition-bg: rgba(226, 170, 3, 0.20); }

.admonition p:last-child {
    margin-bottom: 0;
}

.admonition p,
.admonition h2 {
    margin-top: 0;
}

.admonition.note { --accent-color: #69c7ff; }
.admonition.tip { --accent-color: #40c025; }
.admonition.important { --accent-color: #9839f7; }
.admonition.caution { --accent-color: #ff2e2e; }
.admonition.warning { --accent-color: #e2aa03; }

.admonition::before {
    color: var(--accent-color);
    font-family: boxicons !important;
    position: absolute;
    top: 1em;
    inset-inline-start: 1em;
}

.admonition.note::before { content: "\eb21"; }
.admonition.tip::before { content: "\ea0d"; }
.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);
    --table-header-text: #fbf1c7;
    --table-header-border: rgba(131, 165, 152, 0.6);
    --table-stripe: rgba(255, 255, 255, 0.04);
    --table-hover: rgba(131, 165, 152, 0.16);
    --table-rowlabel-bg: rgba(255, 255, 255, 0.05);
    --table-rowlabel-text: #ebdbb2;
}

html.theme-light {
    --table-header-bg: rgba(7, 102, 120, 0.20);
    --table-header-text: #282828;
    --table-header-border: rgba(7, 102, 120, 0.45);
    --table-stripe: rgba(0, 0, 0, 0.04);
    --table-hover: rgba(7, 102, 120, 0.12);
    --table-rowlabel-bg: rgba(0, 0, 0, 0.05);
    --table-rowlabel-text: #3c3836;
}

.ck-content table,
#content table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--background-highlight);
    border-radius: 8px;
    overflow: hidden;
    margin: 1em 0;
}

.ck-content table th,
.ck-content table td,
#content table th,
#content table td {
    border: none;
    border-bottom: 1px solid var(--background-highlight);
    border-right: 1px solid var(--background-highlight);
    padding: 8px 12px;
    text-align: left;
    background-color: transparent !important;
}

.ck-content table th:last-child,
.ck-content table td:last-child,
#content table th:last-child,
#content table td:last-child {
    border-right: none;
}

.ck-content table tr:last-child td,
#content table tr:last-child td {
    border-bottom: none;
}

.ck-content table thead th,
#content table thead th {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-text);
    font-weight: 700;
    border-bottom: 2px solid var(--table-header-border);
}

.ck-content table tbody td:first-child,
#content table tbody td:first-child {
    background-color: var(--table-rowlabel-bg) !important;
    color: var(--table-rowlabel-text);
    font-weight: 600;
    white-space: nowrap;
}

.ck-content table tbody tr:nth-child(even) td:not(:first-child),
#content table tbody tr:nth-child(even) td:not(:first-child) {
    background-color: var(--table-stripe) !important;
}

.ck-content table tbody tr:hover td,
#content table tbody tr:hover td {
    background-color: rgba(254, 128, 25, 0.07) !important;
}

.ck-content table .col-hover,
#content table .col-hover {
    background-color: rgba(254, 128, 25, 0.07) !important;
}

.ck-content table tbody tr:hover td.col-hover,
.ck-content table thead th.col-hover,
#content table tbody tr:hover td.col-hover,
#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;
}

#content .blog-garden-table tbody tr:hover td,
#content .blog-garden-table .col-hover {
    background-color: rgba(184, 187, 38, 0.12) !important;
}

#content .blog-garden-table tbody tr:hover td.col-hover {
    background-color: rgba(184, 187, 38, 0.20) !important;
}
.note-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8em;
    padding: 2px 10px;
    border-radius: 8px;
    background: rgba(184, 187, 38, 0.18);
    color: var(--text-heading);
    font-weight: 600;
    white-space: nowrap;
}

.note-state i {
    color: #b8bb26;
}

.note-state.state-draft {
    background: rgba(146, 131, 116, 0.22);
}

.note-state.state-draft i {
    color: #928374;
}

.note-state.state-review {
    background: rgba(131, 165, 152, 0.25);
}

.note-state.state-review i {
    color: #83a598;
}

.note-state.state-unknown {
    background: rgba(251, 73, 52, 0.20);
}

.note-state.state-unknown i {
    color: #fb4934;
}
/* ---------- Code notes: always Gruvbox dark like code boxes ---------- */
#content.type-code pre {
    background-color: #282828 !important;
    color: #ebdbb2;
    border: 1px solid #504945;
    border-radius: 8px;
    padding: 1em;
    margin: 1em 0;
}

#content.type-code code {
    background-color: transparent !important;
    color: #ebdbb2;
    border: 0;
}

html.theme-light #content.type-code pre {
    background-color: #fbf1c7 !important;
    color: #3c3836;
    border-color: #d5c4a1;
}

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;
    border: none !important;
    box-shadow: none;
    border-radius: 8px;
    margin: 0;
    width: auto;
    line-height: 1.4;
}

#content .hljs-ln td,
#content .hljs-ln th {
    border: none !important;
    background-color: transparent !important;
    padding: 0;
}

#content .hljs-ln tbody td:first-child,
#content .hljs-ln thead th:first-child {
    background-color: transparent !important;
}

#content .hljs-ln tbody tr:nth-child(even) td {
    background-color: transparent !important;
}

#content .hljs-ln .col-hover {
    background-color: transparent !important;
}

#content .hljs-ln tbody tr:hover td,
#content .hljs-ln tbody tr:hover td.col-hover {
    background-color: rgba(254, 128, 25, 0.07) !important;
}

html.theme-light #content .hljs-ln tbody tr:hover td,
html.theme-light #content .hljs-ln tbody tr:hover td.col-hover {
    background-color: rgba(254, 128, 25, 0.08) !important;
}

.hljs-ln-numbers {
    user-select: none;
    text-align: right;
    padding-right: 12px !important;
    padding-left: 4px;
    border-right: 1px solid var(--background-highlight) !important;
    color: var(--text-menu);
    white-space: nowrap;
    vertical-align: top;
    font-family: "JetBrains Mono", Consolas, monospace;
}

.hljs-ln-code {
    padding-left: 12px !important;
    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,
pre.code-processed .code-wrap,
.hljs-ln-code {
    scrollbar-color: #504945 #1d2021;
}

pre::-webkit-scrollbar-thumb,
pre.code-processed .code-wrap::-webkit-scrollbar-thumb,
.hljs-ln-code::-webkit-scrollbar-thumb {
    background: #504945;
}

pre::-webkit-scrollbar-thumb:hover,
pre.code-processed .code-wrap::-webkit-scrollbar-thumb:hover,
.hljs-ln-code::-webkit-scrollbar-thumb:hover {
    background: #665c54;
}

pre::-webkit-scrollbar-track,
pre.code-processed .code-wrap::-webkit-scrollbar-track,
.hljs-ln-code::-webkit-scrollbar-track {
    background: #1d2021;
}

html.theme-light pre,
html.theme-light pre.code-processed .code-wrap,
html.theme-light .hljs-ln-code {
    scrollbar-color: #bdae93 #ebdbb2;
}

html.theme-light pre::-webkit-scrollbar-thumb,
html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-thumb,
html.theme-light .hljs-ln-code::-webkit-scrollbar-thumb {
    background: #bdae93;
}

html.theme-light pre::-webkit-scrollbar-thumb:hover,
html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-thumb:hover,
html.theme-light .hljs-ln-code::-webkit-scrollbar-thumb:hover {
    background: #d5c4a1;
}

html.theme-light pre::-webkit-scrollbar-track,
html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-track,
html.theme-light .hljs-ln-code::-webkit-scrollbar-track {
    background: #ebdbb2;
}

/* ---------- Link icons / markers: internal links without arrow, external links keep a marker ---------- */
#content a::after,
#content a::before,
#content-footer .navigation a::after,
#content-footer .navigation a::before,
a.next::after,
a.previous::before,
.bmc-btn::after,
.bmc-btn::before,
.bmc-powered::after,
.bmc-powered::before {
    content: none !important;
}

#content a[href^="http://"]:not([href^="https://richard.familie-zink.org"])::after,
#content a[href^="https://"]:not([href^="https://richard.familie-zink.org"])::after {
    content: " ↗" !important;
    display: inline-block;
    margin-left: 3px;
    font-size: 0.85em;
    color: var(--text-link);
}

/* inline text links (in paragraphs/lists): colour only */
#content p a:not([class]),
#content li a:not([class]) {
    color: var(--text-link);
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
}

#content p a:not([class]):hover,
#content li a:not([class]):hover {
    color: var(--text-heading);
    background: transparent;
}

/* action links as buttons (subtle tint, noticeable on hover) */
.blog-pn {
    padding: 6px 14px;
    border: 1px solid rgba(131, 165, 152, 0.35);
    border-radius: 8px;
    background: rgba(131, 165, 152, 0.08);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

html.theme-light .blog-pn {
    border-color: rgba(7, 102, 120, 0.35);
    background: rgba(7, 102, 120, 0.08);
}

.blog-pn:hover {
    background: rgba(131, 165, 152, 0.18);
    border-color: #83a598;
}

html.theme-light .blog-pn:hover {
    background: rgba(7, 102, 120, 0.15);
    border-color: #076678;
}