@charset;
_import "_Rahmen_Grundgeruest.css";



/* Mobile first - alle Elemente Breite 100% und untereinander, nur Reihenfolde angepasst */
container {
	flex: 0 0 100%;
	
	display: flex;					/* Flex-Container container */
	flex-flow: column;
}

header img {
	width: 300px;
}	

nav {
	order: -1;
}



		#Hauptnavigation ul {
			display: flex;
			flex-flow: row nowrap;
			justify-content: flex-end;
		}

		#Hauptnavigation li {	

		}

#unternavigation {
	display: none;
}

article {
	display: flex;
	flex-flow: column;
}

section {
	display: flex;
	flex-flow: row nowrap;
	_justify-content: space-between;		/* links und rechts ausrichtebn */
}

section.wrap {
	flex-flow: row wrap;
	justify-content: space-around;		/* links und rechts ausrichtebn */
}

section.aside_title {
	flex-flow: row wrap;
	justify-content: flex-start;
}

#Bilder, .bereichsbuttons {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;		/* alle Zwischenräume gleichmässig verteilen (auch aussen) */
}

.linksbuendig {
	justify-content: flex-start;		/* alles links ausrichtebn */
}


section #text {
	
}

figure {
	display: flex;
	flex-flow: column wrap; 
	
	align-self: flex-start;
	flex: 0 0 auto;
		_flex: 0 0 200px;		/* ACHTING! Muss korrespondieren mit width von img und figcaption aus stylesheet.css */
}


img {
	
}
 
figcaption {
	
}

.links {
 float: left;
 margin-right: 10px;
 margin-left: 0px;
 margin-top: 0px;
}

.rechts {
 float: right;
 margin-left: 10px;
 margin-right: 0px;
}

.Referenzenliste_klein {
	display: block;
}

.Referenzenliste_gross {
	display: none;
}

aside {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

aside section {
	display: flex;
	flex-flow: column nowrap;
	__width: 100%;
}




/* Kontaktformular */
form > div { 
	display: flex; 
	flex-flow: wrap; 
}

label {
	flex: 0 8rem; 
}

input, textarea, button {
	flex: 1 20rem;
}

button {
	flex: none; /* => 0 0 auto */ 
}


footer {
	font-size: 0.8em;
}






/* Mehrspaltiges Layout für mittlere und grosse Display's   ==> ab 800px */
@media screen and (min-width: 800px) {
	body {
		display: flex;					/* Flex-Container body */
		justify-content: center;
	}

	container {
		flex: 0 1 1400px;
		
		display: flex;					/* Flex-Container container */
		flex-flow: column;
	}

	header {
		
	}

	header img {
		width: 400px;
	}	
	
	content {
		flex-flow: row;
		
		display: flex;					/* Flex-Container content */
	}

	#unternavigation {
		display: none;
	}

	main {
		flex: 1;
		min-height: 400px;
	}
	
	aside {
		flex: 0 0 15rem;				/* fixe Breite */
		
		flex-flow: column;
		justify-content: flex-start;
	}

	footer {
		
	}	
}




/* Mehrspaltiges Layout für grosse Display's   ==> ab 1300px */
@media screen and (min-width: 1300px) {
	#unternavigation {
		display: block;
		flex: 0 0 13rem;				/* fixe Breite */
	}
	
	#unternavigation ul {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
	}

	#unternavigation li {
		
	}
	
	
	
	.Referenzenliste_klein {
	display: none;
	}

	.Referenzenliste_gross {
		display: block;
	}
}