/**
 *
 * Theme Name:        ITNA Theme
 * Theme URI:         https://www.moleco.de
 * Description:       Dieses Theme wurde erstellt durch die MOLECO GmbH - Agentur für digitale Kommunikation
 * Version:           1.0.0
 * Author:            MOLECO GmbH
 * Author URI:        https://www.moleco.de
 * Tested up to:      6.8.1
 * Requires at least: 6.8.1
 * Requires PHP:      8.2.30
 *
 */
 
 
 :root{
    --acc:              #177ef3;
    --acc-hover:        #156bcc;
    --acc-light:        #609ffe;
    --acc-very-light:   #e7f2ff;

    --white:            #ffffff;
    --lightgrey:        #cbd4e0;
    --fontgrey:         #6f727e;
    --dark:             #161925;
    --green:            #22AA3B;
}


body,html,*{font-size:16px;line-height:1.5;font-family:'museo-sans',sans-serif;font-style: normal;font-weight:500;font-display: swap; color: var(--dark);scroll-behavior: smooth;}
p, .content li,.text li, p strong{font-family:'museo-sans',sans-serif;line-height: 1.4;font-display: swap;}
html{scroll-behavior: smooth;overflow-x: hidden !important;}
body{overflow-x: hidden !important;}

a{color:var(--acc);text-decoration:none;font-size:100%;transition:all .3s ease;}
a:hover{text-decoration:none;color:var(--acc-hover);transition:all .3s ease;}
a:focus{text-decoration:none;}
a:focus-visible{outline: auto;}
p{font-weight: 300;margin-bottom: 0;}
p a,
li a,
dd a{font-weight: 600;}
p a:hover,
li a:hover,
dd a:hover{color: var(--acc);text-decoration: underline;}

strong{font-weight: 700;}

ul{padding:0;margin:0;}
li{list-style:none;padding-left:50px;position:relative;}
ul li{margin-bottom: 12px;padding-left: 20px;font-weight: 300;}
ul li:before{content:'';width:17px;height:24px;display:block;background:url('media/icons/arrow.svg');background-repeat:no-repeat;background-size:100%;background-position:center;position:absolute;top:0;left:-4px;}

.text ul{margin: 2rem 0;}  
.text li{list-style: none;padding-left: 25px;}

ol{padding-left: 20px;margin:0;}
ol li{list-style: decimal;padding-left: 30px;}

img{max-width:100%;height:auto;}


.headline{font-weight: 700;display: block;color: var(--dark);}
.subline{font-weight: 400;display: block;color: var(--fontgrey);font-size: 144%;margin-bottom: 29px;}
h1{font-size:300%;display:block;color:var(--dark);margin-bottom: 8px;line-height:1.2;}
h2{font-size:300%;display:block;color:var(--dark);margin-bottom: 10px;line-height:1.2;}
h3{font-size:140%;display:block;color:var(--dark);margin-bottom: 30px;line-height:1.2;}

.btn{position:relative;background: var(--acc-very-light); color:var(--dark);transition:all .3s ease;text-align: center;margin-top: 50px;border-radius: 0;padding: 12px 23px;width: max-content;display: flex;justify-content: center;font-size: 16px;}
.btn img{margin-left: 12px;}
.btn:active{position:relative;background: var(--lightgrey); color:var(--dark);transition:all .3s ease;text-align: center;margin-top: 50px;border-radius: 0;padding: 12px 23px;width: max-content;display: flex;justify-content: center;}
.btn:hover{background: var(--lightgrey);transition: all .3s ease; color:var(--dark);}
.btn:focus-visible{outline: auto;background-color: var(--acc-hover);color: var(--dark);}

.btn.sec{position:relative;background: var(--acc);color: var(--white);transition:all .3s ease;text-align: center;margin-top: 50px;justify-content: center;border-radius: 0;padding: 12px 23px;width: max-content;}
.btn.sec img{filter: invert();}
.btn.sec:hover{background: #156bcc;color: var(--white);transition:all .3s ease;;}

.btn.trans{position:relative;background: transparent;color: var(--white);transition:all .3s ease;text-align: center;margin-top: 50px;justify-content: center;border-radius: 0;padding: 14px 24px;width: max-content;border: 1px solid var(--white);}
.btn.trans img{filter: invert() grayscale();}
.btn.trans:hover{background: #aaa1;color: var(--white);transition:all .3s ease;backdrop-filter: blur(3px);border: 1px solid var(--white);}

.btn.back{background: transparent;color: var(--white);padding: 12px 13px;margin: 0;transform: translate(-26px);transition: all ease .3s;}
.btn.back:hover{background: #fff1;color: var(--white);padding: 12px 13px;margin: 0;transition: all ease .3s;backdrop-filter: blur(5px);}
.btn.back img{filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(422%) hue-rotate(99deg) brightness(107%) contrast(101%);transition: all ease .3s;width: 10px;margin-right: 12px;}
.btn.back:hover img{opacity: 0.7;transition: all ease .3s;}
strong{font-weight: 600;font-size: 100%;}

.container{max-width:1305px;width: 100%;}

/*WhatsApp*/
.es-button-base-icon{filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(321deg) brightness(107%) contrast(101%);}
.es-button-base-ellipsis,
.cmpwGu div{color: var(--white);}

/*Swiper*/
.swiper-wrapper{padding-bottom: 80px;}
.swiper .nav{width: max-content!important;display: flex!important;justify-content: space-between;margin: 0 auto!important;position: relative;padding: 0 100px;max-width: 100%;}
.swiper-button-prev{position: absolute;margin-right: 40px;}
.swiper-button-prev::before{content: '';background: url('media/slider-btn.svg') no-repeat;background-size: 100%;height: 45px;width: 45px;display: block;top: 0;left: 0;transform: rotate(180deg);}
.swiper-button-next{position: absolute;margin-left: 40px;}
.swiper-button-next::before{content: '';background: url('media/slider-btn.svg') no-repeat;background-size: 100%;height: 45px;width: 45px;display: block;top: 0;right: 0;}

svg.swiper-navigation-icon{display: none;}
.swiper-pagination{width: max-content;margin: 0 auto;position: relative;gap: 25px;display: flex;justify-content: center;bottom: 0!important;}
.swiper-pagination-bullet{background-color: var(--darkgrey);height: 14px;width: 14px;border: none;opacity: 1;margin: 0 var(--swiper-pagination-bullet-horizontal-gap,0px);}
.swiper-pagination-bullet-active{background-color: var(--acc);height: 14px;width: 14px;border: none;}

/*Modal*/
button.zum-modal{border: none;}

.modal{z-index:9999999999;}
.modal-content{background-color:var(--white);width:94%;margin:auto;border:none;border-radius:0!important;box-shadow:0 20px 60px rgba(5,28,44,0.25);overflow:hidden;}
.modal-backdrop{background-color:var(--dark);opacity:0.85!important;z-index:999;}
.modal-dialog{max-width:1320px;margin:1.75rem auto;}
.modal-dialog-centered{min-height:calc(100% - 0px)!important;display:flex;align-items:center;}
.modal-header{border-bottom:none;align-items:flex-start;padding:24px 28px 10px 28px;background-color:var(--white);}
.modal-footer{border-top:none;padding:0 28px 28px 28px;display:block;background-color:var(--white);}
.modal-title{line-height:1.2;font-weight:700;color:var(--dark);}
.modal-footer .headerbereich{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;margin-bottom: 20px;}
.modal-headline{font-size: 200%;font-weight: 700;display: block;margin-bottom: 10px;}
.modal-logo{object-fit: contain;max-width: 100%;width: 300px;}
.ff-btn-submit, .btn-submit{border-radius: 0;background-color: var(--acc);}
.btn-close{opacity:1;background-color:#ffffff;border-radius:50%;padding:10px;transition: all 0.3s ease;}
.btn-close:hover{background-color: var(--acc);opacity:1;}
.modal-body{padding:0;}
.modal-content form{width:100%;}
.modal-content input,.modal-content textarea,.modal-content select{border:1px solid #939596!important;border-radius:10px!important;font-size:16px;color:#333f48!important;background-color:#ffffff;}
.modal-content input:focus,.modal-content textarea:focus,.modal-content select:focus{outline:none;border-color:var(--acc-light);box-shadow: none;}

@media(max-width:1480px){
    .modal .ff-el-input--content .ff-el-form-check .ff-el-form-check-label span{min-height:80px;}
    .modal .ff-el-input--content .ff-el-form-check .ff-el-form-check-label span > span{min-height:auto;}
}
@media (max-width:1199px){
    .fluentform .ff-el-group.ff_list_4col .ff-el-form-check{width: 33.3%!important;}
}
@media (max-width:991px){
    .fluentform .ff-el-group.ff_list_4col .ff-el-form-check{width: 50%!important}
    .fluentform .ff_el_checkable_photo_holders{gap: 1rem}

    .modal-headline{line-height:1;margin-bottom:35px;}
}
@media (max-width:768px){
    .fluentform .ff-el-group.ff_list_4col .ff-el-form-check{width: 100%!important;margin-bottom:0!important;}
    /* .fluentform label.ff-el-image-input-src{background-image: none!important;} */
    /* .fluentform .ff-el-form-check-label .ff-el-form-check-input{position: unset!important;margin-right: 5px!important;top: unset!important;left: unset!important;} */
    /* .fluentform label.ff-el-image-input-src{height: max-content!important;} */
    .fluentform .ff-el-image-holder{width: 100%!important;}
    .fluentform .ff-el-group.ff_list_4col .ff-el-form-check span{width: 100%!important;}
    .modal .ff-el-input--content .ff-el-form-check .ff-el-form-check-label span{min-height:auto;}
}
@media (max-width:576px){
    .modal-content{width:96%;border-radius:10px;}
    .modal-header{padding:20px 20px 0 20px;}
    .modal-footer{padding:0 20px 22px 20px;}
    .modal-footer .fluentform .ff-btn-submit{width: 100%; display: block; white-space: normal;} 

    .modal .ff-btn{width:100%!important;margin-top:50px!important;}
    .modal .ff-btn-submit, .modal .ff-btn-prev{width:100%!important;margin-top:20px!important;}
    .modal-footer .headerbereich{margin-bottom: 40px;}
    .modal-logo{width: 250px;}

    .ff-inner_submit_container .ff-t-column-1, .ff-inner_submit_container .ff-t-column-2{width:100%!important;}
}

.fluentform label.ff-el-image-input-src[aria-label="Office 365"] span::before{content:'Office, Teams, SharePoint & OneDrive';position: relative;bottom: 0; left: 0;display: block;}

.modal .fluentform .ff-step-body, .modal .fluentform .ff-el-group{margin-bottom:0;}
.modal .ff-el-input--content .ff-el-form-check{border:solid 2px var(--sec);border-radius:0;padding:5px;text-align:left;margin-bottom:35px!important;position:relative;width:calc(25% - 15px);min-height:163px;}
.modal .ff-el-input--content .ff-el-form-check .ff-el-image-input-src{background-color:#F5F5F5;background-size:65px;background-position:center;background-repeat:no-repeat;width:100%;height:150px;border-radius:0;transition:all .3s ease;}
.modal .ff-el-input--content .ff-el-form-check .ff-el-image-input-src:hover{background-color:#ECF5FE;transition:all .3s ease;}
.modal .ff-el-input--content .ff-el-form-check.ff_item_selected .ff-el-image-input-src{background-color:#ECF5FE;border:solid 3px var(--acc);transition:all .3s ease;}
.modal .ff-el-input--content .ff-el-form-check .ff-el-form-check-label span{width:100%;font-size:100%;font-weight:400;display: block;line-height: 1.2;align-content: left;display:block;margin-top: 10px;color:var(--dark);opacity:0.7;}
.modal .ff-el-input--content .ff-el-form-check .ff-el-form-check-label span > span{font-weight:700;color:var(--dark);opacity:1;}
.modal .ff-el-input--content .ff-el-form-check .ff-el-form-check-label input{position:absolute;top:20px;left:20px;appearance: none;-webkit-appearance: none;border-radius:2.5px!important;border: solid 2px var(--fontgrey)!important;display: block;padding: 10px;background:var(--white)!important; width: auto}    
.modal .ff-el-input--content .ff-el-form-check .ff-el-form-check-label input:checked{background:var(--acc)!important;border:solid 1px var(--acc)!important;}
.modal .ff-el-input--content .ff-el-form-check .ff-el-form-check-label input:checked:before{content:'✓';position:absolute;top:-5px;left:3px;color:var(--white)!important;border-radius:0;font-size:125%;font-weight:600;}
.modal .ff-btn{position: relative;background: var(--acc)!important;color: var(--white)!important;transition: all .3s ease;text-align: center;margin-top: 50px;border-radius: 0!important;padding: 12px 23px!important;width: max-content;display: flex;justify-content: center;font-size: 16px;border:none!important;}
.modal .ff-btn-prev{background:var(--acc-very-light)!important;color: var(--dark)!important}
.modal .ff-btn-submit{background:var(--acc)!important;color: var(--white)!important}
.modal .error{font-size:135%!important;padding:15px 5px;}

.modal .ff-step-body .fluentform-step[data-name="form_step-3_2"] .ff-el-group .title{display:block;margin-bottom:15px;font-weight:600;}
.modal .ff-step-body .fluentform-step[data-name="form_step-3_2"] .ff-el-group label{font-size:85%;color:var(--dark);opacity:0.7;}
.modal .ff-step-body .fluentform-step[data-name="form_step-3_2"] .ff-el-group input{border-radius: 0 !important;margin-bottom: 15px;background: #F8F8F8;transform:all .3s ease;}
.modal .ff-step-body .fluentform-step[data-name="form_step-3_2"] .ff-el-group input:focus, .modal .ff-step-body .ff-el-group input:hover{background: #ECF5FE;transform:all .3s ease;}

/*------------------------------------Header-------------------------------------------------*/

#page-header{position:absolute;top:0;right:0;left:0;padding:7px 0;background: var(--white);z-index:999;transition: all ease .3s;}
.startseite #page-header{position:absolute;top:0;right:0;left:0;padding:7px 0;background: transparent;z-index:999;transition: all ease .3s;}

#page-header .logo:focus-visible{height: max-content;display: block;}
#page-header .logo{width: 119px;}
#page-header .logo.hell{display: none;}
#page-header .row{align-items: center;}
#page-header #toppermenu .menu{text-align: center;margin-top: 5px;margin-left: 15px;}
#page-header #toppermenu .menu li{display: inline-block; margin-right: 20px;position: relative;margin-bottom: 0px;padding-left: 38px;}
#page-header #toppermenu .menu li::before{display: none;}
#page-header #toppermenu .menu li a{padding: 0;text-decoration:none;position:relative;color: var(--dark);}
#page-header #toppermenu .menu li a:hover{color: var(--acc);}
#page-header #toppermenu .btn.responsive{display: none;}

#page-header .btn{margin-top: 5px;float: right;}

#page-header .burgerbutton{display:none; z-index: 999; width:40px;height:30px;position:absolute;top:27px;right:15px;cursor:pointer; background: none; border: none; transform: translateY(-50%);}
#page-header .burgerbutton span{position: relative;}
#page-header .burgerbutton span::before{content: '';background: url('media/icons/hamburger-menu_dark.svg') no-repeat;background-size: 100%;width: 24px;height: 24px;display: block;position: absolute;}
.startseite #page-header .burgerbutton span::before{content: '';background: url('media/icons/hamburger-menu_dark.svg') no-repeat;background-size: 100%;width: 24px;height: 24px;display: block;position: absolute;filter: invert();}
.startseite #page-header.bottom .burgerbutton span::before{filter: unset;}
.startseite #page-header .burgerbutton.active span::before{filter: unset;}
#page-header .burgerbutton.active span::before{content: '';background: url('media/icons/hamburger-menu_active.svg') no-repeat;background-size: 100%;width: 24px;height: 24px;display: block;position: absolute;}

/*Pager Header Botom*/
#page-header.bottom{padding: 7px 0;position:fixed;top:0;left:0;right:0;background: var(--white);transition: all ease .3s;}
#page-header.bottom .infos{display:none;}
#page-header.bottom #toppermenu{padding-top:0;}
#page-header.bottom #toppermenu.active{padding-top: 75px;}
#page-header.bottom .container > .row{align-items: center;}



/*------------------------------------Footer-------------------------------------------------*/

#page-footer{background:var(--dark);padding:0 0 15px; color: var(--white);z-index: 99;position: relative;}
#page-footer *{color:var(--white);}
#page-footer a{color: var(--white);}
#page-footer a:focus-visible{height: max-content;display: block;}
#page-footer a:hover{color: var(--acc);}
#page-footer .btn{margin-top: 80px;}
#page-footer .btn:hover{color: var(--white);}
#page-footer .footer-top{display: flex;justify-content: space-between;color: var(--acc);align-items: end;}
#page-footer h3{border-top: 8px solid var(--acc);padding-top: 32px;color: var(--acc);font-weight: 700;font-size: 200%;}
#page-footer .headline{font-size: 100%;text-transform: none;margin-bottom: 10px;}
#page-footer .logo{height: max-content;display: block;margin-bottom: 2rem;}
#page-footer .logo img{max-width: 150px;}

#page-footer .adresse{margin-bottom: 2rem;}
#page-footer .adresse p{font-size: 140%;font-weight: 500;font-family: 'Lato',sans-serif,Arial;font-display: swap;}

#page-footer .topline{color: var(--fontgrey);font-size: 100%!important;font-weight: 500;margin-bottom: 5px;}

#page-footer .headerlink{position: absolute; transform: rotate(270deg); right: -100px; top: 55px; font-weight: 700;}
#page-footer .headerlink::after{content: ''; position: absolute; display: block; background-image: url('media/arrow_down.svg'); background-repeat: no-repeat; background-size: contain; width: 13px; height: 13px; right: -25px; top: 5px; transition: all 0.3s ease; transform: rotate(270deg);}

#page-footer .row{gap: 0 4rem;}
#page-footer .row .col{flex: unset;width: max-content;max-width: 100%;}
#page-footer .navigation{display: flex;flex-direction: column;}
#page-footer .navigation a{font-size: 140%;font-weight: 500;margin: 8px 0;line-height: 1;}

#page-footer .copyright, #page-footer .rechtliches{padding: 65px 15px 10px;}
#page-footer .copyright span{display:block;color:#fff;font-size:75%;font-weight: 100;}

#page-footer .rechtliches{padding-right: 0;}
#page-footer .rechtliches a{display: inline-block; padding: 0 35px;font-weight: 500;color: var(--fontgrey);}
#page-footer .rechtliches a:hover{color: var(--white);text-decoration: underline;}
#page-footer .rechtliches a:first-child{padding-left: 0;}
 


/*------------------------------Abweichungen-----------------------------------------*/
.startseite .inhaltsbloecke{margin-top:0px;}
.startseite #page-header .logo.dunkel{display: none;}
.startseite #page-header .logo.hell{display: block;}
.startseite #page-header.bottom .logo.dunkel{display: block;}
.startseite #page-header.bottom .logo.hell{display: none;}
.startseite #page-header #toppermenu .menu li a{color: var(--white);}
.startseite #page-header.bottom #toppermenu .menu li a{color: var(--dark);}


.impressum-datenschutz h1{margin-bottom: 50px;}
.impressum-datenschutz h2{font-size: 145%;}
.impressum-datenschutz strong{margin-bottom: 1rem;display: block;}  


/*------------------------------ACF-Flexible-Content-----------------------------------------*/

.inhaltsbloecke{margin-top:120px;}
div[class^="flx_"], div[class*="flx_"],
section[class^="flx_"], section[class*="flx_"]{margin:0 0 100px 0;}

/*CTA Box - global*/
.cta_box{background-color: var(--acc-very-light);padding: 24px 24px 64px;position: relative;height: max-content;right: 25px;top: -54px;width: 426px;}
.cta_box .cta_headline{font-weight: 600;font-size: 210%;margin-bottom: 10px;;}
.cta_box .btn.sec{position: absolute;bottom: -50px;right: 0;}

/*Headerblock*/
.flx_headerblock{height: 100vh;background-repeat: no-repeat;background-size: cover;background-position: center;margin-bottom: 0!important;}
.flx_headerblock .container{position: relative; height: 100vh;}
.flx_headerblock .row{position: absolute;bottom: 53px;justify-content: space-between;}
.flx_headerblock .headlinebox *{color: var(--white);}
.flx_headerblock .btn.trans{margin-top: 0;}

/*Logo Slider*/
.flx_logoslider{margin-bottom: 0!important;}
.flx_logoslider .headline{font-size: 120%;text-align: center;margin-top: 64px;margin-bottom: 32px;}
.flx_logoslider .logo-grid{display: grid;grid-template-columns: repeat(5, 1fr);gap: 1rem}
.flx_logoslider .logo-grid .logo-slot{text-align: center;}
.flx_logoslider .logo-grid img{width: 165px;height: 65px; object-fit: contain;}

/*Textblock*/
.flx_textblock.check_cta .row{justify-content: space-between;}
.flx_textblock.check_cta .stichpunkt{margin-bottom: 48px;display: flex;gap: 1.5rem;}
.flx_textblock.check_cta .stichpunkt .heading{font-size: 120%;font-weight: 600;margin-bottom: 5px;color: var(--dark);}
.flx_textblock.check_cta .stichpunkt .subline{margin-bottom: 64px;}
.flx_textblock.check_cta .stichpunkt .inhalt{color: var(--fontgrey);}

/*Störer*/
.flx_stoerer{background-size: cover;height: 320px;background-position: center;max-width: 1920px;background-size: 100%;width: 100%;margin: 0 auto!important;}

/*Aktuelle Themen*/
.flx_aktuelle_themen{padding: 130px 30px 30px;position: relative;}
.flx_aktuelle_themen::before{display: block;content: "";z-index: -1;position: absolute;top: 64px;left: 0;width: 100%;height: 50%;background-color: #f5f5f5;}
.flx_aktuelle_themen .inner{padding: 32px;}
.flx_aktuelle_themen .title{font-size: 206%;font-weight: 700;line-height: 1.2;margin-bottom: 0;}
.flx_aktuelle_themen .icon{margin-bottom: 4rem;}
.flx_aktuelle_themen .icon img{width: 50px;height: 50px;object-fit: contain;}
.flx_aktuelle_themen .btn{margin-top: 20px;}


/*Leistungsübersicht*/
#services{padding-top: 100px;margin-top: -100px;}
.flx_leistungsuebersicht{margin-top: -130px;}
.flx_leistungsuebersicht .kacheln{max-width: 1920px;margin: 0 auto;padding-top: 27px;}
.flx_leistungsuebersicht .kachel{aspect-ratio: 2 / 1;filter: grayscale();transition: all ease .3s;background-size: 100%;background-position: center;}
.flx_leistungsuebersicht .kachel:hover{filter: none;transition: all ease .3s;}
.flx_leistungsuebersicht .inner{position: relative;height: 100%;width: 100%;}
.flx_leistungsuebersicht .kachel .title{position: absolute;color: var(--white);bottom: 32px;left: 32px;transition: all .2s ease-in-out;margin-bottom: 0;font-size: 205%;font-weight: 700;}
.flx_leistungsuebersicht .kachel .inner:hover > .title{bottom: 100px;transition: all .2s ease-in-out;}
.flx_leistungsuebersicht .kachel .btn{position: absolute;bottom: 32px;left: 32px;opacity: 0;transition: all ease .3s;}
.flx_leistungsuebersicht .inner:hover > .btn{opacity: 1;transition: all ease .3s;}
.flx_leistungsuebersicht .zusatzkachel{padding: 32px;position: relative;background-color: var(--acc-very-light);}
.flx_leistungsuebersicht .zusatzkachel .inner{padding-bottom: 100px;;}
.flx_leistungsuebersicht .zusatzkachel *{color: var(--dark);}
.flx_leistungsuebersicht .zusatzkachel .title{font-size: 205%;font-weight: 700;margin-bottom: 8px;}
.flx_leistungsuebersicht .zusatzkachel .btn{color: var(--white);background-color: var(--acc);position: absolute;bottom: 0;}
.flx_leistungsuebersicht .zusatzkachel .btn:hover{background-color: var(--acc-hover);}


/*Kachelblock*/
.flx_kachelblock{background-color: var(--acc-very-light);padding: 130px 0;max-width: 1920px;margin: 0 auto!important;}
.flx_kachelblock .inner{padding: 25px;background-color: var(--white);height: 100%;}
.flx_kachelblock img{height: 35px;max-width: 44px;margin-bottom: 24px;width: auto;object-fit: contain;}
.flx_kachelblock h3{margin-bottom: 10px;font-size: 170%;}


/*Kontaktblock*/
.flx_kontakt{padding: 130px 0;background-position: center;max-width: 1920px;margin: 48px auto 0!important;background-repeat: no-repeat;background-size: cover;}
.flx_kontakt .row{padding: 0 15px;}
.flx_kontakt .haupt_headline{margin-bottom: 2rem;}
.flx_kontakt .haupt_headline h2{font-size: 300%;}
.flx_kontakt .haupt_headline *{text-align: center;}
.flx_kontakt .haupt_headline .subline{font-size: 175%;font-weight: 700;}
.flx_kontakt h2{font-size: 210%;}
.flx_kontakt .headline,
.flx_kontakt .subline{color: var(--white);margin-bottom: 20px;}
.flx_kontakt .box{padding: 30px;}
.flx_kontakt .headline-box{backdrop-filter: blur(20px);}
.flx_kontakt .mail-box{background-color: var(--acc);}
.flx_kontakt .tel-box{background-color: var(--acc-light);}
.flx_kontakt .btn{margin-top: 0;margin-bottom: 40px;}
.flx_kontakt .formular{backdrop-filter: blur(10px);margin-top: 3rem;padding: 2rem;}

/*Bilderslider*/
.flx_slider{position: relative;}
.flx_slider .topline,
.flx_slider .headline{width: 100%;text-align: center;}
.flx_slider::before {content: '';width: 7%;height: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(90deg, #ffff 20%, #fff5 100%);z-index: 2;filter: blur(30px);}
.flx_slider::after {content: '';width: 7%;height: 100%;position: absolute;right: 0;top: 0;background: linear-gradient(-90deg, #ffff 20%, #fff5 100%);z-index: 1;filter: blur(30px);}

.flx_slider .slider-wrapper{position: relative;}
.flx_slider .swiper .nav{margin-top: 1rem!important;}

.flx_slider .swiper{overflow:visible;}
.flx_slider .slide-image img{height:100%;width:100%;object-fit: cover;aspect-ratio: 1 / 1;border-radius: var(--br-md);}

/*Referenzübersicht*/
.flx_referenz_uebersicht .referenz{margin-bottom: 4rem;display: flex;flex-direction: column;}
.flx_referenz_uebersicht .firmenlogo{height: 65px;margin-bottom: 2rem;}
.flx_referenz_uebersicht .logo{height: 65px;object-fit: contain;}
.flx_referenz_uebersicht .kacheln{margin-top: 5rem;}
.flx_referenz_uebersicht .inner{padding: 25px;display: flex;flex-direction: column;gap: 30px;background-color: var(--acc-very-light);height: 100%;}
.flx_referenz_uebersicht .inner .headline{font-size: 205%;}
.flx_referenz_uebersicht h3{margin-bottom: 0;}
.flx_referenz_uebersicht .bereichtext{font-size: 120%;font-weight: 700;margin-bottom: 10px;}
.flx_referenz_uebersicht .bereiche-buttons{display: flex;flex-wrap: wrap;gap: 8px;}
.flx_referenz_uebersicht .bereiche{flex: 1;}
.flx_referenz_uebersicht .bereiche span{background-color: var(--acc);padding: 8px 12px;color: var(--white);}
.flx_referenz_uebersicht .btn{margin-top: 0;border: 1px solid var(--dark);color: var(--dark);}
.flx_referenz_uebersicht .btn:hover{border: 1px solid var(--dark);color: var(--dark);}
.flx_referenz_uebersicht .btn.trans img{filter: unset;}
 
/*-------------------------------------------------------------------------------------------*/
/*Single Service-Leistungen*/
#phpsingle .inhaltsbloecke{margin-top: 70px!important;}
#phpsingle .hg{background-repeat: no-repeat;height: 300px;padding: 32px;display: flex;flex-direction: column;justify-content: space-between;background-position: center;background-size: cover;}
#phpsingle h1{color: var(--white);font-weight: 700;margin-bottom: 12px;}

#phpsingle .header{margin-bottom: 64px;}
#phpsingle .inhalt .row{justify-content: space-between;}


#phpsingle p strong{font-size: 115%;margin-bottom: 1rem;display: block;}
#phpsingle .content ul{margin-bottom: 1rem;}
#phpsingle .content h2,
#phpsingle .content h3,
#phpsingle .infobox h2{font-size: 118%;font-weight: 600;margin-bottom: 20px;}

#phpsingle .cta_box{top: 0;right: 15px;width: 384px;}

#phpsingle .infobox{background-color: var(--dark);margin: 32px 0;padding: 25px;}
#phpsingle .infobox *{color: var(--white);}

#phpsingle .kachelblock{padding: 64px;background-color: var(--acc-very-light);margin: 24px 0;}
#phpsingle .kachel .inner{padding: 24px 24px 64px;background-color: var(--white);height: 100%;}
#phpsingle .kachelblock h2{font-size: 205%;font-weight: 700;margin-bottom: 65px;}
#phpsingle .kachelblock h3{font-size: 175%;font-weight: 700;margin-bottom: 12px;}



/*-------------------------------------------------------------------------------------------*/
@media (max-width:1480px){
    h2{font-size: 220%;}

    /*Headerblock*/
    .flx_headerblock h1{font-size: 260%;width: 70%;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1199px){

    /*Page Header*/
    #page-header #toppermenu .menu li{padding-left: 28px;}
    /*Headerblock*/
    .flx_headerblock .cta_box{display: none;}
    
    /*Leistungsübersicht*/
    .flx_leistungsuebersicht .kachel{filter: unset;}
    .flx_leistungsuebersicht .kachel .title{bottom: 100px;}
    .flx_leistungsuebersicht .kachel .btn{opacity: 1;}

    /*CTA Box*/
    .cta_box{margin-right: 2rem;width: 369px;}


    /*Kachelblock*/
    .flx_kachelblock{padding: 60px 0;}
    .flx_kachelblock .kachel{margin-bottom: 30px;}

    /*Logoslider*/
    .flx_referenz_uebersicht .logo{width: 160px;object-fit: contain;}

    /*PHP Single Kachel*/
    #phpsingle .kachel{margin-bottom: 30px;}



}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:991px) {

    h1{font-size: 200%;}
    h2,
    .cta_box .cta_headline{font-size: 213%;}
    .flx_aktuelle_themen .title,
    h3,
    .flx_kachelblock h3{font-size: 138%;}
    .subline{font-size: 117%;}

    /*Header*/
    .startseite #page-header,
    #page-header.bottom,
    #page-header{padding: 16px 10px;}
    #page-header #toppermenu::before{content: 'Navigation';color: var(--fontgrey);font-size: 160%;font-weight: 700;top: 30px;left: 60px;opacity: 0;transition: all ease .3s;position: absolute;}
    #page-header #toppermenu.active::before{opacity: 0.4;transition: all ease .3s;transition-delay: 0.2s;}
    #page-header #toppermenu .menu li{padding-left: 30px;opacity: 0;transition: all .6s ease;}
    #page-header #toppermenu.active .menu li{opacity:1;transition: all 0.6s ease;}
    #page-header #toppermenu.active .menu li:nth-child(1) { transition-delay: 0.2s; }
    #page-header #toppermenu.active .menu li:nth-child(2) { transition-delay: 0.3s; }
    #page-header #toppermenu.active .menu li:nth-child(3) { transition-delay: 0.4s; }
    #page-header #toppermenu.active .menu li:nth-child(4) { transition-delay: 0.5s; }
    #page-header #toppermenu.active .menu li:nth-child(5) { transition-delay: 0.6s; }
    #page-header #toppermenu.active .menu li:nth-child(6) { transition-delay: 0.7s; }

    #page-header #toppermenu{position:absolute; top:0; right:0; bottom:0; transition:all .3s ease;background:var(--white);height:100vh;  width: 100%; padding-top: 100px;transform: translateY(-100%);transition: transform 0.3s ease;}
    #page-header #toppermenu.active{transform: translateY(0);}
    #page-header #toppermenu .menu{position:relative; padding: 25px; text-align: left;}
    #page-header #toppermenu .menu li{display:block;margin:0 10px;padding:10px 25px 15px;position:relative;}
    .startseite #page-header #toppermenu .menu li a,
    #page-header #toppermenu .menu li a{font-size: 250%;color: var(--dark);font-weight: 700;}

    #page-header .btn{display: none;}
    #page-header #toppermenu .btn.responsive{display: block;float: unset;margin-left: 75px;background: var(--acc);color: var(--white);opacity: 0;transition: all ease .6s;}
    #page-header #toppermenu.active .btn.responsive{opacity: 1;transition-delay: 0.8s;transition: all ease .6s;}
    #page-header #toppermenu .btn.responsive img{filter: invert();}
    #page-header .burgerbutton{display: block;}


    /*Headerblock*/
    .flx_headerblock h1{font-size: 210%;width: 90%;}

    /*Textblock*/
    h2 br{display: none;}

    /*Logoslider*/
    .flx_logoslider .logo-grid{grid-template-columns: repeat(4, 1fr);}
    .flx_logoslider .logo-slot:last-child{display: none;}

    /*CTA Box*/
    .cta_box{width: 400px;max-width: 100%;margin: 2rem auto 5rem;max-width: 100%;top: 0;right: 0;}
    .cta_box .cta_headline{font-size: 150%;}

    /*Störer*/
    .flx_stoerer{height: 180px;}


}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:767px) {

    body,html,*{font-size:17px;}
    div[class^="flx_"], div[class*="flx_"]{margin: 0 0 70px 0;}
    
    h1{font-size: 180%;}
    h2,
    .cta_box .cta_headline{font-size: 150%;}
    .flx_aktuelle_themen .title,
    .flx_leistungsuebersicht .kachel .title,
    h3,
    .flx_kachelblock h3{font-size: 130%;}


    #page-header #toppermenu::before{left: 30px;}
    #page-header #toppermenu .menu li{padding: 7px 0;}
    #page-header #toppermenu .menu li a{font-size: 200%;} 

    #page-header #toppermenu .btn.responsive{left: -20px!important;}

    /*Footer*/
    #page-footer .row .col{width: 100%;margin-bottom: 3rem;}
    #page-footer .btn{margin-top: 0;}
    #page-footer .navigation a{font-size: 130%;}
    #page-footer .copyright, #page-footer .rechtliches{padding: 10px 15px;}
    #page-footer .rechtliches a{display:block;padding:10px 0;}
    #page-footer h3{font-size: 160%;}

    /*Logoslider*/
    .flx_logoslider .logo-grid{grid-template-columns: repeat(3, 1fr);}
    .flx_logoslider .logo-slot:nth-child(4n){display: none;}

    /*Aktuelle Themen*/
    .flx_aktuelle_themen{padding: 130px 15px 30px;}
    .flx_aktuelle_themen .icon{margin-bottom: 2rem;}

    /*Single Services*/
    #phpsingle .kachel .inner{padding: 30px;}
    #phpsingle .kachelblock{padding: 30px;}

    /*Leistungsübersicht*/
    .flx_leistungsuebersicht .subline{margin-bottom: 0;}

    /*Kontakt*/
    .flx_kontakt .haupt_headline h2{font-size: 240%;}
    .flx_kontakt .haupt_headline .subline,
    .flx_kontakt h2{font-size: 145%;}
    .flx_kontakt .btn{margin-bottom: 0;}


}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:575px) {

    div[class^="flx_"], div[class*="flx_"]{margin: 0 0 80px 0;}
    body,html,*{font-size:15px;}
    .btn{margin-top: 20px;}

    .cta_box .btn.sec{bottom: -54px;}


    /*Logoslider*/
    .flx_logoslider .logo-grid{grid-template-columns: repeat(2, 1fr);}
    .flx_logoslider .logo-slot:nth-child(3n){display: none;}

    /*Headerblock*/
    .flx_headerblock h1{width: 100%;}
    .flx_headerblock .container{height: 90vh;}

    /*Leistungen*/
    .flx_leistungsuebersicht .kachel{aspect-ratio: unset;height: 320px;}
    .flx_leistungsuebersicht .zusatzkachel .btn{position: unset;}

    /*cta*/
    .cta_box .btn.sec{bottom: -49px;}


}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:400px) {
  .cta_box{width: 94%;max-width: 100%;}



}