@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;
	border-top: 20px solid rgba(0, 0, 0, 0.0);
}

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


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

.header {
	text-align: left;
	border-bottom: 1px solid #000;
}

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

.footer {
	padding: 0.6em 2rem;
	text-align:center;
}
.footer p {
	margin: 0.5em 0;
	color: #FFF;
	text-align:
	center;
}

.footer a:link {
	margin: 0.5em 0;
	color: #00CCFF;
	text-align: center;
}

.section {
	margin: 1em 0;
}


/*** Textauszeichnungen ***/

h1 {
	margin: 0 0 0.3em;
	
}

h2 {
	margin: 0.2em 0;
}

h3 {
	margin: 0.2em 0;
	color: #000000;
	font-weight: normal;
}

/**neulink **/
h4 {
	margin: 0.2em 0;
	color: #000000;
	font-weight:bold;
	font-size:14px;
}

h6 {
	margin: 0 0 0.3em;
	
}

h5 {
	margin: 0;
	color: #FFFFFF;
	font-weight: normal;
	font-size:3px;
}

p {
	margin: 0.2em 0;
	color: #000;
	text-align:justify;
}

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

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


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


/* Etwas kleinere Schrift für größere Screens */
@media screen and (min-width: 40em) and (max-width: 80em) {
	body {
		font-size: 1.5rem; /* 15px */
	}
}

@media screen and (min-width: 40em) {
	.header {
	text-align: left;
	padding: 1rem 1rem;
	border-bottom-color: #CCC;
	}
	.main-wrapper {
		padding: 3rem 0;
		display: block;
		overflow: auto;
	}
	.main-content {
		display: block;
		float: left;
		width: 90%;
		border-right: 1px dashed #ddd;
		border-left: 1px dashed #ddd;
		padding: 0 2rem 0 3rem;
	}
	.aside {
		display: block;
		margin: 0 0 0 90%;
		width: 10%;
		padding: 0 1rem 0 1rem;
		border-top: none;
		margin-top: 1.6rem;
	}
	.footer {
		padding: 0.8em 1rem;
		text-align: center;
	}
		
	/*** Textauszeichnungen ***/
	.logo {
	font-size: 5.5rem;
	font-weight: 500;
	color: #F1F2F1;
	text-align: left;
	text-shadow: 2px 2px 2px #000000;
	display: inline-block;
	border-bottom:solid transparent;
	padding: 0;
	}
	
	
	.logo a:link,
	.logo a:visited {
		
	padding: 0.1em 0.6rem;
	font-size: 1.5rem;
	font-family: Arial, Helvetica, sans-serif;
	font-stretch: normal;
	font-size-adjust: none;
	text-transform: none;
	text-align: right; 
	font-variant: normal;
	font-weight: 500;
	display: inline-block;
	
	}
	.logo a:hover,
	.logo a:focus,
	.logo a:active {
	background-color: #E6F1E8;
	color: #da0545;
	font-size: 1.5rem;
	}
	
	h1 {
	font-size: 2.5rem;
	/* 28px */
	margin: 0.2 0;
	color:color: #da0545; 
	font-weight: normal;
	}
	p.teasertext {
		margin: 0.3em 0;
	}
	/*** Zierelemente: Pfeil verwendet in Header und in Nav ***/
	.arrow-down {
		position: relative;
	}
	.arrow-down::after {
		content: '';
		position: absolute;
		bottom: -2rem;
		border-width: 2rem 2rem 0;
		border-style: solid;
		display: none;
		width: 0;
	}
	.nav.arrow-down::after {
		left: 90%;
		border-color:transparent;
		margin-left: -2rem;
		display: block;
	}
}


/* ----------------------------------------------------------------------------- *
 *                          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: 90%;
	padding-top: 1.5em;
	padding-right: 1.2;
	padding-bottom: rem;
	padding-left: 1.5;
	}
	.aside {
	width: 10%;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 90%;
	padding-top: 1.5em;
	padding-right: rem;
	padding-bottom: 2;
	padding-left: rem;
	}
	/* Zierelemente: Pfeil in Header einblenden, Pfeil in Nav ausblenden */
	.header.arrow-down::after {
		display: block;
		left: 20%;
		border-color: transparent;
		margin-left: -2rem;
	}
	.nav.arrow-down::after {
		display: none;
	}
}


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

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


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

.main-nav {
	margin: 0;
}
.main-nav > ul { 
	list-style: none;
 } 

.main-nav > li {
	margin-left: 0;
	border-bottom: 1px solid rgba(250, 250, 250, 0.6);
	list-style: none;
}


.main-nav li > a,
.main-nav li > b {
	padding: 0.6em 2rem;
	display: block;
	font-family: Open+Sans;
	font-size: 1.8rem;
	font-stretch:extra-expanded;
    text-transform: uppercase;
	
}

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

.main-nav__item-act b {
	font-weight: 600;
}

@media screen and (min-width: 40em) {
	.main-nav {
		padding: 0 2rem;
	}
	.main-nav::after {
		content: '';
		display: table;
		clear: both;
	}
	.main-nav > li {
		float: left;
		display: inline-block;
		border: none;
		width: auto;
	}
	.main-nav > li > a,
	.main-nav > li > b 
	{
	padding: 0.6em 2rem;
	display: block;
	font-family: Open+Sans;
	font-size: 1.8rem;
	font-stretch:extra-expanded;
    text-transform: uppercase;
		/* 18px */
	}
}

@media screen and (min-width: 64em) {
	/* Navigation wird links neben dem Inhalt angeordnet */
	.main-nav {
		width: 20%;
		float: left;
		box-shadow: none;
		margin: 1.6em 0 0;
		padding: 0;
		background-color: #FFFFFF;
	}
	.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: #000;
	}
	.main-nav a:hover,
	.main-nav a:focus,
	.main-nav a:active {
	color: #000;
	background-color:#C5E8F7;
	}
}


/* ----------------------------------------------------------------------------- *
 *                       Styles für CSS Toggle Menü Button                       *
 * ----------------------------------------------------------------------------- */


/*** Menü-Link zum Ein-und Ausblenden des Menüs ***/

a.toggle-nav {
	position: absolute;
	top: 0.4rem;
	right: 0.5rem;
	display: inline-block;
	padding: 0.357em;
	font-weight: 300;
	border-radius: 0.2em;
	text-decoration: none;
	cursor: pointer;
}

a.toggle-nav:hover {
	background: #96cfbf;
	border: 1px solid #96cfbf;
	color: #000;
}

a.toggle-nav:link,
a.toggle-nav:visited,
a.toggle-nav:active,
a.toggle-nav:focus {
	background: #189ca4;
	border: 1px solid #189ca4;
	color: #000;
}

@media screen and (min-width: 40em) {
	/*** Menü-Link verstecken in großen Viewports ***/
	a.toggle-nav {
		display: none;
	}
}
@media screen and (max-width: 40em) {
	.logo {
		font-size: 2.5rem;
		font-weight:500;
		text-align: left;
		text-shadow:1px 1px 1px #000000;
		display: inline-block;
		padding: 0;
		}	
}


/*** Platz schaffen für den Menü-Button in kleinen Viewports ***/

@media screen and (max-width: 23em) {
	.header {
		text-align: left;
		.logo {
		font-size: 2.5rem;
		font-weight:500;
		text-align: left;
		text-shadow:1px 1px 1px #000000;
		display: inline-block;
		padding: 0;
		}	
	}
}


/* ----------------------------------------------------------------------------- *
 *                            Styles für Multilevel Menü                         *
 * ----------------------------------------------------------------------------- */

.main-wrapper {
	z-index: 5;
}


/* Navigation erst mal verstecken on mit Button einblenden */

.js-on .main-nav {
	display: none;
}


/* Layout und Positionierung der 2. Menüebene */

.sec-level {
	z-index: 20;
	display: none;
}


/* Positionierung der Navigation "auf" dem Hauptinhalt, damit die zweite Menüebenen nicht verdeckt wird. */

.main-nav .sec-level {
	margin: 0;
	border-top: 1px dashed rgba(250, 250, 250, 0.6);
}

.main-nav .sec-level li > a,
.main-nav .sec-level li > b {
	padding: 0.6em 2rem 0.6em 4rem;
}

.main-nav .sec-level a:hover,
.main-nav .sec-level a:focus,
.main-nav .sec-level a:active {
	background-color: #397367; /* moos-gruen */
}

.main-nav__item-act > a:link,
.main-nav__item-act a:visited {
	color: #189ca4; /* blau-gruen */
}

.main-nav__item-act > a:hover,
.main-nav__item-act a:active,
.main-nav__item-act a:focus {
	color: #000;
}

.main-nav__item-act .sec-level {
	display: block;
	background-color: #fff;
	border-top: 1px dashed rgba(24, 156, 164, 0.6);
}

.main-nav__item-act .sec-level a:link,
.main-nav__item-act .sec-level a:visited {
	color: #CCCCCC;
}

.main-nav__item-act .sec-level a:hover,
.main-nav__item-act .sec-level a:active,
.main-nav__item-act .sec-level a:focus {
	color: #fff;
}


/* Einblenden des Untermenüs onHover für alle Ebenen */

.main-nav li:hover .sec-level {
	display: block;
}

.has-sec-level > a::after {
	width: 0.8em;
	text-align: right;
	content: '+';
	display: inline-block;
	color: #f8b255;
	font-family: sans-serif;
	font-weight: 600;
}

.has-sec-level > a:hover::after {
	color: #fff;
}

.has-sec-level > a::after {
	float: right;
}


/* ----------------------------------------------------------------------------- *
 *               Styles für Menü ab Tabletversion bis Desktopversion             *
 *                            640px / 16px/em = 40em                             *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 40em) and (max-width: 63.938em) {
	
	.logo {
	font-size: 3.5rem;
	font-weight:500;
	text-align: left;
	text-shadow:1px 1px 1px #000000;
	display: inline-block;
	padding: 0;
	}
	
	.main-nav {
		border-bottom: none;
	}
	.main-nav > li {
		height: 3.5em;
		display: inline-block;
	}
	.main-nav .sec-level li > a,
	.main-nav .sec-level li > b {
		padding: 0.4em 0.6em;
	}
	/* Layout und Positionierung der 2. Menüebene */
	.main-nav .sec-level {
		width: auto;
		margin: 0;
		min-width: 100%;
	}
	.has-sec-level > a::after {
		float: none;
	}
}

@media screen and (min-width: 40em) {
	/* Aufheben des Ausblendens der Navigation aus der Basisversion */
	.js-on .main-nav {
		display: block;
	}
	.main-nav > li > a,
	.main-nav > li > b {
		display: block;
	}
	.main-nav li:hover .sec-level {
		/* zeige zweite Menüebene bei hover */
		display: inline-block;
	}
	.main-nav .sec-level {
	/* zeige zweite Menüebene nur bei hover */
	display: none;
	border-top: none;
	background-color: #CCCCCC;
	}
}


/* ----------------------------------------------------------------------------- *
 *                      Styles für Menü ab Desktopversion                         *
 *                          1024px / 16px/em = 64em                           *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 64em) {
	.main-nav > li {
		position: relative;
	}
	.main-nav .sec-level {
		position: absolute;
		top: 0;
		left: 100%;
		min-width: 18rem;
	}
	.main-nav .sec-level li > a,
	.main-nav .sec-level li > b {
		padding: 0.5em 0.6em;
	}
	.main-nav__item-act .sec-level {
		background-color: #96cfbf;
	}
	.main-nav__item-act .sec-level a:link,
	.main-nav__item-act .sec-level a:visited {
		color: #397367;
	}
	.main-nav__item-act .sec-level a:hover,
	.main-nav__item-act .sec-level a:active,
	.main-nav__item-act .sec-level a:focus {
		color: #fff;
	}
	
	/* Anpassungsfähige Bilder                             *
 * ----------------------------------------------------------------------------- */


/* Bilder flexibel machen */

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


/* figure.slides-Container um die Bilder */

.slides {
	margin: 2rem 0;
	line-height: 0;
}


/* Bildunterschrift */

figcaption {
	line-height: 1.4;
	padding: 0.5em 0 0;
}


}