:root {
	/*******************************  FONT SIZES ******************************/
	--font-xxs:   22px;
	--font-xs:    24px;
    --font-s:     50px;
	--font-m:     70px;
	--font-l:     100px;
	--font-xl:    115px;
	--font-xxl:   160px;

    --btn-xs: 24px;
}


.headline{
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    line-height: 110% !important;
}

.paragraph{
    line-height: 140% !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}


.headline-xxs{
    font-size: var(--font-xxs) !important;
}

.headline-xs{
    font-size: var(--font-xs) !important;
}

.headline-s3{
    font-size: var(--font-s3) !important;
}

.headline-s2{
    font-size: var(--font-s2) !important;
}

.headline-s{
    font-size: var(--font-s) !important;
}

.headline-m{
    font-size: var(--font-m) !important;
}

.headline-l{
    font-size: var(--font-l) !important;
}

.headline-xl{
    font-size: var(--font-xl) !important;
}

.headline-xxl{
    font-size: var(--font-xxl) !important;
}

.headline-xl-special{
    position: relative;
    display: table;
    padding-left: 180px;
}

.headline-xl-special:before{
    content: "";
    width: 125px;
    height: 250px;
    top: 20px;
    position: absolute;
    left: 0px;
    background: url("/wp-content/uploads/2025/12/vandage_before_headline_element.svg");
    background-size: contain !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
}

#main-container .link_button,.link_button{
   font-size: var(--btn-xs) !important; 
}

@media (max-width: 999px){
    :root {
	/*******************************  FONT SIZES ******************************/
        --font-xxs:   22px;
        --font-xs:    24px;
        --font-s:     40px;
        --font-m:     60px;
        --font-l:     85px;
        --font-xl:    100px;
        --font-xxl:   120px;

        --btn-xs: 24px;
    }

    .headline-xl {
        font-size: var(--font-xl) !important;
    }

    .headline-l {
        font-size: var(--font-l) !important;
    }

    .headline-m {
        font-size: var(--font-m) !important;
    }

    .headline-s3{
        font-size: var(--font-s3) !important;
    }

    .headline-s2{
        font-size: var(--font-s2) !important;
    }

    .headline-s {
        font-size: var(--font-s) !important;
    }

    .headline-xxxs{
        font-size: var(--font-xxxs) !important;
    }

    .headline-xxs{
        font-size: var(--font-xxs) !important;
    }

    .headline-xs{
        font-size: var(--font-xs) !important;
    }

    .headline-xl-special{
        padding-left: 120px;
    }

    .headline-xl-special:before{
        width: 90px;
        height: 180px;
    }

    #main-container .link_button,.link_button{
        font-size: var(--btn-xs) !important; 
    }
}


@media (max-width: 690px){
    :root {
	/*******************************  FONT SIZES ******************************/
        --font-xxs:   18px;
        --font-xs:    22px;
        --font-s:     30px;
        --font-m:     30px;
        --font-l:     40px;
        --font-xl:    40px;
        --font-xxl:   40px;

        --btn-xs: 18px;
    }

    .headline-xl {
        font-size: var(--font-xl) !important;
    }

    .headline-l {
        font-size: var(--font-l) !important;
    }

    .headline-m {
        font-size: var(--font-m) !important;
    }

    .headline-s3{
        font-size: var(--font-s3) !important;
    }

    .headline-s2{
        font-size: var(--font-s2) !important;
    }

    .headline-s {
        font-size: var(--font-s) !important;
    }

    .headline-xxxs{
        font-size: var(--font-xxxs) !important;
    }

    .headline-xxs{
        font-size: var(--font-xxs) !important;
    }

    .headline-xs{
        font-size: var(--font-xs) !important;
    }

    .headline-xl-special{
        padding-left: 100px;
    }

    .headline-xl-special:before{
        width: 70px;
        height: 100px;
        top: 5px;
    }

    #main-container .link_button,.link_button{
        font-size: var(--btn-xs) !important; 
    }
}