/* ============================================================================
* MCOS App Dark Mode
* ----------------------------------------------------------------------------
* App-only dark theme. The Capacitor shell adds `mcos-app` + `mcos-dark` to
* at document-start when the user enables "Dunkles Design" in the
* native settings; web browsers never get these classes, so every rule below
* is a no-op for regular visitors.
*
* Enqueued LAST (after style.min.css, the per-page CSS and mobile-shell.css)
* so it wins on equal specificity; the `html.mcos-dark` prefix plus targeted
* `!important` overrides the theme's hard-coded light colours.
*
* Palette derived from the theme's own tokens (assets/sass/common/_colors.scss),
* mapped light -> dark:
* page bg #f1f1f1 / #f6f6f6 / #fff -> #111817
* surface white cards -> #1b2624
* surface-2 tiles / inputs / header -> #243331
* border #dce0df / #c5d2cd / #d0d8d5 -> #33403d
* text #274446 / #203839 / #0b4033 -> #e8eeec ($green17)
* text-muted #637575 ($greenGrey) -> #9fb3ac (~$green0)
* brand green #407360 ($green1) as TEXT -> #85e7aa ($green22) for contrast
* accent link -> #85e7aa
* Filled brand-green buttons keep #407360 bg + white text (still high contrast).
* Images / logos / product photos are never filtered (no `invert`).
* ========================================================================== */
html.mcos-dark {
--d-bg: #111817;
--d-surface: #1b2624;
--d-surface-2: #243331;
--d-border: #33403d;
--d-text: #e8eeec;
--d-text-muted: #9fb3ac;
--d-green: #85e7aa;
--d-green-soft: #8ac7b6;
--d-brand: #407360;
color-scheme: dark;
}
/* ---- Base ---------------------------------------------------------------- */
html.mcos-dark,
html.mcos-dark body {
background-color: var(--d-bg) !important;
color: var(--d-text) !important;
}
/* ---- Surfaces ------------------------------------------------------------ *
* The theme paints light backgrounds on a wide range of structural and
* component wrappers. Darken them broadly, but exclude interactive accents
* (buttons/badges/pills/toggles) and media so they keep their own colours. */
html.mcos-dark :is(
main, section, article, aside, header, footer,
.site-content, .site-header, #masthead, #primary, #secondary,
.box, .info-box, .entry-content, .page-content,
[class*="card"], [class*="-box"], [class*="wrap"], [class*="inner"],
[class*="container"], [class*="content"], [class*="panel"], [class*="block"],
[class*="tile"], [class*="overview"], [class*="dash"], [class*="section"],
[class*="modal"], [class*="popup"], [class*="overlay"], [class*="drawer"],
[class*="accordion"], [class*="list-item"], [class*="row"],
details, [class*="item"], [class*="faq"], [class*="question"],
[class*="answer"], [class*="pages"], [class*="pagination"], [class*="field"],
[class*="group"], [class*="table"], [class*="summary"], [class*="detail"]
):not([class*="btn"]):not([class*="button"]):not([class*="badge"]):not([class*="pill"]):not([class*="chip"]):not([class*="tag"]):not([class*="status"]):not([class*="toggle"]):not(img):not(svg):not([class*="icon"]):not([class*="gradient"]):not([class*="image"]):not([class*="photo"]):not([class*="thumb"]):not([class*="avatar"]):not([class*="logo"]):not([class*="picture"]) {
background-color: var(--d-surface) !important;
/* Drop decorative light gradients the theme layers via background-image
* (e.g. .faq-page__hero's linear-gradient(#f9fbfa …)) — they paint over the
* background-color above and show as pale bands on the dark surface. Content
* images use , so they're unaffected (and media classes are excluded). */
background-image: none !important;
/* Also light text: many components (e.g. .info-box, .accordion-header) set a
* dark-green color directly on the container, which the element-list text
* rule below doesn't match. The 11 :not() guards inflate this selector's
* specificity well past the theme's class rules, so the container — and any
* descendant text that inherits from it — becomes readable. Links, buttons
* and status pills set their own colour on their own element and still win. */
color: var(--d-text) !important;
border-color: var(--d-border) !important;
}
/* Elevated micro-surfaces: stat tiles, inputs-on-cards, table heads, header. */
html.mcos-dark :is(
.site-header, #masthead, .dash-stat, .key-value,
[class*="stat"], [class*="suggestions"], thead, .table-head
):not([class*="btn"]):not([class*="button"]):not([class*="status"]) {
background-color: var(--d-surface-2) !important;
border-color: var(--d-border) !important;
}
/* ---- Text ---------------------------------------------------------------- *
* Force readable text everywhere, then re-assert accents below. */
html.mcos-dark :is(
h1, h2, h3, h4, h5, h6, p, span, li, dt, dd, label, legend,
strong, b, em, i, small, sub, sup, th, td, figcaption, blockquote,
.key, .value, .title, [class*="title"], [class*="heading"], [class*="label"],
[class*="text"], [class*="desc"]
) {
color: var(--d-text) !important;
}
/* Muted / secondary text (theme #637575). */
html.mcos-dark :is(
.text-muted, .secondary-text, small, .key,
[class*="muted"], [class*="secondary"], [class*="subtitle"], [class*="caption"],
[class*="hint"], [class*="placeholder"], [class*="disclaimer"],
[class*="strength"], .gfield_description, [class*="gfield_description"],
[class*="-note"], [class*="helper"]
) {
color: var(--d-text-muted) !important;
}
/* ---- Links & brand-green text -------------------------------------------- *
* Brand green (#407360 / #346452 / #368f77) is unreadable on dark, so any
* link or explicitly-green text element is brightened to the accent green. */
/* :not() guards both keep filled CTAs out (handled below) and raise
* specificity above the theme's component link colours (e.g. .faq-page__nav-link
* was rendering a dim #5f8c7b). */
html.mcos-dark a:not([class*="btn"]):not([class*="button"]):not([class*="cta"]):is(#i#i#i#i.c.c.c, *),
html.mcos-dark a :is(span, strong, p, h1, h2, h3, h4) {
color: var(--d-green) !important;
}
html.mcos-dark a:hover {
color: #a8f0c4 !important;
}
/* ---- Buttons ------------------------------------------------------------- *
* Filled brand-green CTAs stay green with white text (high contrast on dark).
* Outline/secondary buttons get a readable light border + accent text. */
html.mcos-dark :is(
.btn-primary, .button.alt, .wc-block-components-button,
input[type="submit"], button.checkout-button, .button-redirect,
.community-profile-gate .btn-mod,
[class*="btn-primary"], [class*="cta"]
):is(#i#i#i#i.c.c.c, *) {
background-color: var(--d-brand) !important;
/* white text, forced past the theme's ID-scoped green via the specificity
* borrow (see the form-controls note) so CTAs never render green-on-green */
color: #ffffff !important;
border-color: var(--d-brand) !important;
}
html.mcos-dark :is(.btn-secondary, .button:not(.alt), .button-outline) {
background-color: transparent !important;
color: var(--d-green) !important;
border-color: var(--d-border) !important;
}
/* Segmented toggles (e.g. pharmacy "Apotheken anzeigen | Karte anzeigen"):
* the inactive segment is transparent with dark theme text — unreadable on
* the dark surface, so give it light text. The active segment keeps its white
* pill, so its text stays dark. */
html.mcos-dark :is([class*="view-btn"], [class*="view-toggle"] button, [class*="segment"] button) {
color: var(--d-text) !important;
}
html.mcos-dark :is([class*="view-btn"], [class*="segment"] button).active {
color: #203839 !important;
}
/* Ghost / link-style buttons that aren't filled CTAs (e.g. Gravity Forms
* "Angaben speichern und später fortfahren") render dim brand-green on the dark
* surface; use the brighter accent so they clear contrast. Filled CTAs keep
* white (their rule's specificity borrow wins); active segments stay dark. */
html.mcos-dark :is(button, [class*="btn"], [class*="button"]):not(.active):not([class*="btn-primary"]):not([class*="cta"]):not([type="submit"]):not([class*="view-btn"]) {
color: var(--d-green) !important;
}
/* Tab bar of the embedded product widget (.tabset → "Bestbewertet" /
* "Günstigste", used in blog posts, archives and manufacturer pages). The theme
* paints the tabs with light $green14/#f0f4f3 fills that the surface rule skips
* (they're