@charset "utf-8";
/* CSS Document */



@media (min-width: 1200px){    
    #primary-navigation.border-only-mobile li{
        border-right: none;
    }
    #primary-navigation li a{
        transition: all 0.3s;
    }
    .toggle-subemenu{
        display: none;   
    }
    .toggle-menu {
        display: none;
    }    
    #primary-navigation ul{
          align-items: flex-end;
    }
    #primary-navigation{
        display: block !important;
    }
    #primary-navigation li.menu-item-has-children > a:after{
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        display: inline-block;
        content: '';
        transform: translateY(-50%);
        -webkit-mask: url(../images/angle-arrow-down.svg) no-repeat 50% 50%;
        mask: url(../images/angle-arrow-down.svg) no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
    
    
    /* Ebene 2*/
    #primary-navigation .sub-menu {
        position: absolute;
        line-height: 105%;
        z-index: 1000;
        z-index: 10;
    }
    #primary-navigation li:hover > .sub-menu {
        display: block;
    } 
    #primary-navigation .sub-menu .sub-menu {
        position: absolute;
        line-height: 105%;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        top: 0px;
        left: 100%;
        display: none;
        z-index: 9;
    }

    #primary-navigation .sub-menu li{
        margin-left: 0;   
        display: block;
        width: 100%;
        position: relative;
    }
    #primary-navigation  .sub-menu li a {
        position: relative;
        padding: 15px 20px;
        display: block;
    }
    #primary-navigation .sub-menu li.menu-item-has-children > a:after{
        position: absolute;
         width: 12px;
        height: 12px;
        top: 50%;
        display: inline-block;
        content: '';
        transform: translateY(-50%);
        -webkit-mask: url(../images/arrow-sub.svg) no-repeat 50% 50%;
        mask: url(../images/arrow-sub.svg) no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
    #primary-navigation li:hover .sub-menu {
        animation: submenu 0.1s ease-in;
    }
    #primary-navigation .sub-menu li a img {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 50px;
        hegiht: auto;
        padding: 10px;
        top: 10px;
    }
    #primary-navigation .sub-menu li.menu-item-has-children:hover .sub-menu {
        display: block;
        animation: none;
    }
    #primary-navigation{
        position: absolute;
        right: 0px;
        bottom: 0px;
        max-width: calc(100% - 200px);
    }
    #primary-navigation .menu-mainmenu-container{
        display: inline-block;
    }
    #primary-navigation ul{
        display: flex;
        flex-wrap: wrap;   
        text-align: left;    
    }




    #primary-navigation li li {
        position: relative;
    }

}

@media (max-width: 1200px){
    
    #logo{
        position: absolute;
        height: 50px;
        width: 200px;
    }
    #logo img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: left center;
        padding: 10px;
    }
    
    
    #primary-navigation li a{
        padding-top: 25px;
    }
    
    #primary-navigation{
        clear: both;
        display: none;
    }
    
    #masthead.scrolled{
        position: relative;
        top: 0px;
        width: 100%;
        height: auto;
        opacity: 0.9;
    }
    #logo{
		height: 50px;
        top: 0px;
        left: 5px;
	}
    #masthead{
        top: 0;
        min-height: 50px;
        height: auto;
    }
    #masthead .header-content{
        min-height: 50px;
        height: auto;
    }
    #socialmedia-box{
        right: 60px;
        top: 10px;
    }
    
    
    
    
    #primary-navigation .menu-mainmenu-container{
        display: block;
        width: 100%;
    }
    
    .toggle-menu{
        display: block;
		width: 50px;
		height: 50px;
        right: 0px;
        float: right;
        clear: both;
        position: relative;
    }
	.toggle-menu .toggle-icon{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: inline-block;
        width:  25px;
        height: 25px;
        -webkit-mask: url("../images/nav-toggle.svg") no-repeat 100% 100%;
        mask: url("../images/nav-toggle.svg") no-repeat 100% 100%;
        -webkit-mask-size: contain;
        mask-size: contain;
	}
    .toggle-subemenu:after{
		content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: inline-block;
        width:  25px;
        height: 25px;
        -webkit-mask: url("../images/plus.svg") no-repeat 100% 100%;
        mask: url("../images/plus.svg") no-repeat 100% 100%;
        -webkit-mask-size: contain;
        mask-size: contain;
	}
    .toggle-subemenu.active:after{
		content: "";
        display: inline-block;
        width:  28px;
        height: 23px;
        -webkit-mask: url("../images/minus.svg") no-repeat 100% 100%;
        mask: url("../images/minus.svg") no-repeat 100% 100%;
        -webkit-mask-size: contain;
        mask-size: contain;
	}

    
    #primary-navigation li.menu-item-has-children {
        display: grid;
        grid-template-columns: 1fr 50px;
    }
    #primary-navigation li.menu-item-has-children a:first-child{
        grid-column: 1 / 2;
    }
    #primary-navigation li.menu-item-has-children div.toggle-subemenu{
        grid-column: 2 / 3;
        position: relative;
    }
    #primary-navigation li.menu-item-has-children ul.sub-menu{
        grid-column: 1 / 3;
    }
    
}


@media (max-width: 1024px){
    
    .text-mit-bild-box .above-text-tablet .image{
        order: 1;
    }
    .text-mit-bild-box .above-text-tablet .text{
        order: 2;
    }
    .text-mit-bild-box .under-text-tablet .image{
        order: 2;
    }
    .text-mit-bild-box .under-text-tablet .text{
        order: 1;
    }

 
    .text-mit-bild-box .under-text-tablet .text,
    .text-mit-bild-box .above-text-tablet .text{
        width: 100% !important;
    }
    .text-mit-bild-box .under-text-tablet .image,
    .text-mit-bild-box .above-text-tablet .image{
        width: 100% !important;
        position: relative;
    }
    .text-mit-bild-box .under-text-tablet .image img,
    .text-mit-bild-box .above-text-tablet .image img{
        position: relative;
    }
    
    section{
        position: relative;
    }
    .gridgalerie-box ul{
        grid-auto-rows: minmax(25vh, auto)
    }
    .spacer5  { height: 2.5px; }
    .spacer10 { height: 5px; }
    .spacer15 { height: 7.5px; }
    .spacer20 { height: 10px; }
    .spacer25 { height: 12.5px; }
    .spacer30 { height: 15px; }
    .spacer35 { height: 17px; }
    .spacer40 { height: 20px; }
    .spacer45 { height: 22px; }
    .spacer50 { height: 25px; }
    .spacer55 { height: 27px; }
    .spacer60 { height: 30px; }
    .spacer65 { height: 32px; }
    .spacer70 { height: 35px; }
    .spacer75 { height: 37px; }
    .spacer80 { height: 40px; }
    .spacer85 { height: 42px; }
    .spacer90 { height: 45px; }
    .spacer100 { height: 50px; }
    .spacer110 { height: 55px; }
    .spacer120 { height: 60px; }
    .spacer130 { height: 65px; }
    .spacer140 { height: 70px; }
    .spacer150 { height: 75px; }
    .spacer160 { height: 80px; }
    .spacer170 { height: 85px; }
    .spacer180 { height: 90px; }
    .spacer190 { height: 95px; }
    .spacer200 { height: 100px; }
    .spacer210 { height: 105px; }
    .spacer220 { height: 110px; }
    .spacer230 { height: 115px; }
    .spacer240 { height: 120px; }
    .spacer250 { height: 125px; }
    .spacer300 { height: 150px; }
    .spacer350 { height: 175px; }
    .spacer400 { height: 200px; }
    .spacer450 { height: 225px; }
    .spacer500 { height: 250px; }
    .spacer550 { height: 275px; }
    .spacer600 { height: 300px; }
    .spacer650 { height: 325px; }
    .spacer700 { height: 350px; }
    
    .height5{ height: 5px; }
    .height10{ height: 5px; }
    .height20{ height: 10px; }
    .height30{ height: 15px; }
    .height40{ height: 20px; }
    .height50{ height: 25px; }
    .height60{ height: 30px; }
    .height70{ height: 35px; }
    .height80{ height: 40px; }
    .height90{ height: 45px; }
    .height100{ height: 50px; }
    .height110{ height: 55px; }
    .height120{ height: 60px; }
    .height130{ height: 65px; }
    .height140{ height: 70px; }
    .height150{ height: 75px; }
    .height160{ height: 80px; }
    .height170{ height: 85px; }
    .height180{ height: 90px; }
    .height190{ height: 95px; }
    .height200{ height: 100px; }
    .height210{ height: 105px; }
    .height220{ height: 110px; }
    .height230{ height: 115px; }
    .height240{ height: 120px; }
    .height250{ height: 125px; }


}

@media (min-width: 1024px) {   
    .hide-desktop{
        display: none;
    }
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
        
    .hide-tablet{
        display: none;
    }
}
@media screen and (max-width: 768px) {
    .hide-handy{
        display: none;
    }
}

@media (max-width: 768px){
    
    .text-mit-bild-box .above-text-handy .image{
        order: 1;
    }
    .text-mit-bild-box .above-text-handy .text{
        order: 2;
    }
    .text-mit-bild-box .under-text-handy .image{
        order: 2;
    }
    .text-mit-bild-box .under-text-handy .text{
        order: 1;
    }
    
    .text-mit-bild-box .under-text-handy .text,
    .text-mit-bild-box .above-text-handy .text{
        width: 100% !important;
    }
    .text-mit-bild-box .under-text-handy .image,
    .text-mit-bild-box .above-text-handy .image{
        width: 100% !important;
        position: relative;
    }
    .text-mit-bild-box .under-text-handy .image img,
    .text-mit-bild-box .above-text-handy .image img{
        position: relative;
    }
    

    
    #logo{
        width: 80px;
    }
    #socialmedia-box{
        top: 10px;
    }
    #socialmedia-box svg{
        width: 25px;
        height: 25px;
    }

    .section-content{
        padding-left:   10px;
        padding-right: 10px;
    }
    .cfullwidth{
        margin-left: -10px;
        margin-right: -10px;
    }
}