header img{cursor:pointer;}
header .headerlogo img {
  max-height: calc(50px);
  width: auto;transition:all .5s;
}
header:hover .headerlogo img {
    max-height: 80px;
}
#header {
  background: var(--dunkelgrau);
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: var(--header_height);
  z-index: 100001;
  padding: 1rem;
  display: flex;
    transition:height .75s;
}

#header li span{
    opacity:0;
    transition:opacity 1s;
}
@media (min-width:769px){
    #header:hover {
        height: calc(var(--header_height) + 40px);
    }
}
#header:hover li span{
    opacity:1;
    text-align: center;
    transition:opacity 1s;
}
#holder{
    transition:height 1s;
}
.headerhover #logo{
    margin-top:-40px;
}

.headerhover .page-link.menusuchetrigger.showmenusearch,
#header:hover .page-link.menusuchetrigger.showmenusearch {
    /*top: -2rem;*/
}
.headerhover #holder{
    height:1080px;
    transition:margin-top .5s;
    margin-top:-40px;
}
#header .headerlogo {
  width: 100%;
}
#header .headerlogo {
    width: 100%;
    vertical-align: middle;
    align-items: center;
    display: flex;
}
#header .menu {
  width: 100%;
}

.menu_inner a img {
    height: 30px;
    /*margin-right: 5px;*/
    transition: all .5s;
}

.headerhover .menu_inner a img ,
#header:hover .menu_inner a img {
    height: 40px;
    /*margin-right: 5px;*/
}
.menu_inner {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
#header{font-size:16px;}
.menu_inner a span {
    display: block;
}
.smallmenulink{font-size:14px;}
.page-link.smallmenulink {
    line-height: 10px;
    margin: 0 1rem;
    margin-top: -.75rem;
}
.page-link.smallmenulink{pointer-events:none ;}
.page-link.smallmenulink span{pointer-events:all;}
.page-link.smallmenulink.mright{margin-right:2rem}
.page-link:not(.smallmenulink) span{transition:all 0s;opacity:0;
    word-break: keep-all;
    white-space: pre;}
.headerhover .page-link:not(.smallmenulink) span  , #header:hover
.page-link:not(.smallmenulink) span {
    opacity: 1;/*transition:all .5s;*/transition:opacity .5s ease .25s;
}
.menu.desktop .showmenusearch .menu-suche::after {
    content: "";
    color: var(--schwarz);
    position: absolute;
    display: block;
    right: 0rem;
    z-index: 999;
    width: 2rem;
    height: 2rem;
    top: 2px;
    background-image: url(/assets/icon/icon-suche-schliessen.svg);
    background-size: 0.7rem;
    background-repeat: no-repeat;
    background-position: center;
}
.contentActive.hoverleftstate1 #left,
.contentActive.hovertopstate1 #top,
.contentActive.hoverrightstate1 #right,
.contentActive.hoverbottomstate1 #bottom{
    transition: all .5s;
}
.contentActive.hovertop #top,
.contentActive.hoverleft #left,
.contentActive.hoverright #right,
.contentActive.hoverbottom #bottom{
    transition: all .5s;
}

.headerhover .smallmenulink, #header:hover .smallmenulink{
    font-size:16px;

}
.headerhover .menu_inner, #header:hover .menuinner {
  /*  align-items:  baseline;*/
}
header img.stateactive {
    opacity: 1;
}
.page-link img {
    transition: opacity 1.9s , height .75s ,width .75s ,margin 0s ,padding 0s !important; display: inline-block !important;opacity:0;
}
#header .menu .page-link img.statenonactive {
 transition: filter .55s, height .75s,width .75s,margin 0s,padding 0s !important;
}
#header .menu .page-link:hover img.statenonactive {
    display: inline-block !important;
    opacity:1;max-height:inherit;margin:0;transition: filter .55s, height .75s,width .75s,margin 0s,padding 0s !important;

    filter: none;
}
.page-link:hover .stateactive {
    display: inline-block !important;
    opacity:1;max-height:0;transition: opacity .55s, height .75s,width .75s,margin 0s,padding 0s !important;
}
.menu_inner a {
  flex-basis: auto;
  line-height: 40px;
  margin: 0 0rem;
  color: var(--weiss);
  text-decoration: none;
    transition: all .5s;
}

.headerhover .menu_inner a ,
#header:hover .menu_inner a {
    line-height: 40px;
    margin: 0 1rem;
}

.menu_inner a:hover{
  color: var(--gelb);
}






#menu_toggle img {
  width: 60px;
  height: 60px;
}
#menu_toggle .close {
  display:none
}

#menu_toggle.active .close {
  display:block;
}
#menu_toggle.active .burger {
  display:none;
}
.page-link {
    text-align: center;
}

.menu .menu_inner .statenonactive{opacity:1;filter: grayscale(1) brightness(1.2);}
.menu .menu_inner .stateactive{opacity:0;max-height:0;}
.menu .menu_inner .activemenu .statenonactive{display:inline-block;opacity:1;max-height:inherit;}
.menu .menu_inner .activemenu .stateactive{opacity:0;max-height:0;}
.menu_inner .activemenu span,
.menu_inner a.activemenu{
    color:var(--gelb);
}

.menu .menu_inner .activemenu .statenonactive{
    filter: none;
}






/*
body:not(.left):not(.right):not(.top):not(.bottom):not(.contentActive) #header .headerlogo{
    display: none;
}*/




.desktop{
	display:block;
}
.tablet{
	display:block;
}
.mobil{
	display:block;
}
.miniholder {display:none;}
.bigholder {display:block;}
body.contentActive .bigholder {
    display: block !important;
    position: absolute;
    z-index: 10000;
    width: 100vw;
    height: calc(100vh - var(--header_height));
    background: transparent;
    overflow:hidden;
}
.bigholder > div::after {
    content: '';
    background: var(--gelb);
    width: 10rem;
    height: 10rem;
    position: absolute;
    border-radius: 2.5rem;
    transform: rotate(45deg);
    transition: all .75s, background .0s, transform 0s;
}
.bigholder > div {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: top, left, right, bottom, transform .5s;
}
.bigpostop::after {
    left: calc(50% - 5rem);
    top: -9rem;
}
.bigposbottom::after {
    left: calc(50% - 5rem);
    bottom: -9rem;
}
.bigposleft::after {
    top: calc(50% - 5rem - (var(--header_height) / 6));
    left: -9rem;
}
.bigposright::after {
    top: calc(50% - 5rem - (var(--header_height) / 6));
    right: -9rem;
}

.bigpostop{transform:scaleX(calc(1.2 * var(--XSCALE))) scaleY(calc(1 * var(--YSCALE)));transform-origin: top center 0px;}
.bigposbottom{transform:scaleX(calc(1.2 * var(--XSCALE)))  scaleY(calc(1 * var(--YSCALE)));;transform-origin: bottom center 0px;}
.bigposleft{transform:scaleY(calc(1.2 * var(--YSCALE)))  scaleX(calc(1 * var(--XSCALE)));;transform-origin: left center 0px;}
.bigposright{transform:scaleY(calc(1.2 * var(--YSCALE))) scaleX(calc(1 * var(--XSCALE)));;transform-origin: right center 0px;}

.hoverrightstate1 .bigposright {
    transform: scaleY(calc(2 * var(--YSCALE))) scaleX(2);
}
.hoverleftstate1 .bigposleft {
    transform: scaleY(calc(2 * var(--YSCALE))) scaleX(2);
}

.hovertopstate1 .bigpostop {
    transform: scaleX(calc(2 * var(--XSCALE))) scaleY(2);
}
.hoverbottomstate1 .bigposbottom {
    transform: scaleX(calc(2 * var(--XSCALE))) scaleY(2);
}
.topactive .bigpostop:after{
    background:var(--hellgrau);
}
.bottomactive .bigposbottom:after{
    background:var(--hellgrau);
}
.leftactive .bigposleft:after{
    background:var(--hellgrau);
}
.rightactive .bigposright:after{
    background:var(--hellgrau);
}

.hoverright .bigposright {
    transform: scaleY(calc(0 * var(--YSCALE))) scaleX(0);transition-delay: 500ms;
}
.hoverleft .bigposleft {
    transform: scaleY(calc(0 * var(--YSCALE))) scaleX(0);transition-delay: 500ms;
}
.hovertop .bigpostop {
    transform: scaleY(calc(0 * var(--YSCALE))) scaleX(0);transition-delay: 500ms;
}

.hoverbottom .bigposbottom {
    transform: scaleY(calc(0 * var(--YSCALE))) scaleX(0);transition-delay: 500ms;
}/*
.hoverbottom .bigposbottom:after {
    bottom:-18rem
}*/


.headerhover .bigposleft::after {
    top: calc(50% - 5rem - (var(--header_height) / 1.7));
}
.headerhover .bigposright::after {
    top: calc(50% - 5rem - (var(--header_height) / 1.7));
}
.headerhover .bigposbottom::after {
    bottom: -9rem;
}


.page-link:focus {
    color: #fff;
}







@media (max-width: 1px){
    .bigpostop{transform:scaleX(calc(3 * var(--XSCALE))) scaleY(calc(.5 * var(--YSCALE)));transform-origin: top center 0px;}
    .bigposbottom{transform:scaleX(calc(3 * var(--XSCALE)))  scaleY(calc(.5 * var(--YSCALE)));;transform-origin: bottom center 0px;}
    .bigposleft{transform:scaleY(calc(1 * var(--YSCALE)))  scaleX(calc(1.5 * var(--XSCALE)));;transform-origin: left center 0px;}
    .bigposright{transform:scaleY(calc(1 * var(--YSCALE))) scaleX(calc(1.5 * var(--XSCALE)));;transform-origin: right center 0px;}
    .hovertopstate1 .bigpostop {
        transform: scaleX(calc(6 * var(--XSCALE))) scaleY(1.5);
    }
    .hoverbottomstate1 .bigposbottom {
        transform: scaleX(calc(6 * var(--XSCALE))) scaleY(1.5);
    }
}

#RightMask path {
  /*  transform: scaleY(2) translateY(-25%) !important;*/
}


@media (min-width: 1px) and (max-width: 1180px) and (orientation: portrait) {
    .menu_inner a {
        margin: 0 .75rem;
    }
}
@media (min-width: 1px){
	.mobil{
		display:none;
	}
    .headerhover .menu_inner a, #header:hover .menu_inner a {
        margin-top: .25rem;
    }
}
@media (max-width: 1px){
    .contentActive.hovertop #top, .contentActive.hoverleft #left, .contentActive.hoverright #right, .contentActive.hoverbottom #bottom {
        transition: all .25s ease-out;
    }
    .bigholder > div::after {
        transition: all .5s, background .0s, transform 0s;
    }
    .bigholder > div {
        transition: top, left, right, bottom, transform .25s;
    }
	.desktop,.tablet{
		display:none;
	}

    .menu.mobil {
        display: flex;
        position:relative;
        align-items: baseline;
        justify-content: space-evenly;
    }
    #menu_toggle {
        text-align: right;
        width: 200%;
    }
    #menu_toggle.active img {
        display: block;
        float: right;
    }
    .menu_inner {
        display: none;
        justify-content: space-between;
        width: 100%;
    }
   .activeMobileMenu  .menu_inner {
        justify-content: left;
    }
    .menu.mobil  .menu_inner {
      display:flex;
    }
    .menu.mobil .menu_inner a{
        margin:0;
        width: 12vw;
        width: auto;
        text-align: center;
        pointer-events: none;
    }
    .contentActive .menu.mobil .menu_inner a {
        width: auto;
    }
    .headerhover .menu_inner a, #header:hover .menu_inner a {
        margin: 0;
    }
    .activeMobileMenu .menu.mobil.active .menu_inner  a span {
        display: inline;
    }
    .activeMobileMenu .menu.mobil.active .menu_inner a{
        margin:0 2rem;
        width: 100%;
        text-align: left;
        pointer-events: all;
        margin: 5px 0rem;
        line-height: 40px;
        flex-basis: 100%;
    }

    .headerhover.activeMobileMenu  .menu_inner a, .activeMobileMenu  #header:hover .menu_inner a {
        margin: 5px 0rem;
    }
    .activeMobileMenu .menu.mobil .menu_inner a{
        pointer-events: all;
    }

    .menu.mobil .page-link.menusuchetrigger {
        flex-basis: 1.5rem;
        line-height: 40px !important;
        /*margin-left: .5rem;*/
    }
    .headerhover .menu_inner .page-link.menusuchetrigger, #header:hover .menu_inner .page-link.menusuchetrigger {
        margin: 0px;
        /*margin-left: .5rem;*/
    }
    .contentActive .menu.mobil {
        min-width: calc(100% - 5rem);
    }
    body.activeMobileMenu .videooverlay_mobil_right ,
    body.activeMobileMenu .videooverlay_mobil_left ,
    body.activeMobileMenu .videooverlay_mobil_top ,
    body.activeMobileMenu .videooverlay_mobil_bottom {
        display:none !important;
    }
    .activeMobileMenu .menu.mobil .page-link.menusuchetrigger {
        flex-basis: 60px;
        line-height: 30px !important;
        margin-left: 0rem;
    }
    .activeMobileMenu #header .headerlogo{display:none}
    .activeMobileMenu #holder::after {
        content: '';
        width: 1000vw;
        height: 1000vh;
        background: var(--transparentoverlay);
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    .activeMobileMenu #holder .videooverlay_mobil_left,
    .activeMobileMenu #holder .videooverlay_mobil_right,
    .activeMobileMenu #holder .videooverlay_mobil_top,
    .activeMobileMenu #holder .videooverlay_mobil_bottom {
        overflow: visible !important;
        display: block;
        opacity: 1;
    }
    .activeMobileMenu #holder .videooverlay_mobil_left button,
    .activeMobileMenu #holder .videooverlay_mobil_right button,
    .activeMobileMenu #holder .videooverlay_mobil_top button,
    .activeMobileMenu #holder .videooverlay_mobil_bottom button {
        overflow: visible !important;
        display: none;
        opacity: 1;
    }
    .activeMobileMenu  .videooverlay_mobil_left {
        left: 40% !important;
        top: calc(80px - 3rem + 30vh) !important ;
        position: fixed !important;
        inset: none !important;
    }
    .activeMobileMenu  .videooverlay_mobil_right {
        left: 54% !important;
        top: calc(80px - 3rem + 30vh) !important ;
        position: fixed !important;
        inset: none !important;
    }
    .activeMobileMenu  .videooverlay_mobil_top {
        left: 46% !important;
        top: 12rem !important;
        position: fixed !important;
        inset: none !important;
        text-align: center;
    }
    .activeMobileMenu  .videooverlay_mobil_bottom {
        left: 46% !important;
        top: calc(80px - 1rem + 30vh) !important;
        position: fixed !important;
        inset: none !important;
        text-align: center;
    }
    .activeMobileMenu #top,
    .activeMobileMenu #bottom,
    .activeMobileMenu #left,
    .activeMobileMenu #right {
        background: var(--grau) !important;
    }
    .activeMobileMenu #top video,
    .activeMobileMenu #bottom video,
    .activeMobileMenu #left video,
    .activeMobileMenu #right video {
        opacity:0;
    }
    .activeMobileMenu.contentActive.buttonshow #top,
    .activeMobileMenu.contentActive.buttonshow #bottom,
    .activeMobileMenu.contentActive.buttonshow #left,
    .activeMobileMenu.contentActive.buttonshow #right {
        background: var(--grau);
    }
    .mobilelogo{display:none}
    .mobileclose{display:none}
    header .active .mobilelogo {
        margin-top: -1rem;
        margin-left: 0rem;
        margin-bottom: 2rem;
        display: inline-block;
        width: 20%;
    }
    .active .mobilelogo {
        margin-left: 2rem;
        margin-bottom: 0rem;
        display: inline-block;
        width: 3rem;
    }
    .active .mobileclose {
        position: absolute;
        right: 2rem;
        top: -1.5rem;
        display: block;
        cursor: pointer;
    }
    .videooverlay_mobil_left h1, .videooverlay_mobil_right h1 ,
    .videooverlay_mobil_top h1, .videooverlay_mobil_bottom h1 {
        font-size:42px;
    }
    .activeMobileMenu .videooverlay_mobil_left {
        width: 30vw;
    }
    .activeMobileMenu .videooverlay_mobil_right {
        width: 35vw;
    }
    .activeMobileMenu .videooverlay_mobil_top, .activeMobileMenu .videooverlay_mobil_bottom {
        width: 35vw;
    }
    .menuimgholder {
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    .activeMobileMenu .menuimgholder {
        width: 25%;
    }
    .activeMobileMenu .menusuchetrigger .menuimgholder {
        width: 20%;
        margin-left: 4%;
        margin-right: 1%;
    }
    header .headerlogo img {
        max-height: calc(40px);
        width: auto;
    }
    header:hover .headerlogo img {
        max-height: 40px;
    }
    .menu.mobil {
        display: flex;
    }
    .menu_inner a img {
        height: 30px;
        padding-right: 0rem;
    }
    .headerhover .menu_inner a img ,
    #header:hover .menu_inner a img {
        height: 30px;
    }
    .activeMobileMenu .menu_inner a img {
        padding-right: 0rem;
    }
    #menu_toggle img {
        width: 40px;
        height: 40px;
    }
    .menu_inner a{
        transition:none;
    }
    .menu.mobil.active .menu_inner {
        display: flex;
        position: relative;
        left: 0;
        bottom: 0px;
        width: 100vw;
        text-align: center;
        background: var(--dunkelgrau);
        /*min-height: var(--header_height);*/
        flex-flow: row wrap;
    }

    body:not(.nondesktop) .menu.mobil.active .menu_inner{
        /*bottom:140px;*/
    }
    body.activeMobileMenu .menu.mobil.active .menu_inner{
        width: calc(100vw + 2rem);
    }

    .menu_inner a {
        line-height: 40px;
    }
    .menu_inner a span {
        display:none
    }
    .menu.mobil .menu-suche{
        display: none;
    }
    .menu.mobil.active .menu-suche{
        display: inline-block;
    }
    form.menu-suche input {
        width: 100%;
    }
    body.activeMobileMenu {
        --header_height:calc(50vh + 80px);
    }
    body.activeMobileMenu #header {
        padding-top: 2rem;
    }
    .page-link {
        text-align: left;
    }


    body.activeMobileMenu #holder {display:none !important;opacity:0 !important;}
    body.activeMobileMenu .miniholder {display:block !important;}
    body.activeMobileMenu .bigholder {display:none !important;}
    /*body.contentActive .bigholder,.bigholder {display:none !important;}*/
    body .miniholder {
        height: 100vh;
        position: absolute;
        z-index: 100000;
        width: 100vw;
        display: block;
        opacity: 0;
        pointer-events:none;
    }

    body.activeMobileMenu .miniholder {
        display: block !important;
        position: absolute;
        z-index: 100000;
        width: 100vw;
        height: calc(100vh - var(--header_height));
        background: rgba(0,0,0,.9);
        overflow: hidden;
        transition: height .75s;
        opacity: 1;
        pointer-events:all;
    }
    body.activeMobileMenu.nondesktop .miniholder {
        /*height: calc(100vh - (var(--header_height) + 80px));*/
    }
    body.activeMobileMenu .miniholder h1{
        font-size: 20px;cursor: pointer;
        pointer-events: all !important;
    }
    .minipostop {
        width: 70%;
        position: absolute;
        top: 0;
        height: 25%;
        text-align: center;
        padding: 2rem;
        left:15%;
    }
    .miniposbottom {
        width: 70%;
        position: absolute;
        bottom: 2rem;
        height: 25%;
        text-align: center;
        padding: 2rem;
        left:15%;
    }
    .miniposleft {
        width: 50%;
        position: absolute;
        top: 25%;
        height: 50%;
        text-align: center;
        padding: 2rem;
    }
    .miniposright {
        width: 55%;
        position: absolute;
        top: 25%;
        height: 50%;
        text-align: center;
        padding: 2rem;
        right: 0;
    }
    body.activeMobileMenu .miniholder > div::after {
        content: '';
        background: var(--gelb);
        width: 5rem;
        height: 5rem;
        position: absolute;
        border-radius: 1.5rem;
        transform: rotate(45deg);
    }
    .minipostop::after {
        left: calc(50% - 2.5rem);
        top: -4rem;
    }
    .miniposbottom::after {
        left: calc(50% - 2.5rem);
        bottom: -6rem;
    }
    .miniposleft::after {
        top: calc(50% - 2.5rem);
        left: -4rem;
    }
    .miniposright::after {
        top: calc(50% - 2.5rem);
        right: -4rem;
    }
}
@media (max-width:2px){

    .nondesktop .bigposleft{top:20px;}
    .nondesktop .bigposright{top:20px;}


    body #header{
        padding-left:1.4rem;
        padding-right:1.4rem;
    }
    .miniholder > .miniposleft h1 {
        position: absolute;
        top: 33%;
    }
    .miniholder > .miniposright h1 {
        position: absolute;
        top: 33%;
        right: 20%;
    }
    .menu .menu_inner .page-link.menusuchetrigger:not(.activemenu) .stateactive{display:none !important;}
    .menu .menu_inner .page-link.menusuchetrigger.activemenu .stateactive{display:none !important;}
    .headerhover .menu_inner .page-link.menusuchetrigger, #header:hover .menu_inner .page-link.menusuchetrigger {
        /*margin: 0px 0px 0px 1rem;*/
    }
    .activeMobileMenu .headerhover .menu_inner .page-link.menusuchetrigger, .activeMobileMenu #header:hover .menu_inner .page-link.menusuchetrigger {
        margin: 0px 0px 0px 0rem;
    }
    body.contentActive.nondesktop .bigholder {
        max-height: calc(100vh - var(--header_height) * 2);
        overflow:hidden;
    }
    body.android.contentActive.nondesktop .bigholder {
        max-height: calc(100vh - var(--header_height) * 1);
        overflow:hidden;
    }
    /*body.nondesktop.android .bigholder .bigposbottom::after {
        bottom: -5rem;
    }*/
    body.activeMobileMenu .menu.mobil {
        top: 1rem;
    }
    body.activeMobileMenu.nondesktop .menu.mobil {
        top: 1rem;
    }
    body.activeMobileMenu .page-link.menusuchetrigger {
        margin-top: 1rem !important;
    }
    header .active .mobileclose {
        position: absolute;
        right: 0rem;
        top: -1rem;
        display: block;
        cursor: pointer;
    }

    header .active .mobileclose img {width:1rem;height:1rem;}
    .videooverlay_mobil_left h1, .videooverlay_mobil_right h1, .videooverlay_mobil_top h1, .videooverlay_mobil_bottom h1 {
        font-size: 38px;
        line-height: 38px;
    }
    a.page-link.menusuchetrigger {
        /*margin-top: 0.5rem !important;*/
    }
    .activeMobileMenu .menuimgholder {
        width: 3rem;
        margin-right: 1rem;
    }
    .activeMobileMenu .menusuchetrigger .menuimgholder {
        width: 1rem;
        margin-left: 4%;
        margin-right: 2rem;
    }
    .videooverlay_mobil_bottom button, .videooverlay_mobil_top button, .videooverlay_mobil_right button, .videooverlay_mobil_left button{
        width:auto;
    }
}
@media (max-width:4px){
    body.activeMobileMenu .miniholder h1{
        font-size: 20px;
    }
}
 body.contentActive.ipad .bigholder {
    max-height: calc(100vh - var(--header_height) * 1.5);overflow:hidden;
}