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

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

#slider {
animation-duration: 30s;
animation-iteration-count: infinite;
animation-name: slide;	
animation-fill-mode: forwards;	
/*animation: slide 40s infinite linear;*/
width: 400%;
height:100%;
/*animation-direction:alternate;*/
}

#slider div {width: 25%;
float: left;display:table;
}

@keyframes slide {

0% { transform: translateX(0);}
22% { transform: translateX(0);}
25% { transform: translateX(-25%);}
47% { transform: translateX(-25%);}
50% { transform: translateX(-50%);}
72% { transform: translateX(-50%);}
75% { transform: translateX(-75%);}
97% { transform: translateX(-75%);}
}


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

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

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

.pic-a-01 {background-image:url(../images/slider/logo-bg01.jpg); }
.pic-a-02 {background-image:url(../images/slider/logo-bg02.jpg); }
.pic-a-03 {background-image:url(../images/slider/logo-bg03.jpg); }
.pic-a-04 {background-image:url(../images/slider/logo-bg04.jpg); }


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

/*  bildanzeiger icon allgemein */
.pics i {display:inline-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 Brand symbols;
                     - 900 for Solid symbols. */
font-size:1.8rem;
color:#fff;
font-style:normal;
text-shadow:1px 1px 1px #000;
padding: 0;
margin:0;
}

/* bildanzeiger icon - auswahl bilder */
.pics i:before {content:"\f192"; }

/*  bildanzeiger icon - aktuelles bild */
.pics .zeiger:before {font-weight: 900; content:"\f111"; }



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

.action-btn a:hover ,.action-btn label:hover {
animation: m-2  .5s ease-out  ;
}

@keyframes m-2 {
0% {transform:translate(0) }
50% {transform:translate(10px) }
100% {transform:translate(0) }
}



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

.container-animation.eins {
animation: move-01 40s linear infinite;
}

@keyframes move-01 {
0% {background-position:50% 0% }
45% {background-position:50% 100%}
50% {background-position:50% 100%}
100% {background-position:50% 0% }
}


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

.container-animation.zwei {
animation: move-02 38s linear infinite;
}

@keyframes move-02 {
0% {background-position:0% 0% }
25% {background-position:50% 50%}	
49% {background-position:100% 100%}
51% {background-position:100% 100%}
75% {back´ground-position: 50% 50%}	
100% {background-position:0% 0% }
}


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

.container-animation.drei {
animation: move-03 42s linear infinite;
}

@keyframes move-03 {
0% {background-position:0% 0% }
25% {background-position:50% 50%}	
49% {background-position:100% 100%}
51% {background-position:100% 100%}
75% {back´ground-position: 50% 50%}	
100% {background-position:0% 0% }
}



/* ############################################################ */
/* | Animation mit CSS-KEYFRAMES | */
/* CSS-Hintergrund bei 'Kontakt'  */
/* ############################################################ */

#gardinen {
animation: bg-stripes-ani  30s infinite ;
}

#kontakt {
animation: bg-stripes-ani  30s infinite ;
}

@keyframes bg-stripes-ani {
50%  {background-size: 130px, 300px, 500px, 800px; background-color:peru}
100% {background-size: 230px, 490px, 870px, 930px; }
}


/* ############################################################ */
/* | Animation mit CSS-KEYFRAMES | */
/* Hintergrund im Kopfbereich  */
/* ############################################################ */


@keyframes bg-radial-ani {
20%  {background:radial-gradient(circle at 50% 100%, transparent 150px,  transparent 150px,saddlebrown) }
40%  {background:radial-gradient(circle at 50% 100%, transparent 150px,  transparent 150px,burlywood); }
60%  {background:radial-gradient(circle at 50% 100%, transparent 150px,  transparent 150px,lightgrey) }
80%  {background:radial-gradient(circle at 50% 100%, transparent 150px,  transparent 150px,peru); }
100% {background:radial-gradient(circle at 50% 100%, transparent 150px,  transparent 150px,black); }
}

/* ==== ausgelöst permedia queries ab 760 pixel ==== */

@media (min-width: 760px) {

.logobox-b {
animation: bg-radial-ani  20s 2s 1 ; }

}


/* ############################################################ */
/* | Animation mit CSS Transition | */
/* Animation brackets  */
/* ############################################################ */


.effect-brackets a::before,
.effect-brackets a::after {
display: inline-block;
opacity: 0;
transition: transform 0.3s, opacity 0.2s;
}

.effect-brackets a::before {
margin-right: 8px;
content: '[';
transform: translateX(20px);
}

.effect-brackets a::after {
margin-left: 8px;
content: ']';
transform: translateX(-20px);
}

.effect-brackets a:hover::before,
.effect-brackets a:hover::after,
.effect-brackets a:focus::before,
.effect-brackets a:focus::after {
opacity: 1;
transform: translateX(0px);
}



/* ############################################################ */
/* | Animation mit CSS Transition | */
/* Hinweis: eventuelle weitere 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.ä. */

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