:root {

    font-size: 10px;

    /* FONT-FAMILY */
    --ff-default: 'allerregular', Helvetica, Arial, sans-serif;
    --ff-regular: 'allerregular', Helvetica, Arial, sans-serif;
    --ff-bold: 'allerbold', Helvetica, Arial, sans-serif;

    /* FONT-SIZE */
    --fs-default: 1.2rem;
    --fs-xlarge: calc(var(--fs-default) * 3);
    --fs-large: calc(var(--fs-default) * 2);
    --fs-medium: calc(var(--fs-default) * 1.25);
    --fs-regular: var(--fs-default);
    --fs-small: calc(var(--fs-default) / 2);

    /* LINE-HEIGHT */
    --lh-default: 1.5;
    --lh-box-headline: 1;

    /* COLOR */
    --clr-default: rgba(0, 0, 0, 1);
    --clr-bright: rgba(255, 255, 255, 1);
    --clr-zdin: rgba(16, 6, 159, 1);
    --clr-zdin-trans: rgba(16, 6, 159, 0.15);
    --clr-zl-agrar: rgba(54, 171, 81, 1);
    --clr-zl-agrar-trans: rgba(54, 171, 81, 0.15);
    --clr-zl-circulareconomy: rgba(1, 150, 100, 1);
    --clr-zl-circulareconomy-trans: rgba(1, 150, 100, 0.15);
    --clr-zl-energie: rgba(151, 215, 0, 1);
    --clr-zl-energie-trans: rgba(151, 215, 0,0.15);
    --clr-zl-gesellschaftundarbeit: rgba(0, 140, 149, 1);
    --clr-zl-gesellschaftundarbeit-trans: rgba(0, 140, 149, 0.15);
    --clr-zl-gesundheit: rgba(0, 199, 177, 1);
    --clr-zl-gesundheit-trans: rgba(0, 199, 177, 0.15);
    --clr-zl-mobilitaet: rgba(65, 143, 222, 1);
    --clr-zl-mobilitaet-trans: rgba(65, 143, 222, 0.15);
    --clr-zl-produktion: rgba(0, 94, 184, 1);
    --clr-zl-produktion-trans: rgba(0, 94, 184, 0.15);
    --clr-zl-wasser: rgba(0, 116, 164, 1);
    --clr-zl-wasser-trans: rgba(0, 116, 164, 0.15);

    /* PADDING */
    --padding-content-header: 3rem;
    --padding-content-small: 3rem;
    --padding-content-large: 6rem;
    --padding-results-header-bar: 2rem;


    /* MARGIN */
    --margin-default: 1rem;
    --margin-box: calc(var(--margin-default) * 1.5);
    --margin-box-small: calc(var(--margin-box) / 2);
    --margin-content-small: var(--padding-content-small);
    --margin-content-large: var(--padding-content-large);

    /* FRAMEWORK */
    --sidebar-width: 2rem;
    --gap-width: 0rem;
    --max-application-width: 192rem;
    
}

@media (100px <= width <= 1600px) {
    :root {
        font-size: 8px;
    }
}