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

    .flx_headerblock.mitvideo video{height:1080px;}

    .flx_leistungblock .tabblock .nav-pills{width: 40%;}
    .flx_leistungblock .tabblock .tab-content{width: 60%;}

    .flx_textblock .text ul li{width: 100%;}

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

    h1{font-size:350%;}
    h2{font-size:220%;}
    #page-header .menubuttonburger{display:block;margin:70px 25px 25px;transition:all .3s ease;}
    #page-header .menubuttonburger.active{margin-top:25px;}
    #page-header #toppermenu{display:none;position: fixed;top: 0;right: 0;bottom: 0;left:60%;background: var(--main);align-content:center;overflow:scroll;}
    #page-header #toppermenu.active{display:block;margin-top:0;transition:all .3s ease;}
    #page-header #toppermenu .menu{padding-top:75px;}
    #page-header #toppermenu .menu li{display:block;text-align:left;padding:25px 60px;}
    #page-header #toppermenu .menu li a{padding-top:20px;}
    #page-header #toppermenu .menu li.menu-item-has-children{position:relative;}
    #page-header #toppermenu .menu li.menu-item-has-children::after{content:'';display:block;width:20px;height:10px;position:absolute;top:37.5px;left:30px;background:url('../media/down.png');background-position:center;background-repeat:no-repeat;background-size:100%;transition:  all ease .3s;}
    #page-header #toppermenu .menu li.menu-item-has-children.open::after{transform: rotate(180deg);transition:  all ease .3s;}
    #page-header #toppermenu .menu li.menu-item-has-children .sub-menu{position:unset;max-width:100%;width:100%;}
    #page-header #toppermenu .menu li.menu-item-has-children:hover > .sub-menu{display:none;}
    #page-header #toppermenu .menu li.menu-item-has-children.open .sub-menu{display:flex;justify-content:space-between;flex-direction:column;}
    #page-header #toppermenu .menu li.menu-item-has-children .sub-menu::after{display:none;}
    #page-header #toppermenu .menu li.menu-item-has-children .sub-menu li{width:unset;text-align:left;margin: unset;}
    #page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a{overflow: unset;}
    #page-header .logo{margin:35px 0;}
    #page-header .logo img{max-width:75%;}
    #page-header.bottom .menubuttonburger{margin:25px 30px 25px;}
    #page-header.bottom #toppermenu{margin-top:0;}
    #page-header.bottom #toppermenu .menu li{padding:25px 60px;}

    #page-header #toppermenu .menu li.menu-item-has-children .sub-menu li{padding: 0;}
    #page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a span::after,
    #page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a img{display: none;}
    #page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a span{padding: 0;text-align: left;position: unset;}
    #page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a{margin: 10px 0;}
 

    .angebot{width:40%;}
    
    .flx_kontaktblock .links a{display: block;}
    
    
    .flx_headerblock .content{bottom: 85px;width:calc(100% - 30px);}
    .flx_headerblock .seitenteaserwrapper{gap:15px;margin:0;}
    .flx_headerblock .seitenteaserwrapper .item{width:calc(25% - 12px);}
    .flx_headerblock .seitenteaserwrapper .item .iteminner .headline{font-size:95%;font-weight: 700;letter-spacing: 0;}
    .flx_headerblock .seitenteaserwrapper .item .iteminner .icon{height: 50px;}

    .flx_leistungblock .tabblock .tab-content .tab-pane .bildslider .owl-controls .owl-nav{width: 90%;}

    .flx_seitenteaser .item .iteminner .headline, .flx_textblock.mitbildlinks .headline, .flx_textblock.mitslider .headline, .flx_textblock.mitbildrechts .headline{overflow-wrap: break-word;hyphens: auto;}

    .flx_textblock .text ul{display: flex;flex-wrap: wrap;}

    #page-footer .copyright .leer{display: none;}
    #page-footer .copyright span{text-align: center;}
    #page-footer .copyright .links{text-align: center;}
    #page-footer .copyright a{margin: 0 25px}

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

    div[class^="flx_"], div[class*="flx_"]{padding: 100px 0;}
    
    #page-header #toppermenu{left: 40%;}

    .flx_headerblock.mitvideo video{height:100vh;}
    
    /* .flx_headerblock.mitbild.seitenteaser .bg{height: 120vh;} */
    .flx_headerblock.mitbild .content{bottom: 35px;}
    .flx_headerblock.mitbild .content .headline{font-size: 260%;width: 100%;}
    .flx_headerblock.mitbild .content .topline{width: 100%;font-size: 100%;font-weight: 600;}
    .flx_headerblock .seitenteaserwrapper .item{width:calc(33% - 12px);}
    .flx_headerblock .seitenteaserwrapper .item .iteminner .icon{height: 40px;}

    .flx_leistungblock .editor{width: 100%;}
    
    .flx_textblock .leer{display: none;}
    
    .flx_textblock.mitbilder .imagewrapper .image.item2{top: 100px;}
    .flx_textblock.mitbilder .imagewrapper .image.item3{bottom: unset;top:200px;}

    .flx_kontaktblock .ansprechpartner .item .name{font-size: 120%;}
    .flx_kontaktblock .formular .fbox.drittel select{font-size: 80%;padding: 15px;}
    .flx_kontaktblock .formular span.topline{padding-left: 10px;}

    .flx_downloadblock .item .headline{font-size: 130%;}

    

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

    #page-header{padding-top: 25px;}
    #page-header.bottom{padding-top: 0;}
    #page-header .telefon{padding: 0 15px 5px 30px;}
    #page-header .logo img{max-width: 200px;}
    #page-header .menubuttonburger{margin: 25px;}
    #page-header #toppermenu{left: 30%;}
    #page-header.bottom .logo img{max-width: 90%;}
    #page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a:hover span{color: var(--sec);transition: all .3s ease;}
    #page-header #toppermenu .menu li.menu-item-has-children .sub-menu li a span{transition: all .3s ease;}
    #page-header #toppermenu .menu li.menu-item-has-children .sub-menu li.current-menu-item a span{color: var(--sec);}


    #page-footer .backtotop{position: relative;top: 100px;left: 90%;width: max-content;}
    #page-footer .leer{display: none;}
    #page-footer .row > div{margin-bottom: 2rem;}
    #page-footer .zertifikate img{margin-right: 1rem;margin-top: 1rem;}
    #page-footer .copyright{margin-top: 40px;margin-bottom: 0!important;}
    #page-footer .copyright > div{margin-bottom: 0!important;}


    .angebot{width:50%;}

    .flx_headerblock.mitbild .bg{height: 100vh;}
    .flx_headerblock.mitbild.seitenteaser .bg{height: 110vh;}
    .flx_headerblock .seitenteaserwrapper .item .iteminner .headline{font-size: 80%;min-height: 30px;}

    .flx_textblock.mitbilder .imagewrapper{height: 350px;}
    .flx_textblock.mitbilder .imagewrapper .image{width: 45%;}
    .flx_textblock.mitbilder .imagewrapper .image.item2{top: 70px;left: 50px;}
    .flx_textblock.mitbilder .imagewrapper .image.item3{right: 50px;top: 110px;}

    .flx_textblock.mitslider .slider .owl-controls .owl-dots{margin-bottom: 50px;}

    .flx_textblock .text ul li{overflow-wrap: break-word;hyphens: auto;}

    .flx_leistungblock .tabblock .nav-pills{width: 100%;margin-right: 0px !important;margin-bottom: 2rem;}
    .flx_leistungblock .tabblock .tab-content{width: 100%;}
    .flx_leistungblock .tabblock > div{flex-direction: column;}

    .flx_seitenteaser .item .iteminner .headline{font-size: 110%;}
    .flx_seitenteaser .item.col-lg-3{padding-bottom: 20px;}
    .flx_seitenteaser .item .iteminner .icon{max-width: 30%;margin: 5px auto;}

    .flx_kontaktblock .ansprechpartner .item .name{font-size: 150%;}
    .flx_kontaktblock .formular .fbox.drittel select{font-size: 100%;padding: 12.5px 15px;}

    .flx_socialmediablock .buttons a{font-size: 90%;}

    .flx_modellblock .item .iteminner .headline{font-size: 95%;overflow-wrap: break-word;hyphens: auto;}

    .flx_aufzaehlung .item{overflow-wrap: break-word;hyphens: auto;}

}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:767px) {
    
    body,html,*{font-size:16px;}
    div[class^="flx_"], div[class*="flx_"]{padding: 70px 0;}
    #page-header .telefon a{padding-left: 25px;}
    #page-header .telefon a::before{top: 3px;left: 0;height: 15px;width: 15px;}
    
    #page-header #toppermenu{left: 20%;}
    #page-header #toppermenu .menu li a{font-size: 120%;}

    .angebot .header .headline{font-size: 100%;letter-spacing: 1px;}
    .angebot .content img{width: 300px;max-height: 200px;object-fit: cover;}
    .angebot .preiswrapper{justify-content: flex-start;}
    .angebot .preiswrapper .angebotspreis{font-size: 125%;}
    .angebot .preiswrapper .streichpreis{font-size: 115%;margin-right: 25px;}
    .angebot .content .angebotsheadline{margin-bottom: 1rem;line-height: 1.2;font-size: 160%;}
    .angebot .header .headline::before{right: -10px;}

    .flx_headerblock.mitbild .content{bottom: 100px;}
    .flx_headerblock .seitenteaserwrapper .item{width: calc(60% - 74px);}
    .flx_headerblock .seitenteaserwrapper .item .iteminner .icon{display: none;}
    .flx_headerblock .seitenteaserwrapper .item .iteminner .headline{margin-bottom: 0;padding: 25px 15px;font-size: 90%;}
    .flx_headerblock.mitbild .content .headline{overflow-wrap: break-word;hyphens: auto;}

    .flx_leistungblock .tabblock .tab-content .tab-pane .inhalt ul li::before{top: 6px;}
    .flx_leistungblock::after{width: 150px;height: 150px;right: 20px;}
    .flx_leistungblock .tabblock .tab-content .tab-pane .bildslider .owl-controls .owl-nav{width: 70%;}

    .angebot{width:95%;left: 2.5%;}

    .flx_textblock.mitbilder .imagewrapper{height: 340px;}
    .flx_textblock .bild{margin-bottom: 2rem;}
    .flx_textblock .text{margin-bottom: 2rem;}
    .flx_textblock.mitbildlinks .row{flex-wrap: wrap-reverse;}

    .flx_aufzaehlung .item::before{top: -2px;}

    .flx_modellblock .item .iteminner .headline{font-size: 125%;}

    .flx_seitenteaser .slider .owl-controls .owl-nav{width: 90%;}

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

    body,html,*{font-size:14px;}
    div[class^="flx_"], div[class*="flx_"]{padding: 50px 0;}

    h2{font-size: 180%;}

    #page-header .telefon a::before{display: none;}
    #page-header .telefon a{padding-left: 0;}
    #page-header .telefon{clip-path: unset;padding: 0 10px 5px 15px;}
    #page-header #toppermenu{left: 0%;}
    #page-header #toppermenu .menu li a{font-size: 140%;}
    #page-header.bottom .logo img{max-width: 200px;margin-left: 15px;}

    .flx_headerblock.mitbild .content{bottom: 50px;}
    .flx_headerblock .seitenteaserwrapper .item{width: 100%;}
    .flx_headerblock .seitenteaserwrapper .item .iteminner .headline{padding: 15px;font-size: 130%;}

    .flx_textblock.mitbilder .imagewrapper{height: 270px;}

    .flx_textblock.mitslider .slider .owl-controls .owl-nav{width: 90%;}

    .flx_textblock.textzwei .headline{overflow-wrap: break-word;hyphens: auto;}

    .flx_leistungblock .tabblock .tab-content .tab-pane .bildslider .owl-controls .owl-nav{width: 90%;}

    .flx_aufzaehlung .item::before{top: -5px;}

    .flx_seitenteaser .slider .owl-controls .owl-nav{width: 90%;}
    .flx_seitenteaser .item .iteminner .headline{margin-bottom: 20px;}
    .flx_seitenteaser .item .iteminner .icon{margin: 25px auto;}

    .fbox,
    .fbox.drittel,
    .fbox.zweidrittel{width: 100%;}
    input[type="submit"]{padding: 10px 10px 13px;margin-top: 20px;}

    #page-footer .backtotop{top: 10px;left: 82%;}
    #page-footer .backtotop .scrollup img{width: 12px;}
}
/*-------------------------------------------------------------------------------------------*/
@media (max-width:400px) {

    #page-header{padding-top: 0;}
    #page-header .telefon{display: none;}

    .angebot .content img{max-height: 130px;}
    .angebot .content .angebotsheadline{font-size: 135%;margin-bottom: .5rem;}
    .angebot.active .preiswrapper{margin: 15px 0;}
    
    .flx_textblock.mitbilder .imagewrapper .image{width: 65%;}
    .flx_textblock.mitbilder .imagewrapper .image.item2{left: 0;}
    .flx_textblock.mitbilder .imagewrapper .image.item3{right: 0;}
    
    .flx_headerblock .content .headline{width: 100%;}
    .flx_headerblock.mitbild .content .headline{font-size: 220%;}
    .flx_headerblock.mitbild.seitenteaser .bg{height: 130dvh;}

    .flx_kontaktblock .ansprechpartner .item .name{font-size: 100%;}

    h1{font-size: 280%;}
    .topline{font-size: 120%;font-weight: 600;}

    #page-footer .copyright a{margin: 0 10px;}

}