#stapel {
    position: relative;
    height: 23em;
    width: 31.25em;
    margin: 6em auto 0;
    cursor: pointer;
    perspective: 1500px;
    transform-style: preserve-3d;
        }

#stapel img {
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
            }

#stapel figure {
    position: absolute;
    margin: 0;
    height: 20.8em;
    width: 31.25em;
    opacity: 0;
               }

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

#stapel figcaption:after {
    position: absolute;
    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);
                               }

#stapel figure:nth-of-type(1) {
    animation: bild 30s ease-in-out infinite;
                              }

#stapel figure:nth-of-type(2) {
    animation: bild 30s 6s ease-in-out infinite;
                              }

#stapel figure:nth-of-type(3) {
    animation: bild 30s 12s ease-in-out infinite;
                              }

#stapel figure:nth-of-type(4) {
    animation: bild 30s 18s ease-in-out infinite;
                              }

#stapel figure:nth-of-type(5) {
    animation: bild 30s 24s ease-in-out infinite;
                              }

@keyframes bild {
      6.66%       {opacity:1; z-index:3;
                  transform:rotateY(0deg) translateZ(253px);}
    20%          {opacity:1; z-index:4;
                  transform:rotateY(0deg) translateZ(253px);}
    26.66%       {opacity:1; z-index:2;
                  transform:rotateY(-90deg) translateZ(250px);}
    26.67%, 100% {opacity:0; z-index:1;
                  transform:rotateY(90deg) translateZ(250px);}
    0%           {opacity:1; z-index:1;
                  transform:rotateY(90deg) translateZ(261px);}
                 }



body {
          background-color: orange;
     } 

h1 { 
          text-align: center;
   }
  
.menu {
          width: 100%;
          position: relative;
          top: 1%;
          left: 0.5%;
      }

.section {
          border: 0px solid #ccc;   <!-- Rahmengröße von Menü -->
          padding: 5px;
          margin-bottom: 10px;
         }

.show-details {
          cursor: pointer;
              }

.hidden {
          display: none;
        }

img {
         position: relative;
    }

a:visited {
          color: black;
          text-decoration: none;
          }
a:link {
          color: black;
          text-decoration: none;
       }

a:focus {
         color: black;
         text-decoration: underline;
        }

a:hover {
        color: black;
        text-decoration: underline;
        }

a:active {
       color: black;
       text-decoration: underline;
         }


* {
       margin:0;
       padding:0;
  }
html,body {
       height:100%;
          }
#wrapper {
       position:relative;
       min-height:100%;
       height:auto !important;
       height:100%;
       margin:0 auto -80px;
       background:orange;
         }
#middle {
       padding:10px 10px 80px 10px;
        }
#middle p {
       margin:5px 0;
          }
#footer {
       position:relative;
       width:50%;
       line-height:500%;
       margin:0 auto;
       background:orange;
       text-align:center;
        }
.clearfix:after {
       content:".";
       display:block;
       height:0;
       font-size:0;
       clear:both;
       visibility:hidden;
                }