/* ******************** POPUP DESKTOP-Ansicht (https://www.zella.de/code/css-fenster-nach-dem-laden.html) ******************** */

/* *** definiert das Fenster *** */
#popup {
  position: fixed;					/** Fixiert (scrollt nicht mit) Alternative "position:absolute;" **/
  width: 100px;						/** Breite des Fensters **/
  right: 11%;						/** Position von Links **/
  top: 130px;						/** Position von Oben **/
  padding: 20px 10px;				/** Textabstand zum Fensterrand **/
  z-index: 3000; 					/** Überlagerung **/
}


/* *** Definiert den Schließen.Button *** */
#close {
  background: url("../../images/icons/Xbutton1.png") center no-repeat;  /** X oben rechts **/
  position: absolute;							   /** Fixiert (scrollt nicht mit) **/
  right: -28px;						               /** Position**/
  top: -18px;						               /** Position **/
  cursor: pointer;					               /** Klickbar **/
  z-index: 2001; 					               /** Überlagerung **/
}


/* *** Definiert den Schließen.Button *** */
#close:hover {
  background: url("../../images/icons/Xbutton2.png") center no-repeat;  /** X oben rechts **/
}


/* *** Definiert wann und wie das Fenster eingeblendet wird *** */
.einblenden {
animation-name: einblenden;
animation-duration: 4s;						/** Gesammte Zeit der Animation **/
animation-iteration-count: 1;				/** Anzahl der Wiederholungen **/
animation-timing-function: ease-in-out;
}
@keyframes einblenden {
from {transform:translate(0, -500px);}	/** Startposition **/
50% {transform:translate(0, -500px);}	/** Position nach 50% der Zeit (0.5 Sec) **/
85% {transform:translate(0, 50px);}		/** Position nach 80% der Zeit (0.8 Sec) **/
to {transform: translate(0, -0px);} 	/** Endposition **/
}

/* *** Definiert wann Fenster ausgeblendet wird (Bildschirmbreite) *** */
@media (max-width: 979px) {
#popup {
display:none;
}}