/* = = = = = = = = = = = = = = = = = datei animation.css = = = = = = = = = = = = = = = = = = = = = = = = = */

/* diese datei regelt die css-animationen  */



/* ############################################################ */
/* | Animation mit KEYFRAMES  */
/* WENDEN */
/* ############################################################ */

.wenden {
animation: wenden   ;
}

@keyframes wenden {
from {transform: rotateX(0deg); }
to {transform: rotateX(360deg); }
}




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

#slider {
width: 1000%;height:100%;
ANIMATION: slide 100s infinite;
ANIMATION-DIRECTION:normal;
}


#slider div {width: 10%;
float: left;
}


@keyframes slide {
0%  { transform: translateX(0) }
9%  { transform: translateX(0) }
10% { transform: translateX(-10%) }
19% { transform: translateX(-10%) }
20% { transform: translateX(-20%) }
29% { transform: translateX(-20%) }
30% { transform: translateX(-30%) }
39% { transform: translateX(-30%) }
40% { transform: translateX(-40%) }
49% { transform: translateX(-40%) }
50% { transform: translateX(-50%) }
59% { transform: translateX(-50%) }
60% { transform: translateX(-60%) }
69% { transform: translateX(-60%) }
70% { transform: translateX(-70%) }
79% { transform: translateX(-70%) }
80% { transform: translateX(-80%) }
89% { transform: translateX(-80%) }
90% { transform: translateX(-90%) }
99% { transform: translateX(-90%) }
}


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

.pics .inhalt {display:block;
vertical-align:middle;text-align:center;
margin-top:1.2rem;
}


/* = = = = = slideshow-bilder  = = = = =  */

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

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

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

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

.pic-a-05 {background-image:url(../images/picture34.jpg)  }

.pic-a-06 {background-image:url(../images/picture35.jpg)  }

.pic-a-07 {background-image:url(../images/picture36.jpg) }

.pic-a-08 {background-image:url(../images/picture37.jpg) }

.pic-a-09 {background-image:url(../images/picture38.jpg) }

.pic-a-10 {background-image:url(../images/picture39.jpg)  }



/* bildanzeiger icon: 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:0px 0px 1px #000;
color:dodgerblue;
padding:0;
margin:0;
font-size:1.4rem;
}


/* bildanzeiger icon: 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:"\f111";
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
text-decoration: none;
text-shadow:0px 0px 1px #000;
color:white;
padding: 0;
margin:0;
font-size:1.4rem;
}



/* ############################################################ */
/* | Animation mit CSS Transition | */
/* hinweis: eventuelle animationen mit TRANSITION sind direkt in der datei 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.

*/