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

/* diese datei regelt die css-animationen  */


/* ############################################################ */
/* | Animation mit TRANSITION | */
/* BOX-SLIDER */
/* ############################################################ */

.bild {
position:relative;
overflow:hidden;
}

.bild span {font-size:18px;
color:#EFEFEF;
text-shadow:0px 0px 1px #000;
white-space: pre-wrap;
}

.boxslider  {display:table;
position:absolute;
width:100%;
height:100%;
padding:1rem;
margin:0;
background-color: rgba(0,0,0,0.5);
transition: all 0.5s ease-out;
}


/* |||||| (browser-hack) NUR BROWSER CHROME und SAFARI |||||| */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.boxslider {display:inline-block;} }
/* |||||| |||||| */



.boxslider span  {display:table-cell;
vertical-align:middle;
text-align:center;
padding:1rem;
}



/* farben  */

.boxslider.red {
background-color: rgba(250,0,0,0.7);
}

.boxslider.blue {
background-color: rgba(100,150,200,0.8);
}

.boxslider.green {
background-color: rgba(0,150,0,0.7);
}

.boxslider.violet {
background-color: rgba(150,0,150,0.7);
}

/* weitere farben - zur zeit nicht verwendet */

.boxslider.yellow {
background-color: rgba(255,255,0,0.8);
}

.boxslider.orange {
background-color: rgba(250,120,0,0.7);
}


/* - - - absolute positionierung - - - */

.boxslider.pos-top-left {
top:0;left:0;
}

.boxslider.pos-bottom-right {
bottom:0;right:0;
}


/* - - - boxslider hidden - - - */

.boxslider.leftslider {
margin-left:-100rem;
}

.boxslider.topslider {
margin-top:-100rem;
}

.boxslider.rightslider {
margin-right:-100rem;
}

.boxslider.bottomslider {
margin-bottom:-100rem;
}



/* - - - boxslider hover - - -*/
.bild:hover .boxslider {
margin:0;
}



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

#slider { animation: slide 120s infinite;
width: 500%;
height:100%;
}

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


@keyframes slide {

0% { transform: translateX(0);}
17% { transform: translateX(0);}
20% { transform: translateX(-20%);}
37% { transform: translateX(-20%);}
40% { transform: translateX(-40%);}
57% { transform: translateX(-40%);}
60% { transform: translateX(-60%);}
77% { transform: translateX(-60%);}
80% { transform: translateX(-80%);}
100% { transform: translateX(-80%);}

}




/* = = = = = slideshow-bilder und icons (kreise)  = = = = =  */

.pics {
width:100%;height:100%;
overflow:hidden;
background-position:50% 50%;
background-repeat:no-repeat;
text-align:center;
padding:1rem;
margin:0;
animation:back-ani 24s infinite; /* info: innerhalb der animation 'slide' wird hier also die animation 'back-ani' aufgerufen */
}

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

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

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

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

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

/* icon kreise */

#slider ul {
padding:0rem;
margin:0;
}

#slider li {list-style:none;display:inline;
padding:0rem;
margin:0;
}

#slider .pics .fas , #slider .pics .far  {color:#fff;
padding-top:5rem;
font-size:1.2rem;
text-shadow:0px 0px 1px #000;
}

/* icon kreise aktuelles icon (mit bild) */
#slider .pics .seen.fas ,
#slider .pics .seen.far    {color:#CABAB9 }


/* = = = = = = media queries für slideshow = = = = = =*/

@media (min-width: 600px) {

/* icon kreise */
#slider .pics .fas , #slider .pics .far  {padding-top:0rem; }

}

@media (min-width: 1024px) {

#slider .pics {background-size:cover; }

}

/* = = = = = = media queries ENDE = = = = = = */


/* ############################################################ */
/* | CSS KEYFRAMES Animation |
/*   back-ani (kamerafahrt) */
/* ############################################################ */


@keyframes back-ani {

0% {background-position:50% 50%}
25%  {background-position:50% 100%}
50%  {background-position:50% 50%}
75%  {background-position:50% 0%}
87%  {background-position:50% 50%}
100% {background-position:50% 50%}
}






/* ############################################################ */
/* | Animation mit KEYFRAMES | */
/* SLIDESHOW - OBJECT-WECHSLER - tauscht text bei 'einige informationen' */
/* ############################################################ */

#object-changer { animation: object-changer 60s infinite;
width: 400%;
}

.slidebox {
width:100%;width: 25%;
float: left;height:100%;
background:transparent;
text-align:left;
padding:2rem 2rem 3rem 2rem;
margin:0;
}


@keyframes object-changer {

0% { transform: translateX(0);}
24% { transform: translateX(0);}
25% { transform: translateX(-25%);}
49% { transform: translateX(-25%);}
50% { transform: translateX(-50%);}
74% { transform: translateX(-50%);}
75% { transform: translateX(-75%);}
99% { transform: translateX(-75%);}

}


/* icon kreise */

#object-changer  ul {text-align:center;
padding:0rem;
margin:-1rem;
}

#object-changer li {list-style:none;display:inline;
padding:0rem;
margin:0;
}

#object-changer  .slidebox .fas , #slider-objects  .slidebox .far  {color:#fff;
padding-top:0rem;
font-size:1.2rem;
text-shadow:0px 0px 1px #000;
}

/* icon kreise - aktuell (zeigt per icons das aktuelle bild an) */
#object-changer  .slidebox .seen.fas ,
#object-changer  .slidebox .seen.far    {color:#A3CCA2; }



-------------------------------------------









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

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