:root {
		--f0:transparent; /*  */
		--f1:#444444; /* Schrift */
		--f2:#ffffee; /* Hintergrund */
		--f3:#208090; /* Link */
		--f4:#ffffff; /* weiß */
		--f5:#222222; /* Buttonschrift */
		--f6:#dddddd; /* Buttonhintergrund */
		--f7:#bbbbbb; /* Buttonhover */
		--f8:#ffffff; /* Inputhintergrund */
		--f9:#777777; /* mittel */
}

@media (prefers-color-scheme:dark) {
	:root {
		--f0:transparent; /*  */
		--f1:#aaaaaa; /* Schrift */
		--f2:#000000; /* Hintergrund */
		--f3:#208090; /* Link */
		--f4:#000000; /* schwarz */
		--f5:#222222; /* Buttonschrift */
		--f6:#333333; /* Buttonhintergrund */
		--f7:#bbbbbb; /* Buttonhover */
		--f8:#000000; /* Inputhintergrund */
		--f9:#777777; /* mittel */
	}
	img {
		opacity:0.8;
		transition:opacity ease-in-out 0.2s;
	}
	img:hover {
		opacity:1;
		transition:opacity ease-in-out 0.2s;
	}
}

@font-face {
	font-family:'biolinum-woff'; 
	src:local('Linux Biolinum'), 
		url('LinBiolinum_R.woff') format('woff'), 
		url('https://ekg-sn.de/fonts/LinBiolinum_R.woff') format('woff');
}

/* ######## klein ######## */
* {
	font-family:biolinum-woff,sans-serif;
	box-sizing:border-box;
	margin:0;
	padding:0;
	color:var(--f1);
	background-color:var(--f2);
}
body {
	font-size:0.9em;
	display:flex;
	align-items:center;
	justify-content:center;
}
#ganzeSeite {
	border:solid 0.1em var(--f3);
	flex:1 50%;
	display:flex;
	flex-direction:column;
	max-width:360px;
	max-height:680px;
}
p {
	margin-top:0.3em;
}
a {
	text-decoration:none;
	color:var(--f3);
}
input,button {
	cursor:pointer;
	border:solid 0.1em var(--f9);
	margin-top:0.1em;
	padding:0.2em;
}
[type="text"],[type="passwort"] {
	background-color:var(--f8);
	color:var(--f1);
}
[type="button"],[type="submit"],button {
	background-color:var(--f6);
	color:var(--f1);
}
[type="button"]:hover,[type="submit"]:hover,button:hover {
	background-color:var(--f7);
	color:var(--f3);
}
ul {
}
li {
	cursor:pointer;
	list-style-type:none;
	padding:0.2em 0.2em 0.2em 0.2em;
	display:flex;
	justify-content:center;
	align-items:center;
}
table {
	border-collapse:collapse;
	width:100%;
}
table,tr,td {
	border:solid 1px #000000;
	padding:0.2em;
}
tr {
}
td {
}

header,aside,section,footer {
	border-radius:0.1em;
	border:solid 0.1em var(--f9);
	margin:0.1em;
	padding:0.1em;
}

/* #### header #### */
header {
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:row;
}
#navMenu,#divTitel,#navHilfe {
	height:2em;
	background-color: var(--f0);
	flex:1;
}
/* Menü */
#navMenu {
	z-index:9;
}
#imgMenu { /* Menüsymbol */
	background-color: var(--f0);
	color:var(--f3);
	font-size:6em;
	line-height:0.15em;
	padding:0 0.1em 0 0.1em;
	flex:1;
}
#navMenu:hover .ulNav {
	left:-0.2em;
}
.ulNav {
	display:flex;
	flex-flow:row wrap;
	position:relative;/**/
	max-width:8em;
	left:-9em;
	transition:left 1s;
	margin:0.05em 0 0 0.05em;
	padding:0.2em 0.2em 0.2em 0.5em;
	background-color:var(--f6);
	border:solid 0.1em var(--f1);
	line-height:1.6em;
}
.liNav {
	padding:0 0 0.1em 0;
	margin:0.2em;
	width:12em;
	border:solid 0.1em var(--f1);
	background-color:var(--f6);
	list-style-type:none;
	cursor:pointer;
}
.liNav:hover {
	background-color:var(--f7);
}
.aNav {
	display:block;
	text-align:center;
	width:100%;
}

/* Überschrift */
#divTitel {
	text-align:center;
}
#spanTitel { /* Ordnername als Titel */
	background-color: var(--f0);
	color:var(--f3);
	font-size:2em;
}

/* Hilfe */
#navHilfe {
	text-align:right;
	z-index:99;
}
#imgHilfe { /* Fragezeichen */
	cursor:pointer;
	background-color:var(--f0);
	color:var(--f3);
	font-size:2em;
	line-height:1.0em;
	padding:0 0.5em 0 0.5em;
	flex:1;
}
/*#divHilfe:hover #divHilfe {
	right:0.2em;
	display:flex;
}*/
#divHilfe {
	display:none;
	border:solid 0.1em var(--f1);
	position:fixed;
	/*left:calc(100% / 4);
	left:0;*/
	width:99%;
	height:99%;
	max-width:50em;
	text-align:left;
}

/* #### aside1 #### */
aside#aside1 {
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:row;
}
form {
	text-align:center;
}

/* #### section #### */
section {
	flex:1 50%;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:row;
	background-color:var(--f4);
}
img#aufgabe {
	max-width:95%;
	max-height:95%;
	max-width:30em;
	max-height:20em;
	z-index:1;
}

/* #### aside2 #### */
aside#aside2 {
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:row;
}
td.tabelle {
	font-size:0.8em;
	text-align:center;
	padding:0.1em 0.1em 0.1em 0.1em;
	height:2.2em;
	cursor:pointer;
	border:solid 0.1em var(--f3);
	min-width:10%;
}
li.liste {
	font-size:0.6em;
	text-align:center;
	padding:0.2em 0.2em 0.2em 0.2em;
	cursor:pointer;
	border:solid 0.1em var(--f3);
	flex:1 20%;
}
#idName {
	width:16em;
}
#idKlasse {
	width:4em;
}

/* #### footer #### */
footer#hinweise {
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:row;
	font-size:0.8em;
}

/* #### auswertung #### */
#auswertung {
	
}
#auswertungKopf {
	color:red;
}
#auswertungFuss {
	color:blue;
}
#tableAuswertung td {
	border:solid 0.1em var(--f3);
	padding:0.1em;
	height:1.0em;
	font-size:0.7em;
}
#divAuswertung {
	max-width:40em;
	text-align:center;
	flex:1 50%;
}
#divAuswertung table {
	width:98%;
	margin:1%;
}


/* #### sehr klein #### */
@media all and (max-width:380px) {
#ganzeSeite {
	
}

body {
	/*font-size:0.65em;*/
	font-size:0.9em;
}
td.tabelle {
	font-size:0.8em;
	padding:0.5em 0.1em 0.5em 0.1em;
}
/*
li,td {
	color:red;
	height:2.8em;
}
img#aufgabe {
	max-width:10em;
	height:10em;
}*/
}


/* #### mittel #### */
@media all and (min-width:380px) {
body {
	font-size:1em;
}
.ulNav {
	left:-26em;
}

}


/* #### groß #### */
@media all and (min-width:900px) {
#ganzeSeite {
	margin-left:9em;
	max-width:900px;
	max-height:900px;
}
body {
	font-size:1.2em;
}
td.tabelle {
	font-size:1em;
	padding:0.2em 0.1em 0.2em 0.1em;
	height:1.8em;
}
.ulNav,#navMenu:hover .ulNav {
	left:-9em;
}
#imgMenu { /* Menüsymbol */
	display:none;
}

img#aufgabe {
	max-width:40em;
	max-height:20em;
}
#tableAuswertung td {
	height:1.3em;
	font-size:1em;
}

}

div#noscript {
	 text-align:center;
	 z-index:999;
	 font-size:190%;
	 color:#880000;
	 background-color:#ffffff;"
}

/* #### versteckter Bereich #### */
#testButton {
	display:none;/**/
	line-height:0.4em;
	padding-top:0.1em;
}
#testIframe {
	display:none;/**/
	height:18em;
}
.versteckterBereich {
	display:none;
	flex-wrap:wrap;
	/*flex-direction:row;*/
	background-color:red;
	/*position:absolute;
	left:0;
	bottom:0;
	font-size:0.7em;
	line-height:0.7em;
	max-width:100%;*/
}
.inputVersteckt {
	/*width:6em;
	height:1.5em;*/
	flex:1;
}
.textareaVersteckt {
	width:100%;
	/*height:1.5em;
	flex:1;*/
}