#w0 {
    margin:0;
}

#legende {
    margin: 1em;
    padding: 0.5em;
    background-color: rgb(237, 237, 233);
    border-radius:1em;
    height: 9em;
    width: 45em;
}

.spalte {
  float:left;
  padding:0.5em;
  margin:0.5em;
}

.h2 {
    font-weight: bold;
}

  #mypopup {
    top: 0px; 
    left: 0px; 
    display:none;
    size:smaller;
  }

.close {
  text-align: right; 
  color:rgb(22, 22, 22); 
  size: 9pt; 
  width: 260px;
}  
#closer {
   cursor: pointer; 
   margin-right:1em;
}
  
.tooltiptext {
  /*  visibility: hidden; */
    width: 280px;
/*    height: 240px;  */
/*    overflow: auto; */
    background-color: white;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 50000;
  /*  bottom: 150%; */
    margin-left: -140px; 
  
    margin-top:6px;
    border: solid grey 1px;
}
    

.tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; 
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }
/*
  .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;   At the top of the tooltip 
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
  }
  */