.topnav {
  position: sticky;
  top: 0;
  overflow: hidden;
  background-color: #ccddee;
  z-index: 2;
  /*position: relative;*/
  
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  
  display: none;
}

.topnav a {
  background-color: #ccddee;
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
}


/* Add a grey background color on mouse-over */
.topnav a:hover {
  
  background-color: #ccddee;
  color: azure;
}

/* Style the active link (or home/logo) */
.active {
 
  background-color: #ccddee;
  color: #ccddee;
  font-size: 25px;
  vertical-align: middle;
  border: 10px solid #ccddee;
}

.alle {
  
  background-color: #ccddee;
  float: left;
  font-size: 25px;
  vertical-align: middle;
  border: 10px solid #ccddee;
}

.topnav .icon {
  
  display: none;
}

 .illustration2 {
  
  max-width: 100%;
  max-height:100%;
  
  /*max-height: var(--image-max-width);*/
  
  
  border-right: #ccddee 200px solid;
  border-left: #ccddee 100px solid;
 
  }
 .illustration3 {
  
  max-width: 100%;
  max-height:100%;
  
  /*max-height: var(--image-max-width);*/
  
  
  border-right: #feebea 10px solid;
  border-left: #feebea 10px solid;
  border-top: #feebea 10px solid;
  border-bottom: #feebea 10px solid;
  }

@media screen and (max-width: 600px) {
 
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    
    
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  /* .topnav.responsive {position: sticky;}*/
  .topnav.responsive {position: sticky;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
    border-right: green 0px solid;
  border-left: green 0px solid;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    
  }
  .illustration2 {
  max-width: 100%;
  max-height:100%;
  
  /*max-height: var(--image-max-width);*/
  
  
  border-right: green 0px solid;
  border-left: green 0px solid;
 
  }
  
  .alle {
  
  background-color: white;
  float: left;
  font-size: 15px;
  vertical-align: middle;
  border: 0px solid white;
  display:none;
  
}
  .pstandard {
    color: black;
    text-align: left;
    font-size: 14px;
    /*font-size: 0.9vw;*/
    margin-left: 0.7em;
    margin-right: 0.7em;
}
  h1 {
    font-size: 20px;
    
  }
  h2{
    margin-left:0.7em;
    font-size: 20px;
    
  }
  header {
  font-size: 18px;
  }
  
  
  .ersterArtikellinks {
float: left;
background: azure;
/*width: 250px;*/
width: 100%;
padding: 0px;
height: 100%;


}

.ersterArtikelrechts {	
float: left;
background: azure;
/*width: 630px;*/
width: 100%;    
padding: 0px;
height: 100%;

}
  .active {
 
  background-color: #ccddee;
  color: #ccddee;
  font-size: 18px;
  vertical-align: middle;
  border: 10px solid #ccddee;
    
}
  
 
}