.holder { 
position: relative; 
z-index: 1; 
pointer-events: none; 
display:block; 
clear:both;
float:left;
overflow:visible;
}

/*input {
	opacity: 1;
	display:none;
}*/

label {
display: block;
position: absolute;
width:95%;
margin-left:10px;
margin-top:0px;
}

label figure {
display: table-cell;
opacity: 0;
z-index: 20;
position: absolute;
width:100%;
margin-left:-1.5%;
margin-top:0px;
}

figure img{margin-top:0px;
	}

label:nth-of-type(1):before {
z-index: 10;
}
label:nth-of-type(2):before {
z-index: 11;
}
label:nth-of-type(3):before {
z-index: 12;
}
label:before{
    background-image:url(../img/links.jpg) ;
	background-repeat:none;
    content:"";
    display: block;
   width: 19px; 
    height: 38px;
    left: -20px;
    top: 100px;
    position: absolute;
    opacity: .3;
    pointer-events: visible ;
	text-align:center;
	clear:both;
}

label:after {
    background-image:url(../img/rechts.jpg) ;
	background-repeat:none;
   content:"";
    display: block;
    width: 19px; 
    height: 38px;
    top:100px;
    line-height: 50px;
    font-size: 30px;
   left:97%;
   position: absolute;
    z-index: 1;
    opacity: .2;
    pointer-events: visible;
	text-align:center;
}


#box1:checked ~ .holder label:not(:nth-of-type(1)):before,
#box2:checked ~ .holder label:not(:nth-of-type(1)):before,
#box3:checked ~ .holder label:not(:nth-of-type(2)):before,
#box4:checked ~ .holder label:not(:nth-of-type(3)):before,
#box5:checked ~ .holder label:not(:nth-of-type(4)):before,
#box6:checked ~ .holder label:not(:nth-of-type(5)):before,
#box7:checked ~ .holder label:not(:nth-of-type(6)):before,
#box8:checked ~ .holder label:not(:nth-of-type(7)):before,
#box9:checked ~ .holder label:not(:nth-of-type(8)):before {
z-index: 1;margin-top:0px;
}


#box1:checked ~ .holder label:nth-of-type(2)::after,
#box2:checked ~ .holder label:nth-of-type(3)::after,
#box3:checked ~ .holder label:nth-of-type(4)::after,
#box4:checked ~ .holder label:nth-of-type(5)::after,
#box5:checked ~ .holder label:nth-of-type(6)::after,
#box6:checked ~ .holder label:nth-of-type(7)::after,
#box7:checked ~ .holder label:nth-of-type(8)::after,
#box8:checked ~ .holder label:nth-of-type(9)::after{
z-index: 10; margin-top:0px;
}



#box1:checked ~ .holder label:nth-of-type(1) figure,
#box2:checked ~ .holder label:nth-of-type(2) figure,
#box3:checked ~ .holder label:nth-of-type(3) figure,
#box4:checked ~ .holder label:nth-of-type(4) figure,
#box5:checked ~ .holder label:nth-of-type(5) figure,
#box6:checked ~ .holder label:nth-of-type(6) figure,
#box7:checked ~ .holder label:nth-of-type(7) figure,
#box8:checked ~ .holder label:nth-of-type(8) figure,
#box9:checked ~ .holder label:nth-of-type(9) figure {
opacity: 1;margin-top:0px;
-webkit-transition: 2.8s;
-moz-transition: 2.8s;
-ms-transition: 2.8s;
-o-transition: 2.8s;
transition: 2.8s
}

/*====================Leiste=======================*/
nav {
 position: relative;
 text-align: center;
 padding: 6px 0 6px 0;
 width:100%;
}

/*===================alle radio=======================*/
nav span {
 display: inline-block;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background: blue;
 margin: 3px;
 cursor: pointer;
 box-shadow:   inset 0 1px 1px rgba(0,0,0,0.2),   0 2px 1px rgba(255,255,255,0.9);
}

/*====================aktiv radio=======================*/
#box1:checked ~ .holder label nav span:nth-of-type(1),
#box2:checked ~ .holder label nav span:nth-of-type(2),
#box3:checked ~ .holder label nav span:nth-of-type(3),
#box4:checked ~ .holder label nav span:nth-of-type(4),
#box5:checked ~ .holder label nav span:nth-of-type(5),
#box6:checked ~ .holder label nav span:nth-of-type(6),
#box7:checked ~ .holder label nav span:nth-of-type(7),
#box8:checked ~ .holder label nav span:nth-of-type(8),
#box9:checked ~ .holder label nav span:nth-of-type(9)  {
background: silver;
}