/* Diese Datei definiert das Layout für die verschiednen Displaygrössen, insbesondere die Definitionen von Flex-Box und Position */

/* Mobile first - alle Elemente Breite 100% und untereinander, nur Reihenfolde angepasst */
header {
	
}

nav {
	position: absolute;
	bottom: 10px;
	right: 0px;
	right: 0px;
}

content {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.banner {
	display: flex;
	justify-content: center;
}

segment {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
		
	flex: 1 1 100%;
}

main {
								_display: flex;
								_flex-flow: column nowrap;
	
			_flex: 0 0 auto;
	order: 1;
}

article {
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;
	
	flex: 1 1 auto;
}

section {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	
	flex: 1 1 auto;
								_border: 5px solid red;
								_background-color: yellow;
}

section div {
	_display: flex;
	_flex-flow: column wrap;
	
	flex: 1 1 300px;
}

#captcha {
	display: flex;
	flex-flow: row nowrap;
}

#captcha_userinput {
	flex: 1 1 150px;
}


aside {
			background-color: yellow;
}

aside.links {
	flex: 1 1 auto;
	order: 2
}

aside.rechts {
	flex: 1 1 auto;
	order: 3
}




.jahresprogramm .Zeit {
	flex: 0 0 12em;
}

.jahresprogramm .Text {
	flex: 1 1 0%;
}

.jahresprogramm .Event {
	flex: 0 1 15em;
}

.jahresprogramm .Ort {
	flex: 0 1 15em;
}

.jahresprogramm .Bemerkung {
	flex: 1 1 100%;
}

/* Damit bei iOS Geräten alle Spalten gleich breit dargestellt werden   ==> ab 60em */
@media screen and (max-width: 60em) {
	.jahresprogramm .Zeit {
		flex: 0 0 100%;
	}
}






.angeboticons section {
	justify-content: space-around;
}






.traininszeiten .wert {
	flex: 1 0 150px;
}



/* Kontaktformular Samichlaus */
.kontakt section {
	justify-content: flex-start;
}

.kontakt label {
	flex: 0 8rem;
}

.kontakt input, .kontakt textarea {
	flex: 1 20rem;
}



/* Bestellformular Samichlaus */
.bestellung section {
	justify-content: flex-start;
}

.bestellung label {
	flex: 0 12rem;
}

.bestellung input, .bestellung textarea {
	flex: 1 20rem;
}


.staff, .goenner, .links {
	justify-content: center;
}




.photogallery {								
	justify-content: center;
}






footer {
	display: flex;
}

#footer section {
	justify-content: space-between;
}









/* Mehrspaltiges Layout für grössere Display's   ==> ab 1600px */
@media screen and (min-width: 1600px) {
	segment {
		flex-flow: row wrap;			
	}
	
	aside.links {
		order: 1;
	}
	
	main {
		flex: 0 1 1200px;
		
		order: 2;
	}
	
	aside.rechts {
		order: 3;
	}
}