/*
  Dies ist die Variante, in der nur eine Info/Seite angezeigt wird
*/
.preload {
  width: 100%;
  height: 100%;
  background: #333;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;

  /*
    Die Seite wird nach der in der folgenden Zeile zuletzt definierten
    Dauer ausgeblendet (s. https://www.w3schools.com/css/css3_animations.asp)
    Aktuell: 6s (animation-delay)
  */

/* ------------------------------- */
/* --- VARIANTE: 1 INFO-SCREEN --- */
/* ------------------------------- */
  animation: fadeout2 1s linear 15s; /* Hier wird die Gesamtzeit der Vorschaltseite definiert im letzten Parameter (hier: 11s) */

/* ------------------------------- */
/* --- VARIANTE: 2 INFO-SCREENS --- */
/* ------------------------------- */
/*
  animation: fadeout2 1s linear;
  animation-delay: 18s;
*/

  animation-fill-mode: forwards;
}

.splashinfowrapper {
  /*
    Der Info-Text und die "Sanduhr" werden schon eine Sekunde frueher
    ausgeblendet, damit sie nicht waehrend der Animation sichtbar sind.
  */

/* ------------------------------- */
/* --- VARIANTE: 1 INFO-SCREEN --- */
/* ------------------------------- */
  animation: fadeout 1s linear 14s;
  
/* -------------------------------- */
/* --- VARIANTE: 2 INFO-SCREENS --- */
/* -------------------------------- */
/*
  animation: fadeout 1s linear;
  animation-delay: 18s;
  animation-fill-mode: forwards;
*/

}

.bold {
  font-weight: bolder;
}

.info {
  width: 300px;
  height: 175px;
  margin: 50px auto 50px auto;
  font-size: 20px;
  text-shadow: -1px 2px 2px #000;
  text-align: center;
  color: azure;
}

.info1 {
  animation: fadeout 1s linear;
  animation-delay: 14s;
  animation-fill-mode: forwards;
}

.info1 a {
  font-size: 17px;
}

/* -------------------------------- */
/* --- VARIANTE: 2 INFO-SCREENS --- */
/* -------------------------------- */
/*
.info2 {
  position: relative; top: -200px;
  opacity: 0;
  animation: fadein, fadeout;
  animation-duration: 1s, 1s;
  animation-timing-function: linear;
  animation-delay: 12s, 17s;
  animation-fill-mode: forwards;
}
*/

/*
  Der loader-frame enthaelt die "Sanduhr"
*/
.loader-frame {
  width: 70px;
  height: 70px;
  position: relative;
  margin: 50px auto 50px auto;
  
  animation: fadeout 1s linear;
  animation-delay: 14s;
  animation-fill-mode: forwards;
}
.loader1, .loader2 {
  position: absolute;
  border: 5px solid transparent;
  border-radius: 50%;
}

.loader1 {
  width: 70px;
  height: 70px;
  border-top: 5px solid #0089d0;
  border-bottom: 5px solid #0089d0;
  
/* ------------------------------- */
/* --- VARIANTE: 1 INFO-SCREEN --- */
/* ------------------------------- */
  animation: clockwisespin 4s linear 4; /* Der letzte Parameter definiert die Anzahl der Wiederholungen der Animation */
  
/* -------------------------------- */
/* --- VARIANTE: 2 INFO-SCREENS --- */
/* -------------------------------- */
/*  animation: clockwisespin 5s linear 4;*/

}

.loader2 {
  width: 60px;
  height: 60px;
  border-left: 5px solid #7fc241;
  border-right: 5px solid #7fc241;
  top: 5px; left: 5px;
/* ------------------------------- */
/* --- VARIANTE: 1 INFO-SCREEN --- */
/* ------------------------------- */
  animation: anticlockwisespin 4s linear 4;
/* -------------------------------- */
/* --- VARIANTE: 2 INFO-SCREENS --- */
/* -------------------------------- */
/*  animation: anticlockwisespin 5s linear 4;*/
}

@keyframes clockwisespin {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
@keyframes anticlockwisespin {
  from {transform: rotate(0deg);}
  to {transform: rotate(-360deg);}
}
@keyframes fadeout {
  from {opacity: 1;}
  to {opacity: 0;}
}
@keyframes fadeout2 {
	0% {
		opacity: 1.0;
	}
	100% {
		opacity: 0;
    /* Nun noch dafür sorgen, dass die Links auf der Webseite auch klickbar
       und nicht durch den unsichtbaren Splash-Screen verdeckt werden:     */
		display: none;
		z-index: -1;
	}
}
@keyframes fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}