/**
 * theme-variables.css
*/

:root {
    --scrollbar-width: 0px;
    /* nötig wenn Overlay Menü offen ist */

    --root-font-size: 22px;
    --primary-font: 'Inter', sans-serif;
    --secondary-font: 'Inter', sans-serif;

    --body-text-color: #000;
    --heading-text-color: #2C2C2C;
    --subheading-text-color: #7CBA09;

    --color-white: #fff;
    --color-dark: #2C2C2C;
    --color-gzo: #7CBA09;
    --color-dark-green: #1E6105;
    --color-grey: #8F9FA3;
    --color-input: #696665;
    --color-border: #DDDDDD;

    --background-white: #fff;
    --background-dark: #0C1518;
    --background-gzo: #7CBA09;
    --background-grey: #D9D9D9; 
    --background-grey-light: #F6F6F6; 
    --background-grey-dark: #B5B5B5;

    --section-padding-top-bottom: 5rem 0;
    --section-padding-top: 5rem 0 0;
    --section-padding-bottom: 0 0 5rem;
    --section-padding-bottom-small: 0 0 2.5rem;

    --border-radius-half: .5rem;
    --border-radius-one: 1rem;
    --border-radius-one-quarter: 1.25rem;
    --border-radius-one-half: 1.5rem;
}


@media screen and (max-width: 1700px) {

    :root {
        --root-font-size: 20px;
        
    }

}


@media screen and (max-width: 1600px) {

    :root {
        --root-font-size: 19px;
        
    }

}


@media screen and (max-width: 1500px) {

    :root {
        --root-font-size: 18px;
        --section-padding-top-bottom: 4rem 0;
        --section-padding-top: 4rem 0 0;
        --section-padding-bottom: 0 0 4rem;
        --section-padding-bottom-small: 0 0 2rem;
    }

}


@media screen and (max-width: 1100px) {

    :root {
        --root-font-size: 17px;
    }

}



@media screen and (max-width: 600px) {

    :root {
        --root-font-size: 16px;
        --border-radius-half: .3rem;
        --border-radius-one: .75rem;
        --border-radius-one-quarter: 1rem;
        --border-radius-one-half: 1.25rem;
    }

}