@charset "UTF-8";

/* ----------------------------------------------------------------------------- *
 *                           Styles der Basisversion                             *
 * ----------------------------------------------------------------------------- */

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}


/* ----------------------------------------------------------------------------- */

.header {
	text-align: center;
	border-top: 20px solid #1960ab;
}
figure {
	margin: 0;
}

.aside {
	border-top: 1px dashed #ddd;
	padding-top: 1em;
	margin-top: 1em;
}

.footer {
	padding: 0.6em 2rem;
	text-align: center;
}

.section {
	margin: 1em 0 0.5em 0;
}

hr.sep {
	background: #bfbfbf;
	border: none;
	color: #bfbfbf;
	height: 1px;
	width: 75%;
	margin: 3em auto 1.5em auto;
}


/*** Textauszeichnungen ***/

h1 {
	margin: 2em 0 0.625em 0;
	text-align: center;
}
h1.tablet, h2.tablet {
	display: none; 
}
h1.mobilphone, h2.mobilphone {
	margin: 0em 0 0.625em 0;
	display: block; 
}

h2 {
	margin: 0.5em 0;
}
h2.subtitle {
	text-align: center;
}
.section-4 p+h2, .section-4 ul+h2 {
	margin-top: 1.25em;
}

h3 {
	margin: 0.6em 0;
}

p {
	margin: 0.5em 0;
}
p.text, p.teasertext {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

ul,
ol {
	padding: 0;
	margin: 0 0 0.625em 1.5rem;
}

img {
	max-width: 100%;
	height: auto;
	border: 0%;
}

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 * ----------------------------------------------------------------------------- */
@media screen and (min-width: 40em) {
	.header {
		padding: 0;
	}
	.main-wrapper {
		padding: 2em 35px 0.5em 35px;
		display: block;
		overflow: auto;
	}
	.main-content {
		display: block;
	}
	.footer {
		padding: 0.57143em 2rem;
	}
	div.sections {
		display: flex;
		flex-flow: row wrap;
	}
	.section {
		width: 48%;
	}
	.section-2, .section-4 {
		margin-left: 4%;
	}
	/*** Textauszeichnungen ***/
	h1.mobilphone, h2.mobilphone {
		display: none; 
	}
	h1.tablet, h2.tablet {
		display: block; 
	}
}

/* ----------------------------------------------------------------------------- *
 *                          Styles für Desktops                           *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 54em) {
	.page-wrapper {
		border: 1px solid #ccc;
		box-shadow: -0.5px 2px 8px #999;
		margin: 0.25em auto;
		max-width: 60.857em;
	}
	.main-wrapper {
		padding: 0;
	}
	.main-content {
		padding: 2em 35px 0.5em 35px;
	}
}