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




/* ############################################################ */
/* | Animation mit KEYFRAMES | */
/*  hinweis: in dieser vorlage werden gar keine css-keyframes-animationen verwendet */
/* ############################################################ */

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


#sliderTop .pics {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%) }
100% { transform: translateX(-90%) }
}




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

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

.pic-a-001 {background-image:url(../images1/bild1.jpg) }

.pic-a-002 {background-image:url(../images1/bild2.jpg) }

.pic-a-003 {background-image:url(../images1/bild3.jpg) }

.pic-a-004 {background-image:url(../images1/bild4.jpg) }

.pic-a-005 {background-image:url(../images1/bild5.jpg) }

.pic-a-006 {background-image:url(../images1/bild6.jpg) }

.pic-a-007 {background-image:url(../images1/bild7.jpg) }

.pic-a-008 {background-image:url(../images1/bild8.jpg) }

.pic-a-009 {background-image:url(../images1/bild9.jpg) }

.pic-a-010 {background-image:url(../images1/bild10.jpg) }

.pic-a-011 {background-image:url(../images4/bild1.jpg) }

.pic-a-012 {background-image:url(../images4/bild2.jpg) }

.pic-a-013 {background-image:url(../images4/bild3.jpg) }

.pic-a-014 {background-image:url(../images4/bild4.jpg) }

.pic-a-015 {background-image:url(../images4/bild5.jpg) }

.pic-a-016 {background-image:url(../images4/bild6.jpg) }

.pic-a-017 {background-image:url(../images4/bild7.jpg) }

.pic-a-018 {background-image:url(../images4/bild8.jpg) }

.pic-a-019 {background-image:url(../images4/bild9.jpg) }

.pic-a-20 {background-image:url(../images4/bild10.jpg) }

.pic-a-021 {background-image:url(../images2/bild1.jpg) }

.pic-a-022 {background-image:url(../images2/bild2.jpg) }

.pic-a-023 {background-image:url(../images2/bild3.jpg) }

.pic-a-024 {background-image:url(../images2/bild4.jpg) }

.pic-a-025 {background-image:url(../images2/bild5.jpg) }

.pic-a-026 {background-image:url(../images2/bild6.jpg) }

.pic-a-027 {background-image:url(../images2/bild7.jpg) }

.pic-a-028 {background-image:url(../images2/bild8.jpg) }

.pic-a-029 {background-image:url(../images2/bild9.jpg) }

.pic-a-30 {background-image:url(../images2/bild10.jpg) }

.pic-a-031 {background-image:url(../images3/bild1.jpg) }

.pic-a-032 {background-image:url(../images3/bild2.jpg) }

.pic-a-033 {background-image:url(../images3/bild3.jpg) }

.pic-a-034 {background-image:url(../images3/bild4.jpg) }

.pic-a-035 {background-image:url(../images3/bild5.jpg) }

.pic-a-036 {background-image:url(../images3/bild6.jpg) }

.pic-a-037 {background-image:url(../images3/bild7.jpg) }

.pic-a-038 {background-image:url(../images3/bild8.jpg) }

.pic-a-039 {background-image:url(../images3/bild9.jpg) }

.pic-a-40 {background-image:url(../images3/bild10.jpg) }

/* bildanzeiger: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;
text-shadow:0px 0px 2px #000;
color:#fff;
padding: 0;
margin:0;
font-size:2.5rem;
}


/* bildanzeiger: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:"\f192";
font-style: normal;
text-shadow:1px 1px 1px #000;
color:mistyrose;
padding: 0;
margin:0;
font-size:2.5rem;
}


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


#slider .pics {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%) }
100% { transform: translateX(-90%) }
}




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

.pics .inhalt {display:table-cell;
vertical-align:bottom;text-align:center;
padding-bottom:2rem;
}

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

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

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

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

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

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

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

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

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

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

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


/* bildanzeiger: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;
text-shadow:0px 0px 2px #000;
color:#fff;
padding: 0;
margin:0;
font-size:2.5rem;
}


/* bildanzeiger: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:"\f192";
font-style: normal;
text-shadow:1px 1px 1px #000;
color:mistyrose;
padding: 0;
margin:0;
font-size:2.5rem;
}




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

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