#stapel {
    float:left;
    position: relative;
    background: #000;
    margin-right:20px;
/*     border: 10px solid ; */
    border-color: #b5b5b5;
    border-radius: 15px;
    cursor: pointer;
    overflow: hidden;
}

#stapel figure {
    position: absolute;
    margin: 0;
    opacity: 0;
}
.laden {
    position: relative;
    background: linear-gradient(90deg,#f00,#ffa500,#ff0,
                                #008000,#00f,#800080);
    width: 37.5em;
    height: .325em;
    bottom: var(--laden);
    animation: balken 6s 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:hover figure,
#stapel:hover .laden {
    animation-play-state: paused;
}*/

#stapel figcaption {
    position: relative;
    overflow: hidden;
    color: #fff;
    font: 1.3em/2.5 serif;
    letter-spacing: .1em;
    text-align: center;
    max-width: 380px;
    margin: 0 auto;
    bottom: 50px;
    opacity: 0;
    transition: 1s;
}

#stapel figcaption:after {
    position: absolute;
    bottom: 10px;
    left: 0;
    top: 0;
    width: 100%;
    height: .1em;
    background: #fff;
    content: '';
    transition: transform .5s;
    transform: translate3d(-100%,0,0);
}

#stapel:hover figcaption,
#stapel:hover figcaption:after {
    opacity: 1;
    transform: translate3d(0,0,0);
}
.slideimg {
    width:var(--breite);
    height:var(--hoehe);
}
#slideimg {
    width:var(--breite);
    height:var(--hoehe);
}