/*
--------------Farben-------------
Blau:       #20214F
Anthrazit:  #293133
--------------NEU-------------
Grün:       #265249
Schwarz:  	#000
*/

body,html,*{font-size: 16px;font-family: 'Montserrat';font-weight: 400;line-height: 1.7;color: #191919;}
html{scroll-behavior: smooth;}

a{color: #000;text-decoration: none;font-size: 100%;transition: all .3s ease;}
a:hover{text-decoration: none;color: #265249;transition: all .3s ease;}
a:focus{border:none;outline: none;}
*:focus-visible {outline: none;}

p{margin-bottom: 0;}

li{list-style: none;padding-left: 30px;position: relative;}

ul{padding: 0;margin: 0;}

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

.headline{font-size: 350%;font-weight: 700;display: block;color: #265249;text-transform: uppercase;margin-bottom: 20px;line-height: 1;}
.topline{font-size: 100%;font-weight: 600;display:block;color: #000;margin-bottom: 10px;}

h3{margin: 15px 0;font-weight: 600;color: #265249;font-size: 150%;}

.btn{position: relative;padding: 10px 40px 10px 40px;font-weight: 600;background: #265249;color: #fff;transition: all .3s ease;text-transform: uppercase;text-align: center;border-radius: 0px;font-size: 80%;}
.btn:hover{background: #293133;transition: all .3s ease;color: #fff;}
.button{margin-top: 20px;}

strong{font-weight: 600;font-size: 100%;}

.container{max-width: 1600px;}

input, textarea{border-radius: 0px;border: solid 2px #eee;padding: 10px;margin-bottom: 20px;width: 100%;}
input:focus-visible, textarea:focus-visible{outline: none;}

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

#page-header{position: absolute;top: 0;right: 0;left: 0;padding: 0;z-index: 999;background-color: #fff;min-height: 150px;}

#page-header #topbar{background-color: #eee;padding: 10px 0;margin-bottom: 20px;}
#page-header #topbar .contact{display: flex;justify-content: flex-end;}
#page-header #topbar .contact li{display: inline-block;margin-right: 50px;padding-left: 25px;}
#page-header #topbar .contact li:last-child{margin-right: 0px;}
#page-header #topbar .contact li a{color: #191919;font-size: 80%;}
#page-header #topbar .contact li a:hover{color: #265249;}
#page-header #topbar .contact .phone::before{content: '';background: url('media/icons/phone-grey.png')no-repeat;background-size: 100%;width: 15px;height: 15px;display: block;position: absolute;left: 0;top: 6px;}
#page-header #topbar .contact .mail::before{content: '';background: url('media/icons/email-grey.png')no-repeat;background-size: 100%;width: 17px;height: 17px;display: block;position: absolute;left: 0;top: 5px;}

#page-header .navigation{display: flex;justify-content: flex-end;align-items: center;}
#page-header .navigation .menu li{display: inline-block;position: relative;margin-right: 50px;padding: 0;}
#page-header .navigation .menu li::before{content: '';background-color: #265249;height: 2px;width: 0;position: absolute;left: 0;bottom: 0;transition: 0.3s;}
#page-header .navigation .menu li:hover::before{width: 100%;transition: 0.3s;}
#page-header .navigation .menu li:last-child{margin-right: 0;}
#page-header .navigation .menu li a{font-weight: 600;}

#page-header .navigation #menuburgerbutton{position: absolute;display: none;width:40px;height: 40px;transition: .5s ease-in-out;  cursor: pointer;z-index: 100;}
#page-header .navigation #menuburgerbutton span{margin: 8px 0; display: block;height: 3px;width: 100%;background: #265249;opacity: 1;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}

#page-header .navigation #menuburgerbutton.open span:nth-child(0n+1) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);margin-top: 11px;background-color: #FFF;}
#page-header .navigation #menuburgerbutton.open span:nth-child(0n+2){display: none;}
#page-header .navigation #menuburgerbutton.open span:nth-child(0n+3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);margin-top: -11px;background-color: #FFF;}

#page-header.bottom{min-height: unset;box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.3);padding: 20px 0;position: fixed;top: 0;left: 0;right: 0;background: #fff; -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 2s; /* Firefox < 16 */-ms-animation: fadein 2s; /* Internet Explorer */-o-animation: fadein 2s; /* Opera < 12.1 */animation: fadein 2s;z-index:999;}

@keyframes fadein {
    from { top: -100px; }
    to   { top: 0; }
}
@-moz-keyframes fadein {
    from { top: -100px; }
    to   { top: 0; }
}
@-webkit-keyframes fadein {
    from { top: -100px; }
    to   { top: 0; }
}
@-ms-keyframes fadein {
    from { top: -100px; }
    to   { top: 0; }
}

#page-header.bottom #topbar{display: none;}
#page-header.bottom .logo img{max-width: 50%;}

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

#page-footer{background: #265249;padding: 40px 0 30px 0;position: relative;margin-top: 100px;}
#page-footer a:hover{color: #000;}
#page-footer span, #page-footer a{color: #fff;}
#page-footer .icon{text-align: center;margin-bottom: 10px;}
#page-footer .icon img{max-width: 40px;}
#page-footer .mail a, #page-footer .phone a{display: block;text-align: center;}
#page-footer .location span{display: block;text-align: center;}

#page-footer .footermenu{text-align: center;margin: 50px 0 20px 0;}
#page-footer .footermenu li{display: inline-block;padding: 0;margin-right: 50px;}
#page-footer .footermenu li:last-child{margin-right: 0;}

#page-footer .copyright{text-align: center;}
#page-footer .copyright p{color: #fff;opacity: 0.5;}

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

div[class^="flx_"], div[class*="flx_"]{margin-bottom: 150px;padding-top: 150px;margin-top: -120px;}

.inhaltsbloecke{margin-top: 150px;}
.datenschutz .inhaltsbloecke, .impressum .inhaltsbloecke{margin-top: 225px;}

.flx_headerblock{position: relative;}
.flx_headerblock::before{content: '';background-color: rgba(26, 52, 49, 0.7);display: block;position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
.flx_headerblock .contentblock{position: absolute;z-index: 1;padding-top: 150px;}
.flx_headerblock .contentblock .topline{color: #fff;}
.flx_headerblock .contentblock .headline{color: #fff;width: max-content;margin: 0;font-size: 400%;}
.flx_headerblock .contentblock p{color: #fff;width: 50%;margin: 20px 0;}
.flx_headerblock .contentblock .btn{background: #265249;}
.flx_headerblock .contentblock .btn:hover{background: #000;}

.flx_textblock.bild-text .text .inner{padding: 40px;}

.flx_leistungen .headline{margin-bottom: 50px;}
.flx_leistungen .item .inner{display: flex;padding: 40px 30px;border: solid 2px #eee;transition: 0.3s;}
.flx_leistungen .item .inner:hover{background: #293133;border: solid 2px #265249;transition: 0.3s;}
.flx_leistungen .item .inner:hover .content .headline, .flx_leistungen .item .inner:hover .content p{color: #fff;}
.flx_leistungen .item .inner:hover .icon img{filter: brightness(0) invert(1);}
.flx_leistungen .item .inner .icon{display: ruby;margin-right: 10px;}
.flx_leistungen .item .inner .icon img{max-width: 80%;}
.flx_leistungen .item .inner .content .headline{font-size: 150%;margin-bottom: 10px;}

.flx_kontaktformular .datenschutz{margin-bottom: 20px;}
.flx_kontaktformular .datenschutz input{width: 15px;margin: 0;}
.flx_kontaktformular .datenschutz p{display: inline;}
.flx_kontaktformular .submitbox{margin-top: 20px;}
.flx_kontaktformular .submitbox input{margin: 0;}

/*-------------------------------------------------------------------------------------------*/
@media (min-width:1921px){
    

    
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1780px){
    
    .container{padding: 0 30px;}
    
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1480px){
    
    .headline{font-size: 250%;}
    
    div[class^="flx_"], div[class*="flx_"]{margin-bottom: 100px;}
    
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:1199px){
    
    .flx_leistungen .item{margin-bottom: 30px;}
    .flx_leistungen .item:last-child{margin-bottom: 0;}
    .flx_leistungen .item .inner{padding: 30px;}
    
    .flx_textblock.bild-text .bild{margin-bottom: 30px;}
    .flx_textblock.bild-text .text .inner{padding: 0;}
    
    .flx_textblock.text-bild .text{margin-bottom: 30px;}
    
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:991px) {
    
    #page-header .navigation .menu li{margin-right: 30px;}
    
    div[class^="flx_"], div[class*="flx_"]{margin-bottom: 50px;}
    
    .flx_headerblock .contentblock .headline{font-size: 300%;}
    
    .flx_kontaktformular .text, .flx_kontaktformular .formular{max-width: 100%;flex: 0 0 100%;}
    
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:767px) {
    
    #page-header .logo, #page-header .navigation{max-width: 50%;flex: 0 0 50%;}
    
    #page-header .navigation .menu{display: none;}
    #page-header .navigation .menu.active{display: block;position: fixed;right: 0;top: 0;height: 100%;width: 50%;background: #265249;text-align: right;padding-top: 150px;padding-right: 30px;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
    #page-header .navigation .menu.active li{margin-right: 0;display: block;margin-bottom: 5px;}
    #page-header .navigation .menu.active li a{font-size: 120%;color: #fff;}
    #page-header .navigation .menu.active li a:hover{color: #000;}
    #page-header .navigation .menu li::before{display: none;}
    
    #page-header .navigation #menuburgerbutton{display: block;}
    
    .flx_headerblock .contentblock{position: relative;}
    .flx_headerblock .contentblock .headline{font-size: 250%;}
    .flx_headerblock .contentblock p{width: 100%;}
    
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:600px) {
    
    body, html, *{font-size: 14px;}
    
    .headline{font-size: 180%;line-height: 1.2;}
    
    .btn{font-size: 90%;}
    
    #page-header{min-height: 130px;}
    
    #page-header #topbar .contact{justify-content: center;}
    
    #page-header .logo{max-width: 70%;flex: 0 0 70%;}
    #page-header .navigation{max-width: 30%;flex: 0 0 30%;}
    
    #page-header .navigation .menu.active{width: 80%;}
    #page-header .navigation .menu.active li a{font-size: 140%;}
    
    #page-header.bottom .logo img{max-width: 80%;}
    
    .inhaltsbloecke{margin-top: 130px;}
    
    .flx_headerblock{height: 60vh!important;background-attachment: unset!important;padding-top: 0!important;margin-top: 0!important;}
    .flx_headerblock .contentblock{padding-top: 50px;}
    .flx_headerblock .contentblock .headline{font-size: 180%;}
    
    .flx_leistungen .item .inner{display: block;}
    .flx_leistungen .item .inner .icon{display: block;margin-right: 0;margin-bottom: 20px;}
    
    #page-footer .col-md-3{margin-bottom: 30px;}
    #page-footer .footermenu{margin: 20px 0 20px 0;}
    
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:400px) {
    
    .headline{font-size: 160%;}
    
    .flx_headerblock .contentblock .headline{font-size: 160%;}
    
    .flx_leistungen .item .inner .content .headline{font-size: 130%;}

}