@charset "utf-8";

/* ---------------------------------- body --------------------------------- */


body {
  background-color: #232323;
  height: 100%;
  background-image: url('../images/hintergrund.jpg');
  background-repeat: repeat;
  margin-left: auto;
  margin-right: auto;
  width: 950px;
  font-size: 14px;
}

/* ---------------------------------- body end --------------------------------- */


/* ---------------------------------- menue --------------------------------- */

#menue {
	font-family: verdana, Helvetica, sans-serif;
	text-align: center;
	width: 950px;
	height: 19px;
	margin-top: 7px;
	text-align: center;
	background-color: #232323;	
}

#menue span {
	font-weight: normal;
	border-bottom-style: solid;
	border-top-style: solid;
	border-width: 1px;
	display: block;
}

#menue a {
	font-weight: normal;
	text-decoration: none;

}

/* ---------------------------------- menue end --------------------------------- */


/* ---------------------------------- slide --------------------------------- */

#slide-center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 950px;
}

#slide-content {
	float: center;
	margin-top: 30px;
	width: 750px;
	background-image: url("images/hintergrund.jpg");
}

.mySlides {display:none;}

/* ---------------------------------- slide end --------------------------------- */


/* ---------------------------------- headtitle --------------------------------- */

#headtitle {
	margin-top:20px;
	text-align: center;
	width: 950px;
}

/* ---------------------------------- headtitle end --------------------------------- */


/* ---------------------------------- hometext --------------------------------- */

#text-center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 950px;
}

#text {
  margin-top: 10px;
  float: center;
  display: inline-block;
  width: 750px;
}

/* ---------------------------------- hometext end --------------------------------- */


/* ---------------------------------- inhalt-center --------------------------------- */

#inhalt-center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  width: 950px;
}

/* ---------------------------------- inhalt-center end --------------------------------- */


/* ---------------------------------- text --------------------------------- */

* {
  font-family: verdana, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px; 
  margin: 0;
  padding: 0;
  color: #ffffff;
}

/* ---------------------------------- text end --------------------------------- */


/* ---------------------------------- text-title end --------------------------------- */

#text-title {
  font-family: verdana, Helvetica, sans-serif;
  font-size: 12px;
  color: #ff1313;
}

/* ---------------------------------- text-title end --------------------------------- */

/* ---------------------------------- text-mark end --------------------------------- */

#text-mark {
  font-family: verdana, Helvetica, sans-serif;
  font-size: 14px;
  color: #ff1313;
}

/* ---------------------------------- text-mark end --------------------------------- */


/* ---------------------------------- table-border-color --------------------------------- */

#table-border-color {
	background-color: #232323;
	//background-color: #a50205;
	border-bottom-style: solid;
	border-top-style: solid;
	border-left-style: none;
	border-right-style: none;
	border-width: 1px;
}

/* ---------------------------------- table-border-color end --------------------------------- */


/* ---------------------------------- table-color-grey --------------------------------- */

#table-color-grey {
	background-color: #232323;
}

/* ---------------------------------- table-color-grey end --------------------------------- */


/* ---------------------------------- h1,h2,h3--------------------------------- */

h1, h2, h3, p, blockquote {
  margin-bottom: 1em;
}

h1 {
  font-size: 20px;
  color: #ffffff;
}

h2 {
  font-size: 18px;
  color: #ffffff;
}

h3 {
  font-size: 16px;
  color: #ffffff;
}

/* ---------------------------------- h1, h2, h3 end --------------------------------- */


/* ---------------------------------- a --------------------------------- */

a {
	color: #ffffff;
	text-decoration: none;
}

/* ---------------------------------- a end --------------------------------- */


/* ---------------------------------- footer --------------------------------- */

#footer {

  width: 950px;
  z-index: 999;
  float:left;
  height: 30px;
  margin-bottom: 15px;
  margin-top: 20px;
  text-align: center;
  vertical-align: middle;
}


#footer, #footer a, #footer a:link, #footer a:visited, #footer a:active {
  text-decoration: none;
}

/* ---------------------------------- footer end --------------------------------- */

/* ---------------------------------- popup begin --------------------------------- */

	/** definiert das Fenster **/
#popup {
  background-color: white;	 			/** Hintergrundbild **/
  position:fixed;					/** Fixiert (scrollt nicht mit) Alternative "position:absolute;" **/
  width:650px;						/** Breite des Fensters **/
  left:30%;						/** Position von Links **/
  top:10%;						/** Position von Oben **/
  padding:20px 10px;					/** Textabstand zum Fensterrand **/
  color:#006600;					/** Textfarbe **/
  font-size: 16px;					/** Schriftgröße **/
  border-radius:10px;					/** Runde Ecken **/
  border-width:2px;					/** Rahmenbreite **/
  border-style:solid;					/** Positionstil **/
  border-color:#000000;					/** Rahmenfarbe **/
  z-index:20000; 					/** Überlagerung **/
}

	/** Überschrift H2 innerhalb des Popups **/
#popup h2 {
  color:#ffffff;					/** Schriftfarbe**/
  font-size:22px;					/** Schriftgröße **/
  font-weight:bold;					/** Schrift Fett **/
}
	/** definiert den Hintergrund der Texte **/
.hintergrund {
  background: black; 	/** Hintergrund Weiss, 80% Durchscheinend**/
  padding:12px;						/** Textabstand zum Rand**/
  border-radius:5px;					/** Runde Ecken **/
  border-width:1px;					/** Rahmenstärke**/
  border-style:solid;					/**Rahmenstil **/
  border-color:#000000;					/** Rahmenfarbe **/
  font-weight:bold;					/** Schrift Fett **/
  margin:20px;						/** Abstand zum Fensterrand **/
}
	/** Definiert den Schließen.Button **/
#close{
  position:absolute;					/** Fixiert (scrollt nicht mit) **/
  background:#000000;					/** 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**/
  font-family:'Arial Black', Arial, sans-serif;		/** Schriftart**/
  cursor:pointer;					/** Klickbar**/
}
	/** Definiert die Link-Button **/
.button-popup {
  width:50px;						/** Breite**/
  border-radius: 10px;					/** Runde Ecken**/
  color: #000000;					/** Schriftfarbe**/
  font-size: 16px;					/** Schriftgröße**/
  background: #000000;					/** Hintergrundfarbe**/
  padding: 3px 6px 3px 6px;				/** Abstand zum Rand**/
  text-decoration: none;				/** Nicht unterstreichen**/
  text-align:center;					/** Zentriert**/
}
	/** Definiert die Link-Button Hover **/
.button-popup:hover {
  background: #009900;					/** Hintergrundfarbe**/
  color: #000000;					/** Schriftfarbe**/
  text-decoration: none;				/** Nicht unterstreichen**/
}
	/** 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 end --------------------------------- */