@charset "UTF-8";
@import url('normalize.css');
@import url('fontawesome-all.css');
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Montserrat');
/* --------------------------------------------------
        Allgemeine Grundeinstellungen                              
 ----------------------------------------------------*/
html {
  box-sizing: border-box;
   font-family: 'Montserrat', Helvetica, Arial, sans-serif;
   font-weight: 300;
}
*, *::before, *::after {
  box-sizing: inherit; 
}
body {
  font-size: 1.25rem;
  line-height: 150%;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inconsolata', Courier, monospace;
}
h1 { 
  font-size: 2.5rem;
  padding-bottom: 0.2em;
  border-bottom: 2px solid black;
}
h2 {
  font-size: 2.0225rem;
  padding-bottom: 0.2em;
  border-bottom: 2px solid black;  
}
h3 { font-size: 1.618rem; }
ul {
  padding: 0;
}
.wrapper {
   background-color: #e1e8f0;
}
/* ------------------------------------------------------------------
     CSS-Eigenschaften für  mobile Geräte (kleiner als 640 px)            
       + Alles in einer Spalte untereinander anordnen                                              
-------------------------------------------------------------------- */
.header {
   text-align: center;
   padding: 1em;
   background-color: #25809e;
   color: white;
}
.aside {
	display: table-cell;
	padding: 0 1em;
}
.container {
   background-color: #fff; /* weiss */
}
.article {
  display: table-cell;
  padding: 0 1em;
}
.article_half {
  padding: 0 1rem 0 1rem;
  clear: both;
}
.footer {
   padding: 1em;
   text-align: center; 
   background-color: #e62739;
   color: white;
   border-top: 1px solid black;
   display: block;
}
.div_footer {
    width: 95%;
    font-size: 1rem;
    padding: 0.2em;
}
.row { clear: both; }
.ul-book {
  padding-left: 2em;
  list-style: none;
}
.h1_no_margin {
  margin-bottom: 0;
  padding-bottom: 0.3em;
}
.p_h1_sub {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 1em;
  color: gray;
}

/* ------------------------------------------------------------------
     Navigation und Weblinks                                             
-------------------------------------------------------------------- */
nav {
	background-color: #1f2527;
	color: white;
	border-bottom: 1px solid black;
}
.nav-ul {
   margin:0;
}
.nav-li {
   list-style: none;
   margin-left: 0;
   border-bottom: 1px solid black;
}
.nav-li-a {
    padding: 0.6em 2rem;
    display: block;
}
.nav-ul a:link {
    text-decoration: none; 
}
.nav-ul a:link, .nav-ul a:visited {
   color: #fff; /* white */
}
.nav-ul a:hover, .nav-ul a:focus, .nav-ul a:active {
   background-color: #677077; /* Black */
   color: #efefef; /* Neutral */
}
.nav-active {
   color: #fff; /* white */
   background-color: #25809e; /* black */
   font-weight: bold;
}
a.footer-nav:link,
a.footer-nav:visited {
    color: #fff;
}
a.footer-nav:hover,
a.footer-nav:focus {
    color: #000;
    transition: all 0.2s ease-out;
}
a.header-nav {
    text-decoration: none;
	color: #0a475c;
}
a.header-nav:link,
a.header-nav:visited {
    color: #0a475c;
}
a.header-nav:hover,
a.header-nav:focus {
    color: #fff;
    transition: all 0.2s ease-out;
}
a.header-nav {
    text-decoration: none;
	color: #000;
}
article a{ 
    text-decoration: none;
	color: blue;
	border-bottom: 1px solid blue;
}
article a:hover{ 
    text-decoration: none;
	color: purple;
	border-bottom: 4px solid purple;
}
#up {
  position: fixed;
  bottom: 80px;
  right: 10px;
  padding: 1em;
  border: darkgrey 2px solid;
  background-color: rgba(225,232,240, 0.8);
  box-shadow: 2px 2px 1px 1px gray;
  text-decoration: none;
  color: black;
  text-align: center;
  display: none;
}
#up:hover, #up:focus {
  bottom: 5.5rem;
  background-color: #25809e;
  transition: all 0.2s ease-out;
}

/* ------------------------------------------------------------------
     Auf- und zuklappbares Menü (Hamburger-Menü)                                            
-------------------------------------------------------------------- */
.menubutton .menu-active { display: none; }
.menubutton {
    padding: 0.6em 2rem;
}
.menubutton a:link {
    text-decoration: none; 
}
#menu:target .menu-inactive { display: none; }
#menu:target .menu-active { display: block; }
nav {
  transition: 0.25s;
  max-height: 0;
  display: none;
}
#menu:target nav {
  max-height: 25rem;
  display: block;
}

/* ------------------------------------------------------------------
     Bilder und img                                            
-------------------------------------------------------------------- */
img {
    max-width: 50%;
    height: auto;
}
img.alignleft {
    float: left;
    margin-right: 15px;
    margin-bottom: 8px;
}
img.alignright {
    float: right;
    margin-left: 15px;
    margin-bottom: 8px;
}
img.fullwidth {
    max-width: 100%;
    height: auto;
}
figure {
    width: 50%;
    text-align: center;
    font-style: italic;
    font-size: smaller;
    text-indent: 0;
    border: thin silver solid;
    margin: 0.5em;
    padding: 0.5em;
}
figure img {
    max-width: 100%;
}
figure.figure_left {
    float: left;
}
figure.figure_right {
    float: right;
}
figure.figure_fullsize {
    width: 100%;
}
img.img_scaled {
    width: 100%;
}
figcaption {
    background-color: lightgray;
}

/* ------------------------------------------------------------------
     Formulare und Schaltflächen                                           
-------------------------------------------------------------------- */
form {
    padding: 10px;
}
input,
textarea {
    border: 1px solid #CCCCCC;
    padding: 0.5rem;
    line-height: 1.3;
    width: 20em;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
    background-color: #EC663A;
}
input[type="submit"] {
    width: 12em;
}
label {
    font-weight: bold;
}
input:required + label::after {
    color: red;
}
textarea:required + label::after {
    color: red;
}


/*-----------------------------------------------------   
     Tabletversion ab 640 Pixel                          
       640px / 16px/em = 40em  
------------------------------------------------------*/
@media screen and (min-width: 40em) {
  .header {
    text-align: center; 
	display: flex;
    flex-direction: row;
	align-items: center;
  }
  .div_header {
      width: 50%;
  }
  .header_left {
	  text-align: left;
  }
  .header_right {
	  text-align: right;
  }
  .container {
    display: block;
    overflow: auto; 
  }
  .nav-ul {
    padding: 0 2rem;
    overflow: hidden;	
  }
  .nav-li {
      float: left;
      display: inline-block;
      border: none;
      width: auto; 
   }
   .nav-li-a {
     padding: 0.7em 1.2rem;
     display: inline-block;
    }
	nav {
	  max-height: 25rem;
	  display: block;
	}
	.menubutton { display: none; }
    .footer {
       padding: 1em;
       text-align: center; 
       background-color: #0a475c;
       color: white;
       border-top: 1px solid black;
       clear: both;
       display: flex;
       flex-direction: row;
       align-items: center;
    }
    .div_footer {
        width: 33.33%;
        font-size: 1rem;
        padding: 0.2em;
    }
	textarea {
      width: 30em;
    }
} 
/*------------------------------------------------------------------
    Bildschirme ab 1024 Pixel                         
      1024px / 16px/em = 64em	
 ------------------------------------------------------------------- */
@media screen and (min-width: 64em) {
	.article_half {
	  display: block;
      width: 50%;
      float:left;
	  clear: none;
	}
}	    
/*------------------------------------------------------------------- 
    Große Bildschirme (>1280 Pixel) 
      1280px / 16px/em = 80em
  -------------------------------------------------------------------- */
@media screen and (min-width: 80em) {
	.wrapper {
		margin: 0 auto;
		max-width: 80em;
	}
}