/* = = = = = = = = = = = = = = = = = Datei animation.css = = = = = = = = = = = = = = = = = = = = = = = = = */

/* diese Datei regelt die CSS-Animationen  */


/* ############################################################ */
/* Animation mit KEYFRAMES  								    */
/* SLIDESHOW - BILDWECHSLER 								    */
/* ############################################################ */

#slider {
	/* animation: slide 60s infinite; */
	width: 100%;
	height: 100%;
	animation-direction: normal;
}


#slider div {
	width: 100%;
	float: left;
	display: table;
}

@keyframes slide {
	
	0% {transform: translateX(0);}
	22% {transform: translateX(0);}
	25% {transform: translateX(-25%);}
	47% {transform: translateX(-25%);}
	50% {transform: translateX(-50%);}
	72% {transform: translateX(-50%);}
	75% {transform: translateX(-75%);}
	100% {transform: translateX(-75%);}

}

.pics {
	display: table;
	padding: 0rem;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.pics .inhalt {
	display: table-cell;
	vertical-align: bottom;
	padding-bottom: 1rem;
}

/* = = = = = Slideshow Bilder  = = = = =  */

.pic-a-01 {
	background-image: url(../images/slider-1.jpg);
}

.pic-a-02 {
	background-image: url(../images/slider-2.jpg);
}

.pic-a-03 {
	background-image: url(../images/slider-3.jpg);
}

.pic-a-04 {
	background-image: url(../images/slider-4.jpg);
}


/* Bildanzeiger: Aktuelles Bild */

.current:before {
	display: inline-block;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brand' for Brands symbols. */
	font-weight: 900; /*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f111";
	font-style: normal;
	font-variant-caps: normal;
	font-variant-ligatures: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	text-decoration: none;
	text-shadow: 1px 1px 1px #000;
	color: #fff;
	padding: 0;
	margin: 0;
}


/* Bildanzeiger: Auswahl Bilder */

.selection:before {
	display: inline-block;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brand' for Brands symbols. */
	font-weight: 900; /*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f192";
	font-style: normal;
	font-variant-caps: normal;
	font-variant-ligatures: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	text-decoration: none;
	text-shadow: 1px 1px 1px #000;
	color: #fff;
	padding: 0;
	margin: 0;
}


/* div Slider */

.Slide {
	transition: all 2s ease-in-out;
	-webkit-transition: all 2s ease-in-out;
	-moz-transition: all 2s ease-in-out;
	-o-transition: all 2s ease-in-out;
}

.Slide, .HiddenSlide {
	opacity: 0;
	height: 0px;
	overflow: hidden;
}

.VisibleSlide {
	opacity: 1;
	height: auto;
}



/* ############################################################################################################### */
/* Animation mit CSS Transition 																				   */
/* Hinweis: eventuelle Animationen mit TRANSITION sind direkt in der Datei MENUE.CSS bzw. FORMAT.CSS angelegt      */
/* ############################################################################################################### */




/* ###################################################################### */
/* NACHFOLGEND NUR INFORMATION FÜR SIE 								      */
/* Kurzer Überblick: ANIMATIONEN mit CSS Keyframes und CSS Transition     */
/* ###################################################################### */


/*

CSS-Animationen ermöglichen auf einfache Art, was frueher nur mit der komplizierteren Flash- oder Javascript-Technik zu bewältigen war.


Es gibt 2 Arten von CSS Animationen, naemlich

(1) CSS TRANSITION

(2) CSS ANIMATION (auch KEYFRAMES-ANIMATION genannt).

Bei einer einfachen Animation wie z.b Drehung um 360grad bei Mouseover (hover) ausgeloest,
kann man von aussen nicht erkennen, ob diese mit (1) oder (2) gemacht ist.

(1) =
- Erlaubt nur 2 Zustaende, Anfangs- und Endzustand
- Braucht zur Ausloesung einen sog. Trigger (z.b.hover oder focus), in der Regel also eine Mausbeuerung oder Touch.
- Kein Loop gestattet (zb. spiele 8x ab ist NICHT erlaubt).
- Spielt unendlich ab (infinite).

(2) =
- Erlaubt die 2 Zustaende (bzw. die  sind Pflicht) wie bei 1), dann jedoch viele mogliche Zustaende dazwischen, eben Keyframes, wie beim Film.
- Startet im Gegensatz zu 1) auch automatisch (z.b. Foto-Slideshow) beim Laden der Seite.
- Loop-Angabe ist ERLAUBT.
- Spielt unendlich ab (infinite).

GEMEINSAM (1. und 2.) HABEN BEIDE  bezueglich der Anfangs-oder Endgeschwindigkeit:
- Zeitangabe fuer kompletten Durchlauf
- Zeitverzoegernung (delay), also starte erst nach X sec
- Geschwindigkeitssteuerung , verschiedene, wie :
// starte schnell, ende langsam  (ease-out)
// starte langsam ende schnell (ease-in)
// spiele gleichmaessig ab (linear) o.a.

*/