/* ---------- Design-Vorgaben ---------------- */

body {
	margin: 0;
	padding: 0;
	background-color: white;
	font-family: Helvetica, sans-serif;
	font-size: 100%; 
}
html, body {
	height: 100%;
}

/* ---------- Seitenaufbau ---------------- */

div.seite {
	margin: auto;
	width: 100%;
	max-width: 1200px;
	min-height: 98.5%;
	height: auto !important;
	height: 100%;
	background-color: white;
}
div.kopfzeile {
	margin: 0;
	width: 100%;
	background-color: white;
}
div.sprache {
	float: right;
	margin-right: 2%;
	margin-top: 5px;
	font-size: 0.8em;
}
div.content {
	width: 100%;
	min-height: 100%;
}
div.hintergr-s {	/* --- Startseite --- */
	background: url(pics/Hintergr-s.jpg) no-repeat top center;
    background-size: cover;
}
div.hintergr-i {	/* --- Impresseum-Seite --- */
	background: url(pics/Hintergr-i.jpg) no-repeat top center;
    background-size: cover;
}
div.hintergr-d {	/* --- Datenschutz-Seite --- */
	background: url(pics/Hintergr-d.jpg?v=2) no-repeat top center;
    background-size: cover;
}
div.hintergr-k {	/* --- Kontaktformular-Seite --- */
	background: url(pics/Hintergr-k.jpg) no-repeat top center;
    background-size: cover;
}
div.fusszeile {
	margin: auto;
	width: 100%;
	max-width: 1200px;
	font-size: 0.6em;
}

/* ---------- Menü-Auswahl-Block ---------------- */

div.menublock {
	float: right;
	margin-right: 2%;
	width: 160px;
}
div.menu {
	width: 100%;
	margin-bottom: 10px;
	background-color: #4A586C;
	padding-top: 8px;
	padding-bottom: 8px;
	text-align: center;
	box-shadow: 3px 3px 6px #666;
}
div.menu:hover {
	background-color: #242C38;
}

/* ---------- Text-Block ---------------- */

div.textblock {
	width: 350px;
	background-color: rgba(197, 205, 217, 0.8);
	margin-left: 2%;
	padding: 1%;
}
div.formular {
	width: 450px;
	margin-left: 2%;
}
div.auto {
	height: 500px;
	overflow: auto;
}

/* ---------- Links ---------------- */

a.menu:link, a.menu:visited {
	color: white;
	font-weight: normal;
	text-decoration: none;
}
a.menu:hover {
	color: #FFEDA3;
}
a.splink:link, a.splink:visited {
	color: black;
	font-weight: normal;
	text-decoration: none;
}
a.splink:hover {
	color: red;
}

/* ---------- Formular-Tabelle ---------------- */

td.tex {
	padding-left: 5px;
	padding-top: 3px;
	background-color: rgba(197, 205, 217, 0.8);
	vertical-align: top;
}
td.inp {
	padding-left: 5px;
	padding-top: 5px;
	background-color: rgba(235, 240, 241, 0.5);
	vertical-align: top;
}

/* ---------- diverse Vorgaben ---------------- */

h1 {
	margin-top: 30px;
	margin-left: 2%;
	font-size: 1.8em;
	font-weight: normal;
	color: white;
	text-shadow: 1px 2px #222;
}
p {
	margin-top: 8px;
	margin-bottom: 8px;
}
input, textarea, select {
	background-color: rgba(235, 240, 241, 0.5);
	border: 1px solid black;
}
.fehler {
	font-size: 0.8em;
	font-weight: bold;
	color: #DE0000;
}
.erfolg {
	font-size: 0.8em;
	font-weight: bold;
	color: #005200;
}
.clear::after {
	content: "";
	clear: both;
	display: table;
}



/* ---------- Darstellung etwas kompakter  ----------- */
/* ---------- wenn Fenster schmal          ----------- */
@media screen and (max-width:800px) {
	h1 {
		font-size: 1.4em;
	}
}

/* ---------- Darstellung kompakt          ----------- */
/* ---------- wenn Fenster sehr schmal     ----------- */
@media screen and (max-width:600px) {
	h1 {
		font-size: 1.1em;
	}
	.logo {
		width: 180px;
	}
	div.textblock {
		width: 90%;
	}
	div.formular {
		width: 100%;
		margin-left: 0;
	}
}