#stapel3030 {
    position: relative;
   background-image: url(../foto/12aaaa.png);
     background-repeat: repeat-y;
    height: 900px;

    margin: 0em auto 0em;

    overflow: hidden;  

}

#test55 {
    height: 600px;
    width: 100%;
    background-color: green;
}

#stapel15 {
    position: relative;
    height: 500px;
    width: 100%;
    margin: 1em auto 1em auto ;
    
}


#stapel15 img {
    position: absolute;
   left: 5em;
    height: 400px;
    width: 80%;

}

#stapel {
    position: relative;
    
  background-image: url(../foto/12bb.png); 
    height: 500px; 
    width: 100%;       
    margin: 1em auto 1em auto ;
   /* border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777; */
    cursor: pointer;
    overflow: hidden;
    z-index: 9;
}

#stapel figure {
    position: absolute;
    margin: 0;
    /*height: 50em; */
    width: 100%;
    opacity: 0;
}

#stapel figure img {
    position: absolute;
    
    height: 450px;
    width: 100%;
   
}

/*#stapel figcaption {
    position: relative;
    color: #444;
    font: 1.5em/2.9 serif;
    text-transform: uppercase;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, .3), 1px 1px 0 #505050;
    background: rgba(255, 255, 255, .7);
    border: 1px solid #fff;
    border-left: 0;
    height: 2.9em;
    width: 12.4em;
    bottom: 80px;
    left: -320px;
    transition: .5s;
}

#stapel:hover figcaption {
    left: 0;
}*/

/*.laden {
    position: relative;
    background: linear-gradient(90deg,#f00,#ffa500,#ff0,
                                #008000,#00f,#800080);
    width: 37.5em;
    height: .125em;
    bottom: -398px;
    animation: balken 7s ease-out infinite;
    z-index: 2;
}  

@keyframes balken {
      0% {width:   0; opacity: 0;}
     10% {width:   0; opacity:.2;}
     80% {width:100%; opacity:.8;}
    100% {width:100%; opacity: 0;}
}

.pause {
    position: absolute;
    top: 5px;
    left: 570px;
    color: #eee;
    font: bolder 1.3em/2 Impact;
    opacity: 0;
    transition: .5s;
    z-index: 2;
}

.pause:after {
    content: 'I I';
}

#stapel:hover .pause {
    opacity: 1;
} */

#stapel figure:nth-of-type(1) {
    animation: bild 40s ease-in-out infinite;
}
#stapel figure:nth-of-type(2) {
    animation: bild 40s 8s ease-in-out infinite;
}
#stapel figure:nth-of-type(3) {
    animation: bild 40s 16s ease-in-out infinite;
}
#stapel figure:nth-of-type(4) {
    animation: bild 40s 24s ease-in-out infinite;
}
#stapel figure:nth-of-type(5) {
    animation: bild 40s 32s ease-in-out infinite;
}

/*#stapel:hover figure,
#stapel:hover .laden {
    animation-play-state: paused;
} */



@keyframes bild {
      0%,    {top:-400px; opacity:0; z-index:0;}
      6.66%, {top:0;      opacity:1; z-index:1;}
     20%     {top:0;      opacity:1; z-index:1;}
     26.66%  {top: 400px; opacity:0; z-index:0;}
    100%     {top:-400px; opacity:0; z-index:0;}
}