html, body {
  width: 100%;
  height: 100%;
/*  background-color: #00F5FF ;
 background: url("../wald.jpg") no-repeat center center;
  background-size: contain;  /* passt sich an die Größe des Elements an in dem es drin ist  */
}

body {
  margin: 0;

}

* {
  box-sizing: border-box;
}

ul {
  list-style-type:square;
    font-size: 21px;
}

.header-nav {
  width: 100%;
  height: 60px;
  background-color: #3D3F45;
  font-weight: bold;
  position:relative;
  font-size: 1.1rem;

}
.header-nav a > img {
  height: 50px;
  width: auto;
  float:left;

}

.header-nav ul {
  padding: 0;
  margin: 0;
  float: right;

  height: 100%;
}

.header-nav ul > li {
    display: inline-block;
    height: : 100%;
    padding: 0 .4rem 0 .4rem;
    margin: 0;
  }

.header-nav ul > li > a {

   margin-top: .8rem;
   margin-bottom: .8rem;
    display: inline-block;
}

.header-nav ul > li > a:link{
  color: #FFF;
  text-decoration: none;

}
.header-nav ul > li > a:hover{
  color: #E5E5E5;
  text-decoration: none;
}
.header-nav ul > li > a:active{
  color: #FFF;
  text-decoration: none;

}
.header-nav ul > li > a:visited{
  color: #E5E5E5;
  text-decoration: none;
}

header-nav .col-6 {
  padding-top: 0;
  padding-bottom: 0;
}



.active {
  background-color: #A62C21;
}

.header-banner {
  width: 100%;
  height: 0;                /*   */
  padding-top: 16.06% ;      /*31.35%  padding top in % höhe des Elements in abhängigkeit der breite    */
  background: url("../titel_china.jpg") no-repeat center center;
  background-size: contain;  /* passt sich an die Größe des Elements an in dem es drin ist  */
}
 /*
1920px * 400px  (Hintergrundbild)
400 / 1920 *100 = 20.83%
    */

/*.border, .border * {
  border: 1px solid #91C4;
}
*/
[class*="col-"] {
  /*background-color: #BFDDFF;*/
}
/*
img {
  float: left;


padding: 10px 10px 10px 10px;
border-radius: 10px;
  opacity:1;
}
*/





/*
figure {

  text-align: center;
}

figcaption {
  display: inline-block;
  text-align: left;
}
*/

.width {
  width: 95%;
  height: auto;




}
.height {

  width: 30%;
    height: auto;

}
#test01 {


  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}



.thumb {

	object-fit: contain;
	width:auto;
	height:100%;

}
p {

  padding: 0;
  margin:0;
  font-size: 21px;
  text-align: justify;
  width: 95%;

}
h1,h2,h3,h4,h5,h6 {
  text-align: center;
}


/* ===Grid System ===  */

.container {
  width: 95%;
  height: 95%;
  margin-left: auto;     /* margin-left: auto margin-right auto zentriert container */
  margin-right: auto;
}



.row::after {
  content: "";
  clear: both;
  display: block;
}



[class*='col-'] {   /*wählt alle Colums aus (alle Cassen die "col-" beinhalten im Namen)*/
  float: left;
  min-height: 1px;

  padding: .8rem;

}

.col-1 {
  width: 16.666%;    /*100/6Colums = 16.666*/
}

.col-2 {
  width: 33.333%;
}

.col-3 {
  width:50%;
  padding: 4rem;
}
.col-6 {
  width: 100%;
}

/*   */

@media (max-width: 1024px) {
  .col-1 {
    width: 33.333%;
  }
}

@media (max-width: 900px) {
  .col-1 {width: 50%;}
  .col-2 {width: 100%;}
  .col-3 {width: 100%;}
  .hidden {
    visibility: collapse;
  }
}

@media (max-width: 480px) {
  p{
    font-size: 16px;
    width: 100%;
    padding:0;
    margin:0px;
  }
  li, ul{
    font-size: 16px;
  }

  .col-1 {width: 100%;}
  .col-2 {width: 100%;}
  .col-3 {width: 100%;
          padding:0rem;
          margin:0px;
        }
  .hidden {
    visibility: collapse;
  }
  .header-banner {
    width: 100%;
    height: 0;                /*   */
    padding-top: 46.77% ;      /*31.35%  padding top in % höhe des Elements in abhängigkeit der breite    */
    background: url("../titel_klein.jpg") no-repeat center center;
    background-size: contain;  /* passt sich an die Größe des Elements an in dem es drin ist  */
  }



}



/*
MODAL Box für Bilder

https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
*/
.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div  {
	width:auto;
  max-width: 95%;
  height:95%;
  max-height: 95%;

	position: relative;
	margin: 10% auto;
  background: #fff;

  opacity:1;
background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);

}

.details {
	position: absolute;
	right: 10%;
	top: 10%;
	background-color: #F1F3F4;
	border: 0.1em solid #3983ab;
	border-radius: 0 8px 8px;
	padding: 1em 1em .2em;
	width: 80%;
	max-height: 30%;
	overflow: auto;
	display: none;
}

.details img {
	width: 90%;
}

.details:target {
	display: block;
}



.close {
	background: #606061;
	color: #FFFFFF;
  line-height: 0px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }


/* FOOTER

*/

#footer {

  background-color: #3D3F45;
width:100%;
margin: 0;
padding:0;
font-weight: bold;
position:relative;
  color:#FFF;


}
/*
.close {
	width:0;
	heigh:0;
	border: 0;
	text-shadow: none;
	color: transparent;
}
.close:after {
   position: absolute;
   top: 1em;
   right: 1em;
   content:"X";
   color: white;
   background: #c32e04;
   font: font: bold 1em/150% Georgia, Times, serif;
   border: 0.1em solid #3983ab;
   border-radius: 0 8px 8px;
   display: block;
   text-align:center;
   width: 1.5em;
   height:1.5em; padding:0.2em 0 0 0em;
  }
}
*/