/* VP 1.14.0 — frontend only. Light appearance retains the existing theme. */
html[data-vp-theme="light"] { color-scheme: light; }
html[data-vp-theme="dark"] { color-scheme: dark; background: #151c20; }
html[data-vp-theme="dark"] body {
    --vp-color-accent: #f7a10c;
    --vp-color-accent-dark: #f7a10c;
    --vp-color-accent-light: #382c1c;
    --vp-color-petrol-dark: #b0cfd5;
    --vp-color-petrol: #83aab5;
    --vp-color-petrol-light: #243b43;
    --vp-color-surface: #202a2f;
    --vp-color-surface-muted: #28343a;
    --vp-color-text: #e5e9e7;
    --vp-color-border: #50636b;
    color: var(--vp-color-text);
    background-color: #151c20 !important;
    background-image: none !important;
}
/* Blocksy sets variables again on individual header/footer rows. Override those
   scopes as well, while leaving content-specific Gutenberg colors intact. */
html[data-vp-theme="dark"] body,
html[data-vp-theme="dark"] :is(#header, #footer, #offcanvas, [data-header], [data-footer], [data-row], .ct-panel, .ct-header-search) {
    --theme-palette-color-1: #f7a10c;
    --theme-palette-color-2: #ffbd4b;
    --theme-palette-color-3: #b0cfd5;
    --theme-palette-color-4: #e5e9e7;
    --theme-palette-color-5: #50636b;
    --theme-palette-color-6: #28343a;
    --theme-palette-color-7: #202a2f;
    --theme-palette-color-8: #151c20;
    --theme-text-color: #e5e9e7;
    --theme-heading-color: #e5e9e7;
    --theme-link-initial-color: #f7a10c;
    --theme-link-hover-color: #ffbd4b;
    --theme-border-color: #50636b;
    --theme-background-color: #151c20;
    --theme-button-background-initial-color: #f7a10c;
    --theme-button-background-hover-color: #ffbd4b;
    --theme-button-text-initial-color: #24201a;
    --theme-button-text-hover-color: #24201a;
    --theme-form-text-initial-color: #e5e9e7;
    --theme-form-text-focus-color: #e5e9e7;
    --theme-form-field-background-initial-color: #202a2f;
    --theme-form-field-background-focus-color: #28343a;
    --theme-form-field-border-initial-color: #50636b;
    --theme-form-field-border-focus-color: #f7a10c;
}
html[data-vp-theme="dark"] :is(#header, #footer, #offcanvas, .ct-panel, #header [data-row] > div, #footer [data-row] > div) {
    background-color: #202a2f !important;
    background-image: none !important;
    color: #e5e9e7;
    --theme-link-initial-color: #e5e9e7;
    --theme-link-hover-color: #f7a10c;
}
html[data-vp-theme="dark"] :is(.ct-header-menu, .ct-footer-menu, .ct-header-trigger, .ct-header-search, .site-title, .site-description) {
    --theme-text-color: #e5e9e7;
    --theme-link-initial-color: #e5e9e7;
    --theme-link-hover-color: #f7a10c;
    --theme-icon-color: #e5e9e7;
    --theme-icon-hover-color: #f7a10c;
}
html[data-vp-theme="dark"] :is(.sub-menu, .ct-search-results, .ct-panel-content) {
    background-color: #202a2f;
    --theme-link-initial-color: #e5e9e7;
    --theme-link-hover-color: #f7a10c;
}
html[data-vp-theme="dark"] :is(.ct-boxed > article, .hero-section[data-type="type-2"]) {
    background-color: var(--vp-color-surface);
}
html[data-vp-theme="dark"] :is(.wp-block-vp-themenkarte, .wp-block-vp-projektkarte, .wp-block-vp-bereichskarte, .wp-block-vp-dossier, .wp-block-query[class*="is-style-vp-beitragsliste-"]) {
    --vp-topic-border: #50636b;
    --vp-project-border: #50636b;
    --vp-area-border: #50636b;
    --vp-dossier-accent: #b0cfd5;
    --vp-dossier-line: #50636b;
    --vp-post-list-line: #50636b;
}
html[data-vp-theme="dark"] .wp-block-vp-dossier.is-style-orange { --vp-dossier-accent: #f7a10c; --vp-dossier-line: #94621c; }
html[data-vp-theme="dark"] .wp-block-vp-beitragsmosaik.is-style-petrol { --vp-mosaic-accent: #b0cfd5; }
html[data-vp-theme="dark"] #toc_container { border-color: #50636b !important; }
/* Preserve readable foregrounds on explicitly selected solid accent surfaces.
   Foreground color tokens cannot also serve as dark background tokens. */
html[data-vp-theme="dark"] .has-vp-petrol-dark-background-color { background-color: #244653 !important; color: #e5e9e7; }
html[data-vp-theme="dark"] .has-vp-petrol-background-color { background-color: #527783 !important; color: #ffffff; }
html[data-vp-theme="dark"] .has-vp-accent-dark-background-color { background-color: #a45e00 !important; color: #ffffff; }
html[data-vp-theme="dark"] .has-vp-accent-background-color { color: #24201a; }
html[data-vp-theme="dark"] .has-vp-surface-color { color: #e5e9e7 !important; }
html[data-vp-theme="dark"] .has-vp-surface-muted-color { color: #e5e9e7 !important; }
/* Compact footer control: icons only; labels remain accessible. */
.vp-color-mode[hidden] { display: none !important; }
.vp-color-mode {
    display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 4px;
    padding: 0; border: 0; border-radius: 0; background: transparent;
    color: #527783; vertical-align: middle; max-width: 100%; line-height: 1;
}
.vp-color-mode button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; min-width: 26px; height: 26px; min-height: 0;
    padding: 4px; margin: 0; border: 0; border-radius: 4px;
    background: transparent; color: inherit; font: inherit; font-weight: 400;
    line-height: 1; box-shadow: none; cursor: pointer;
}
.vp-color-mode button[aria-pressed="true"] {
    background: #fff3dc; color: #a45e00;
    box-shadow: inset 0 -2px 0 #f7a10c;
}
.vp-color-mode button:hover { color: #a45e00; background: #fff3dc; }
.vp-color-mode button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.vp-color-mode svg { flex-shrink: 0; width: 18px; height: 18px; }
.vp-color-mode__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}
html[data-vp-theme="dark"] .vp-color-mode { background: transparent; color: #b0cfd5; border: 0; }
html[data-vp-theme="dark"] .vp-color-mode button[aria-pressed="true"],
html[data-vp-theme="dark"] .vp-color-mode button:hover { background: #28343a; color: #f7a10c; }
/* Keep a larger touch target where space permits; desktop stays one line high. */
@media (pointer: coarse) {
    .vp-color-mode button { width: 44px; min-width: 44px; height: 44px; }
}
/* Blocksy back-to-top has its own icon and background variables. */
.ct-back-to-top {
    --theme-icon-color: #a45e00;
    --theme-icon-hover-color: #244653;
    --top-button-background-color: #fff3dc;
    --top-button-background-hover-color: #f7a10c;
}
html[data-vp-theme="dark"] .ct-back-to-top {
    --theme-icon-color: #f7a10c;
    --theme-icon-hover-color: #ffbd4b;
    --top-button-background-color: #28343a;
    --top-button-background-hover-color: #382c1c;
    color: #f7a10c !important;
    background-color: #28343a !important;
}
html[data-vp-theme="dark"] .ct-back-to-top:hover {
    color: #ffbd4b !important; background-color: #382c1c !important;
}
html[data-vp-theme="dark"] .ct-back-to-top svg { fill: currentColor; }

/* Center the switch inside its placement area without a text/widget panel. */
.vp-color-mode-container {
    display: flex; justify-content: center; align-items: center;
    width: 100%; padding: 0; margin: 0; background: transparent; border: 0;
}

/* Related posts blend into the surrounding section, as in light mode. */
html[data-vp-theme="dark"] .ct-related-posts {
    background-color: transparent;
}

/* Quiet structural border; orange remains reserved for accents/actions. */
html[data-vp-theme="dark"] .wp-block-group.is-style-vp-themenanker {
    border: 1px solid var(--vp-color-border, #50636b);
}

/* Avoid nested panels in the site header and post title/meta section. */
html[data-vp-theme="dark"] #header,
html[data-vp-theme="dark"] #header [data-row],
html[data-vp-theme="dark"] #header [data-row] > div,
html[data-vp-theme="dark"] .entry-header {
    background-color: transparent !important;
    background-image: none !important;
}