@charset "UTF-8";

@font-face {
    font-weight: 400;
    font-family: 'Mark OT';
    src: url('../fonts/3313B8_regular.eot') format('embedded-opentype'),
    url('../fonts/3313B8_regular.woff2') format('woff2'),
    url('../fonts/3313B8_regular.woff') format('woff'),
    url('../fonts/3313B8_regular.ttf')  format('truetype');
}
@font-face {
    font-family: 'Mark OT';
    font-weight: 700;
    src: url('../fonts/3313B8_bold.eot') format('embedded-opentype'),
    url('../fonts/3313B8_bold.woff2') format('woff2'),
    url('../fonts/3313B8_bold.woff') format('woff'),
    url('../fonts/3313B8_bold.ttf')  format('truetype');
}
@font-face {
    font-weight: 300;
    font-family: 'Wotfard';
    src: url("../fonts/Wotfard-Light.otf") format("opentype");
}
@font-face {
    font-weight: 400;
    font-family: 'Wotfard';
    src: url("../fonts/Wotfard-Regular.otf") format("opentype");
}
@font-face {
    font-weight: 500;
    font-family: 'Wotfard';
    src: url("../fonts/Wotfard-Medium.otf") format("opentype");
}
@font-face {
    font-style: italic;
    font-weight: 400;
    font-family: 'Wotfard';
    src: url("../fonts/Wotfard-RegularItalic.otf") format("opentype");
}
@font-face {
    font-weight: 700;
    font-family: 'Wotfard';
    src: url("../fonts/Wotfard-Bold.otf") format("opentype");
}

::marker {
    color: #A3A3A3;
}



html{
    min-width: 320px;
    -webkit-text-size-adjust: none;
}

html.lightbox__is_active,
html.menu__is_active,
html.mobile_menu__is_active{
    overflow: hidden;
}


body{
    font-family: Wotfard, sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 24px;
    color: #3E3E3E;
    margin: 0;
}

a{
    text-decoration: none;
    color: #93ADAE;
    transition: color 0.2s ease-out;
}
a:hover{
    color: #6B979F;
}

strong{
    font-weight: 500;
}

h2{
    font-weight: normal;
    font-style: italic;
    font-size: 32px;
    line-height: 38px;
}

@media only screen and (max-width: 500px){
    h2{
        font-size: 26px;
        line-height: 30px;
    }
}

@media only screen and (max-width: 400px){
    h2{
        font-size: 20px;
        line-height: 24px;
    }
}


.site-content{
    position: relative;
    min-height: 100vh;
}

main{
    padding-bottom: 485px;
}

footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

@media only screen and (max-width: 1100px){
    main{
        padding-bottom: 540px;
    }
}

@media only screen and (max-width: 850px){
    main{
        padding-bottom: 800px;
    }
}

@media only screen and (max-width: 500px){
    main{
        padding-bottom: 840px;
    }
}

@media only screen and (max-width: 400px){
    main{
        padding-bottom: 810px;
    }
}


h3{
    font-weight: normal;
}

.padding-frame{
    padding: 0 40px;
}

@media only screen and (max-width: 500px){
    .padding-frame{
        padding: 0 20px;
    }
}

.res-frame{
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.width-limiter{
    max-width: 975px;
    margin: auto;
}
.header-slider .res-frame{
    position: relative;
    max-width: 1400px;
}

.co-el{
    margin-bottom: 100px;
}

.co-el iframe,
.co-el object{
    max-width: 100%;
}

@media only screen and (max-width: 500px){
    .co-el{
        margin-bottom: 60px;
    }
}

.co-el:first-of-type{
    padding-top: 100px;
    margin: 0 0 230px 0;
    position: relative;
    background-color: #F2F3EF;
}

@media only screen and (max-width: 500px){
    .co-el:first-of-type{
        padding-top: 80px;
        margin-bottom: 190px;
    }
}

.co-el:first-of-type::after{
    position: absolute;
    top: -130px;
    left: 0;
    content: '';
    width: 100%;
    height: 130px;
    background: url("../img/transition-background.svg") no-repeat center 0;
    background-size: 100% 100%;
}

@media only screen and (max-width: 1100px){
    .co-el:first-of-type::after{
        background-size: cover;
    }
}

.co-el:first-of-type::after{
    top: unset;
    bottom: -130px;
    transform: scaleY(-1);
}



.clear-fix{
    clear: both;
}


.logo{
    background: url("../icons/bfi_logo_rgb.svg") no-repeat center center;
    background-size: contain;
    width: 211px;
    height: 90px;
    display: block;
    transition: all 0.3s ease-out;
}
.header-bar .logo{
    /*position: absolute;*/
    top: 0;
}

.header-bar .logo-section{
    padding-top: 5px;
    padding-bottom: 10px;
}
html.menu-bar__is_fixed .header-bar .logo-section{
    padding: 0;
}

html.menu-bar__is_fixed .logo{
    background-image: url("../icons/bfi-logo-sticky-menu.svg");
    width: 40px;
    height: 40px;
    margin: 10px 0;
}

@media only screen and (max-width: 959px){
    html.menu-bar__is_fixed .logo{
        margin: 20px 0;
    }
}

.logo:hover{
    transform: scale(1.03);
}


@media only screen and (max-width: 959px){
    .logo{
        width: 153px;
        height: 75px;
    }
}




/* HEADER SECTION */


.breadcrumb-frame{
    width: 100%;
    margin-bottom: 60px;
    border-top: 3px solid #89AA38;
}

@media only screen and (max-width: 500px){
    .breadcrumb-frame > p{
        display: none;
    }
}

.breadcrumb-frame .breadcrumb_last{
    font-weight: 400;
    color: #89AA38;
}


.breadcrumb-frame svg{
    margin-right: 5px;
}

.breadcrumb-frame a{
    color: #89AA38;
}
.breadcrumb-frame > p > span > span{
    margin-right: 5px;
    transition: color 0.2s ease-out;
}

.breadcrumb-frame > p > span > span > a{
    transition: color 0.2s ease-out;
}

.breadcrumb-frame > p > span > span:hover:not(.breadcrumb_last) a{
    color: #4C8B16;
}


.frame{
    width: 100%;
    height: 102px;
    padding-bottom: 40px;
}

@media only screen and (max-width: 959px){
    .frame{
        margin-top: 20px;
        padding-bottom: 20px;
    }
}

.header-bar{
    position: relative;
    background-color: #FFFFFF;
    z-index: 55;
    width: 100%;
}

@media only screen and (max-width: 959px){
    .header-bar{
        z-index: 50;
    }
}

html.menu-bar__is_fixed .header-bar{
    position: fixed;
    top: 0;
    left: 0;
    -webkit-box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 30%);
    -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,.3);
    box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 30%);
}

.header-bar .menu-section{
    align-self: flex-end;
}

.header-bar .lower-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.top-menu{
    background-color: #FFFFFF;
    z-index: 200;
    position: relative;
    font-weight: 400;
    padding: 10px 0 0 0;
}

@media only screen and (max-width: 959px){
     .top-menu{
        display: none;
    }
}
.top-menu a{
    color: #9EA098;
}

.top-menu .login a{
    border-radius: 25px;
    border: 3px solid #93ADAE;
    display: inline-flex;
    padding: 10px 30px;
    color: #93ADAE;
    font-size: 16px;
    line-height: 19px;
    transition: filter 0.2s ease-out;
}



.top-menu .instagram a{
    display: block;
    width: 25px;
    height: 25px;
    background: url("data:image/svg+xml,%3Csvg id='Gruppe_831' data-name='Gruppe 831' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24.002' height='24.002' viewBox='0 0 24.002 24.002'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rechteck_5711' data-name='Rechteck 5711' width='24.002' height='24.002' fill='%2393adae'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Gruppe_830' data-name='Gruppe 830' transform='translate(0 0)' clip-path='url(%23clip-path)'%3E%3Cpath id='Pfad_338' data-name='Pfad 338' d='M7.05.084A8.8 8.8 0 0 0 4.131.649 5.886 5.886 0 0 0 2 2.04 5.9 5.9 0 0 0 .618 4.174 8.839 8.839 0 0 0 .064 7.1C.008 8.38 0 8.789 0 12.057s.021 3.677.082 4.961a8.822 8.822 0 0 0 .565 2.919A5.891 5.891 0 0 0 2.04 22.065a5.9 5.9 0 0 0 2.134 1.384A8.831 8.831 0 0 0 7.1 24c1.283.057 1.693.069 4.96.063s3.678-.021 4.962-.081a8.845 8.845 0 0 0 2.919-.565 6.149 6.149 0 0 0 3.512-3.526A8.811 8.811 0 0 0 24 16.972c.056-1.284.069-1.694.063-4.962s-.021-3.677-.082-4.96a8.825 8.825 0 0 0-.565-2.92A5.9 5.9 0 0 0 22.027 2 5.889 5.889 0 0 0 19.892.619 8.8 8.8 0 0 0 16.971.065C15.688.008 15.278 0 12.01 0S8.333.022 7.05.084m.14 21.753a6.673 6.673 0 0 1-2.235-.409 3.75 3.75 0 0 1-1.386-.9 3.739 3.739 0 0 1-.9-1.382 6.665 6.665 0 0 1-.418-2.234c-.06-1.268-.073-1.649-.079-4.862S2.175 8.46 2.23 7.19A6.662 6.662 0 0 1 2.64 4.956a3.733 3.733 0 0 1 .9-1.386 3.728 3.728 0 0 1 1.382-.9 6.659 6.659 0 0 1 2.233-.418c1.269-.06 1.649-.073 4.861-.079s3.593.005 4.863.061a6.647 6.647 0 0 1 2.234.409 3.724 3.724 0 0 1 1.386.9 3.726 3.726 0 0 1 .9 1.383 6.642 6.642 0 0 1 .418 2.232c.06 1.269.074 1.65.08 4.862s-.005 3.594-.061 4.862a6.672 6.672 0 0 1-.409 2.236 3.986 3.986 0 0 1-2.28 2.288 6.664 6.664 0 0 1-2.232.418c-1.269.06-1.649.073-4.862.079s-3.592-.006-4.862-.061M17 5.6a1.444 1.444 0 1 0 1.441-1.446A1.444 1.444 0 0 0 17 5.6M5.855 12.045a6.179 6.179 0 1 0 6.166-6.19 6.178 6.178 0 0 0-6.166 6.19m2.167 0a4.011 4.011 0 1 1 4.018 4 4.011 4.011 0 0 1-4.018-4' transform='translate(-0.131 -0.064)' fill='%2393adae'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    transition: filter 0.2s ease-out;
}

.top-menu .whatsapp a{
    height: 25px;
    width: 25px;
    display: block;
    transition: filter 0.2s ease-out;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.733' height='24.852' viewBox='0 0 24.733 24.852'%3E%3Cpath id='Digital_Glyph_Black' d='M21.129 3.611A12.317 12.317 0 0 0 1.747 18.47L0 24.852 6.528 23.14a12.3 12.3 0 0 0 5.885 1.5h.005A12.32 12.32 0 0 0 21.129 3.612ZM12.418 22.559h0A10.223 10.223 0 0 1 7.2 21.132l-.374-.222L2.957 21.926 3.99 18.149l-.243-.387a10.236 10.236 0 1 1 8.671 4.8Zm5.614-7.666c-.308-.154-1.82-.9-2.1-1s-.487-.154-.692.154-.795 1-.974 1.206-.359.231-.667.077A8.413 8.413 0 0 1 11.122 13.8a9.274 9.274 0 0 1-1.712-2.132c-.18-.308-.019-.475.135-.628.138-.138.308-.36.462-.539a2.1 2.1 0 0 0 .308-.513.567.567 0 0 0-.025-.539C10.212 9.3 9.6 7.783 9.34 7.167c-.25-.6-.5-.518-.692-.528s-.384-.011-.59-.011a1.13 1.13 0 0 0-.821.385A3.451 3.451 0 0 0 6.16 9.58a5.987 5.987 0 0 0 1.257 3.183 13.724 13.724 0 0 0 5.256 4.646 17.649 17.649 0 0 0 1.754.648 4.216 4.216 0 0 0 1.938.122 3.17 3.17 0 0 0 2.077-1.463 2.576 2.576 0 0 0 .18-1.463c-.077-.128-.282-.205-.59-.36Z' fill='%2393adae' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat center center;
}

.top-menu .instagram a:hover,
.top-menu .whatsapp a:hover,
.top-menu .login a:hover{
    filter: brightness(0.8);
}

.top-menu .instagram{
    margin-right: 15px;
}

.top-menu .whatsapp{
    margin-left: 0;
}


.top-menu a:hover{
    color: #6B979F;
}

.top-menu ul li{
    margin-right: 40px;
    min-height: 18px;
}


@media only screen and (max-width: 1200px){
     .top-menu ul li{
        margin-right: 20px;
    }
}

.top-menu ul li > svg{
    position: relative;
    margin-right: 8px;
    bottom: -4px;
}

.top-menu ul li.mail > svg{
    bottom: -5px;
}

.top-menu ul li.phone > svg{
    margin-right: 6px;
}

.top-menu ul li:last-child{
    margin-right: 0;
}

.top-menu ul,
.header-bar nav ul{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
}

 .top-menu ul{
    justify-content: flex-end;
    align-items:  center;
}

.top-menu ul li{
    list-style-type: none;
}

@media only screen and (max-width: 959px){
    .header-bar .menu-section{
        display: none;
    }
}

.header-bar nav ul{
    padding: 0;
    margin: 0;
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.header-bar nav > ul > li{
    cursor: pointer;
    padding: 0 30px;
    list-style-type: none;
    font-weight: 500;
    font-size: 20px;
}
.header-bar nav > ul > li > span{
    position: relative;
    cursor: pointer;
}
.header-bar nav > ul > li > span,
.header-bar nav > ul > li > a{
    color: #3E3E3E;
    display: inline-block;
    position: relative;
    padding: 20px 0;
}

.header-bar nav > ul > li > span::after,
.header-bar nav > ul > li > a::after{
    position: absolute;
    content: '';
    bottom: 15px;
    opacity: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: #BBCE99;
    transition: opacity 0.2s ease-out;
}

.header-bar nav > ul > li:hover > span::after,
.header-bar nav > ul > li:hover > a::after,
.header-bar nav > ul > li.active > span::after,
.header-bar nav > ul > li.active > a::after,
.header-bar nav > ul > li.current-menu-item > a::after{
    opacity: 1;
}

.header-bar nav > ul > li > span::before,
.header-bar nav > ul > li > a:before{
    content: '';
    position: absolute;
    width: 3px;
    height: 100%;
    max-height: 40px;
    top: 50%;
    right: -32px;
    transform: translateY(-50%);
    background-color: #E9EBE3;
}

@media only screen and (max-width: 1150px){
    .header-bar nav > ul > li > span::before,
    .header-bar nav > ul > li > a:before{
        right: -22px;
    }
}

.header-bar nav > ul > li:last-child > span::before,
.header-bar nav > ul > li:last-child > a:before{
    display: none;
}




@media only screen and (max-width: 1150px){
    .header-bar nav ul li{
        padding: 0 20px;
    }
}

@media only screen and (max-width: 1050px){
    .header-bar nav ul li{
        font-size: 16px;
    }
}


.header-bar nav ul li:not(.menu-item-has-children) > svg{
    display: none;
}

.header-bar nav ul li > svg{
    margin-right: 10px;
    margin-bottom: 1px;
}

.header-bar nav > ul > li:last-child{
    padding-right: 0;
}
.header-bar nav ul li:last-child::after{
    display: none;
}

@media only screen and (max-width: 1150px){
    .header-bar nav ul li::after{
        right: -21px;
    }
}

.header-bar .burger-button-frame{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

@media only screen and (max-width: 959px){
    .header-bar .burger-button-frame{
        display: block;
    }
}

.header-bar .burger-button-frame::before{
    position: absolute;
    height: 36px;
    width: 2px;
    background-color: #E9EBE3;
    top: 0;
    right: 60px;
    content: '';
}

.header-bar .burger-button{
    cursor: pointer;
    padding: 8px 4px;
}
.header-bar .burger-button > div{
    background-color: #000000;
    margin-bottom: 5px;
    height: 3px;
}

.header-bar .burger-button > div:nth-child(1){
    width: 25px;
    margin-left: 6px;
}

.header-bar .burger-button > div:nth-child(2){
    width: 31px;
}
.header-bar .burger-button > div:nth-child(3){
    width: 25px;
    margin-left: 6px;
}

/* Header Bar Menu */

.header-bar > .padding-frame{
    background-color: #FFFFFF;
}

.header-bar .sub_menu{
    position: absolute;
    border-top: 30px solid #FFFFFF;
    left: 0;
    height: 390px;
    background-color: #F2F3EF;
    width: 100%;
    z-index: -1;
    top: -600px;
    transition: top 0.3s cubic-bezier(.05,.29,.47,.99);
}

.header-bar .menu-item-has-children.active .sub_menu{
    top: 100px;
}

html.menu-bar__is_fixed .header-bar .menu-item-has-children.active .sub_menu{
    top: 60px;
    border-top: none;
}

.header-bar .sub_menu .fade-frame {
    position: relative;
    opacity: 0;
    top: -35px;
    transition: opacity 0.41s ease-out 0.15s, top 0.23s ease-out 0.15s;
}

.header-bar  .menu-item-has-children.active .sub_menu .fade-frame {
    opacity: 1;
    top: 0;
}

.header-bar .sub_menu ul{
    width: 100%;
    height: 100%;
}

.header-bar .sub_menu .first-struct  li{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 390px;
    max-width: 320px;
    margin: 0 40px;
}

.header-bar .sub_menu::after{
    position: absolute;
    bottom: -72px;
    left: 0;
    background: url("../img/transition-bg-small.svg") no-repeat center center;
    background-size: 100% 100%;
    transform: scaleY(-1);
    height: 72px;
    width: 100%;
    content: '';
}

@media only screen and (max-width: 1200px){
    .header-bar .sub_menu .first-struct li{
        max-width: 360px;
        margin: 0 20px;
    }
}

.header-bar .sub_menu .first-struct li a{
    display: block;
    box-sizing: border-box;
    width: calc(100% - 20px);
    padding: 50px 20px;
    transition: all 0.2s ease-out;
    border: 3px solid transparent;
    border-radius: 50%;
    color: #3E3E3E;
}

.header-bar .sub_menu .first-struct li a:hover{
    border-color: #e4e5e1;
}



.header-bar .sub_menu .first-struct li a .icon-holder{
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 40px auto;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: 3px solid #B8C28D;
}

.header-bar .sub_menu .first-struct li a .icon-holder .icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 60px;
    width: 60px;
    background: no-repeat center center;
    background-size: cover;
}



.header-bar .sub_menu .first-struct li a .icon-holder.versicherung .icon{
    background-image: url("../icons/menu-versicherung.svg");
}
.header-bar .sub_menu .first-struct li a .icon-holder.investment .icon{
    background-image: url("../icons/menu-investment.svg");
}
.header-bar .sub_menu .first-struct li a .icon-holder.finanzierung .icon{
    background-image: url("../icons/menu-finanzierung.svg");
}

.header-bar .sub_menu .first-struct li a .text-content{
    text-align: center;
}

.header-bar .sub_menu .first-struct li a .text-content h3{
    line-height: 24px;
    font-size: 20px;
    margin: 0 0 10px 0;
}

.header-bar .sub_menu .first-struct li  a .text-content .text{
    font-weight: 300;
    line-height: 20px;
    font-size: 14px;
}


/* SECOND MENU STRUCT */

.header-bar .sub_menu .box-wrapper{
    display: flex;
    height: 390px;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
    box-sizing: border-box;
}



.header-bar .sub_menu .box-wrapper .left-section{
    width: 55%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    border-right: 3px solid #DDDFDC;
}

.header-bar .sub_menu .box-wrapper .left-section li{
    max-width: 420px;
    display: block;
    margin-right: 40px;
    width: 100%;
}

.header-bar .sub_menu .box-wrapper .left-section li a{
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    border: 3px solid transparent;
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
    border-radius: 120px;
    color: #3E3E3B;
}

.header-bar .sub_menu .box-wrapper .left-section li a:hover{
    border-color: #E8EBE3;
    color: #3E3E3B;
}

.header-bar .sub_menu .box-wrapper .left-section li a .icon-holder{
    position: relative;
    width: 70px;
    min-width: 70px;
    height: 70px;
    background-size: cover;
    margin-right: 25px;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: 3px solid #B8C28D;
}

.header-bar .sub_menu .box-wrapper .left-section li a .icon-holder .icon{
    width: 40px;
    min-width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.header-bar .sub_menu .box-wrapper .left-section li a .icon-holder.simplr .icon{
    background: url("../icons/menu-simplr.svg") no-repeat center center;
    background-size: contain;
}
.header-bar .sub_menu .box-wrapper .left-section li a .icon-holder.finanzplanung .icon{
    background: url("../icons/menu-finanzplanung.svg") no-repeat center center;
    background-size: contain;
}
.header-bar .sub_menu .box-wrapper .left-section li a .icon-holder.finanz-check .icon{
    background: url("../icons/menu-finanzselbstcheck.svg") no-repeat center center;
    background-size: contain;
}



.header-bar .sub_menu .box-wrapper .left-section li a .text{
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    white-space: normal;
}

.header-bar .sub_menu .box-wrapper .left-section li a h3{
    margin: 0 0 10px 0;
    font-size: 20px;
    line-height: 24px;
}

.header-bar .sub_menu .box-wrapper .right-section{
    justify-content: center;
    width: 45%;
    flex-direction: column;
}

.header-bar .sub_menu .box-wrapper .right-section li{
    display: block;
    width: calc(100% - 80px);
    margin-bottom: 15px;
    font-size: 16px;
    margin-left: 80px;
}
@media only screen and (max-width: 1150px){
    .header-bar .sub_menu .box-wrapper .right-section li{
        width: calc(100% - 60px);
        margin-left: 60px;
    }
}

.header-bar .sub_menu .box-wrapper .right-section li:last-child{
    margin-bottom: 0;
}

.header-bar .sub_menu .box-wrapper .right-section li a{
    width: 100%;
    max-width: 320px;
    display: block;
    padding: 15px;
    border-radius: 50px;
    color: #3E3E3E;
    background-color: #FFFFFF;
    transition: color 0.2s ease-out;
}

.header-bar .sub_menu .box-wrapper .right-section li a:hover{
    color: #4C8B16;
}

.header-bar .sub_menu .box-wrapper .right-section li a svg{
   position: relative;
    top: 2px;
    margin-right: 20px;
    margin-left: 15px;
    transition: all 0.2s ease-out;
}

.header-bar .sub_menu .box-wrapper .right-section li a svg line,
.header-bar .sub_menu .box-wrapper .right-section li a svg path{
    transition: all 0.2s ease-out;
}


.header-bar .sub_menu .box-wrapper .right-section li a:hover svg{
    margin-right: 15px;
    margin-left: 20px;
}

.header-bar .sub_menu .box-wrapper .right-section li a:hover svg line,
.header-bar .sub_menu .box-wrapper .right-section li a:hover svg path{
    stroke: #4C8B16;
    fill: #4C8B16;
}


/* Slider SECTION */




.header-slider .splide__slide .content-section,
.header-slider .splide__slide .content-section .box-wrapper
{
    height: 100%;
}


.header-slider{
    position: relative;
    z-index: 1;
}

@media only screen and (max-width: 1150px){
    .header-slider > .padding-frame{
        padding: 0;
    }
}


@media only screen and (max-width: 1150px){
    .header-slider .box-wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.header-slider .box-wrapper .left-section{
    width: 60%;
    float: left;
    position: relative;
    padding-bottom: 127px;
    z-index: 0;
}


.header-slider .box-wrapper .right-section{
    width: 40%;
    float: right;
}




@media only screen and (max-width: 1400px){
    .header-slider .box-wrapper .left-section,
    .header-slider .box-wrapper .right-section{
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 1150px){
    .header-slider .box-wrapper .left-section{
        margin-left: -200px;
    }
    .header-slider .box-wrapper .left-section,
    .header-slider .box-wrapper .right-section{
        width: unset;
        max-width: 100%;
        float: none;
    }

    .header-slider .box-wrapper .right-section{
        height: 100%;
    }
}

@media only screen and (max-width: 1150px){

    .header-slider .box-wrapper .right-section{
        position: relative;
        width: 100%;
        background-color: #F2F3EF;
        padding-bottom: 0;
    }

    .header-slider .box-wrapper .right-section::before{
        position: absolute;
        width: 100%;
    }
}

@media only screen and (max-width: 500px){
    .header-slider .box-wrapper .left-section{
        margin-left: -100px;
        padding-bottom: 52px;
    }
}


.header-slider .box-wrapper .right-section .text-container{
    margin-top: 80px;
    max-width: 400px;
    height: 100%;
}

@media only screen and (max-width: 1400px){
    .header-slider .box-wrapper .right-section .text-container{
        margin-top: 20px;
    }
}

@media only screen and (max-width: 1150px){
    .header-slider .box-wrapper .right-section .text-container{
        margin: 40px auto 0 auto;
        padding: 0 40px;
        max-width: 700px;

    }
}

@media only screen and (max-width: 500px){
    .header-slider .box-wrapper .right-section .text-container{
        padding: 0 20px;

    }
}

.header-slider .box-wrapper .right-section .text-container h2{
    font-size: 43px;
    font-style: italic;
    line-height: 52px;
    margin: 0;
}

@media only screen and (max-width: 500px){
    .header-slider .box-wrapper .right-section .text-container h2{
        font-size: 26px;
        line-height: 30px;
    }
}

@media only screen and (max-width: 400px){
    .header-slider .box-wrapper .right-section .text-container h2{
        font-size: 20px;
        line-height: 24px;
    }
}

.header-slider .box-wrapper .right-section .text-container .text{
    margin-top: 30px;
}

@media only screen and (max-width: 500px){
    .header-slider .box-wrapper .right-section .text-container .text{
        margin-top: 20px;
    }
}

.header-slider .box-wrapper .right-section .text-container a{
    position: relative;
    display: block;
    margin-top: 40px;
    font-size: 22px;
    line-height: 24px;
    font-weight: 400;
    color: #7EAC14;
    transition: color 0.2s ease-out;
}


@media only screen and (max-width: 500px){
    .header-slider .box-wrapper .right-section .text-container a{
        margin-top: 20px;
        font-size: 18px;
    }
}

.header-slider .box-wrapper .right-section .text-container a > svg{
    position: relative;
    top: 2px;
    margin-left: 10px;
    transform: scale(0.8);
    transition: margin-left 0.2s ease-out;
}

.header-slider .box-wrapper .right-section .text-container a > svg path,
.header-slider .box-wrapper .right-section .text-container a > svg line{
    transition: all 0.2s ease-out;
}

.header-slider .box-wrapper .right-section .text-container a:hover{
    color: #4C8B16;
}

.header-slider .box-wrapper .right-section .text-container a:hover > svg{
    margin-left: 16px;
}
.header-slider .box-wrapper .right-section .text-container a:hover > svg path,
.header-slider .box-wrapper .right-section .text-container a:hover > svg line{
    fill: #4C8B16;
    stroke: #4C8B16;
}

.header-slider .img-mask{
    position: relative;
    width: 610px;
    height: 550px;
    -webkit-mask-image: url("../img/slider-mask.svg");
    mask-image: url("../img/slider-mask.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
}



.header-slider .img-mask::after{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 610px;
    height: 550px;
    background: url("../img/slider-mask-addition-layer.svg") no-repeat center center;
    background-size: cover;
}


@media only screen and (max-width: 1400px){
    .header-slider .img-mask{
        width: 450px;
        height: 405px;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
    .header-slider .img-mask::after{
        width: 450px;
        height: 405px;
    }
}

@media only screen and (max-width: 700px){
    .header-slider .img-mask,
    .header-slider .img-mask::after{
        width: 360px;
        height: 325px;
    }
}
@media only screen and (max-width: 500px){
    .header-slider .img-mask,
    .header-slider .img-mask::after{
        width: 255px;
        height: 230px;
    }
}


.header-slider .img-mask .image{
    width: 100%;
    height: 100%;
    background: no-repeat center center;
    background-size: cover;
}

.header-slider .left-section .icon-section{
    position: absolute;
    top: 0;
    right: 40px;
    width: 250px;
    height: 500px;
    display: flex;
    align-items: flex-end;
    z-index: 30;
}

@media only screen and (max-width: 1400px){
    .header-slider .left-section .icon-section{
        right: unset;
        top: 130px;
        left: 400px;
        width: 150px;
        height: 250px;
    }
}

@media only screen and (max-width: 700px){
    .header-slider .left-section .icon-section{
        top: 40px;
        left: 310px;
        width: 120px;
        height: 250px;
    }
}

@media only screen and (max-width: 500px){
    .header-slider .left-section .icon-section{
        width: 80px;
        height: 200px;
        left: 220px;
        top: 0;
    }
}


.header-slider .left-section .icon-section img{
    max-width: 100%;
    max-height: 100%;
}

.header-slider .decoration-element{
    position: absolute;
    top: 358px;
    left: 199px;
    background: url("../img/pagination-sector.svg") no-repeat center center;
    height: 320px;
    width: 680px;
    background-size: contain;
    z-index: -1;
}

@media only screen and (max-width: 1400px){
    .header-slider .decoration-element{
        top: 260px;
        left: 149px;
        height: 240px;
        width: 510px;
    }
}

@media only screen and (max-width: 700px){
    .header-slider .decoration-element{
        top: 212px;
        left: 116px;
        height: 188px;
        width: 400px;
    }
}

@media only screen and (max-width: 500px){
    .header-slider .decoration-element{
        top: 147px;
        left: 84px;
        height: 135px;
        width: 285px;
    }
}

.header-slider .transition-layer{
    position: relative;
    z-index: -1;
    padding-top: 100px;
    background-color: #F2F3EF;
    margin-bottom: -100px;
}

@media only screen and (max-width: 500px){
    .header-slider .transition-layer{
        padding-top: 60px;
    }
}


.header-slider .transition-layer::before,
.header-slider .content-section .right-section::before{
    position: absolute;
    top: -130px;
    left: 0;
    content: '';
    width: 100%;
    height: 130px;
    background: url("../img/transition-background.svg") no-repeat center 0;
    background-size: 100% 100%;
}

@media only screen and (max-width: 1100px){
    .header-slider .transition-layer::before,
    .header-slider .content-section .right-section::before{
        background-size: cover;
    }
}

.header-slider .content-section .right-section::before{
    display: none;
}

@media only screen and (max-width: 1150px){
    .header-slider .transition-layer::before{
        display: none;
    }
    .header-slider .content-section .right-section::before{
        display: block;
        z-index: -1;
    }
}



.header-slider .transition-layer .spacer-line{
    background-color: #89AA38;
    height: 3px;
    margin-bottom: 100px;
}

.header-slider .arrow-section{
    position: absolute;
    top: 595px;
    left: 0;
    width: 100%;
}

@media only screen and (max-width: 1400px){
    .header-slider .arrow-section{
        top: 435px;
    }
}
@media only screen and (max-width: 1150px){
    .header-slider .arrow-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}


@media only screen and (max-width: 700px){
    .header-slider .arrow-section{
        top: 345px;
    }
}

@media only screen and (max-width: 500px){
    .header-slider .arrow-section{
        top: 230px;
    }
}


.header-slider .arrow-section .left-section{
    width: 60%;
    float: left;
    position: relative;
}

.header-slider .arrow-section .right-section{
    width: 40%;
    float: right;
}

@media only screen and (max-width: 1150px){
    .header-slider .arrow-section .left-section,
    .header-slider .arrow-section .right-section {
        width: unset;
        max-width: 100%;
    }
    .header-slider .arrow-section .left-section,
    .header-slider .arrow-section .right-section {
        width: 405px;
    }
}

@media only screen and (max-width: 500px){
    .header-slider .arrow-section .left-section,
    .header-slider .arrow-section .right-section {
        width: 255px;
    }
}



.header-slider .arrow-section .left-section .splide__arrow{
    display: block;
    opacity: 0.65;
    position: static;
    border-radius: 0;
    transform: none;
    background-color: transparent;
    transition: opacity 0.2s ease-out;
}

.header-slider .arrow-section .left-section .splide__arrow:hover{
    opacity: 0.9;
}

.header-slider .arrow-section .left-section .splide__arrows{
    width: 150px;
    position: absolute;
    left: 700px;
}

@media only screen and (max-width: 1400px){
    .header-slider .arrow-section .left-section .splide__arrows{
        left: 500px;
        width: 120px;
    }
}

@media only screen and (max-width: 1150px){
    .header-slider .arrow-section .left-section .splide__arrows{
        left: 390px;
    }
}

@media only screen and (max-width: 700px){
    .header-slider .arrow-section .left-section .splide__arrows{
        left: 310px;
        width: 100px;
    }
}

@media only screen and (max-width: 500px){
    .header-slider .arrow-section .left-section .splide__arrows{
        left: 170px;
    }
}


.header-slider .arrow-section .splide__arrow--prev{
    float: left;
    width: 60px;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='60.387' height='40' viewBox='0 0 60.387 40'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rechteck_7375' data-name='Rechteck 7375' width='23.495' height='23.473' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/clipPath%3E%3CclipPath id='clip-path-3'%3E%3Crect id='Rechteck_7377' data-name='Rechteck 7377' width='60.387' height='6.834' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Gruppe_3225' data-name='Gruppe 3225' transform='translate(60.387 40) rotate(180)' style='isolation: isolate'%3E%3Cg id='Gruppe_1782' data-name='Gruppe 1782' transform='translate(36.892 0)' style='isolation: isolate'%3E%3Cg id='Gruppe_1769' data-name='Gruppe 1769' transform='translate(0)'%3E%3Cg id='Gruppe_1768' data-name='Gruppe 1768' clip-path='url(%23clip-path)'%3E%3Cpath id='Pfad_25' data-name='Pfad 25' d='M16.661 16.64.021 0 0 .024' transform='translate(3.417 3.416)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Gruppe_1783' data-name='Gruppe 1783' transform='translate(36.892 16.527)' style='isolation: isolate'%3E%3Cg id='Gruppe_1772' data-name='Gruppe 1772' transform='translate(0 0)'%3E%3Cg id='Gruppe_1771' data-name='Gruppe 1771' clip-path='url(%23clip-path)'%3E%3Cpath id='Pfad_26' data-name='Pfad 26' d='M0 16.616l.02.021L16.661 0' transform='translate(3.417 3.418)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Gruppe_1784' data-name='Gruppe 1784' transform='translate(0 16.541)' style='isolation: isolate'%3E%3Cg id='Gruppe_1775' data-name='Gruppe 1775' transform='translate(0 0)'%3E%3Cg id='Gruppe_1774' data-name='Gruppe 1774' clip-path='url(%23clip-path-3)'%3E%3Cline id='Linie_1' data-name='Linie 1' x1='53.587' transform='translate(3.401 3.417)' fill='%23b5c387' stroke='%23fff' stroke-width='3'/%3E%3Cline id='Linie_2' data-name='Linie 2' x1='53.587' transform='translate(3.401 3.417)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    opacity: .65;
    background-size: cover;
}

.header-slider .arrow-section .splide__arrow--prev svg{
    display: none;
}
.header-slider .arrow-section .splide__arrow--next{
    float: right;
    width: 60px;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='60.387' height='40' viewBox='0 0 60.387 40'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rechteck_7375' data-name='Rechteck 7375' width='23.495' height='23.473' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/clipPath%3E%3CclipPath id='clip-path-3'%3E%3Crect id='Rechteck_7377' data-name='Rechteck 7377' width='60.387' height='6.834' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Gruppe_3225' data-name='Gruppe 3225' transform='translate(60.387 40) rotate(180)' style='isolation: isolate'%3E%3Cg id='Gruppe_1782' data-name='Gruppe 1782' transform='translate(36.892 0)' style='isolation: isolate'%3E%3Cg id='Gruppe_1769' data-name='Gruppe 1769' transform='translate(0)'%3E%3Cg id='Gruppe_1768' data-name='Gruppe 1768' clip-path='url(%23clip-path)'%3E%3Cpath id='Pfad_25' data-name='Pfad 25' d='M16.661 16.64.021 0 0 .024' transform='translate(3.417 3.416)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Gruppe_1783' data-name='Gruppe 1783' transform='translate(36.892 16.527)' style='isolation: isolate'%3E%3Cg id='Gruppe_1772' data-name='Gruppe 1772' transform='translate(0 0)'%3E%3Cg id='Gruppe_1771' data-name='Gruppe 1771' clip-path='url(%23clip-path)'%3E%3Cpath id='Pfad_26' data-name='Pfad 26' d='M0 16.616l.02.021L16.661 0' transform='translate(3.417 3.418)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Gruppe_1784' data-name='Gruppe 1784' transform='translate(0 16.541)' style='isolation: isolate'%3E%3Cg id='Gruppe_1775' data-name='Gruppe 1775' transform='translate(0 0)'%3E%3Cg id='Gruppe_1774' data-name='Gruppe 1774' clip-path='url(%23clip-path-3)'%3E%3Cline id='Linie_1' data-name='Linie 1' x1='53.587' transform='translate(3.401 3.417)' fill='%23b5c387' stroke='%23fff' stroke-width='3'/%3E%3Cline id='Linie_2' data-name='Linie 2' x1='53.587' transform='translate(3.401 3.417)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    transform: rotate(180deg)!important;
    opacity: .65;
    background-size: cover;
}

@media only screen and (max-width: 1400px){
    .header-slider .arrow-section .splide__arrow--next,
    .header-slider .arrow-section .splide__arrow--prev {
        width: 50px;
        height: 33px;
    }
}

@media only screen and (max-width: 700px){
    .header-slider .arrow-section .splide__arrow--next,
    .header-slider .arrow-section .splide__arrow--prev {
        width: 42px;
        height: 30px;
    }
}

@media only screen and (max-width: 500px){
    .header-slider .arrow-section .splide__arrow--next,
    .header-slider .arrow-section .splide__arrow--prev {
        height: 28px;
    }
}

.header-slider .arrow-section .splide__arrow--next svg{
    display: none;
}

.header-slider .button-link {
    position: relative;
    top: -20px;
    right: -120px;
    padding: 15px 30px;
    background-color: #93ADAE;
    border-radius: 25px;
    color: #FFFFFF;
    font-size: 16px;
    transition: background-color 0.2s ease-out;
}

.header-slider .button-link:hover {
    background-color: #6B979F;
}

@media only screen and (max-width: 1150px){
    .header-slider .button-link {
        top: -60px;
        right: 20px;
    }
}

@media only screen and (max-width: 750px){
    .header-slider .button-link {
        display: none;
    }
}

.header-slider .button-link svg{
    margin-top: 3px;
    margin-left: 10px;
}






/* Header Image für Unterseiten */






.header-image{
    position: relative;
    z-index: 1;
}

@media only screen and (max-width: 1150px){
    .header-image > .padding-frame{
        padding: 0;
    }
}


@media only screen and (max-width: 1150px){
    .header-image .box-wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.header-image .box-wrapper{
    overflow-x: clip;
}


.header-image .box-wrapper .left-section{
    width: 60%;
    float: left;
    position: relative;
    padding-bottom: 25px;
    z-index: 0;
}


.header-image .box-wrapper .right-section{
    width: 40%;
    float: right;
}

@media only screen and (max-width: 1150px){
    .header-image .box-wrapper .left-section{
        margin-left: -200px;
        padding-bottom: 20px;
    }
    .header-image .box-wrapper .left-section,
    .header-image .box-wrapper .right-section{
        width: unset;
        max-width: 100%;
        float: none;
    }
}

@media only screen and (max-width: 1150px){

    .header-image .box-wrapper .right-section{
        position: relative;
        width: 100%;
        background-color: #F2F3EF;
        padding-bottom: 0;
    }

    .header-image .box-wrapper .right-section::before{
        position: absolute;
        width: 100%;
    }
}

@media only screen and (max-width: 500px){
    .header-image .box-wrapper .left-section{
        margin-left: -100px;
    }
}




.header-image .box-wrapper .right-section .text-container{
    max-width: 400px;
    margin: 80px auto 0 auto;
}


@media only screen and (max-width: 1150px){
    .header-image .box-wrapper .right-section .text-container{
        margin: 40px auto 0 auto;
        padding: 0 40px;
        max-width: 700px;
    }
}

@media only screen and (max-width: 500px){
    .header-image .box-wrapper .right-section .text-container{
        padding: 0 20px;

    }
}

.header-image .box-wrapper .right-section .text-container h2{
    font-size: 43px;
    font-style: italic;
    line-height: 52px;
    margin: 0;
}

@media only screen and (max-width: 500px){
    .header-image .box-wrapper .right-section .text-container h2{
        font-size: 26px;
        line-height: 30px;
    }
}

@media only screen and (max-width: 400px){
    .header-image .box-wrapper .right-section .text-container h2{
        font-size: 20px;
        line-height: 24px;
    }
}

.header-image .box-wrapper .right-section .text-container .text{
    margin-top: 30px;
}

@media only screen and (max-width: 500px){
    .header-image .box-wrapper .right-section .text-container .text{
        margin-top: 20px;
    }
}

.header-image .box-wrapper .right-section .text-container a{
    position: relative;
    display: block;
    margin-top: 40px;
    font-size: 22px;
    line-height: 24px;
    color: #7EAC14;
    transition: color 0.2s ease-out;
}

@media only screen and (max-width: 500px){
    .header-image .box-wrapper .right-section .text-container a{
        margin-top: 20px;
        font-size: 18px;
    }
}

.header-image .box-wrapper .right-section .text-container a > svg{
    position: relative;
    top: 2px;
    margin-left: 10px;
    transform: scale(0.8);
}

.header-image .box-wrapper .right-section .text-container a:hover{
    color: #4C8B16;
}

.header-image .img-mask{
    position: relative;
    width: 577px;
    height: 445px;
    -webkit-mask-image: url("../img/header-img-mask.svg");
    mask-image: url("../img/header-img-mask.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
}



.header-image .img-mask::after{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 578px;
    height: 445px;
    background: url("../img/header-img-mask-layer.svg") no-repeat center center;
    background-size: cover;
}


@media only screen and (max-width: 1150px){
    .header-image .img-mask{
        width: 450px;
        height: 405px;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
    .header-image .img-mask::after{
        width: 450px;
        height: 405px;
        background-size: contain;
    }
}

@media only screen and (max-width: 700px){
    .header-image .img-mask,
    .header-image .img-mask::after{
        width: 360px;
        height: 325px;
    }
}
@media only screen and (max-width: 500px){
    .header-image .img-mask,
    .header-image .img-mask::after{
        width: 255px;
        height: 230px;
    }
}


.header-image .img-mask .image{
    width: 100%;
    height: 100%;
    background: no-repeat center center;
    background-size: cover;
}

.header-image .left-section .icon-section{
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
    height: 400px;
    display: flex;
    align-items: flex-end;
    z-index: 30;
    margin-right: 20px;
}


@media only screen and (max-width: 1150px){
    .header-image .left-section .icon-section{
        right: unset;
        /*top: 130px;*/
        top: 70px;
        left: 380px;
        width: 150px;
        height: 250px;
    }
}

@media only screen and (max-width: 700px){
    .header-image .left-section .icon-section{
        /*top: 40px;*/
        top: 10px;
        left: 290px;
        width: 120px;
        height: 250px;
    }
}

@media only screen and (max-width: 500px){
    .header-image .left-section .icon-section{
        width: 80px;
        height: 200px;
        left: 200px;
        top: -20px;
    }
}



.header-image .left-section .icon-section img{
    max-width: 100%;
    max-height: 100%;
}

.header-image .decoration-element{
    position: absolute;
    top: 191px;
    left: 163px;
    background: url("../img/pagination-sector.svg") no-repeat center center;
    height: 320px;
    width: 680px;
    background-size: contain;
    z-index: -1;
}


@media only screen and (max-width: 1150px){
    .header-image .decoration-element{
        top: 184px;
        left: 131px;
        height: 240px;
        width: 510px;
    }
}

@media only screen and (max-width: 700px){
    .header-image .decoration-element{
        top: 151px;
        left: 106px;
        height: 188px;
        width: 400px;
    }
}

@media only screen and (max-width: 500px){
    .header-image .decoration-element{
        top: 106px;
        left: 74px;
        height: 135px;
        width: 285px;
    }
}

.header-image .transition-layer{
    position: relative;
    z-index: -1;
    padding-top: 100px;
    background-color: #F2F3EF;
    margin-bottom: -100px;
}

@media only screen and (max-width: 700px){
    .header-image .transition-layer.one-line-hl{
        padding-top: 60px;
    }
}

@media only screen and (max-width: 500px){
    .header-image .transition-layer{
        padding-top: 40px!important;
    }
}


.header-image .transition-layer::before,
.header-image .content-section .right-section::before{
    position: absolute;
    top: -130px;
    left: 0;
    content: '';
    width: 100%;
    height: 130px;
    background: url("../img/transition-background.svg") no-repeat center 0;
    background-size: 100% 100%;
}

@media only screen and (max-width: 1100px){
    .header-image .transition-layer::before,
    .header-image .content-section .right-section::before{
        background-size: cover;
    }
}

.header-image .content-section .right-section::before{
    display: none;
}

@media only screen and (max-width: 1150px){
    .header-image .transition-layer::before{
        display: none;
    }
    .header-image .content-section .right-section::before{
        display: block;
        z-index: -1;
    }
}



.header-image .transition-layer .spacer-line{
    background-color: #89AA38;
    height: 3px;
    margin-bottom: 100px;
}

.header-image .button-link {
    position: relative;
    top: -20px;
    right: -120px;
    padding: 15px 30px;
    background-color: #93ADAE;
    border-radius: 25px;
    color: #FFFFFF;
    font-size: 16px;
    transition: background-color 0.2s ease-out;
}
.header-image .button-link:hover {
    background-color: #6B979F;
}

@media only screen and (max-width: 1150px){
    .header-image .button-link {
        top: -60px;
        right: 20px;
    }
}

@media only screen and (max-width: 750px){
    .header-image .button-link {
        display: none;
    }
}

.header-image .button-link svg{
    margin-top: 3px;
    margin-left: 10px;
}






/* CO-ELs */




/* Text mit Icons */

.co-el.text-with-icons .text-section{
    max-width: 700px;
    margin: 0 auto 75px auto;
    text-align: center;
}

@media only screen and (max-width: 730px){
    .co-el.text-with-icons .text-section{
        margin-bottom: 40px;
    }
}

@media only screen and (max-width: 700px){
    .co-el.text-with-icons .text-section{
        text-align: initial;
    }
}

.co-el.text-with-icons .text-section .headlines h2{
    margin: 0;
}

.co-el.text-with-icons .text-section .headlines{
    margin-bottom: 30px;
}

@media only screen and (max-width: 500px){
    .co-el.text-with-icons .text-section .headlines{
        margin-bottom: 20px;
    }
}

.co-el.text-with-icons .list-section ul{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.co-el.text-with-icons .list-section ul li{
    display: block;
    max-width: 255px;
    width: 100%;
    margin: 0 35px 70px 35px;
}

@media only screen and (max-width: 730px){
    .co-el.text-with-icons .list-section ul li{
        margin: 0 0 40px 0;
    }
}

.co-el.text-with-icons .list-section ul li .icon{
    width: 50px;
    height: 50px;
    background: no-repeat center center;
    margin: 0 auto 20px auto;
    background-size: contain;
}

.co-el.text-with-icons .list-section ul li .text{
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    white-space: normal;
    text-align: center;
    max-width: 220px;
    margin: auto;
}

.co-el.text-with-icons .text ul{
    padding: 0 0 0 35px;
}

.co-el.text-with-icons .text li {
    position: relative;
    display: block;
    margin-bottom: 5px;
}

.co-el.text-with-icons ul li::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg id='Gruppe_3623' data-name='Gruppe 3623' transform='translate(-354.517 -5744.378)'%3E%3Ccircle id='Ellipse_267' data-name='Ellipse 267' cx='11' cy='11' r='11' transform='translate(354.517 5744.378)' fill='%23829fa0'/%3E%3Cg id='Gruppe_3570' data-name='Gruppe 3570' transform='translate(360.513 5752.852)'%3E%3Cpath id='Pfad_14336' data-name='Pfad 14336' d='M117.824 7.871l3.443-3.443 3.118-3.23' transform='translate(-114.377 -1.198)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Pfad_14337' data-name='Pfad 14337' d='M121.271 9.51l-3.443-3.443 0 0' transform='translate(-117.824 -2.837)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    position: absolute;
    height: 20px;
    width: 20px;
    top: 2px;
    left: -35px;
    content: '';
}





.co-el.text-with-icons .spacer-line{
    background-color: #89AA38;
    height: 3px;
    margin-bottom: 100px;
}

.co-el.text-with-icons .button-bar{
    display: flex;
    justify-content: flex-start;
    margin-top: 40px;
}
.co-el.text-with-icons .button-bar.centered{
    justify-content: center;
}

@media only screen and (max-width: 500px){
    .co-el.text-with-icons .button-bar{
        margin-top: 20px;
    }
}

.co-el.text-with-icons .button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #93ADAE;
    border-radius: 25px;
    color: #FFFFFF;
    font-size: 16px;
    transition: background-color 0.2s ease-out;
}
.co-el.text-with-icons .button:hover{
    background-color: #6B979F;
}

.co-el.text-with-icons .button svg{
    position: relative;
    margin-left: 20px;
    top: 1px;
}



/* SPACER */

.co-el.spacer .spacer-line{
    background-color: #89AA38;
    height: 3px;
}

.co-el.spacer .spacer-line.blue{
    background-color: #095571;
}

/* Box Element */

.co-el.box-element .headlines{
    margin-bottom: 30px;
}

@media only screen and (max-width: 500px){
    .co-el.box-element .headlines{
        margin-bottom: 20px;
    }
}

.co-el.box-element .headlines h2{
    margin: 0;
}

.co-el.box-element .inner-padding-frame{
    padding: 0 40px;
}

@media only screen and (max-width: 600px){
    .co-el.box-element .inner-padding-frame{
        padding: 0;
    }
}

.co-el.box-element .box-list{
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.co-el.box-element .box-list li{
    box-sizing: border-box;
    display: block;
    cursor: pointer;
    width: 100%;
    max-width: 350px;
    min-height: 200px;
    border-radius: 35px;
    background-color: #FFFFFF;
    border: 3px solid #EEEEEE;
    margin: 0 10px 20px 10px;
}

@media only screen and (max-width: 500px){
    .co-el.box-element .box-list li{
        margin: 0 0 20px 0;
    }
}


.co-el.box-element .box-list li .content{
    position: relative;
    padding: 40px;
    width: calc(100% - 80px);
    min-height: calc(100% - 80px);
}
@media only screen and (max-width: 500px){
    .co-el.box-element .box-list li .content{
        position: relative;
        padding: 30px;
        width: calc(100% - 60px);
        min-height: calc(100% - 60px);
    }
}

.co-el.box-element .box-list li span{
    position: absolute;
    cursor: pointer;
    bottom: 37px;
    right: 100px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: #7EAC14;
    transition: color 0.2s ease-out;
}

.co-el.box-element .box-list li span:hover{
    color: #4C8B16;
}

.co-el.box-element .box-list li .top-section{
    display: flex;
}

.co-el.box-element .box-list li .lightbox-content .top-section{
    margin-bottom: 40px;
}

.co-el.box-element .box-list li .top-section .icon{
    width: 50px;
    min-width: 50px;
    height: 50px;
    margin-right: 20px;
    background: no-repeat center center;
    background-size: contain;

}

.co-el.box-element .box-list li .top-section .text{
    display: flex;
    align-items: center;
    font-size: 18px;
    line-height: 25px;
    /*
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    white-space: normal;
     */
}

@media only screen and (max-width: 500px){
    .co-el.box-element .box-list li .top-section .text{
        font-size: 16px;
        line-height: 20px;
    }
}

.co-el.box-element .box-list li .link-icon{
    position: absolute;
    bottom: 30px;
    right: 40px;
    width: 35px;
    height: 35px;
    cursor: pointer;
}

.co-el.box-element .box-list li  .link-icon::before,
.co-el.box-element .box-list li  .link-icon::after {
    content: '';
    top: 16px;
    left: 0;
    position: absolute;
    width: 35px;
    height: 3px;
    background-color: #4C8B16;
}
.co-el.box-element .box-list li .content .link-icon::after{
    transform: rotate(90deg);
}

.co-el.box-element .lightbox-content{
    top: -100%;
    left: 50%;
    position: fixed;
    padding: 40px 40px 80px 40px;
    width: calc(100% - 80px);
    transform: translate(-50%, -50%);
    max-width: 480px;
    margin-bottom: 40px;
    box-sizing: border-box;
    display: block;
    cursor: initial;
    border-radius: 35px;
    border: 3px solid #EEEEEE;
    transition: all 0.3s ease-out;
    background-color: #FFFFFF;
    z-index: 100;
}


@media only screen and (max-width: 500px){
    .co-el.box-element .lightbox-content{
        width: calc(100% - 40px);
    }
}

.co-el.box-element .lightbox-content.active{
    top: 50%;
}

/* Customer Comment */

.co-el.customer-comment{
    overflow-x: clip;
}

.co-el.customer-comment .img-mask{
    position: relative;
    width: 360px;
    height: 360px;
    margin-left: 40px;
    -webkit-mask-image: url('../img/image-mask-small.svg');
    mask-image: url('../img/image-mask-small.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin-right: 90px;
}

@media only screen and (max-width: 450px){
    .co-el.customer-comment .img-mask{
        width: 290px;
        height: 290px;
        mask-size: 100% 100%;
        -webkit-mask-size: 100% 100%;
        margin: auto;
    }
}


.co-el.customer-comment .img-mask .image{
    width: 100%;
    height: 100%;
    background: no-repeat center center;
    background-size: cover;
}

.co-el.customer-comment .img-mask .image::after{
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 360px;
    height: 320px;
    z-index: 10;
    background: url("../img/image-mask-small-layer.svg") no-repeat center center;
    background-size: cover;
}

@media only screen and (max-width: 450px){
    .co-el.customer-comment .img-mask .image::after{
        width: 290px;
        height: 290px;
    }
}


.co-el.customer-comment .img-bg-layer{
    position: absolute;
    top: 168px;
    left: 126px;
    background: url("../img/image-bg-layer.svg") no-repeat center center;
    background-size: cover;
    height: 230px;
    width: 490px;
    z-index: -1;
}

@media only screen and (max-width: 450px){
    .co-el.customer-comment .img-bg-layer{
        top: 134px;
        left: 154px;
    }
}

.co-el.customer-comment .wrapper{
    display: flex;
    padding-bottom: 28px;
}

@media only screen and (max-width: 1000px){
    .co-el.customer-comment .wrapper{
        flex-direction: column;
        align-items: center;
        padding: 0;
    }
}

.co-el.customer-comment .left-box,
.co-el.customer-comment .right-box {
    position: relative;
    width: 50%;
}

@media only screen and (max-width: 1000px){
    .co-el.customer-comment .right-box {
        width: 100%;
        max-width: 400px;
    }
}

.co-el.customer-comment .left-box{
    min-width: 470px;
}

.co-el.customer-comment .text-bubble::before{
    top: 75px;
    left: -19px;
    position: absolute;
    height: 29px;
    width: 19px;
    content: '';
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='19' height='29' viewBox='0 0 19 29'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rechteck_10088' data-name='Rechteck 10088' width='19' height='29' transform='translate(881 2615)' fill='%23fff' stroke='%23707070' stroke-width='1'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Gruppe_maskieren_2346' data-name='Gruppe maskieren 2346' transform='translate(-881 -2615)' clip-path='url(%23clip-path)'%3E%3Cpath id='Polygon_7' data-name='Polygon 7' d='M29.5 0 59 37.746H0Z' transform='translate(881 2658.983) rotate(-90)' fill='%23b5c387'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    background-size: cover;
}

@media only screen and (max-width: 1000px){
    .co-el.customer-comment .text-bubble::before{
        top: -24px;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
        position: absolute;
    }
}

.co-el.customer-comment .text-bubble{
    position: relative;
    margin-top: 50px;
    margin-bottom: 30px;
    min-height: 250px;
    background-color: #B5C387;
    border-radius: 20px;
    color: #FFFFFF;
}

@media only screen and (max-width: 1000px){
    .co-el.customer-comment .text-bubble{
        margin-top: 0;
    }
}

.co-el.customer-comment .text-bubble .text{
    padding: 30px;
}

.co-el.customer-comment .text-bubble .text ul{
    padding: 0 0 0 35px;
}

.co-el.customer-comment .text-bubble .text li {
    position: relative;
    display: block;
    margin-bottom: 5px;
}

.co-el.customer-comment .text-bubble .text ul li::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg id='Gruppe_3623' data-name='Gruppe 3623' transform='translate(-354.517 -5744.378)'%3E%3Ccircle id='Ellipse_267' data-name='Ellipse 267' cx='11' cy='11' r='11' transform='translate(354.517 5744.378)' fill='%23829fa0'/%3E%3Cg id='Gruppe_3570' data-name='Gruppe 3570' transform='translate(360.513 5752.852)'%3E%3Cpath id='Pfad_14336' data-name='Pfad 14336' d='M117.824 7.871l3.443-3.443 3.118-3.23' transform='translate(-114.377 -1.198)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Pfad_14337' data-name='Pfad 14337' d='M121.271 9.51l-3.443-3.443 0 0' transform='translate(-117.824 -2.837)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    position: absolute;
    height: 20px;
    width: 20px;
    top: 2px;
    left: -35px;
    content: '';
}





.co-el.customer-comment .customer-info {
    float: right;
    margin-right: 100px;
    line-height: 20px;
}

@media only screen and (max-width: 1000px){
    .co-el.customer-comment .customer-info{
        float: left;
        margin-right: 0;
        margin-left: 30px;
    }
}

.co-el.customer-comment .left-box .icon{
    position: absolute;
    top: 160px;
    left: 70px;
    background: url("data:image/svg+xml,%3Csvg id='Gruppe_3769' data-name='Gruppe 3769' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='48.193' height='48.178' viewBox='0 0 48.193 48.178'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rechteck_7984' data-name='Rechteck 7984' width='48.193' height='48.178' fill='none'/%3E%3C/clipPath%3E%3CclipPath id='clip-path-3'%3E%3Crect id='Rechteck_7978' data-name='Rechteck 7978' width='25.641' height='25.642' fill='none'/%3E%3C/clipPath%3E%3CclipPath id='clip-path-4'%3E%3Crect id='Rechteck_7979' data-name='Rechteck 7979' width='25.626' height='25.04' fill='none'/%3E%3C/clipPath%3E%3CclipPath id='clip-path-5'%3E%3Crect id='Rechteck_7980' data-name='Rechteck 7980' width='25.04' height='25.626' fill='none'/%3E%3C/clipPath%3E%3CclipPath id='clip-path-6'%3E%3Crect id='Rechteck_7981' data-name='Rechteck 7981' width='26.243' height='3.12' fill='none'/%3E%3C/clipPath%3E%3CclipPath id='clip-path-7'%3E%3Crect id='Rechteck_7982' data-name='Rechteck 7982' width='3.12' height='26.243' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Gruppe_3216' data-name='Gruppe 3216' clip-path='url(%23clip-path)' style='isolation: isolate'%3E%3Cg id='Gruppe_3215' data-name='Gruppe 3215' transform='translate(0 0)'%3E%3Cg id='Gruppe_3214' data-name='Gruppe 3214' clip-path='url(%23clip-path)'%3E%3Cg id='Gruppe_3201' data-name='Gruppe 3201' transform='translate(22.552 0)' style='mix-blend-mode: multiply%3Bisolation: isolate'%3E%3Cg id='Gruppe_3200' data-name='Gruppe 3200'%3E%3Cg id='Gruppe_3199' data-name='Gruppe 3199' clip-path='url(%23clip-path-3)'%3E%3Cpath id='Pfad_14200' data-name='Pfad 14200' d='M60.406 25.642a1.552 1.552 0 0 1-1.552-1.552A21.008 21.008 0 0 0 37.869 3.1a1.552 1.552 0 1 1 0-3.1A24.116 24.116 0 0 1 61.958 24.09a1.552 1.552 0 0 1-1.552 1.552' transform='translate(-36.317)' fill='%23829fa0'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Gruppe_3204' data-name='Gruppe 3204' transform='translate(0.03 0)' style='mix-blend-mode: multiply%3Bisolation: isolate'%3E%3Cg id='Gruppe_3203' data-name='Gruppe 3203'%3E%3Cg id='Gruppe_3202' data-name='Gruppe 3202' clip-path='url(%23clip-path-4)'%3E%3Cpath id='Pfad_14201' data-name='Pfad 14201' d='M1.616 25.04A1.565 1.565 0 0 1 .049 23.488a1.611 1.611 0 0 1 .022-.269A23.943 23.943 0 0 1 24.123 0a1.552 1.552 0 1 1 0 3.1A20.857 20.857 0 0 0 3.168 23.529 1.552 1.552 0 0 1 1.616 25.04' transform='translate(-0.049)' fill='%23cfd353'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Gruppe_3207' data-name='Gruppe 3207' transform='translate(23.153 22.537)' style='mix-blend-mode: multiply%3Bisolation: isolate'%3E%3Cg id='Gruppe_3206' data-name='Gruppe 3206'%3E%3Cg id='Gruppe_3205' data-name='Gruppe 3205' clip-path='url(%23clip-path-5)'%3E%3Cpath id='Pfad_14202' data-name='Pfad 14202' d='M38.838 61.919a1.54 1.54 0 0 1-1.552-1.537v-.03A1.552 1.552 0 0 1 38.8 58.8 20.857 20.857 0 0 0 59.221 37.845a1.552 1.552 0 0 1 3.1 0A23.942 23.942 0 0 1 39.1 61.9a1.581 1.581 0 0 1-.262.022' transform='translate(-37.286 -36.294)' fill='%23005571'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Gruppe_3210' data-name='Gruppe 3210' transform='translate(0 45.059)' style='mix-blend-mode: multiply%3Bisolation: isolate'%3E%3Cg id='Gruppe_3209' data-name='Gruppe 3209'%3E%3Cg id='Gruppe_3208' data-name='Gruppe 3208' clip-path='url(%23clip-path-6)'%3E%3Cpath id='Pfad_14203' data-name='Pfad 14203' d='M24.69 75.683H1.552a1.552 1.552 0 1 1 0-3.1H24.475A1.553 1.553 0 0 1 26.242 74.1a1.578 1.578 0 0 1-1.552 1.583' transform='translate(0 -72.563)' fill='%23b5c387'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Gruppe_3213' data-name='Gruppe 3213' transform='translate(0 21.936)' style='mix-blend-mode: multiply%3Bisolation: isolate'%3E%3Cg id='Gruppe_3212' data-name='Gruppe 3212'%3E%3Cg id='Gruppe_3211' data-name='Gruppe 3211' clip-path='url(%23clip-path-7)'%3E%3Cpath id='Pfad_14204' data-name='Pfad 14204' d='M1.552 61.568A1.552 1.552 0 0 1 0 60.016V36.877a1.56 1.56 0 0 1 3.12 0A1.591 1.591 0 0 1 3.1 37.1V60.016a1.552 1.552 0 0 1-1.552 1.552' transform='translate(0 -35.325)' fill='%237eac14'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    height: 115px;
    width: 115px;
    background-size: contain;
}

@media only screen and (max-width: 450px){
    .co-el.customer-comment .left-box .icon{
        top: 150px;
        left: 110px;
        height: 75px;
        width: 75px;
    }
}

/* Box Element */

.co-el.teaser-box-element{
    padding: 58px 0 0 0;
    margin-bottom: 172px;
}

@media only screen and (max-width: 500px){
    .co-el.teaser-box-element{
        margin-bottom: 132px;
    }
}

.co-el.teaser-box-element .background-frame{
    position: relative;
    background-color: #F2F3EF;
}

.co-el.teaser-box-element .background-frame::before,
.co-el.teaser-box-element .background-frame::after{
    position: absolute;
    top: -72px;
    left: 0;
    background: url("../img/transition-bg-small.svg") no-repeat center center;
    background-size: 100% 100%;
    height: 72px;
    width: 100%;
    content: '';
}

@media only screen and (max-width: 1100px){
    .co-el.teaser-box-element .background-frame::before,
    .co-el.teaser-box-element .background-frame::after{
        background-size: cover;
    }
}

.co-el.teaser-box-element .inner-padding-frame{
    padding: 0 40px;
}
@media only screen and (max-width: 600px){
    .co-el.teaser-box-element .inner-padding-frame{
        padding: 0;
    }
}

.co-el.teaser-box-element .background-frame::after{
    top: unset;
    bottom: -72px;
    transform: scaleY(-1);
}


.co-el.teaser-box-element ul{
    padding: 40px 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.co-el.teaser-box-element.news ul{
    padding: 40px 0;
    display: flex;
    flex-wrap: wrap;
    max-width: 980px;
    width: 100%;
    margin: auto;
    justify-content: flex-start;
}

@media only screen and (max-width: 1140px){
    .co-el.teaser-box-element.news ul{
        max-width: 450px;
    }
}

.co-el.teaser-box-element ul li{
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 350px;
    margin: 0 10px 20px 10px;
    /*min-height: 350px;*/
}

.co-el.teaser-box-element.news ul li{
    max-width: 450px;
    margin: 0 20px 40px 20px;
}

@media only screen and (max-width: 470px){
    .co-el.teaser-box-element.news ul li{
        margin-left: 0;
        margin-right: 0;
    }
}



.co-el.teaser-box-element ul li .box{
    position: relative;
    max-width: 350px;
    width: 100%;
    min-height: 200px;
    border-radius: 20px;
}

.co-el.teaser-box-element.news ul li .box{
    max-width: 450px;
}

@media only screen and (max-width: 1140px){
    .co-el.teaser-box-element.news ul li .box{
        margin-left: 0;
        margin-right: 0;
    }
}

.co-el.teaser-box-element ul li .box.upper{
    background: no-repeat center center;
    background-size: cover;
    z-index: 0;
}

.co-el.teaser-box-element ul li .box.lower{
    background-color: #FFFFFF;
    z-index: 1;
    margin-top: -50px;
}

.co-el.teaser-box-element ul li .box.lower .content{
    padding: 40px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.co-el.teaser-box-element.news ul li .box.lower .content > div{
    max-height: 175px;
    min-height: 175px;
}

.co-el.teaser-box-element ul li .box.lower .content h3{
    margin: 0 0 10px 0;
    font-size: 24px;
    line-height: 28px;
}

@media only screen and (max-width: 500px) {
    .co-el.teaser-box-element ul li .box.lower .content h3 {
        font-size: 20px;
        line-height: 24px;

    }
}

.co-el.teaser-box-element.news ul li .box.lower .content h3{
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    white-space: normal;
}


.co-el.teaser-box-element ul li .box.lower .content .text{
    line-height: 22px;
    font-size: 14px;
    color: #767676;
    margin-bottom: 15px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    white-space: normal;
}

.co-el.teaser-box-element ul li .box.lower .content .link{
    position: relative;
    display: block;
    color: #7EAC14;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    text-align: right;
    padding-right: 20px;
    transition: color 0.2s ease-out;
}
.co-el.teaser-box-element.news ul li .box.lower .content .link{
    margin-top: 20px;
}

.co-el.teaser-box-element ul li .box.lower .content .link:hover{
    color: #4C8B16;
}

.co-el.teaser-box-element ul li .box.lower .content .link svg{
    position: absolute;
    top: 7px;
    right: -5px;
    transition: right 0.2s ease-out;
}

.co-el.teaser-box-element ul li .box.lower .content .link svg path,
.co-el.teaser-box-element ul li .box.lower .content .link svg line{
    transition: all 0.2s ease-out;
}

.co-el.teaser-box-element ul li .box.lower .content .link:hover svg path,
.co-el.teaser-box-element ul li .box.lower .content .link:hover svg line{
    fill: #4C8B16;
    stroke: #4C8B16;
}


.co-el.teaser-box-element ul li .box.lower .content .link:hover svg{
    right: -10px;
}

/* News List Addition */

.co-el.teaser-box-element.news .paging ul{
    padding: 0;
    display: flex;
    justify-content: center;
    max-width: 100%;
    width: 100%;
    margin: 0;
}
.co-el.teaser-box-element.news .paging ul li{
    max-width: unset;
    margin: 0 10px 20px 10px;
    box-sizing: content-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: #93ADAE;
    transition: background-color 0.2s ease-out;
}

.co-el.teaser-box-element.news .paging ul li.current{
    background-color: #106684;
    color: #FFFFFF;
}

.co-el.teaser-box-element.news .paging ul li:not(.current):hover{
    background-color: #6B979F;
}

.co-el.teaser-box-element.news .paging ul li a{
    padding: 0 10px;
    color: #FFFFFF;
    font-weight: 500;
}
.co-el.teaser-box-element.news .paging ul li span{
    font-weight: 500;
}


/* Img with Accordion (FAQ-Element) */

.co-el.img-with-accordion .wrapper{
    display: flex;
}

@media only screen and (max-width: 1200px){
    .co-el.img-with-accordion .wrapper{
        flex-direction: column;
        align-items: center;
    }
}


.co-el.img-with-accordion .wrapper .left-section,
.co-el.img-with-accordion .wrapper .right-section {
    width: 50%;
}

@media only screen and (max-width: 1200px){
    .co-el.img-with-accordion .wrapper .left-section,
    .co-el.img-with-accordion .wrapper .right-section {
        width: 100%;
    }
}



.co-el.img-with-accordion .wrapper .left-section .bg-image{
    background: url("../img/decorative-bg-element.svg") no-repeat center center;
    width: 512px;
    height: 395px;
    background-size: cover;
}

@media only screen and (max-width: 1200px){
    .co-el.img-with-accordion .wrapper .left-section .bg-image{
        margin: 0 auto 80px auto;
    }
}

@media only screen and (max-width: 600px){
    .co-el.img-with-accordion .wrapper .left-section .bg-image{
        width: 400px;
        height: 310px;
    }
}

@media only screen and (max-width: 450px){
    .co-el.img-with-accordion .wrapper .left-section .bg-image{
        width: 275px;
        height: 214px;
        margin-bottom: 60px;
    }
}

.co-el.img-with-accordion .wrapper .left-section .bg-image .icon{
    position: relative;
    top: 100px;
    left: 40px;
    background: no-repeat center center;
    width: 250px;
    height: 193px;
    background-size: contain;
}

@media only screen and (max-width: 600px){
    .co-el.img-with-accordion .wrapper .left-section .bg-image .icon{
        width: 175px;
        height: 135px;
        top: 70px;
    }
}

@media only screen and (max-width: 450px){
    .co-el.img-with-accordion .wrapper .left-section .bg-image .icon{
        width: 135px;
        height: 105px;
        left: 20px;
        top: 40px;
    }
}


.co-el.img-with-accordion .wrapper .right-section .accordion-list{
    padding: 0;
    margin: 0;
}

.co-el.img-with-accordion .wrapper .right-section .accordion-list .accordion{
    display: block;
    border-bottom: 2px solid #E9EBE3;
    margin-bottom: 40px;
}

.co-el.img-with-accordion .wrapper .right-section .accordion-list .accordion:last-child{
    margin-bottom: 0;
}

.co-el.img-with-accordion .wrapper .right-section .accordion-list .acc-title{
    position: relative;
    padding: 0 50px 20px 50px;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease-out;
}

@media only screen and (max-width: 450px){
    .co-el.img-with-accordion .wrapper .right-section .accordion-list .acc-title{
        padding: 0 20px 20px 20px;
    }
}

.co-el.img-with-accordion .wrapper .right-section .accordion-list .acc-title:hover{
    color: #106783;
}

.co-el.img-with-accordion .wrapper .right-section .accordion-list .accordion.active .acc-title{
    opacity: 0.8;
    color: #829FA0;
}
.co-el.img-with-accordion .wrapper .right-section .accordion-list .acc-title::before{
    top: 9px;
    left: 20px;
    position: absolute;
    content: '';
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='12.284' height='7.18' viewBox='0 0 12.284 7.18'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rechteck_7375' data-name='Rechteck 7375' width='7.18' height='7.173' fill='none' stroke='%2325546e' stroke-width='3'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Gruppe_3797' data-name='Gruppe 3797' transform='translate(12.284) rotate(90)' style='isolation: isolate'%3E%3Cg id='Gruppe_1782' data-name='Gruppe 1782' transform='translate(0 0)' style='mix-blend-mode: multiply%3Bisolation: isolate'%3E%3Cg id='Gruppe_1769' data-name='Gruppe 1769' transform='translate(0)'%3E%3Cg id='Gruppe_1768' data-name='Gruppe 1768' transform='translate(0)' clip-path='url(%23clip-path)'%3E%3Cpath id='Pfad_25' data-name='Pfad 25' d='M5.092 5.085.006 0 0 .007' transform='translate(1.044 1.044)' fill='none' stroke='%2325546e' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Gruppe_1783' data-name='Gruppe 1783' transform='translate(0 5.111)' style='mix-blend-mode: multiply%3Bisolation: isolate'%3E%3Cg id='Gruppe_1772' data-name='Gruppe 1772' transform='translate(0 0)'%3E%3Cg id='Gruppe_1771' data-name='Gruppe 1771' transform='translate(0)' clip-path='url(%23clip-path)'%3E%3Cpath id='Pfad_26' data-name='Pfad 26' d='M0 5.078l.006.006L5.092 0' transform='translate(1.044 1.045)' fill='none' stroke='%2325546e' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    background-size: cover;
    width: 12px;
    height: 7px;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

@media only screen and (max-width: 450px){
    .co-el.img-with-accordion .wrapper .right-section .accordion-list .acc-title::before{
        left: 0;
    }
}

.co-el.img-with-accordion .wrapper .right-section .accordion-list .accordion.active .acc-title::before{
    opacity: 0.8;
    transform: rotate(180deg) translateY(2px);
}

.co-el.img-with-accordion .wrapper .right-section .accordion-list .acc-content{
    display: none;
    padding: 10px 50px 40px 50px;
    transition: opacity 0.2s ease-out, color 0.2s ease-out;
}

@media only screen and (max-width: 450px){
    .co-el.img-with-accordion .wrapper .right-section .accordion-list .acc-content{
        padding: 20px 0 40px 0;
    }
}

.co-el.img-with-accordion .wrapper .right-section .accordion-list .accordion.active .acc-content{
    color: #767676;
    opacity: 0.8;
}

.co-el.img-with-accordion .acc-content ul{
    padding: 0 0 0 35px;
}

.co-el.img-with-accordion .acc-content li {
    position: relative;
    display: block;
    margin-bottom: 5px;
}

.co-el.img-with-accordion .acc-content ul li::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg id='Gruppe_3623' data-name='Gruppe 3623' transform='translate(-354.517 -5744.378)'%3E%3Ccircle id='Ellipse_267' data-name='Ellipse 267' cx='11' cy='11' r='11' transform='translate(354.517 5744.378)' fill='%23829fa0'/%3E%3Cg id='Gruppe_3570' data-name='Gruppe 3570' transform='translate(360.513 5752.852)'%3E%3Cpath id='Pfad_14336' data-name='Pfad 14336' d='M117.824 7.871l3.443-3.443 3.118-3.23' transform='translate(-114.377 -1.198)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Pfad_14337' data-name='Pfad 14337' d='M121.271 9.51l-3.443-3.443 0 0' transform='translate(-117.824 -2.837)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    position: absolute;
    height: 20px;
    width: 20px;
    top: 2px;
    left: -35px;
    content: '';
}

/* Text Element + Externe Inhalte */

.co-el.text-element{
    margin-bottom: 80px;
}
.co-el:first-of-type.text-element{
    margin: 0 0 230px 0;
}

@media only screen and (max-width: 500px){
    .co-el.text-element{
        margin-bottom: 40px;
    }
}

.co-el.text-element .headlines{
    margin-bottom: 30px;
}

@media only screen and (max-width: 500px){
    .co-el.text-element .headlines{
        margin-bottom: 20px;
    }
}

.co-el.text-element.extern-elements .text-content{
    border: 3px solid #F2F3EF;
    padding: 40px;
    border-radius: 20px;
}

@media only screen and (max-width: 500px){
    .co-el.text-element.extern-elements .text-content{
        padding: 20px;

    }
}

.co-el.text-element.extern-elements .text{
    max-width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
}

.co-el.text-element.extern-elements .text > div, .co-el.text-element.extern-elements .text > a{
    width: 100%;
}

.co-el.text-element.extern-elements .text iframe{
    max-width: 100%;
}


.co-el.text-element .headlines h2{
    font-size: 32px;
    line-height: 38px;
    margin: 0;
}

@media only screen and (max-width: 500px){
    .co-el.text-element .headlines h2{
        font-size: 26px;
        line-height: 30px;
    }
}

@media only screen and (max-width: 400px){
    .co-el.text-element .headlines h2{
        font-size: 20px;
        line-height: 24px;
    }
}

.co-el.text-element .text{
    max-width: 700px;
    margin-bottom: 40px;
}

.co-el.text-element .text ul{
    padding: 0 0 0 35px;
}

.co-el.text-element .text ul li {
    position: relative;
    display: block;
    margin-bottom: 5px;
}

.co-el.text-element .text ul li::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg id='Gruppe_3623' data-name='Gruppe 3623' transform='translate(-354.517 -5744.378)'%3E%3Ccircle id='Ellipse_267' data-name='Ellipse 267' cx='11' cy='11' r='11' transform='translate(354.517 5744.378)' fill='%23829fa0'/%3E%3Cg id='Gruppe_3570' data-name='Gruppe 3570' transform='translate(360.513 5752.852)'%3E%3Cpath id='Pfad_14336' data-name='Pfad 14336' d='M117.824 7.871l3.443-3.443 3.118-3.23' transform='translate(-114.377 -1.198)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Pfad_14337' data-name='Pfad 14337' d='M121.271 9.51l-3.443-3.443 0 0' transform='translate(-117.824 -2.837)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    position: absolute;
    height: 20px;
    width: 20px;
    top: 2px;
    left: -35px;
    content: '';
}


.co-el.text-element .links ul{
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.co-el.text-element .links ul li{
    display: block;
    margin-right: 20px;
    margin-bottom: 20px;
}

.co-el.text-element .links ul li a{
    display: block;
    padding: 15px 30px;
    background-color: #93ADAE;
    border-radius: 25px;
    color: #FFFFFF;
    font-size: 16px;
    transition: background-color 0.2s ease-out;
}

.co-el.text-element .links ul li a:hover{
    background-color: #6B979F;
}

.co-el.text-element .links ul li a svg{
    position: relative;
    margin-left: 20px;
    top: 1px;
}

/* Disruptor Element */

.co-el.disrupter{
    overflow-x: clip;
}

.co-el.disrupter .content{
    position: relative;
    padding-top: 150px;
}

@media only screen and (max-width: 1000px){
    .co-el.disrupter .content{
        padding-top: 200px;
    }
}

@media only screen and (max-width: 700px){
    .co-el.disrupter .content{
        padding-top: 250px;
    }
}

.co-el.disrupter .content .button-bar{
    display: flex;
    justify-content: flex-start;
    margin-top: 40px;
}
.co-el.disrupter .content .button-bar.centered{
    justify-content: center;
}

@media only screen and (max-width: 500px){
    .co-el.disrupter .content .button-bar{
        margin-top: 20px;
    }
}

.co-el.disrupter .content .button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #93ADAE;
    border-radius: 25px;
    color: #FFFFFF;
    font-size: 16px;
    transition: background-color 0.2s ease-out;
}
.co-el.disrupter .content .button:hover{
    background-color: #6B979F;
}

.co-el.disrupter .content .button svg{
    position: relative;
    margin-left: 20px;
    top: 1px;
}

.co-el.disrupter .text-bar{
    position: relative;
    display: flex;
    width: calc(100% - 250px);
    max-width: 950px;
    background-color: #106684;
    padding: 50px 0;
    margin: 0 20px 0 0;
    border-radius: 20px;
    z-index: 2;
}

@media only screen and (max-width: 1000px){
    .co-el.disrupter .text-bar{
        flex-direction: column;
        width: 75%;
        margin: 0;
    }
}

@media only screen and (max-width: 700px){
    .co-el.disrupter .text-bar{
        width: 100%;
    }
}

.co-el.disrupter .text-bar .left-section,
.co-el.disrupter .text-bar .right-section{
    color: #FFFFFF;
    width: 50%;
    display: flex;
    align-items: center;
}

.co-el.disrupter .text-bar .left-section{
    justify-content: center;
    font-size: 24px;
    line-height: 30px;
}

@media only screen and (max-width: 1000px){
    .co-el.disrupter .text-bar .left-section,
    .co-el.disrupter .text-bar .right-section{
        width: 100%;
        justify-content: center;
    }
}


.co-el.disrupter .text-bar .left-section .text,
.co-el.disrupter .text-bar .right-section .text{
    max-width: 350px;
}

.co-el.disrupter .text-bar .right-section .text{
    margin-right: 40px;
    margin-left: 40px;
}

.co-el.disrupter .text-bar .left-section .text{
    margin-left: 40px;
}

@media only screen and (max-width: 1000px){
    .co-el.disrupter .text-bar .left-section .text,
    .co-el.disrupter .text-bar .right-section .text{
        margin: 0 40px;
    }

    .co-el.disrupter .text-bar .left-section .text{
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 500px){
    .co-el.disrupter .text-bar .left-section .text{
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 10px;
    }
}

.co-el.disrupter .text-bar .right-section .text ul{
    padding: 0 0 0 35px;
}

.co-el.disrupter .text-bar .right-section .text ul li {
    position: relative;
    display: block;
    margin-bottom: 5px;
}

.co-el.disrupter .text-bar .right-section .text ul li::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg id='Gruppe_3623' data-name='Gruppe 3623' transform='translate(-354.517 -5744.378)'%3E%3Ccircle id='Ellipse_267' data-name='Ellipse 267' cx='11' cy='11' r='11' transform='translate(354.517 5744.378)' fill='%23829fa0'/%3E%3Cg id='Gruppe_3570' data-name='Gruppe 3570' transform='translate(360.513 5752.852)'%3E%3Cpath id='Pfad_14336' data-name='Pfad 14336' d='M117.824 7.871l3.443-3.443 3.118-3.23' transform='translate(-114.377 -1.198)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Pfad_14337' data-name='Pfad 14337' d='M121.271 9.51l-3.443-3.443 0 0' transform='translate(-117.824 -2.837)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    position: absolute;
    height: 20px;
    width: 20px;
    top: 2px;
    left: -35px;
    content: '';
}


.co-el.disrupter .image-section{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}

@media only screen and (max-width: 700px){
    .co-el.disrupter .image-section{
        right: 50%;
        transform: translateX(50%);
    }
}

.co-el.disrupter .img-mask{
    position: relative;
    width: 360px;
    height: 360px;
    margin-right: 90px;
    -webkit-mask-image: url('../img/image-mask-small.svg');
    mask-image: url('../img/image-mask-small.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

@media only screen and (max-width: 450px){
    .co-el.disrupter .img-mask{
        width: 290px;
        height: 290px;
        margin: 0;
        mask-size: 100% 100%;
        -webkit-mask-size: 100% 100%;
    }
}


.co-el.disrupter .img-mask .image{
    width: 100%;
    height: 100%;
    background: no-repeat center center;
    background-size: cover;
}

.co-el.disrupter .img-mask .image::after{
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 360px;
    height: 320px;
    z-index: 10;
    background: url("../img/image-mask-small-layer.svg") no-repeat center center;
    background-size: cover;
}

@media only screen and (max-width: 450px){
    .co-el.disrupter .img-mask .image::after{
        width: 290px;
        height: 290px;
    }
}


.co-el.disrupter .img-bg-layer{
    position: absolute;
    top: 168px;
    left: 86px;
    background: url("../img/image-bg-layer.svg") no-repeat center center;
    background-size: cover;
    height: 230px;
    width: 490px;
    z-index: -1;
}

@media only screen and (max-width: 450px){
    .co-el.disrupter .img-bg-layer{
        top: 133px;
        left: 66px;
    }
}

.co-el.disrupter .icon{
    position: absolute;
    top: 65px;
    right: 0;
    background: no-repeat center center;
    background-size: contain;
    height: 219px;
    width: 125px;
    z-index: 1;
}

@media only screen and (max-width: 700px){
    .co-el.disrupter .image-section > .icon{
        display: none;
    }
}

.co-el.disrupter .text-bar > .icon{
    display: none;
    top: -190px;
    right: 20px;
}

@media only screen and (max-width: 700px){
    .co-el.disrupter .text-bar > .icon{
        display: block;
    }
}

@media only screen and (max-width: 450px){
    .co-el.disrupter .text-bar > .icon{
        top: -100px;
        width: 75px;
        height: 133px;
    }
}


/* Image with Icon */

.co-el.img-with-icon .wrapper{
    display: flex;
}

@media only screen and (max-width: 1000px){
    .co-el.img-with-icon .wrapper{
        flex-direction: column;
        align-items: center;
    }
}

.co-el.img-with-icon .wrapper .left-section,
.co-el.img-with-icon .wrapper .right-section {
    position: relative;
    width: 50%;
}

.co-el.img-with-icon .wrapper .left-section{
    min-width: 600px;
}

.co-el.img-with-icon .wrapper .right-section {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

@media only screen and (max-width: 1000px){
    .co-el.img-with-icon .wrapper .left-section,
    .co-el.img-with-icon .wrapper .right-section {
        width: 100%;
        max-width: 510px;
        min-width: unset;
    }

    .co-el.img-with-icon .wrapper .left-section{
        margin-bottom: 40px;
    }
}

@media only screen and (max-width: 600px){
    .co-el.img-with-icon .wrapper .left-section{
        max-width: 400px;
    }
}

@media only screen and (max-width: 450px){
    .co-el.img-with-icon .wrapper .left-section{
        max-width: 275px;
    }
}

.co-el.img-with-icon .wrapper .left-section .image-mask{
    width: 511px;
    height: 394px;
    background-size: cover;
    -webkit-mask-image: url("../img/decorative-bg-element.svg");
    mask-image: url("../img/decorative-bg-element.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

@media only screen and (max-width: 600px){
    .co-el.img-with-icon .wrapper .left-section .image-mask{
        width: 400px;
        height: 310px;
    }
}

@media only screen and (max-width: 450px){
    .co-el.img-with-icon .wrapper .left-section .image-mask {
        width: 275px;
        height: 214px;
    }
}

.co-el.img-with-icon .wrapper .left-section .image-mask .image{
    width: 100%;
    height: 100%;
    background: no-repeat center center;
    background-size: cover;
}

.co-el.img-with-icon .wrapper .left-section .icon{
    position: absolute;
    top: 75px;
    left: 50px;
    background: no-repeat center center;
    width: 190px;
    height: 190px;
    background-size: contain;
}

@media only screen and (max-width: 600px){
    .co-el.img-with-icon .wrapper .left-section .icon{
        width: 130px;
        height: 130px;
    }
}

@media only screen and (max-width: 450px){
    .co-el.img-with-icon .wrapper .left-section .icon{
        width: 100px;
        height: 100px;
        top: 40px;
        left: 40px;
    }
}


.co-el.img-with-icon .headlines{
    margin-bottom: 30px;
}

@media only screen and (max-width: 500px){
    .co-el.img-with-icon .headlines{
        margin-bottom: 20px;
    }
}

.co-el.img-with-icon .headlines h2{
    margin: 0;
}

.co-el.img-with-icon .right-section ul{
    padding: 0 0 0 35px;
}

.co-el.img-with-icon .right-section ul li {
    position: relative;
    display: block;
    margin-bottom: 5px;
}

.co-el.img-with-icon .right-section .text ul li::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg id='Gruppe_3623' data-name='Gruppe 3623' transform='translate(-354.517 -5744.378)'%3E%3Ccircle id='Ellipse_267' data-name='Ellipse 267' cx='11' cy='11' r='11' transform='translate(354.517 5744.378)' fill='%23829fa0'/%3E%3Cg id='Gruppe_3570' data-name='Gruppe 3570' transform='translate(360.513 5752.852)'%3E%3Cpath id='Pfad_14336' data-name='Pfad 14336' d='M117.824 7.871l3.443-3.443 3.118-3.23' transform='translate(-114.377 -1.198)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Pfad_14337' data-name='Pfad 14337' d='M121.271 9.51l-3.443-3.443 0 0' transform='translate(-117.824 -2.837)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    position: absolute;
    height: 20px;
    width: 20px;
    top: 2px;
    left: -35px;
    content: '';
}

.co-el.img-with-icon .right-section .link-section{
    margin-top: 40px;
}

@media only screen and (max-width: 500px){
    .co-el.img-with-icon .right-section .link-section{
        margin-top: 20px;
    }
}


.co-el.img-with-icon .right-section .link-section ul{
    padding: 0;
    margin: 0;

}

.co-el.img-with-icon .right-section .link-section ul li {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 20px;
}

.co-el.img-with-icon .right-section .link-section ul li a {
    display: inline-block;
    padding: 15px 30px;
    background-color: #93ADAE;
    border-radius: 25px;
    color: #FFFFFF;
    font-size: 16px;
    transition: background-color 0.2s ease-out;
}

.co-el.img-with-icon .right-section .link-section ul li a svg {
    position: relative;
    margin-left: 20px;
    top: 1px;
}

.co-el.img-with-icon .right-section .link-section ul li a:hover {
    background-color: #6B979F;
}

/* Akkordeon */




.co-el.accordion .wrapper .accordion-list{
    padding: 0;
    margin: 0;
}

.co-el.accordion .wrapper .accordion-list .accordion{
    position: relative;
    display: flex;
    padding-bottom: 50px;
}

.co-el.accordion .wrapper .accordion-list .accordion::after{
    height: calc(100% - 65px);
    position: absolute;
    content: '';
    left: 89px;
    top: 60px;
    width: 3px;
    background-color: #095571;
    transition: background-color 0.2s ease-out;
}

.co-el.accordion .wrapper .accordion-list .accordion.active::after{
    background-color: #E9EBE3;
}



@media only screen and (max-width: 500px){
    .co-el.accordion .wrapper .accordion-list .accordion::after {
        left: 24px;
    }
}

.co-el.accordion .wrapper .accordion-list .accordion:last-child{
    padding: 0;
}

.co-el.accordion .wrapper .accordion-list .accordion:last-child::after{
    display: none;
}

.co-el.accordion .acc-header{
    display: flex;
    align-items: center;
}
.co-el.accordion .left-section{
    margin-right: 25px;
}

@media only screen and (max-width: 500px){
    .co-el.accordion .left-section{
        margin-right: 0;
    }
}



.co-el.accordion .left-section .left-wrapper{
    display: flex;
    align-items: center;
}
.co-el.accordion .right-section{
    width: calc(100% - 125px);
    border-bottom: 3px solid #E9EBE3;
}

@media only screen and (max-width: 500px){
    .co-el.accordion .right-section{
        width: calc(100% - 75px);
    }
}



.co-el.accordion .left-section .index{
    font-weight: 500;
    margin-right: 5px;
    font-size: 45px;
    line-height: 54px;
    color: #005571;
    opacity: .5;
    width: 60px;
    letter-spacing: -3px;
    transition: opacity 0.2s ease-out;
}


.co-el.accordion .button-bar{
    display: flex;
    justify-content: flex-start;
    margin-top: 40px;
}
.co-el.accordion .button-bar.centered{
    justify-content: center;
}

/*
@media only screen and (max-width: 500px){
    .co-el.accordion .button-bar{
        margin-top: 20px;
    }
}

 */

.co-el.accordion .button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #93ADAE;
    border-radius: 25px;
    color: #FFFFFF;
    font-size: 16px;
    transition: background-color 0.2s ease-out;
}
.co-el.accordion .button:hover{
    background-color: #6B979F;
}

.co-el.accordion .button svg{
    position: relative;
    margin-left: 20px;
    top: 1px;
}


.co-el.accordion .accordion.active .left-section .index{
    opacity: 0.3;
}


@media only screen and (max-width: 500px){
    .co-el.accordion .left-section .index{
        display: none;
    }
}


.co-el.accordion .wrapper .accordion-list .acc-title{
    position: relative;
    padding: 15px 50px;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease-out;
    float: left;
    width: calc(100% - 100px);
}

@media only screen and (max-width: 450px){
    .co-el.accordion .wrapper .accordion-list .acc-title{
        padding: 15px 20px 15px 40px;
        width: calc(100% - 60px);
    }
}

.co-el.accordion .wrapper .accordion-list .acc-title:hover{
    color: #106783;
}

.co-el.accordion .wrapper .accordion-list .accordion.active .acc-title{
    opacity: 0.8;
    color: #829FA0;
}
.co-el.accordion .wrapper .accordion-list .acc-title::before{
    top: 50%;
    left: 20px;
    position: absolute;
    transform: translateY(-50%);
    content: '';
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='12.284' height='7.18' viewBox='0 0 12.284 7.18'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rechteck_7375' data-name='Rechteck 7375' width='7.18' height='7.173' fill='none' stroke='%2325546e' stroke-width='3'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Gruppe_3797' data-name='Gruppe 3797' transform='translate(12.284) rotate(90)' style='isolation: isolate'%3E%3Cg id='Gruppe_1782' data-name='Gruppe 1782' transform='translate(0 0)' style='mix-blend-mode: multiply%3Bisolation: isolate'%3E%3Cg id='Gruppe_1769' data-name='Gruppe 1769' transform='translate(0)'%3E%3Cg id='Gruppe_1768' data-name='Gruppe 1768' transform='translate(0)' clip-path='url(%23clip-path)'%3E%3Cpath id='Pfad_25' data-name='Pfad 25' d='M5.092 5.085.006 0 0 .007' transform='translate(1.044 1.044)' fill='none' stroke='%2325546e' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Gruppe_1783' data-name='Gruppe 1783' transform='translate(0 5.111)' style='mix-blend-mode: multiply%3Bisolation: isolate'%3E%3Cg id='Gruppe_1772' data-name='Gruppe 1772' transform='translate(0 0)'%3E%3Cg id='Gruppe_1771' data-name='Gruppe 1771' transform='translate(0)' clip-path='url(%23clip-path)'%3E%3Cpath id='Pfad_26' data-name='Pfad 26' d='M0 5.078l.006.006L5.092 0' transform='translate(1.044 1.045)' fill='none' stroke='%2325546e' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    background-size: cover;
    width: 12px;
    height: 7px;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

@media only screen and (max-width: 450px){
    .co-el.accordion .wrapper .accordion-list .acc-title::before{
        left: 15px;
    }
}

.co-el.accordion .wrapper .accordion-list .accordion.active .acc-title::before{
    opacity: 0.8;
    transform: rotate(180deg) translateY(2px);
}

.co-el.accordion .wrapper .accordion-list .acc-content{
    display: none;
    padding: 10px 50px 40px 50px;
    transition: opacity 0.2s ease-out, color 0.2s ease-out;
    max-width: 520px;

}

@media only screen and (max-width: 500px){
    .co-el.accordion .wrapper .accordion-list .accordion .acc-content{
        padding: 10px 20px 40px 20px;
    }
}

.co-el.accordion .wrapper .accordion-list .accordion.active .acc-content{
    color: #767676;
    opacity: 0.8;
}

.co-el.accordion .wrapper .accordion-list .acc-content ul{
    padding: 0 0 0 35px;
}

.co-el.accordion .wrapper .accordion-list .acc-content li {
    position: relative;
    display: block;
    margin-bottom: 5px;
}

.co-el.accordion .wrapper .accordion-list .acc-content ul li::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg id='Gruppe_3623' data-name='Gruppe 3623' transform='translate(-354.517 -5744.378)'%3E%3Ccircle id='Ellipse_267' data-name='Ellipse 267' cx='11' cy='11' r='11' transform='translate(354.517 5744.378)' fill='%23829fa0'/%3E%3Cg id='Gruppe_3570' data-name='Gruppe 3570' transform='translate(360.513 5752.852)'%3E%3Cpath id='Pfad_14336' data-name='Pfad 14336' d='M117.824 7.871l3.443-3.443 3.118-3.23' transform='translate(-114.377 -1.198)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath id='Pfad_14337' data-name='Pfad 14337' d='M121.271 9.51l-3.443-3.443 0 0' transform='translate(-117.824 -2.837)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    position: absolute;
    height: 20px;
    width: 20px;
    top: 2px;
    left: -35px;
    content: '';
}






.co-el.accordion .headlines{
    margin-bottom: 30px;
}

@media only screen and (max-width: 500px){
    .co-el.accordion .headlines{
        margin-bottom: 20px;
    }
}

.co-el.accordion .headlines h2 {
    margin: 0;
}

.co-el.accordion .wrapper .accordion .icon-bg{
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #005571;
    border-radius: 50%;
    transition: background-color 0.2s ease-out;
}

.co-el.accordion .wrapper .accordion.active .icon-bg{
    background-color: #829FA0;
}

.co-el.accordion .wrapper .accordion .icon{
    position: relative;
    width: 25px;
    height: 25px;
    background: url("../icons/icon-calendar.svg") no-repeat center center;
    background-size: contain;
}


/* Leistungselement */


.co-el.leistungs-element{
    padding: 70px 0;
}
.co-el:first-of-type.leistungs-element{
    padding-top: 100px;
}

@media only screen and (max-width: 1100px){
    .co-el.leistungs-element{
        padding: 200px 0 70px 0;
    }
}



.co-el.leistungs-element .headlines{
    margin-bottom: 30px;
}

@media only screen and (max-width: 1000px){
    .co-el.leistungs-element .headlines{
        width: calc(100% - 300px);
    }
}

@media only screen and (max-width: 750px){
    .co-el.leistungs-element .headlines{
        width: 100%;
    }
}
@media only screen and (max-width: 500px){
    .co-el.leistungs-element.headlines{
        margin-bottom: 20px;
    }
}

.co-el.leistungs-element .headlines h2{
    margin: 0;
}

.co-el.leistungs-element .text{
    margin-bottom: 50px;
    max-width: 650px;
    width: 100%;
}

@media only screen and (max-width: 1000px){
    .co-el.leistungs-element .text{
        width: calc(100% - 300px);
    }
}
@media only screen and (max-width: 750px){
    .co-el.leistungs-element .text{
        width: 100%;
    }
}




.co-el.leistungs-element .background-frame{
    position: relative;
    background-color: #F2F3EF;
    padding: 40px 0;
    overflow-x: clip;
}

.co-el.leistungs-element .background-frame::before,
.co-el.leistungs-element .background-frame::after {
    position: absolute;
    top: -72px;
    left: 0;
    background: url(../img/transition-bg-small.svg) no-repeat center center;
    background-size: 100% 100%;
    height: 72px;
    width: 100%;
    content: '';
}

@media only screen and (max-width: 1100px){
    .co-el.leistungs-element .background-frame::before,
    .co-el.leistungs-element .background-frame::after {
        background-size: cover;

    }
}

.co-el.leistungs-element .background-frame::after {
    top: unset;
    bottom: -72px;
    transform: scaleY(-1);
}

.co-el.leistungs-element .bg-element{
    width: 470px;
    height: 420px;
    position: absolute;
    top: -70px;
    right: -100px;
    background: url("../img/leistungs-el-bg-deco.svg") no-repeat center center;
    background-size: contain;
    z-index: 10;
}

@media only screen and (max-width: 1500px){
    .co-el.leistungs-element .bg-element{
        top: -90px;
    }
}

@media only screen and (max-width: 1100px){
    .co-el.leistungs-element .bg-element{
        top: -220px;
    }
}


@media only screen and (max-width: 1000px){
    .co-el.leistungs-element .bg-element{
        transform: scale(0.8);
    }
}

@media only screen and (max-width: 750px){
    .co-el.leistungs-element .bg-element{
        display: none;
    }
}



.co-el.leistungs-element .categories,
.co-el.leistungs-element .link-list{
    padding: 0;
    margin: 0;
}

.co-el.leistungs-element .link-list{
    display: flex;
    flex-wrap: wrap;
}

.co-el.leistungs-element .categories .category{
    display: block;
    margin-bottom: 20px;
}

.co-el.leistungs-element .categories .category:last-child{
    margin-bottom: 0;
}

.co-el.leistungs-element .link{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #7EAC14;
    padding: 0;
    margin: 0;
    width: 100%;
    min-height: 45px;
    background-color: #FFFFFF;
    border: 3px solid transparent;
    border-radius: 25px;
    transition: all 0.2s ease-out;
}
.co-el.leistungs-element .link > span{
    padding: 0 20px;
    line-height: 18px;
    text-align: center;
}

.co-el.leistungs-element .link:hover{
    color: #4C8B16;
    border-color: #4C8B16;
}

.co-el.leistungs-element .categories .cat-name{
    margin-bottom: 15px;
}

.co-el.leistungs-element .link-list > li{
    margin-bottom: 20px;
    margin-right: 20px;
    width: 100%;
    max-width: 280px;
    list-style-type: none;
}





/* Footer */

footer .footer-wrapper{
    padding-top: 130px;
}

footer .top-section{
    position: relative;
    background-color: #F2F3EF;
    padding: 0 0 30px 0;
}


footer .top-section .width-limiter{
    max-width: 975px;
    margin: auto;
}

footer .top-section::before{
    position: absolute;
    top: -160px;
    left: 0;
    content: '';
    background: url("../img/footer-transition-bg.svg") no-repeat center 0;
    background-size: 100% 100%;
    width: 100%;
    height: 160px;
}

@media only screen and (max-width: 1100px){
    footer .top-section::before{
        background-size: cover;
    }
}

footer .top-section .width-limiter > .content{
    margin-bottom: 40px;
}

footer .top-section .content h3{
    font-style: italic;
    font-size: 28px;
    margin: 0;
    line-height: 35px;
}

@media only screen and (max-width: 500px){
    footer .top-section .content h3{
        font-size: 26px;
        line-height: 30px;
    }
}

@media only screen and (max-width: 400px){
    footer .top-section .content h3{
        font-size: 20px;
        line-height: 24px;
    }
}

footer .top-section .headlines{
    margin-bottom: 40px;
}

@media only screen and (max-width: 850px){
    footer .top-section .headlines{
        margin-bottom: 80px;
    }
}

@media only screen and (max-width: 400px){
    footer .top-section .headlines{
        margin-bottom: 70px;
    }
}

footer .top-section .contact-info .box-wrapper{
    display: flex;
    flex-direction: row;
}

@media only screen and (max-width: 850px){
    footer .top-section .contact-info .box-wrapper{
        flex-direction: column;
        align-items: center;
    }
}



footer .top-section .contact-info .info{
    width: calc(65% - 40px);
    margin-right: 20px;
    margin-left: 20px;
    background-color: #FFFFFF;
    border-radius: 20px;
}


@media only screen and (max-width: 1100px){
    footer .top-section .contact-info .info {
        width: 50%;
        min-width: 415px;
    }
}

@media only screen and (max-width: 850px){
    footer .top-section .contact-info .info {
        width: 100%;
        min-width: unset;
        max-width: 500px;
        margin: 0 0 20px 0;
    }
}



footer .top-section .contact-info .info > .content{
    display: flex;
    flex-direction: row;
    align-items: center;
}

@media only screen and (max-width: 850px){
    footer .top-section .contact-info .info > .content{
        flex-direction: column;
    }
}


footer .top-section .contact-info .info > .content > .img{
    position: relative;
    left: -30px;
    width: 90px;
    height: 90px;
    background: url("../img/img-footer.jpeg") no-repeat center center;
    background-size: cover;
    border-radius: 50%;
}

@media only screen and (max-width: 850px){
    footer .top-section .contact-info .info > .content > .img{
        left: 0;
        margin-top: -45px;
    }
}

footer .top-section .contact-info .info > .content > .details{
    display: flex;
    flex-direction: row;
    margin: 35px 0;
}

@media only screen and (max-width: 1100px){
    footer .top-section .contact-info .info > .content > .details{
        flex-direction: column;
    }
}

@media only screen and (max-width: 850px){
    footer .top-section .contact-info .info > .content > .details{
        margin: 20px 0 35px 0;
    }
}


footer .top-section .contact-info .info > .content > .details .mail,
footer .top-section .contact-info .info > .content > .details .phone{
    margin: 0 30px;
}

@media only screen and (max-width: 1100px){
    footer .top-section .contact-info .info > .content > .details .mail{
        margin-bottom: 10px;
    }
}

footer .top-section .mail > div,
footer .top-section .phone > div {
    font-size: 13px;
    line-height: 15px;
    color: #9EA098;
    margin-bottom: 3px;
}

footer .top-section .mail > a,
footer .top-section .phone > a {
    position: relative;
    font-weight: 400;
    font-style: italic;
    font-size: 18px;
    line-height: 22px;
    color: #106783;
    transition: filter 0.2s ease-out;
}

footer .top-section .mail > a:hover,
footer .top-section .phone > a:hover {
    filter: brightness(0.8);
}



@media only screen and (max-width: 500px){
    footer .top-section .mail > a,
    footer .top-section .phone > a {
        font-size: 16px;
        line-height: 20px;
    }
}

footer .top-section .mail > a:before,
footer .top-section .phone > a:before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.69' height='18.686' viewBox='0 0 18.69 18.686'%3E%3Cg id='Gruppe_3067' data-name='Gruppe 3067' transform='translate(0.001)'%3E%3Cpath id='Pfad_16' data-name='Pfad 16' d='M584.518 22.68a7.227 7.227 0 0 0-7.26 7.076.787.787 0 0 1-.017.131v7.333h7.388a.777.777 0 0 1 .083-.01 7.226 7.226 0 0 0 7.076-7.261 7.307 7.307 0 0 0-7.271-7.271Z' transform='translate(-575.17 -20.608)' fill='none'/%3E%3Cpath id='Pfad_17' data-name='Pfad 17' d='M629.227 9.207a1.035 1.035 0 0 1-1.035 1.035 7.279 7.279 0 0 1 7.271 7.271 1.035 1.035 0 0 1 2.071 0A9.354 9.354 0 0 0 628.19 8.17a1.035 1.035 0 0 1 1.035 1.035Z' transform='translate(-618.844 -8.17)' fill='%2393adae'/%3E%3Cpath id='Pfad_18' data-name='Pfad 18' d='M563.947 16.273a1.04 1.04 0 0 1 1.041 1.035.945.945 0 0 1-.006.11v.05a1.018 1.018 0 0 0 .017-.131 7.225 7.225 0 0 1 7.261-7.076 1.035 1.035 0 1 1 0-2.071 9.283 9.283 0 0 0-9.32 8.887 1.035 1.035 0 0 1 1.007-.8Z' transform='translate(-562.913 -8.187)' fill='%23ceda6a'/%3E%3Cellipse id='Ellipse_7' data-name='Ellipse 7' cx='1.035' cy='1.035' rx='1.035' ry='1.035' transform='translate(8.312 0.001)' fill='%23729b56'/%3E%3Cpath id='Pfad_19' data-name='Pfad 19' d='M637.175 74.635a1.035 1.035 0 0 1-1.035-1.035 7.228 7.228 0 0 1-7.076 7.261.772.772 0 0 0-.083.01c.034 0 .068-.006.1-.006A1.031 1.031 0 0 1 630.12 81.9a1.046 1.046 0 0 1-.891 1.033h0A9.286 9.286 0 0 0 638.21 73.6 1.035 1.035 0 0 1 637.175 74.635Z' transform='translate(-619.521 -64.256)' fill='%23106783'/%3E%3Cellipse id='Ellipse_8' data-name='Ellipse 8' cx='1.035' cy='1.035' rx='1.035' ry='1.035' transform='translate(16.618 8.307)' fill='%23155664'/%3E%3Cpath id='Pfad_20' data-name='Pfad 20' d='M577.5 125.537v-.011a1.032 1.032 0 0 1 .925-1.025h-7.388v1.035A1.035 1.035 0 0 1 570 126.571h8.529a1.235 1.235 0 0 0 .146-.014.912.912 0 0 1-.14.01 1.03 1.03 0 0 1-1.035-1.031Z' transform='translate(-568.964 -107.887)' fill='%23bbce99'/%3E%3Cpath id='Pfad_21' data-name='Pfad 21' d='M624.575 125.491a1.032 1.032 0 0 0-1.035-1.031.83.83 0 0 0-.1.006 1.033 1.033 0 0 0-.926 1.025v.011a1.032 1.032 0 0 0 1.035 1.031.907.907 0 0 0 .14-.01 1.046 1.046 0 0 0 .891-1.033Z' transform='translate(-613.975 -107.852)' fill='%231c5f5a'/%3E%3Cpath id='Pfad_22' data-name='Pfad 22' d='M563.775 78.136h1.035V70.8a1.037 1.037 0 0 1-2.061-.159.958.958 0 0 1 .01-.144c0-.03.007-.06.009-.09a1.047 1.047 0 0 0-.029.234v8.529a1.035 1.035 0 0 1 1.035-1.035Z' transform='translate(-562.741 -61.521)' fill='%2381b827'/%3E%3Cpath id='Pfad_23' data-name='Pfad 23' d='M562.82 65.817a1.037 1.037 0 0 0 2.061.159v-.05a.906.906 0 0 0 .006-.11 1.037 1.037 0 0 0-2.048-.233c0 .03-.007.06-.009.09A.974.974 0 0 0 562.82 65.817Z' transform='translate(-562.81 -56.695)' fill='%235aad33'/%3E%3Cpath id='Pfad_24' data-name='Pfad 24' d='M564.821 125.545V124.51h-1.036a1.035 1.035 0 1 0 1.036 1.035Z' transform='translate(-562.75 -107.895)' fill='%2353a333'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    content: '';
    position: absolute;
    top: 1px;
    left: -25px;
    height: 19px;
    width: 19px;
    background-size: cover;
}

footer .top-section .phone > a:before{
    background-image: url("../icons/menu-telefon.svg");
}
footer .top-section .mail > a:before{
    background-image: url("../icons/menu-mail.svg");
}

footer .top-section .contact-info .meeting{
    width: 35%;
    background-color: #FFFFFF;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width: 1100px){
    footer .top-section .contact-info .meeting {
        width: 50%;
    }
}

@media only screen and (max-width: 850px){
    footer .top-section .contact-info .meeting {
        padding: 30px 0;
        width: 100%;
        max-width: 500px;
    }
}

footer .top-section .contact-info .meeting .text{
    font-size: 18px;
    margin-bottom: 10px;
}

@media only screen and (max-width: 500px){
    footer .top-section .contact-info .meeting .text{
        font-size: 16px;
        line-height: 22px;
    }
}
@media only screen and (max-width: 400px){
    footer .top-section .contact-info .meeting .text{
        font-size: 15px;
        line-height: 20px;
        margin-bottom: 7px;
    }
}

footer .top-section .contact-info .meeting a{
    color: #7EAC14;
    font-weight: 400;
    font-size: 18px;
    transition: color 0.2s ease-out;
}

@media only screen and (max-width: 400px){
    footer .top-section .contact-info .meeting a{
        font-size: 16px;
    }
}

footer .top-section .contact-info .meeting a svg{
    margin-left: 5px;
    transition: margin-left 0.2s ease-out;
}

footer .top-section .contact-info .meeting a:hover{
    color: #4C8B16;
}

footer .top-section .contact-info .meeting a:hover svg{
    margin-left: 10px;
}

footer .top-section .contact-info .meeting a svg path,
footer .top-section .contact-info .meeting a svg line{
    transition: all 0.2s ease-out;
}

footer .top-section .contact-info .meeting a:hover svg path{
    stroke: #4C8B16;
}
footer .top-section .contact-info .meeting a:hover svg line{
    stroke: #4C8B16;
    fill: #4C8B16;
}

footer .top-section .contact-info .meeting .icon{
    width: 50px;
    height: 55px;
    margin-right: 20px;
    background: url("../icons/meeting-icon.svg") no-repeat center center;
    background-size: cover;
}

@media only screen and (max-width: 400px){
    footer .top-section .contact-info .meeting .icon{
        width: 45px;
        height: 50px;
        margin-right: 15px;
    }
}

footer .spacer{
    height: 3px;
    width: 100%;
    background-color: #095571;
}

footer .bottom-section{
    margin: 15px 0;
}

@media only screen and (max-width: 850px){
    footer .bottom-section{
        margin: 0;
    }
}

@media only screen and (max-width: 850px){
    footer .bottom-section .padding-frame{
        padding: 0;
    }
}

footer .bottom-section .width-limiter{
    max-width: 950px;
    margin: auto;
}

footer .bottom-section .wrapper{
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 850px){
    footer .bottom-section .wrapper{
        flex-direction: column-reverse;
    }
}

footer .bottom-section .menu-footer{
    float: left;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    width: calc(50% - 2px);
    border-right: 2px solid #E9EBE3;
}

footer .bottom-section .menu-footer .menu{
    display: flex;
    flex-wrap: wrap;
}

@media only screen and (max-width: 500px){
    footer .bottom-section .menu-footer .menu{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

@media only screen and (max-width: 850px){
    footer .bottom-section .menu-footer{
        width: calc(100% - 80px);
        justify-content: center;
        border-right: none;
        padding: 0 40px;
    }
}

@media only screen and (max-width: 500px){
    footer .bottom-section .menu-footer{
        padding: 0 20px;
        width: calc(100% - 40px);
    }
}

footer .bottom-section .menu-footer ul li a{
    padding: 10px 0;
    display: block;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: #3E3E3E;
}

footer .bottom-section .menu-footer ul li a{
    position: relative;
}

footer .bottom-section .menu-footer ul li a::before{
    position: absolute;
    content: '';
    bottom: 2px;
    opacity: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: #BBCE99;
    transition: opacity 0.2s ease-out;
}

footer .bottom-section .menu-footer ul li:hover a::before{
    opacity: 1;
}

footer .bottom-section .width-limiter ul{
    margin: 0;
    padding: 0;
}

footer .bottom-section .width-limiter ul li{
    display: inline-block;
    margin-right: 60px;
}

@media only screen and (max-width: 850px){
    footer .bottom-section .width-limiter ul li:last-child{
        margin-right: 0;
    }
}

@media only screen and (max-width: 500px){
    footer .bottom-section .width-limiter ul li{
        margin-right: 0;
    }
}

footer .bottom-section .additional-links{
    width: 50%;
    float: right;
}

@media only screen and (max-width: 850px){
    footer .bottom-section .additional-links{
        width: 100%;
        display: flex;
        justify-content: center;
        background-color: #F2F3EF;
        padding-bottom: 30px;
    }
}

footer .bottom-section .additional-links ul{
    display: flex;
    align-items: center;
}

footer .bottom-section .additional-links ul li{
    margin-right: 0;
    margin-left: 60px;
}

@media only screen and (max-width: 850px){
    footer .bottom-section .additional-links ul li{
        margin: 0;
    }
}

footer .bottom-section .additional-links .login a{
    border-radius: 25px;
    border: 3px solid #93ADAE;
    display: inline-flex;
    padding: 10px 30px;
    color: #93ADAE;
    font-size: 16px;
    line-height: 19px;
    transition: filter 0.2s ease-out;
}

footer .bottom-section .additional-links .login a:hover{
    filter: brightness(0.8);
}

footer .bottom-section .additional-links .instagram a{
    display: block;
    width: 32px;
    height: 32px;
    background: url("data:image/svg+xml,%3Csvg id='Gruppe_831' data-name='Gruppe 831' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32.347' height='32.347' viewBox='0 0 32.347 32.347'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rechteck_5711' data-name='Rechteck 5711' width='32.347' height='32.347' fill='%2393adae'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Gruppe_830' data-name='Gruppe 830' transform='translate(0 0)' clip-path='url(%23clip-path)'%3E%3Cpath id='Pfad_338' data-name='Pfad 338' d='M9.5.113A11.859 11.859 0 0 0 5.567.874 7.932 7.932 0 0 0 2.7 2.749 7.946 7.946 0 0 0 .833 5.625 11.912 11.912 0 0 0 .087 9.563C.011 11.293-.006 11.844 0 16.248S.03 21.2.112 22.934a11.889 11.889 0 0 0 .761 3.933 7.939 7.939 0 0 0 1.876 2.869A7.952 7.952 0 0 0 5.625 31.6a11.9 11.9 0 0 0 3.937.746c1.73.076 2.282.093 6.684.085s4.957-.028 6.686-.11a11.92 11.92 0 0 0 3.934-.761A8.287 8.287 0 0 0 31.6 26.808a11.874 11.874 0 0 0 .746-3.936c.076-1.731.094-2.284.085-6.687s-.028-4.955-.11-6.684a11.893 11.893 0 0 0-.761-3.935A7.955 7.955 0 0 0 29.684 2.7 7.936 7.936 0 0 0 26.808.834 11.863 11.863 0 0 0 22.871.088C21.141.011 20.589-.006 16.185 0S11.23.03 9.5.113M9.69 29.428a8.992 8.992 0 0 1-3.012-.552 5.054 5.054 0 0 1-1.867-1.21A5.039 5.039 0 0 1 3.594 25.8a8.982 8.982 0 0 1-.564-3.011c-.08-1.709-.1-2.222-.107-6.552s.007-4.842.082-6.553a8.978 8.978 0 0 1 .552-3.011A5.031 5.031 0 0 1 4.767 4.811 5.024 5.024 0 0 1 6.63 3.595a8.974 8.974 0 0 1 3.01-.564c1.71-.081 2.222-.1 6.551-.107s4.843.007 6.554.082a8.958 8.958 0 0 1 3.011.552 5.019 5.019 0 0 1 1.867 1.21 5.021 5.021 0 0 1 1.217 1.863A8.952 8.952 0 0 1 29.4 9.639c.081 1.71.1 2.223.108 6.552s-.007 4.843-.082 6.553a8.992 8.992 0 0 1-.552 3.013A5.372 5.372 0 0 1 25.8 28.84a8.981 8.981 0 0 1-3.009.564c-1.71.08-2.222.1-6.553.107S11.4 29.5 9.69 29.428M22.91 7.549A1.946 1.946 0 1 0 24.851 5.6 1.946 1.946 0 0 0 22.91 7.549M7.89 16.233A8.327 8.327 0 1 0 16.2 7.89a8.326 8.326 0 0 0-8.31 8.343m2.921-.006a5.405 5.405 0 1 1 5.415 5.4 5.406 5.406 0 0 1-5.415-5.4' transform='translate(-0.177 -0.086)' fill='%2393adae'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
    background-size: cover;
    transition: filter 0.2s ease-out;
}

footer .bottom-section .additional-links .whatsapp a{
    height: 32px;
    width: 32px;
    display: block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.733' height='24.852' viewBox='0 0 24.733 24.852'%3E%3Cpath id='Digital_Glyph_Black' d='M21.129 3.611A12.317 12.317 0 0 0 1.747 18.47L0 24.852 6.528 23.14a12.3 12.3 0 0 0 5.885 1.5h.005A12.32 12.32 0 0 0 21.129 3.612ZM12.418 22.559h0A10.223 10.223 0 0 1 7.2 21.132l-.374-.222L2.957 21.926 3.99 18.149l-.243-.387a10.236 10.236 0 1 1 8.671 4.8Zm5.614-7.666c-.308-.154-1.82-.9-2.1-1s-.487-.154-.692.154-.795 1-.974 1.206-.359.231-.667.077A8.413 8.413 0 0 1 11.122 13.8a9.274 9.274 0 0 1-1.712-2.132c-.18-.308-.019-.475.135-.628.138-.138.308-.36.462-.539a2.1 2.1 0 0 0 .308-.513.567.567 0 0 0-.025-.539C10.212 9.3 9.6 7.783 9.34 7.167c-.25-.6-.5-.518-.692-.528s-.384-.011-.59-.011a1.13 1.13 0 0 0-.821.385A3.451 3.451 0 0 0 6.16 9.58a5.987 5.987 0 0 0 1.257 3.183 13.724 13.724 0 0 0 5.256 4.646 17.649 17.649 0 0 0 1.754.648 4.216 4.216 0 0 0 1.938.122 3.17 3.17 0 0 0 2.077-1.463 2.576 2.576 0 0 0 .18-1.463c-.077-.128-.282-.205-.59-.36Z' fill='%2393adae' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat center center;
    background-size: cover;
    transition: filter 0.2s ease-out;
}

footer .bottom-section .additional-links .instagram,
footer .bottom-section .additional-links .whatsapp{
    margin-left: 20px;
}

footer .bottom-section .additional-links .instagram a:hover,
footer .bottom-section .additional-links .whatsapp a:hover{
    filter: brightness(0.8);
}


/* MOBILE MENU FRAME */

.mobile-menu-frame {
    position: fixed;
    top: 0;
    right: -450px;
    height: 100%;
    width: 100%;
    max-width: 400px;
    background-color: #F2F3EF;
    transition: right 0.2s ease-out;
    z-index: 60;
}

html.mobile_menu__is_active .mobile-menu-frame{
    right: 0;
}

.mobile-menu-frame .close-btn{
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 20px 7px;
    cursor: pointer;
}

.mobile-menu-frame .close-btn > div{
    width: 25px;
    height: 3px;
    background-color: #000000;
}

.mobile-menu-frame .close-btn > div:first-child{
    transform: rotate(45deg);
}
.mobile-menu-frame .close-btn > div:last-child{
    transform: rotate(-45deg);
    margin-top: -3px;
}

.mobile-menu-frame .menu{
    margin-top: 80px;
}

.mobile-menu-frame .menu li{
    display: block;
    margin: 15px 0;
}

.mobile-menu-frame .menu > li > a{
    font-weight: 400;
    color: #106783;
}

.mobile-menu-frame .menu li a{
    font-size: 18px;
    transition: color 0.2s ease-out;
}

.mobile-menu-frame .menu li a:hover{
    color: #106783;
}

/* SIDEBAR */

.sidebar{
    position: fixed;
    top: 300px;
    right: 20px;
    width: 100px;
    border-radius: 50px;
    background-color: #FFFFFF;
    z-index: 40;
}

@media only screen and (max-width: 600px){
    .sidebar{
        width: 75px;
        right: 0;
    }
}

.sidebar ul{
    padding: 0;
    margin: 0;
}

.sidebar ul li{
    display: block;
    padding: 10px 0;
}
.sidebar ul li a{
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 3px solid #BFCD9E;
    transition: border-color 0.2s ease-out;
}

@media only screen and (max-width: 600px){
    .sidebar ul li a{
        width: 50px;
        height: 50px;
    }
}

.sidebar ul li a:hover{
    border-color: #4C8B16;
}

.sidebar ul li a .icon{
    width: 40px;
    height: 40px;
    background: no-repeat center center;
    background-size: contain;
}
@media only screen and (max-width: 600px){
    .sidebar ul li a .icon{
        width: 30px;
        height: 30px;
    }
    .sidebar ul li a .icon svg{
        display: block;
        width: 30px;
        height: 30px;
    }
}

.sidebar ul li a.calendar svg path,
.sidebar ul li a.contact svg path {
    transition: all 0.2s ease-out;
}

.sidebar ul li a.calendar:hover svg path,
.sidebar ul li a.contact:hover svg path{
    fill: #4C8B16;
}


.sidebar ul li a.calendar .icon{
    /*background-image: url("../icons/footer-termin.svg");*/
}


.sidebar ul li a.contact .icon{
    /*background-image: url("../icons/bfi-contact-icon.svg");*/
}

/* Question Element */


.co-el.question-element .answers-list{
    padding: 0;
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
}

.co-el.question-element li{
    list-style-type: none;
    margin-right: 80px;
    position: relative;
    margin-bottom: 10px;
}

.co-el.question-element .headlines h2{
    margin: 0;
}
.co-el.question-element .headlines{
    margin-bottom: 30px;
}
@media only screen and (max-width: 500px){
    .co-el.question-element .headlines{
        margin-bottom: 20px;
    }
}
.co-el.question-element .question-line {
    margin: 0 0 10px 0;
    font-size: 24px;
    line-height: 30px;
}

.co-el.question-element .sub-text {
    max-width: 380px;
    font-size: 14px;
    color: #767676;
}


.co-el.question-element .answer-info{
    visibility: hidden;
    opacity: 0;
    background-color: #106783;
    border-radius: 25px;
    width: 100%;
    max-width: 500px;
    color: #FFFFFF;
    transition: all 0.2s ease-out;
}

.co-el.question-element .answer-info.active{
    visibility: visible;
    opacity: 1;
}

.co-el.question-element .answer-info .text-content{
    padding: 10px 25px;
}

.co-el.question-element .answer-info .text-content p{
    padding-bottom: 15px;
    margin: 0;
}
.co-el.question-element .answer-info .text-content p:first-child{
    padding: 15px 0;
}


.co-el.question-element .answer-list {
    width: 100%;
    position: relative;
    transition: height 0.2s ease-out;
    margin-top: 20px;
}

.co-el.question-element .answer-list .answer-info {
    position: absolute;
}


.co-el.question-element .marker{
    position: relative;
    width: 25px;
    min-width: 25px;
    display: block;
    height: 25px;
    border-radius: 50%;
    border: 2px solid #E4E5E1;
    box-sizing: border-box;
    margin-right: 20px;
    cursor: pointer;
    transition: all 0.2s ease-out;
}

.co-el.question-element .selector.active .marker{
    border-color: #106783;
}

.co-el.question-element .marker::before{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    content: '';
    border-radius: 50%;
    transition: background-color 0.2s ease-out;
}

.co-el.question-element .selector.active .marker::before{
    background-color: #106783;

}

.co-el.question-element .marker::after{
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    content: '';
    border-radius: 50%;
}


.co-el.question-element .selector{
    display: inline-flex;
    align-items: center;
}

.co-el.question-element .selector span{
    transition: color 0.2s ease-out;
}

.co-el.question-element .selector.active span{
    color: #005571;
}

.co-el.question-element .selector{
    display: inline-flex;
    align-items: center;
}

.co-el.question-element .button-bar {
    display: flex;
    justify-content: flex-start;
    margin-top: 40px;
}
.co-el.question-element .button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #93ADAE;
    border-radius: 25px;
    color: #FFFFFF;
    font-size: 16px;
    transition: background-color 0.2s ease-out;
}
.co-el.question-element .button svg{
    position: relative;
    margin-left: 20px;
    top: 1px;
}


/* News List */

.co-el.news-overview ul{
    padding: 0;
    margin: 0;
}

.co-el.news-overview ul li{
    list-style-type: none;
    background-color: #FFFFFF;
    border-radius: 35px;
}

.co-el.news-overview ul li h2{
    margin-top: 0;
    color: #3E3E3E;
    font-size: 26px;
}

.co-el.news-overview ul li a {
    padding: 40px;
    width: calc(100% - 80px);
    min-height: calc(100% - 80px);
    display: block;
    color: #3E3E3E;
}

/* News Single */

.co-el.beitrag .return{
    margin-top: 40px;
}

.co-el.beitrag .return a{
    display: inline-block;
    padding: 15px 30px;
    background-color: #93ADAE;
    border-radius: 25px;
    color: #FFFFFF;
    font-size: 16px;
    transition: background-color 0.2s ease-out;
}

.co-el.beitrag .return a:hover {
    background-color: #6B979F;
}
/*
.co-el.beitrag .return a svg {
    transform: rotate(180deg);
    position: relative;
    margin-right: 15px;
    top: 0;
}

 */
.co-el.beitrag .return a svg{
    margin-top: 3px;
    margin-left: 10px;
    position: relative;
    top: 1px;
}


/* Form style */


.co-el.form-element .with_frm_style textarea{
    resize: none;
}

html body .co-el.form-element .frm_style_formidable-style.with_frm_style .frm_submit button {
    position: relative;
    display: inline-block;
    padding: 15px 70px 15px 30px;
    background-color: #93ADAE;
    border-radius: 25px;
    border: none;
    color: #FFFFFF;
    font-size: 16px;
    transition: background-color 0.2s ease-out;
}


html body .co-el.form-element .frm_style_formidable-style.with_frm_style .frm_submit button:hover {
    background-color: #6B979F;
}

html body .co-el.form-element .frm_style_formidable-style.with_frm_style .frm_submit button::after {
    position: absolute;
    top: 50%;
    height: 13px;
    width: 19px;
    right: 30px;
    transform: translateY(-50%);
    content: '';
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18.925' height='12.536' viewBox='0 0 18.925 12.536'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rechteck_7375' data-name='Rechteck 7375' width='7.327' height='7.32' fill='%23fff' stroke='%23fff' stroke-width='2'%3E%3C/rect%3E%3C/clipPath%3E%3CclipPath id='clip-path-3'%3E%3Crect id='Rechteck_7377' data-name='Rechteck 7377' width='18.925' height='2.131' fill='%23fff' stroke='%23fff' stroke-width='2'%3E%3C/rect%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Gruppe_3772' data-name='Gruppe 3772' style='isolation: isolate'%3E%3Cg id='Gruppe_1782' data-name='Gruppe 1782' transform='translate(11.598 0)' style='mix-blend-mode: multiply%3Bisolation: isolate'%3E%3Cg id='Gruppe_1769' data-name='Gruppe 1769' transform='translate(0)'%3E%3Cg id='Gruppe_1768' data-name='Gruppe 1768' clip-path='url(%23clip-path)'%3E%3Cpath id='Pfad_25' data-name='Pfad 25' d='M123.02 11.256l-5.19-5.19-.006.007' transform='translate(-116.758 -5.002)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Gruppe_1783' data-name='Gruppe 1783' transform='translate(11.598 5.216)' style='mix-blend-mode: multiply%3Bisolation: isolate'%3E%3Cg id='Gruppe_1772' data-name='Gruppe 1772' transform='translate(0 0)'%3E%3Cg id='Gruppe_1771' data-name='Gruppe 1771' clip-path='url(%23clip-path)'%3E%3Cpath id='Pfad_26' data-name='Pfad 26' d='M117.824 16.144l.006.006 5.19-5.188' transform='translate(-116.758 -9.896)' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='Gruppe_1784' data-name='Gruppe 1784' transform='translate(0 5.189)' style='mix-blend-mode: multiply%3Bisolation: isolate'%3E%3Cg id='Gruppe_1775' data-name='Gruppe 1775' transform='translate(0 0)'%3E%3Cg id='Gruppe_1774' data-name='Gruppe 1774' clip-path='url(%23clip-path-3)'%3E%3Cline id='Linie_1' data-name='Linie 1' x1='16.794' transform='translate(1.066 1.066)' fill='%23b5c387' stroke='%23fff' stroke-width='2'%3E%3C/line%3E%3Cline id='Linie_2' data-name='Linie 2' x1='16.794' transform='translate(1.066 1.066)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
}




/*UTILS*/

.opacity-frame{
    cursor: pointer;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 50;
    transition: opacity 0.3s ease-out;
}

html.lightbox__is_active .opacity-frame,
html.menu__is_active .opacity-frame,
html.mobile_menu__is_active .opacity-frame{
    opacity: 1;
    height: 100%;
}

html.lightbox__is_active .opacity-frame{
    z-index: 70;
}