/* Dunkles Farbschema, experimentell.
   Schaltet über <html data-farbschema="dunkel"> (Schalter im Footer, Wahl in
   localStorage, siehe functions.php). Tauscht nur die Paletten-Presets; alle
   Blöcke und Theme-Styles laufen darüber.
   shortcut: Werte stehen hier statt in design/tokens.json; mit dem Ende der
   Testphase als zweiter Farbsatz in tokens.json und den Generator übernehmen. */

html[data-farbschema="dunkel"] {
    color-scheme: dark;

    --wp--preset--color--base: #1C1C1A;
    --wp--preset--color--primary-light: #23221F;
    --wp--preset--color--secondary-20: #34332F;
    --wp--preset--color--line: #46453F;
    --wp--preset--color--text: #E8E6E0;
    --wp--preset--color--secondary: #ABA9A1;
    --wp--preset--color--dark: #121211;
    /* Akzent im Dunkeln gelb statt Türkis: Links, Icons, Häkchen */
    --wp--preset--color--accent: #E5A100;
    --wp--preset--color--accent-dark-wcag: #F2C14E;
    --wp--preset--color--accent-50: #4A3A12;
    --wp--preset--color--primary-50: #4A3A12;
    --wp--preset--color--error: #FF8A6E;
    --wp--preset--color--error-subtle: #3A211B;
    --wp--preset--color--product-teleform: #3A341A;
    --wp--preset--color--product-mfiles: #1B3638;
    --wp--preset--color--product-mfiles-qms: #2F3419;
    --wp--preset--color--product-liquidoffice: #3D2422;

    /* Schrift auf festen Flächen bleibt wie im hellen Schema */
    --color-on-dark: #FFFFFF;
    --color-on-brand: #333333;

    background-color: var(--wp--preset--color--base);
}

/* Glasflächen (tokens components.glasoptik) mit dunklem Grund */
html[data-farbschema="dunkel"] .header_section::before,
html[data-farbschema="dunkel"] .epi-jumpnav::before,
html[data-farbschema="dunkel"] :is(.header_section_mobile, .mega_panel_content, .epi-filter__liste, .epi-suche) {
    background-color: rgb(28 28 26 / 0.8);
}

/* Bilder etwas zurücknehmen, damit sie nicht aus der dunklen Seite strahlen */
html[data-farbschema="dunkel"] :is(img, video):not([src$=".svg"]) {
    filter: brightness(0.9);
}

/* Fokusring bleibt Türkis, damit er neben Orange und Gelb erkennbar ist */
html[data-farbschema="dunkel"] :focus-visible {
    outline-color: #5CC2CB;
}

/* Kontaktformular: Glas und Felder dunkel statt Weiß (formular.css) */
html[data-farbschema="dunkel"] .epi-formular--glas > :is(.epi-formular__form, .epi-formular__erfolg) {
    border-color: rgb(255 255 255 / 0.12);
    background-color: rgb(28 28 26 / 0.75);
}

html[data-farbschema="dunkel"] .epi-formular.epi-formular--glas :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea),
html[data-farbschema="dunkel"] .epi-formular--glas .epi-formular__feld--kacheln .epi-formular__option {
    background-color: rgb(255 255 255 / 0.05);
}

html[data-farbschema="dunkel"] .epi-formular.epi-formular--glas .epi-formular__feld:not(.ist-fehlerhaft) :is(input:not([type="checkbox"], [type="radio"]), select, textarea):hover,
html[data-farbschema="dunkel"] .epi-formular--glas .epi-formular__option:hover,
html[data-farbschema="dunkel"] .epi-formular--glas .epi-formular__feld--kacheln .epi-formular__option:hover {
    background-color: rgb(255 255 255 / 0.1);
}

/* Kunden- und Produktlogos: Graustufen umkehren, sonst dunkel auf dunkel; auch beim Zeigen,
   weil schwarze Logos im Original wieder verschwinden würden */
html[data-farbschema="dunkel"] :is(.epi-logoband__logo, .gb_ref_logos, .epi-bereich__logos, .epi-kundenlogo) img,
html[data-farbschema="dunkel"] img.mega_link_logo,
html[data-farbschema="dunkel"] :is(.epi-logoband__logo, .gb_ref_logos) img:is(:hover, :focus-visible) {
    filter: grayscale(1) invert(1) brightness(1.1);
}


/* Bildangaben (450-bildangaben.css): dunkles statt weißes Etikett, sonst helle Schrift auf hellem Glas */
html[data-farbschema="dunkel"] .epi-bildangabe:not(.epi-bildangabe--unterschrift) {
    background-color: rgb(28 28 26 / 0.65);
}

html[data-farbschema="dunkel"] .epi-card__media > .epi-bildangabe {
    background: none;
}