/* 00_primitives */
:root {
    /* GRADIENTS */
    --Corporate-Gradient: linear-gradient(74deg, #47593B 10%, #7A9500 50%, #C9D300 90%);
    --Corporate-Gradient-Middle: linear-gradient(46deg, #52662E 0%, #B6C401 100%);
    --gradient-medium: linear-gradient(74deg, var(--surfaces-icon-icon-negativ, #2C3424) 10%, #4A5421 50%, #727710 90%);
    --gradient-dark: linear-gradient(74deg, #1A1B18 10%, #262B10 50%, #434609 90%);

    /* 00_primitives - Value */
    --colors-basics-white: rgba(255, 255, 255, 1.00);
    --colors-basics-black: rgba(0, 0, 0, 1.00);
    --colors-graugruen-50: rgba(232, 236, 227, 1.00);
    --colors-hellgruen-100: rgba(244, 246, 204, 1.00);
    --colors-hellgruen-200: rgba(233, 237, 153, 1.00);
    --colors-hellgruen-300: rgba(223, 229, 102, 1.00);
    --colors-hellgruen-400: rgba(212, 220, 51, 1.00);
    --colors-hellgruen-500: rgba(201, 211, 0, 1.00);
    --colors-hellgruen-600: rgba(161, 169, 0, 1.00);
    --colors-hellgruen-700: rgba(121, 127, 0, 1.00);
    --colors-hellgruen-800: rgba(80, 84, 0, 1.00);
    --colors-hellgruen-900: rgba(40, 42, 0, 1.00);
    --colors-hellgruen-trans-100: rgba(244, 246, 204, 0.30);
    --colors-hellgruen-trans-200: rgba(233, 237, 153, 0.30);
    --colors-hellgruen-trans-300: rgba(223, 229, 102, 0.30);
    --colors-hellgruen-trans-400: rgba(212, 220, 51, 0.30);
    --colors-hellgruen-trans-500: rgba(201, 211, 0, 0.30);
    --colors-hellgruen-trans-600: rgba(161, 169, 0, 0.30);
    --colors-hellgruen-trans-700: rgba(121, 127, 0, 0.30);
    --colors-hellgruen-trans-800: rgba(80, 84, 0, 0.30);
    --colors-hellgruen-trans-900: rgba(40, 42, 0, 0.30);
    --colors-mittelgruen-100: rgba(226, 234, 210, 1.00);
    --colors-mittelgruen-200: rgba(197, 213, 165, 1.00);
    --colors-mittelgruen-300: rgba(168, 191, 121, 1.00);
    --colors-mittelgruen-400: rgba(139, 170, 76, 1.00);
    --colors-mittelgruen-500: rgba(122, 149, 0, 1.00);
    --colors-mittelgruen-600: rgba(88, 119, 25, 1.00);
    --colors-mittelgruen-700: rgba(66, 89, 19, 1.00);
    --colors-mittelgruen-800: rgba(44, 60, 12, 1.00);
    --colors-mittelgruen-900: rgba(22, 30, 6, 1.00);
    --colors-graugruen-100: rgba(219, 221, 216, 1.00);
    --colors-graugruen-200: rgba(183, 187, 177, 1.00);
    --colors-graugruen-300: rgba(146, 154, 138, 1.00);
    --colors-graugruen-400: rgba(110, 120, 99, 1.00);
    --colors-graugruen-500: rgba(74, 86, 60, 1.00);
    --colors-graugruen-600: rgba(59, 69, 48, 1.00);
    --colors-graugruen-700: rgba(44, 52, 36, 1.00);
    --colors-graugruen-800: rgba(30, 34, 24, 1.00);
    --colors-graugruen-900: rgba(15, 17, 12, 1.00);
    --colors-secondary-sek1: rgba(176, 40, 43, 1.00);
    --colors-grey-100: rgba(232, 232, 232, 1.00);
    --colors-grey-200: rgba(209, 209, 209, 1.00);
    --colors-grey-300: rgba(163, 163, 163, 1.00);
    --colors-grey-400: rgba(140, 140, 140, 1.00);
    --colors-grey-500: rgba(116, 116, 116, 1.00);
    --colors-grey-600: rgba(93, 93, 93, 1.00);
    --colors-grey-700: rgba(70, 70, 70, 1.00);
    --colors-grey-800: rgba(47, 47, 47, 1.00);
    --colors-grey-900: rgba(24, 24, 24, 1.00);
    --colors-secondary-sek2: rgba(242, 42, 80, 1.00);
    --colors-secondary-sek3: rgba(227, 216, 203, 1.00);
    --colors-secondary-sek4: rgba(247, 243, 239, 1.00);
    --colors-secondary-sek5: rgba(205, 216, 149, 1.00);
    --colors-secondary-sek5-50: rgba(205, 216, 149, 0.50);
    --colors-secondary-sek5-20: rgba(205, 216, 149, 0.20);
    --colors-secondary-sek6: rgba(205, 216, 149, 1.00);
    --colors-secondary-sek7: rgba(208, 213, 201, 1.00);
    --colors-secondary-sek8: rgba(69, 108, 182, 1.00);
    --sizes_5px-grid-0: 0px;
    --sizes_5px-grid-1: 5px;
    --sizes_5px-grid-2: 10px;
    --sizes_5px-grid-3: 15px;
    --sizes_5px-grid-4: 20px;
    --sizes_5px-grid-5: 25px;
    --sizes_5px-grid-6: 30px;
    --sizes_5px-grid-7: 35px;
    --sizes_5px-grid-8: 40px;
    --sizes_5px-grid-9: 45px;
    --sizes_5px-grid-10: 50px;
    --screen-width-mobile: 393px;
    --screen-width-tablet: 744px;
    --screen-width-desktop: 1440px;
    --screen-width-4k: 3840px;
    --sizes_5px-grid-11: 55px;
    --sizes_5px-grid-12: 60px;
    --sizes_5px-grid-13: 65px;
    --sizes_5px-grid-14: 70px;
    --sizes_5px-grid-15: 75px;
    --sizes_5px-grid-16: 80px;
    --sizes_5px-grid-17: 85px;
    --sizes_5px-grid-18: 90px;
    --sizes_5px-grid-19: 95px;
    --sizes_5px-grid-20: 100px;
    --sizes_5px-grid-21: 105px;
    --sizes_5px-grid-22: 110px;
    --sizes_5px-grid-23: 115px;
    --sizes_5px-grid-24: 120px;
    --sizes_5px-grid-48: 240px;
    --sizes_5px-grid-96: 480px;
    --screen-height-mobile: 852px;
    --screen-height-tablet: 1133px;
    --screen-height-desktop: 1024px;
    --screen-height-4k: 2160px;
    --highlight: rgba(255, 0, 0, 1.00);
}

/* 02_dimension-system - Mobile */
:root {
    --bb-min-padding-side: 46px;
    --bb-padding-side: max(var(--bb-min-padding-side), calc((100vw - 1194px) / 2));
    --bb-padding-side-small: max(var(--bb-min-padding-side), calc((100vw - 960px) / 2));
    --bb-padding-side-large: max(var(--bb-min-padding-side), calc((100vw - 1440px) / 2));

    --spaces-none: var(--sizes_5px-grid-0);
    --spaces-xxs: var(--sizes_5px-grid-1);
    --spaces-xs: var(--sizes_5px-grid-2);
    --spaces-s: var(--sizes_5px-grid-3);
    --spaces-m: var(--sizes_5px-grid-4);
    --spaces-l: var(--sizes_5px-grid-6);
    --spaces-xl: var(--sizes_5px-grid-8);
    --spaces-xxl: var(--sizes_5px-grid-10);
    --spaces-divider: var(--sizes_5px-grid-10);
    --spaces-max-space: var(--sizes_5px-grid-24);
    --typography-font-sizes-display-1: 36px;
    --typography-font-sizes-display-2: 32px;
    --spaces-margin: var(--sizes_5px-grid-6);
    --typography-font-sizes-h1: 28px;
    --spaces-margin-2: var(--sizes_5px-grid-12);
    --typography-font-sizes-h2: 26px;
    --typography-font-sizes-h3: 24px;
    --typography-font-sizes-h4: 22px;
    --typography-font-sizes-h5: 20px;
    --typography-font-sizes-h6: 18px;
    --typography-font-sizes-p-big: 18px;
    --typography-font-sizes-p: 15px;
    --typography-font-sizes-p-small: 13px;
    --typography-font-sizes-btn: 15px;
    --typography-font-sizes-quote: 25px;
    --typography-font-weight-thin: 100px;
    --typography-font-weight-light: 200px;
    --typography-font-weight-regular: 300px;
    --typography-font-weight-medium: 400px;
    --typography-font-weight-bold: 500px;
    --typography-font-weight-extra-bold: 600px;
    --typography-font-weight-heavy: 700px;
    --typography-font-weight-extra-heavy: 800px;
    --typography-font-weight-ultra: 900px;
    --width-device_width: var(--screen-width-mobile);
    --width-device_min-width: 300px;
    --width-device_max-width: 743px;
    --height-device_height: var(--screen-height-mobile);
    --stroke-none: var(--sizes_5px-grid-0);
    --stroke-regular: 2px;
    --stroke-focused: 5px;
    --stroke-pressed: 10px;
    --corner-radius-s: var(--sizes_5px-grid-1);
    --corner-radius-m: var(--sizes_5px-grid-2);
    --corner-radius-l: var(--sizes_5px-grid-3);
    --corner-radius-xl: var(--sizes_5px-grid-4);
    --corner-radius-pill: var(--sizes_5px-grid-48);
    --typography-paragraph-spacing-false: var(--sizes_5px-grid-0);
    --typography-paragraph-spacing-small: var(--sizes_5px-grid-6);
    --typography-paragraph-spacing-big: var(--sizes_5px-grid-12);
    --typography-letter-spacing-default: 0px;
    --typography-letter-spacing-tight: 0px;
    --typography-letter-spacing-wide: 0px;
}

@media only screen and (min-width: 1280px) {

    /* 02_dimension-system - Desktop */
    :root {
        --bb-min-padding-side: 60px;
        --bb-padding-side: max(var(--bb-min-padding-side), calc((100vw - 1194px) / 2));
        --bb-padding-side-small: max(var(--bb-min-padding-side), calc((100vw - 960px) / 2));
        --bb-padding-side-large: max(var(--bb-min-padding-side), calc((100vw - 1440px) / 2));

        --spaces-none: var(--sizes_5px-grid-0);
        --spaces-xxs: var(--sizes_5px-grid-1);
        --spaces-xs: var(--sizes_5px-grid-2);
        --spaces-s: var(--sizes_5px-grid-3);
        --spaces-m: var(--sizes_5px-grid-6);
        --spaces-l: var(--sizes_5px-grid-9);
        --spaces-xl: var(--sizes_5px-grid-12);
        --spaces-xxl: var(--sizes_5px-grid-18);
        --spaces-divider: var(--sizes_5px-grid-24);
        --spaces-max-space: var(--sizes_5px-grid-48);
        --typography-font-sizes-display-1: 36px;
        --typography-font-sizes-display-2: 32px;
        --spaces-margin: var(--sizes_5px-grid-48);
        --typography-font-sizes-h1: 60px;
        --spaces-margin-2: var(--sizes_5px-grid-96);
        --typography-font-sizes-h2: 45px;
        --typography-font-sizes-h3: 35px;
        --typography-font-sizes-h4: 30px;
        --typography-font-sizes-h5: 25px;
        --typography-font-sizes-h6: 22px;
        --typography-font-sizes-p-big: 30px;
        --typography-font-sizes-p: 22px;
        --typography-font-sizes-p-small: 16px;
        --typography-font-sizes-btn: 17px;
        --typography-font-sizes-quote: 30px;
        --typography-font-weight-thin: 100px;
        --typography-font-weight-light: 200px;
        --typography-font-weight-regular: 300px;
        --typography-font-weight-medium: 400px;
        --typography-font-weight-bold: 500px;
        --typography-font-weight-extra-bold: 600px;
        --typography-font-weight-heavy: 700px;
        --typography-font-weight-extra-heavy: 800px;
        --typography-font-weight-ultra: 900px;
        --width-device_width: var(--screen-width-desktop);
        --width-device_min-width: 1024px;
        --width-device_max-width: 1440px;
        --height-device_height: var(--screen-height-desktop);
        --stroke-none: var(--sizes_5px-grid-0);
        --stroke-regular: 2px;
        --stroke-focused: 5px;
        --stroke-pressed: 10px;
        --corner-radius-s: var(--sizes_5px-grid-1);
        --corner-radius-m: var(--sizes_5px-grid-2);
        --corner-radius-l: var(--sizes_5px-grid-3);
        --corner-radius-xl: var(--sizes_5px-grid-4);
        --corner-radius-pill: var(--sizes_5px-grid-48);
        --typography-paragraph-spacing-false: var(--sizes_5px-grid-0);
        --typography-paragraph-spacing-small: var(--sizes_5px-grid-6);
        --typography-paragraph-spacing-big: var(--sizes_5px-grid-12);
        --typography-letter-spacing-default: 0px;
        --typography-letter-spacing-tight: 0px;
        --typography-letter-spacing-wide: 0px;
    }
}

/* 01_color-system - Light Mode */
:root {
    --text-text: var(--colors-graugruen-800);
    --text-text-negativ: var(--colors-basics-white);
    --text-head: var(--colors-graugruen-500);
    --text-link: var(--colors-hellgruen-500);
    --surfaces-general-bg-gruen: var(--colors-graugruen-500);
    --surfaces-button-prim-reg: var(--colors-hellgruen-500);
    --surfaces-button-prim-inac: var(--colors-hellgruen-trans-500);
    --surfaces-button-prim-hov: var(--colors-hellgruen-trans-400);
    --surfaces-button-prim-pres: var(--colors-hellgruen-600);
    --surfaces-button-positiv: var(--colors-secondary-sek1);
    --surfaces-button-negativ: var(--colors-graugruen-700);
    --surfaces-button-tertiary: var(--colors-graugruen-50);
    --surfaces-button-tert-inact: var(--colors-grey-100);
    --surfaces-button-secondary-regular: var(--colors-basics-white);
    --surfaces-button-secondary-inact: var(--colors-basics-white);
    --surfaces-button-secondary-hover: var(--colors-basics-white);
    --surfaces-button-secondary-pressed: var(--colors-basics-white);
    --surfaces-button-innioation-button: var(--colors-secondary-sek5);
    --surfaces-general-bg: var(--colors-basics-white);
    --surfaces-general-surf-1: var(--colors-secondary-sek4);
    --surfaces-general-surf-2: var(--colors-grey-200);
    --surfaces-general-surf-3: var(--colors-grey-300);
    --surfaces-general-surf-4: var(--colors-grey-400);
    --surfaces-general-menu: var(--colors-white-transparency-100);
    --shadow: var(--colors-black-transparency-100);
    --none: rgba(255, 255, 255, 0.00);
    --outlines-btn: var(--colors-hellgruen-500);
    --outlines-btn_foc: var(--colors-secondary-sek5-50);
    --outlines-btn_prs: var(--colors-secondary-sek5-20);
    --outlines-divider: var(--colors-grey-200);
    --outlines-timeline-stripe: var(--colors-mittelgruen-100);
    --chip-surface-default: var(--colors-basics-white);
    --chip-surface-active: var(--colors-graugruen-500);
    --Color: rgba(0, 0, 0, 1.00);
    --text-linie_orange: var(--colors-secondary-sek5);
    --surfaces-icon-icon-positiv: var(--colors-hellgruen-500);
    --surfaces-icon-icon-negativ: var(--colors-graugruen-700);
    --surfaces-bubbles-gruen: var(--colors-hellgruen-500);
    --surfaces-logo-kachel-grey: var(--colors-graugruen-300);
    --chip-light-grey: var(--colors-secondary-sek7);
    --surfaces-logo-kachel-lightgrey: var(--colors-secondary-sek7);
    --surfaces-bubbles-dark: var(--colors-graugruen-500);
    --surfaces-bubbles-middle: var(--colors-mittelgruen-500);
    --surfaces-bubbles-light: var(--colors-secondary-sek1);
    --surfaces-bubbles-white: var(--colors-secondary-sek1);
}

/* 04_components */
:root {
    /* mobile */
    /* string */
    --button-button-variant: mobile;
    --header-header-variant: mobile;
    --menu-menu-variant: mobile;
    /* tablet */
    /* string */
    --button-button-variant: tablet;
    --header-header-variant: tablet;
    --menu-menu-variant: tablet;
    /* desktop */
    /* string */
    --button-button-variant: desktop;
    --header-header-variant: desktop;
    --menu-menu-variant: desktop;
    /* 4k */
    /* string */
    --button-button-variant: 4k;
    --header-header-variant: 4k;
    --menu-menu-variant: 4k;
}

:root {
    --h1-font-family: Montagu Slab;
    --h1-font-style: Medium;
    --h1-font-weight: var(--typography-font-weight-regular);
    --h1-font-size: var(--typography-font-sizes-h1);
    --h1-paragraph-spacing: var(--typography-paragraph-spacing-false);
    --h1-letter-spacing: var(--typography-paragraph-spacing-false);
    --h2-font-family: Montagu Slab;
    --h2-font-style: Medium;
    --h2-font-weight: var(--typography-font-weight-regular);
    --h2-font-size: var(--typography-font-sizes-h2);
    --h2-paragraph-spacing: var(--typography-paragraph-spacing-false);
    --h2-letter-spacing: var(--typography-letter-spacing-default);
    --h3-font-family: Noto Sans;
    --h3-font-style: Regular;
    --h3-font-weight: var(--typography-font-weight-regular);
    --h3-font-size: var(--typography-font-sizes-h3);
    --h3-paragraph-spacing: var(--typography-paragraph-spacing-false);
    --h3-paragraph-spacing-2: var(--typography-paragraph-spacing-false);
    --h3-letter-spacing: var(--typography-letter-spacing-default);
    --h4-font-family: Noto Sans;
    --h4-font-style: Regular;
    --h4-font-weight: var(--typography-font-weight-regular);
    --h4-font-size: var(--typography-font-sizes-h4);
    --h4-paragraph-spacing: var(--typography-paragraph-spacing-false);
    --h4-letter-spacing: var(--typography-letter-spacing-default);
    --h5-font-family: Noto Sans;
    --h5-font-style: Regular;
    --h5-font-weight: var(--typography-font-weight-regular);
    --h5-font-size: var(--typography-font-sizes-h5);
    --h5-paragraph-spacing: var(--typography-paragraph-spacing-false);
    --h5-letter-spacing: var(--typography-letter-spacing-default);
    --h6-font-family: Noto Sans;
    --h6-font-style: Regular;
    --h6-font-weight: var(--typography-font-weight-regular);
    --h6-font-size: var(--typography-font-sizes-h6);
    --h6-paragraph-spacing: var(--typography-paragraph-spacing-false);
    --h6-letter-spacing: var(--typography-letter-spacing-default);
    --p-big-font-family: Noto Sans;
    --p-big-font-style: Light;
    --p-big-font-weight: var(--typography-font-weight-regular);
    --p-big-font-size: var(--typography-font-sizes-p-big);
    --p-big-paragraph-spacing: var(--typography-paragraph-spacing-false);
    --p-big-letter-spacing: var(--typography-letter-spacing-default);
    --p-font-family: Noto Sans;
    --p-font-style: Regular;
    --p-font-weight: var(--typography-font-weight-regular);
    --p-font-size: var(--typography-font-sizes-p);
    --p-paragraph-spacing: var(--typography-paragraph-spacing-false);
    --p-letter-spacing: var(--typography-letter-spacing-default);
    --p-small-font-family: Noto Sans;
    --p-small-font-style: Regular;
    --p-small-font-weight: var(--typography-font-weight-regular);
    --p-small-font-size: var(--typography-font-sizes-p-small);
    --p-small-paragraph-spacing: var(--typography-paragraph-spacing-false);
    --p-small-letter-spacing: var(--typography-letter-spacing-default);
    --button-font-family: Noto Sans;
    --button-font-style: SemiBold;
    --button-font-weight: var(--typography-font-weight-regular);
    --button-font-size: var(--typography-font-sizes-btn);
    --button-paragraph-spacing: var(--typography-paragraph-spacing-false);
    --button-letter-spacing: var(--typography-letter-spacing-default);
    --quote-font-family: noto sans;
    --quote-font-style: Light;
    --quote-font-weight: var(--typography-font-weight-light);
    --quote-font-size: var(--typography-font-sizes-quote);
    --quote-paragraph-spacing: var(--typography-paragraph-spacing-false);
    --quote-letter-spacing: var(--typography-letter-spacing-default);
}