body {
    /* hier können FluentUI Variablen überschrieben werden */
    --body-font: Montserrat, Arial, Verdana, sans-serif;
    --type-ramp-base-font-size: 16px;
    --control-corner-radius: 5;
    --layer-corner-radius: 10;
    --accent-fill-rest: #c42026;

    /* >>> default generated values for base-color c42026: >>> */
    
    /*--accent-base-color: #c42026;*/
    /*--direction: ltr;*/
    /*--neutral-layer-card-container: #f3f3f3;*/
    /*--neutral-layer-floating: #ffffff;*/
    /*--neutral-layer-1: #fbfbfb;*/
    /*--neutral-layer-2: #f3f3f3;*/
    /*--neutral-layer-3: #ebebeb;*/
    /*--neutral-layer-4: #e0e0e0;*/
    /*--fill-color: #fbfbfb;*/
    /*--accent-fill-rest: #c32623;*/
    /*--accent-fill-hover: #da302c;*/
    /*--accent-fill-active: #e04b46;*/
    /*--accent-fill-focus: #cc2724;*/
    /*--accent-foreground-rest: #811615;*/
    /*--accent-foreground-hover: #6c0d0d;*/
    /*--accent-foreground-active: #c32623;*/
    /*--accent-foreground-focus: #811615;*/
    /*--accent-stroke-control-rest: linear-gradient(#c93c39 90%, #851a18 100%);*/
    /*--accent-stroke-control-hover: linear-gradient(#dd433f 90%, #9b221f 100%);*/
    /*--accent-stroke-control-active: #e35b57;*/
    /*--accent-stroke-control-focus: linear-gradient(#d13d3a 90%, #8d1b19 100%);*/
    /*--neutral-fill-rest: #ffffff;*/
    /*--neutral-fill-hover: #f7f7f7;*/
    /*--neutral-fill-active: #fbfbfb;*/
    /*--neutral-fill-focus: #fbfbfb;*/
    /*--neutral-fill-input-rest: #ffffff;*/
    /*--neutral-fill-input-hover: #f7f7f7;*/
    /*--neutral-fill-input-active: #fbfbfb;*/
    /*--neutral-fill-input-focus: #ffffff;*/
    /*--neutral-fill-input-alt-rest: #f3f3f3;*/
    /*--neutral-fill-input-alt-hover: #ebebeb;*/
    /*--neutral-fill-input-alt-active: #e0e0e0;*/
    /*--neutral-fill-input-alt-focus: #f3f3f3;*/
    /*--neutral-fill-layer-rest: #ffffff;*/
    /*--neutral-fill-layer-hover: #ffffff;*/
    /*--neutral-fill-layer-active: #ffffff;*/
    /*--neutral-fill-layer-alt-rest: #ffffff;*/
    /*--neutral-fill-secondary-rest: #efefef;*/
    /*--neutral-fill-secondary-hover: #f3f3f3;*/
    /*--neutral-fill-secondary-active: #f7f7f7;*/
    /*--neutral-fill-secondary-focus: #efefef;*/
    /*--neutral-fill-stealth-rest: #fbfbfb;*/
    /*--neutral-fill-stealth-hover: #efefef;*/
    /*--neutral-fill-stealth-active: #f3f3f3;*/
    /*--neutral-fill-stealth-focus: #fbfbfb;*/
    /*--neutral-fill-strong-rest: #717171;*/
    /*--neutral-fill-strong-hover: #4b4b4b;*/
    /*--neutral-fill-strong-active: #868686;*/
    /*--neutral-fill-strong-focus: #717171;*/
    /*--neutral-foreground-rest: #1a1a1a;*/
    /*--neutral-foreground-hover: #7a7a7a;*/
    /*--neutral-foreground-active: #a8a8a8;*/
    /*--neutral-foreground-focus: #1a1a1a;*/
    /*--neutral-foreground-hint: #717171;*/
    /*--neutral-stroke-rest: #d6d6d6;*/
    /*--neutral-stroke-hover: #c6c6c6;*/
    /*--neutral-stroke-active: #e0e0e0;*/
    /*--neutral-stroke-focus: #d6d6d6;*/
    /*--neutral-stroke-control-rest: linear-gradient(#efefef 90%, #d6d6d6 100%);*/
    /*--neutral-stroke-control-hover: linear-gradient(#e5e5e5 90%, #cecece 100%);*/
    /*--neutral-stroke-control-active: #e5e5e5;*/
    /*--neutral-stroke-control-focus: linear-gradient(#e5e5e5 90%, #cecece 100%);*/
    /*--neutral-stroke-divider-rest: #ebebeb;*/
    /*--neutral-stroke-input-rest: linear-gradient(#efefef calc(100% - 1px), #929292 calc(100% - 1px), #929292);*/
    /*--neutral-stroke-input-hover: linear-gradient(#e5e5e5 calc(100% - 1px), #8a8a8a calc(100% - 1px), #8a8a8a);*/
    /*--neutral-stroke-input-active: #e5e5e5;*/
    /*--neutral-stroke-input-focus: linear-gradient(#e5e5e5 calc(100% - 1px), #8a8a8a calc(100% - 1px), #8a8a8a);*/
    /*--neutral-stroke-layer-rest: #efefef;*/
    /*--neutral-stroke-layer-hover: #efefef;*/
    /*--neutral-stroke-layer-active: #efefef;*/
    /*--neutral-stroke-strong-rest: #636363;*/
    /*--neutral-stroke-strong-hover: #636363;*/
    /*--neutral-stroke-strong-active: #636363;*/
    /*--neutral-stroke-strong-focus: #636363;*/
    /*--neutral-fill-inverse-rest: #131313;*/
    /*--neutral-fill-inverse-hover: #272727;*/
    /*--neutral-fill-inverse-active: #000000;*/
    /*--neutral-fill-inverse-focus: #131313;*/
    /*--neutral-fill-stealth-rest-on-neutral-fill-layer-rest: #ffffff;*/
    /*--neutral-fill-stealth-hover-on-neutral-fill-layer-rest: #f3f3f3;*/
    /*--neutral-fill-stealth-active-on-neutral-fill-layer-rest: #f7f7f7;*/
    /*--input-placeholder-rest: #767676;*/
    /*--input-placeholder-hover: #717171;*/
    /*--input-filled-placeholder-rest: #6c6c6c;*/
    /*--input-filled-placeholder-hover: #6c6c6c;*/
    /*--clear-button-hover: #f3f3f3;*/
    /*--clear-button-active: #f7f7f7;*/
    /*--tree-item-expand-collapse-hover: #e0e0e0;*/
    /*--tree-item-expand-collapse-selected-hover: #e0e0e0;*/


    /* >>> default all >>> */
    
    /*--direction: ltr;*/
    /*--disabled-opacity: 0.3;*/
    /*--base-height-multiplier: 8;*/
    /*--base-horizontal-spacing-multiplier: 3;*/
    /*--density: 0;*/
    /*--design-unit: 4;*/
    /*--control-corner-radius: 4;*/
    /*--layer-corner-radius: 8;*/
    /*--stroke-width: 1;*/
    /*--focus-stroke-width: 2;*/
    /*--body-font: "Segoe UI Variable", "Segoe UI", sans-serif;*/
    /*--font-weight: 400;*/
    /*--type-ramp-base-font-size: 14px;*/
    /*--type-ramp-base-line-height: 20px;*/
    /*--type-ramp-base-font-variations: "wght" 400, "opsz" 10.5;*/
    /*--type-ramp-minus-1-font-size: 12px;*/
    /*--type-ramp-minus-1-line-height: 16px;*/
    /*--type-ramp-minus-1-font-variations: "wght" 400, "opsz" 8;*/
    /*--type-ramp-minus-2-font-size: 10px;*/
    /*--type-ramp-minus-2-line-height: 14px;*/
    /*--type-ramp-minus-2-font-variations: "wght" 400, "opsz" 8;*/
    /*--type-ramp-plus-1-font-size: 16px;*/
    /*--type-ramp-plus-1-line-height: 22px;*/
    /*--type-ramp-plus-1-font-variations: "wght" 400, "opsz" 10.5;*/
    /*--type-ramp-plus-2-font-size: 20px;*/
    /*--type-ramp-plus-2-line-height: 26px;*/
    /*--type-ramp-plus-2-font-variations: "wght" 400, "opsz" 10.5;*/
    /*--type-ramp-plus-3-font-size: 24px;*/
    /*--type-ramp-plus-3-line-height: 32px;*/
    /*--type-ramp-plus-3-font-variations: "wght" 400, "opsz" 10.5;*/
    /*--type-ramp-plus-4-font-size: 28px;*/
    /*--type-ramp-plus-4-line-height: 36px;*/
    /*--type-ramp-plus-4-font-variations: "wght" 400, "opsz" 36;*/
    /*--type-ramp-plus-5-font-size: 32px;*/
    /*--type-ramp-plus-5-line-height: 40px;*/
    /*--type-ramp-plus-5-font-variations: "wght" 400, "opsz" 36;*/
    /*--type-ramp-plus-6-font-size: 40px;*/
    /*--type-ramp-plus-6-line-height: 52px;*/
    /*--type-ramp-plus-6-font-variations: "wght" 400, "opsz" 36;*/
    /*--base-layer-luminance: 0.98;*/
    /*--neutral-base-color: #808080;*/
    /*--accent-base-color: #0078d4;*/
    /*--neutral-layer-card-container: #f3f3f3;*/
    /*--neutral-layer-floating: #ffffff;*/
    /*--neutral-layer-1: #fbfbfb;*/
    /*--neutral-layer-2: #f3f3f3;*/
    /*--neutral-layer-3: #ebebeb;*/
    /*--neutral-layer-4: #e0e0e0;*/
    /*--fill-color: #fbfbfb;*/
    /*--accent-fill-rest: #036ac4;*/
    /*--accent-fill-hover: #0473ce;*/
    /*--accent-fill-active: #0481e0;*/
    /*--accent-fill-focus: #036ac4;*/
    /*--foreground-on-accent-rest: #ffffff;*/
    /*--foreground-on-accent-hover: #ffffff;*/
    /*--foreground-on-accent-active: #ffffff;*/
    /*--foreground-on-accent-focus: #ffffff;*/
    /*--accent-foreground-rest: #023b8f;*/
    /*--accent-foreground-hover: #012e7f;*/
    /*--accent-foreground-active: #0360b9;*/
    /*--accent-foreground-focus: #023b8f;*/
    /*--accent-stroke-control-rest: linear-gradient(#1c79ca 90%, #024885 100%);*/
    /*--accent-stroke-control-hover: linear-gradient(#1b80d2 90%, #035292 100%);*/
    /*--accent-stroke-control-active: #1b8ce3;*/
    /*--accent-stroke-control-focus: linear-gradient(#1c79ca 90%, #024885 100%);*/
    /*--neutral-fill-rest: #ffffff;*/
    /*--neutral-fill-hover: #f7f7f7;*/
    /*--neutral-fill-active: #fbfbfb;*/
    /*--neutral-fill-focus: #fbfbfb;*/
    /*--neutral-fill-input-rest: #ffffff;*/
    /*--neutral-fill-input-hover: #f7f7f7;*/
    /*--neutral-fill-input-active: #fbfbfb;*/
    /*--neutral-fill-input-focus: #ffffff;*/
    /*--neutral-fill-input-alt-rest: #f3f3f3;*/
    /*--neutral-fill-input-alt-hover: #ebebeb;*/
    /*--neutral-fill-input-alt-active: #e0e0e0;*/
    /*--neutral-fill-input-alt-focus: #f3f3f3;*/
    /*--neutral-fill-layer-rest: #ffffff;*/
    /*--neutral-fill-layer-hover: #ffffff;*/
    /*--neutral-fill-layer-active: #ffffff;*/
    /*--neutral-fill-layer-alt-rest: #ffffff;*/
    /*--neutral-fill-secondary-rest: #efefef;*/
    /*--neutral-fill-secondary-hover: #f3f3f3;*/
    /*--neutral-fill-secondary-active: #f7f7f7;*/
    /*--neutral-fill-secondary-focus: #efefef;*/
    /*--neutral-fill-stealth-rest: #fbfbfb;*/
    /*--neutral-fill-stealth-hover: #efefef;*/
    /*--neutral-fill-stealth-active: #f3f3f3;*/
    /*--neutral-fill-stealth-focus: #fbfbfb;*/
    /*--neutral-fill-strong-rest: #717171;*/
    /*--neutral-fill-strong-hover: #4b4b4b;*/
    /*--neutral-fill-strong-active: #868686;*/
    /*--neutral-fill-strong-focus: #717171;*/
    /*--neutral-foreground-rest: #1a1a1a;*/
    /*--neutral-foreground-hover: #7a7a7a;*/
    /*--neutral-foreground-active: #a8a8a8;*/
    /*--neutral-foreground-focus: #1a1a1a;*/
    /*--neutral-foreground-hint: #717171;*/
    /*--neutral-stroke-rest: #d6d6d6;*/
    /*--neutral-stroke-hover: #c6c6c6;*/
    /*--neutral-stroke-active: #e0e0e0;*/
    /*--neutral-stroke-focus: #d6d6d6;*/
    /*--neutral-stroke-control-rest: linear-gradient(#efefef 90%, #d6d6d6 100%);*/
    /*--neutral-stroke-control-hover: linear-gradient(#e5e5e5 90%, #cecece 100%);*/
    /*--neutral-stroke-control-active: #e5e5e5;*/
    /*--neutral-stroke-control-focus: linear-gradient(#e5e5e5 90%, #cecece 100%);*/
    /*--neutral-stroke-divider-rest: #ebebeb;*/
    /*--neutral-stroke-input-rest: linear-gradient(#efefef calc(100% - 1px), #929292 calc(100% - 1px), #929292);*/
    /*--neutral-stroke-input-hover: linear-gradient(#e5e5e5 calc(100% - 1px), #8a8a8a calc(100% - 1px), #8a8a8a);*/
    /*--neutral-stroke-input-active: #e5e5e5;*/
    /*--neutral-stroke-input-focus: linear-gradient(#e5e5e5 calc(100% - 1px), #8a8a8a calc(100% - 1px), #8a8a8a);*/
    /*--neutral-stroke-layer-rest: #efefef;*/
    /*--neutral-stroke-layer-hover: #efefef;*/
    /*--neutral-stroke-layer-active: #efefef;*/
    /*--neutral-stroke-strong-rest: #636363;*/
    /*--neutral-stroke-strong-hover: #636363;*/
    /*--neutral-stroke-strong-active: #636363;*/
    /*--neutral-stroke-strong-focus: #636363;*/
    /*--focus-stroke-outer: #000000;*/
    /*--focus-stroke-inner: #ffffff;*/
    /*--foreground-on-accent-rest-large: #ffffff;*/
    /*--foreground-on-accent-hover-large: #ffffff;*/
    /*--foreground-on-accent-active-large: #ffffff;*/
    /*--foreground-on-accent-focus-large: #ffffff;*/
    /*--neutral-fill-inverse-rest-delta: 0;*/
    /*--neutral-fill-inverse-hover-delta: -3;*/
    /*--neutral-fill-inverse-active-delta: 7;*/
    /*--neutral-fill-inverse-focus-delta: 0;*/
    /*--neutral-fill-inverse-rest: #131313;*/
    /*--neutral-fill-inverse-hover: #272727;*/
    /*--neutral-fill-inverse-active: #000000;*/
    /*--neutral-fill-inverse-focus: #131313;*/
    /*--neutral-fill-stealth-rest-on-neutral-fill-layer-rest: #ffffff;*/
    /*--neutral-fill-stealth-hover-on-neutral-fill-layer-rest: #f3f3f3;*/
    /*--neutral-fill-stealth-active-on-neutral-fill-layer-rest: #f7f7f7;*/
    /*--elevation-shadow-card-rest-size: 4;*/
    /*--elevation-shadow-card-hover-size: 8;*/
    /*--elevation-shadow-card-active-size: 0;*/
    /*--elevation-shadow-card-focus-size: 8;*/
    /*--elevation-shadow-card-rest: 0 0 2px rgba(0, 0, 0, 0.12), 0 calc(4 * 0.5px) calc((4 * 1px)) rgba(0, 0, 0, 0.14);*/
    /*--elevation-shadow-card-hover: 0 0 2px rgba(0, 0, 0, 0.12), 0 calc(8 * 0.5px) calc((8 * 1px)) rgba(0, 0, 0, 0.14);*/
    /*--elevation-shadow-card-active: 0 0 2px rgba(0, 0, 0, 0.12), 0 calc(0 * 0.5px) calc((0 * 1px)) rgba(0, 0, 0, 0.14);*/
    /*--elevation-shadow-card-focus: 0 0 2px rgba(0, 0, 0, 0.12), 0 calc(8 * 0.5px) calc((8 * 1px)) rgba(0, 0, 0, 0.14);*/
    /*--elevation-shadow-tooltip-size: 16;*/
    /*--elevation-shadow-tooltip: 0 0 2px rgba(0, 0, 0, 0.12), 0 calc(16 * 0.5px) calc((16 * 1px)) rgba(0, 0, 0, 0.14);*/
    /*--elevation-shadow-flyout-size: 32;*/
    /*--elevation-shadow-flyout: 0 0 2px rgba(0, 0, 0, 0.2), 0 calc(32 * 0.5px) calc((32 * 1px)) rgba(0, 0, 0, 0.24);*/
    /*--elevation-shadow-dialog-size: 128;*/
    /*--elevation-shadow-dialog: 0 0 2px rgba(0, 0, 0, 0.2), 0 calc(128 * 0.5px) calc((128 * 1px)) rgba(0, 0, 0, 0.24);*/
    /*--input-placeholder-rest: #767676;*/
    /*--input-placeholder-hover: #717171;*/
    /*--input-filled-placeholder-rest: #6c6c6c;*/
    /*--input-filled-placeholder-hover: #6c6c6c;*/
    /*--clear-button-hover: #f3f3f3;*/
    /*--clear-button-active: #f7f7f7;*/
    /*--tree-item-expand-collapse-hover: #e0e0e0;*/
    /*--tree-item-expand-collapse-selected-hover: #e0e0e0;*/
}