@CHARSET "UTF-8";

/*
 * Dunkle Darstellung.
 *
 * Setzt nur Custom Properties aus synqony_brand.css. Sie greifen, wenn <html>
 * data-darstellung traegt (darstellungKopf(), inc/all/selectDesign.inc):
 * "system" folgt prefers-color-scheme, "dunkel" gilt immer, "hell" und kein
 * Attribut lassen die Seite hell. Beide Bloecke tragen dieselben Werte
 * (tests/design/ThemeTest.php).
 *
 * html:root mit Attribut schlaegt jeden :root-Block der Buendel und das Theme
 * (html:root) - die dunkle Darstellung gilt also auch ueber "klassisch".
 *
 * Der Grund ist das Markenblau #091123 (synqony.com, --e-global-color-
 * secondary). Karten und Gitter stehen auf einem dunklen Blaugruen aus dem
 * Markenverlauf (#0a2d37, 1,29:1 gegen den Grund); Zeilen, Kanten und die
 * Mint-getoente Flaeche folgen demselben Ton.
 *
 * Unveraendert bleiben die Markenflaechen: Mint (--syn-primary) und Navy
 * (--syn-secondary, --syn-footer-bg) samt der Schrift darauf, der
 * Markenverlauf der Balken und --syn-tab-active (#09826a: 3,9:1 auf dem
 * Grund, 3,06:1 auf den Karten, 4,8:1 fuer Weiss darauf).
 * --syn-bar-ink-muted steht auf seinem hellen Wert, weil es sonst
 * --syn-primary-soft folgte und im Fuss auf Navy verschwaende. Ebenso
 * --syn-bar-field-ink: die Felder der Anmeldeleiste bleiben weiss.
 * --syn-footer-rule ist Mint mit 40 % Deckkraft: der Fuss ist so blau wie der
 * Grund und braucht dunkel eine Linie.
 * --syn-overlay ist schwarz: hell folgt der Schleier hinter modalen Dialogen
 * dem Navy, und das ist dunkel der Grund der Seite - der Schleier wirkte nicht.
 *
 * --syn-field-chevron ist ein ganzes SVG: der Pfeil der Auswahlfelder traegt
 * seine Strichfarbe im Bild.
 *
 * Feste Farben in style-Attributen der Erzeuger und Skripte stehen als
 * var(--syn-x, <alter Wert>) da - der Rueckfall gilt fuer alba, das keine
 * Tokens fuehrt (tests/design/DunkleDarstellungFesteFarbenTest.php). Hell
 * bleiben Dokumente ohne Buendel (Signierseite, Fehlerseite, Berichte, PDF,
 * Mail), die alte Anmeldemaske und bildhafte Grafiken.
 */
@media (prefers-color-scheme: dark) {
    html:root[data-darstellung="system"] {
        color-scheme: dark;
        --syn-bg: #091123;
        --syn-bg-muted: #0d3440;
        --syn-surface: #0a2d37;
        --syn-surface-sunken: #091123;
        --syn-primary-soft: #0d3440;
        --syn-bar-ink-muted: #eef9f6;
        --syn-bar-field-ink: #091123;
        --syn-footer-rule: rgba(15, 216, 177, .4);
        --syn-overlay: #000000;
        --syn-primary-tint: #1a4540;
        --syn-watermark: #22524b;
        --syn-primary-ink: #6fe6cf;
        --syn-text: #e6ecf2;
        --syn-text-secondary: #c4cdd8;
        --syn-text-muted: #a3afbe;
        --syn-text-brand: #e6ecf2;
        --syn-placeholder: #8793a1;
        --syn-link: #3fdcbc;
        --syn-link-hover: #ffffff;
        --syn-border: #285563;
        --syn-line: #285563;
        --syn-line-strong: #376674;
        --syn-line-field: #7f96a0;
        --syn-field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 8 14 8' fill='none' stroke='%23a3afbe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
        --syn-row-stripe: #0d3440;
        --syn-row-hover: #114050;
        --syn-row-hover-strong: #154b5b;
        --syn-danger: #ff8f84;
        --syn-danger-bg: #3b1a1a;
        --syn-warning: #ffd35c;
        --syn-warning-bg: #3a3010;
        --syn-success: #5fd6a9;
        --syn-success-bg: #0f2e25;
        --syn-info: #8cc4f2;
        --syn-info-bg: #12283d;
        --syn-status-progress: var(--syn-warning);
        --syn-zeichen-laden: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3afbe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1s' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E");
        --syn-zeichen-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3afbe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2'/%3E%3C/svg%3E");
        --syn-zeichen-mobil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3afbe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14'/%3E%3Cpath d='M11 4h2'/%3E%3Cpath d='M12 17v.01'/%3E%3C/svg%3E");
        --syn-zeichen-post: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3afbe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10'/%3E%3Cpath d='M3 7l9 6l9 -6'/%3E%3C/svg%3E");
        --syn-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
        --syn-shadow-dialog: 0 8px 32px rgba(0, 0, 0, 0.55);
        --syn-shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.45);
        --syn-tooltip-bg: #154b5b;
        --syn-tooltip-border: var(--syn-line-strong);
        --syn-tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
        --syn-error-tip-bg: var(--syn-danger-bg);
        --syn-error-tip-border: var(--syn-danger);
        --syn-error-tip-ink: var(--syn-text);
        --syn-error-tip-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    }
}

html:root[data-darstellung="dunkel"] {
    color-scheme: dark;
    --syn-bg: #091123;
    --syn-bg-muted: #0d3440;
    --syn-surface: #0a2d37;
    --syn-surface-sunken: #091123;
    --syn-primary-soft: #0d3440;
    --syn-bar-ink-muted: #eef9f6;
    --syn-bar-field-ink: #091123;
    --syn-footer-rule: rgba(15, 216, 177, .4);
    --syn-overlay: #000000;
    --syn-primary-tint: #1a4540;
    --syn-watermark: #22524b;
    --syn-primary-ink: #6fe6cf;
    --syn-text: #e6ecf2;
    --syn-text-secondary: #c4cdd8;
    --syn-text-muted: #a3afbe;
    --syn-text-brand: #e6ecf2;
    --syn-placeholder: #8793a1;
    --syn-link: #3fdcbc;
    --syn-link-hover: #ffffff;
    --syn-border: #285563;
    --syn-line: #285563;
    --syn-line-strong: #376674;
    --syn-line-field: #7f96a0;
    --syn-field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 8 14 8' fill='none' stroke='%23a3afbe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
    --syn-row-stripe: #0d3440;
    --syn-row-hover: #114050;
    --syn-row-hover-strong: #154b5b;
    --syn-danger: #ff8f84;
    --syn-danger-bg: #3b1a1a;
    --syn-warning: #ffd35c;
    --syn-warning-bg: #3a3010;
    --syn-success: #5fd6a9;
    --syn-success-bg: #0f2e25;
    --syn-info: #8cc4f2;
    --syn-info-bg: #12283d;
    --syn-status-progress: var(--syn-warning);
    --syn-zeichen-laden: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3afbe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1s' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E");
    --syn-zeichen-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3afbe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2'/%3E%3C/svg%3E");
    --syn-zeichen-mobil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3afbe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14'/%3E%3Cpath d='M11 4h2'/%3E%3Cpath d='M12 17v.01'/%3E%3C/svg%3E");
    --syn-zeichen-post: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3afbe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10'/%3E%3Cpath d='M3 7l9 6l9 -6'/%3E%3C/svg%3E");
    --syn-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --syn-shadow-dialog: 0 8px 32px rgba(0, 0, 0, 0.55);
    --syn-shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.45);
    --syn-tooltip-bg: #154b5b;
    --syn-tooltip-border: var(--syn-line-strong);
    --syn-tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    --syn-error-tip-bg: var(--syn-danger-bg);
    --syn-error-tip-border: var(--syn-danger);
    --syn-error-tip-ink: var(--syn-text);
    --syn-error-tip-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}