/* konform zu CSS3 - copyright 2016 Gerrit Hecht, Gerrit@Squap.de, Squap.de - alle Rechte vorbehalten - erstellt am: 25. Februar 2016 */


/* Style-Grundeinstellung für IE Versionen kleiner gleich 8 */
	nav, article, section {
		display: block;
	}
	
	
/* Normalisierung */
	* {
		margin: 0; 
		padding: 0;
		border: 0;
	}
	a {
		text-decoration: none;
		color: inherit;
	}
	ul {
		list-style: none;
	}
	table {
		border-collapse: collapse;
	}

	
/* Schrift und Schriftgrößen */
	@font-face {
		font-family: "Open Sans"; src: url("opensans/OpenSansRegular.ttf") format("truetype");
	}
	@font-face {
		font-family: "Open Sans"; src: url("opensans/OpenSansBold.ttf") format("truetype");
		font-weight: bold;
	}

	body {
		font: normal 1em/1.25 "Open Sans", sans-serif; /* skalierbar von 0.7 bis 2 */
	}
/*	@media (max-width: 1520px) {
		body {font-size: 1em;}
	}*/
	@media (max-width: 720px) {
		body {font-size: 0.8em;}
	}
	
	h1,
	.index #inhalt a {
		font-size: 1.5em;
		font-weight: bold;
	}
	
	h2,
	#menue ul ul ul li .auf .knopf .infos, /* für Menüanimationen */
	#menue .auf > ul, /* für Menüanimationen */
	#inhalt ul ul ul { /* für Menüanimationen */
		font-size: 1em;
	}
	
	p,
	td,
	#menue.auf > ul, /* für Menüanimationen */
	#inhalt ul ul ul .bild+span { /* für Menüanimationen */
		font-size: 0.8125em;
	}
	
	#fuss p {
		font-size: 0.625em;
	}

	
/* Farben */
	body {
		color: #444444;
	}
	
	#kopf > .titel,
	#fuss,
	#menue > .knopf,
	.projekte #inhalt > ul ul li {
		color: #FFFFFF;
	}
	
	#menue .knopf:hover,
	a:hover {
		color: #CCCCCC;
	}

	#kopf,
	#fuss {
		background-image: linear-gradient(#777777 0.2em, #333333 calc(100% - 0.2em), #222222);
	}
	
	#menue > ul {
		background: #FFFFFF;
	}
	
	
/* Formatierung */
	body {
		width: calc(100% - 6em);
		min-width: 44em;
		max-width: 88em;
		margin: 1em auto;
	}
	@media (max-width: 900px) {
		body {width: 100%;}
	}
	body > *:after { /* clearfix für Elemente direkt unter body: kopf, inhalt, fuss */
		content: '';
		clear: both;
		display: block;
	}
	
	/* Kopf */
	#kopf {
		position: relative;
	}

	/* Fuß */
	#fuss {
		padding: 0.75em 2.25em 0.75em;
	}
	#fuss .rechts {
		float: right;
	}
	#fuss .rechts a {
		margin-left: 3em;
	}
	#fuss .rechts span {
		display: none;
	}
	#fuss .rechts a:hover span {
		display: inline;
	}
	#fuss .rechts img {
		margin-bottom: -3px;
		margin-left: 1.5em;
	}
	
	/* Menü allgemein */
	#menue {
		position: absolute;
		z-index: 3;
		top: 0;
		width: 100%;
	}
	#menue .knopf {
		cursor: pointer;
	}
	#menue .knopf:hover .bild,
	#menue a:hover .bild {
		opacity: 0.5;
		filter: alpha(opacity = 50);
	}
	#menue .bild {
		height: 2.1em;
		width: 2.8em;
		display: block;
		float: left;
		overflow: hidden;
		margin-right: 0.75em;
	}
	#menue .bild img {
		height: 100%;
	}
	#menue .bild+span {
		padding-top: 0.4em;
		display: block;
	}
	#menue .sp {
		position: absolute;
		white-space: nowrap;
		text-align: right;
	}
	#menue .s1 {
		right: 27em;
	}
	#menue .s2 {
		right: 21em;
	}
	#menue .s3 {
		right: 14em;
	}
	#menue .s4 {
		right: 8em;
	}
	#menue .s5{
		right: 0;
	}
	/* 1. Ebene Knopf */
	#menue > .knopf {
		padding: 0.9em 0 0.6em 2.8em;
		margin-right: 38%;
	}
	#menue > .knopf:before {
		content: "";
		font-size: 1.25em;
		display: inline-block;
		margin-left: -1.5em;
		width: 1em;
		height: 0.21em;
		border-top: 0.6em double;
		border-bottom: 0.21em solid;
	}
	#menue > .knopf span {
		padding-left: 0.625em;
	}
	/* 1. Ebene Liste */
	#menue > ul {
		margin-top: 59px;
		padding: 1.23em 2.8em 1.23em 2.77em;
		min-height: 28em;
		font-size: 0;
		transition: font-size 0.5s ease-in;
		-webkit-transition: font-size 0.5s ease-in;
	}
	/* 2. Ebene Hauptmenü */
	#menue ul li {
		margin-bottom: 1em;
	}
	/* 3. Ebene Liste Projekte */
	#menue ul ul {
		padding-top: 1em;
	}
	/* 4. Ebene Menüs oeff priv */
	#menue ul ul li {
		padding-left: 1em;
	}
	/* 5. Ebene Titel und Listen oeff priv */
	#menue ul ul ul {
		padding-top: 0.75em;
	}
	/* 6. Ebene Menüs feu pol sch efh mfh */
	/* 7. Ebene Knöpfe feu pol sch efh mfh */
	#menue ul ul ul li .knopf .bild+span {
		overflow: hidden;
		padding-bottom: 0.25em;
	}
	#menue ul ul ul li .knopf .infos {
		font-size: 0;
		transition: font-size 0.5s ease-in;
		-webkit-transition: font-size 0.5s ease-in;
	}
	#menue ul ul ul li .infos {
		float: right;
		padding-top: 0.4em;
		position: relative;
	}
	/* 7. Ebene Listen feu pol sch efh mfh */
	#menue ul ul ul ul {
		font-size: 0;
		transition: font-size 0.5s ease-in;
		-webkit-transition: font-size 0.5s ease-in;
	}
	/* 8. Ebene Menü einzelne Projekte kategoriebezogen */
	#menue ul ul ul ul li {
		margin-left: 2.55em;
		padding-left: 0.75em;
		overflow: hidden;
	}


	/* Inhalt allgemein */
	#inhalt {
		transition: opacity 0.5s ease-in;
		-webkit-transition: opacity 0.5s ease-in;
	}
	#inhalt.blenden {
		opacity: 0;
		filter: alpha(opacity = 0);
	}