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



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

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

/* RÜCKWÄRTS abspielen auf index1.html, index3.html, index5.html */
#slider.reverse {
ANIMATION-DIRECTION:reverse;
}

/* VORWÄRTS und danach RÜCKWÄRTS abspielen auf index6.html */
#slider.alternate {
ANIMATION-DIRECTION:alternate;
}


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

@keyframes slide {

0% { transform: translateX(0)  }
11% { transform: translateX(0) }

12% { transform: translateX(-12.5%) }
23% { transform: translateX(-12.5%) }

24% { transform: translateX(-25%) }
35% { transform: translateX(-25%) }

36% { transform: translateX(-37.5%) }
47% { transform: translateX(-37.5%) }

48% { transform: translateX(-50%) }
59% { transform: translateX(-50%) }

60% { transform: translateX(-62.5%) }
71% { transform: translateX(-62.5%) }

72% { transform: translateX(-75%) }
83% { transform: translateX(-75%) }

84% { transform: translateX(-87.5%) }
100% { transform: translateX(-87.5%) }

}


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




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

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

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

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

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

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

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

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

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



/* = = = = = bildanzeiger = = = = =  */

/*  bildanzeiger icon allgemin */

.pics .fas
.pics .fab,
.pics .far  {color:#fff;
font-size:1.2rem;
text-shadow:1px 1px 1px #000;
}


/*  bildanzeiger icon: aktuelles bild */

.current:before {display:inline-block;
font-family:'Font Awesome 6 Free';/* - 'Font Awesome 6 Free' for Regular and Solid symbols;
                                     - 'Font Awesome 6 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;
color:#fff;
text-shadow:1px 1px 1px black;
padding:0;
margin:0;
font-size:1.2rem;
}


/* bildanzeiger icon: auswahl bilder */

.selection:before {display:inline-block;
font-family:'Font Awesome 6 Free';/* - 'Font Awesome 6 Free' for Regular and Solid symbols;
                                     - 'Font Awesome 6 Brand' for Brand symbols. */
font-weight: 400;/*  Weight of the font (mandatory)
                     - 400 for Regular and Brand 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;
color:#fff;
text-shadow:1px 1px 1px black;
padding: 0;
margin:0;
font-size:1.2rem;
}





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



/* Es gibt 2 Arten von CSS Animationen, nämlich

(1) CSS TRANSITION

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

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

(1)=
- Erlaubt nur 2 Zustände, Anfangs- und Endzustand
- Braucht zur Auslösung einen sog. Trigger (z.b.hover oder focus), in der Regel also eine Mausberührung oder Touch.
- Kein Loop (zb. spiele 8x ab) ist NICHT erlaubt.

(2)=
- Erlaubt die 2 Zustände (bzw. die  sind Pflicht) wie bei 1), dann jedoch viele mögliche Zustände 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.

GEMEINSAM (1. und 2.) HABEN BEIDE :
- Zeitangabe für kompletten Durchlauf
- Zeitverzögernung (delay), also starte erst nach X sec
- Geschwindigkeitssteuerung , verschiedene, wie:
   // starte schnell, ende langsam  (ease-out)
   // starte langsam ende schnell (ease-in)
   // spiele gleichmässig ab (linear)   o.ä. */

/*  = = = = = = = = = = = = = = = = = = = = = = = = = = = */