:root {
  --backgroundcolor: #ffffff;
  --contentbackgroundcolor: #ffffff;
  --color: #000000;
  --linkcolor: #669900;
  --highlightcolor: #669900;
  --inversecolor: #ffffff;
  --inversebackgroundcolor: #333333;

  --hnavulbackgroundcolor: #333333;
  --hnavliacolor: #ffffff;
  --hnaviconbarbackgroundcolor: #333333;
  --hnavliahoverbackgroundcolor: #444444;
  --hnavactivebackgroundcolor: #333333

  --vnavbackgroundcolor: #ffffff; 
  --vnavcolor: #000000; 
  --vnavliacolor: #000000; 
  --vnavliahoverbackgroundcolor: #88bb00;
  --vnavliahovercolor: #000000; 
  --vnavactivebackgroundcolor: #ffffff; 
  --vnavactivebordercolor: #669900; 
  
  --footerbackgroundcolor: #669933;
  --footercolor: #ffffff;
  --footeracolor: #ffff99;
  
  --cardbackgroundcolor: #ffffff;
  --accordionbackgroundcolor: #eeeeee;
  --accordionbordercolor: #dddddd;
}
.vnav.responsive {
    --vnavresponsivebackgroundcolor: #ffffff;
    --vnavresponsivebordercolor: #cccccc;
}

@media (prefers-color-scheme: dark) 
{
  :root {  
    --backgroundcolor: #222222;
    --contentbackgroundcolor: #222222;
    --color: #bbbbbb;
    --linkcolor: #99cc00;
    --highlightcolor: #99cc00;
    --inversecolor: #cccccc;
    --inversebackgroundcolor: #333333;
    
    --hnavulbackgroundcolor: #222222;
    --hnavliacolor: #ffffff;
    --hnaviconbarbackgroundcolor: #222222;
    --hnavliahoverbackgroundcolor: #333333;
    --hnavactivebackgroundcolor: #222222
    
    --vnavbackgroundcolor: #222222; 
    --vnavcolor: #aaaaaa; 
    --vnavliacolor: #aaaaaa; 
    --vnavliahoverbackgroundcolor: #333333;
    --vnavliahovercolor: #99cc00; 
    --vnavactivebackgroundcolor: #333333;  
    --vnavactivebordercolor: #669900; 
    
    --footerbackgroundcolor: #000000;
    --footercolor: #cccccc;
    --footeracolor: #669900;

    --cardbackgroundcolor: #333333;
    --accordionbackgroundcolor: #333333;
    --accordionbordercolor: #666666;
  }
  .vnav.responsive {
    --vnavresponsivebackgroundcolor: #222222;
    --vnavresponsivebordercolor: #444444;
}
} 

body, html {
  margin: 0;
  padding: 0;
  font-size: 1.16em;
  font-family: Arial, Verdana;
  background-color: var(--backgroundcolor);
}
* {  box-sizing: border-box;}

.highlightcolor{
  color: var(--highlightcolor);  
}
.inversecolor{
  color: var(--inversecolor);  
}
.inversebg{
  background-color: var(--inversebackgroundcolor);  
}

.bgparallax1 {
  background-image: filter: opacity(10%);

  /* Full height */
  height:100%; 
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

a {
  color: var( --linkcolor);
  text-decoration: none;
}

.image {
    width: 100%;
    height: auto;
    padding: 0.5em;
}


.header{
  display: flex;
  margin: 0px;
  height: 6em;
  background-color: #446600;
}
.headertext {
  text-align: center;
  position: absolute;
  /*top: 2.5em;
  left: 1em;*/
  width: 100%;
  top: 2.5em;
  left: 50%;
  transform: translate(-50%, 0%);
  font-weight: bold;
  color: white;
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}
.card {
  border-radius: 5px;
  box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.2);
  background-color: var(--cardbackgroundcolor);
  padding: 8px;
  margin-right: 10px;
}


.hnav{
  box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);
  margin: 0;
  padding: 0;
  font-size: 0.9em; 
  font-weight: bold;
  background-color: var(--hnavulbackgroundcolor);
  border-top : 2px solid var(--hnavulbackgroundcolor);
  border-bottom : 2px solid var(--hnavulbackgroundcolor);
  position: sticky;
  position: -webkit-sticky; 
  top: 0;
  z-index:2;
}

.hnav img {
    height: 1.3em;
    }
    
.hnav ul {
  list-style-type: none;
  border:0px;
  margin: 0;
  padding: 0.1em;
  overflow: hidden;
  background-color: var(--hnavulbackgroundcolor);
}

.hnav li {
  float: left;   
  background-color: var(--vnavbackgroundcolor);
}

.hnav li a {
  display: block;
  color: var(--hnavliacolor);
  background-color: var(--vnavbackgroundcolor);
  text-align: center;
  padding: 0.3em 0.1em 0.2em 0.1em ;
  text-decoration: none;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: '';
}

.hnav .navicon {
  display: none;
}

.hnav li a:hover {
  background-color: var(--hnavliahoverbackgroundcolor);
}

.active {
  background-color: var(--hnavactivebackgroundcolor);
}

.vnav{
  width: 11em;  
  float: left; 
  background-color: var(--vnavbackgroundcolor);
  color: var(--vnavcolor);
  margin: 0;
  padding: 0;
  display: block;
  position: sticky;
  position: -webkit-sticky; 
  top: 2.3em;
  z-index:1;
}

.vnav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
  background-color: var(--vnavbackgroundcolor);
}

.vnav li a {
  display: block;
  color: var(--vnavliacolor);
  background-color: var(--vnavbackgroundcolor);
  padding: 0.3em 0.3em;
  text-decoration: none;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

.vnav li a:hover {
  background-color: var(--vnavliahoverbackgroundcolor);
  color: var(--vnavliahovercolor);
}
.vnavactive {
  background-color: var(--vnavactivebackgroundcolor);
  border-top : 1px solid var(--vnavactivebordercolor);
  border-bottom : 1px solid var(--vnavactivebordercolor);
}

.contentframe{
  background-color: var(--contentbackgroundcolor);
  color: var(--color);
  margin-left: 11em; 
  padding: 0em;
}

.content2{
  margin-left: 0em;
  padding: 0.5em;
}

.content1{
  margin-left: 0em; 
  padding: 0.5em;
}

.contentImgWide{
  margin: 0em; 
  padding: 0em;
}
.contentImgHigh{
  padding: 0em;
  width: 50%;
  margin-left: 24%;
}

.footer{
  background-color: var(--footerbackgroundcolor);
  color:  var(--footercolor);
  margin: 0;
  padding: 0.5em;
  font-size: 0.8em;
}

.footer a {
  color: var(--footeracolor);
  text-decoration: none;
}

@media only screen and (max-width: 100000px) 
{
  .content2{
    display: grid;
    grid-template-columns: 49% 49%;
    grid-column-gap: 1.5em;
    height: max-height;
    padding-right: 1em;
  }
  .content1{
    display: grid;
    grid-template-columns:auto;
    grid-column-gap: 1.5em;
    height: max-height;
    padding-right: 1em;
  }
}



@media only screen and (max-width: 1200px)
{  
  .vnav{
    display: none;
  }
  .vnav.responsive {
    display: block;
    float: right; 
    border-bottom: 1px solid var(--vnavresponsivebordercolor);
    border-left: 1px solid var(--vnavresponsivebordercolor);
    border-top: 0px;
    position: fixed;
    top: 2.1em;
    bottom: 0px;
    right:0px;
    overflow: auto;
    background-color: var(--vnavresponsivebackgroundcolor);
    
  } 
  
  .hnav .navicon {
    float: none;
    display: block;
    text-align: left;
    font-size: 0.9em;
  }
  .contentframe{
      margin-left: 0em;
  }
}

@media only screen and (max-width: 992px) /*Einspaltig*/
{
  .content2, .content1{
    display: grid;
    grid-template-columns: auto;
    grid-column-gap: 0em;
    padding-right: 0.5em;
    width:100%;
  }
}

@media only screen and (orientation: portrait)
{
  .contentImgHigh{
      width: 100%;
      margin-left: 0%;
  }
}

/* For mobile phones and Tablets */
@media only screen and (max-width: 992px) and (max-device-width : 992px)
{
  .content2{
    display: grid;
    grid-template-columns: auto;
    grid-column-gap: 0em;
  }
}

@media only screen and (max-width: 992px) and (max-device-width : 992px) and (orientation: portrait)
{
  .content2{
    display: relative;
  }
  .contentImgHigh{
      width: 100%;
      margin-left: 0%;
  }
}



/*responsive image grid*/
.imgrow {
  display: flex;
  flex-wrap: wrap;
  padding: 0 1px;
}
.imgcolumn {
  flex: 25%;
  max-width: 25%;
  padding: 0 1px;
}
.imgcolumn img {
  margin-top: 1px;
  margin-bottom: 1px;
  vertical-align: middle;
  width: 100%;
}
@media screen and (max-width: 992px) {
  .imgcolumn {
    flex: 50%;
    max-width: 50%;
  }
}
@media screen and (max-width: 600px) {
  .imgcolumn {
    flex: 100%;
    max-width: 100%;
  }
}
/*responsive image grid*/