@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)            *
 * ----------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------- *
 *          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; /* 24px */
   font-family: Century Gothic, Verdana, Arial, Helvetica, sans-serif; /* angepasst */
   font-weight: 300;
   color: #C0C0C0; /* grau */
   background-color: #C0C0C0; /* grau */
}

.page-wrapper_0 {
	overflow: visible;
}

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

.header {
   background-color: #001040; /* blau */
}
.main-wrapper {
   background-color: #001040; /* blau */
   padding: 2em 2rem;
}

.footer {
   background-color: #001040; /* blau */
   color: #C0C0C0; /* grau */
}

b {
   font-weight: 600;
}

.bold {
   font-weight: 600;
}

.liste {
	margin: 0.0em;
	padding-left: 0.0em;
	list-style-type: none;
}

h1, h2, h3 {
   font-family: Century Gothic, Verdana, Arial, Helvetica, sans-serif; /* angepasst */
   font-weight: 700; /* bold */
   line-height: 130%;
   color: #4682b4; /* steelblue */
}

h1 {
   font-size: 2.6rem; /* 26px */
}

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

h3 {
   font-size: 2.0rem; /* 20px */
}

h3.right {
   font-weight: 500; /* normal */
}

h4 {
   font-family: Century Gothic, Verdana, Arial, Helvetica, sans-serif; /* angepasst */
   font-weight: 700; /* bold */
   line-height: 130%;
   color: #4682b4; /* steelblue */   
   font-size: 2.0rem; /* 20px */
}
/*
h4 {
   font-size: 1.6rem; 16px
}
*/

h5 {
   font-family: Century Gothic, Verdana, Arial, Helvetica, sans-serif; /* angepasst */
   font-weight: 700; /* bold */
   line-height: 130%;
   color: #4682b4; /* steelblue */   
   font-size: 1.8rem; /* 18px */
}


.small {
   font-size: 1.6rem; /* 16px */
	font-weight: bolder;
	color: #4682b4 /* steelblue */	
}

.logo_text {
	color: #4682b4; /* steelblue */	
	}

.big {
   font-size: 2.4rem; /* 24px */
}

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

a:link, a:visited {
   text-decoration:none;
   color: #C0C0C0; /* grau */ 
   font-weight: 300;
}

a:hover, a:focus, a:active {
   padding: 0.0em 0rem;
   background-color: #303030;/* grau */
   color: #fff;
}

.logo {
   font-family: Century Gothic, Verdana, Arial, Helvetica, sans-serif; /* angepasst */
   font-size: 4.0rem;
   font-weight: 500;
   line-height: 1;
   margin-top: 0.1em;
   margin-bottom: -0.1em;
   padding: 1em;
   letter-spacing: 0.1em;
   color: #fff; /* weiss */
}

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

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

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

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

.main-nav a:link, .main-nav a:visited {
   color: #fff; /* weiss */
}

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

.main-nav__item-act {
   color: #202020; /* grau */
   background-color: #efefef; /* hellgrau */
}

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

.footer-nav a:link, .footer-nav a:visited {
   color: #4682b4; /* steelblue */
   text-decoration: none;
}

.footer-nav a:hover, .footer-nav a:focus, .footer-nav a:active {
   background-color: #efefef; /* hellgrau */
   color: #000000; /* schwarz */
}

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

.projekte-nav a:link, .footer-nav a:visited {
   color: #4682b4; /* steelblue */
   text-decoration: none;
}

.projekte-nav a:hover, .footer-nav a:focus, .footer-nav a:active {
   background-color: #303030; /* grau */
   color: #ffffff; /* weiß */
}

.blindtext,
.blindtext * {
	color: #c5c5c5 !important; /* mittelgrau */
}

hr {
	width: 100%;
	height: 3px;
	border: 0em;
	/*margin: 0 auto;*/
	/*color: #4682b4;*/
	background: #4682b4;
}