@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 {
   padding: 1em 0;
}


/*** Textauszeichnungen ***/

h1 {
   margin: 0 0 0.625em;
}

h2 {
   margin: 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;
}


/* ----------------------------------------------------------------------------- *
 *                           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: 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;
   }
}


/* ----------------------------------------------------------------------------- *
 *                          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: #da0545 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;
   }
}


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

.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;
}

@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: #fff;
   }
   .main-nav a:hover,
   .main-nav a:focus,
   .main-nav a:active {
      color: #fff;
      background-color: #96cfbf;
   }
}


/* ----------------------------------------------------------------------------- *
 *                      Styles für Responsive-Nav Toggle Menü                    *
 * ----------------------------------------------------------------------------- */


/*** Menü-Link zum Ein-und Ausblenden des Menüs ***/

a.nav-toggle {
   position: absolute;
   top: 0.4rem;
   right: 1rem;
   display: inline-block;
   padding: 0.357em;
   font-weight: 300;
   color: #fff;
   background: #189ca4;
   border: 1px solid #189ca4;
   border-radius: 0.2em;
   text-decoration: none;
   cursor: pointer;
}

a.nav-toggle:hover {
   border: 1px solid #96cfbf;
   background: #96cfbf;
}


/* ----------------------------------------------------------------------------- *
 *                      Beispiel Responsive-Nav im Basis-Layout                  *
 * ----------------------------------------------------------------------------- */


/***! responsive-nav.js 1.0.39 by @viljamis ***/

.js .nav-collapse {
   clip: rect(0 0 0 0);
   max-height: 0;
   position: absolute;
   display: block;
   overflow: hidden;
   zoom: 1;
}

.nav-collapse.opened {
   max-height: 9999px;
}

.nav-toggle {
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
   user-select: none;
}


/* ----------------------------------------------------------------------------- *
 *                Beispiel Responsive-Nav im im Tablet/Desktop-Layout            *
 *                            640px / 16px/em = 40em                             *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 40em) {
   .js .nav-collapse {
      position: relative;
      overflow: visible;
   }
   .js .nav-collapse.closed {
      max-height: none;
   }
   /* Menü-Link verstecken in großen Viewports */
   a.nav-toggle {
      display: none;
   }
}


/* Platz schaffen für den Menü-Button in kleinen Viewports */

@media screen and (max-width: 23em) {
   .header {
      text-align: left;
   }
}


/* NEU: */


/* ----------------------------------------------------------------------------- *
 *                           Anpassungsfähige Bilder                             *
 * ----------------------------------------------------------------------------- */


/* Bilder flexibel machen */

img {
   max-width: 100%;
   height: auto;
}


/* figure.slides-Container um die Bilder */

.slides {
   margin: 2rem 0;
   line-height: 0;
}


/* Bildunterschrift */

figcaption {
   line-height: 1.4;
   padding: 0.5em 0 0;
}


/* NEU: */

/* ----------------------------------------------------------------------------- *
 *                          Styles für Promoboxen                                *
 *       Promoboxen mit skalierbaren Backgroundgrafiken  .promo-box              *
 * ----------------------------------------------------------------------------- */

.promo-box {
   margin-bottom: 1em;
   background-color: #397367; /* moosgrün */
}

.promo-box a {
   color: #fff;
   text-decoration: none;
}

.full-link {
   display: block;
   position: relative;
   padding: 1em 1em 89%;
}

.full-link:hover,
.full-link:focus,
.full-link:active {
   background-image: none !important;
}

.topic-a .full-link {
   background: url("../img/dummy-300x300-Seed-plain.jpg") no-repeat;
   background-size: cover;
}

.topic-b .full-link {
   background: url("../img/dummy-300x300-Seed-plain.jpg") no-repeat;
   background-size: cover;
}

.promo-box h2 {
   color: #fff;
   font-size: 3.8rem;
   line-height: 1;
   margin: 2rem 0 0;
}

.promo-box p {
   position: absolute;
   bottom: 0;
   font-size: 1.7rem;
   width: 90%;
}


/* Promo-Buttons nebeneinander platzieren ab ca. 400px Viewport-Breite */

@media screen and (min-width: 25em) {
   .promo-box {
      float: left;
      margin-right: 3%;
      width: 48.5%;
   }
   .promo-box:nth-of-type(even) {
      margin-right: 0;
   }
}