* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-khtml-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0 auto;
	//border: 1px solid white;
	}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	}
iframe {
	border: 0;
	}
#main {
	flex: 2 1 69%;
	padding: 5px;
	margin-left: 5px;
	margin-right: 5px;
	order: 1;
	}
#header {
  	display: table;
  	width: 100%;
  	//max-height: 140px;
  	padding: 5px;
  	text-align: center;
	border-bottom: 1px solid white;
  	}
.head {
	display: table-cell;
  	width: 100%;
  	padding: 5px;
  	color: #00AA00;
  	text-align: center;
	vertical-align: middle;
  	font-size: 2em;
	font-weight: bold;
	text-shadow: -2px 2px 1px black;
	line-height: 0.85em;
	}
#wr {
	background-color: gray;
	border: 1px solid black;
	border-radius: 25px;
	color: black;
	text-align: left;
	}

.kopf {
	display: table-cell;
	width: 98%;
	color: lightgray;
	font-size: 2em;
	font-weight: bold;
	text-shadow: 2px -2px 1px black;
	text-align: center;
	vertical-align: middle;	
	line-height: 1em;
	}
.kk {
	font-size: 0.5em;
	font-weight: normal;
	text-shadow: none;
	text-align: center;
	line-height: 0.5em;
	}
.kk16 {
	font-size: 1.0em;
	font-weight: normal;
	text-shadow: none;
	text-align: center;
	line-height: 0.5em;
	}
#footer {
  	width: 100%;
  	height: 1.75em;
  	padding: 0.25em;
  	text-align: right;
  	color: black;
  	background-color: darkgray;
  	}
nav {
	display: block;
	width: 100%;
	text-align: center;
	padding: 5px;
  }
nav a {
	display: inline-block;
	border: 1px solid brown;
	border-radius: 0.5em;
	background-color: orange;
	padding: 0.25em;
	line-height: 1.5em;
	color: black;
	}
img {width: 100%; height: auto;}
#logol { display: table-cell; text-align:left; float: left; margin-top: 3px; margin-left: 3px; width: 6em }
#logor { display: table-cell; text-align:left; float: right; margin-top: 3px; margin-right: 3px; width: 6em}
summary {font-size: 24px; font-weight: bold; padding: 10px;}

ul { margin-left: 40px; text-align: left;}
li { margin-left: 10px; text-align: left;}
input[type=radio]  {width: 1.0em;font-size: 1.0em;}

.tdweis { background-color:white; color: black; }
.tdblau { background-color:white; color: blue; }
.tdrot { background-color:white; color: red; }
.tdgruen { background-color:white; color: green; }
td { padding: 1px; text-align: left;}
th { padding: 1px; border: 1px solid white; background-color: white; color: green; font-weight: bold;}
label {padding: 5px}
table { background-color: green; border-collapse: collapse;	empty-cells: hide; color: white;	line-height: 1.0em; }
.border {border: 1px solid white;}
.noborder { border: 0px}
.lh { line-height: 2.0em}
	
.knopf {
	text-align: center;
	background: orange;
	border-radius: 1.5em;
	display: inline-block;
	font-family: arial;
	font-size: 1.0em;
	color:yellow;
	border:1px solid brown;
	width: 3em;
	height: 3em;	
	margin: 5px auto;
	box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);	
}

.anzahl {
	text-align: center;
	background: orange;
	line-height: 1.25em;
	border-radius: 8px;
	padding: 10px 10px;
	display: block;
	font-family: arial;
	font-size: 16px;
	color:yellow;
	text-decoration: none;
	//text-shadow:0px 1px 0px black;
	border:1px solid brown;
	width: 3em;
	//height: 2em;	
	margin:0px auto;
	margin-top:10px;
	margin-bottom: 10px;
	box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);	
}
.anzahlk {
	text-align: center;
	background: orange;
	line-height: 1.25em;
	border-radius: 8px;
	padding: 10px 10px;
	//display: block;
	font-family: arial;
	font-size: 16px;
	color:yellow;
	text-decoration: none;
	//text-shadow:0px 1px 0px black;
	border:1px solid brown;
	width: 3em;
	//height: 2em;	
	margin:0px auto;
	margin-top:10px;
	margin-bottom: 10px;
	box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);	
}
.buttonk {
	text-align: center;
	background: orange;
	line-height: 1.25em;
	border-radius: 8px;
	padding: 10px 10px;
	display: block;
	font-family: arial;
	font-size: 16px;
	color:yellow;
	text-decoration: none;
	//text-shadow:0px 1px 0px black;
	border:1px solid brown;
	width: 200px;
	margin:0px auto;
	//margin-top:10px;
	//margin-bottom: 10px;
	box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
	-webkit-transition:box-shadow 1s;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.buttonsk {
	text-align: center;
	background: orange;
	line-height: 1.25em;
	border-radius: 8px;
	padding: 10px 10px;
	display: block;
	font-family: arial;
	font-size: 16px;
	color:yellow;
	text-decoration: none;
	//text-shadow:0px 1px 0px black;
	border:1px solid brown;
	width: 100px;
	margin:0px auto;
	//margin-top:10px;
	//margin-bottom: 10px;
	box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
	-webkit-transition:box-shadow 1s;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.buttons {
	text-align: center;
	background: orange;
	line-height: 1.25em;
	border-radius: 8px;
	padding: 10px 10px;
	font-family: arial;
	font-size: 16px;
	color:yellow;
	text-decoration: none;
	border:1px solid brown;
	max-width: 7.5em;
	margin:0.25em auto;
	//margin-top:10px;
	//margin-bottom: 10px;
	box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
	-webkit-transition:box-shadow 1s;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.button {
	text-align: center;
	background: orange;
	line-height: 1.5em;
	border-radius: 8px;
	padding: 10px 20px;
	display: block;
	font-family: arial;
	font-size: 20px;
	color:yellow;
	text-decoration: none;
	border:1px solid brown;
	width: 200px;
	margin:0px auto;
	margin-top:10px;
	margin-bottom: 10px;
	box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
	-webkit-transition:box-shadow 1s;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.rahmen2 {
	display: block;
	margin: auto;
	//background-color: green;
	border: 1px solid black;
	border-left-width: 2em;
	width:100%;
	//padding-bottom: 15px;
	box-shadow: -3px 3px 3px black;
	}
a	{
	color: black;
	text-decoration: none; 
	}
a:hover {
	color: brown;
	}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 80%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

#FMitte {
	width: 100%;
	height: 100%;
	background-color: transparent;
	}
.boxgruen {
	text-align: center;
	font-weight:bold;
	max-width: 90%;
	border-style: outset;
	border-width: 3px;
	border-top-color: orange;
	border-right-color: orange;
	border-left-color: lightcoral;
	border-bottom-color: lightcoral;
	padding: 1.0em; color: white;
	background-color: green;
	border-radius: 1em;
	box-shadow: -5px 5px 5px black;}

.schwarz {color: black}
.zehns { font-size: 0.75em; color: yellow;}
	
.rahmen { border: 1px solid yellow; border-radius: 10px; margin-top: 10px;}
.nopadding { padding: 5px; }

h1{ color: black; padding: 0.25em;}
h2, h3, h4 { color: black; padding: 0.5em; }
h1 { font-size: 1.5em;}
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.16em; }
p {color: white;	padding-left: 1.25em; padding-bottom:1.25em; padding-right:1.25em; line-height:1.25em;	}
.hilight { color: yellow;}
.gbreite { max-width: 40em;}
.breite {max-width: 28em;}
div { line-height: 1.5em;}

.links { text-align: left;}
.rechts { text-align: right;}
.center {margin: auto;text-align: center;}
.fett {font-weight: bold;}

.oben { vertical-align: top; color: yellow; padding-left: 4px;}
.weis {color:white;}
.gruen { color: green;}
.rot {color: red;}

.zehny {font-size: 0.75em; color: yellow;}
.normal {font-style: normal; font-size: 0.75em;}
.sechszehny {font-size: 1em; color: yellow; vertical-align: top;}
.sechszehns {font-size: 1em; color: black;}
.vierundzwanzigs { font-size: 1.5em; font-weight:bold; color:black; }
.zwanzigs {font-size: 1.25em; font-weight:normal; }
.vierundzwanzigy { font-size: 2em; font-weight:bold; color:yellow; }

@media only screen and (max-width:768px) {
	h1 {font-size: 26px;}
	h2 {font-size: 22px; padding-bottom: 10px;}
	h3 {font-size: 18px;}
	h4 {font-size: 14px;}
	.kopf { font-size: 1.75em;}
	nav a {line-height: 24px;}
	nav {font-size: 14px;}
	#footer { width: 100%; height: 24px; font-size: 12px;	}
	p {font-size: 14px;}
	td {font-size: 12px;}
	th { font-size: 12px;}
	.oben { vertical-align: top; color: yellow; font-size: 12px}
	.sechszehny {font-size: 12px; color: yellow;}
	}
@media only screen and (max-width: 1081px) {
	#logol, #logor {
		display: none;
	}
}