/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-smartphone-mini-menu.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.iphone {
	width: 300px;
	height: 808px;
	background: url("smartphoneminimenu/iphone.png");
	margin: 0 auto;
	position: relative;
}
.screen {
	width: 177px;
	height: 250px;
	position: absolute;
	left: 1px;
	overflow: hidden;
}
.cover {
	width: 193px;
	height: 260px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100;
}
.page {
	width: 177px;
	padding: 10px;
	height: 228px;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	background-image: url('../1_imagesAllgemein/hintergrund_links.jpg');
}

.page h4 {font:700 20px/40px 'Noto Sans', arial, sans-serif; text-align:center; padding:0; margin:0; color:#000;}
.page p { font:400 11px/20px 'Noto Sans', arial, sans-serif; padding:5px 0; margin:0; color:#000;}


input.hidden {display:none;}

.menuTrigger {
	width: 155px;
	height: 20px;
	border-top: 5px solid #000;
	border-bottom: 5px solid #000;
	position: relative;
	top: -10px;
	border-top-color: #000000;
	border-bottom-color: #000000;
	font-family: Verdana, Geneva, Tahoma, Sans-Serif;
	border-top-width: 3px;
	border-bottom-width: 3px;
}
.menuTrigger:before {content:""; display:block; width:0px; height:0px; background:#000; position:absolute; left:0; top:5px;}
.menuTrigger:after {content:""; display:block; width:0px; height:0px; background:#000; position:absolute; left:0; top:5px;}
.menuTrigger label {
	display: none;
	width: 155px;
	height: 30px;
	position: absolute;
	display: block;
	left: 0;
	top: -5px;
	cursor: pointer;
	z-index: 100;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	tap-highlight-color: rgba(0,0,0,0);
}
.menuTrigger label span {position:absolute; left:-9999px;}

#menuopen:checked ~ .cover .page {margin-left:180px;}     <!-- Verschiebung des Deckblatts nach links -->
#menuopen:checked ~ .cover .page .menuTrigger .topopen {display:none;}


.menu {
	width: 177px;
	height: 255px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}


.menu ul {
	position: absolute;
	left: 250px;
	top: 0;
	padding: 0;
	margin: 0;
	list-style: none;
	opacity: 0.25;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	font-size: 11px;
	width: 177px;
}
.menu ul.sub1 {
	left: 0;
	opacity: 1;
	background-color: #CCCCCC;
	font-size: 11px;
	vertical-align: middle;
}
.menu ul label {
	display: block;
	color: #ddd;
	width: 177px;
	padding-left: 7px;
	font: 400 11px/24px "Noto Sans", arial, sans-serif;
	cursor: pointer;
	border-bottom: 1px solid #000;
	border-bottom-width: 1px;
	
}
.menu ul label.right {
	background-position: center;
	background: #CCCCCC url('right-arrow.png') no-repeat 144px
center;
	border-top: 1px solid #242;
	font-size: 11px;
	color: #000000;
	width: 167px;
	height: 23px;
}
.menu ul label.left {
	background-position: center;
	background: #808080 url('left-arrow.png') no-repeat 144px
center;
	border-top: 1px solid #248;
	font-size: 11px;
	width: 167px;
	height: 23px;
}
.menu ul a {
	display: block;
	color: #fff;
	width: 167px;
	height: 23px;
	padding-left: 7px;
	outline: 0;
	text-decoration: none;
	font: 400 11px/30px 'Noto Sans', arial, sans-serif;
	
	background: #6c6d6c;
	border-top: 1px solid #fc9f10;
	border-bottom: 1px solid #fc9f10;
}

.menu ul label:hover {color:#808080;}
.menu ul a:hover {color:#ddd;}


#sub2-1open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub2-1open:checked ~ .sub2.pos1 {left:0px; opacity:1;}

#sub2-2open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub2-2open:checked ~ .sub2.pos2 {left:0px; opacity:1;}

#sub2-3open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub2-3open:checked ~ .sub2.pos3 {left:0px; opacity:1;}

#sub2-4open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub2-4open:checked ~ .sub2.pos4 {left:0px; opacity:1;}

#sub2-5open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub2-5open:checked ~ .sub2.pos5 {left:0px; opacity:1;}

#sub2-6open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub2-6open:checked ~ .sub2.pos6 {left:0px; opacity:1;}

#sub2-7open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub2-7open:checked ~ .sub2.pos7 {left:0px; opacity:1;}

#sub2-8open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub2-8open:checked ~ .sub2.pos8 {left:0px; opacity:1;}






#sub3-1open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub3-1open:checked ~ .sub2.pos1 {left:-250px; opacity:0.25;}
#sub3-1open:checked ~ .sub3.pos1 {left:0px; opacity:1;}

#sub3-2open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub3-2open:checked ~ .sub2.pos2 {left:-250px; opacity:0.25;}
#sub3-2open:checked ~ .sub3.pos2 {left:0px; opacity:1;}

#sub3-3open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub3-3open:checked ~ .sub2.pos2 {left:-250px; opacity:0.25;}
#sub3-3open:checked ~ .sub3.pos3 {left:0px; opacity:1;}

#sub3-4open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub3-4open:checked ~ .sub2.pos4 {left:-250px; opacity:0.25;}
#sub3-4open:checked ~ .sub3.pos4 {left:0px; opacity:1;}

#sub3-5open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub3-5open:checked ~ .sub2.pos4 {left:-250px; opacity:0.25;}
#sub3-5open:checked ~ .sub3.pos5 {left:0px; opacity:1;}

#sub3-6open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub3-6open:checked ~ .sub2.pos4 {left:-250px; opacity:0.25;}
#sub3-6open:checked ~ .sub3.pos6 {left:0px; opacity:1;}

#sub3-7open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub3-7open:checked ~ .sub2.pos4 {left:-250px; opacity:0.25;}
#sub3-7open:checked ~ .sub3.pos7 {left:0px; opacity:1;}

#sub3-8open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub3-8open:checked ~ .sub2.pos4 {left:-250px; opacity:0.25;}
#sub3-8open:checked ~ .sub3.pos8 {left:0px; opacity:1;}

#sub3-9open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub3-9open:checked ~ .sub2.pos4 {left:-250px; opacity:0.25;}
#sub3-9open:checked ~ .sub3.pos9 {left:0px; opacity:1;}





#sub4-1open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub4-1open:checked ~ .sub3.pos1 {left:-250px; opacity:0.25;}
#sub4-1open:checked ~ .sub4.pos1 {left:0px; opacity:1;}
#sub4-2open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub4-2open:checked ~ .sub3.pos2 {left:-250px; opacity:0.25;}
#sub4-2open:checked ~ .sub4.pos2 {left:0px; opacity:1;}
#sub4-3open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub4-3open:checked ~ .sub3.pos3 {left:-250px; opacity:0.25;}
#sub4-3open:checked ~ .sub4.pos3 {left:0px; opacity:1;}
#sub4-4open:checked ~ .sub1 {margin-left:-250px; opacity:0.25;}
#sub4-4open:checked ~ .sub3.pos3 {left:-250px; opacity:0.25;}
#sub4-4open:checked ~ .sub4.pos4 {left:0px; opacity:1;}