/**** Style Resets ****/
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body { margin: 0; min-height: 100vh; }
/* IE-Fix, weil er das main-Element aus HTML 5 nicht kennt */
main { display: block; }
/* Add the correct display in Edge, IE 10+, and Firefox */
details { display: block; }
/* Add the correct display in IE 10+. */
template { display: none; }
/* Add the correct display in IE 10. */
[hidden] { display: none; }


/****  ****/
header, main, body > section, footer { padding: 5px; }
main > section, section > section, footer > section, header > section, nav > section, header > nav { padding: 0; }
nav.main_nav, main, body > section, footer { width: 100%; }

header { display: inline-block; /* fix, um inline-block rechts-floated ul Element zu Umschließen */ }


/**** Header und Menü ausrichten ****/
header { width: 100%; }
ul.nav { margin: 0; }
header img { display: block; max-width: 100%; width: 360px; }
header p { margin: 0.25em 0 0 4px; display: inline-block; }
header ul.nav_socialMedia { display: inline-block; margin-top: 0.2em; float: right; }
header ul.nav_socialMedia li { display: inline-block; margin: 1px; }
@media (orientation: portrait), (max-width: 600px) {
	header { 
		padding: 5px; max-width: 100%;
		display: flex; 
		flex-wrap: wrap; 
		justify-content: space-around;
	}
	header > a:first-child, header > img.top-logo { 
		flex-basis: 100%; flex-shrink: 0; 
	}
	header img.top-logo { 
		margin: 0 auto;
	}
	header > p.slogan {
		flex-grow: 0;
		text-align: center;
	}
	header > ul.nav_socialMedia {
		flex-grow: 0;
	}
	header > ul.nav_socialMedia > li {
		margin: 0 3px;
	}
}

nav.main_nav {
	float: left; display: inline-block;
	
	position: sticky; top: 0;
	z-index: 1;
	
	padding-bottom: 0; padding-top: 0;
}
nav.main_nav ul {
	display:flex;
	
	flex-flow: row wrap;
	flex-direction: row;
	flex-wrap: wrap;
	
	justify-content: space-around;
	align-items: stretch;
}
nav.main_nav ul a {
	flex-grow: 1;
	margin: 0 0px;
	min-width: 9.5%;
	flex-shrink: 1;
}
@media (orientation: portrait), (max-width: 600px) {
	nav.main_nav ul a {
		flex-basis: 100%;
	}
	nav.main_nav ul a.legalstuff {
		flex-basis: 33%;
		flex-shrink: 2;
	}
}
@media (max-width: 900px) {
	nav.main_nav ul a {
		min-width: 14.25%; /* 100/<Anzahl wichtiger Menüpunkte> */
	}
	nav.main_nav ul a.legalstuff {
		flex-basis: 33%;
		flex-shrink: 2;
	}
}
nav ul a:first-child { margin-left: 0; }
nav ul a:last-child { margin-right: 0; }


/**** Seite & Footer ausrichten ****/
html {height: 100%}
body {min-height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-direction:column}
main {-ms-flex:1 1 auto;flex:1 1 auto}
footer { 
	width: 100%;
}


/**** Basiselemente ****/
/** Seitenaufteilung **/
.mainwrapper {
	
}

.sidebar {
	width: 20%;
	max-width: 860px;
}

.contentbox {
	width: 100%;
}

.contentblock {
	width: 93.75%;
	margin: 0 3.125%;
}

.fullWidthNoPadding { /* Um den Effekt des Standard-Margins von body zu anullieren */
	padding: 0;
	width: 100%;
	width: calc(100% + 10px);
}

.snapScrollWrapper {
	overflow-y: scroll;
	height: 100vh;
	padding: 0;
	-ms-scroll-snap-points-y: snapInterval(0, 100vh);
	-ms-scroll-snap-type: mandatory;
	-webkit-snap-points-y: repeat(100vh);
	-webkit-scroll-snap-type: mandatory;
	scroll-snap-points-y: repeat(100vh);
	scroll-snap-type: mandatory;
}
.snapWindow, .snapScrollWrapper > div {
	height: 100%;
	width: 100%;
}
.snapScrollWrapper img {
	max-height: 100%;
	max-width: 100%;
	margin: 0 auto;
    display: block;
}

main, footer, section.secondaryContent { clear: both; }

/** alte Spaltenelemente **/
.col-wrapper {
	/* Fallback: */
	display: inline-block;
	
	/* Flexbox-Lösung: */
    display:flex;
	
	align-content: flex-start; /* Vertical top (multi-)row-alignment */
    align-items: flex-start; /* Vertical top alignment within each row */
	
    justify-content: space-between; /* Horizontal Blocktext alignment */
	
	flex-flow: row wrap;
	flex-direction: row;
	flex-wrap: wrap;
}
.col-wrapper-sameHeight {
	align-items: stretch; /* Vertical same height within each row */
}

div.fullcolumn, section.fullcolumn {
	margin: 5px;
	padding: 1px 0.5em 0.33em 0.5em;
	box-sizing: border-box; width: 99%; width: calc(100% - 5px*2);
	display: inline-block; /* damit alle Inhalte inkl. großer Bilder umschlossen werden */
}
div.halfcolumn, section.halfcolumn {
	float: left;
	padding: 1px 0.5em 0.33em 0.5em;
	box-sizing: border-box; 
    margin: 5px;
	width: 49.5%; width: calc(50% - 5px*2);
	display: inline-block; /* damit alle Inhalte inkl. großer Bilder umschlossen werden */
}

div.twothirdscolumn, section.twothirdscolumn {
	float: left;
	min-width: 800px;
	width: 63%; width: calc(66.667% - 5px*2); margin: 5px;
	padding: 1px 0.5em 0.33em 0.5em;
	box-sizing: border-box;
}
div.thirdscolumn, section.thirdscolumn {
	float: left;
	min-width: 400px;
	width: 31%; width: calc(33.333% - 5px*2); margin: 5px;
	padding: 1px 0.5em 0.33em 0.5em;
	box-sizing: border-box;
}
div.thirdscolumn:nth-child(4), section.thirdscolumn:nth-child(4),
div.thirdscolumn:nth-child(7), section.thirdscolumn:nth-child(7),
div.thirdscolumn:nth-child(10), section.thirdscolumn:nth-child(10) {
	clear: left;
}
@media (min-width: 840px) and (max-width: 1249px) { /* 3*400px (.thirdscolumn min-width) + 3*2*5px (.thirdscolumn margin) + 2*5px (section padding) + 10px (body padding)  */
	div.twothirdscolumn, section.twothirdscolumn, div.halfcolumn, section.halfcolumn {
		width: 98%; width: calc(100% - 10px);
	}
	div.thirdscolumn, section.thirdscolumn {
		width: 48%; width: calc(50% - 10px);
	}
	div.thirdscolumn:nth-child(4), section.thirdscolumn:nth-child(4),
	div.thirdscolumn:nth-child(7), section.thirdscolumn:nth-child(7),
	div.thirdscolumn:nth-child(10), section.thirdscolumn:nth-child(10) {
		clear: none;
	}
	div.thirdscolumn:nth-child(3), section.thirdscolumn:nth-child(3),
	div.thirdscolumn:nth-child(5), section.thirdscolumn:nth-child(5),
	div.thirdscolumn:nth-child(7), section.thirdscolumn:nth-child(7),
	div.thirdscolumn:nth-child(9), section.thirdscolumn:nth-child(9) {
		clear: left;
	}
}
@media (max-width: 839px) {
	div.twothirdscolumn, section.twothirdscolumn, div.halfcolumn, section.halfcolumn {
		width: 98%; width: calc(100% - 10px);
	}
	div.thirdscolumn, section.thirdscolumn {
		width: 98%; width: calc(100% - 10px);
		float: none;
	}
}
@media (orientation: portrait), (max-width: 600px) {
	div.thirdscolumn, section.thirdscolumn, div.halfcolumn, section.halfcolumn {
		width: 95%; width: calc(100% - 10px);
		min-width: 300px;
		float: none;
	}
}

/** Spaltenelemente **/
.colwrapper {
	display: flex; 
	
	flex-flow: row wrap;
	flex-direction: row;
	flex-wrap: wrap;
	
	justify-content: space-between;
	align-items: flex-start;
}
.colwrapper-sameHeight {
	display: flex; 
	
	flex-flow: row wrap;
	flex-direction: row;
	flex-wrap: wrap;
	
	justify-content: space-between;
	align-items: stretch;
}
.colwrapper > * {
	flex-grow: 1;
}

h1 + .colwrapper > * > h2:first-child,
h2 + .colwrapper > * > h3:first-child,
h3 + .colwrapper > * > h4:first-child,
h4 + .colwrapper > * > h5:first-child,
h5 + .colwrapper > * > h6:first-child,
h1 + .colwrapper > * > p:first-child,
h2 + .colwrapper > * > p:first-child,
h3 + .colwrapper > * > p:first-child,
h4 + .colwrapper > * > p:first-child,
h5 + .colwrapper > * > p:first-child,
h6 + .colwrapper > * > p:first-child,
p + .colwrapper > * > p:first-child {
	margin-top: 0.25em;
}
.colwrapper + h2,
.colwrapper + h3,
.colwrapper + h4,
.colwrapper + h5,
.colwrapper + h6,
.colwrapper + p {
	margin-top: 0.25em;
}

/* mobile */
.colBox-m100 {
	width: 95%;
	float: left;
}
.colBox-m67 {
	width: 62%;
	min-width: 250px;
	float: left;
}
.colBox-m50 {
	width: 45%;
	min-width: 200px;
	float: left;
}
.colBox-m33 {
	width: 30%;
	min-width: 200px;
	float: left;
}

/* desktop */
@media (orientation: landscape) and (min-width: 800px) {
	.colBox-d100 {
		width: 95%;
		float: left;
	}
	.colBox-d75 {
		width: 70%;
		float: left;
	}
	.colBox-d67 {
		width: 62%;
		float: left;
	}
	.colBox-d50 {
		width: 45%;
		float: left;
	}
	.colBox-d33 {
		width: 30%;
		float: left;
	}
	.colBox-d25 {
		width: 23.5%;
		float: left;
	}
	.colBox-d20 {
		width: 19%;
		float: left;
	}
}

/** Zeilenelemente **/
.elementstrip {
	display: flex; 
	
	flex-flow: row nowrap;
	flex-direction: row;
	flex-wrap: nowrap;
	
	justify-content: space-between;
	align-items: stretch;
	
	overflow: scroll;
}

/** Flex-Elemente **/
.flex-container {
	/* Internet Explorer 10 */
	display:-ms-flexbox;
	-ms-flex-pack:center;
	-ms-flex-align:center;

	/* Firefox */
	display:-moz-box;
	-moz-box-pack:center;
	-moz-box-align:center;

	/* Safari, Opera, and Chrome */
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;
	-webkit-flex-direction: row;

	/* W3C alt */
	display:box;
	box-pack:center;
	box-align:center;
	
	/* aktueller Standard */
    display:flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
	flex-wrap: wrap;
	flex-direction: row;
}

.flexitem{
	box-sizing: border-box;
}

@media (orientation: portrait), (max-width: 600px) {
	.flexitemMobileFullwidth {
		width: 100% !important; flex-shrink: 0;
	}
}

/** Grid-Elemente **/
.grid-container {
	display: grid;
	justify-content: space-between; /* ungenutzte Containerbreite auf Spaltenzwischenräume aufteilen */
	align-content: space-evenly; /* ungenutzte Containerbreite auf Zeilenzwischenräume und vor/nach erster/letzter Zeile aufteilen */
	grid-column-gap: 10px; /* old */ 
	column-gap: 10px; /* new */
	
	grid-auto-flow: row;
	grid-template-columns: repeat(auto-fit, 1fr);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	
	justify-items: stretch; /* Breite ausfüllen */
	align-items: stretch; /* Höhe ausfüllen */
}