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



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


.pic-a-01 {background-image:url(../images/medium_picture1085.jpg);
animation:show1 infinite 60s;  }

.pic-a-02 {background-image:url(../images/medium_picture1084.jpg);
animation:show2 infinite 60s; }

.pic-a-03 {background-image:url(../images/medium_picture447.jpg);
animation:show3 infinite 60s;  }

.pic-a-04 {background-image:url(../images/glueck_kommunikation_trainings_medium_picture809.png);
animation:show4 infinite 60s; }


@keyframes show1 {
0% {opacity:1;}
20% {opacity:1;}
25% {opacity:0;}
95% {opacity:0;}
}

@keyframes show2{
0% {opacity:0;}
20% {opacity:0;}
25% {opacity:1;}
45% {opacity:1;}
50% {opacity:0;}
95% {opacity:0;}
}

@keyframes show3 {
0% {opacity:0;}
45% {opacity:0;}
50% {opacity:1;}
70% {opacity:1;}
75% {opacity:0;}
95% {opacity:0;}
}

@keyframes show4 {
0% {opacity:0;}
70% {opacity:0;}
75% {opacity:1;}
100% {opacity:1;}
}



.pics {height:40rem;position:absolute;
display:flex; justify-content:flex-end; align-items:flex-end;
padding:0rem;
margin:0rem;
width:100%;
overflow:shidden;
padding: 0rem;
background-repeat:no-repeat;
background-position:50% 50%;
background-size:cover;
}

.slider-inhalt {display:inline-block;
padding: 1rem 1.5rem;
}


/* 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 Brands' for Brands symbols. */
font-weight: 900;/*  Weight of the font (mandatory)
                     - 400 for Regular and Brands symbols;
                     - 900 for Solid symbols. */
content:"*";
font-style: normal;
text-shadow:0px 0px 1px #000;
color:#fff;
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 Brands' for Brands symbols. */
font-weight: 900;/*  Weight of the font (mandatory)
                     - 400 for Regular and Brands symbols;
                     - 900 for Solid symbols. */
content:"*";
font-style: normal;
text-shadow:0px 0px 1px #000;
color:#fff;
padding: 0;
margin:0;
font-size:1.2rem;
}



/* ############################################################ */
/* M E D I A   Q U E R I E S */
/* CSS Bildschirmabfragen */
/* ############################################################ */

/* ==================================== ab 480 pixel ================================== */
@media (min-width: 480px) {

.pics {height:85vh; }

}


/* ==================================== ab 760 pixel ================================== */
@media (min-width: 760px) {

.pics  {height:36rem; }

}





/* ############################################################ */
/* | 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 */
/* ############################################################ */



/* 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.ä. */

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