@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 {
  text-align: center; }

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

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

.section {
  margin: 1em 0; }

/*** Textauszeichnungen ***/
h1 {
  margin: 0 0 0.625em; }

h2 {
  margin: 0.5em 0; }

h3 {
  margin: 0.6em 0; }

p {
  margin: 0.5em 0; }

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

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

.main-nav {
  margin: 0; }
  .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 a:link {
    text-decoration: none; }

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

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                            640px / 16px/em = 40em                             *
 * ----------------------------------------------------------------------------- */
@media screen and (min-width: 40em) {
  .header {
    padding: 1.5em 2.4rem;
    text-align: left; }

  .main-wrapper {
    padding: 3rem 0;
    display: block;
    overflow: auto; }

  .main-content {
    display: block;
    float: left;
    width: 70%;
    border-right: 1px dashed #ddd;
    padding: 0 2rem 0 3rem; }

  .aside {
    display: block;
    margin: 0 0 0 70%;
    width: 30%;
    padding: 0 3rem 0 2rem;
    border-top: none; }

  .footer {
    padding: 0.8em 2rem;
    text-align: right; }

  /*** Textauszeichnungen ***/
  .logo {
    font-size: 2.8rem;
    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: #da0545; }

  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: #189ca4 transparent;
    margin-left: -2rem;
    display: block; }

  .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 */ } }



/* ----------------------------------------------------------------------------- *
 *                          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;
		margin-left: 20%;
	}
	.main-content {
		width: 65%;
		padding: 2em 2rem;
	}
	.aside {
		width: 35%;
		padding: 3rem;
		margin: 0 0 0 65%;
	}
	/* Zierelemente: Pfeil in Header einblenden, Pfeil in Nav ausblenden */
	.header.arrow-down::after {
		display: block;
		left: 20%;
		border-color: #da0545 transparent;
		margin-left: -2rem;
	}
	.nav.arrow-down::after {
		display: none;
	}
	/* 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: #fff;
	}
	.main-nav a:hover,
	.main-nav a:focus,
	.main-nav a:active {
		color: #fff;
		background-color: #96cfbf;
	}
}