:root {
    --blue: #00B0DF;
    --gray: #F2F4F8;
    --white: #f5f5f5;
    --black: #101010; 
}
/*FONT*/
h1{
    font-family: 'Questrial';
    color: var(--white);
    font-size: 60px;
    letter-spacing: 0.04em;
}
h2{
    font-family: 'Questrial';
    font-size: 40px;
    color: var(--black);
    letter-spacing: 0.04em;
}
h2.p_style{
    font-family: 'Questrial';
    color: var(--white);
    font-size: 16px;
    letter-spacing: 0.04em;
}
/* h2 Leistungen */
h2.p_style-bold {
    font-family: 'Overpass';
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
}
h3{
    font-family: 'Overpass';
    font-weight: 600;
    color: var(--black);
    font-size: 16px;
    letter-spacing: 0.07em;
}
p,
a.nav-link,
li{
    font-family: 'Overpass';
    font-weight: Normal;
    color: var(--black);
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 2;
}
p a{
    font-family: 'Overpass';
    font-weight: Normal;
    color: var(--black);
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 2;
    text-decoration: underline !important;
}
p a.white-link,
p a.blue-link {
    text-decoration: none !important;
}
p.blue-tag {
    font-family: 'Overpass';
    font-weight: Normal;
    color: var(--blue);
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 1.5;
}
.p-font-size p,
.p-font-size {
    font-size: 14px;
}
strong {
    color: var(--black);  
}
a.email_link{
    font-family: 'Overpass';
    font-weight: Normal;
    color: var(--white);
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 2;
    text-decoration: none;
    transition: color .15s ease;
}
a.email_link:hover{
    color: var(--blue);
}
.blue-text {
    color: var(--blue) !important;
}
.navbar-nav p,
a.nav-link,
a.nav-btn {
    font-size: 15px !important;
}
a.nav-link.active {
    text-decoration: underline !important;
    text-underline-offset: 6px;
    color: var(--blue) !important;
}
.beitrag-formatierung p {
    font-family: 'Overpass';
    font-weight: Normal;
    color: var(--black);
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 2;
}
.beitrag-formatierung h2 {
    font-family: 'Questrial';
    font-size: 24px;
    color: var(--black);
    letter-spacing: 0.04em;
    line-height: 36px;
}
/*MENU*/
.nav-padding {
    padding-right: 30px !important;
}
#menu{
    z-index: 9999;
    background-color: var(--black);
}
#menu svg.logo{
    width: 200px;
}
svg.logo, svg.arrow_down, svg#burger{
    fill: var(--blue);
    transition: fill .15s ease;
}
svg.logo:hover, svg.arrow_down:hover, svg#burger:hover{
    fill: var(--blue);
}
#menu .burger_container{
    top: 42px;
    right: 27px;
    cursor: pointer;
}
#menu .burger_container #burger{
    width: 33px;
}
#menu .burger_container #burger rect{
    transition: all .15s ease;
} 
#menu .burger_container.active #burger rect:first-child{
    transform: rotate(12deg);
    transform-origin: center left;
    fill: var(--blue);
} 
#menu .burger_container.active #burger rect:nth-child(2){
    transform: rotate(-12deg);
    transform-origin: center left;
    fill: var(--blue);
} 
#menu_container{
    z-index: 999;
    background-color: var(--white);
    opacity: 0;
    visibility: hidden;
    transition: 300ms;
    transition:visibility 300ms linear,opacity 300ms linear;
}
#menu_container.show{
    opacity: 1;
    visibility: visible;
}
#top_menu, 
#sub_menu{
    opacity: 0;
    visibility: hidden;
    transition: 300ms;
    transition:visibility 300ms linear,opacity 300ms linear;  
}
#top_menu.show, 
#sub_menu.show{
    opacity: 1;
    visibility: visible;
}
#menu_container .top_menu_item,
#menu_container .sub_menu_item{
    color: var(--black);
    text-decoration: none;
    margin: 5px;
    font-family: 'Overpass';
    font-size: 22px;
    letter-spacing: 1.5px;
    opacity: 0;
    visibility: hidden;
    transition: 300ms;
    transition:visibility 300ms linear,opacity 300ms linear;
}
#menu_container .top_menu_item.show,
#menu_container .sub_menu_item.show{
    opacity: 1;
    visibility: visible;
}
#menu_container .top_menu_item.active,
#menu_container .sub_menu_item.active{
    text-decoration: underline !important;
    text-underline-offset: 6px;
    color: var(--blue) !important;
}
#menu_container .top_menu_item:hover,
#menu_container .top_menu_item:active,
#menu_container .sub_menu_item:hover,
#menu_container .sub_menu_item:active{
color: var(--white);
-webkit-text-fill-color: var(--blue);
-webkit-text-stroke-width: 0.9px;
-webkit-text-stroke-color: var(--blue);
}
#menu_container .top_menu_item.active:hover,
#menu_container .top_menu_item.active:active,
#menu_container .sub_menu_item.active:hover,
#menu_container .sub_menu_item.active:active{
    color: var(--blue);
    -webkit-text-fill-color: var(--black);
    -webkit-text-stroke-width: 0.9px;
    -webkit-text-stroke-color: var(--blue);
}
/*FOOTER*/
#footer{
    background-color: var(--blue);
}
#footer div{
    height: 78.55px; 
}
#footer div span{
    font-family: 'Overpass';
    color: var(--white);
    text-transform: lowercase;
    letter-spacing: 0.5px;
    cursor:default;
}
#footer div span a{
    color: var(--white);
    text-decoration: none;
    transition: color .15s ease;
    cursor:pointer;
}
#footer div span a:hover{
    text-decoration: none;
    opacity: .8;
}
/*HEADER*/
header {
    position: relative;
    height: 100vh;
    min-height: 200px;
    width: 100%;
    overflow: hidden;
}

header video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
header .overlay_color {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background: var(--blue);
    /*mix-blend-mode: color;*/
    mix-blend-mode: multiply;
}
header .overlay_gradient {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    background: rgb(16,16,16);
    background: linear-gradient(0deg, rgba(16,16,16,1) 10%, rgba(16,16,16,0.2) 50%, rgba(16,16,16,1) 90%);
}
header .container_content {
    position: relative;
    z-index: 3;
}
header .arrow_down{
    width: 18px;
    stroke: white;
}
/*HEADER TEXT*/
.header_svg{
    max-height: 200px;
    margin: 0px 50px;
}
.header_svg.single{
    max-height: 100px;
}
#header_svg_home .text_type_2,
#header_svg_ueber_uns .text_type_2,
#header_svg_leistungsuebersicht .text_type_2,
#header_svg_kontakt .text_type_2,
#header_svg_referenzen .text_type_2{
    fill: #fff;
}
#header_svg_home .text_type_1, 
#header_svg_home .text_type_2,
#header_svg_ueber_uns .text_type_1, 
#header_svg_ueber_uns .text_type_2,
#header_svg_leistungsuebersicht .text_type_1, 
#header_svg_leistungsuebersicht .text_type_2,
#header_svg_kontakt .text_type_1,
#header_svg_kontakt .text_type_2,
#header_svg_email .text_type_1,
#header_svg_referenzen .text_type_1,
#header_svg_referenzen .text_type_2{
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 2px;
    stroke-linejoin: round;
}
#header_svg_home .text_type_1,
#header_svg_ueber_uns .text_type_1,
#header_svg_leistungsuebersicht .text_type_1,
#header_svg_kontakt .text_type_1,
#header_svg_email .text_type_1,
#header_svg_referenzen .text_type_1{
    fill: none;
}
.header-pad-top {
    padding-top: 20%
}
/* TEXT IMAGE ROW */
.min-height-text-img {
    min-height: 700px;
}
.header-img-background-position {
    background-position: 20% 100%;
}
/*KONTAKT FORM*/
.form-control {
    padding: 12px 20px;
    color: var(--black);
    background-color: transparent;
    border: 1px solid var(--black);
    border-radius: 3px;
    font-family: 'Overpass';
    font-size: 14px;
}
.form-control:focus,
.form-control-res:focus {
    color: var(--black);
    background-color: transparent;
    border-color: var(--blue);
    outline: 0;
    box-shadow: unset;
}
.form-control.is-invalid, .was-validated .form-control:invalid,
.form-control.is-valid, .was-validated .form-control:valid{
    background-image: unset;
}
/*ACCORDION*/
.accordion {
    --bs-accordion-bg: unset;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-color: var(--white);
    --bs-accordion-btn-bg: var(--gray);
    --bs-accordion-btn-focus-border-color: var(--white);
    --bs-accordion-btn-focus-box-shadow: 0;
    --bs-accordion-active-color: var(--white);
    --bs-accordion-active-bg: var(--gray);
}
.accordion-body {
    margin-bottom: 10px;
}  
.accordion-item button{
    margin-bottom: 10px;
    border: 0;
    border-top: 0;
    padding: 25px;
}
.accordion-item button{
    margin-bottom: 20px;
    border: 2px solid var(--white);
}
.accordion-button::after,
.accordion-button:not(.collapsed)::after{
    background-image: none;
}
button.accordion-button svg g line:nth-child(2){
transition: all .15s ease;
display: none;
}
button.accordion-button.collapsed svg g line:nth-child(2){
    transition: all .15s ease;
    display: block;
}
/*BLOG BEITRAG*/
.beitrag-page {
    padding-left: 100px;
    padding-right: 100px;
}
.beitrag-page h1 {
    padding-top: 50px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    #menu svg.logo{
        width: 250px;
    }
    header .arrow_down{
        width: 30px;
        stroke: none;
    }
    #menu_container .top_menu_item,
    #menu_container .sub_menu_item{
        margin: 15px;
        font-size: 30px;
        letter-spacing: 3px;
    }
    #menu .burger_container{
        top: 42px;
        right: 30px;
        cursor: pointer;
    }
    #menu .burger_container #burger{
        width: 38px;
    }
}

.image-smartphone-height {
    background-position: 67% 30% !important;
}



/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .nav-desktop {
        display: block;
    }
    .nav-mobile {
        display: none;
    }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
@media (max-width: 1200px) {
.navbar-nav p,
a.nav-link,
a.nav-btn {
    font-size: 12px !important;
}
.nav-padding {
    padding-right: 15px !important;
}
h1 {
    font-size: 60px;
}
.form-control-res {
    font-size: 12px !important;
}
}

@media (max-width: 1500px) {
    .res-padding-top-0 {
        padding-top: 0px !important;
    }
    /*BLOG BEITRAG*/
    .beitrag-page {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 1480px) {
    .my-150.teambild {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

@media (max-width: 1280px) {
    .image-smartphone-height {
        height: 530px;
        background-position: 63% 30% !important;
    }
    .my-150.teambild {
        margin-top: 22px;
        margin-bottom: 22px;
    }
    .nav-padding {
        padding-right: 15px !important;
    }
}
@media (min-width:993px) and (max-width:1200px) {
    .image-smartphone-height {
        height: 458px;
        /*background-position: 48% 30% !important;*/
    }
    .my-150.teambild {
        margin-top: 22px;
        margin-bottom: 22px;
    }
    .pl-lg-100.teambild {
        padding-left: 55px !important;
    }
    .teambild p {
        margin-bottom: 0px !important;
    }

}

@media (max-width: 991px) {
    .nav-desktop {
        display: none;
    }
    .nav-mobile {
        display: block;
    }
    .res-header-mt {
        margin-top: 107px;
        height: calc(100vh - 107px) !important;
    }
    .res-header-mt > div {
        height: calc((100%)/2);
    }
    .res-height {
        height: 100%;
    }
    .contact-page .res-header-mt {
        height: 100% !important;
    }
    .contact-page .res-height-auto {
        height: 100% !important;
    }
    .contact-page .res-height-50vh {
        height: 50vh !important;
    }
    #kassen-wahlarztinfos .res-height-50vh {
    height: 160vh !important;
    }
    .kassen_wahlarztinfosform_padding_top {
        padding-top: 0px !important;
    }
    .kassen_wahlarztinfosform_padding_top_res {
        padding-top: 50px !important;
    }
    #footer div{
        flex-direction: column;
        height: 170px; 
        padding: 50px 0px;
    }
    .mobile_spacer_0 {
        height: 0px !important;
    }
    .number_count_div span{
        font-size: 40vw;
    }
    .info_carousel{
        width: 100%;
        left: 0px;
    }
    .info_carousel div.slick-slide{
        padding: 0px;
    }
    .a-right.control-c.next.slick-next.slick-arrow{
        right: calc(25% - 0px) !important;
    }
    .a-left.control-c.prev.slick-prev.slick-arrow{
        left: calc(25% - 0px) !important;
    }
    .res-col-reverse {
        display: flex;
        flex-direction: column-reverse;
    }
    .header-img-background-position {
        background-position: 20% 30%;
    }
    .image-mobile-height {
        height: 390px;
        border-radius: 0px !important;
    }
}

@media (max-width: 768px) {
    .slick-slide {
        height: 75px;
    }
    .slick-track div img {
        max-width: 155px;
        max-height: 55px;
    }
    h1 {
    font-size: 30px;
    line-height: 32px;
    }
    h2.p_style {
        font-size: 14px;
    }
    .mobile-height-auto {
        height: auto!important;
    }
    .image-smartphone-height {
        height: 272px;
    }
}

@media (max-width: 576px) {
    h2 {
        font-size: 28px;
    }
}




/* URLAUBBANNER */
.urlaubsbanner-style {
    background-color: white;
    border-radius: 10px;
    max-width:70%;
    padding:35px;
    padding-top: 51px;
    position: absolute;
    left: calc(100% - 85%);
}

@media (max-width: 576px) {
.urlaubsbanner-style {
    max-width:90%;
    padding:15px;
    padding-top: 20px;
    position: absolute;
    left: calc(100% - 95%);
}
.urlaubsbanner-style h3 {
    font-size: 14px;
    letter-spacing: 0px;
}

.urlaubsbanner-style p {
    font-size: 13px;
    line-height: 23px;
    letter-spacing: 0px;
}

.urlaubsbanner-style p .blue-link {
    font-size: 13px;
}
.urlaubsbanner-style p.btn-custom-blue span {
    letter-spacing: 0px;
}
.urlaubsbanner-style p,
.urlaubsbanner-style h3{
    margin-bottom: 10px;
}

h1.res-header-margin {
    margin-top: 45px;
}

/* BLOGBEITRAG PREV & NEXT */
#arrow_link {
    width: 72px;
    height: 9px;
}
.res-position svg {
    right: -18px !important;
}

.res-arrow-text {
    font-size: 12px; 
}

/*HEADER*/
#kassen-wahlarztinfos header, 
#kassen-wahlarztinfos .vh-100,
#kassen-wahlarztinfos .blue-bg-color {
    height: auto;
}
#kassen-wahlarztinfos .res-height-50vh {
height: 100% !important;
padding-top: 100px !important;
padding-bottom: 100px !important;
}

#kassen-wahlarztinfos .my-100 {
    margin-top: 0px;
    margin-bottom: 0px;
}
#kassen-wahlarztinfos .termin-vereinbaren.my-100 {
    margin-top: 100px;
    margin-bottom: 100px;
}
}