@charset "UTF-8";

/* ----------------------------------------------------------------------------- * 
 *           atmosphere.css - Definition Farben und Schriften                    *
 *       In der layout.css stehen ergänzende Styles für alle Layoutstufen.       *
 * ----------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------- *
 *          Basisschriftgröße auf 10px setzen --> 62,5% von 16px                 *
 *    erleichtert die Umrechnung der weiteren Schriftgrößen in rem / em      *
 *        Beispiel: 1.0rem entspricht 10px und 1.6rem entspricht 16px            *
 * ----------------------------------------------------------------------------- */

html {
   font-size: 62.5%;
   box-sizing: border-box;
}

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

body {
   font-size: 1.6px; /* Fallback für alte Browser, die rem nicht kennen */
   font-size: 1.6rem; /* 16px */
   line-height: 1.5; /* 24px */
   font-family: 'Roboto', sans-serif; /* Google Webfont */
   font-weight: 300;
   color: #444; /* dunkelgrau */
   background-color: #efefef; /* hellgrau */
}

address{
		border-style: solid;
		border-radius: 9px;
		border-color: #009473;
		padding: 1em 1em 1em 1em;
		font-style: normal;
		font-weight: bold;
		margin: 1em 40px;
}

h1, h2, h3 {
   font-family: 'Raleway', sans-serif; /* Google Webfont */
   font-weight: 500;
   line-height: 130%;
   color: #73615B; /* dunkelblau */
}

h1 {
   font-size: 2.6rem; /* 26px */
   margin: 0 0 0.625em;
}

h2 {
   font-size: 2.2rem; /* 22px */
   margin: 0;
}

h3 {
   font-size: 2.0rem; /* 20px */
   margin: 0.6em 0;
}

p {
	margin: 0.5em 0;
}

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

table{
	padding-top: 0.5em;
}

li,
td {
	padding-bottom: 0.1em;
}

p.teasertext {
   font-size: 1.7rem; /* 17px */
   line-height: 150%;
}

a:link, a:visited {
   color: #A4A09D; /* blau-gruen */
   text-decoration: none;
   font-weight: 600;
}

a:hover, a:focus, a:active {
   color: #fff; /* weiss */
   background-color: #A4A09D; /* blau-gruen */
}

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

.section {
	padding: 1em 0;
}

.page-wrapper {
   background-color: #E7D2BA; /* blau-gruen */
}

.header {
   background-color: #009473; /* dunkelblau */
   text-align: center;
}

.main-wrapper {
   background-color: #fff; /* weiss */
   padding: 2em 2rem;
}

.footer {
   background-color: #000; /* schwarz */
   color: #fff; /* weiss */
   padding: 0.6em 2rem;
	text-align: center;
}

.logo {
   font-family: 'Raleway', bold; /* Google Webfont */
   font-size: 2.5rem;
   font-weight: 600;
   line-height: 1;
   text-transform: capitalize;
   letter-spacing: 0.2em;
   color: #BFD641; /* weiss */
}

.logo a:link, .logo a:visited {
   color: #BFD641; /* weiss */
   font-weight: 500;
   text-decoration: none;
   display: block;
   padding: 0.6em 2rem;
}

.logo a:hover, .logo a:focus, .logo a:active {
   background-color: #A4A09D; /* orange */
}

.logo_sub {
   font-family: 'Raleway' bold; /* Google Webfont */
   font-size: 2.0rem;
   font-weight: 500;
   line-height: 1;
   text-transform: inherit;
   color: #BFD641; /* weiss */
}

.logo_sub a:link, .logo_sub a:visited {
   color: #BFD641; /* weiss */
   font-weight: 500;
   text-decoration: none;
   display: block;
}

.logo_sub a:hover, .logo_sub a:focus, .logo_sub a:active {
   background-color: #A4A09D; /* orange */
}

.main-nav {
   background-color: #E7D2BA; /* blau-gruen */
   margin: 0;
}

.main-nav li {
   list-style: none;
}

.main-nav a, .main-nav b {
   font-weight: 300;
}

.main-nav a:link, .main-nav a:visited {
   color: #444; /* weiss */
   text-decoration: none;
}

.main-nav a:hover, .main-nav a:focus, .main-nav a:active {
   background-color: #A4A09D; /* mint-gruen */
   color: #fff; /* weiss */
}

.main-nav__item-act {
   color: #73615B; /* blau-gruen */
   background-color: #fff; /* weiss */
}

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


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

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


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

@media screen and (min-width: 40em) {
	.main-nav {
		padding: 0 2rem;
		overflow: hidden;
	}
	.main-nav > li {
		float: left;
		display: inline-block;
		border: none;
		width: auto;
	}
	.main-nav > li > a,
	.main-nav > li > b {
		padding: 0.7em 1.2rem;
		display: inline-block;
		font-size: 1.8rem;
		/* 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;
	}
	.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: #444;
	}
	.main-nav a:hover,
	.main-nav a:focus,
	.main-nav a:active {
		color: #fff;
		background-color: #A4A09D;
	}
}

/* ----------------------------------------------------------------------------- *
 *                           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 {
		padding: 1.5em 2.4rem;
		text-align: left;
	}
	.main-wrapper {
		padding: 3rem 0;
		display: table;
	}
	.main-content {
		display: table-cell;
		width: 70%;
		border-right: 1px dashed #ddd;
		padding: 0 2rem 0 3rem;
	}
	.aside {
		display: table-cell;
		width: 30%;
		padding: 0 3rem 0 2rem;
		border-top: none;
		margin: 0;
	}
	.footer {
		padding: 0.8em 2rem;
		text-align: right;
	}
	/*** Textauszeichnungen ***/
	.logo {
		font-size: 3.8rem; /***Größe der Überschrift***/
		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: #A4A09D;
	}
	
.logo_sub {
		font-size: 2,8rem; /***Größe der Überschrift***/
		text-align: left;
		display: inline-block;
		   padding-top: 10px;
	}
	.logo_sub a:link,
	.logo_sub a:visited {
		padding: 0.1em 0.6rem;
	}
	.logo_sub a:hover,
	.logo_sub a:focus,
	.logo_sub a:active {
		background-color: #fff;
		color: #A4A09D;
	}	
	
	h1 {
		font-size: 2.8rem;
		/* 28px */
		margin: 0;
	}
	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;
	}
	.nav.arrow-down::after {
		left: 70%;
		border-color: #E7D2BA transparent; <!-- Farbe des Dreiecks -->
		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;
	}
	.main-content {
		width: 65%;
		padding: 2em 2rem;
	}
	.aside {
		width: 35%;
		padding: 3rem;
	}
	/* Zierelemente: Pfeil in Header einblenden, Pfeil in Nav ausblenden */
	.header.arrow-down::after {
		display: block;
		left: 20%;
		border-color: #009473 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;
	}
}




/* ----------------------------------------------------------------------------- *
 *                          Styles für Tiny-Nav Select Menü                      *
 * ----------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------- *
 *              Styles für Tiny-Nav Select Menü in der Basiversion               *
 * ----------------------------------------------------------------------------- */


/* Select-Menü wird nach rechts gefloatet */

.tinynav {
	display: block;
	float: right;
	margin: 0.8em 0.5em;
}


/* normales Menü wird nicht angezeigt */

.js-on #navMain {
	display: none;
}


/* ----------------------------------------------------------------------------- *
 *               Styles für Tiny-Nav Select Menü ab Tabletversion                *
 *                            640px / 16px/em = 40em                             *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 40em) {
	.tinynav {
		display: none;
	}
	.js-on #navMain {
		display: block;
	}
}