@charset "UTF-8";
body {
    /* ###############################################################################
       FARBPALETTE
       Basisfarben für alle hellen Layouts - es fehlen nur die jeweiligen Theme-farben
       ############################################################################### */
    --color-shade-none: var(--color-shade-light-none);
    --color-shade-1:    var(--color-shade-light-1);
    --color-shade-2:    var(--color-shade-light-2);
    --color-shade-3:    var(--color-shade-light-3);
    --color-shade-4:    var(--color-shade-light-4);
    --color-shade-9:    var(--color-shade-light-9);

    --color-shade-none-contrast: var(--color-shade-dark-4);
    --color-shade-1-contrast:    var(--color-shade-dark-3);
    --color-shade-2-contrast:    var(--color-shade-dark-2);
    --color-shade-3-contrast:    var(--color-shade-dark-1);
    --color-shade-4-contrast:    var(--color-shade-dark-none);
    --color-shade-9-contrast:    var(--color-shade-light-none);

    /* Eine leere Seite, die Leinwand unserer App*/
    --color-main-background: var(--color-shade-1);
    --color-main-font: #484848;
    --color-main-header: #333;

    /* Grafische Benutzerinterface-Elemente: Dialoge, Popups, Listen */
    --color-card-background: #FFFFFF;
    --color-card-font: #484848;
    --color-card-header: #333;

    /* Toolbars und Header für grafische Benutzerinterface-Elemente */
    --color-toolbar-back: #E1E1E1;
    --color-toolbar-font: #808080;
    --color-toolbar-separator: #CCC;
    --color-toolbar-button: #e1e0e5;
    --color-toolbar-button-hover: var(--color-accent);
    --color-toolbar-font-hover: var(--color-accent-contrast);
    --color-tr-lodd: var(--color-tr-lodd-light, transparent);

  /* ###############################################################################
     Spezialisierung: Bestimmte UI-Elemente bedienen sich aus der obigen Farbpalette
     Diese Variablen werden in manchen Layouts neu zugewiesen
     ############################################################################### */
    --chip-color: rgba(128,128,128,0.125);
    --color-menu1-back: var(--color-primary-contrast);
    --color-menu1-back-hover: var(--color-primary);
    --color-menu1-font: var(--color-primary);
    --color-menu1-font-hover: var(--color-primary-contrast);
    --color-menu2-back: var(--color-primary);
    --color-menu2-back-hover: var(--color-primary-contrast);
    --color-menu2-font: var(--color-primary-contrast);
    --color-menu2-font-hover: var(--color-primary);
    --color-menu3-back: var(--color-primary);
    --color-menu3-back-hover: var(--color-main-background);
    --color-menu3-font: var(--color-primary-contrast);
    --color-menu3-font-hover: var(--color-main-font);
    --color-default-border: #eceff1;
    --color-sidebar-border: #f2f2f2;
    --color-table-separator: #e1e0e5;
    --color-table-back: var(--color-card-background);
    --color-footer-back: var(--color-toolbar-back);
    --color-footer-font: var(--color-toolbar-font);
    --color-quickfilter-back: rgba(245,245,245,0.75);
    --color-quickfilter-font: var(--color-toolbar-font);

    /* Inputs */
    --border-input: 1px solid currentColor;
    --border-radius-input: 0;
    --border-radius-input-button: var(--border-radius-input);
    --color-input-font: inherit;
    --color-input-background: var(--color-card-background);
    --color-scrollbar-track: rgba(128,128,128,0.25);
    --color-scrollbar-handle: var(--color-toolbar-button);
    --color-default-hover:  var(--color-default-hover-light);
    --color-default-hover-contrast: #333;
    --color-current-item: var(--color-current-item-light);
    --color-selected-item: var(--color-selected-item-light);
    --color-selected-item-hover: var(--color-selected-item-hover-light);
    --color-tint-25: var(--color-tint-light-25);
    --color-tint-50: var(--color-tint-light-50);
    --color-tint-75: var(--color-tint-light-75);
    --color-tint-weekend: var(--color-tint-weekend-light);
    --color-tint-holiday: var(--color-tint-holiday-light);
    --color-tint-vacation: var(--color-tint-vacation-light);
    --color-tint-sick: var(--color-tint-sick-light);
    --color-tint-birthday: var(--color-tint-birthday-light);
    --color-tint-extern: var(--color-tint-extern-light);
    --color-board-card: var(--color-board-card-light);
    --color-font-weekend: var(--color-font-weekend-light);
    --color-worker-cap-free: var(  --color-worker-cap-free-light);
    --color-worker-cap-error: var(--color-worker-cap-error-light);
    --color-worker-cap-time: var(--color-worker-cap-time-light);

    --backdrop-filter-ui: var(--backdrop-filter-ui-light);

    /*  Chart Color */
    --color-chart-0:  var(--color-chart0 );
    --color-chart-1:  var(--color-chart1);
    --color-chart-2:  var(--color-chart2);
    --color-chart-3:  var(--color-chart3);
    --color-chart-4:  var(--color-chart4);
    --color-chart-5:  var(--color-chart5);
    --color-chart-6:  var(--color-chart6);
    --color-chart-7:  var(--color-chart7);
    --color-chart-8:  var(--color-chart8);
    --color-chart-9:  var(--color-chart9);
    --color-chart-10: var(--color-chart10);
}