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

/* ############################################################ */
/* | 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:0% 50% }
45% {background-position:100% 50%}
50% {background-position:100% 50%}
100% {background-position:0% 50% }
}


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

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

@keyframes move-02 {
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.drei {
animation: move-03 42s linear infinite;
}

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



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

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

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