@charset "UTF-8"; /* check üÜöÖäÄ */
/* -------------------------------------------------------
 * CSS-bilderSlider
 * 4 Bilder
 *
http://ebene11.com/slider-als-keyframe-animation-mit-css3.html
 */

/* Definition der Animationen */
/* 1. Bewegung des Sliders */
@keyframes slidesStart01 {0%, 15% {left: 0;}25%, 40% {left: -100%;}50%, 65% {left: -200%;}75%, 90% {left: -300%;}100% {left: -400%;}}
@keyframes slidesStart101 {0%, 15% {left: 0;}25%, 40% {left: -100%;}50%, 65% {left: -200%;}75%, 90% {left: -300%;}100% {left: -400%;}}
@keyframes slidesStart02 {90.01% {left: 0;}0%, 15%, 100% {left: -100%;}25%, 40% {left: -200%;}50%, 65% {left: -300%;}75%, 90% {left: -400%;}}
@keyframes slidesStart102 {90.01% {left: 0;}0%, 15%, 100% {left: -100%;}25%, 40% {left: -200%;}50%, 65% {left: -300%;}75%, 90% {left: -400%;}}
@keyframes slidesStart03 {65.01% {left: 0;}0%, 15%, 100% {left: -200%;}25%, 40% {left: -300%;}50%, 65% {left: -400%;}75%, 90% {left: -100%;}}
@keyframes slidesStart103 {65.01% {left: 0;}0%, 15%, 100% {left: -200%;}25%, 40% {left: -300%;}50%, 65% {left: -400%;}75%, 90% {left: -100%;}}
@keyframes slidesStart04 {40.01% {left: 0;}0%, 15%, 100% {left: -300%;}25%, 40% {left: -400%;}50%, 65% {left: -100%;}75%, 90% {left: -200%;}}
@keyframes slidesStart104 {40.01% {left: 0;}0%, 15%, 100% {left: -300%;}25%, 40% {left: -400%;}50%, 65% {left: -100%;}75%, 90% {left: -200%;}}
@-webkit-keyframes slidesStart01 {0%, 15% {left: 0;}25%, 40% {left: -100%;}50%, 65% {left: -200%;}75%, 90% {left: -300%;}100% {left: -400%;}}
@-webkit-keyframes slidesStart101 {0%, 15% {left: 0;}25%, 40% {left: -100%;}50%, 65% {left: -200%;}75%, 90% {left: -300%;}100% {left: -400%;}}
@-webkit-keyframes slidesStart02 {90.01% {left: 0;}0%, 15%, 100% {left: -100%;}25%, 40% {left: -200%;}50%, 65% {left: -300%;}75%, 90% {left: -400%;}}
@-webkit-keyframes slidesStart102 {90.01% {left: 0;}0%, 15%, 100% {left: -100%;}25%, 40% {left: -200%;}50%, 65% {left: -300%;}75%, 90% {left: -400%;}}
@-webkit-keyframes slidesStart03 {65.01% {left: 0;}0%, 15%, 100% {left: -200%;}25%, 40% {left: -300%;}50%, 65% {left: -400%;}75%, 90% {left: -100%;}}
@-webkit-keyframes slidesStart103 {65.01% {left: 0;}0%, 15%, 100% {left: -200%;}25%, 40% {left: -300%;}50%, 65% {left: -400%;}75%, 90% {left: -100%;}}
@-webkit-keyframes slidesStart04 {40.01% {left: 0;}0%, 15%, 100% {left: -300%;}25%, 40% {left: -400%;}50%, 65% {left: -100%;}75%, 90% {left: -200%;}}
@-webkit-keyframes slidesStart104 {40.01% {left: 0;}0%, 15%, 100% {left: -300%;}25%, 40% {left: -400%;}50%, 65% {left: -100%;}75%, 90% {left: -200%;}}

/* 2. Wechsel des ersten Slides ans Ende und zurück */
@keyframes slide01ToEndStart01 {89.99% {left: 0;}90%, 100% {left: 100%;}}
@keyframes slide01ToEndStart101 {89.99% {left: 0;}90%, 100% {left: 100%;}}
@keyframes slide01ToEndStart02 {49.99%, 90.01% {left: 0;}50%, 90% {left: 100%;}}
@keyframes slide01ToEndStart102 {49.99%, 90.01% {left: 0;}50%, 90% {left: 100%;}}
@keyframes slide01ToEndStart03 {24.99%, 65.01% {left: 0;}25%, 65% {left: 100%;}}
@keyframes slide01ToEndStart103 {24.99%, 65.01% {left: 0;}25%, 65% {left: 100%;}}
@keyframes slide01ToEndStart04 {40.01% {left: 0;}0%, 40% {left: 100%;}}
@keyframes slide01ToEndStart104 {40.01% {left: 0;}0%, 40% {left: 100%;}}
@-webkit-keyframes slide01ToEndStart01 {89.99% {left: 0;}90%, 100% {left: 100%;}}
@-webkit-keyframes slide01ToEndStart101 {89.99% {left: 0;}90%, 100% {left: 100%;}}
@-webkit-keyframes slide01ToEndStart02 {49.99%, 90.01% {left: 0;}50%, 90% {left: 100%;}}
@-webkit-keyframes slide01ToEndStart102 {49.99%, 90.01% {left: 0;}50%, 90% {left: 100%;}}
@-webkit-keyframes slide01ToEndStart03 {24.99%, 65.01% {left: 0;}25%, 65% {left: 100%;}}
@-webkit-keyframes slide01ToEndStart103 {24.99%, 65.01% {left: 0;}25%, 65% {left: 100%;}}
@-webkit-keyframes slide01ToEndStart04 {40.01% {left: 0;}0%, 40% {left: 100%;}}
@-webkit-keyframes slide01ToEndStart104 {40.01% {left: 0;}0%, 40% {left: 100%;}}


/* Basisfunktionalität des Sliders */
.slider {
    overflow: hidden;
    position: relative;
    padding-top: 42px; /* Platz für sliderControl */
	/* border-bottom: 1px solid #64676C; */
}


/* inputs aus dem Blickfeld schieben */
.slider input {
    position: absolute;
    left: -10000px;
    top: 0;
}

.slideList {
	border-top: 1px solid #64676C;
 	list-style: none;
    width: 400%; /* Anzahl der Slides mal 100 */
    position: relative; /* über die relative Positionierung wird der Slider durchs Sichtfenster geschoben */
    -webkit-transition: left .6s ease; /* für den fließenden Schub */
    transition: left .6s ease; /* für den fließenden Schub */
}



.slide {
    width: 25%; /* Breite gleich 100 / Anzahl Slides */
    float: left;
    position: relative;
    left: 0;
    -webkit-transition: left 0s .6s; /*bei Klick auf ein Control werden alle Slides wieder auf Original-Position geschoben, hier für den ersten relevant. Damit die Aktion erst nach der slides-Verschiebung beginnt, kommt ein delay hinzu*/
    transition: left 0s .6s; /*bei Klick auf ein Control werden alle Slides wieder auf Original-Position geschoben, hier für den ersten relevant. Damit die Aktion erst nach der slides-Verschiebung beginnt, kommt ein delay hinzu*/
}

#slide04:checked ~ .slideList .slide,
#slide104:checked ~ .slideList .slide {
    -webkit-transition-delay: 2s; /* damit er nicht zu früh zurückrutscht */
    transition-delay: 2s; /* damit er nicht zu früh zurückrutscht */
}
.slideList img {
    width: 100%;
    height: auto;
	/* border: none; */
    vertical-align: bottom;
}


/* Zuweisung der Keyframe-Animationen */
.slideList,
.slide,
.slideControl label {
    -webkit-animation: 40s 3s infinite; /* allgemeingültige Werte für die Keyframe-Animation */
    animation: 40s 3s infinite; /* allgemeingültige Werte für die Keyframe-Animation */
}


/* Positionierung und Aufruf der passenden Animation in Abhängigkeit des Status der Radiobuttons */
#slide01:checked ~ .slideList { -webkit-animation-name: slidesStart01; animation-name: slidesStart01; left: 0;}
#slide02:checked ~ .slideList { -webkit-animation-name: slidesStart02; animation-name: slidesStart02; left: -100%;}
#slide03:checked ~ .slideList { -webkit-animation-name: slidesStart03; animation-name: slidesStart03; left: -200%;}
#slide04:checked ~ .slideList { -webkit-animation-name: slidesStart04; animation-name: slidesStart04; left: -300%;}

/* Damit der Wechsel von 01 zu 101, 02 zu 102 usw. klappt, muss jeweils eine andere Animation aufgerufen werden*/
#slide101:checked ~ .slideList { -webkit-animation-name: slidesStart101; animation-name: slidesStart101; left: 0;}
#slide102:checked ~ .slideList { -webkit-animation-name: slidesStart102; animation-name: slidesStart102; left: -100%;}
#slide103:checked ~ .slideList { -webkit-animation-name: slidesStart103; animation-name: slidesStart103; left: -200%;}
#slide104:checked ~ .slideList { -webkit-animation-name: slidesStart104; animation-name: slidesStart104; left: -300%;}

/* Der erste Slide wird jeweils zur rechten Zeit an den Anfang oder das Ende gestellt */
#slide01:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart01; animation-name: slide01ToEndStart01;}
#slide02:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart02; animation-name: slide01ToEndStart02;}
#slide03:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart03; animation-name: slide01ToEndStart03;}
#slide04:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart04; animation-name: slide01ToEndStart04;}

/* Separate Animations-Namen für die zweite Steuerung */
#slide101:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart101; animation-name: slide01ToEndStart101;}
#slide102:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart102; animation-name: slide01ToEndStart102;}
#slide103:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart103; animation-name: slide01ToEndStart103;}
#slide104:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart104; animation-name: slide01ToEndStart104;}

/* Steuerung durch den Benutzer */
.slideControl {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;  /* mittige Ausrichtung der Controls
                            - funktioniert im Zusammenspiel
                            mit inline-block */
}

/* Controls nebeneinander bringen */
.slideControl li {
	margin: 0;
	padding: 0;
	display: inline-block;
    text-indent: -10000px;
}

/* Controls auf einheitliche Maße bringen und die Ecken abrunden */
.slideControl label {
	display: block;
	width: 25px;
	height: 25px;
	margin: .5em 5px;
	border-radius: 50%;
	line-height: 25px;
	text-align: center;
	box-shadow: 1px 1px 1px #0DB1E3;
	color: #2D3035;
	text-indent: -10000px;
	background: #2D3035;
    cursor: pointer;
}

.control01:checked ~ .slideControl01,
.control02:checked ~ .slideControl02 {
    left: -5000px; /* Blendet die nicht benötigten Labels aus */
}


/* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */
.slideControl label:hover {
	background: #0DB1E3!important;
	box-shadow: none!important;
}

#slide01:checked ~ .slideControl label[for="slide101"],
#slide02:checked ~ .slideControl label[for="slide102"],
#slide03:checked ~ .slideControl label[for="slide103"],
#slide04:checked ~ .slideControl label[for="slide104"],
#slide101:checked ~ .slideControl label[for="slide01"],
#slide102:checked ~ .slideControl label[for="slide02"],
#slide103:checked ~ .slideControl label[for="slide03"],
#slide104:checked ~ .slideControl label[for="slide04"] {
   			background: #CDD0D5;
			box-shadow: none;
}


/* 3. Animationen für den Farbwechsel in den Controls  #CDD0D5*/
@keyframes slideControl01 {
    0%, 14.99% {background: #CDD0D5;box-shadow: none;}
    15%, 89.99% {background: #2D3035;box-shadow: 1px 1px 1px #DFEB00;}
    90%, 100% {background: #CDD0D5;box-shadow: none;}
}

@keyframes slideControl101 {
    0%, 14.99% {background: #CDD0D5;box-shadow: none;}
    15%, 89.99% {background: #2D3035;box-shadow: 1px 1px 1px #0DB1E3;}
    90%, 100% {background: #CDD0D5;box-shadow: none;}
}

@keyframes slideControl02 {
    0%, 14.99% {background: #2D3035;box-shadow: 1px 1px 1px #0DB1E3;}
    15%, 39.99%  {background: #CDD0D5;box-shadow: none;}
    40%, 100% {background: #2D3035;box-shadow: 1px 1px 1px #0DB1E3;}
}

@keyframes slideControl102 {
    0%, 14.99% {background: #2D3035;box-shadow: 1px 1px 1px #0DB1E3;}
    15%, 39.99%  {background: #CDD0D5;box-shadow: none;}
    40%, 100% {background: #2D3035;box-shadow: 1px 1px 1px #0DB1E3;}
}

@keyframes slideControl03 {
    0%, 39.99% {background: #2D3035;box-shadow: 1px 1px 1px #0DB1E3;}
    40%, 64.99%  {background: #CDD0D5;box-shadow: none;}
    65%, 100% {background: #2D3035;box-shadow: 1px 1px 1px #0DB1E3;}
}

@keyframes slideControl103 {
    0%, 39.99% {background: #2D3035;box-shadow: 1px 1px 1px #0DB1E3;}
    40%, 64.99%  {background: #CDD0D5;box-shadow: none;}
    65%, 100% {background: #2D3035;box-shadow: 1px 1px 1px #0DB1E3;}
}

@keyframes slideControl04 {
    0%, 64.99% {background: #2D3035;box-shadow: 1px 1px 1px #0DB1E3;}
    65%, 89.99% {background: #CDD0D5;box-shadow: none;}
    90%, 100% {background: #2D3035;box-shadow: 1px 1px 1px #0DB1E3;}
}

@keyframes slideControl104 {
    0%, 64.99% {background: #2D3035;box-shadow: 1px 1px 1px #0DB1E3;}
    65%, 89.99% {background: #CDD0D5;box-shadow: none;}
    90%, 100% {background: #2D3035;box-shadow: 1px 1px 1px #0DB1E3;}
}

#slide01:checked ~ .slideControl label[for="slide101"],
#slide02:checked ~ .slideControl label[for="slide102"],
#slide03:checked ~ .slideControl label[for="slide103"],
#slide04:checked ~ .slideControl label[for="slide104"] {
    animation-name: slideControl01;
}

#slide101:checked ~ .slideControl label[for="slide01"],
#slide102:checked ~ .slideControl label[for="slide02"],
#slide103:checked ~ .slideControl label[for="slide03"],
#slide104:checked ~ .slideControl label[for="slide04"]  {
    animation-name: slideControl101;
}

#slide01:checked ~ .slideControl label[for="slide102"],
#slide02:checked ~ .slideControl label[for="slide103"],
#slide03:checked ~ .slideControl label[for="slide104"],
#slide04:checked ~ .slideControl label[for="slide101"] {
    animation-name: slideControl02;
}

#slide101:checked ~ .slideControl label[for="slide02"],
#slide102:checked ~ .slideControl label[for="slide03"],
#slide103:checked ~ .slideControl label[for="slide04"],
#slide104:checked ~ .slideControl label[for="slide01"]  {
    animation-name: slideControl102;
}

#slide01:checked ~ .slideControl label[for="slide103"],
#slide02:checked ~ .slideControl label[for="slide104"],
#slide03:checked ~ .slideControl label[for="slide101"],
#slide04:checked ~ .slideControl label[for="slide102"]  {
    animation-name: slideControl03;
}

#slide101:checked ~ .slideControl label[for="slide03"],
#slide102:checked ~ .slideControl label[for="slide04"],
#slide103:checked ~ .slideControl label[for="slide01"],
#slide104:checked ~ .slideControl label[for="slide02"]  {
    animation-name: slideControl103;
}

#slide01:checked ~ .slideControl label[for="slide104"],
#slide02:checked ~ .slideControl label[for="slide101"],
#slide03:checked ~ .slideControl label[for="slide102"],
#slide04:checked ~ .slideControl label[for="slide103"] {
    animation-name: slideControl04;
}

#slide101:checked ~ .slideControl label[for="slide04"],
#slide102:checked ~ .slideControl label[for="slide01"],
#slide103:checked ~ .slideControl label[for="slide02"],
#slide104:checked ~ .slideControl label[for="slide03"]  {
    animation-name: slideControl104;
}