@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: 57.5%;
}

body {
	font-size: 14px; /* Fallback für alte Browser, die rem nicht kennen */
	font-size: 1.5rem; /* 14px */
	line-height: 1.4; /* 24px */
	font-family: Arial, Helvetica, sans-serif; /* Google Webfont */
	font-weight: 500;
	font-style: normal;
	color: #333; /* dunkelgrau */
	background-color: #FFF;/* weiss */
	alignment-adjust: middle;
}

.page-wrapper {
	background-color: #FFFFFF; /* weiss */
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}

.header {
	background-color: #FFFFFF; /* rot */
}

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

.footer {
	background-color: #666; /* schwarz */
	letter-spacing: 0.1em;
	color: #fff; /* weiss */
}

 h2, h3 {
	font-family:  Arial, Helvetica, sans-serif; /* Google Webfont */
	font-weight: 500;
	line-height: 120%;
	color: #333 /*dunkelgrau */
}

h1 {
	font-size: 2.5rem; /* 25px */
	font-family: Arial, Helvetica, sans-serif; /* Google Webfont */
	font-weight: 500;
	line-height: 120%;
	color: #999999;  /* grau */
}

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

h3 {
   font-size: 1.8rem; /* 18px */
}

h6 {
	font-size: 2.5rem; /* 25px */
	font-family: Arial, Helvetica, sans-serif; /* Google Webfont */
	font-weight: 500;
	line-height: 120%;
	color: #333333;  /* rot */
}

p.teasertext {
   font-size: 1.5rem; /* 15px */
   line-height: 120%;
}

.highlight{
	color: #1E8915;
}

a:link, a:visited {
	color:#1E8915; /* gruen */
	font-weight: 500;
	text-decoration:none;
}

a:hover, a:focus, a:active {
	color:#017561; /*gruen*/
	background-color: #E4EEF9; /* blau-gruen hell */
	font-size: inherit;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration:none;
}

/* Button der wie ein Link aussieht */
button.btn-link {
   border: none;
   outline: none;
   background: none;
   cursor: pointer;
   color: #1E8915;
   padding: 0;
   text-decoration: none;
   font-weight: 500;
   font-family: inherit;
   font-size: inherit;
}

   .btn-link::visited {
   border: none;
   outline: none;
   background: none;
   cursor: pointer;
   color: #1E8915;
   padding: 0;
   text-decoration: none;
   font-weight: 500;
   font-family: inherit;
   font-size: inherit;
}

   .btn-link:active{
 color:#017561;
 background-color: #E4EEF9;
}

.btn-link:hover {
 color:#017561;
 background-color: #E4EEF9;
}

.btn-link:focus{
 color:#017561;
 background-color: #E4EEF9;
}

.logo {
	font-family: Arial, Helvetica, sans-serif; /* Google Webfont */
	font-size: 150%;
	font-weight: 100;
	line-height: 1;
	text-transform: lowercase;
	letter-spacing: 0.3em;
	color: #CCC; /* hellgrau */
	bottom: 15px;
}

.logo a:link, .logo a:visited {
	color: #fff; /* weiss */
	font-weight: 500;
	text-decoration: none;
	letter-spacing: 2px;
	display: block;
	margin-left: 25px;
	font-size: 1.5rem;
	text-align: right;
	text-transform: none;

}

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

.main-nav {
	background-color: #CCCCCC; /*hellgrau */
}

.main-nav li {
	list-style: inside;
	color: #333;
}

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

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

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

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

.blindtext,
.blindtext * {
	color: #333333 !important; /* mittelgrau */
}
.simple {
   border-radius:50%;
   transition: transform cubic-bezier(0.5, 1.8, 0.8, 0.5) 2s;
}

.simplebump {
   transform: translateY(800px);      // entlang der y-Achse bewegen
}