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

.main-wrapper {
  /*z-index:10;*/
  overflow:hidden;
  background-color:#fff;

  
  }

.aside {
  padding: 0.6em 0.2em;
  }

.aside_intern_2 {
  /*border: 1px solid #003972;*/
  padding-top: 1em;
  margin-top: 1em;
  background:rgba(255,255,255,0.9);
  box-shadow: 5px 5px 10px #003972;
  padding:10px;
  margin-top:10px;
  margin-bottom:10px;
  margin-right:0.5em;
  padding-right:0px;
  position:relative;
  z-index:1;
  
  /*margin-left:1em;*/
}


#gme-1, .js-map {
  max-width:100%;
  width:100%;
  }


.footer {
  padding: 0.6em 2rem;
  text-align: center;
  min-width:100%;
  margin:0;
}

.section {
  padding: 1em 0;
}

img {

  max-width:100%;
  width:100%;
  height:auto;
  overflow:hidden;
  }




.logo1{
  max-width:40%;
  align:left;
  padding-top:0;
  }

#nav1 {
  visible:hidden;
  }

/* ----------------------------------------------------------------------------- *
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */

h1 {
  margin: 0 0 0.625em;
}

h2 {
  margin: 0;
}

h3 {
  margin: 0.6em 0;
}

p {
  margin: 0.5em 0;
}

strong {
  font-weight:bold;
  }

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

.logo1{
  padding-left:1.5em;
  }

.signet a:link,
.signet a:visited,
.signet a:active,
.signet a,
.signet a:hover{
  padding: 0em 0rem;
  font-size:0.9em;
  
}

.signet {
  text-align:left;
  padding-left:1.5em;
  }

.signet img {
  width:100%;
  height:auto;
  }

.logo1 img {
  width:100%;
  overflow:auto;
  }




/* ----------------------------------------------------------------------------- *
 *                                   Bilder                                      *
 * ----------------------------------------------------------------------------- */


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

.logo {
  width:100%;

  
  }

.logo1 {

  float:left;
  max-width:70%;

  }

  .signet {
  margin-top:2em;
  }

.signet img  {
  max-width:20%;
  }

}

@media screen and (min-width: 40em) {
  .header {
    padding: 1.0em 0rem;
    text-align: left;
  }
  .main-wrapper {
    padding: 3rem 0;
    display: table;
  max-width:80em;
  margin: 0 auto;
  }
  .main-content {
    display: table-cell;
    width: 70%;
    /*border-right: 1px dashed #ddd;*/
    padding: 0 2rem 0 3rem;
  max-width:80em;
  margin:0 auto;
  }
  .aside {
    display: table-cell;
    width: 100%;
    padding: 0 2rem 0 2rem;
    border-top: none;
    margin: 0;
    margin-top:10px;
  }
  .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: #7ab51d;
  }
  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: #003972 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;*/
  max-width:80em;
  margin: 0 auto;
  }
  .main-content {
/*    width: 65%; */
    padding: 2em 1rem;
  }
  .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: 100%;
  }

.header, .main-content {
  max-width: 80em;
  margin:0 auto;
  }

.logo {
  width:100%;
  max-width:80em;
  margin:0 auto;
  
  }

.logo1 {

  float:left;
  max-width:70%;

  }

  .signet {
  margin-top:2.8em;
  }

.signet img  {
  max-width:20%;
  }
}


/* ----------------------------------------------------------------------------- *
 *                                  Navigation  - Grundversion  - hier: smartphone        *
 * ----------------------------------------------------------------------------- */




.main-nav {
  /*overflow:inherit; 20171204 */
  /* position:relative; 20171204 */
  margin: 0;
  z-index:20;
}


.main-nav-img {
  display:none;
  }

navMainImg {
  display:none;
  }

.main-nav > li {
  display:inline;
  margin-left: 0;
  /*border-bottom: 1px solid rgba(250, 250, 250, 0.6);*/
  border-left: 1px solid rgba(174, 174, 174, 0.6);
}

.main-nav li > a,
.main-nav li > b {
  padding: 0.1em 1rem;
  display: inline-block;
  font-size: 1.6rem;
  border-left: 1px solid rgba(174, 174, 174, 0.6);
}

.main-nav a:link {
  text-decoration: none;
  border-left: 1px solid rgba(174, 174, 174, 0.6);
}

.main-nav__item-act b {
  font-weight: 600;
  border-left: 1px solid rgba(174, 174, 174, 0.6);
}


/* menue oben */
.service-nav > li {
  margin-right: 0;
  display: inline-block;
  /*border-bottom: 1px solid rgba(250, 250, 250, 0.6);*/
}

.service-nav li > a,
.service-nav li > b {
  padding: 0.6em 2rem;
  display: inline-block;
  font-size: 1.0rem;
}

.service-nav a:link {
  text-decoration: none;
}

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



/* menue unten */

.bottom-nav > li {
  margin-left: 0;
  display: inline-block;
  /*border-bottom: 1px solid rgba(250, 250, 250, 0.6);*/
}

.bottom-nav li > a,
.bottom-nav li > b {
  padding: 0.6em 2rem;
  display: inline-block;
  font-size: 1.3rem;
}

.bottom-nav a:link {
  text-decoration: none;
}

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


#navall {
  display:none;
  }


@media screen and (min-width: 40em) {
  /* ----------------------------------------------------------------------------- *
   *                           Navigation: ul.main-nav  *
   * navigation oben
   * ----------------------------------------------------------------------------- */


/* bilder ueber dem oberen Menue */

.main-nav-img {
  display:block;
  overflow:hidden;
  width:100%;
  margin:0;
  background-color:#fff; /* hintergrund dunkelblau */
  }

.main-nav-img ul {
  overflow:hidden;
  max-width:100%;
  padding:0;
  margin:0;
  }

.main-nav-img  li {
  float:left;
  list-style:none;
  overflow:hidden;
  /*width:20%;*/
  padding:0;
  margin:0;
  }

.main-nav-img li {
  width:100%;
  height:auto;
  padding:5px;
  overflow:hidden;
  }

navMainImg {
  float:left;
  display:block;
  max-width:100%;
  }

/* menue */


nav {
  position:relative;
  z-index:500;
  }


.nav li {
  /*clear:all;*/ /* 20171228 raus genommen */
  
  }

.nav li {
  /*clear:all;*/ /* 20171204 oder 20171218*/
  float:left; /*20171218*/
  /*display:inline;*/ /*20171218*/
  }

.nav li li {
  float:none;
  }


.main-nav  {
  display:flex;
  max-width:auto;
  height:auto;
  overflow:hidden;
  }

.nav a {
  display:block;
  }

.nav ul ul {
  position:absolute;
  }

.nav ul li:hover ul {
  display: block;
  z-index:500;
  }


.nav {
  overflow: visible; /*20171204 */
  /* padding:0; 20171204 */
  /* width:100%; 20171204 */
  /* float:left; 20171204 */
  z-index: 500;
  background-color:#ededed;
  }


.main-nav {
  padding: 0 2rem;
  overflow: hidden;
  margin:0 auto;
  max-width:80em;
  }

.main-nav > li {
  float: left;
  display: inline-block;
  border: none;
  width: auto;
  padding:0;
  }

.main-nav > li > a, .main-nav > li > b {
  padding: 0.7em 1.2rem;
  display: inline-block;
  font-size: 1.8rem;
  }


.sec-level {
  display: none;
  margin: 0 auto;
  padding:0;
  /*width:20%; block unterhalb des hauptmenuepunktes */
  
  }

.main-nav li:hover ul {
  display: block;
  margin:0;
  padding:0;
   }

.main-nav li > a:after {
  }


#nav1 {
  text-align:right;
  }

#nav1 a, 
#nav1 a:link,
#nav1 a:hover,
#nav1 a:visited,
#nav1 a:activate {
  font-size:0.9em;
  
  }



}

@media screen and (min-width: 64em) {

.main-nav {
  }

.main-nav > li {
  }

.main-nav > li > a, .main-nav > li > b {
  }

.main-nav a:link, .main-nav a:visited {
  }

.main-nav a:hover, .main-nav a:focus {
  }

.service-nav {
/*  width: 20%;*/
/*  float:left;*/
/*  box-shadow: none;*/
/*  margin: 1.6em 0 0;*/
/*  padding: 0;*/
  }

.service-nav > li {
/*  width: 100%;*/
/*  float:none;*/
  }

.service-nav > li > a, .service-nav > li > b {
/*  padding: 0.5em 3rem;*/
/*  display: block;*/
  }

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

.service-nav a:hover, .service-nav a:focus, .service-nav a:active {
/*  color: #fff;*/
/*  background-color: #6f6f6e;*/
  }



}


/* ----------------------------------------------------------------------------- *
 *                          Styles für CSS Toggle Menü                           *
 * ----------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------- *
 *                      Toggle-Nav-Styles im Basis-Layout                        *
 * ----------------------------------------------------------------------------- */


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

a.toggle-nav {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  display: inline-block;
  padding: 0.357em;
  font-weight: 300;
  border-radius: 0.2em;
  text-decoration: none;
  cursor: pointer;
  z-index:600;
}

a.toggle-nav:hover {
  background: #003972;
  border: 1px solid #003972;
  color: #fff;
}

a.toggle-nav:link,
a.toggle-nav:visited,
a.toggle-nav:active,
a.toggle-nav:focus {
  background: #fff;
  border: 1px solid #fff;
  color: #fff;
}

@media screen and (min-width: 40em) {
  /* Menü-Link verstecken in großen Viewports */
  a.toggle-nav {
    display: none;
  }
}


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

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


/* ----------------------------------------------------------------------------- *
 *        Beispiel Toggle-Navigation mit :target ohne JS im Basis-Layout    - verstecken der Navigation     *
 * ----------------------------------------------------------------------------- */

#navMain {
  display: none;
}

#navMain:target {
  display: block;
}


#navService {
  display: none;
}

#navService:target {
  display: block;
}

/* ----------------------------------------------------------------------------- *
 *                  Beispiel Toggle-Navigation ab Tablet-Layout                  *
 *                            640px / 16px/em = 40em                             *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 40em) {
  #navMain {
    display: block;
  }

#navService {
  display: block;
  }

  /* Menü-Link verstecken in großen Viewports */
  a.toggle-nav {
    display: none;
  }
}