/*sizes nav*/

body {
    --burger-line-height: 5px;
    --nav-icon-height: 32px;
    --nav-icon-width: 57px;
    --nav-icon-padding-X: 2.4vw;
    --nav-icon-padding-Y: 3.1vw;
}


/*color*/

:root {
    --color-1: #3A3C3B;
    --color-2: #F4EFEA;
    --color-3: #FBF8F5;
    --color-4: #BF86A1;
    --color-4-1: #D1AABD;
    --color-5: #CDC09A;
    --color-6: #C47E7C;
    --color-7: #ACAB7D;
    --color-7-1: #B5A783;
}


/*sizes,pad,marg*/

:root {
    --margin-bottom-row: 7.8vw;
    --padding-mehr-abstand: 2vw;
    --content-width: 1170px;
    --content-width-responsive: 90vw;
    --margin-tabblock: 10rem;
    --polaroid-gap: 4.5vw;
    --height-calculus: calc(100vh - max(127px, 7vw));
    --height-minifrom: 60px;
}

.cath-wohnen,
.cath-wohnen-en {
    --cath-main-color: var(--color-6);
}

.cath-region,
.cath-region-en {
    --cath-main-color: var(--color-4-1);
}

.cath-kontakt,
.cath-kontakt-en {
    --cath-main-color: var(--color-7);
}


/*fonts*/

:root {
    --mainfont: 'ofelia-display';
    --headlinefont: 'classico-urw';
    --headlinealternative: 'EyeCatchingProt';
}


/*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 {
        --margin-bottom-row: 11vw;
    }

    :root {

        --height-minifrom: 55px;

    }
}

@media (max-width: 768px) {
    :root {
        --height-calculus: calc(100vh - max(87px, 7vw));
    }

    body {
        --burger-line-height: 4px;
        --nav-icon-height: 24px;
        --nav-icon-width: 44px;
    }
}

@media (max-width: 576px) {
    :root {
        --margin-bottom-row: 17vw;
    }
}

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

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