@charset "iso-8859-1"/*"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                               *
 * ----------------------------------------------------------------------------- */


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

html {
	font-size: 62.5%;
}

body {
	font-size: 1.6px; /* Fallback für alte Browser, die rem nicht kennen */
	font-size: 1.6rem; /* 16px */
	line-height: 1.5;
	font-family: verdana /*'Roboto'*/, sans-serif, arial;
	font-weight: 300;
	color: #444;
/* background-color: rgb(255, 245, 229);*/
    background-color: rgb(229, 229, 229);
}


page-wrapper {
box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.6);
}

.page-wrapper {
    box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.6);
/*  Raster als Hintergrundeinblenden:
	background-image: url('../img/16_col-1.png');
	background-size: 100%;
	background-repeat: repeat-y;
*/	
	
	/* Hintergrund-Farbe auskommentieren, wenn Raster angezeigt werden soll! */
    /*background-color: rgb(240, 187, 65);*/
}

.main-wrapper {
	/* Hintergrund-Farbe auskommentieren, wenn Raster angezeigt werden soll! */
	background-color: #fff;
	overflow: auto;
	padding: 0;
}

.main-content {
	border-right: 1px dashed #ddd;
}

.header {
    background-color: rgb(51, 67, 127);
	/*background-color: rgb(45, 45, 47);*/
	text-align: left;
}

.footer {
    background-color: rgb(51, 67, 127);
	/*background-color: rgb(45, 45, 47);*/
	color: #fff;
	padding: 0.6em 2rem;
	text-align: center;
}

/*
.aside {
	padding-top: 1em;
	margin-top: 1em;
}*/

.section {
	margin: 1em 0;
}

/*OG*/
.box-inner1{
    background-color: rgb(229, 229, 229);
    border-top: 3px solid rgb(64, 64, 64);
}
.box-inner2{
    background-color: rgb(223, 228, 247);
    border-top: 3px solid rgb(64, 64, 64);
}
.box-inner3{
    background-color: rgb(217, 133, 130);
    border-top: 3px solid rgb(64, 64, 64);
    color: rgb(229, 229, 229);
}
/*OG*/
/*.box-inner1 h2, .box-inner2 h2 {
    font-weight: bold;
} */

.box-inner3 h2{
    color: rgb(229, 229, 229);
    font-weight: 500;
    }
/*OG End*/

h1,
h2,
h3,
h10 {
	font-family: verdana, sans-serif, Arial;
	font-weight: 500;
	line-height: 130%;
	color: #da0545;
}

h1 {
	font-size: 2.8rem;
	margin: 0;
}

h2 {
	font-size: 2.2rem;
	margin: 0.5em 0;
}
/*OG */
h10{
	text-align: center;
	font-size: 3.0rem;
}


aside h2 {
   margin: 0;
}

h3 {
	font-size: 2.0rem;
	margin: 0.6em 0;
}

p {
	margin: 0.5em 0;
}

p.teasertext {
	font-size: 1.7rem;
	line-height: 150%;
	margin: 0.8em 0;
}


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

a:link,
a:visited {
	color: rgb(45, 45, 47);
	font-weight: 600;
}

a:hover,
a:focus,
a:active {
	color: rgb(0, 0, 0);
	background-color: rgb(245, 223, 181);
}

.logo {
	font-family: overlock,Verdana , sans-serif;
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 0.8;
	/*text-transform: uppercase;*/
	letter-spacing: 0.1em /*0.3em*/;
	color: #fff;
	text-align: left;
	display: inline-block;
	padding: 0;
}

.logo a:link,
.logo a:visited {
	color: #fff;
	font-weight: 500;
	text-decoration: none;
	display: block;
	padding: 0.1em 0;
}

.logo a:hover,
.logo a:focus,
.logo a:active {
	background-color: #fff;
	color: rgb(45, 45, 47);
}

.headertextsmall {
  font-size: 1em;
  font-family: overlock, verdana,georgia,serif;
/*  letter-spacing: 2px;*/
  padding-top: 0.1em;
  padding-left: 8em;
  color: rgb(255, 255, 255);
}


/*OG*/
.footer a:link,
.footer a:visited {
	color: #fff;
	text-decoration: none;
}

.footer a:hover,
.footer a:focus,
.footer a:active {
	background-color: #fff;
	color: rgb(45, 45, 47);
/*OG End*/
}

.box-inner1 a:link,
.box-inner1 a:visited {
	color: rgb(51, 67, 127);
	font-weight: 600;
	text-decoration: none;
	display: block;
	/*padding: 0.1em 0;*/
}

.box-inner1 ul {
padding-top: 1em;
}

.box-inner1 a:hover,
.box-inner1 a:focus,
.box-inner1 a:active {
	background-color: #fff;
	color: rgb(51, 67, 127);
	letter-spacing: 1px;
}

/* ----------------------------------------------------------------------------- *
 *                           Styles für Navigation                               *
 * ----------------------------------------------------------------------------- */

.main-nav {
/*OG*/
	background-color: rgb(240, 187, 65);
	padding-top: 3em; /*OG End*/
    /*padding: 0;*/
	margin: 0;
}

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

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

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

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

.main-nav a:link,
.main-nav a:visited {
	color: # fff;
	text-decoration: none;
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav a:active {
	background-color: rgb(245, 223, 181)/*# 96cfbf*/;
	color: # fff;
}

.main-nav__item-act {
	color: #189ca4;
	background-color: #fff;
}

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