:root{
    --text: #878788;
    --text2: #3B3B3B;
    --primary: #7FC2EC;
    --light: #F7F7F7;
    --light2: #E8E8E8;
    --dark: #666666;
    --font-text: Manrope;
    --font-headlines: Playfair;
}

.primary{
    color: var(--primary)!important;
}
.text{
    color: var(--text);
}
a{
    color: var(--primary);
}
.text a{
    color: var(--text)!important;
}
.text2 a{
    color: var(--text2)!important;
}
.text2{
    color: var(--text2);
}
.bg-primary{
    background-color: var(--primary)!important;
}
.bg-light{
    background-color: var(--light)!important;
}
.bg-light2{
    background-color: var(--light2)!important;
}
.bg-dark{
    background-color: var(--dark)!important;
}
.hyphens{
    hyphens: auto;
    -webkit-hyphens: auto;
}

.btn{

}
.btn-primary{
    background-color: var(--primary);
    color: #fff;
    border: none!important;
    padding: 10px 30px;
    text-transform: uppercase ;
}
.btn-secondary{
    background-color: var(--primary);
    color: #fff;
    border: solid 2px #fff!important;
    padding: 10px 30px;
    text-transform: uppercase ;
}
.btn-secondary:hover{
    background-color: #fff;
    color: var(--primary);
}

input{
    border-radius: 0.25em;
    border: var(--light2);
}
input:active{
    border-radius: 0.25em;
    border: var(--light2);
    outline: #fff;
}

textarea{
    border-radius: 0.25em;
    border: var(--light2);
}
textarea:active{
    border-radius: 0.25em;
    border: var(--light2);
    outline: #fff;
}

.controller{
    cursor: pointer;
}

body{
    font-size: 16px;
    font-family: var(--font-text);
    line-height: 1.5em;
}
.font-text{
    font-family: var(--font-text);
}
.font-headline{
    font-family: var(--font-headlines);
    line-height: 1.2em;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headlines);
}


.fs-1{
    font-size: 0.5em;
}

.fs-2{
    font-size: 0.8em;
}

.fs-3{
    font-size: 1em;
}

.fs-4{
    font-size: 2em;
}

.fs-5{
    font-size: 3em;
}
.fs-6{
    font-size: 4em;
}
@media screen and (min-width: 768px) {
    .fs-md-1{
        font-size: 0.5em!important;
    }
    
    .fs-md-2{
        font-size: 0.8em!important;
    }
    
    .fs-md-3{
        font-size: 1em!important;
    }
    
    .fs-md-4{
        font-size: 2em!important;
    }
    
    .fs-md-5{
        font-size: 3em!important;
    }
    .fs-md-6{
        font-size: 4em!important;
    }
}
@media screen and (min-width: 992px) {
    .fs-lg-1{
        font-size: 0.5em!important;
    }
    
    .fs-lg-2{
        font-size: 0.8em!important;
    }
    
    .fs-lg-3{
        font-size: 1em!important;
    }
    
    .fs-lg-4{
        font-size: 2em!important;
    }
    
    .fs-lg-5{
        font-size: 3em!important;
    }
    .fs-lg-6{
        font-size: 4em!important;
    }
}


/* ANFANG z-indizes */

header{
    z-index: 99;
}

.overlay-primary{
    z-index: 5;
}
#start_img{
    z-index: 4;
}

#start_text_wrapper{
    z-index: 7;
}
#start_img-left, #start_img-right{
    z-index: 6;
}
.card_leistungen_headline{
    z-index: 5;
}
.card-leistungen{
    cursor: pointer;
}
.card-leistungen:hover .card-leistungen-bottom{
    background-color: var(--light2)!important;
}
.card-leistungen:hover .card-leistungen-bottom p{
    color: var(--text2)!important;
}
.card-leistungen img{
  transition: transform 1s;
}
.card-leistungen:hover img{
    transform: scale(1.1);
}
/* z-indizes ENDE*/


header{
    font-size: 16px;
    box-shadow: 1px 1px 6px lightgray;
    position: fixed;
    top: 0px;
    left: 0px;
    
}
header .text{
    font-size: 12px;
}
header a{
    color: var(--text);
}
#logo{
    max-width: 250px;
    min-width: 150px;
}
.icon{
    width: 30px; 
}
@media screen and (max-width: 575px){
    .icon{
        width: 25px; 
    }
}

.overlay-primary{
    background-color: var(--primary);
    opacity: 0.5;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
/*
#start_subline::before{
    content: url('../images/logo_element.png');
    position: absolute;
    top: -50%;
    left: 50%;
    z-index: 10;
    display: inline-block;
    transform: translate(-170%, -10%);
}*/
#start{
    max-height: 95vh;
}

#start_logo-element{
        /* left: 0px; */
        top: -1em;
        transform: translate(-30px, 0%);
}
@media screen and (min-width: 576px){
    #start_text_wrapper{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); 
        text-shadow: 1px 1px 3px gray;
    }
}

#start_img-left{
    bottom: 0px;
    left: 0px;
}
#start_img-right{
    bottom: 0px;
    right: 0px;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    #start_img-left{
        bottom: 0px;
        left: -10%;
    }
    #start_img-right{
        bottom: 0px;
        right: -10%;
    }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
    #start_img-left{
        bottom: 0px;
        left: -15%;
    }
    #start_img-right{
        bottom: 0px;
        right: -15%;
    }
}
@media screen and (max-width: 576px){
    #start_img-left{
        bottom: 0px;
        left: -17%;
    }
    #start_img-right{
        bottom: 0px;
        right: -17%;
    }
}
@media screen and (min-width: 768px){
    .bg-light-gradient-light2{
        background-image: linear-gradient(0deg, var(--light) 50%, var(--light2) 50.1%, var(--light2) 100%);
        background-image: -webkit-linear-gradient(0deg, var(--light) 50%, var(--light2) 50.1%, var(--light2) 100%);
    }
}
@media screen and (max-width: 767px){
    #start_cta-1{
         background-color: var(--light);   
    }
    #start_cta-2{
        background-color: var(--light2);
    }
}


.card-leistungen{
}
.card-leistungen-inner{
    border-radius: 6px;
    box-shadow: 1px 1px 10px gray;
}

.card_leistungen_headline{
    bottom: 0px;
}

.linear-gradient-dark-transparent{
    background-image: linear-gradient(90deg, rgba(0,0,0, 0.7), rgba(0,0,0, 0.0));
    background-image: -webkit-linear-gradient(90deg, rgba(0,0,0, 0.7), rgba(0,0,0, 0.0));
}

@media screen and (min-width: 768px){
    #team{
        background-image: linear-gradient(#fff 20%, var(--light) 20.1%);
        background-image: -webkit-linear-gradient(#fff 20%, var(--light) 20.1%);
    }
}
@media screen and (max-width: 767px){
    .member, .netzwerk{
        background-color: var(--light);
    }
}


.modal-header, .modal-footer, .modal-body{
    border: 0px!important;
}