* {
	font-size: 20px;
}
html {
	height: 100%;
	background-image: linear-gradient(#0168FF, transparent);
	background-repeat: no-repeat;
}
body {
	min-height: 100%;
	display: grid;
	grid-template-rows: 7em auto auto 1.3em;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:  
    "logo navm navm"
	"main main main"
    "button button button"
	"footer footer footer";
}
header {
	display: none;
}
nav .nav-button img{
	width: 1em;
	padding-right: 0.2em;
}
nav .nav-button:hover, nav .klapp-button:hover {
	background-color: #a4ceef;
	cursor: pointer;
}
nav ul li {
	display: inline;
	float: left;
}
nav .nav-button {
	float: left;
	color: white;
	font-weight: bold;
	font-size: 1.2em;
	margin-left: auto;
	margin-right: auto;
	width: 5em;
	height: 2em;
}
nav .nav-button a {
	text-decoration: none;
	color: white;
}
nav ul li ul, nav ul li ul li {
	display: block;
}
nav .user-icon:hover .user-klappmenu, nav .user-icon li:hover .user-klappmenu,
nav .menue-icon:hover .user-klappmenu, nav .menue-icon li:hover .user-klappmenu {
	display: block;
}
nav .menue-icon {
	width: 3em;
}
nav .menue-icon img:first{
	height: 3em;
}
nav .nav-klappbar {
	font-size: 0.5em;
}
nav .user-klappmenu {
	display: none;
}
nav .klapp-button {
	width: 8em;
	text-align: left;
	height: 1.4em;
	background-color: #a4ceef;
	padding: 0.3em 0.2em 0.3em 0.4em;
}
nav .klapp-button:hover {
	background-color: #96C8F0;
	cursor: pointer;
}
#navd{
	display: none;
}
#navm {
	font-size: 1em;
	text-align: center;
	grid-area: navm;
	z-index: 99;
	margin: 1em 1em 0 0;
	padding-top: 0.2em;
	line-height: 1.4em;
	background-image: linear-gradient(#96C8F0 33.3%, #a4ceef 33.3%, #a4ceef 66.6%);
	display: inline;
}

@media all and (min-width: 1024px) {
	body {
		min-height: 100%;
		display: grid;
		grid-template-rows: 7em auto 2.2em 1.3em;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:  
		"logo header header header navd navd navd navd"
		"main main main main main main main main"
		"button button button button button button button button"
		"footer footer footer footer footer footer footer footer";
	}
	header {
		grid-area: header;
		color: white;
		text-align: left;
		margin: 1em 0 0 0;
		padding-top: 1em;
		background-image: linear-gradient(#96C8F0 33.3%, #a4ceef 33.3%, #a4ceef 66.6%);
		display: inline;
	}
	header h1 {
		font-size: 1.6em;
		font-weight: bold;
	}
	header h2 {
		font-size: 1.1em;
		line-height: 2em;

		display: inline;
	}
	header img {
		width: 1.5em;
		padding-right: 0.2em;
		margin: 1em 0 0 1em;
	}
	#navd {
		font-size: 1em;
		text-align: center;
		grid-area: navd;
		z-index: 99;
		margin: 1em 1em 0 0;
		padding-top: 0.2em;
		line-height: 1.4em;
		background-image: linear-gradient(#96C8F0 33.3%, #a4ceef 33.3%, #a4ceef 66.6%);
		display: inline;
	}
	#navm {
		display: none;
	}
	nav .nav-button {
		width: 7em;
		height: 2em;
	}
}
#logo {
	grid-area: logo;
	margin: 1em 0 0 1em;
	background-image: linear-gradient(#96C8F0 33.3%, #a4ceef 33.3%, #a4ceef 66.6%);
	display: inline;
}
#logo img {
	width: 8em;
}
main {
	grid-area: main; 
	min-height: 60vh;
	width: 100%;
	text-align: center;
}
article {
	background-color: white;
	font-size: 0.8em;
	margin-left: 1em;
	margin-right: 1em;
	padding-bottom: 0.3em;
}
article #allg_infos {
	background-color: white;
	margin-bottom: 0.2em;
	padding: 0.3em 0.3em 1em 0.3em;
	text-align: left;
}
article #allg_infos h1{
	font-size: 1.8em;
	color: black;
	font-weight: bold;
	padding-bottom: 0.4em;
}
article #allg_infos h2{
	font-size: 1.2em;
	color: black;
	font-weight: bold;
	padding-top: 0.4em;
}
article #allg_infos h4{
	font-size: 1.2em;
	color: black;
	font-weight: bold;
	padding-bottom: 0.4em;
}
article #allg_infos img {
	float: right;
	height: 12em;
}
article #allg_infos ul li {
	list-style: disc;
	margin-left: 1em;
}
article .fehler {
	background-color: orange;
	padding: 1em;
	font-size: 1.2em;
}
article .hinweis {
	background-color: lightgreen;
	padding: 1em;
	font-size: 1.2em;
}
article .fehler img, article .hinweis img {
	width: 2em; 
	float: left;
	padding-right: 2em;
}
article .fehler h1, article .hinweis h1 {
	font-size: 1.4em;
	font-weight: bold;
	padding-bottom: 0.2em;
}
@media all and (min-width: 1024px) {
	article #allg_infos img {
		height: 15em;
	}
}
.fortschritt {
	display: block;
	padding: 1em 1em 0 0;
	font-size: 0.6em;
	text-align: right;
}
.hinweis, .uebersicht_hinweis {
	text-align: left;
	padding: 1em 0.5em 0.1em 0.5em;
	display: block;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.3em;
}
.hinweis strong {
	font-weight: bold;
}
.hinweis .link {
	color: blue;
	text-decoration: underline;
}
.hinweis ul li {
	list-style-type: disc;
	margin-left: 1em;	
}
.uebersicht_hinweis {
	background-color: #9FF781;
	line-height: 2em;
	border: 1px solid darkred;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	padding: 0.1em 0.1em 0.1em 0.1em;
	font-size: 1.8em; 
	color: darkred;
	background-image: url(../grafiken/daumen_hoch.png);
	background-repeat: no-repeat;
	background-size: 3.4em 3.4em;
	padding-left: 3.5em;
	min-height: 3.2em;
}
.code {
	text-align: left;
	margin-top: 0.2em;
	padding: 1em 0.5em 1em 0.5em;
	background-color: #fdfcf3;
	display: block;
	margin-left: 0.5em;
	margin-right: 0.5em;
	border-radius: 0.3em;
	font-family: helvetica;
	font-size: 0.8em;
	line-height: 0.93em;
}
.code input {
	margin-top: 0.1em;
	border: 1px solid darkred;
	border-radius: 0.1em;
	width: 3em;
}
.code strong {
	font-size: 120%;
	font-weight: bolder;
}
.code fieldset {
	border: 1px solid darkred;
	font-size: 0.7em;
	margin: 0.1em;
	padding: 0.2em 0.2em 0.5em 1em;
	line-height: 0.8em;
	border-radius: 1em;
}
.code legend {
	color: darkred;
	padding: 0 0.3em 0 0.3em;
	margin-left: 1em;
}
.code .codeueberschrift {
	font-size: 1.2em;
	font-weight: bold;
	color: orange;
	padding-bottom: 0.3em;
}
#code_ausfuehren {
	display: none;
	text-align: left;
	padding: 0.5em 0.5em 0.5em 0.5em;
	background-color: lavender;
	display: block;
	margin: 0.5em 0.5em 0 0.5em;
	border-radius: 0.3em;
}
#code_ausfuehren .ausf_hinweis {
	text-align: right;
	font-size: 60%;
	display: block;
	margin: 0 0.5em 0 0;
}
#code_ausfuehren p {
	margin: 0;
	padding: 0;
}
#code_ausfuehren strong, #auswahl strong, #loesung strong {
	font-size: 120%;
	font-weight: bolder;
}
#code_ausfuehren em, #auswahl em, #loesung em {
	font-style: italic;
}
#code_ausfuehren h1 {
	font-size: 1.2em;
	font-weight: bold;
}
#code_ausfuehren ul li {
	list-style-type: disc;
	margin-left: 1em;
}
#code_ausfuehren ol .olstandard{
	list-style-type: number;
}
#code_ausfuehren ol li {
	margin-left: 1.5em;
}
#code_ausfuehren table th {
	font-weight: bold;
}
#code_ausfuehren fieldset {
	border: 1px solid black;
	border-radius: 0.3em;
	padding: 0.2em;
}
#code_ausfuehren legend {
	padding: 0 0.3em 0 0.3em;
	margin-left: 1em;
}
#auswahl, #luecken {
	margin-top: 0.2em;
	padding: 1em 0.1em 1em 0.1em;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
#auswahl {
	text-align: left;	
}
#auswahl .ausw_btn {
	text-align: left;
	margin: 0.1em 0 0.1em 0;
	background-color: lavender;
	border-radius: 0.3em;
	width: 100%;
	border: 0;
}
#auswahl .ausw_btn:hover {
	cursor: pointer;
	color: #4d4d4d;
	border-radius: 0.3em;
}
#auswahl .ausw_hinweis, #luecken .ausw_hinweis {
	font-size: 50%;
	color: #4d4d4d;
}
#luecken {
	text-align: center;
}
#luecken .lueckentext {
	margin: 0.2em 0.2em 0.1em 0.2em;
	padding: 0.1em 0.1em 0.1em 0.1em;
	background-color: lavender;	
	border: 1px solid grey;
	border-radius: 0.3em;
	line-height: 1.6em;
	display: inline-block;
	font-family: helvetica;
	-webkit-user-drag: element;
}
#luecken .lueckentext:hover {
	cursor: move;
}
#loesung {
	display: none;
	padding: 1em 0.5em 1em 0.5em;
	margin: 0.2em 0.5em 0.2em 0.5em;
	color: black;
	text-align: left;
	background-image: url(../grafiken/daumen_hoch.png);
	background-repeat: no-repeat;
	background-size: 3.4em 3.4em;
	padding-left: 3.5em;
	min-height: 3em;
	border-radius: 0.3em;
}
#loesung h1 {
	font-size: 120%;
	font-weight: bolder;
}
#loesung h3 {
	font-weight: bolder;
	padding-top: 1em;
}
.button {
	grid-area: button;
	text-align: center;
	width: 80%;
	margin: 0.1em 0 0.1em 0;
	margin-left: auto;
	margin-right: auto;
}
.button button, .button input, .button a {
	width: 100%;
	font-size: 1em;
	border: 2px solid darkgreen;
	background-color: lightgreen;
	padding: 0.2em 0.4em 0.2em 0.4em;
	color: black;
	border-radius: 0.3em;
	text-decoration: none;
}
.button :hover {
	color: white;
	background-color: darkgreen;
	border: 2px solid lightgreen;
	cursor: pointer;
	border-radius: 0.3em;
}
#btn_weiter {
	margin-top: 2px;
	display: none;
}
#btn_weiter input{
	background-color: orange;
}
#btn_fehler {
	margin-top: 2px;
}
#btn_fehler input{
	margin: 0.5em 0 0.3em 0;
	padding: 0 3em;
	border: 1px solid orange;
}
footer {
	grid-area: footer;
	background-color: white;
	text-align: center;
	border-top: 1px solid darkred;
	display: flex;
	flex-flow: column wrap;
	align-main: center;
}
.rot {
	color: red;
}
.blau {
	color: blue;
}
.gruen {
	color: green;
}
.orange {
	color: orange;
}
.linksbuendig {
	text-align: left;
}