:root {
		--brand-blue: #1056A0; 
		--brand-blue2:  #4078B3; 

		--brand-midblue:  #CADBEF;
		--brand-lightblue: #E6EEF5;
		
		--brand-spendenblue: #A9C2DD;
		
		--brand-red: #C30D42;
		
		--brand-midred: #EDB6C6;
		--brand-lightred: #F8E4EA;
		--brand-black: #000000;

 
}



#openmenu {
text-indent: -9999px;
position: fixed;
position: absolute;

z-index:1000;
right: 20px;
top:50px;
width: 49px;
height: 49px;
 
background-color: var(--brand-midblue);
/*box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.1), 1px 1px 2px rgba(0, 0, 0, 0.2);*/
border-radius: 25px;
background-repeat:no-repeat;
background-size:24px auto ;
background-position:  center;
background-image:  url('../images/openmenu.svg');
transition:none; 
cursor:pointer;

}


.menuopened #openmenu {background-image:  url('../images/closemenu.svg');background-size:16px auto ;}


 #openspenden{

position: fixed;
position: absolute;
z-index:1000;
right: 90px;
top:50px;
width: 49px;
height: 49px;

}

#openspenden a {display:block; 
text-indent: -9999px;
width: 49px;
height: 49px;
background-color: var(--brand-midblue);
border-radius: 25px;
background-repeat:no-repeat;
background-size:30px auto ;
background-position:  center;
background-image:  url('../images/donation.svg');
transition:none; }
 
#mainmenu {position:fixed; top: 0; 
left: -80vw;  left: -300px;  
 transition: all 0.5s ease-in-out;
 
height: 100vh; width: 80vw;width: 300px;

background: #fff; z-index:1000;

padding: 200px 20px 20px 20px;
padding: 150px 20px 20px 20px;

/*background-image:url('../images/LogoMobile2.svg');
background-repeat:no-repeat;
background-size:  auto 29px;
  background-position: left 80px top 60px;*/
  
   

background-image:url('../images/LogoMobile.svg'),url('../images/LogoMobile2.svg');
background-repeat:no-repeat,no-repeat;
background-size: 49px auto, auto 29px;
  background-position: left 20px top 50px , left 80px top 60px;
  /*
  background-position:   left 20px top 22px , left 80px top 32px;*/

 overflow:auto;
}

#mainmenu.opened {left: 0; box-shadow: 4px 4px 4px 0px #00000026;
}




#mainmenu ul.level2   {display:none;  
-webkit-transition: all 250ms ease-in;

-ms-transition: all 250ms ease-in;

-moz-transition: all 250ms ease-in;

transition: all 250ms ease-in;

 padding: 0px 0px 20px 0px; margin: 0;}

#mainmenu ul.level2.opened {  display:block; width: auto; 
padding: 10px 20px 0px  20px; list-style-type:none; }


#mainmenu ul.level1 > li {  display:block; }

#mainmenu ul.level1 > li > a {  display:inline-block; color:var(--brand-blue) ; font-weight:600;letter-spacing: 0.02em; line-height: 26px;font-size: 19px;
 
padding: 10px 10px 6px 2px;

}

#mainmenu ul.level1 > li.opensub > a {background-repeat:no-repeat;
background-size:13px auto ;
background-position:  right center;
background-image:  url('../images/chevron-down.svg');
padding: 10px 27px 6px 2px;}
#mainmenu ul.level1 > li.opensub > a.active {background-image:  url('../images/chevron-up.svg');}



#mainmenu ul.level1 li > a:hover { color:var(--brand-blue); }

#mainmenu ul.level1 li > a.active {  color:var(--brand-blue); }

#mainmenu ul.level1 li > a.current {   }


 
 #mainmenu ul.level2  >li > a {  display:block; color:var(--brand-blue) ; font-size: 19px;letter-spacing: 0.02em;font-weight: 400;
line-height: 26px;  padding: 0px 0px 10px  0px;}
 
 
 
 
 
 
 
 



 /*in-page nav*/ 
 
 .pagenav header {height: 100vh;}
 
.inpagenav {padding: 10px 15px 10px 15px; background-color:var(--brand-midblue); position:absolute; bottom: 20px; left: 20px; width: calc(100% - 40px);

 z-index:1011; 


height: 100px; overflow:hidden; border-radius:5px;
border-bottom: 20px solid var(--brand-midblue);

-webkit-transition: all 250ms ease-in;
-ms-transition: all 250ms ease-in;
-moz-transition: all 250ms ease-in;
transition: all 250ms ease-in;
display:none; 

}

.inpagenav.fixed,
.scroll-down .inpagenav, .scroll-middle .inpagenav , .scroll-bottom .inpagenav 
{ position:fixed; top: 10px; left: 20px; height: 100px; border: 2px solid var(--brand-lightblue);
display:block; 

} 
.menuopened .inpagenav {display:none; }

 
 .inpagenav h3 {background-image: url(../images/arrow-down.svg);
background-repeat:no-repeat;
background-size: 15px auto;
background-position:  right center;
 cursor:pointer;
 }
 
.inpagenav.opened h3 {background-image: url(../images/arrow-up.svg);}
  
  
  
 
 
.inpagenav ul {list-style-type:none; border-left: 2px solid var(--brand-blue);   }

.inpagenav ul li a {color:var(--brand-blue);}

.inpagenav ul li { 
	
display:  block;
margin: 0px 10px 8px 10px;

padding: 0px 0px 0px 0px;}

.menucontainer ul li:hover { text-decoration:underline}









 
 
 /***************************************************************************************************/ 
/***************************************************************************************************/ 

/*


.menuopened footer, .menuopened #page {
    filter: blur(80px);

    filter: url("../images/blur.svg#gaussian_blur");

    -webkit-filter: blur(80px);
 margin:0px 0px 0px -10px
    }
    
    
.menuopened #page {
    filter: blur(80px);

    filter: url("../images/blur.svg#gaussian_blur");

    -webkit-filter: blur(80px);
 margin:0px 0px 0px -10px
    }

*/
#menuoverlay {display:none; position:fixed; z-index:2;width: 100vw; height:100vh; top:0; left: 0;  background:transparent;  background: rgba(255,255,255,0.35);}

#menuoverlay.opened {display:block;}



@media all and (min-width: 960px){ 
	
.inpagenav {padding: 60px 10px 0px 1px;background-color:var(--brand-lightblue); position:static; width: auto; height: auto; border-bottom: none;  border:none; display:block; }
 
.inpagenav h3 {background-image:none; }
.inpagenav.fixed,
.scroll-down .inpagenav, .scroll-middle .inpagenav , .scroll-bottom .inpagenav 
{ position:static; border:none; width: auto; height: auto;}

.inpagenav li:last-of-type {margin-bottom:0;}

#mainmenu  {background-image: url('../images/logo.svg');
    background-repeat: no-repeat;
    background-size: 212px auto;
    background-position:  left 30px  top 60px;	
    
    padding-left: 30px; width: 330px; left:-330px;}
    
    


}

@media all and (min-width: 1200px){ 
 
/*
#menuoverlay.opened, #menuoverlay {display:none;}*/
 
#mainmenu {display:block; background-image:none; padding:0;background-color:transparent; overflow:visible;}
 	
#openmenu, #mainmenu  .submenu , #openspenden{display:none;}

 	 
#menuoverlay {  background:transparent;   }
 
#mainmenu {position:fixed; top:0px; left:  0px; z-index:11111; width: 100%; height: auto; }


#mainmenu ul.level1   {position:absolute;  z-index:11;  top:60px; 
/*left:  300px;    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.1), 1px 1px 2px rgba(0, 0, 0, 0.2); */ background:var(--brand-midblue); 
border-radius: 35px;
padding: 0px 5px 0px  5px;
height: 69px; 

/*width: 840px;*/

    display: flex !important;    
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    
    justify-content: space-between ;
-webkit-justify-content:  space-between;
     -moz-justify-content: space-between;
       -ms-justify-content:  flex-start ; 
       
       border:2px solid var(--brand-lightblue); 
       
  left:  50%;   transform: translate( -50%,0); min-width: 844px;
  }

 
.menuopened #mainmenu ul.level1 {height:   500px;}


#mainmenu ul.level2   {display:none; position:absolute; width: auto;
/*position:absolute; top:60px; left:  50%;  z-index:10; transform: translate( -50%,0);  width: 840px; */
/*

background:var(--brand-midblue);
border-radius: 50px;*/
padding: 60px 0px 0px  0px;

}

#mainmenu ul.level2.opened {  display:block; width: 300px; padding-left: 12px; padding: 40px 0px 0px  12px;}


#mainmenu ul.level1 > li {height: 65px;  padding: 8px 4px 8px 4px; display:block; position:relative; }
#mainmenu ul.level1  > li > a {  display:block; color:var(--brand-blue) ; padding: 10px 20px 10px 20px;   border-radius: 35px;height: 49px; background-image: none;white-space:nowrap;}
#mainmenu ul.level1   > li > a:hover { background-color: var(--brand-lightblue) ; color:var(--brand-blue); }
#mainmenu ul.level1   > li > a.active { background-color: #fff; color:var(--brand-blue); }
#mainmenu ul.level1   > li > a.current { color:var(--brand-lightblue); background-color:var(--brand-blue); }




#mainmenu ul.level1 > li.opensub > a , #mainmenu ul.level1 > li.opensub > a.active {background-image:none; 
padding: 10px 20px 10px 20px;} 


 

 
#mainmenu ul.level1 li.spenden, #mainmenu ul.level1 li.p6   {

height: 69px;  padding: 10px 5px 10px 10px; 
} 



#mainmenu ul.level1 li.spenden a , #mainmenu ul.level1 li.p6 a {
background-color: var(--brand-spendenblue); border-radius: 35px;
background-repeat: no-repeat;
background-size: 28px auto;
background-position: center left 18px;
background-image:  url('../images/donation.svg'); 
padding: 10px 20px 10px 55px; 
}


#mainmenu ul.level1 li.spenden a:hover , #mainmenu ul.level1 li.p6 a:hover {
background-color: var(--brand-lightblue) ; color:var(--brand-blue); 
}

#mainmenu ul.level1 li.spenden a.current , #mainmenu ul.level1 li.p6 a.current {
background-color: var(--brand-blue) ; color:#fff; background-image:  url('../images/donation_white.svg'); 
}


#mainmenu.opened {display:block; position:fixed; top:0px; left: 0px; width: 100vw;  z-index:200;}
 
 
   
#mainmenu ul.level2 > li  {width: auto; list-style-type:none; max-width: 500px; padding-right: 10px; float:none; height: auto; }  

#mainmenu ul.level2 > li > a  , #mainmenu ul.level2 > li > span {color:var(--brand-blue) ;display:block; margin-bottom: 8px;padding: 0;  ; height: auto; background:transparent; }   

  #mainmenu ul.level2 > li > a:hover {text-decoration:underline}
  #mainmenu ul.level2 > li > a.current {color:var(--brand-red) ;}

 }


/*
@media all and (min-width: 1440px){
 
 #mainmenu ul.level1   {  left:  50%;   transform: translate( -50%,0); min-width: 844px;}

} */