/*sizes nav*/

body {
    --burger-line-height: 3px;
    --nav-icon-height: 17px;
    --nav-icon-wrapper-height: 66px;
    --nav-icon-width: 30px;
    --nav-icon-padding-X: 2.4vw;
    --nav-icon-padding-Y: 36px;
}


/*sizes,pad,marg*/

:root {
    --margin-bottom-row: clamp(90px, 18vw, 170px);
    --padding-mehr-abstand: 2vw;
    --content-width: 1170px;
    --content-width-responsive: 90vw;
    --margin-tabblock: 10rem;
    --polaroid-gap: 4.5vw;
    --gap-small: clamp(20px, 5vw, 32px);
    --gap-medium: clamp(25px, 6vw, 40px);
    --gap-large: clamp(40px, 8vw, 96px);
    --btn-font-size: 15px;
    --bg-padding: clamp(60px, 10vw, 112px);
    --col-gap-62: clamp(25px, 5vw, 63px);
    --col-gap-80: clamp(25px, 6vw, 80px);
    --bg-size: clamp(188px, 29vw, 433px);
}

/*fonts*/

:root {
    --mainfont: 'Mulish';
    --headlinefont: 'Damion';
}


/*VC*/

@media (min-width: 1920px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}

@media (max-width: 1500px) {
    :root {
        --polaroid-gap: 6vw;
    }
}

@media (max-width: 1200px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}

@media (max-width: 1024px) {
    :root {
        --polaroid-gap: 8vw;
    }
}

@media (max-width: 990px) {
    :root {
        --btn-font-size: 13px;

    }
}

@media (max-width: 768px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}

@media (max-width: 576px) {
    body {
        --nav-icon-wrapper-height: 51px;
        --nav-icon-width: 22px;
        --nav-icon-height: 17px;
        --nav-icon-padding-Y: 5vw;
    }

    :root {
        --btn-font-size: 12px;

    }
}

@media (max-width: 420px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}

@media (max-width: 320px) {
    /*----------------- ELEMENT -------------*/
    /*----------------- END ELEMENT ---------*/
}