@charset "UTF-8";

/* ----------------------------------------------------------------------------- * 
 *          Responsive Webdesign - Praxisbeispiele - 3. Auflage 2017             *
 *           In atmosphere.css sind Farben und Schriften definiert,              *
 *                  die für alle Beispiele verwendet werden.                     *
 *     In der layout.css stehen ergänzende Styles für alle Layoutstufen.     *
 *          Autoren: Andrea Ertel und Kai Laborenz (Rheinwerk Verlag)            *
 * ----------------------------------------------------------------------------- */


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


/* ----------------------------------------------------------------------------- *
 *       Änderung des default-Box-Modells aller Elemente auf "border-box"        *
 *          https://www.paulirish.com/2012/box-sizing-border-box-ftw/            *			 
 * ----------------------------------------------------------------------------- */

html {
	box-sizing: border-box;
}

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


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

.header {
	text-align: center;
}

.headertextsmall {
	margin-left: 12em;
}

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

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

.section {
	margin: 1em 0;
}


/*** Textauszeichnungen ***/

h1 {
	margin: 0 0 0.625em;
}

h2 {
	margin: 0.5em 0;
}

h3 {
	margin: 0.6em 0;
}

p {
	margin: 0.5em 0;
}

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

.logo a:link,
.logo a:visited {
	padding: 0.6em 2rem;
}


/* ----------------------------------------------------------------------------- *
 *                             Mini-Navigation                                   *
 * ----------------------------------------------------------------------------- */

.main-nav {
	margin: 0;
}

.main-nav a:link {
	text-decoration: none;
}

.main-nav > li > a,
.main-nav > li > b {
	display: block;
	font-size: 1.8rem;
}

@media screen and (max-width: 39.938em) {
	.main-nav {
		display: flex;
	}
	.main-nav > li {
		flex: 1;
		text-align: center;
	}
	.main-nav > li > a,
	.main-nav > li > b {
		padding: 0.4em 0;
	}
	.main-nav__item-act b {
		font-weight: 600;
	}
}


/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                            640px / 16px/em = 40em                             *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 41em) {
	.header {
		padding: 1.5em 2.4rem;
		text-align: left;
	}
	.main-wrapper {
		padding: 3rem 0;
		display: block;
		overflow: auto;
	}
	.main-content {
		display: block;
		float: left;
		width: 70%;
		border-right: 1px dashed #ddd;
		padding: 0 2rem 0 3rem;
	}
	.aside {
		display: block;
		margin: 0 0 0 70%;
		width: 30%;
		padding: 0 3rem 0 2rem;
		border-top: none;
	}
	.footer {
		padding: 0.8em 2rem;
		text-align: center;
	}
	/*** Textauszeichnungen ***/
/*	.logo {
		font-size: 2.8rem;
		text-align: left;
		display: inline-block;
		padding: 0;
	}
	.logo a:link,
	.logo a:visited {
		padding: 0.1em 0.6rem;
	}
	.logo a:hover,
	.logo a:focus,
	.logo a:active {
		background-color: #fff;
		color: #da0545;
	} */
	h1 {
		font-size: 2.8rem;
		/* 28px */
		margin: 0;
	}
	p.teasertext {
		margin: 0.8em 0;
	}


/* ----------------------------------------------------------------------------- *
 *                       Mini-Navigation: ul.main-nav                            *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 40em) and (max-width: 63.938em) {
	.nav.arrow-down::after {
		left: 70%;
		border-color: #189ca4 transparent;
		margin-left: -2rem;
		display: block;
	}
	.main-nav {
		display: block;
		padding: 0 2rem;
		overflow: hidden;
	}
	.main-nav > li {
		float: left;
		display: block;
	}
	.main-nav > li > a,
	.main-nav > li > b {
		padding: 0.7em 1.2rem;
	}
}

/* ----------------------------------------------------------------------------- *
 *                          Styles für kleine Desktops                           *
 *                           1024px / 16px/em = 64em                             *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 64em) {
	/* .main-wrapper macht Platz für .nav */
	.main-wrapper {
		width: 80%;
		padding: 0;
		margin-left: 20%;

	}
	.main-content {
/*	width: 65%;*/
	width: 75%;
	padding: 2em 2rem;
	}
	.aside {
/*	width: 35%;*/
	width: 25%;
	padding: 3rem;
	margin: 0 0 0 /*65%*/ 75%;
	}

/* Navigation wird links neben dem Inhalt angeordnet */
	.main-nav {
		width: 20%;
		float: left;
		box-shadow: none;
		margin: 1.6em 0 0;
		padding: 0;
	}
	.main-nav > li {
		width: 100%;
		float: none;
	}
	.main-nav > li > a,
	.main-nav > li > b {
		padding: 0.5em 3rem;
		display: block;
	}
/*	.main-nav a:link,
	.main-nav a:visited {
		color: #fff;
	}
	.main-nav a:hover,
	.main-nav a:focus,
	.main-nav a:active {
		color: #fff;
		background-color: #96cfbf;
	}*/
}


/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops                            *
 *                           1280px / 16px/em = 80em                             *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 80em) {
	.page-wrapper {
		margin: 0 auto;
		max-width: 80em;
	}
}


/* NEU */
/* ----------------------------------------------------------------------------- * 
 *                            Styles für Tables                                  *
 * ----------------------------------------------------------------------------- */

/*OG*/

table-01 {
 margin-top: 0.5em;
}

caption {
	margin: 0 0.2rem;
	padding: 0.4em;
	font-size: 1.8rem;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: #fff;
	background-color: rgb(51, 67, 127)/*rgb(217, 63, 120)*/;
}

table {
	width: 100%;
	font-size: 1.5rem;
	text-align: left;
	font-weight: 600;
	/*O*/
	padding-left: 0.1em;
}

th,
td {
	padding: 0.5em;
}

th {
	font-weight: normal;
	color: #fff;
	background-color: rgb(82, 132, 132);
}

td:nth-of-type(odd) {
	background-color: #f3f3f3;
}

td:nth-of-type(even) {
	background-color: #eaeaea;
}


/* 
 * Layoutänderung für Tabellen, wenn diese mehr Platz brauchen als vorhanden ist:
 * -> unter 35em (560px) für das einspaltige Basislayout und 
 * -> von 40em (640px) bis 50em (800px) für das zweispaltige Layout
 **/

@media screen and (max-width: 35em),
screen and (min-width: 40em) and (max-width: 50em) {
	/* Tabellenheader ausblenden für schmale Screens (nicht accessible!) */
	thead {
		display: none;
	}
	tr {
		display: block;
		padding-bottom: 0.2em;
		border-right: 1px solid #96cfbf;
		border-left: 1px solid #96cfbf;
	}
	tr:last-of-type {
		border-bottom: 1px solid #96cfbf;
	}
	td {
		width: 100%;
		display: block;
		padding: 0.2em 0.5em;
	}
	td:first-of-type {
		color: #fff;
		background-color: rgb(82, 132, 132);
	}
	/* Tableheader als CSS-content aus dem data-header Attribut */
	td::before {
		font-weight: bold;
		content: attr(data-header) ": ";
	}
}


/* Bilder */

.img-english {
width: 40%; height: auto;
max-width: 50px;
text-align: center;
margin: 0.5em 0 0 3em;
}