@import url("font.css");
@import url("header.css");
@import url("footer.css");
@import url("blocks/hero.css");
@import url("blocks/icons_and_text.css");
@import url("blocks/quad_panel_block.css");
@import url("blocks/solutions.css");
@import url("blocks/products.css");
@import url("blocks/faq.css");
@import url("blocks/technology.css");
@import url("blocks/cta.css");
@import url("blocks/projekte.css");
@import url("blocks/teaser.css");
@import url("blocks/subpage_hero.css");
@import url("blocks/zitat.css");
@import url("blocks/team.css");
@import url("blocks/fade.css");
@import url("blocks/zitatslider.css");

:root {
    --font-family-effra: 'Effra';
    --color-white: #ffffff;
    --color-black: #000000;
    --color-green: #21592E;
    --color-lightblue: #8E9ECA;
    --color-mint: #D7EAD9;
    --color-pink: #FCCFE4;
}

a{
    color: var(--color-lightblue);
    text-decoration: none;
}
a:hover{
    color: var(--color-mint);
    text-decoration: none;
}

.color_white {
    color: var(--color-white);
}

.color_lightblue {
    color: var(--color-lightblue);
}

.btn-primary {
    width: fit-content;
    color: var(--color-white);
    border-radius: 60px;
    background-color: var(--color-lightblue);
    padding: 15px 20px !important;
    border: none;
    font-weight: bold;
    
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    font-size: var( --font-size-48);
    line-height: normal;
}

.btn-primary:hover {
    background-color: var(--color-mint);
}



main.blocks {
    overflow-x: hidden;
}

.block-my-none {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.block-my-default {
    padding-top: 2.1875rem !important;
    padding-bottom: 2.1875rem !important
}

.block-my-80-0 {
    padding-top: 2.1875rem !important;
    padding-bottom: 0rem !important
}

.block-my-0-80 {
    padding-top: 0rem !important;
    padding-bottom: 2.1875rem !important
}

@media(min-width: 768px) {
    .block-my-none {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .block-my-default {
        padding-top: 4.375rem !important;
        padding-bottom: 4.375rem!important
    }

    .block-my-80-0 {
        padding-top: 4.375rem !important;
        padding-bottom: 0rem !important
    }

    .block-my-0-80 {
        padding-top: 0rem !important;
        padding-bottom: 4.375rem !important
    }

}

@media (min-width: 1920px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1720px;
    }
}


.wpcf7-form label, .wpcf7-form .wpcf7-form-control-wrap, .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select{
    width: 100%;
}

.wpcf7-form label{
    color: var(--color-lightblue);
    font-size: 1rem;
    line-height: 1.6rem;
    letter-spacing: 0.03rem;
}

.wpcf7-form input:focus-visible, .wpcf7-form textarea:focus-visible, .wpcf7-form select:focus-visible{
    outline: none;
}

.wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select{
    border-radius: 5px;
    border: 1px solid var(--color-lightblue)!important;
    padding: 10px 20px;
}

ul {
    padding-left: 1rem;
}

.wpcf7-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5em;
    background-color: white;
    border: 1px solid #ccc;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='25' viewBox='0 0 22 25' fill='none'><path d='M11.0669 23.3469L10.6294 1.65256' stroke='%238E9ECA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M19.7617 14.293L11.0657 23.3469L2.01177 14.6509' stroke='%238E9ECA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1em center;
    background-size: 1em auto;
}

@-moz-document url-prefix() {
    .dw_curve {
        fill: var(--color-lightblue);
    }
}

@media (max-width: 1340px) and (min-width: 992px){
    .hero_container {
        margin-left: 1.5rem;
        min-height: 700px;
        padding-top: 100px;
    }

    .teaser_content{
        margin-left: 1.5rem;
    }

    .teaser_content_r{
        margin-right: 1.5rem;
    }
}

@media (max-width: 1095px) and (min-width: 992px){
    #page-header .navbar{
        padding-right: 5rem !important;
    }
}