/* ----------------------------------------------------------------------------- *
 *                           Styles der Basisversion                             *
 * ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- *
 * Änderung des default-Box-Modells aller Elemente auf "border-box"
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 * << apply a natural box layout model to all elements >>
 * ----------------------------------------------------------------------------- */
*, *:before, *:after {
	-webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
	-moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
	box-sizing: border-box; /* Opera/IE 8+ */
}

/* ----------------------------------------------------------------------------- */
.page-wrapper {
	margin: 0;
}

.head {
	padding: 0.5em 80px 0.5em 0;
}


aside, footer {
	padding: 0.6em 20px;
}

section {
	padding: 0 20px;
}

.mainContent {
	width: 100%;
	border-top: 1px solid transparent;
	padding: 20px;
}

/* Größenanpassungen */
.mainContentOneColumn {
	width: 100%;
	padding: 20px;
}

aside {
	width: 100%;
	margin-left: 0;
}

.ce_gallery ul {
	list-style: none outside none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}
.ce_gallery li {
	float: left;
}
.ce_gallery li.col_first {
	clear: left;
}

/* ----------------------------------------------------------------------------- *
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */
h1 {
	margin: 0;
}

h2 {
	margin: 0;
}

p.teasertext {
	margin: 0.8em 20px;
}

ul, ol {
	padding: 0;
	margin: 0 0 0.625em 20px;
}

/* ----------------------------------------------------------------------------- *
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */
nav ul {
	margin: 0;
}

nav ul > li {
	margin-left: 0;
	border-bottom: 1px solid rgba(250, 250, 250, 0.6);
}

nav ul > li > a, nav ul > li > strong {
	padding: 0.6em 20px;
	display: block;
}

nav ul > li > span {
	padding: 0.6em 20px;
	display: block;
}

nav ul a:link {
	text-decoration: none;
}

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 46.875em) {

	/* Schriftverkleinerung wird f�r grosse Screens wieder aufgehoben */
	@media only screen and (max-width: 78em) {
		body {
			font-size: 0.938em; /* 15px */
		}
	}
	.head {
		padding: 0.5em 20px;
	}

	.main {
		/* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
		overflow: hidden;
	}

	.mainContent {
		width: 70%;
		float: left;
		padding: 0.8em 20px;
		border-top: none;
	}

	/* Größenanpassungen */
	.mainContentOneColumn {
		width: 100%;
		padding: 0.8em 20px;
	}

	aside {
		width: 30%;
		margin-left: 70%;
		/* Trick für gleichlange Spalten  - dazu gehört ein overflow: hidden für den umgeb. Container */
		margin-bottom: -99999px !important;
		padding-bottom: 99999px !important;
	}

	aside, footer {
		padding: 0.8em 20px;
	}

	section {
		padding: 0;
	}

	/* ----------------------------------------------------------------------------- *
	 *                             Textauszeichnungen                                *
	 * ----------------------------------------------------------------------------- */
	h2 {
		font-size: 2.1875em; /* 35px */
		line-height: 1.2em;
		margin: 0.3em 0 0;
	}

	p.teasertext {
		margin: 0.8em 0;
	}

	/* ----------------------------------------------------------------------------- *
	 *                                  Navigation                                   *
	 * ----------------------------------------------------------------------------- */
	nav {
		/* clearing für die floatenden LIs */
		overflow: hidden;
		font-size: 1.1em; /* 18px */
	}

	nav ul {
		margin: 0 10px;
	}

	nav ul li {
		float: left;
		border: none;
		width: auto;
	}

	nav ul > li > a {
		padding: 0.7em 10px 0.7em 10px;
		display: inline-block;
	}


	nav ul > li > span {
		padding: 0.7em 10px 0.7em 10px;
		display: inline-block;
	}
}

/* ----------------------------------------------------------------------------- *
 *                          Styles für kleine Desktops                           *
 *                           1024px / 16px/em = 64em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 64em) {
	.head {
		margin-bottom: 20px;
	}

	/* Navigation wird links neben dem Inhalt angeordnet */
	nav {
		width: 20%;
		float: left;
		box-shadow: none;
		font-size: 1.25em; /* 20px */
	}

	nav ul {
		margin: 0;
	}

	nav ul > li {
		width: 100%;
		float: none;
	}

	nav ul > li > a {
		padding: 0.8em 25px;
		display: block;
	}
	nav ul > li > span {
		padding: 0.8em 25px;
		display: block;
	}

	/* .main macht Platz für .nav */
	.main {
		width: 80%;
		float: left;
	}

	/* Größenanpassungen */
	.mainContent {
		width: 65%;
		padding: 0.8em 20px;
	}

	/* Größenanpassungen */
	.mainContentOneColumn {
		width: 100%;
		padding: 0.8em 20px;
	}

	.mr65 {
		margin-right: 35%;
	}

	aside {
		width: 35%;
		margin-left: 65%;

	}



	footer {
		clear: left;
	}
}
/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops                            *
 *                           1248px / 16px/em = 78em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 78em) {
	.page-wrapper {
		margin: 0 auto;
		max-width: 78em;
	}
}



/* ----------------------------------------------------------------------------- *
 *                      Beispiel Responsive-Nav im Basis-Layout                  *
 * ----------------------------------------------------------------------------- */
/* responsive-nav.js v1.0.14 by @viljamis - start */
.js #nav {
	clip: rect(0 0 0 0);
	max-height: 0;
	position: absolute;
	display: block;
	overflow: hidden;
	zoom: 1;
}

#nav.opened {
	max-height: 9999px;
}
/* responsive-nav.js v1.0.14 by @viljamis - ende */

/*
 * Eigene Anpassungen für den Toggle-Button
 */
#nav-toggle {
	display: inline-block;
	position: absolute;
	right: 3%;
	top: 20px;
	cursor: pointer;
	padding: 0.357em;
	color: #FFF;
	background: #EC8014;
}

#nav-toggle:hover {

	background: #FFF;
	color: #EC8014;
}

/* ----------------------------------------------------------------------------- *
 *                  Beispiel Responsive-Nav im im Desktop-Layout                 *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 46.875em) {
	/* responsive-nav.js v1.0.14 by @viljamis - start */
	.js #nav {
		position: relative;
	}

	.js #nav.closed {
		max-height: none;
	}

	#nav-toggle {
		display: none;
	}
	/* responsive-nav.js v1.0.14 by @viljamis - ende */
}

/* NEU: */
/* ----------------------------------------------------------------------------- *
 *                       Kapitel: Anpassungsfähige Bilder                        *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */
/* Bilder flexibel machen:
 * hier mit max-width: 100%; damit sie nicht größer werden als das Original
 * width: 100%; würde die Bilder immer einpassen, aber u.U. auch aufblähen
 **/
img {
	max-width: 100%;
	height: auto;
}


figcaption {
	background-color: #EDEDED;
	font-size: 0.875em;
	line-height: 1.4em;
	padding: 0.5em;
	text-align: center;
}