/* bilderblenden:  https://wiki.selfhtml.org/wiki/CSS/Tutorials/Bildwechsler
bilderschieben: http://www.webdesign-klamonfra.de/codeschnipsel/css3-slider.php */

div.bgslider {
    position:absolute;
	top:0;
    height:300px;
    width:100%;
	background:url(bilder/slide00.jpg) center top no-repeat; background-size:cover;
}

#slider {
    position:absolute;
	top:0;
    background:#FC3;
    height:300px;
    width:100%;
    margin:0;
    cursor:pointer;
    overflow:hidden; /* sonst über ganze Seite das */
}

#slider figure {
    position:absolute;
    margin:0;
    width:100%;
    opacity:0;
}
#slider figure > img {width:100%; height:300px; } /* ohne height bleibt Bild Seitenverhältnis responsive */

#slider figcaption {
    position:absolute;
    top:200px;	
    height:2.9em;
    width:3em;
    left: -2000px;	
    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;
    transition: 1s;
}

#slider:hover figcaption {
    left:0;
}


/* ------------------ Fortschrittsbalken ----------------
.laden {
    position: relative;
    background: linear-gradient(90deg,#f00,#ffa500,#ff0,
                                #008000,#00f,#800080);
    width: 37.5em;
    height: .125em;
    bottom: -398px;
    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;}
}
*/

/* ------------------ Animation pause Mausover ----------------*/
.pause {
    position: absolute;
    top: 10px;
    left: 20px;
    color: #eee;
    font: bolder 2.3em/2 Impact;
    opacity: 0;
    transition: .5s;
    z-index: 2;
}
.pause:after {
    content: 'I I';
}
#slider:hover .pause {
    opacity:1;
}

#slider:hover figure,
#slider:hover .laden {
    animation-play-state:paused;
}

/* ------------------ Animation bilder überblenden ----------------*/

#slider figure {
  animation: bilderblenden 32s infinite;
}
#slider figure:nth-of-type(2) {
  animation-delay: 8s;
}
#slider figure:nth-of-type(3) {
  animation-delay: 16s;
}
#slider figure:nth-of-type(4) {
  animation-delay: 24s;
}

@keyframes bilderblenden {
    0% {opacity: 0;}
   16.66% {opacity: 1;}
   25% {opacity: 1;}
   41.66% {opacity: 0;}
  100% {opacity: 0;}
}



/* ------------------ Animation bilder v re nach  li schieben ----------------
#slider figure:nth-of-type(1) {
    animation: bilderschieben 30s ease-in-out infinite;
}
#slider figure:nth-of-type(2) {
    animation: bilderschieben 30s 6s ease-in-out infinite;
}
#slider figure:nth-of-type(3) {
    animation: bilderschieben 30s 12s ease-in-out infinite;
}
#slider figure:nth-of-type(4) {
    animation: bilderschieben 30s 18s ease-in-out infinite;
}
#slider figure:nth-of-type(5) {
    animation: bilderschieben 30s 24s ease-in-out infinite;
}

@keyframes bilderschieben {
      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;}
}
*/





/*
A:                 Anzahl der Bilder (5 Bilder)

Z:                 Zeit die ein Bild komplett sichtbar ist (4 Sekunden)

D:                 Dauer einer Überblendung (2 Sekunden)

G = ( Z + D ) * A: Gesamtdauer der Animation (30 Sekunden)

S = G / A:         Staffelung der Startzeiten (6 Sekunden)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

{top:-400px; opacity:0;} -                                  = 0%

{top:0;      opacity:1;} - [ 100% * D / G  ]                = 6,66%

{top:0;      opacity:1;} - [ 100% / A ]                     = 20%

{top: 400px; opacity:0;} - [ 100% * ( Z + ( 2 * D ) ) / G ] = 26,66%

{top:-400px; opacity:0;} -                                  = 100%
*/