#popup {
  /**background-image: url(https://www.artpunk.eu/data/images/ap_f2.gif);		/** Hintergrundbild **/**/
  background-size: cover;				/** Hintergrundbild Responsive Darstellung **/
  position:fixed;						/** Fixiert (scrollt nicht mit) Alternative "position:absolute;" **/
  width:600px;						/** Breite des Fensters **/
  left:30%;							/** Position von Links **/
  top:30%;						/** Position von Oben **/
  padding:40px 40px;					/** Textabstand zum Fensterrand **/
  color:#fff;					/** Textfarbe **/
  font-size: 16px;					/** Schriftgröße **/
  border-radius:;					/** Runde Ecken **/
  border-width:;					/** Rahmenbreite **/
  border-style:;					/** Positionstil **/
  border-color:;				/** Rahmenfarbe **/
  z-index:20000; 					/** Überlagerung **/
  transition: all 1000ms ease-out 600ms;
background: rgba(197, 0, 123, 0.7);
text-transform: uppercase;
border: 1px solid #fff;	
  cursor:pointer;						/** Klickbar**/
z-index:1000;
}

	/** Überschrift H2 innerhalb des Popups **/
#popup h2 {
  color:#fff;					/** Schriftfarbe**/
  font-size:22px;						/** Schriftgröße **/
  font-weight:normal;					/** Schrift Fett **/
  text-transform: uppercase;

}
	/** definiert den Hintergrund der Texte **/
/**.hintergrund {

}
  
	/** Definiert den Schließen.Button **/
#close{
  position:absolute;					/** Fixiert (scrollt nicht mit) **/
  background:#c5007b;				/** Hintergrundfarbe **/
  color:#fff;						/** Farbe des Kreuzes **/
  right:-15px;						/** Position**/
  top:-15px;						/** Position**/
  border-radius:50%;					/** Rund**/
  width:30px;						/** Größe**/
  height:30px;						/** Größe**/
  line-height:30px;					/** Größe**/
  text-align:center;					/** Zentriert**/
  font-size:15px;						/** Größe**/
  font-weight:bold;					/** Fett**/
  cursor:pointer;						/** Klickbar**/
  border: 1px solid #fff;
}

#closed {cursor:pointer;}
	/** Definiert die Link-Button **/
.button-popup {
  width:50px;						/** Breite**/
  border-radius: 10px;				/** Runde Ecken**/
  color: #c5007b;						/** Schriftfarbe**/
  font-size: 16px;					/** Schriftgröße**/
  background: #fff;				/** Hintergrundfarbe**/
  padding: 3px 6px 3px 6px;			/** Abstand zum Rand**/
  text-decoration: none;				/** Nicht unterstreichen**/
  text-align:center;					/** Zentriert**/
  cursor:pointer;						/** Klickbar**/

}
	/** Definiert die Link-Button Hover **/
.button-popup:hover {
  background: #c5007b;				/** Hintergrundfarbe**/
  color: #ffffff;						/** Schriftfarbe**/
  text-decoration: none;				/** Nicht unterstreichen**/
  cursor:pointer;						/** Klickbar**/

}
	/** Definiert wann und wie das Fenster eingeblendet wird **/
.einblenden {
animation-name: einblenden;
animation-duration: 1s;				/** 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;
}}

/********************* POPUP MOBILE-Ansicht *********************/
#popup-mobile {
  transition: all 1000ms ease-out 600ms;
  background: rgba(197, 0, 123, 0.7);
  position:fixed;
  width:200px;
  left:10px;
  top:25px;
  padding:20px 10px;
  color:#fff;
  font-size: 14px;
  border-radius:;
  border-width:;
  border-style:;
  border-color:;
  z-index:20000; 
  border: 1px solid #fff;
    cursor:pointer;						/** Klickbar**/

}
#popup-mobile h2 {
  color:#fff;
  font-size:20px;
}
#close-mobile{
  position:absolute;
  background:#c5007b;
  color:#fff;
  right:-15px;
  top:-15px;
  border-radius:50%;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  font-size:15px;
  font-weight:bold;
  cursor:pointer;
  border: 1px solid #fff;
}
.button-popup-mobile {
  width:50px;
  border-radius: 7px;
  color: #c5007b;
  font-size: 14px;
  background: #fff;
  padding: 2px 4px 2px 4px;
  text-decoration: none;
  text-align:center;cursor:pointer;
}
.button-popup-mobile:hover {
  text-decoration: none;cursor:pointer;
}
	/** Definiert wann Fenster eingeblendet wird (Bildschirmbreite) **/
@media (min-width: 978px) {
#popup-mobile {
display:none;
  cursor:pointer;						/** Klickbar**/

}}
</style>