html {
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	height: 100%;
}
*, ::before, ::after {
	box-sizing: inherit;
}
body {
	background-color: #fefbd9;
	/*margin-top: 0;
	margin-left: 0;
	margin-right: 0;*/
	margin: 0;
	height: 100%;
	padding-bottom: 6em;
}
header {
	background-image: linear-gradient(#0066ff, #e3eeff);
	border-top: 0.5em solid #ffc237;
	/*background-color: #FFBF00;*/
	padding-left: 0.5em;
	padding-right: 0.5em;
	/*opacity: 0.8;*/
	position: relative;
	z-index: 10;
}
h1, h2 {
	margin: 0.2em auto;
}
h1 {
	font-size: 1.5em;
}
table {
	background-image: linear-gradient(#f0f0f0, #bbbbbb, #f0f0f0);
	/*background-color: #d2d2f6;*/
	/*table-layout: fixed;*/
	text-align:left;
	/*border-collapse: collapse;*/
	width: 100%;
	border: 2px solid #0066ff;
	border-radius: 0.5em;
	box-shadow: 0.1em 0.1em 1em 0.5em #bbbbbb;
}
tr:not(:first-child) > td {
	border-top: 1px solid #ffc237;
}
main {
	text-align: center;
	top: 0;
	bottom: 0;
}
.imp {
	text-align: left;
	padding-left: 0.5em;
}
.page-wrapper {
	margin: 0 auto;
	height: 100%;
}
img {
	background-image: linear-gradient(#f0f0f0, #bbbbbb, #f0f0f0);
	border: 2px solid #0066ff;
	border-radius: 0.5em;
	box-shadow: 0.1em 0.1em 1em 0.5em #bbbbbb;
	max-width: 100%;
	height: auto;
	display: block;
	margin: 1em auto !important;
}
nav > ul > li {
	list-style-type: none;
	background-image: linear-gradient(#f0f0f0, #bbbbbb, #f0f0f0);
	/*margin-bottom: 0.5em;*/
	border-top: 0.2em solid #f0f0f0;
	border-bottom: 0.2em solid #f0f0f0;
}
nav > ul > li > a {
	text-decoration: none;
	color: #0066ff;
	font-weight: bold;
}
nav > ul {
	padding-left: 0;
}
.spalte1 {
	width: 15em;
}
.spalte2 {
	width: 7em;
}
.spalte3 {
	/*width: 4em;*/
}
header > nav > ul >li.active {
	border-bottom: 0.2em solid #ffc237;
}
#pano {
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	/*z-index: -10;*/
}
@media (min-width: 60em) {
	header {
		text-align: center;
		padding-bottom: 0.5em;
	}
h1 {
	font-size: 2em;
}
	nav > ul {
		margin: 0;
		padding: 0;
		overflow: hidden;
		display: inline-block;
		width:100%;
	}
	nav > ul > li {
		float: left;
		/*text-align: left;*/
		/*display: inline;*/
	}
	nav > ul > li > a {
		display: block;
		padding: 0 1em;
		font-size: 1.3em;
	}
	main {
		/*display: flex;*/
		/*clear: both;*/
	}
	table {
			table-layout: fixed;
	}
	.mainleft {
		flex: 0 1 35%;
		padding: 0.2em;
		text-align: center;
	}
	.spalte3 {
		visibility: collapse;
	}
  td + td +td {
		display: none;
	}
	.mainright {
		flex: 0 1 65%;
		padding: 0.2em;
		text-align: center;
	}
	.mainleft > table {
		width: 22em;
		margin: auto;
	}
	.mainright > table, img {
		width: 35em;
		margin: auto;
	}
}
@media (min-width: 80em) {
	table {
			table-layout: fixed;
	}
	.spalte3 {
		visibility: visible;
	}
	.mainleft > table {
		width: 28em;
	}
	.mainright > table, img {
		width: 50em;
	}
	  td + td +td {
		display: block;
	}
}
footer {
  position: fixed;
  /*padding: 0.5em;*/
  bottom: 0;
  left: 0;
  right: 0;
}
