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

/* diese datei regelt die css-animationen  */


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

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

#slider div {width: 14.28%;
float: left;
}

@keyframes slide {

0% { transform: translateX(0)}
13% { transform: translateX(0)}

14% { transform: translateX(-14.28%) }
27% { transform: translateX(-14.28%) }

28% { transform: translateX(-28.56%) }
41% { transform: translateX(-28.56%) }

42% { transform: translateX(-42.83%) }
55% { transform: translateX(-42.83%) }

56% { transform: translateX(-57.12%) }
69% { transform: translateX(-57.12%) }

70% { transform: translateX(-71.40%) }
83% { transform: translateX(-71.40%) }

84% { transform: translateX(-85.68%) }
99% { transform: translateX(-85.68%) }

}

.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;
padding-bottom:1rem;
}

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

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

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

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

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

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

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

.pic-a-07 {background-image:url(../images/logo07.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:"\f182";
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
text-decoration: none;
text-shadow:0px 0px 2px #000;
color:#fff;
padding: 0;
margin:0;
font-size:3rem;
}


/* 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:"\f183";
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
text-decoration: none;
text-shadow:1px 1px 1px #000;
color:gold;
padding: 0;
margin:0;
font-size:3rem;
}


/* - - - schalter für PAUSE/PLAY bei der slideshow - - - */

.slider-schalter {display:block;height:100%;
}

/* pause-schalter formatierung   */
.slider-schalter label.button-pause  {display:inline-block;
POSITION: absolute;z-index:1;
bottom:1.5rem;right:.5rem;
color:black;
transition:opacity 1s;
}

/* play-schalter formatierung   */
.slider-schalter label.button-play  {display:inline-block;
POSITION: absolute;z-index:1;
bottom:1.5rem;right:.5rem;
color:limegreen;
opacity:0;
transition:opacity 1s;
}

.slider-schalter .fas {display:inline-block;
margin:0rem;
padding: 0;
font-size:3rem;
width:4rem;
height:4rem;
line-height:4rem;
text-align:center;
text-shadow:0 0 1px black;
cursor:pointer;color:white
}

/* hover bei pause-schalter  */

.slider-schalter label.button-pause:hover .fas{
color:gold;
}


/* - - - toggle-switch-funktion - - - */

/* checkbox versteckt */
input#pause-play {display: none; }

/* schaltet pause ein/aus */
input#pause-play:checked ~ label.button-pause  {opacity:0;
transition:all 1s;
}

/* schaltet play ein/aus */
input#pause-play:checked ~ label.button-play  {opacity:1;
transition:all 1s;
}

/* schaltet bei der animation den 'animation-play-state' auf paused bzw. run (default) */
input#pause-play:checked ~ #slider  {animation-play-state: paused;
}


/* ############################################################ */
/* | Animation mit KEYFRAMES | */
/* Changecolor - bei hover Abschnitt Secundus */
/* ############################################################ */

@keyframes changecolor {

25% {background:
radial-gradient(black 50%, transparent 50%) 0 0,
radial-gradient(black 50%, transparent 50%) 16px 16px,
radial-gradient(rgba(255,255,255, 0.1) 15%, transparent 15%) 0 1px;
background-color: orange;
background-size: 32px 32px; ) }

50% {background:
radial-gradient(black 50%, transparent 50%) 0 0,
radial-gradient(gree 50%, transparent 50%) 16px 16px,
radial-gradient(rgba(255,255,255, 0.1) 15%, transparent 15%) 0 1px;
background-color: green;
background-size: 32px 32px; )}

75% {background:
radial-gradient(green50%, transparent 50%) 0 0,
radial-gradient(black 50%, transparent 50%) 16px 16px,
radial-gradient(rgba(255,255,255, 0.1) 15%, transparent 15%) 0 1px;
background-color: yellow;
background-size: 32px 32px; )}

100% {background:
radial-gradient(green 50%, transparent 50%) 0 0,
radial-gradient(green 50%, transparent 50%) 16px 16px,
radial-gradient(rgba(255,255,255, 0.1) 15%, transparent 15%) 0 1px;
background-color: yellowgreen;
background-size: 32px 32px; )}

}




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


/*

CSS-Animationen ermöglichen auf einfache Art, was frueher nur mit der komplizierteren Flash- oder Javascript-Technik zu bewältigen war.


Es gibt 2 Arten von CSS Animationen, naemlich

(1) CSS TRANSITION

(2) CSS ANIMATION (auch KEYFRAMES-ANIMATION genannt).

Bei einer einfachen Animation wie z.b Drehung um 360grad bei Mouseover (hover) ausgeloest,
kann man von aussen nicht erkennen, ob diese mit (1) oder (2) gemacht ist.

(1) =
- Erlaubt nur 2 Zustaende, Anfangs- und Endzustand
- Braucht zur Ausloesung einen sog. Trigger (z.b.hover oder focus), in der Regel also eine Mausbeuerung oder Touch.
- Kein Loop gestattet (zb. spiele 8x ab ist NICHT erlaubt).
- Spielt unendlich ab (infinite).

(2) =
- Erlaubt die 2 Zustaende (bzw. die  sind Pflicht) wie bei 1), dann jedoch viele mogliche Zustaende 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.
- Spielt unendlich ab (infinite).

GEMEINSAM (1. und 2.) HABEN BEIDE  bezueglich der Anfangs-oder Endgeschwindigkeit:
- Zeitangabe fuer kompletten Durchlauf
- Zeitverzoegernung (delay), also starte erst nach X sec
- Geschwindigkeitssteuerung , verschiedene, wie :
// starte schnell, ende langsam  (ease-out)
// starte langsam ende schnell (ease-in)
// spiele gleichmaessig ab (linear) o.a.

*/