body {
  background-color: black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: #CCC;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font:  18px Arial, Verdana, Helvetica;
}

li a:hover, .dropdown:hover .dropbtn  {
  background-color: #333;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  /*background-color: black;*/
  background-color: rgba(0, 0, 0, 0.5);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 5;
}

.dropdown-content a {
  color: #CCC;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #333}

.dropdown:hover .dropdown-content {
  display: block;
}

pgrey a {
  text-decoration: none;
  font: italic 2.8vh Arial, Verdana, Helvetica;
  color: #CCC;
}

pblack a {
  text-decoration: none;
  font: italic 2.5vh Arial, Verdana, Helvetica;
  color: black;
}

#spalte_center { 
  width:100%;   
  float:left; 
  text-align: center;
}

#img_container {
  position: relative; 
  width:100%; 
}

.link_container1 {
  position: absolute; 
  left:50%;
  top:60%;
  width:40%; 
  height:40%;
  z-index:2;
}

.link_container2 {
  position: absolute; 
  left:10%;
  top:0%;
  width:35%; 
  height:100%;
  z-index:2;
}

.responsive80 {
  max-width: 80%;
}

.responsive90 {
  max-width: 90%;
}


.centeredunterwegs {
  position: absolute;
  width:70%;
  left:15%;
  top:10%;
}

.leftunterwegs {
  position: absolute;
  width:40%;
  left:10%;
  top:40%;
  text-align: center;
}

.rightunterwegs {
  position: absolute;
  width:40%;
  right:8%;
  top:20%;
  text-align: center;
}

.leftwesen {
  position: absolute;
  width:38%;
  left:0%;
  top:45%;
  text-align: center;
}

.lefterkenntnis {
  position: absolute;
  float:left; 
  width:30%;
  left:8%;
  top:30%;
  text-align: center;
}

.righterkenntnis {
  position: absolute;
  float:left; 
  width:20%;
  right:10%;
  top:15%;
  text-align: center;
}

.centeredfeder {
  position: absolute;
  width:70%;
  left:15%;
  top:35%;
}

.centeredfaden {
  position: absolute;
  width:70%;
  left:15%;
  top:40%;
}

.rightgewaender {
  position: absolute;
  width:30%;
  right:5%;
  top:9%;
  text-align: center;
}

.leftengagement {
  position: absolute;
  width:60%;
  left:8%;
  top:25%;
  text-align: center;
}

.leftleuchten {
  position: absolute;
  width:55%;
  left:6%;
  top:35%;
  text-align: center;
}

.centeredjetzt {
  position: absolute;
  width:70%;
  left:15%;
  top:25%;
}

.righttanzeneuesland {
  position: absolute;
  width:40%;
  left:50%;
  top:30%;
}

.centerzukunft {
  position: absolute;
  width:60%;
  left:20%;
  top:5%;
  text-align: center;
}

.leftzukunft {
  position: absolute;
  width:45%;
  left:4%;
  top:15%;
  text-align: center;
}

.rightzukunft {
  position: absolute;
  width:30%;
  right:10%;
  top:15%;
  text-align: center;
}

.rightgold {
  position: absolute;
  width:40%;
  right:10%;
  top:8%;
  text-align: center;
}

.topleftimpressum {
  position: absolute;
  width:50%;
  left:10%;
  top:5%;
  text-align: center;
}

.bottomleftimpressum {
  position: absolute;
  width:50%;
  left:6%;
  top:62%;
  text-align: center;
}

.toprightimpressum {
  position: absolute;
  width:25%;
  right:17%;
  top:13%;
  text-align: center;
}

.bottomrightimpressum {
  position: absolute;
  width:25%;
  right:8%;
  top:80%;
  text-align: center;
}

.centerimpressum {
  position: absolute;
  width:25%;
  right:30%;
  top:55%;
  text-align: center;
}

pblack          {
  color: black;
  font: italic 2.5vh Arial, Verdana, Helvetica; 
}

pblackbleib     {
  color: black;
  font: italic 2.5vh Arial, Verdana, Helvetica; 
}

pspace{
  font: italic 25px Arial, Verdana, Helvetica; 
}

pred          {
  color: red;
  font: italic 2.5vh Arial, Verdana, Helvetica; 
}

pgrey          {
  color: #CCC;
  font: italic 2.5vh Arial, Verdana, Helvetica; 
}

pwhite          {
  color: white;
  font: italic 2.5vh Arial, Verdana, Helvetica; 
}

em{
  font: italic 2.8vh Arial, Verdana, Helvetica;
}

em1{
  font: italic 1.7vh Arial, Verdana, Helvetica;
}

hgrey  { 
text-align:center; color: #CCC; font: italic 3.5vh Arial, Verdana, Helvetica 
}

hwhite  { 
text-align:center; color: white; font: italic 3.5vh Arial, Verdana, Helvetica 
}

hblack  { 
text-align:center; color: black; font: italic 3.5vh Arial, Verdana, Helvetica 
}

hblackwechsel  { 
text-align:center; color: black; font: italic 3.5vh Arial, Verdana, Helvetica 
}

hred  { 
text-align:center; color: red; font: 3.5vh Arial, Verdana, Helvetica 
}


#footer{ 
margin: 0 auto; /*Auf Seite zentrieren*/
padding-top: 20px;
padding-bottom:20px; 
height:12px;
font-size:1.2vh; line-height:1.2vh; font-weight:bold; text-align:center; 
color: #CCC;
clear: both;
}

#panel {
    position:relative;
    width: 75vw;/*768px;*/
    height: 50vw;/*512px;*/
    text-align: center;
    overflow: hidden;
}

.centeredimg {
  position: absolute;
  top: 80%;
  left: 11.5%;
}

#panel img {
    position: absolute;
    -ms-interpolation-mode:nearest-neighbor;
    image-rendering: optimizeSpeed;
}

/*MEDIA QUERY*/
@media only screen and (max-width : 840px) {
.leftunterwegs {
  position: absolute;
  width:80%;
  left:10%;
  top:100%;
  text-align: center;
}

.rightunterwegs {
  position: absolute;
  width:80%;
  right:10%;
  top:220%;
  text-align: center;
}

.lefterkenntnis {
  position: absolute;
  width:80%;
  left:10%;
  top:100%;
  text-align: center;
}

.centeredfeder {
  width:70%;
  left:15%;
  top:100%;
}

.righterkenntnis {
  position: absolute;
  width:80%;
  right:10%;
  top:250%;
  text-align: center;
}

.rightgewaender {
  position: absolute;
  width:80%;
  right:10%;
  top:100%;
  text-align: center;
}

.centeredjetzt {
  position: absolute;
  width:80%;
  left:10%;
  top:100%;
}

.righttanzeneuesland {
  position: absolute;
  width:80%;
  left:10%;
  top:40%;
}

.centerzukunft {
  position: absolute;
  width:80%;
  left:10%;
  top:100%;
  text-align: center;
}

.leftzukunft {
  position: absolute;
  width:80%;
  left:10%;
  top:125%;
  text-align: center;
}

.rightzukunft {
  position: absolute;
  width:80%;
  right:10%;
  top:215%;
  text-align: center;
}

.rightgold {
  position: absolute;
  width:80%;
  right:10%;
  top:100%;
  text-align: center;
}

.topleftimpressum {
  position: absolute;
  width:80%;
  left:10%;
  top:100%;
  text-align: center;
}

.bottomleftimpressum {
  position: absolute;
  width:80%;
  left:10%;
  top:150%;
  text-align: center;
}

.toprightimpressum {
  position: absolute;
  width:45%;
  right:15%;
  top:13%;
  text-align: center;
}

.bottomrightimpressum {
  position: absolute;
  width:80%;
  right:10%;
  top:280%;
  text-align: center;
}

.centerimpressum {
  position: absolute;
  width:80%;
  right:10%;
  top:250%;
  text-align: center;
}


pblack          {
  color: #CCC;
  font: italic 2.5vh Arial, Verdana, Helvetica; 
}

hblackwechsel  { 
text-align:center; color: #CCC; font: italic 3.5vh Arial, Verdana, Helvetica 
}

pblack a {
  text-decoration: none;
  font: italic 2.5vh Arial, Verdana, Helvetica;
  color: #CCC;
}

#footer{ 
clear: both;
  position: absolute;
top:210%;
left: 40%;
}
}