.fixed {
	position:fixed;
	z-index:1000;
	top:0px;
	left:0px;
	width: 100%;
	/*
	background-color: rgba(255,255,255,0.2);
	background-color: rgba(255,255,255,1);
	display:none;*/
}
.header0 {
	/*background-color: pink;
	background-color: rgba(255,255,255,1);
	*/
	height:60px;
	
}

.demo-slidebar {
	position:absolute;
	z-index:4000;
    /*background-color:var(--alfarbe);*/
    background-color: transparent;
    text-align: left;
    margin-top: 0px;
    width: 455px;
    width:calc(100vw / 9*3);
    width:calc(100vw);
    height: calc(100vh - 0px);
    min-height: 400px;
    
}

.scrollbox {
    height: calc(100vh - 20px);
    overflow: auto;
    display: block;
    margin-top: 60px;
    padding-top: 0px;
    background-color: rgba(255,255,255,0.9);
   /*border:solid 1px red; */
}

.svgwhite {fill:#FFF;}
.kachelgrau2 {fill:#ccc; /*fill:transparent; */}


.nav0{

	width: 100%;
	margin:40px 0px 0px 0px;
	padding:0px 0% 0px 0%;	
/*
	background-color: rgba(249,187,0,0.3);
	background-color: #FFF;
	*/
	
}
.nav0 > ul {
	/*border:solid 1px blue;*/
	height:auto;
	min-height:50px;
}
.nav0 ul {
	/*border:solid 1px pink;*/
	width: 96%;
	list-style-position: outside;
	list-style-type: none;
	margin:0px 0% 0px 4%;
	padding: 0px;
}




.nav0 > ul > li {
	/*border:solid 1px pink;*/
	position:relative;
	display:block;
	float:left;
	width:18%;
		width:12%;
	text-align:left;
	margin: 0px 1%;
	padding: 0px;

}


.nav0 > ul > li:first-child {

}
.nav0 > ul  > .current > a,
.nav0 > ul  > li:hover > a,
.nav0 > ul  > li > ul .current > a,
.nav0 > ul  > li > ul > li:hover > a,
.nav0 > ul  > li > ul  > li > ul .current > a,
.nav0 > ul  > li > ul  > li > ul > li:hover > a {
	/*
	background-color: #7D8B63;
	color:#FFF;
	background-color: #87BFE9;
	background-color: #b6d8f1;	*/
	color:#E00C17;
	text-decoration: none;
}

.siluette2 {
	background-image: none;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100% auto;
	position:absolute;
	z-index:10;
	top:-28px;
	left:-30px;
	width: 80px;
	height:50px;	

	/*border:solid 1px red;*/
}
.collapsing1 {
	/*
	background-color: pink;
*/
  display:block;
}
  
.collapsing2 {
	/*
	background-color: gold;	
	*/
 display:block;
}


 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  /*background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  */
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  /*display: none;*/

  overflow: hidden;
} 
.accordion:after {
	position:absolute;
	top:5px;
	right:0px,
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}
.offen {background-color: pink;}
.zu {background-color: gold; /*height: 30px; transition: all 500ms ease;*/}



.nav0 ul li ul { /*max-height:10px;display:none; */}


.nav0 > ul  > .current > .siluette2,
.nav0 > ul  > li:hover > .siluette2 {
	
	background-image: url(../userfiles/images/meta/siluette_handstand2.svg);
	background-image: url(../userfiles/images/meta/narrenkappe.svg);
}


.nav0 > ul > li > span {
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.5em;
	line-height: 1.5em;
	font-weight: 700;
	color: #0D4084;
	padding: 0px 4px;
	margin: 0px 0px 10px 0px;
	display: block;
}
.nav0 > ul > li > a,
.nav0 > ul > li > span {
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.1em;
	line-height: 1.1em;
	font-weight: 700;
	color: #000;
	padding: 0px 4px;
	margin: 0px 0px 10px 0px;
	display: block;
}

.nav0 > ul > li > a > span{
	border:solid 1px pink;
	display: block;
}

.nav0 > ul  > li:hover > ul {
	/*display: block;*/
}
.nav0 ul li ul {
	/*position:absolute;
	background-color: #FFF;*/
	margin: 10px 0px 30px 0px;
	/*margin: 0px 0px 0px 0px;*/
	padding: 0px 0px;
	/*display: none;*/
	width:auto;

}



.nav0 ul li ul li{
	margin: 0px;
	padding: 0px;
}
.nav0 ul li ul li a {
	text-decoration: none;
	font-weight: 400;
	color: #000;
	font-size: 1.1em;
	line-height: 1.1em;
	padding: 2px 4px;
	margin: 2px 0px 2px 0px;
	display:block;
	/*background-color: #b6d8f1;	*/
		
}
.nav0 ul li ul li:hover a{
	/*
	background-color: #FFF;
	background-color: #87BFE9;
	background-color: #b6d8f1;		
	color: #FFF;*/
}


.nav0 ul li ul li a span{
		margin-right:15px;
}
.nav0 ul li ul li ul{
	/*border: solid 1px blue;*/
	margin: 0px 0px 0px 0px;
}
.nav0 ul li ul li ul li{
	/*border: solid 1px blue;*/
}
.nav0 ul li ul li ul li a{
	/*border: solid 1px pink;*/
	padding-left:1em;
}

@media only screen and (max-width: 1200px) {	
	
	.nav0 > ul > li {
		border:solid 1px grey;/**/
		width:14%;
	}	
	
	.nav0 > ul > li:nth-child(6n+1) {
		clear:left;
	}
}

/* Smartphone Landscape */
@media only screen and (max-width: 1023px) {	
	.nav0 > ul > li {
		border:solid 1px blue;/**/
			width:30%;
	}

	.nav0 > ul > li:nth-child(3n+1) {
		clear:left;
	}
}

/* Smartphone Landscape */
@media only screen and (max-width: 767px) {	
	
	.nav0 > ul > li {
		border:solid 1px lightblue;/**/
			width:30%;
	}

	.nav0 > ul > li:nth-child(3n+1) {
		clear:left;
	}
}



/* Smartphone Portrait */
@media only screen and (max-width: 600px) {
	.collapsing2 { display:none; }
	
	
	.nav0 ul li a, .nav0 ul li span, .nav0 ul li ul li a  {
		font-size: 1.5em;
		line-height: 1.1em;
	}
	
	.nav0 > ul > li > a,
	.nav0 > ul > li > span {
		
	}

	
	.nav0 > ul > li {
		border:solid 1px lightblue;/**/
			width:90%;
	}
}