@charset "UTF-8";
@import url('normalize.css');
@import url('fontawesome-all.css');
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Montserrat');

/*---------------------------------------------------
  Farben
----------------------------------------------------*/
/*
Farbschema generiert auf 
https://www.webmart.de/web/harmonische-farben/#006600:c:h:g:d 
*/

/* Kontraste: */
.myColor-Camarone{color: #006600;}
.myColor-Snowy-Mint{color: #bfffbf;}
.myColor-Mint-Green{color: #80ff80;}
.myColor-Green { color: #00cc00; } 
.myColor-Japanese Laurel { color: #007a00; } 
.myColor-Hint-of-Green { color: #e6ffe6; }  
.myColor-Screamin-Green { color: #66ff66; }  

.myColor-Red { color: #ff0000; }
.myColor-Red-Berry { color: #990000; }
.myColor-Pippin { color: #ffe6e6; }  
.myColor-Bittersweet { color: #ff6666; }


/* --------------------------------------------------
        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%;
  background: #fff url(../images/img01.jpg) repeat-x;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inconsolata', Courier, monospace;
}
h1 { 
  font-size: 2.5rem;
  line-height: 115%;
  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; 
}

h4{
  margin-top: 40px;
  margin-bottom: 0px;
  text-decoration: underline;
}

ul {
  padding: 0;
}
.wrapper {
   background-color: #e1e8f0;
}

.index_sem_beginn
{
  color: #468e10; 
  /*border: 2px solid #468e10; */
  /*padding: 5px 15px; */
  margin-left: 3rem;

}

/* ------------------------------------------------------------------
     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: #006600; /* #32C185; /* #560802; /* #443a3a;*/  /* #6ed3cf;*/
   color: black;
}

header h1{
  font-size: 2rem;
  color: #fff;
  border-bottom: none;
}
.aside {
	display: table-cell;
  padding: 0.5em 1em;
  margin: 0.2em;
}
.container {
   background-color: #fff; /* weiss */
}
.article {
  display: table-cell;
  padding: 0 1em;
}
.article_half {
  padding: 0 1rem 0 1rem;
  clear: both;
}
.article_half li{
  padding: 0 1rem 0 1rem;
  margin-left: 3rem;
}

.footer {
   padding: 1em;
   text-align: center; 
   background-color: #006600;/* #32c185; /* #ce2a10; /*#e62739;*/
   color:#1f4b36;
   border-top: 1px solid #006600;
   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: #006600 ;
	border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  padding-bottom: 0px;
}

.nav-ul {
   margin:0;
}

.nav-ul li a{
  color: black;
  font-weight: bold;
}

.nav-li {
   list-style: none;
   margin-left: 0;
}

.nav-li-a {
    padding: 0.6em 2rem;
    display: block;
}

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

.nav-ul a:hover, .nav-ul a:focus, .nav-ul a:active{
   background-color:white; 
   
   transition: all 0.2s ease-out;
}

.nav-active{
  background-color:#fff; 
  color: #006600;  
  font-weight: bold;
}

a.footer-nav:link,
a.footer-nav:visited {
    color: #1f4b36;
}
a.footer-nav:hover,
a.footer-nav:focus {
    color: #000;
    transition: all 0.2s ease-out;
}
a.header-nav {
    text-decoration: none;
	color: #000;
}
a.header-nav:link,
a.header-nav:visited {
    color: #000;
}
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:silver;
  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 Grafiken                                            
-------------------------------------------------------------------- */
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, select,
textarea {
    border: 1px solid #CCCCCC;
    padding: 0.1rem;
    margin-left: 0.5rem;
    line-height: 1;
    height: 2rem;
    width: 15rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}

input[type="submit"]:hover,
input[type="submit"]:focus {
    background-color: #32c185;
}
input[type="submit"] {
    width: 12em;
}

input[type="reset"]:hover,
input[type="reset"]:focus {
    background-color: #EC663A;
}

input[type="reset"] {
    width: 12em;
}

#form label{
  font-weight: bold;
  font-size: 1rem;
  margin: 10px 0 30px 0px;
}

/*
#table td{
  width: 7em; 
  height: 1.2em;
  text-align: left;
}
*/
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: #468e10;/* #32c185; /*  #ce2a10; /*#e62739;*/ 
       color: black; /*#1f4b36;*/
       border-top: 1px solid #1f4b36;
       clear: both;
       display: flex;
       flex-direction: row;
       align-items: center;
       
    }

    .div_footer {
        width: 33.33%;
        font-size: 1rem;
        font-weight: bold;
        padding: 0.2em;
    }
	textarea {
      width: 20em;
    }
} 

optgroup {
  background-color: rgb(185, 240, 185);
}



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


/*-------------------------------------------------------------------
  Popup Desktop Ansicht
-------------------------------------------------------------------*/
/** Fenster definieren  **/
#popup2{
  background: #FFF;
  position: fixed;
  width: 500px;
  left: 30px;
  top: 30px;
  color: #006600;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  border-width: 2px;
  border-style: solid;
  border-color: white;
  z-index: 20000;

}

.popuphead{
  color: #ffffff;
  background-color: #006600;
  padding: 20px;
}

.popupbottom{
  background-color: #006600;
  padding: 10px;
  text-align: center;
  border: 2px solid white;
}

.popupbottom a{
  color: #ffffff;
  border-bottom: none;
  text-decoration: none;
  font-size: 18px;
}

.popupbottom a:hover{
  border-bottom: 2px solid #fff;
}

/** Überschrift h2 innerhalb des Popupsmenü **/
#popup2 h2{
  color: #fff;
  font-size: 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  text-align: center;
  border-bottom: none;
}

#popup2 h1{
  color: #006600;
  border-bottom: none;
}

/** definiert den Hintergrund Texte **/
.hintergrund2{
  margin: 20px;
  font-weight: bold;
}

/** den Schliesen - Button definieren **/
#close2{
  position: absolute;
  background: #fff;
  color: #006600;
  right: -10px;
  top: -10px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 25px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  border: 2px solid #006600;
  font-family: 'Arial Black', Arial, sans-serif;
  cursor: pointer;
}

/** Definiert wann das Fenster eingeblendet wird  **/
.einblenden{
  animation-name: einblenden;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

@keyframes einblenden{
  from{transform: translate(0, -900px);}
  50%{transform: translate(0, -900px);}
  85%{transform: translate(0, 50px);}
  to{transform: translate(0, -0px);}
}

/** definiert bei welcher Bildschirmbreite das Fenster ausgeblendet wird  **/
@media (max-width: 559px){
  #popup2{
    display: none;
  }
}

/********************* POPUP MOBILE-Ansicht *********************/
#popup-mobile {
  background:#fff;
  position:fixed;
  width:250px;
  left:10px;
  top:25px;
  color:#000;
  font-size: 18px;
  border-width:1px;
  border-style:solid;
  border-color:white;
  z-index:20000; 
}
.popuphead-mobile {
	color: #ffffff;
	background-color: #006600;
	padding: 10px;
}
.popupbottom-mobile {
	background-color: #006600;
	padding: 7px;
  text-align: center;
}
.popupbottom-mobile a {
  color: #ffffff;
  text-decoration: none;
}

.popupbottom-mobile a:hover {
  text-decoration: whitesmoke;
}

#popup-mobile h1{
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  color: #006600;
  border-bottom: none;
  text-align: center;
}

#popup-mobile h2 {
  color: #fff;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  text-align: center;
  border-bottom: none;
}
#close-mobile{
  position:absolute;
  background:#fff;
  color:#006600;
  right:-10px;
  top:-10px;
  border-radius:50%;
  width:30px;
  height:30px;
  line-height:25px;
  text-align:center;
	border: 2px solid #006600;
  font-size:15px;
  font-weight:bold;
  font-family:'Arial Black', Arial, sans-serif;
  cursor:pointer;
}
.hintergrund2mobile {
  margin:10px;					
  font-weight:bold;									
}


	/** Definiert wann Fenster eingeblendet wird (Bildschirmbreite) **/
@media (min-width: 558px) {
#popup-mobile {
display:none;
}}

/*-----------------------------------------------------------------------
    nach oben rund
------------------------------------------------------------------------*/

.obenkreis {
  font-size:44px;
  color:rgba(0,102,0,0.6);
  }

  .obenpfeil {
  font-size:32px;
  color:#fff;
  position:relative;
  top:3px;
  transition: all 0.2s ease;
  }

  .obenpfeil:hover {
  top:-3px;
  font-size:36px;
  }

  #back-top2{
    position: fixed;
    bottom: 20%;
    left: 61%;
    margin-left: 520px;
    z-index: 1000;
  }

  @media(max-width: 1180px){
    #back-top2{
      bottom: 0;
      left: 100%;
      margin-left: -50px;
    }
  }

  #back-top2 span{
    display: block;
  }