@font-face {
    font-family: 'OpenSansRegular';
    src: url('../Fonts/OpenSans-Regular-webfont.eot');
    src: url('../Fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../Fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../Fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSansSemibold';
    src: url('../Fonts/OpenSans-Semibold-webfont.eot');
    src: url('../Fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../Fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../Fonts/OpenSans-Semibold-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSansLight';
    src: url('../Fonts/OpenSans-Light-webfont.eot');
    src: url('../Fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('../Fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('../Fonts/OpenSans-Light-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Entwurf';
    src: url('../Fonts/KingthingsTrypewriter2.ttf');
    font-weight: normal;
    font-style: normal;
}
/*
MeinStellenwert
Version 1.1
*/
:root {
	
	/* Menu - helle Schrift in dunklem Kasten */
	--MenuSchriftfarbe: 				gray;
	--MenuHintergrundfarbe: 		rgba(255,255,255,1);
	
	/* Alternativ Menu - Dunkle Schrift in hellem Kasten */
	--AltSchriftfarbe: 					white;
	--AltHintergrundfarbe: 			rgba(90, 146, 170,1);
	
	/* Textausgabe */
	--Textfarbe: 								rgb(49,49,49);
	--Texthintergrundfarbe: 		white;
	
	/* Schriftschnitt */
	--Textschrift: 							'OpenSansRegular';
	
	/*
	Blau			rgb(90,146,170); - #F0F0F0
	Gelb			rgb(249,178,50);
	Antrazit	rgb(68,68,68);
	*/
	
	/* Tabelle Überschrift */
	--TabelleKopfHintergrund: 			gray;
	--TabelleKopfSchriftFarbe: 			white;
	/* Zweite Datenzeile */
	--TabelleZeileHintergrund1: 		white;
	--TabelleZeileSchriftFarbe1: 		gray;
	/* Erste Datenzeile */
	--TabelleZeileHintergrund2: 		gray;
	--TabelleZeileSchriftFarbe2: 		white;

  --DragsSchriftSchnitt:					normal 1em OpenSansRegular, sans-serif;
  --DragsSchriftFarbe:						white;
  --DragsHintergrund:							rgb(0,123,192);
  --DragsBreite:									95%;
  --DragsInnenrand:								5px;
  --DragsRahmen:									1px solid black;

  --KastenSchriftSchnitt:					normal 1em OpenSansRegular, sans-serif;
  --KastenSchriftFarbe:						rgb(49,49,49);
  --KastenHintergrund:						none;
  --KastenBreite:									95%;
  --KastenInnenrand:							5px;
  --KastenRahmen:									none;

  --TitelSchriftSchnitt:					normal 1.2em OpenSansSemibold, sans-serif;
  --TitelSchriftFarbe:						rgb(49,49,49);
  --TitelHintergrund:							none;
  --TitelBreite:									98%;
  --TitelInnenrand:								5px;

  --KleinerTitelSchriftSchnitt:		normal 1em OpenSansSemibold, sans-serif;
  --KleinerTitelSchriftFarbe:			rgb(49,49,49);
  --KleinerTitelHintergrund:			none;
  --KleinerTitelBreite:						95%;
  --KleinerTitelInnenrand:				5px;

  --InhalteSchriftSchnitt:				normal 1em OpenSansLight, sans-serif;
  --InhalteSchriftFarbe:					rgb(49,49,49);
  --InhalteHintergrund:						linear-gradient(15deg, yellow, white);
  --InhalteBreite:								98%;
  --InhalteInnenrand:							1%;

  --NavigationTasteSchriftSchnitt:	bold 1em OpenSansRegular, sans-serif;
  --NavigationTasteSchriftFarbe:		white;
  --NavigationTasteHintergrund:			rgb(0,123,192);/*rgb(93,121,145);*/
  --NavigationTasteBreite:					99%;
  --NavigationTasteInnenrand:				1%;

	/* Schrift mit der Formulare ausgefüllt werden */
  --FormularSchriftSchnitt:				bold 1.2em OpenSansRegular, sans-serif;
  --FormularSchriftFarbe:					rgb(90,146,170);
  --FormularHintergrund:					white;
  --FormularBreite:								99%;
  --FormularInnenrand:						5px;

  /*--WertSchriftSchnitt:						normal 1em Entwurf, Courier;*/
  --WertSchriftSchnitt:						normal 1em Courier;
  --WertSchriftFarbe:							black;
  --WertHintergrund:							rgb(220,220,220);
  --WertBreite:										99%;
  --WertInnenrand:								5px;

  --BeschreibungSchriftSchnitt:		normal 0.8em OpenSansRegular, sans-serif;
  --BeschreibungSchriftFarbe:			rgb(49,49,49);;
  --BeschreibungBreite:						100%;

	/* Die Breite in der mindestens dargestellt wird. Wird die in der Auflösung unterschritten muß der Benutzer scrollen */
	--Mindestbreite: 								240px;
	
	/* Die Breite in der maximal dargestellt wird. Ist die Auflösung größer wird die Anzeige zentriert */
	--Maximalbreite: 								1600px;
}
@media (max-width: 800px) {
	* {
		margin: auto;
	}
	body {
		width: 98%;
		margin: auto;
	}
	.Logo {
		position: left;
		background-color: white;
		/*border: 1px solid black;*/
		/*float: none;*/
		/*width: 100%;*/
		/*background-size: cover;
		-moz-background-size: cover;
		-webkit-background-size: cover;
		min-width: var(--Mindestbreite);*/
	}
}

.TitelCont {
	width:					var(--TitelBreite);
	font: 					var(--TitelSchriftSchnitt);
	padding: 				var(--TitelInnenrand);
	color: 					var(--TitelFarbe);
	Background: 		var(--TitelHintergrund);
	min-width: 			var(--Mindestbreite);
	margin: 				1%;
	position: 			bottom;
}
.Titel {
	width:					var(--TitelBreite);
	font: 					var(--TitelSchriftSchnitt);
	padding: 				var(--TitelInnenrand);
	color: 					var(--TitelSchriftFarbe);
	background-color: 		var(--TitelHintergrund);
	min-width: 			var(--Mindestbreite);
	margin: 				1%;
}
.TitelLogo {
	font: 						var(--TitelSchriftSchnitt);
	padding: 					var(--TitelInnenrand);
	color: 						var(--TitelSchriftFarbe);
	background-color:	var(--TitelHintergrund);
	margin: 					1%;
}
.KleinerTitel {
	font: 			var(--KleinerTitelSchriftSchnitt);
	padding: 		var(--KleinerTitelInnenrand);
	color: 			var(--KleinerTitelSchriftFarbe);
	background-color: var(--KleinerTitelHintergrund);
	min-width:	var(--Mindestbreite);
	margin: 		1%;
}
.FormularTaste {
	font-family: var(--Textschrift);
	color: var(--AltSchriftfarbe);
	background-color: var(--AltHintergrundfarbe);
	cursor: pointer;
	width: 200px;
	text-align: center;
	word-wrap: break-word;
	position: right;
	margin: 1%;
	padding: 10px 10px 10px 10px;
}
.TestAbbruch {
	font: 			var(--NavigationTasteSchriftSchnitt);
	color: 			var(--NavigationTasteSchriftFarbe);
	width: 			var(--NavigationTasteBreite);
	min-width: 	var(--Mindestbreite);
	cursor: 		pointer;
	background: var(--NavigationTasteHintergrund);
	text-align: center; 
	font-size: 	1.2em;
	word-wrap: 	break-word;
	border: 		none;
	margin: 		auto;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 		var(--NavigationTasteInnenrand);
}
.Logo {
	position: left;
	background-color: white;
	/*border: 1px solid black;*/
	/*float: right;*/
	margin: 5px;
	margin-right: 18px;
}
.Warnung {
	color: red;
	background-color: rgba(180, 10, 10, 0.1);
	width: 99%;
	border: 3px solid red;
	padding: 5px;
	margin-bottom: 1em;
	font-weight: bold;
}
.Hinweis {
	color: black;
	background-color: rgba(180, 180, 10, 0.1);
	width: 99%;
	border: 1px solid yellow;
	padding: 5px;
	margin-bottom: 1em;
	font-weight: normal;#
	font:	var(--InhalteSchriftSchnitt);
}
.Kasten {
	font: 						var(--KastenSchriftSchnitt);
	padding: 					var(--KastenInnenrand);
	color: 						var(--KastenSchriftFarbe);
	Background: 			var(--KastenHintergrund);
	min-width: 				var(--Mindestbreite);
	margin: 					1%;
	border:						var(--KastenRahmen);
}
.Textanzeige {
	font:					var(--InhalteSchriftSchnitt);
	color:				var(--InhalteSchriftFarbe);
	float:				left;
	width:				var(--InhalteBreite);
	margin:				0;
	padding:			var(--InhalteInnenrand);
	background:		var(--InhalteSchriftHintergrund);
	overflow:			auto;
}

/* 
   Stile für die Formularfelder
*/
.Formular {
	/*position:				center;*/
	width:					var(--FormularBreite);
	font:						var(--FormularSchriftSchnitt);
	padding:				var(--FormularInnenrand);
	color:					var(--FormularSchriftFarbe);
	background:			var(--FormularHintergrund);
	border:					1px solid black;
	margin:					auto;
	margin-bottom:	0.5em;
	max-width:			var(--Maximalbreite);
	min-width:			var(--Mindestbreite);
}

.Beschreibung {
	position:				center;
	width:					var(--BeschreibungBreite);
	font:						var(--BeschreibungSchriftSchnitt);
	color:					var(--BeschreibungSchriftFarbe);
	margin:					auto;
	margin-top:			5px;
	margin-bottom:	1px;
}

.Wert {
	position:					center;
	font:							var(--WertSchriftSchnitt);
	color:						var(--WertSchriftFarbe);
	width:						var(--WertBreite);
	padding:					var(--WertInnenrand);
	background-color:	var(--WertHintergrund);
	border:						none;
	margin:						auto;
}
.FormularDunkel {
	min-width: var(--Mindestbreite);
	margin: auto;
	width: 98%
	padding-bottom: 0.5em;
	max-width: var(--Maximalbreite);
	float: none;
	display: flex;
}
.FormularDunkel .Wert {
	font-family: var(--Textschrift);
	font-size: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: rgba(90, 146, 170,0.8);
	color: var(--WertSchriftfarbe);
	width: 80%;
	height: 40px;
	display: inline-block;
	float: left;
}
.FormularDunkel .FormularTaste {
	font-family: var(--Textschrift);
	font-size: 20px;
	color: white;
	background-color: rgba(90, 146, 170,1);
	height: 30px;
	width: 20%;
	text-align: center;
	word-wrap: break-word;
	position: right;
	display: inline-block;
	float: right;
}
.AbsendeTaste {
	font: 			var(--NavigationTasteSchriftSchnitt);
	color: 			var(--NavigationTasteSchriftFarbe);
	width: 			var(--NavigationTasteBreite);
	min-width: 	var(--Mindestbreite);
	cursor: 		pointer;
	background: var(--NavigationTasteHintergrund);
	text-align: center; 
	font-size: 	1.2em;
	word-wrap: 	break-word;
	border: 		none;
	margin: 		auto;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 		var(--NavigationTasteInnenrand);
}
.NavTaste {
	font: 			var(--NavigationTasteSchriftSchnitt);
	color: 			var(--NavigationTasteSchriftFarbe);
	width: 			var(--NavigationTasteBreite);
	min-width: 	var(--Mindestbreite);
	cursor: 		pointer;
	background: var(--NavigationTasteHintergrund);
	text-align: center;
	font-size: 	1.2em;
	word-wrap: 	break-word;
	border: 		none;
	margin: 		auto;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 		var(--NavigationTasteInnenrand);
}
.Mitte {
	width: 100%;
	text-align: center;
}

/* Links */
.LinkButton {
	font: 			var(--NavigationTasteSchriftSchnitt);
	color: 			var(--NavigationTasteSchriftFarbe);
	width: 			var(--NavigationTasteBreite);
	min-width: 	var(--Mindestbreite);
	cursor: 		pointer;
	background: var(--NavigationTasteHintergrund);
	text-align: center; 
	font-size: 	1.2em;
	word-wrap: 	break-word;
	border: 		none;
	margin: 		1%;
	padding: 		var(--NavigationTasteInnenrand);
}
a {text-decoration: none;}
a:link {color: black;}
a:visited {color: black;}
a:active {color: black;}
a:hover {color: black; text-decoration: none;}

/* Slider */
.slider {
	border-color: gray;
	color: gray;
	Background-color: green;
	border: 1px solid gray;
	width: 99.5%;
	margin-top: 5px;
	text-align: center;
	height: 13px;
}
table {
	font-family: var(--Textschrift);
	font-size: 1em;
	width: 98.5%;
	border-collapse: collapse;
	margin: 0.5em;
}
th {
	background-color: var(--TabelleKopfHintergrund);
	color: var(--TabelleKopfSchriftFarbe);
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}
tr {
	background-color: var(--TabelleZeileHintergrund1);
	color: var(--TabelleZeileSchriftFarbe1);
}
tr a:{
	background-color: rgba(0, 100, 00, 0.20);
	color: rgba(0, 0, 0, 1.00);
	text-decoration: none;
}
tr:nth-child(2n) {
	background-color: var(--TabelleZeileHintergrund2);
	color: var(--TabelleZeileSchriftFarbe2);
}
td {
	padding: 5px;
	vertical-align: middle;
}
td a {
	font-weight: normal;
	color: black;
}
td a:link {
	font-weight: normal;
	color: black;
}
td a:visited {
	font-weight: normal;
	color: black;
	text-decoration: none;
}
/*
td a:hover {
	color: black;
	font-weight: bold;
	text-decoration: none;
}
*/

.Prozent1 {
	pointer-events: none;
	position: absolute;
	left: 2.9%;
	text-align: left;
}
.Prozent2 {
	pointer-events: none;
	right: 2,9%;
	text-align: right;
}
[draggable] {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	-khtml-user-drag: element;
	-webkit-user-drag: element;
}
.Antwort {
	-webkit-border-radius: 	10px;
	-ms-border-radius: 			10px;
	-moz-border-radius: 		10px;
	border-radius: 					10px;
	font:										var(--DragsSchriftSchnitt);
	min-height: 						75px;
	height: 								auto;
	width: 									var(DragBreite);
	min-width: 							var(--Mindestbreite);
	border: 								var(--DragsRahmen);
	background:							var(--DragsHintergrund);
	margin-top:							5px;
	margin-left:						1em;
	margin-right:						3em;
	text-align:							center;
	color:									var(--DragsSchriftFarbe);
	cursor:									move;
	padding-top:						auto;
	padding-bottom:					auto;
	word-wrap:							break-word;
	/* hiermit wird horizontal und vertikal zentriert */
	display: flex;
	align-items: center;
	justify-content: center;
}
rot {
	color: red;
}
blau {
	color: blue;
}