@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 {
	visibility: visible;
	text-align: right;
}

.aside {
	border-top: 0.1rem dashed #ddd;
	visibility: visible;
	padding-top: 1rem;
	margin-top: 1rem;
}

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

.section {
	padding: 1rem 0;
	}

.main-wrapper {
		min-height: 80vh;
	}

.main-content a:link, .main-content a:visited {
	color: #4682b4; /* steelblue */
	font-weight: 300;
	text-decoration: none;
	display: block;
	}

.main-content_01 a:link, .main-content_01 a:visited {
	color: #4682b4; /* steelblue */
	font-weight: 300;
	text-decoration: none;
	display: block;
	}
	
div.close {
	display: inline-block;
    width: 2.6rem;
    height: 2.6rem;
	position: relative;
	text-align: center;
	float: right;
	/*border: 1px solid #C0C0C0; /* grau */
}
}

/* ----------------------------------------------------------------------------- *
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */

h1 {
	margin: 0 0 0.625em;
}

h2 {
	margin: 0;
}

h3 {
	text-align: left;
	margin: 0.0rem 0.0rem 1.0rem 0.0rem;
}

h3.center {
	display: block;
	width: auto;
	font-weight: normal;
	text-align: center;
	color: #C0C0C0; /* grau */
}

h4 {
	margin: 0.0rem 0.0rem 0.5rem 2.0rem;
}
	
p {
	margin: 0.0rem 0.0rem;
	hyphens: auto;
}

p.kursiv {
	font-style: italic;
	hyphens: auto;
}

p.datum {
	margin-bottom: 1.0rem;
	hyphens: auto;
}

p.trennung {
  -webkit-hyphens: auto;
  hyphens: auto;
}

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

.logo_text {
		font-size: 3.0rem; /* 30px */
		text-align: right;
		display: inline-block;
		padding: 0.5rem 1.0rem 0.5rem;
	}
	
.logo {
		font-size: 2.2rem; /* 22px */
		text-align: right;
		display: inline-block;
		padding: 0.5rem 2.0rem 0.25rem 0.25rem;
	}

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


/* ----------------------------------------------------------------------------- *
 *                                   Bilder                                      *
 * ----------------------------------------------------------------------------- */

	div.pseudo { 
		content: ""; 
		display: block; 
		clear: both;
		height: 0.0rem;
	}
	
	div.projekt_0 {
		margin-left: auto;
		width: 30.0rem;
		margin-right: auto;
	}
			
	div.projekt {
		margin-left: auto;
		width: 30.0rem;
		margin-right: auto;
	}
	
	div.projekt_01 {
		margin-left: auto;
		width: 30.0rem;
		margin-right: auto;
	}
		
	div.projekt_02 {
		margin-left: auto;
		width: 30.0rem;		
		margin-right: auto;
	}
				
	div.aside_text {
		position: relative;
		left: 0.0rem;
		top: 0.0rem;
		margin-left: auto;
		width: 30.0rem;
		margin-right: auto;
	}
				
	div.headline {
		margin-left: 0.0rem;
	}
		
/* neu */

	figure,
	figcaption {
		margin: 0.0rem;
		padding: 0.0rem;
	}
	
	figure.float_0 {
		display: block;
		position: relative;
		float: left;
		top: 0.0rem;
		text-align: left;
		width: 15.0rem;
		height: 15.0rem;
		z-index: 1;
	}
		
	figure.float {
		display: inline-block;
		position: relative;
		float: left;
		top: 0.0rem;
		text-align: left;
		width: 15.0rem;
		z-index: 1;
	}
	
	figure.float_hidden {
		visibility: hidden;
		display: inline-block;
		position: relative;
		float: left;
		top: 0.0rem;
		text-align: left;
		width: 15.0rem;
		z-index: 1;
	}
	
	

	figcaption {
		/*display: inline-block;*/
		position: relative;
		text-align: left;
		top: -0.8rem;
		padding: 0.0rem 0.5rem 0.0rem 0.5rem;
	}

	figure.float_end {
			position: relative;
			float: none;
			top: 0.0rem;
			text-align: left;
			z-index: 0;
	}
	
	/*
	div.hidden {
		visibility: hidden;
		position: absolute;
		left: 0.0rem;
		right: 0.0rem;
	}
	*/
	
	div.float {
		position: relative;
		float: left;
		top:0.0rem;
	}
	
	div.float_right {
		position: relative;
		float: right;
		top: 0.0rem;
	}
	

	div.float_link {
		position: relative;
		float: left;
		top: 0.0rem;
		width: 30.0rem;
		height: 10.0rem;
		vertical-align: bottom;
		padding: 0.0rem 0.0rem 0.0rem 0.0rem;
	}
	
	div.description {
		position: absolute;
		width: 20.0rem;
		left: 10.5rem;
		bottom: 0.0rem;
	}
	/*
	div.description_01 {
		position: relative;
		bottom: 0.0rem;
		padding: 0.4rem 0.4rem 1.8rem 0.4rem;
	}
	*/
	
	div.description_02 {
		min-width: 15rem;
		max-width: 30rem;
		overflow: hidden;
		padding: 0.5rem 0.5rem 1.0rem 0.5rem;
	}
	
	div.float_end {
		position: relative;
		float: none;
		top: 0.0rem;
	}
	
	div.center {
		margin-left: auto;
		width: 30.0rem;
		margin-right: auto;
	}
			
	/* neu */
	
		img.size_0 {
		object-fit: cover;
		padding: 0.4rem 1.0rem 0.0rem 0.0rem;
		width: 15.0rem;
		height: 15.0rem;
	}
		
	img.size_1 {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.0rem 0.4rem;
		width: 15.0rem;
		height: 15.0rem;
	}

	img.size_2 {
		object-fit: cover;
		padding: 0.0rem 0.0rem 0.0rem 0.0rem;
		width: 15.0rem;
		height: 15.0rem;
	}
	
	img.size_3 {
		object-fit: cover;
		float: left;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		width: 10.0rem;
		height: 10.0rem;
	}
	
	img.size_3a {
		object-fit: cover;
		float: left;
		position: relative;
		top: 7.6rem;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		width: 10.0rem;
		height: 2.7rem;
	}
	
	
	img.size_4 {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		width: 30.0rem;
		height: 30.0rem;
				
	}
	
	img.size_5 {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 30.0rem;
		margin-right: auto;
		height: 40.0rem;
	}
	
	img.size_6a {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 30.0rem;
		margin-right: auto;
		height: 22.5rem;
	}
	
	img.size_6b {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 16.875 rem;
		margin-right: auto;
		height: 22.5rem;
	}
	
	img.size_6c {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 22.5rem;
		margin-right: auto;
		height: 22.5rem;
	}
			
	figcaption.size_5 {
		object-fit: cover;
		padding: 1rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 30.0rem;
		margin-right: auto;
	}
	
	figcaption.size_6a {
		object-fit: cover;
		padding: 1rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 30.0rem;
		margin-right: auto;
	}
			
	figcaption.size_6b {
		object-fit: cover;
		padding: 1rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 16.875rem;
		margin-right: auto;
	}
	
	figcaption.size_6c {
		object-fit: cover;
		padding: 1rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 22.5rem;
		margin-right: auto;
	}
	
		
	
@media screen and (min-width: 34em) {

	div.projekt_0 {
		width: 45.0rem;
	}
	
	
	div.projekt {
		width: 45.0rem;
	}
	
	div.projekt_01 {
		margin-left: auto;
		width: 45.0rem;
		margin-right: auto;
	}
	
	
	div.projekt_02 {
		margin-left: auto;
		width: 45.0rem;		
		margin-right: auto;
	}
		
	div.aside_text {
		position: relative;
		left: 0.0rem;
		top: 0.0rem;
		margin-left: auto;
		width: 45.0rem;
		margin-right: auto;
	}
	/*
	div.aside_bottom {
		padding-top: 1.0rem;
		margin-left: auto;
		width: 45.0rem;
		margin-right: auto;
	}
	*/		
	div.float {
		position: relative;
		float: left;
		top: 0.0rem;
	}
	
	div.hidden {
		visibility: visible;
		position: relative;
	}

	div.float_end {
		position: relative;
		float: none;
		top: 0.0rem;
	}
	
	img.size_6a {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 45.0rem;
		margin-right: auto;
		height: 33.75rem;
	}
	
	img.size_6b {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 25.310rem;
		margin-right: auto;
		height: 33.75rem;
	}
	
	img.size_6c {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 33.75rem;
		margin-right: auto;
		height: 33.75rem;
	}
	
	figure.float_hidden {
		visibility: visible;
	}
		
	figcaption.size_6a {
		object-fit: cover;
		padding: 1.0rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 45.0rem;
		margin-right: auto;
	}
	
	figcaption.size_6b {
		object-fit: cover;
		padding: 1.0rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 25.310rem;
		margin-right: auto;
	}
	
	figcaption.size_6c {
		object-fit: cover;
		padding: 1rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 33.75rem;
		margin-right: auto;
	}
				
}

@media screen and (min-width: 42em) {
	
	div.projekt_0 {
		width: 45.0rem;
	}
	
	div.projekt {
		width: 45.0rem;
	}
	
	div.projekt_01 {
		margin-left: auto;
		width: 60.0rem;		
		margin-right: auto;
	}
	
	div.projekt_02 {
		margin-left: auto;
		width: 60.0rem;		
		margin-right: auto;
	}
	
	
	div.aside_text {
		position: relative;
		left: 0.0rem;
		top: 0.0rem;
		margin-left: auto;
		width: auto;
		margin-right: auto;
	}
	/*	
	div.aside_bottom {
		padding-top: 5.6rem;
		margin-left: auto;
		width: auto;
		margin-right: auto;
	}
	*/
	div.headline {
		margin-left: 0.0rem;
	}
	
	/*
	div.footline {
		text-align: right;
		margin-right: 5px;
	}
	*/	
	
	div.float {
		position: relative;
		float: left;
		top: 0.0rem;
		}
	
	/*
	div.hidden {
		visibility: hidden;
		position: absolute;
		left: 0.0rem;
		right: 0.0rem;
		}
	*/
	/*
	div.hidden_2 {
		visibility: visible;
		position: relative;
	}
	*/
	/*
	div.float_left_2 {
		position: relative;
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 5.5px;
		float: left;
		top: 0;
	}
	*/
	/*
	div.float_left_4 {
		position: relative;
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 5.5px;
		top: 0;
	}
	*/
	/*
	div.float_end {
		position: relative;
		float: none;
		top: 0;
	}
	*/
	/*
	div.description_01 {
		position: relative;
		width: 30.0rem;
	}
	*/
	
	img.size_6a {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 50.0rem;
		margin-right: auto;
		height: 37.5rem;
	}
		
	img.size_6b {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 28.13rem;
		margin-right: auto;
		height: 37.5rem;
	}
	
	img.size_6c {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 37.5rem;
		margin-right: auto;
		height: 37.5rem;
	}
		
	figcaption.size_6a {
		object-fit: cover;
		padding: 1rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 50.0rem;
		margin-right: auto;
	}
		
	figcaption.size_6b {
		object-fit: cover;
		padding: 1rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 28.13rem;
		margin-right: auto;
	}
	
	figcaption.size_6c {
		object-fit: cover;
		padding: 1rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 37.5rem;
		margin-right: auto;
	}
	
				
}

@media screen and (min-width: 52em) {
	
	div.projekt_01 {
		margin-left: auto;
		width: 75.0rem;
		margin-right: auto;		
	}
		
	img.size_6a {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 65.0rem;
		margin-right: auto;
		height: 48.75rem;
	}
		
	img.size_6b {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 36.56rem;
		margin-right: auto;
		height: 48.75rem;
	}
	
	img.size_6c {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 48.75rem;
		margin-right: auto;
		height: 48.75rem;
	}
		
	figcaption.size_6a {
		object-fit: cover;
		padding: 1rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 65.0rem;
		margin-right: auto;
	}
		
	figcaption.size_6b {
		object-fit: cover;
		padding: 1rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 36.56rem;
		margin-right: auto;
	}
	
	figcaption.size_6c {
		object-fit: cover;
		padding: 1rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 48.75rem;
		margin-right: auto;
	}
	
	
}

@media screen and (min-width: 72em) {
	
	div.projekt_0 {
		width: 45.0rem;
	}
	
	div.projekt {
		width: 60.0rem;
	}
		
	div.aside_text {
		position: relative;
		left: 0.0rem;
		top: 0.0rem;
		margin-left: auto;
		width: auto;
		margin-right: auto;
	}
	/*
	div.aside_bottom {
		padding-top: 5.6rem;
		margin-left: auto;
		width: auto;
		margin-right: auto;
	}
	*/
	/*
	div.hidden {
		visibility: visible;
		position: relative;
	}
	*/
	/*
	div.float_end {
		position: relative;
		float: none;
		top: 0;
	}
	*/
	
	/* neu */
	
	img.size_1 {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.0rem 0.4rem;
		width: 15.0rem;
		height: 15.0rem;
	}
	
	img.size_4 {
		object-fit: cover;
		padding: 0.8rem 0.4rem 0.4rem 0.4rem;
		width: 31.5rem;
		height: 31.5rem;
				
	}
		
	img.size_5 {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 39rem;
		margin-right: auto;
		height: 52rem;
	}
	
	figcaption.size_5 {
		object-fit: cover;
		padding: 1rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 40.0rem;
		margin-right: auto;
	}
			
	div.center {
		margin-left: auto;
		width: 45.0rem;
		margin-right: auto;
	}
	
	div.description_01 {
		position: relative;
		width: auto;
	}
}

@media screen and (min-width: 74em) {
	
	div.projekt_01 {
		margin-left: auto;
		width: 90.0rem;
		margin-right: auto;
	}
	
	/*
	div.projekt_02 {
		margin-left: auto;
		width: 60.0rem;		
		margin-right: auto;
	}
	*/
	
	img.size_6a {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 80.0rem;
		margin-right: auto;
		height: 60.0rem;
	}
		
	img.size_6b {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 45.0rem;
		margin-right: auto;
		height: 60.0rem;
	}
	
	img.size_6c {
		object-fit: cover;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 60.0rem;
		margin-right: auto;
		height: 60.0rem;
	}
			
	figcaption.size_6a {
		object-fit: cover;
		padding: 1.0rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 80.0rem;
		margin-right: auto;
	}
	
	figcaption.size_6b {
		object-fit: cover;
		padding: 1.0rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 45.0rem;
		margin-right: auto;
	}
	
	figcaption.size_6c {
		object-fit: cover;
		padding: 1.0rem 0.4rem 0.4rem 0.4rem;
		margin-left: auto;
		width: 60.0rem;
		margin-right: auto;
	}

}
		
/* ----------------------------------------------------------------------------- *
 *                           Tabellen                             *
 * ----------------------------------------------------------------------------- */
 
 table {
		width:100%;
		border-collapse: collapse;
		border:none;
}
 
 td.links {			
		width: 75%;
		padding: 0.0rem 1.0rem 1.0rem 1.0rem;
		text-align: left;
		vertical-align: top;
		hyphens: auto;

}

td.links_top {			
		padding: 0.0rem 0.0rem 0.0rem 1.0rem;
		width: 25%;
		text-align: left;
		vertical-align: top;
		hyphens: auto;

}

td.links_bottom {
		padding: 0.0rem 0.0rem 0.0rem 1.0rem;
		width: 25%;
		text-align: left;
		vertical-align: bottom;
}

 td.rechts {
		padding: 0.0rem 1.0rem 1.0rem 0.0rem;
		width: 25%;
		text-align: right;
		vertical-align: top;
}

 td.rechts_bottom {
		padding: 0.0rem 1.0rem 1.0rem 0.0rem;
		width: 25%;
		text-align: right;
		vertical-align: bottom;
}

}

img.rechts {
		margin: 0.0rem 0.25rem 1.25rem 0.00rem;
		padding: 0.0rem 0.0rem 0.0rem 0.0rem;
		text-align: left;
		vertical-align: top;
}

p.links {
		margin: 0.0rem 0.0rem 1.0rem 0.25rem;
		padding: 0.0rem 0.0rem 0.0rem 0.0rem;
		text-align: left;
		vertical-align: top;
}


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


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

@media screen and (min-width: 42em) {
	.header {
		text-align: right;
	}
	.main-wrapper {
		padding: 3rem 0.0rem;
		display: table;
	}
	
	.main-content {
		display: table-cell;
		width: 70%;
		height: 80vh;
		border-right: 1px dashed #ddd;
		padding: 0.0rem 2.0rem 0.0rem 3.0rem;
	}
		
	.main-content_01 {
		display: table-cell;
		width: 70%;
		height: 80vh;
		padding: 0.0rem 2.0rem 0.0rem 3.0rem;
	}
		
	.aside {
		visibility: visible;
		display: table-cell;
		width: 30%;
		padding: 0.0rem 3.0rem 0.0rem 2.0rem;
		border-top: none;
		margin: 0.0rem;
	}
		
	.nav {
		background-color: #001040; /* schwarz */
	}

	.footer {
		padding: 0.5rem 2.0rem 0.5rem 2.0rem;
		text-align: right;
	}
	
	/* ----------------------------------------------------------------------------- *
   *                             Textauszeichnungen                                *
   * ----------------------------------------------------------------------------- */
	
	/*
	.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.0rem;
	}
	/*
	p.teasertext {
		margin: 0.8em 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;
	}
}


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

@media screen and (min-width: 64em) {
	
	/* .main-wrapper macht Platz für .nav */
	.main-wrapper {
		border-left: 0.1rem dashed #ddd;
		width: 80%;
		padding: 0.0rem;
	}
	.main-content {
		width: 70%;
		padding: 2.0rem 2.0rem;
	}
	
	.main-content_01 {
		width: 70%;
		padding: 2.0rem 2.0rem;
	}
		
	.aside {
		width: 30%;
		padding: 2.0rem 2.0rem;
	}
	
	/* Zierelemente: Pfeil in Header einblenden, Pfeil in Nav ausblenden */
	.header.arrow-down::after {
		display: block;
		left: 20%;
		border-color: #4682b4 transparent; /* blau */
		margin-left: -2.0rem;
	}
	.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.0rem auto;
		max-width: 84.0em;
	}

}

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

.main-nav {
	margin: 0.0rem 0.0rem 0.0rem 0.0rem;
}

.main-nav > li {
	margin-left: 0.0rem;
	border-bottom: 0.1rem solid rgba(250, 250, 250, 0.6);
}

.main-nav li > a,
.main-nav li > b {
	padding: 1.0rem 2.0rem;
	display: block;
	font-size: 1.6rem;
}

.main-nav > li.top > a,
.main-nav > li.top > b {
		padding: 1.0rem 2.0rem;
		display: block;
		font-weight: 700; /* bold */
		line-height: 130%;
		color: #4682b4; /* steelblue */   
		font-size: 1.6rem; /* 15px */
	}


.main-nav > li.sub_nav > a,
.main-nav > li.sub_nav > b {
		padding: 1.0rem 4.0rem;
		display: block;
	}

.main-nav a:link {
	text-decoration: none;
	background: #001040; /* blau */
}

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

.inline {
	display: inline; /* li nebeneinander anzeigen */
    list-style-type: none; /* ohne Aufzählungspunkte */
}

@media screen and (min-width: 64em) {
	/* ----------------------------------------------------------------------------- *
   *                           Navigation: ul.main-nav                             *
   * ----------------------------------------------------------------------------- */

	/* Navigation wird links neben dem Inhalt angeordnet */

	h4 {
		margin: 0.0rem 0.0rem 0.5rem 3.0rem;
	}
	
	.main-nav {
		width: 20%;
		float: left;
		box-shadow: none;
		overflow: hidden;
		margin: 3.0rem 0.0rem 0.0rem 0.0rem;
		padding: 0;
	}

	.main-nav > li {
		width: 100%;
		float: none;
		border: none;
		
	}
	
	.main-nav > li > a,
	.main-nav > li > b {
		padding: 0.5rem 3.0rem;
		display: block;
		font-size: 1.5rem; /*15px*/
	}
		
	.main-nav > li.top > a,
	.main-nav > li.top > b {
		padding: 0.5rem 3.0rem;
		display: block;
		font-weight: 700; /* bold */
		line-height: 130%;
		color: #4682b4; /* steelblue */   
		font-size: 1.5rem; /* 18px */
	}
	
	.main-nav > li.sub_nav > a,
	.main-nav > li.sub_nav > b {
		padding: 0.5rem 5.0rem;
		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: #303030; /* grau */
	}
	
	.logo_text {
		font-size: 3.0rem; /* 30px */
		text-align: right;
		display: inline-block;
		padding: 0.5rem 3.0rem 0.5rem 2.0rem;
	}
		
}

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

/* ----------------------------------------------------------------------------- *
 *                      Toggle-Nav-Styles im Basis-Layout                        *
 * ----------------------------------------------------------------------------- */


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

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

a.toggle-nav:hover {
	background: #96cfbf;
	border: 0.1rem solid #96cfbf;
	color: #fff;
}

a.toggle-nav:link,
a.toggle-nav:visited,
a.toggle-nav:active,
a.toggle-nav:focus {
	background: #001040; /* blau */
	border-style: none; /* hellgrau */
	color: #fff;
}

svg.icon {
    fill: #FFFFFF;
    background: transparent;
    height: 5.0rem;
    width: 6.0rem;
	padding: 0.5rem 1.0rem 0.5rem;
    position: relative;
    left: 0.5rem;
    bottom: -1.0rem;
}

@media screen and (min-width: 64em) {
	/* Menü-Link verstecken in großen Viewports */
	a.toggle-nav {
		display: none;
	}
}


/* ----------------------------------------------------------------------------- *
 *                          Styles für kleine Viewports                            *
 *                           368px / 16px/em = 23em                            *
 * ----------------------------------------------------------------------------- */

@media screen and (max-width: 23em) {
	.header {
	}
	
	.logo_text {
		font-size: 1.6rem; /* 16px */
		text-align: right;
		display: inline-block;
		padding: 0.5rem 1.0rem 0.5rem;
	}
	
	.logo {
		font-size: 1.6rem; /* 16px */
		text-align: right;
		display: inline-block;
		padding: 0.5rem 2.0rem 0.25rem 0.25rem;
	}

	.medium {
	width: 5.0rem;
	float: right;
	}

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

/* ----------------------------------------------------------------------------- *
 *        Beispiel Toggle-Navigation mit :target ohne JS im Basis-Layout         *
 * ----------------------------------------------------------------------------- */

#navMain {
	display: none;
}

#navMain:target {
	display: block;
}

/* ----------------------------------------------------------------------------- *
 *                  Beispiel Toggle-Navigation ab Tablet-Layout                  *
 *                            640px / 16px/em = 40em                             *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 64em) {
	#navMain {
		display: block;
	}
	/* Menü-Link verstecken in großen Viewports */
	a.toggle-nav {
		display: none;
	}
}


/* NEU: */
/* ----------------------------------------------------------------------------- *
 *                            Bildergalerien und Slider                          *
 * ----------------------------------------------------------------------------- */

/* slick-slider */

.section__img-slider ul {
	padding: 0;
	margin: 0;
}

.section__carousel-slider img {
	border: 0.2rem solid #fff;
}

.section__text-slider {
	border-top: 0.0rem solid #efefef; /* geändert */
	border-bottom: 0.0rem solid #efefef; /* geändert */
}


@media screen and (min-width: 42em) {
	.section__text-slider {
		padding: 2.0rem 5.0rem;
		background: rgb(255 255 255/ 0.1); /* weiss */
		border: 0.0rem solid #efefef;/* geändert */
	}
	
	.slick-prev {
		left: -4.0rem;
	}
	[dir="rtl"] .slick-prev {
		right: -4.0rem;
	}
	.slick-next {
		right: -4.0rem;
	}
	[dir="rtl"] .slick-next {
		left: -4.0rem;
	}
	.slick-prev,
	.slick-next {
		height: 3.0rem;
		width: 3.0rem;
	}
	.slick-prev::before,
	.slick-next::before {
		font-size: 3.0rem;
		color: #da0545;
	}
	.section__img-slider {
		padding: 1.0rem 3.0rem;
	}
	.section__textbox-slider {
		margin: 4.0rem 0.0rem;
	}
}