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

/* diese datei regelt die css-animationen  */


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


@keyframes einblenden {

from {opacity:0}
to {opacity:1}

}




/* ############################################################ */
/* | CSS KEYFRAMES Animation |
/*   move-1 und move-2 */
/* ############################################################ */

@keyframes move-1 {
0%  {transform:  rotate(0deg) }
100%   {transform:  rotate(360deg) }
}

@keyframes move-2 {
0%  {transform:  rotate(0deg) }
100%   {transform:  rotate(-360deg) }
}


/*  ----------------------------------------  */
/*  wrapper-icons-group-1 - hier das rocket-icon                              */
/*  ----------------------------------------  */

.wrapper-icons-group-1  {
POSITION:absolute;z-index:1;
width:720px;height:720px;
top:50%;left:50%;
margin-top:-360px;margin-left:-360px;
text-align:center;font-size:40px;
text-shadow:0 0 1px black;border-radius:36rem;
ANIMATION:move-1  90s  infinite linear;
}

.icons-group-1 {POSITION:absolute;
width:40px;height:40px;
text-shadow:1px 1px 3px black;
}

.wrapper-icons-group-1  i:hover ,
label .icons-group-1:hover {color:red;
}

label .icons-group-1:hover {color:white;cursor:pointer;
}

.icons-group-1.icon-1 {
transform:rotate(-135deg);/* gleicht die urspr. schrästellung des icons aus */
bottom:0%;left:50%;
margin-bottom:-62px;margin-left:0px;
color:#fff;
}



/*  ----------------------------------------  */
/*  wrapper-icons-group-2 - hier der satellite-icon                              */
/*  ----------------------------------------  */

.wrapper-icons-group-2  {
POSITION:absolute;z-index:2;
width:540px;height:540px;
top:50%;left:50%;
margin-top:-270px;margin-left:-270px;
text-align:center;font-size:40px;
text-shadow:0 0 1px black;
ANIMATION:move-2  240s  infinite linear;
}

.icons-group-2 {POSITION:absolute;
width:40px;height:40px;
text-shadow:1px 1px 3px black;
}

.wrapper-icons-group-2  i:hover ,
label .icons-group-2:hover {color:red;
}

label .icons-group-2:hover {color:white;cursor:pointer;
}

.icons-group-2.icon-1 {
top:0%;left:50%;
margin-top:-54px;margin-left:0px;
color:limegreen;
}


/*  ----------------------------------------  */
/*  wrapper-icons-group-3 - hier die 8 icons                              */
/*  ----------------------------------------  */

.wrapper-icons-group-3  {
POSITION:absolute;z-index:3;
width:360px;height:360px;
top:50%;left:50%;
margin-top:-180px;margin-left:-180px;
text-align:center;font-size:40px;
text-shadow:0 0 1px black;
ANIMATION:move-1  120s  infinite linear;
}

.icons-group-3 {POSITION:absolute;
width:40px;height:40px;
text-shadow:1px 1px 3px black;
ANIMATION:move-2  120s  infinite linear;
}

.wrapper-icons-group-3 a i:hover ,
label .icons-group-3:hover {color:white;cursor:pointer; }


.icons-group-3.icon-1 {
top:0%;left:50%;
margin-top:-40px;margin-left:-20px;
color:orangered;
}

.icons-group-3.icon-2 {
top:15%;right:15%;
margin-top:-40px;margin-right:-40px;
color:orange;
}

.icons-group-3.icon-3 {
top:50%;right:0%;
margin-top:-40px;margin-right:-40px;
color:orangered;
}

.icons-group-3.icon-4 {
bottom:15%;right:15%;
margin-bottom:-40px;margin-right:-40px;
color:orange;
}

.icons-group-3.icon-5  {
bottom:0%;left:50%;
margin-bottom:-40px;margin-left:-20px;
color:orangered;
}

.icons-group-3.icon-6 {
bottom:15%;left:15%;
margin-bottom:-40px;margin-left:-40px;
color:orange;
}

.icons-group-3.icon-7  {
top:50%;left:0%;
margin-top:-40px;margin-left:-40px;
color:orangered;
}

.icons-group-3.icon-8 {
top:15%;left:15%;
margin-top:-40px;margin-left:-40px;
color:orange;
}









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

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