nav.dropdown > input,
nav.dropdown > ul {
display: none;  
}
nav.dropdown  li input {
position: absolute; top: -100px;
}

nav.dropdown > label {
  display: block;

  font-size: 36px;
  color: green;
  position: absolute;
  background: url('../images/klausner_menu_icon.svg.php') no-repeat;
  top: 6px;
  right: 15px;
  width: 36px;
  padding: 0;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

nav.dropdown > input:checked + ul {
  display: block;
  
}

nav.dropdown ul li {

}

@media only screen and (max-width: 987px) { 

nav.dropdown ul {margin: 0; padding: 0;}
	
	nav.dropdown a {
		text-decoration: none;
		color: green;
		display: block;
		padding: 12px 10px;
	}
	nav.dropdown a {background:#fff;display: flex}
	
	nav.dropdown .parent >  a {background:darkgreen; color: #fff}
	nav.dropdown a:hover {
		background-color: green;
		color: white;
	}
	nav.dropdown  li label {
	display: none;}

}

@media only screen and (min-width: 988px) {
nav.dropdown {position: absolute; left: 120px; top:65px;}	
nav.dropdown  li label {
margin-left: -50px; padding: 10px 0px 10px 40px;

cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
	z-index: 1140;
} 
}


/* Media Queries
--------------------------------------------- */

@media only screen and (min-width: 988px) { 
	
header {position: relative;}	
nav.dropdown > label {display: none; }	
nav.dropdown, nav.dropdown * {padding: 0; margin:0;}	


nav.dropdown > ul {display: flex; }	

nav.dropdown ul {list-style: none;}

nav.dropdown > ul > li > a { 
	font-family: "Times New Roman", Georgia, Serif;
	font-size: 20px;
	letter-spacing: -1px;
	color: rgb(43, 128, 43);;
	text-decoration: none;	white-space: nowrap;
	z-index: 120; position: relative;
}

nav.dropdown > ul > li > a:hover { 
	background: url(../images/klausner_menu.svg.php);
	
}


nav.dropdown > ul > li.active > a { 
	background: url(../images/klausner_menu.svg.php);
	
}
nav.dropdown ul ul li a { 
	font-family: arial;font-weight: nomal;font-size: 16px;
	color: rgb(43, 128, 43);;
	text-decoration: none;		
}



nav.dropdown ul ul {
	display: none;
	position: absolute; 

}

nav.dropdown ul ul::after  { content: "";position: absolute; margin-left: -3px; width: 165px; height: 36px; background: url(../images/klausner_menu_footer.svg) }

 
nav.dropdown ul li:hover > ul, nav.dropdown > ul > li input:checked ~ ul {
	display:inherit;
	background: #fff;
	border-left: 3px solid green;
	border-right: 3px solid green;
	
}
nav.dropdown ul li:hover > ul li a, nav.dropdown > ul > li input:checked ~ ul li a { 
	padding: 10px;
	display: block;
	background: white;

}
nav.dropdown ul li:hover > ul li a:hover, nav.dropdown > ul > li input:checked ~ ul li a:hover { 
    color: white;
	background: green;
}	
/* startseite */nav.dropdown > ul > li:nth-child(1) > a
{
	padding: 8px 3px;
	margin: 0px 3px;
	display: inline-block;

}

nav.dropdown > ul > li:nth-child(1) > a:hover
{
	
	background-position: -141px -230px;
    background-repeat: no-repeat; 

}
nav.dropdown > ul > li:nth-child(1).active > a
{
	
	background-position: -141px -430px;
    background-repeat: no-repeat; 
	color: #fff;
}
nav.dropdown > ul > li:nth-child(1) > a > span
{

	display: inline-block;
	padding: 3px 3px;
	margin: 35px 5px
	15px 5px
	;
	-ms-transform: rotate(2deg);
    -webkit-transform: rotate(2deg); 
    transform: rotate(2deg);
}

nav.dropdown > ul > li:nth-child(1) ul {
	padding-top: 20px;
	margin-left: -20px;
	margin-top: 0px;
	width: 159px; 
}

nav.dropdown > ul > li:nth-child(1) ul:before { 
	content: ''; display: inline-block; 
	width: 166px; 
	position: absolute; left:  -4px; top: 0px; height: 20px;  


	background: url(../images/klausner_menu.svg.php) -144px -126px ; 

}
/* aktuelles */nav.dropdown > ul > li:nth-child(2) > a
{
	padding: 8px 3px;
	margin: 0px 3px;
	display: inline-block;

}

nav.dropdown > ul > li:nth-child(2) > a:hover
{
	
	background-position: -234px -230px;
    background-repeat: no-repeat; 

}
nav.dropdown > ul > li:nth-child(2).active > a
{
	
	background-position: -234px -430px;
    background-repeat: no-repeat; 
	color: #fff;
}
nav.dropdown > ul > li:nth-child(2) > a > span
{

	display: inline-block;
	padding: 3px 3px;
	margin: 35px 5px
	15px 5px
	;
	-ms-transform: rotate(-0.5deg);
    -webkit-transform: rotate(-0.5deg); 
    transform: rotate(-0.5deg);
}

nav.dropdown > ul > li:nth-child(2) ul {
	padding-top: 20px;
	margin-left: -20px;
	margin-top: -18px;
	width: 159px; 
}

nav.dropdown > ul > li:nth-child(2) ul:before { 
	content: ''; display: inline-block; 
	width: 166px; 
	position: absolute; left:  -4px; top: 0px; height: 20px;  


	background: url(../images/klausner_menu.svg.php) -210px -108px ; 

}
/* appartments */nav.dropdown > ul > li:nth-child(3) > a
{
	padding: 8px 3px;
	margin: 0px 3px;
	display: inline-block;

}

nav.dropdown > ul > li:nth-child(3) > a:hover
{
	
	background-position: -324px -230px;
    background-repeat: no-repeat; 

}
nav.dropdown > ul > li:nth-child(3).active > a
{
	
	background-position: -324px -430px;
    background-repeat: no-repeat; 
	color: #fff;
}
nav.dropdown > ul > li:nth-child(3) > a > span
{

	display: inline-block;
	padding: 3px 3px;
	margin: 31px 5px
	19px 5px
	;
	-ms-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg); 
    transform: rotate(-2deg);
}

nav.dropdown > ul > li:nth-child(3) ul {
	padding-top: 20px;
	margin-left: -20px;
	margin-top: -20px;
	width: 159px; 
}

nav.dropdown > ul > li:nth-child(3) ul:before { 
	content: ''; display: inline-block; 
	width: 166px; 
	position: absolute; left:  -4px; top: 0px; height: 20px;  


	background: url(../images/klausner_menu.svg.php) -333px -106px ; 

}
/* restaurant */nav.dropdown > ul > li:nth-child(4) > a
{
	padding: 8px 3px;
	margin: 0px 3px;
	display: inline-block;

}

nav.dropdown > ul > li:nth-child(4) > a:hover
{
	
	background-position: -452px -230px;
    background-repeat: no-repeat; 

}
nav.dropdown > ul > li:nth-child(4).active > a
{
	
	background-position: -452px -430px;
    background-repeat: no-repeat; 
	color: #fff;
}
nav.dropdown > ul > li:nth-child(4) > a > span
{

	display: inline-block;
	padding: 3px 3px;
	margin: 25px 5px
	25px 5px
	;
	-ms-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg); 
    transform: rotate(-3deg);
}

nav.dropdown > ul > li:nth-child(4) ul {
	padding-top: 20px;
	margin-left: -20px;
	margin-top: -50px;
	width: 159px; 
}

nav.dropdown > ul > li:nth-child(4) ul:before { 
	content: ''; display: inline-block; 
	width: 166px; 
	position: absolute; left:  -4px; top: 0px; height: 20px;  


	background: url(../images/klausner_menu.svg.php) -464px -76px ; 

}
/* preise */nav.dropdown > ul > li:nth-child(5) > a
{
	padding: 8px 3px;
	margin: 0px 3px;
	display: inline-block;

}

nav.dropdown > ul > li:nth-child(5) > a:hover
{
	
	background-position: -552px -230px;
    background-repeat: no-repeat; 

}
nav.dropdown > ul > li:nth-child(5).active > a
{
	
	background-position: -552px -430px;
    background-repeat: no-repeat; 
	color: #fff;
}
nav.dropdown > ul > li:nth-child(5) > a > span
{

	display: inline-block;
	padding: 3px 3px;
	margin: 21px 5px
	29px 5px
	;
	-ms-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg); 
    transform: rotate(-3deg);
}

nav.dropdown > ul > li:nth-child(5) ul {
	padding-top: 20px;
	margin-left: -20px;
	margin-top: -50px;
	width: 159px; 
}

nav.dropdown > ul > li:nth-child(5) ul:before { 
	content: ''; display: inline-block; 
	width: 166px; 
	position: absolute; left:  -4px; top: 0px; height: 20px;  


	background: url(../images/klausner_menu.svg.php) -567px -76px ; 

}
/* die-insel */nav.dropdown > ul > li:nth-child(6) > a
{
	padding: 8px 3px;
	margin: 0px 3px;
	display: inline-block;

}

nav.dropdown > ul > li:nth-child(6) > a:hover
{
	
	background-position: -618px -230px;
    background-repeat: no-repeat; 

}
nav.dropdown > ul > li:nth-child(6).active > a
{
	
	background-position: -618px -430px;
    background-repeat: no-repeat; 
	color: #fff;
}
nav.dropdown > ul > li:nth-child(6) > a > span
{

	display: inline-block;
	padding: 3px 3px;
	margin: 15px 5px
	35px 5px
	;
	-ms-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg); 
    transform: rotate(-3deg);
}

nav.dropdown > ul > li:nth-child(6) ul {
	padding-top: 20px;
	margin-left: -20px;
	margin-top: -35px;
	width: 159px; 
}

nav.dropdown > ul > li:nth-child(6) ul:before { 
	content: ''; display: inline-block; 
	width: 166px; 
	position: absolute; left:  -4px; top: 0px; height: 20px;  


	background: url(../images/klausner_menu.svg.php) -636px -91px ; 

}
/* anreise */nav.dropdown > ul > li:nth-child(7) > a
{
	padding: 8px 3px;
	margin: 0px 3px;
	display: inline-block;

}

nav.dropdown > ul > li:nth-child(7) > a:hover
{
	
	background-position: -702px -230px;
    background-repeat: no-repeat; 

}
nav.dropdown > ul > li:nth-child(7).active > a
{
	
	background-position: -702px -430px;
    background-repeat: no-repeat; 
	color: #fff;
}
nav.dropdown > ul > li:nth-child(7) > a > span
{

	display: inline-block;
	padding: 3px 3px;
	margin: 10px 5px
	40px 5px
	;
	-ms-transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg); 
    transform: rotate(-1deg);
}

nav.dropdown > ul > li:nth-child(7) ul {
	padding-top: 20px;
	margin-left: -20px;
	margin-top: -45px;
	width: 159px; 
}

nav.dropdown > ul > li:nth-child(7) ul:before { 
	content: ''; display: inline-block; 
	width: 166px; 
	position: absolute; left:  -4px; top: 0px; height: 20px;  


	background: url(../images/klausner_menu.svg.php) -753px -81px ; 

}
/* kontakt */nav.dropdown > ul > li:nth-child(8) > a
{
	padding: 8px 3px;
	margin: 0px 3px;
	display: inline-block;

}

nav.dropdown > ul > li:nth-child(8) > a:hover
{
	
	background-position: -782px -230px;
    background-repeat: no-repeat; 

}
nav.dropdown > ul > li:nth-child(8).active > a
{
	
	background-position: -782px -430px;
    background-repeat: no-repeat; 
	color: #fff;
}
nav.dropdown > ul > li:nth-child(8) > a > span
{

	display: inline-block;
	padding: 3px 3px;
	margin: 10px 5px
	40px 5px
	;
	-ms-transform: rotate(1deg);
    -webkit-transform: rotate(1deg); 
    transform: rotate(1deg);
}

nav.dropdown > ul > li:nth-child(8) ul {
	padding-top: 20px;
	margin-left: -20px;
	margin-top: -45px;
	width: 159px; 
}

nav.dropdown > ul > li:nth-child(8) ul:before { 
	content: ''; display: inline-block; 
	width: 166px; 
	position: absolute; left:  -4px; top: 0px; height: 20px;  


	background: url(../images/klausner_menu.svg.php) -806px -81px ; 

}
nav.dropdown > ul > li:nth-child(8) ul { 
	margin-left: -50px;
}

}
@media only screen and (min-width: 1270px) {
nav.dropdown {position: absolute; left: 260px; top: 30px;}

}