body {
	margin: 130px 4%;
	max-width: 800px;
	font: 18px Arial, Helvetica, sans-serif;
	line-height: 24px;
}
img {
	float: left;
	margin: 5px 10px 10px 0px;
	position: relative;
	max-width: 100%;
}

/* Menüleiste */
div.menu {
	position: fixed;
	left: 5%;
	top: 30px;
	z-index : -1;
	padding : 0;
}

/* Menüleiste: Animationen */
div.menu div { 
	-webkit-transition: opacity ease 1s, max-width step-end 1s, max-height step-end 1s, min-height step-end 1s; 
	-webkit-transition-delay: 1s;
	transition: opacity ease 1s, max-width step-end 1s, max-height step-end 1s, min-height step-end 1s;
	transition-delay: 1s;
}
div.menu:hover div { 
	-webkit-transition: opacity ease 1s; 
	-webkit-transition-delay: 0s; 
	transition: opacity ease 1s; 
	transition-delay: 0s; 
}

/* Menüleiste: Einzelpunkte */
div.menu > div {		
	max-width : 0px;
	max-height: 0px;
	min-height: 0px;
	padding: 0;
	overflow: hidden;
}

/* Menüleiste: Einzelpunkte, Symbole */
div.menu > div > div:first-of-type {
	position: absolute;
	left: 0;
	width: 60px;
	height: 60px;
	opacity : .2;
}
div.menu > div:nth-of-type(1) > div:first-of-type { top:   0px; }
div.menu > div:nth-of-type(2) > div:first-of-type { top:  60px; }
div.menu > div:nth-of-type(3) > div:first-of-type { top: 120px; }
div.menu > div:nth-of-type(4) > div:first-of-type { top: 180px; }
div.menu > div > div:first-of-type > svg {
	width: 35px
}
div.menu > div > div:first-of-type > svg > path {
	fill: #000;
	opacity: .5;
}

/* Menüleiste: Einzelpunkte, Symbole, vertikale Ausrichtung */
div.menu > div > div:first-of-type > span {
	height: 100%;
	vertical-align: bottom;
	display: inline-block;
}

/* Menüleiste: Einzelpunkte, Inhalt */
div.menu > div > div + div {
	opacity: 0;
	display: inline-block;
	overflow-y: scroll;
	padding: 0 18px;
	max-height: 80vh;
	max-width : 54vw;
	margin: 10px 10px 10px 60px;
	color: #000;
	background: #ffffff;
	background: #fffffff8;
	box-shadow: 0 0 3px 3px #ffffff;
	direction : rtl;
}
div.menu > div > div + div * {
	direction: ltr;
}
div.menu > div > div + div > a {
	display: block;
	font-size: 20px;
	line-height: 26px;
	margin-bottom: 16px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* Menüleiste: Einzelpunkte, Inhalt, vertikale Ausrichtung */
div.menu > div > span {
	min-height: inherit;
	vertical-align: baseline;
	display: inline-block;
}

/* Menüleiste: Aktionslayer */
div.menu:nth-of-type(2) { z-index: 1; }

/* Menüleiste: Aktionslayer, Hover-Effekte */
div.menu:nth-of-type(2)       > div { opacity: 0; }
div.menu:nth-of-type(2):hover > div { opacity: 1; }

/* Menüleiste: Aktionslayer, Einzelpunkte, Hover-Effekte */
div.menu:nth-of-type(2):hover > div:nth-of-type(n):hover { max-height: 100%; max-width: 100%; }
div.menu:nth-of-type(2):hover > div:nth-of-type(1):hover { min-height:  70px; }
div.menu:nth-of-type(2):hover > div:nth-of-type(2):hover { min-height: 130px; }
div.menu:nth-of-type(2):hover > div:nth-of-type(3):hover { min-height: 190px; }
div.menu:nth-of-type(2):hover > div:nth-of-type(4):hover { min-height: 250px; }

/* Menüleiste: Aktionslayer, Einzelpunkte, Symbole, Hover-Effekte */
div.menu:nth-of-type(2):hover > div       > div:first-of-type { opacity: inherit; }
div.menu:nth-of-type(2):hover > div       > div:first-of-type > svg { filter: drop-shadow(0 0 3px #fff); }
div.menu:nth-of-type(2):hover > div:hover > div:first-of-type > svg > path { opacity: 1; }

/* Menüleiste: Aktionslayer, Einzelpunkte, Inhalt, Hover-Effekte */
div.menu:nth-of-type(2):hover > div:hover > div + div { opacity: 1; }

/* Menüleiste: Formulare */
div.menu form {
	width: 50vw;
	max-width: 600px;
}

/* Menüleiste: Formulare, Felder */
div.menu form textarea {
	height: 200px;
	font-family: inherit;
	resize: none;
	width: 100%;
}
div.menu form button {
	position: relative;
	float: right;
	margin-top: 16px;
	min-width: 30%;
}
div.menu form > textarea {
	margin-top: 20px;
	border: 2px groove threedface;
}

/* Menüleiste: Formulare, Fieldset */
div.menu form > fieldset {
	margin-top: 10px;
	position: relative;
	font-size: 14px;
}

/* Menüleiste: Formulare, Fieldset, Felder */
div.menu form > fieldset > input {
	width: 100%;
}

/* Menüleiste: Formulare, Honeypot */
div.menu form > fieldset:first-of-type {
	height: 0;
	margin: 0;
	padding: 0;
	border: none;
	overflow: hidden;
}

/* Menüleiste: Formulare, Info-Knubbel */
div.menu form > fieldset > span {
	font-size: 12px;
	max-width: 18px;
	max-height: 18px;
	line-height: 14px;
	border: 2px solid #ddd;
	border-radius: 10px;
	position: absolute;
	z-index: 100;
	right: 0;
	top: 0;
	margin-left: 10vw;
	background: #ddd;
	background: #ddddddf0;
	overflow: hidden;
	-webkit-transition: all ease 0.1s;
	box-shadow: 0 0 2px 0px #ddd;
	transition: all ease 0.1s;
}
div.menu form > fieldset > span p {
	padding: 0 7px;
}
div.menu form > fieldset > span:before {
	content: '?';
	display: block;
	font-weight: bold;
	line-height: 18px;
	height: 18px;
	width: 18px;
	text-align: center;
	background-color: #f0d02b;
	color: #fff;
	border-radius: inherit;
	float: right;
}

/* Menüleiste: Formulare, Info-Knubbel, Hover-Effekte */
div.menu form > fieldset > span:hover { max-width: 100%; max-height: 300px; }

/* Menüleiste: Suche */
div.menu form#suche {
	margin: 10px 0;
}
div.menu form#suche > input {
	width: 100%;
	padding-right: 20px;
}
div.menu form#suche > input + button {
	margin: -21px 0 0 0;
	min-width: 0;
	padding: 0;
	width: 21px;
	height: 21px;
	border-width: 2px;
}
div.menu form#suche > input + button > svg {
	height: 15px;
	width: 15px;
}

/* Inhalt: Bilder hinter das Menü */
div.content img {
	z-index: -2;
}

span.rights{
	display: block;
	text-align: right;
	margin-top: 60px;
	color: #666;
}