.slider {
width:900px;/*Die Darstellungsbreite des Sliders*/
max-width:100%;/*Anpassung an schmalere Geräte*/
height:400px;/*maximale Höhe*/
margin:auto;/*seitlicher Abstand des Sliders - hier Ausrichtung in der Mitte*/
position: relative;/*Damit das absolute der .sliderbox innerhalb unseres Sliders bleibt*/
}

.sliderbox {
width:100%;/*Nur ein Sliderfeld erscheint, obwohl die Liste 500% breit ist*/
overflow:hidden;/*Alles, was zu groß ist wird versteckt*/
position:absolute;/*Die Box wird absolut im Slider positioniert*/
}

.slider ul {
width:1000%;/* 5 Sliderfelder, die vollständig nebeneinander angezeigt werden*/
margin:0;/*Außenabstand der Liste entfernen*/
padding:0;/*Innenabstand der Liste entfernen*/
-webkit-animation:slide 40s infinite alternate;
-moz-animation:slide 40s infinite alternate;
animation:slide 40s infinite alternate;
/*slide - Name unserer Animation - siehe weiter unten @keyframes*/
/*20s - Animationsdauer*/
/*alternate - Animation läuft durch und dann wieder zurück*/
/*infinite - Animation läuft unendlich*/
/*webkit und moz - Browserweichen für die geläufigsten Browser*/
}

.slider ul:hover {/*Die Animation stoppt beim Mouseover*/
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}

.slider li { 
float:left;/*Die Sliderfelder werden nebeneinander angeordnet*/
width:10%;/*Um die Felder gleichmäßig zu verteilen, unabhängig vom Inhalt*/
height:400px;/*muss die Gesamthöhe des Sliders sein*/
list-style-type: none;/*Die Listenpunkte • werden ausgeblendet*/
position:relative;/*Positionierung der Bildbeschreibungen im Inhalt*/
}

.slider img {
width:100%;/*Die Bilder sollen den Slider ausfüllen*/
height:auto;/*Die Höhe der Bilder soll sich proportional verhalten*/
max-width: 100%;/*Einpassung zu breiter Bilder*/
}


@keyframes slide { /*Unser Slideffekt - siehe .slider ul*/
  0% { margin-left:0%; }/*Der erste Inhalt wird angezeigt*/
 10% { margin-left:0%; }/*Der erste Inhalt wird angezeigt, kurz vor dem Wechsel*/
 11% { margin-left:-100%; }/*Die Liste wird 100% nach links geschoben*/
 20% { margin-left:-100%; }/*Die Liste wird 100% nach links geschoben*/
 21% { margin-left:-200%; }/*Die Liste wird 100% nach links geschoben*/    
 30% { margin-left:-200%; }/*Die Liste wird 100% nach links geschoben*/
 31% { margin-left:-300%; }/*Die Liste wird 100% nach links geschoben*/
 40% { margin-left:-300%; }/*Der zweite Inhalt wird angezeigt, kurz vor dem Wechsel*/
 41% { margin-left:-400%; }/* usw. */
 50% { margin-left:-400%; }/*Die Liste wird 100% nach links geschoben*/
 51% { margin-left:-500%; }/*Die Liste wird 100% nach links geschoben*/
 60% { margin-left:-500%; }
 61% { margin-left:-600%; }
 70% { margin-left:-600%; }/*Die Liste wird 100% nach links geschoben*/
 71% { margin-left:-700%; }/*Die Liste wird 100% nach links geschoben*/
 80% { margin-left:-700%; }
 81% { margin-left:-800%; }/*Die Liste wurde 400% nach links geschoben*/
 90% { margin-left:-800%; }/*Die Liste wird 100% nach links geschoben*/
 91% { margin-left:-900%; }/*Die Liste wird 100% nach links geschoben*/
100% { margin-left:-900%; }/*Der letzte Inhalt wird nur halb so lang angezeigt*/
}

@-webkit-keyframes slide {/*Browserweiche für Chrome, Safari und Opera*/
  0% { margin-left:0%; }/*Der erste Inhalt wird angezeigt*/
 10% { margin-left:0%; }/*Der erste Inhalt wird angezeigt, kurz vor dem Wechsel*/
 11% { margin-left:-100%; }/*Die Liste wird 100% nach links geschoben*/
 20% { margin-left:-100%; }/*Die Liste wird 100% nach links geschoben*/
 21% { margin-left:-200%; }/*Die Liste wird 100% nach links geschoben*/    
 30% { margin-left:-200%; }/*Die Liste wird 100% nach links geschoben*/
 31% { margin-left:-300%; }/*Die Liste wird 100% nach links geschoben*/
 40% { margin-left:-300%; }/*Der zweite Inhalt wird angezeigt, kurz vor dem Wechsel*/
 41% { margin-left:-400%; }/* usw. */
 50% { margin-left:-400%; }/*Die Liste wird 100% nach links geschoben*/
 51% { margin-left:-500%; }/*Die Liste wird 100% nach links geschoben*/
 60% { margin-left:-500%; }
 61% { margin-left:-600%; }
 70% { margin-left:-600%; }/*Die Liste wird 100% nach links geschoben*/
 71% { margin-left:-700%; }/*Die Liste wird 100% nach links geschoben*/
 80% { margin-left:-700%; }
 81% { margin-left:-800%; }/*Die Liste wurde 400% nach links geschoben*/
 90% { margin-left:-800%; }/*Die Liste wird 100% nach links geschoben*/
 91% { margin-left:-900%; }/*Die Liste wird 100% nach links geschoben*/
100% { margin-left:-900%; }/*Der letzte Inhalt wird nur halb so lang angezeigt*/
}
@-moz-keyframes slide {/*Browserweiche für Firefox*/
  0% { margin-left:0%; }/*Der erste Inhalt wird angezeigt*/
 10% { margin-left:0%; }/*Der erste Inhalt wird angezeigt, kurz vor dem Wechsel*/
 11% { margin-left:-100%; }/*Die Liste wird 100% nach links geschoben*/
 20% { margin-left:-100%; }/*Die Liste wird 100% nach links geschoben*/
 21% { margin-left:-200%; }/*Die Liste wird 100% nach links geschoben*/    
 30% { margin-left:-200%; }/*Die Liste wird 100% nach links geschoben*/
 31% { margin-left:-300%; }/*Die Liste wird 100% nach links geschoben*/
 40% { margin-left:-300%; }/*Der zweite Inhalt wird angezeigt, kurz vor dem Wechsel*/
 41% { margin-left:-400%; }/* usw. */
 50% { margin-left:-400%; }/*Die Liste wird 100% nach links geschoben*/
 51% { margin-left:-500%; }/*Die Liste wird 100% nach links geschoben*/
 60% { margin-left:-500%; }
 61% { margin-left:-600%; }
 70% { margin-left:-600%; }/*Die Liste wird 100% nach links geschoben*/
 71% { margin-left:-700%; }/*Die Liste wird 100% nach links geschoben*/
 80% { margin-left:-700%; }
 81% { margin-left:-800%; }/*Die Liste wurde 400% nach links geschoben*/
 90% { margin-left:-800%; }/*Die Liste wird 100% nach links geschoben*/
 91% { margin-left:-900%; }/*Die Liste wird 100% nach links geschoben*/
100% { margin-left:-900%; }/*Der letzte Inhalt wird nur halb so lang angezeigt*/
}