/*	Universelle Einstellungen																	*/
* { 													/*	Alle Abstände aufbeben					*/
    margin: 0; 
    padding: 0; 
}
*, ::before, ::after { 								/* Box-Style wählen 						*/
  box-sizing: border-box; 
}

/*	BODY Einstellungen																			*/
@media only screen and ( min-width: 1000px ){		/* Desktop 									*/
body {
	background-color: #000000;
	background: url(image/skull.jpg);
	text-align: center;
	}
}
@media only screen and ( max-width: 999px )	{		/* Für Handy 								*/
body {
	background-color: #000000;
	background: url(image/carbon.jpg);
	text-align: center;
	}
}

/*	DIV-Container Einstellungen																	*/
@media only screen and ( min-width: 1000px ){		/* Vorlage für Desktop 						*/

}
@media only screen and ( max-width: 999px )	{		/* Vorlage für Handy 						*/

}

@media only screen and ( min-width: 1000px ){		/* website für Desktop 						*/
#website {
	background-color: #19DBE1;
	max-width: 1400px;
	min-width: 1000px;
	width: 90%;
	height: auto;
	margin-top: 30px;
	padding: 0.5% 0.5% 0.5% 0.5%;
	border: 0.2em solid #000000;
	border-radius: 0.5em;
	
	}
}
@media only screen and ( max-width: 999px )	{		/* website für Handy 						*/
#website {
	background-color: #19DBE1;
	max-width: 999px;
	min-width: 350px;
	width: 99%;
	height: auto;
	margin-top: 5px;
	padding: 0.5% 0.5% 0.5% 0.5%;
	border: 0.1em solid #000000;
	border-radius: 0.6em;
	}
}

@media only screen and ( min-width: 1000px ){		/* header für Desktop 						*/
#header {
	background-color: #19DBE1;
	width: 100%;
	height: auto;
	padding: 0.5% 0.5% 0.5% 0.5%;
	margin: 0.0% 0.0% 0.5% 0.0%;
	border: 0.1em solid #444444;
	border-radius: 0.5em;
	text-align: center;
	}
}
@media only screen and ( max-width: 999px )	{		/* header für Handy 						*/
#header {
	background-color: #19DBE1;
	width: 100%;
	height: auto;
	padding: 0.5% 0.5% 0.5% 0.5%;
	margin: 0.0% 0.0% 0.5% 0.0%;
	border: 0.1em solid #444444;
	border-radius: 0.3em;
	text-align: center;
	}
}

@media only screen and ( min-width: 1000px ){		/* infozeile für Desktop 					*/
#infozeile {
	background-color: #19DBE1;
	width: 100%;
	height: auto;
	padding: 0.5% 0.0% 0.5% 0.0%;
	margin: 0.0% 0.0% 0.5% 0.0%;
	border: 0.1em solid #444444;
	border-radius: 0.5em;
	text-align: center;
	float: left;
	}
}
@media only screen and ( max-width: 999px )	{		/* infozeile für Handy 						*/
#infozeile {
	background-color: #19DBE1;
	width: 100%;
	height: auto;
	padding: 0.5% 0.0% 0.5% 0.0%;
	margin: 0.0% 0.0% 0.5% 0.0%;
	border: 0.1em solid #444444;
	border-radius: 0.3em;
	text-align: center;
	float: left;
	}
}

@media only screen and ( min-width: 1000px ){		/* content für Desktop 						*/
#content {
	width: 100%;
	height:auto;
	text-align: center;
	float: left;
	}
}
@media only screen and ( max-width: 999px )	{		/* content für Handy 						*/
#content {
	width: 100%;
	height:auto;
	text-align: center;
	float: left;
	}
}

@media only screen and ( min-width: 1000px ){		/* navigation für Desktop 					*/
#navigation {
	background-color: #19DBE1;
	width: 15%;
	min-height: 30vw;
	margin: 0.0% 0.0% 0.5% 0.0%;
	border: 0.1em solid #444444;
	border-radius: 0.5em;
	text-align: center;
	float: left;
	}	
}
@media only screen and ( max-width: 999px )	{		/* navigation für Handy 					*/
#navigation {
		background-color: #19DBE1;
        width: 100%;
        min-height: 8vw;
        margin: 0.0% 0.0% 0.5% 0.0%;
		border: 0.1em solid #444444;
		border-radius: 0.3em;
		text-align: center;
		float: left;
		}
}	

@media only screen and ( min-width: 1000px ){		/* navigation-main für Desktop 				*/
#navigation-main {
	background-color: #19DBE1;
	width: 100%;
	height: auto;
	margin: 0.0% 0.0% 0.0% 0.0%;
	text-align: center;
	float: left;
	}		
}
@media only screen and ( max-width: 999px )	{		/* navigation-main für Handy 				*/
#navigation-main {
	background-color: #19DBE1;
	width: 100%;
	height: auto;
	margin: 0.0% 0.0% 0.0% 0.0%;
	text-align: center;
	float: left;
	}
}	

@media only screen and ( min-width: 1000px ){		/* navigation-raum für Desktop 				*/
#navigation-raum {
	background-color: #222222;
	width: 100%;
	height: auto;
	margin: 0.0% 0.0% 0.0% 0.0%;
	text-align: center;
	float: left;
	}		
}
@media only screen and ( max-width: 999px )	{		/* navigation-raum für Handy 				*/
#navigation-raum {
	background-color: #000000;
	width: 100%;
	height: auto;
	margin: 1.0% 0.0% 0.0% 0.0%;
	text-align: center;
	float: left;
	}
}					

@media only screen and ( min-width: 1000px ){		/* page für Desktop 						*/
#page {
	background-color: #19DBE1;
	width: 69%;
	min-height: 30vw;
	max-height: 30vw;
	padding: 1.0% 0.0% 1.0% 0.0%;
	margin: 0.0% 0.0% 0.5% 0.0%;
	border: 0.1em solid #444444;
	border-radius: 0.5em;
	text-align: center;
	float: right;
	overflow: auto; 
	overflow-style: move;
	}
}
@media only screen and ( max-width: 999px )	{		/* page für Handy 							*/
#page {
	background-color: #19DBE1;
	width: 100%;
	min-height: 60vw;
	max-height: 90vw;
	padding: 1.0% 0.0% 1.0% 0.0%;
	margin: 0.0% 0.0% 0.5% 0.0%;
	border: 0.1em solid #444444;
	border-radius: 0.3em;
	text-align: center;
	float: left;
	overflow: auto; 
	overflow-style: move;
	}
}

@media only screen and ( min-width: 1000px ){		/* info für Desktop 						*/
#info {
	background-color: #19DBE1;
	width: 15%;
	min-height: 30vw;
	max-height: 30vw;
	padding: 1.0% 0.0% 1.0% 0.0%;
	margin: 0.0% 0.0% 0.5% 0.5%;
	border: 0.1em solid #444444;
	border-radius: 0.5em;
	text-align: center;
	float: right;
	overflow: auto; 
	overflow-style: move;
	}
}
@media only screen and ( max-width: 999px )	{		/* info für Handy 							*/
#info {
	background-color: #19DBE1;
	width: 100%;
	min-height: 8vw;
	padding: 1.0% 0.0% 1.0% 0.0%;
	margin: 0.0% 0.0% 0.5% 0.0%;
	border: 0.1em solid #444444;
	border-radius: 0.3em;
	text-align: center;
	float: left;
	overflow: auto; 
	overflow-style: move;
	}
}





@media only screen and ( min-width: 1000px ){		/* footer für Desktop 						*/
#footer {
	background-color: #19DBE1;
	width: 100%;
	height: auto;
	padding: 0.5% 0.5% 0.5% 0.5%;
	margin: 0.0% 0.0% 0.0% 0.0%;
	border: 0.1em solid #444444;
	border-radius: 0.5em;
	text-align: center;
	clear: both;
	}
}
@media only screen and ( max-width: 999px )	{		/* footer für Handy 						*/
#footer {
	background-color: #19DBE1;
	width: 100%;
	height: auto;
	padding: 0.5% 0.5% 0.5% 0.5%;
	margin: 0.0% 0.0% 0.0% 0.0%;
	border: 0.1em solid #444444;
	border-radius: 0.3em;
	text-align: center;
	clear: both;
	}
}

@media only screen and ( min-width: 1000px ){		/* formularbereich für Desktop 				*/
#formularbereich {
	background-color: #19DBE1;
	width: 90%; 									/* Breite des Formulars */
	height: auto;
	padding: 1.5% 0.0% 1.5% 0.0%;
	margin: 0.0% 0.0% 0.0% 5.0%;
	border: 0.1em solid #444444;
	border-radius: 0.5em;
	text-align: center;
	}
}
@media only screen and ( max-width: 999px )	{		/* formularbereich für Handy 				*/
#formularbereich {
	background-color: #19DBE1;
	width: 100%; 									/* Breite des Formulars */
	height: auto;
	padding: 0.0% 0.0% 0.0% 0.0%;
	margin: 0.0% 0.0% 0.0% 0.0%;
	border: 0.0em solid #000000;
	border-radius: 0.0em;
	text-align: center;
	}
}

@media only screen and ( min-width: 1000px ){		/* formularbereich_rechts für Desktop 		*/
#formularbereich_rechts {
	background-color: #222222;
	width: 50%; 									/* Breite des Formulars */
	padding: 0.0% 0.0% 1.0% 0.0%;
	margin: 0.0% 0.0% 0.0% 0.0%;
	border: 0.0em solid #444444;
	border-radius: 0.5em;
	float: left;
	text-align: center;
	}
}
@media only screen and ( max-width: 999px )	{		/* formularbereich_rechts für Handy 		*/
#formularbereich_rechts {
	background-color: #000000;
	width: 100%; 									/* Breite des Formulars */
	padding: 4.0% 0.0% 4.0% 0.0%;
	margin: 0.0% 0.0% 0.0% 0.0%;
	border: 0.0em solid #000000;
	border-radius: 0.0em;
	float: left;
	text-align: center;
	}
}	

@media only screen and ( min-width: 1000px ){		/* formularbereich_links für Desktop 		*/
#formularbereich_links {
	background-color: #222222;
	width: 50%; 									/* Breite des Formulars */
	padding: 0.0% 0.0% 1.0% 0.0%;
	margin: 0.0% 0.0% 0.0% 0.0%;
	border: 0.0em solid #444444;
	border-radius: 0.5em;
	float: left;
	text-align: center;
	}
}
@media only screen and ( max-width: 999px )	{		/* formularbereich_links für Handy 			*/
#formularbereich_links {
	background-color: #000000;
	width: 100%; 									/* Breite des Formulars */
	padding: 4.0% 0.0% 4.0% 0.0%;
	margin: 0.0% 0.0% 0.0% 0.0%;
	border: 0.0em solid #000000;
	border-radius: 0.0em;
	float: left;
	text-align: center;
	}
}

@media only screen and ( min-width: 1000px ){		/* formularbereich_unten für Desktop 		*/
#formularbereich_unten {
	background-color: #222222;
	width: 100%; 									/* Breite des Formulars */
	padding: 1.0% 0.0% 1.0% 0.0%;
	margin: 0.0% 0.0% 1.0% 0.0%;
	border: 0.0em solid #444444;
	border-radius: 0.5em;
	float: left;
	text-align: center;
	}
}
@media only screen and ( max-width: 999px )	{		/* formularbereich_unten für Handy 			*/
#formularbereich_unten {
	background-color: #000000;
	width: 100%; 									/* Breite des Formulars */
	padding: 4.0% 0.0% 4.0% 0.0%;
	margin: 0.0% 0.0% 0.0% 0.0%;
	border: 0.0em solid #000000;
	border-radius: 0.0em;
	float: left;
	text-align: center;
	}
}
	
/*	Link Einstellungen																			*/
@media only screen and ( min-width: 1000px ){		/* a-link für Desktop 						*/
a	{
	color: #000000;
	padding: 0.5% 0.0% 0.5% 0.0%;
	font-weight: bolder;
	font-size: 1em;
	text-decoration: none;
	}
a:hover {
	color: #FFFFFF;
	}
}
@media only screen and ( max-width: 999px )	{		/* a-link für Handy 						*/
a {
	color: #000000;
	padding: 1.0% 1.0% 1.0% 1.0%;
	font-weight: bolder;
	font-size: 3.0vw;
	text-decoration: none;
	display: inline-block;
	}
a:hover {
	color: #19DBE1;
	}	
}

@media only screen and ( min-width: 1000px ){		/* a.normal-link für Desktop 				*/
a.normal:link{
	color: #000000;
	font-size: 1em;
	}
a.normal:visited{
	color: #000000;
	font-size: 1em;
	}
a.normal:hover{
	color: #FFFFFF;
	font-size: 1em;
	}
a.normal:active{
	color: #000000;
	font-size: 1em;
	}
a.normal:focus{
	color: #222222;
	font-size: 1em;
	}
}
@media only screen and ( max-width: 999px )	{		/* a.normal-link für Handy 					*/
a.normal:link{
	color: #999999;
	font-size: 2.1vw;
	}
a.normal:visited{
	color: #999999;
	font-size: 2.1vw;
	}
a.normal:hover{
	color: #19DBE1;
	font-size: 2.1vw;
	}
a.normal:active{
	color: #999999;
	font-size: 2.1vw;
	}
a.normal:focus{
	color: #999999;
	font-size: 2.1vw;
	}
}

@media only screen and ( min-width: 1000px ){		/* a.loout-link für Desktop 				*/
a.logout:link{
	color: #000000;
	font-size: 1em;
	}
a.logout:visited{
	color: #000000;
	font-size: 1em;
	}
a.logout:hover{
	color: #FF0000;
	font-size: 1em;
	}
a.logout:active{
	color: #222222;
	font-size: 1em;
	}
a.logout:focus{
	color: #222222;
	font-size: 1em;
	}
}
@media only screen and ( max-width: 999px )	{		/* a.logout-link für Handy 					*/
a.logout:link{
	color: #999999;
	font-size: 2.1vw;
	}
a.logout:visited{
	color: #999999;
	font-size: 2.1vw;
	}
a.logout:hover{
	color: #FF0000;
	font-size: 2.1vw;
	}
a.logout:active{
	color: #999999;
	font-size: 2.1vw;
	}
a.logout:focus{
	color: #999999;
	font-size: 2.1vw;
	}
}

@media only screen and ( min-width: 1000px ){		/* a.tabelle-link für Desktop 				*/
a.tabelle:link  {
	color: #00FF00;
	padding: 0.0%;
	font-size: 1em;
	}
a.tabelle:visited {
	color: #00FF00;
	padding: 0.0%;
	font-size: 1em;
	}
a.tabelle:hover{
	color: #FFFF00;
	padding: 0.0%;
	font-size: 1em;
	}
a.tabelle:active{
	color: #00FF00;
	padding: 0.0%;
	font-size: 1em;
	}
a.tabelle:focus{
	color: #00FF00;
	padding: 0.0%;
	font-size: 1em;
	}
}
@media only screen and ( max-width: 999px )	{		/* a.tabelle-link für Handy 				*/
a.tabelle:link  {
	color: #00FF00;
	font-size: 1.5vw;
	}
a.tabelle:visited {
	color: #00FF00;
	font-size: 1.5vw;
	}
a.tabelle:hover{
	color: #FFFF00;
	font-size: 1.5vw;
	}
a.tabelle:active{
	color: #00FF00;
	font-size: 1.5vw;
	}
a.tabelle:focus{
	color: #00FF00;
	font-size: 1.5vw;
	}
}

/*	Auflistungen Einstellungen																	*/
@media only screen and ( min-width: 1000px ){		/* ul für Desktop 		 					*/
ul {
	background-color: #19DBE1;
	padding: 0.4% 0.0% 0.4% 0.0%;
	margin: 4.0% 0.0% 4.0% 0.0%;
	list-style-type: none;
	}
}
@media only screen and ( max-width: 999px )	{		/* ul für Handy 							*/
ul {
	background-color: #19DBE1;
	padding: 0.4% 0.0% 0.4% 0.0%;
	margin: 0.0% 0.0% 0.0% 0.0%;
	list-style-type: none;
	}
}

@media only screen and ( min-width: 1000px ){		/* li für Desktop 		 					*/
li {
	background-color: #19DBE1;
	padding: 3.0% 0.0% 3.0% 0.0%;
	}
}
@media only screen and ( max-width: 999px )	{		/* li für Handy 							*/
li {
	background-color: #19DBE1;
	width: 18vw;
	padding: 0.5% 2.0% 0.5% 2.0%;
	display: inline-block;
	}
}

/*	Schrift Einstellungen																		*/
@media only screen and ( min-width: 1000px ){		/* p für Desktop 							*/
p {
	color: #000000;
	font-size: 1.0em;
	font-weight: normal;
	margin: 0.0% 0.0% 0.0% 0.0%;
	}
.fett	{font-weight: bold;}
.black	{color: #000000;}
.rot 	{color: #FF0000;}
.blau	{color: #0000FF;}
.weis 	{color: #FFFFFF;}
.grau 	{color: #999999;}
.gruen 	{color: #00FF00;}
.gelb 	{color: #FFFF00;}
.jtg	{color: #19DBE1;}	
.table	{font-size: 1.0em;}
.k07	{font-size: 0.7em;}
.k08	{font-size: 0.8em;}
.k10	{font-size: 1.0em;}
.k12	{font-size: 1.2em;}
.k14	{font-size: 1.4em;}
.infozeile	{font-size: 1.2em;}
.page	{font-size: 1.0em;}

}
@media only screen and ( max-width: 999px )	{		/* p für Handy 								*/
p {
	color: #000000;
	font-size: 2.4vw;
	font-weight: normal;
	margin: 0.0% 0.0% 0.0% 0.0%;
	}
.fett	{font-weight: bold;}
.black	{color: #000000;}
.rot 	{color: #FF0000;}
.blau	{color: #0000FF;}
.weis 	{color: #FFFFFF;}
.grau 	{color: #999999;}
.gruen 	{color: #00FF00;}
.gelb 	{color: #FFFF00;}
.jtg	{color: #19DBE1;}	
.table	{font-size: 1.5vw;}
.k07	{font-size: 2.1vw;}
.k08	{font-size: 2.4vw;}
.k10	{font-size: 3.0vw;}
.k12	{font-size: 3.6vw;}
.k14	{font-size: 4.2vw;}
.infozeile	{font-size: 2.5vw;}
.page	{font-size: 2.5vw;} 
}

/*	Formular Einstellungen																		*/
@media only screen and ( min-width: 1000px ){		/* form für Desktop 						*/
form {								
	background-color: #19DBE1;
	width: 95%; 									/* Breite des Formulars						*/
	margin-right: auto;
	margin-left: auto;
	font-weight: normal;
	font-size: 2.5em;
	text-align: center;
	}	
}
@media only screen and ( max-width: 999px )	{		/* form für Handy 		 					*/
form {
	background-color: #19DBE1;
	width: 99%; 									/* Breite des Formulars 					*/
	margin-right: auto;
	margin-left: auto;
	font-weight: normal;
	font-size: 2.5vw;
	text-align: center;
	}	
}

@media only screen and ( min-width: 1000px ){		/* label für Desktop 						*/
label {
	background-color: #222222;
	padding: 0.5% 0.5% 0.5% 2.0%;
	color: #ffffff;
	width: 28%;
	font-weight: normal;
	font-size: 0.4em;
	display: inline-block;							/* Beschriftung auf eigener Zeile 			*/
	cursor: pointer; 								/* Mauszeiger wird zur Hand					*/
	}
}
@media only screen and ( max-width: 999px )	{		/* label für Handy 		 					*/
label { 
	background-color: #000000;
	padding: 0.5% 0.5% 0.5% 2.0%;
	color: #ffffff;
	width: 25%;
	font-weight: normal;
	font-size: 2.4vw;
	display: inline-block;							/* Beschriftung auf eigener Zeile 			*/
	}
}

@media only screen and ( min-width: 1000px ){		/* input für Desktop 						*/
input {
	background-color: #19DBE1;
	font-weight: bolder;
	font: 1.0em;
	color: #000000;
	width: 20%;
	display: inline-block;
	padding: 0.5em;
	margin: 0.0% 0.1% 2.0% 0.1%;
	border: 1px solid #444444;
	}
}
@media only screen and ( max-width: 999px )	{		/* input für Handy 		 					*/
input {
	background-color: #19DBE1;
	font-weight: bolder;
	font-size: 2.4vw;
	color: #000000;
	width: 20%;
	display: inline-block;
	padding: 0.5em;
	margin: 0.0% 0.0% 2.0% 0.0%;
	border: 0.1em solid #444444;
	/*display: block;*/
	}
}

@media only screen and ( min-width: 1000px ){		/* supmit für Desktop 						*/
#submit{
	background-color: #444444;
	font-weight: bolder;
	font: 1.0em;
	color: #19DBE1;
	width: 40%;
	padding: 1.0% 0.0% 1.0% 0.0%;
	border: 0.1em solid #19DBE1;
	border-radius: 0.5em;
	}
}
@media only screen and ( max-width: 999px )	{		/* submit für Handy 	 					*/
#submit{
	background-color: #000000;
	font-weight: bolder;
	font-size: 2.4vw;
	color: #19DBE1;
	padding: 1.0em;
	width: 98%;
	padding: 1.0% 1.0% 1.0% 1.0%;
	border: 0.1em solid #19DBE1;
	border-radius: 0.5em;
	}
}

@media only screen and ( min-width: 1000px ){		/* submit-setup für Desktop 				*/
#submit-setup{
	background-color: #cccccc;
	font-weight: bolder;
	font-size: 2.4vw;
	color: #19DBE1;
	padding: 1.0em;
	width: 40%;
	padding: 0.5% 0.0% 0.5% 0.0%;
	border: 0.1em solid #19DBE1;
	border-radius: 0.8em;
	}
}
@media only screen and ( max-width: 999px )	{		/* submit-setup für Handy 					*/
#submit-setup{
	background-color: #cccccc;
	font-weight: bolder;
	font-size: 2.4vw;
	color: #19DBE1;
	padding: 1.0em;
	width: 25%;
	padding: 1.0% 0.0% 1.0% 0.0%;
	border: 0.1em solid #19DBE1;
	border-radius: 0.8em;
	}
}





table {
  width: 98%;
  margin: 1.0%;
}

thead th {
  background-color: #222222 ;
  color: white;
  text-align: left;
  padding: 0.2em;
}

td, th {
  border-bottom: 1px solid #ddd;
  line-height: 1.7em;
  padding: 0.4em 0.2em 0.4em 0.2em;
  vertical-align: top;
}

td {
  transition: all 0.5s ease-in-out 0s;
}

tbody tr:nth-child(odd) td, th {
  background-color: #d4d4d4;
}

tbody tr:nth-child(even) td, th {
  background-color: #d4d4d4;
}


tbody tr:hover td {
  background-color: #bbbbbb ;
 }