.gitter {
	display: grid;
	grid-template-areas:
		'kopf1 kopf1 kopf1 kopf1 kopf1'
		'text1 text1 text1 bild1 bild1'
		'text3 text3 text3 text3 text3'
		'bild3 bild3 bild3 bild3 bild3'
		'text4 text4 text4 text4 text4'
		'bild2 bild2 text2 text2 text2'
		'form1 form1 form1 form1 form1'
		'fuss1 fuss1 fuss1 fuss1 fuss1';
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px; }

.de {
	display: inherit; }

.en {
	display: none; }

* {
	box-sizing: border-box;
	font-family: "Trebuchet MS", sans-serif;
	padding: 15px;
	margin: 0px; }

h1, h2, h3 {
	font-family: "Georgia", serif; }
h1 {
	font-size: 5vw;
	color: teal; }
li {
	list-style-type: none;
	padding: 10px; }

ul li ul {
	display: none;
	position: absolute;
	max-width: 250px;
	text-align: justify; }
ul li:hover ul {
	display: block; }
ul li ul li {
	background: black;
	color: tan;
	font-size: 75%;
	hyphens: auto; }

img {
	width: 100%;
	padding: 0px; }
input, button {
	padding: 5px; }

.emph {
	display: inline;
	padding: 0px;
	font-weight: bold; }
.emp1 {
	color: tan; }
.emp2 {
	color: indianred; }
	
.qttx {
	font-family: "Georgia", serif; }
.qtau {
	font-variant-caps: small-caps; }

.kopf1 {
	grid-area: kopf1;
	background-color: silver;
	text-align: center; 
	color: black;
	font-size: 2vw; 	}
.fuss1 {
	grid-area: fuss1;
	background-color: white;
	text-align: center;
	color: silver; }

.text {
	padding: 5px 15px 15px 30px;
	align-content: end;
	font-size: calc(2px + 1vw);
	text-align: justify;
	text-justify: inter-word; }
.text1 {
	grid-area: text1;
	background-color: teal;
	h2, h3 { color: white; }
	color: silver; }
.text2 {
	grid-area: text2;
	background-color: tan;
	color: black; }
.text3 {
	grid-area: text3;
	background-color: indianred;
	h2, h3 { color: white; }
	color: black; }
.text4 {
	grid-area: text4;
	text-align: center;
	background-color: indianred;
	color: black; }
	
.over {
	padding: 30px;
	width: 50%; 
	text-align: left;
	font-size: 1.2vw; }
.over1 {
	grid-area: bild1;
	align-content: start;
	color: tan; }
.over2 {
	grid-area: bild2;
	color: tan; }
.over3 {
	grid-area: bild3;
	color: tan; }
	
.form, .list {
	display: inline-block;
	padding: 10px;
	block-size: auto;
	justify-content: center;
	background-color: silver; }
.form1 {
	grid-area: form1; }

.menu1 {
	grid-area: menu1;
	display: none; }

.bild1 {
	grid-area: bild1;
	z-index: -100;
	padding: 0px;
	background-color: black; }
.bild2 {
	grid-area: bild2;
	z-index: -100;
	padding: 0px;
	background-color: black; }
.bild3 {
	grid-area: bild3;
	z-index: -100;
	padding: 0px;
	background-color: black; }

@media (max-width: 800px) {
.gitter {
	display: grid;
	grid-template-areas:
		'kopf1'
		'bild1'
		'text1'
		'text3'
		'bild3'
		'text4'
		'bild2'
		'text2'
		'form1'
		'menu1'
		'fuss1';
	grid-template-columns: 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px; }
.text {
	font-size: 1em; }
.bild {
	height: 300px; }
.bild3 {
	display: none; }
}

/* used colors: black, silver, slategrey, black, teal, tan, indianred */