/*-------------------------------------------------------------------------------------------*/
@media (max-width:1800px){
    #page-header .mainheader #toppermenu .menu li .sub-menu{left: -420px;}
}

@media (max-width:1480px){

    #page-header .mainheader #toppermenu .menu li{margin:0;}
    /* #page-header .mainheader #toppermenu .menu li .sub-menu{left:-335px;} */


    #page-header .topheader{position:relative;z-index:9;}
    #page-header .mainheader #toppermenu{display:none;position: fixed;top: 0;right: 0;bottom: 0;left: 50%;background: var(--white);padding-top: 100px;overflow-y: scroll;overflow-x: hidden;align-content: start;}
    #page-header .mainheader #toppermenu.active{display:block;}

    #page-header #menubuttonburger{display: block;}

    #page-header .mainheader #toppermenu .menu{padding-top: 30px;}
    #page-header .mainheader #toppermenu .menu li{padding:10px 0;display: block;border-bottom: 1px solid #707070;width: 100%;text-align: right;position: relative;cursor: pointer;}
    #page-header .mainheader #toppermenu .menu > li a::before{display:none;}
    #page-header .mainheader #toppermenu .menu .sub-menu.smallSub{width:100%;left:0!important;}
    #page-header .mainheader #toppermenu .menu .sub-menu li{margin: 20px 0;padding-right: 0;border:none;}
    #page-header .mainheader #toppermenu .menu .sub-menu li:first-child{margin-top: 10px;}
    #page-header .mainheader #toppermenu .menu .sub-menu li .subline:last-child{margin-top: 5px;}
    #page-header .mainheader #toppermenu .menu .sub-menu li a{font-size: 130%;}
    #page-header .mainheader #toppermenu .menu li .maintopic{padding:10px 25px;width: 100%;display:block;text-align:left;font-size:125%;}
    #page-header .mainheader #toppermenu .menu li#sub .maintopic::after{content: '+';width: 20px;height: 20px;display: block;position: absolute;top: 10px;right: 10px;cursor: pointer;transition: 0.3s;font-size: 175%;font-weight: 300;line-height: 1;}
    #page-header .mainheader #toppermenu .menu li#sub.active .maintopic::after{content: '-';width: 20px;height: 20px;display: block;position: absolute;top: 4px;right: 10px;cursor: pointer;transition: 0.3s;font-size: 200%;font-weight: 300;line-height: 1;}
    #page-header .mainheader #toppermenu .menu li#sub .topic.simple::after{content: '+';width: 20px;height: 20px;display: block;position: absolute;top: 0px;right: 0px;cursor: pointer;transition: 0.3s;}
    #page-header .mainheader #toppermenu .menu li#sub .topic.simple.open::after{content: '-';width: 20px;height: 20px;display: block;position: absolute;top: 0px;right: 0px;cursor: pointer;transition: 0.3s;}
    #page-header .mainheader #toppermenu .menu li#notdienst{border:none;padding:20px 0;}
    #page-header .mainheader #toppermenu .menu li#notdienst .maintopic{width:90%;margin:0 auto;}
    #page-header .mainheader #toppermenu .menu li .sub-menu{padding: 30px;padding-right: 0;padding-bottom: 0;padding-top: 0;margin-top: 25px;width:100%;left:0!important;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .sub-menu{margin-top: 0px;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .subsub-menu{padding-right: 30px;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .col-sm-6{margin-bottom: 0;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .col-sm-6.subsub-menu{display: none;}
    #page-header .mainheader #toppermenu .menu li .sub-menu li a{color: #707070;}
    #page-header .mainheader #toppermenu .menu li .sub-menu li a:hover{color: #0082b9;transition: all .3s ease;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .headline{color: #707070;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .headline:hover{color: #0082b9;transition: all .3s ease;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .subline{display: none!important;}
    #page-header .mainheader #toppermenu .menu li:hover .sub-menu{display: none;}
    #page-header .mainheader #toppermenu .menu li.nonactive .sub-menu{display:none;background: none;box-shadow: none;overflow: visible;max-height: unset;position: relative;padding-right:30px;}
    #page-header .mainheader #toppermenu .menu li.active .sub-menu{display:block;background: none;box-shadow: none;overflow: visible;max-height: unset;position: relative;padding-right:30px;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .headline{width: 100%;text-align: right;margin-top: 10px;font-size: 90%;padding-right: 15px;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .topic{padding-right: 15px;cursor: pointer;}
    #page-header .mainheader #toppermenu .menu li .leistungen-uebersicht .sub-menu .topic.simple::after{content: '+';width: 20px;height: 20px;display: block;position: absolute;top: 0px;right: 0px;cursor: pointer;font-weight: 300;}
    #page-header .mainheader #toppermenu .menu li .leistungen-uebersicht .sub-menu .topic.shown::after{content: '-';width: 20px;height: 20px;display: block;position: absolute;top: 0px;right: 0px;cursor: pointer;font-weight: 300;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .col-sm-6{max-width: 100%;flex: 0 0 100%;text-align: right;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .col-sm-6 .row{margin-right: 0;}
    #page-header .mainheader #toppermenu .menu li .sub-menu ul{padding-right: 0;padding-top: 0;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul li{margin-left: 0;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul li a{max-width: 100%;font-weight: 300;padding-right:50px;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul li a::after{right:15px;content: '';display: block;width: 15px;height: 10px;background: url('../media/right-arrow.webp');background-size: 100%;background-position: center;background-repeat: no-repeat;position: absolute;top:17.5px;left: unset;}
    #page-header .mainheader #toppermenu .menu li img{float:right;margin-right:0;margin-left:15px;margin-right:30px;}
    #page-header .mainheader #toppermenu .menu li .sub-menu li .subline{max-width: 100%;font-size: 60%;}
    #page-header .mainheader #toppermenu .menu li .leistungen .sub-menu{min-width: unset;max-width:100%;}

    #page-header .mainheader #toppermenu .menu .sub-menu .nav-pills.disable{display:none;}
    #page-header .mainheader #toppermenu .menu .sub-menu .nav-pills{display:block;}

    #page-header .mainheader #toppermenu .menu li.nonactive .sub-menu{padding:0;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tabblock{display:block;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .nav{width:100%;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link{text-align:right;font-size:125%;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link img{margin-top:7.5px;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link::after{top:35px;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content{width: 100%;position: absolute;top: 0;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane{padding:0;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul{background:#fff;padding-top:5px;display:none;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane.acitve ul{display:block;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul li, #page-header .navigation #toppermenu .menu .sub-menu .tab-content .tab-pane ul.withimage li{width:100%;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul li::before{display:none;}

    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content, #page-header .navigation #toppermenu .menu .sub-menu .tab-content .tab-pane{position:unset;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .nav .nav-link.active, #page-header .navigation #toppermenu .menu .sub-menu .nav .nav-link:hover{background:none;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane ul.withimage, #page-header .navigation #toppermenu .menu .sub-menu .tab-content .tab-pane ul{width:100%;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane.open ul{display:block;margin-top:0;padding-top:0;padding-left:0;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileheadernav{display:flex;background: var(--main);color: var(--white);padding:10px;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileheadernav img{display:block;margin-top:0;margin-left:25px;width:35px;height:40px;padding:0;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileheadernav.nomobile{display:none;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileclose{display:block;color:  var(--white);font-weight: 600;font-size: 100%;padding-left:25px;width: 25%;position:relative;margin-top:-2px;align-content:center;}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .mobileclose:before{content: '';display: block;width: 15px;height: 10px;background: url('../media/right-arrow-white.png');background-size: 100%;background-position: center;background-repeat: no-repeat;position: absolute;left:0;top: 16px;transform:rotate(180deg)}
    #page-header .mainheader #toppermenu .menu li .sub-menu .tab-content .tab-pane .headline{padding:0;width: 75%;margin:0;color: var(--white);font-size:125%;min-height:auto;align-content: center;}
 
    #page-header.bottom .logo img{max-width:100%;}


    .flx_seitenteaser .item.hintergrundbild::before{top: 15px; bottom: 15px;}

    .flx_textblock.mitbildrechts .bild, .flx_textblock.mitbildlinks .bild{padding-bottom:125px!important;}
    .flx_textblock.mitkalkulator .kalkulator{margin-top:0;}

    .flx_seitenteaser .col-lg-4{margin-bottom:30px;}
    .flx_seitenteaser .item{margin:0;height:100%;}

    .flx_kontaktblock.mitbild .wrapper .bildinner{padding:0 15px;}

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


    .inhaltsbloecke{margin-top:115px;}
    div[class^="flx_"], div[class*="flx_"]{padding:35px 0;}

    .headline{font-size:225%;}



    .flx_headerblock{margin-bottom:35px!important;}

    .flx_textblock.mitbildrechts .bild, .flx_textblock.mitbildlinks .bild{padding-bottom:0!important;}
    .flx_textblock.mitbildlinks .inner .secondimage, .flx_textblock.mitbildrechts .inner .secondimage{position: unset;margin-top: 30px;width: auto;height: auto;object-fit: unset;}

    .flx_kontaktblock.mitbild .wrapper .bildinner img{border-bottom-left-radius: 0;border-top-right-radius:20px;}

    .flx_seitenteaser .item{padding:25px;}
    .flx_seitenteaser .headerbox .inhalt{max-width:100%;}

    .flx_downloadblock .item a img{width:10%;}
    .flx_downloadblock .item a .beschreibung{width:85%;}

    .flx_faqblock .textwrapper{padding-right:50px;}
    .flx_faqblock .accordionwrapper .accordion .accordion-item .accordion-header{font-size:110%;line-height:1.3;}
    .flx_faqblock .accordionwrapper .accordion .accordion-item .accordion-header .accordion-button{padding-right:75px;}


    .flx_blogteaser.alsslider .item{padding:55px;}
    .flx_blogteaser.alsslider .slider .owl-nav .owl-prev{left:15px;}
    .flx_blogteaser.alsslider .slider .owl-nav .owl-next{right:15px;}
    .flx_blogteaser.alsslider .slider .owl-nav button{z-index:5;}

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

    #page-header .topheader a{margin-left: 15px;}
    #page-header #menubuttonburger{position:absolute;top:-40px;right:15px;z-index:999;height:35px;}

    .flx_textblock .leer{display:none;}

    .flx_seitenteaser .row{justify-content:center;}

    .flx_blogteaser.alsslider{padding:45px 0;}
    .flx_blogteaser.alsslider>.container>.headerbox{max-width:100%;}
    .flx_blogteaser.alsslider .slider{margin-top:40px;}
    .flx_blogteaser.alsslider .item{padding:40px;border-radius:18px;}
    .flx_blogteaser.alsslider .item .inner{gap:15px;}
    .flx_blogteaser.alsslider .item .inner .icon{width:50px;max-width:50px;height:50px;max-height:50px;flex:0 0 50px;}
    .flx_blogteaser.alsslider .item .inner .headerbox .headline{font-size:120%;line-height:1.3;}
    .flx_blogteaser.alsslider .item .inhalt{margin:20px 0;}
    .flx_blogteaser.alsslider .slider .owl-nav .owl-prev{left:10px;width:25px;height:40px;background-size:25px auto;}
    .flx_blogteaser.alsslider .slider .owl-nav .owl-next{right:10px;width:25px;height:40px;background-size:25px auto;}
    .flx_blogteaser.alsslider .slider .owl-dots{margin-top:15px;}

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

    .inhaltsbloecke {margin-top: 135px;}

    #popup .popup__headline{font-size: 1.5rem;}

    .btn.freibad, .btn.wasser, .btn.strom, .btn.gas, .btn.abwasser, .btn.gaertnerei, .btn.strassenbau{margin:10px 5px 10px 0;padding:10px 25px 10px 45px}

    #page-header .mainheader #toppermenu{left:35%;}
    #page-header .topheader .search{display: none;}
    #page-header .topheader a{margin-left: 15px;}
    #page-header .topheader a .dashicons-admin-users{line-height: 1.2!important;}

    #page-header .mainheader #toppermenu .menu li#notdienst .notdienst-mobile{display: block;}
    #page-header .mainheader #toppermenu .search{display: block;}

    #page-header .notdienst-desktop {display: none!important;}
    #page-header .notdienst-mobile {display: block;}

    .flx_textblock .text{order:1;margin-bottom:30px;}
    .flx_textblock .bild, .flx_textblock .kalkulator{order:2;}

    .flx_kontaktblock.mitbild .wrapper .textinner{order:1;}
    .flx_kontaktblock.mitbild .wrapper .bildinner{order:2;}
    .flx_kontaktblock.mitbild .wrapper .bildinner img{border-bottom-left-radius:20px;border-top-right-radius:0px;border-bottom-right-radius:20px;border-top-left-radius:0px;}

    .flx_tabellenblock .tabelle table th{padding:15px;font-size:150%;}
    .flx_tabellenblock .tabelle table td{padding:15px;}

    .flx_blogteaser.alsslider{padding:40px 0;}
    .flx_blogteaser.alsslider .slider{margin-top:30px;}
    .flx_blogteaser.alsslider .slider .owl-stage{align-items:stretch;}
    .flx_blogteaser.alsslider .slider .owl-item{height:auto;}
    .flx_blogteaser.alsslider .slider .owl-item>div{height:100%;}
    .flx_blogteaser.alsslider .item{height:100%;padding:30px;margin:10px 0;border-radius:15px;}
    .flx_blogteaser.alsslider .item .inner{align-items:flex-start;gap:12px;}
    .flx_blogteaser.alsslider .item .inner .icon{width:45px;max-width:45px;height:45px;max-height:45px;flex:0 0 45px;}
    .flx_blogteaser.alsslider .item .inner .headerbox{flex:1;min-width:0;}
    .flx_blogteaser.alsslider .item .inner .headerbox .date{display:block;font-size:14px;line-height:1.4;}
    .flx_blogteaser.alsslider .item .inner .headerbox .headline{display:block;margin:3px 0 0;font-size:115%;line-height:1.3;overflow-wrap:anywhere;}
    .flx_blogteaser.alsslider .item .inhalt{margin:20px 0;}
    .flx_blogteaser.alsslider .item .inhalt p:last-child{margin-bottom:0;}
    .flx_blogteaser.alsslider .slider .owl-nav{display:none;}
    .flx_blogteaser.alsslider .slider .owl-dots{margin-top:15px;gap:8px;}
    .flx_blogteaser.alsslider .slider .owl-dots .owl-dot{width:8px;height:8px;}
    .flx_blogteaser.alsslider .slider .owl-dots .owl-dot.active{width:12px;height:12px;}

    #page-footer .bottom .copyright span:first-child{display:block;width:100%;}
    #page-footer .bottom .copyright span:nth-child(2){display:none;}

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

    .inhaltsbloecke {margin-top: 160px;}

    #page-header .mainheader #toppermenu{left:0;}

    .flx_blogteaser .item{padding:25px;}

    .flx_headerblock.mitbild img.bg{min-height: 200px; object-fit: cover;}

    .flx_tabellenblock .tabelle{overflow-x:scroll;}
    .flx_tabellenblock .tabelle table th{padding:10px;font-size:100%;}
    .flx_tabellenblock .tabelle table td{padding:10px;}

    .flx_faqblock .accordionwrapper .accordion .accordion-item .accordion-header .accordion-button{padding-right:40px;}
    .flx_faqblock .accordionwrapper .accordion .accordion-item .accordion-header::after, .flx_faqblock .accordionwrapper .accordion .accordion-item.is-open .accordion-header::after{width:30px;height:30px;right:5px;}

    .flx_blogteaser.alsslider{padding:30px 0;}
    .flx_blogteaser.alsslider>.container>.headerbox{text-align:left;}
    .flx_blogteaser.alsslider .slider{margin-top:25px;}
    .flx_blogteaser.alsslider .item{padding:25px 20px;margin:5px 0;border-radius:12px;}
    .flx_blogteaser.alsslider .item .inner{flex-direction:column;gap:12px;}
    .flx_blogteaser.alsslider .item .inner .icon{width:42px;max-width:42px;height:42px;max-height:42px;flex:0 0 42px;}
    .flx_blogteaser.alsslider .item .inner .headerbox{width:100%;}
    .flx_blogteaser.alsslider .item .inner .headerbox .date{font-size:13px;}
    .flx_blogteaser.alsslider .item .inner .headerbox .headline{font-size:110%;line-height:1.3;}
    .flx_blogteaser.alsslider .item .inhalt{margin:18px 0;font-size:15px;line-height:1.6;}
    .flx_blogteaser.alsslider .item .btn.light{align-self:flex-start;}
    .flx_blogteaser.alsslider .slider .owl-dots{margin-top:12px;}

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

    #page-header .topheader{text-align:center;}
    #page-header .topheader a{margin-left:5px;margin-right:5px;}
    
    #page-header .logo img{max-width:70%;}
    #page-header.bottom .logo img{max-width:70%;}

    #page-header .mainheader #toppermenu .menu li .maintopic{padding:10px 15px;}
    #page-header .mainheader #toppermenu .menu li.active .sub-menu{padding:30px 15px;}

}