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

/* diese datei regelt die css-animationen  */

/* ############################################################ */
/* | Animation mit KEYFRAMES | */
/* EINBLENDEN */
/* ############################################################ */


@keyframes einblenden {
from {opacity:0}
to {opacity:1}
}



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

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

#slider div {height:100%;
display:table;
}

@keyframes slide {
0% { transform: translateY(0);}
17% { transform: translateY(0);}
20% { transform: translateY(-100%);}
37% { transform: translateY(-100%);}
40% { transform: translateY(-200%);}
57% { transform: translateY(-200%);}
60% { transform: translateY(-300%);}
77% { transform: translateY(-300%);}
80% { transform: translateY(-400%);}
100% { transform: translateY(-400%);}
}

.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:table-cell;vertical-align:middle;text-align:left;
padding-left:1rem;box-shadow: inset 0 0 4px  #000;
}

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

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

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

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

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

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



/* === bildschirmabfrage für slider ===*/
/* ==================================== ab 760 pixel ================================== */
@media (min-width: 760px) {
#slider {height:38rem;  }
}
/* === ENDE bildschirmabfrage für slider === */



/* bildanzeiger icon: aktuelles bild */

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


/* bildanzeiger icon: auswahl bilder */

.selection:before {display: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;
text-shadow:1px 1px 1px #000;
color:#89CFFA;
padding: 0;
margin:0;
font-size:3rem;
}



/* ############################################################ */
/* | Animation mit KEYFRAMES | */
/*  OBJECT-WECHSLER - tauscht text bzw. bilder */
/* ############################################################ */


.slidebox {
width: 25%;
float: left;
background:transparent;
text-align:left;
padding:3rem 2rem 2rem 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%);}
}

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


/* 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,
#object-changer  .slidebox .far {color:#fff;
padding:0;
font-size:1.2rem;
width:1.5rem;
height:3rem;
line-height:3rem;
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:steelblue; }




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

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