body {
background: #f2f5f7;
font-family: sans-serif;
width: 100%;
margin: 0;
padding: 1em;
z-index: 1;
}

* {
box-sizing: border-box;
}

h1, h3, p {margin-top: 0px;
}

div#header { order: 1; }

div#header h1 {
display: inline-block;
}

div#key {
width: 100%;
position: fixed;
right: 0;
top: 0;
background: #f2f5f7;
border: 1px solid white;
}

div.config { 
order: 2;
width: 18em;
background: #f7f5f2;
border: 1px solid #aaa;
margin: 1em;
padding: 1em;
z-index: 10; }

div.config form div {
display : inline-block;
}
div#tagSection { 
display: flex; 
flex-direction: column; 
width: 100%;
position: relative;
width: 20em;
z-index: 1;
}
div#tagsHeader { order: 3; }
div#tagsDestination { order: 4; }
div#tagsOther { order: 5; }

div#tagsOther, div#tagsDestination {
display: block;
width: 100%;
position: relative;
margin-bottom: 1em;
}
  

div#container {
padding-top: 0.5em;
position: absolute;
z-index: 20;
left: 26em;
}

.simplepage #map {
position: fixed;
top: 2em;
right: 1em;
width: 18em;
border: 1px solid white;
z-index: 10;
box-shadow: 3px 3px 3px #aaa;
}

.mappage #map {
position: fixed;
left: 30em;
top: 0px;
bottom: 0px;
right: 0px;
background: #eee;
z-index: 0;
}

.showhide {
}

/* Responsive Design */
@media (max-width: 50em) {
  div#tagSection { width: 100%; }
  
  div#header {
  position: relative; /* Ändern Sie die Position, um es unter dem Header zu platzieren */
  width: 100%; /* Vollständige Breite auf kleinen Bildschirmen */
  order: 1; 
  }
  
  .simplepage #map,
  .mappage #map, div#map {
  position: relative; /* Ändern Sie die Position, um es unter dem Header zu platzieren */
  top: 0; /* Setzen Sie den oberen Abstand auf 0 */
  right: 0; /* Setzen Sie den rechten Abstand auf 0 */
  width: 90%; /* Vollständige Breite auf kleinen Bildschirmen */
  margin-top: 1em; /* Abstand zum Header */
  left: 1em;
  height:30em;
  max-height: 80vh;
  order: 3; 
  }
  
  div#container {
  padding-top: 0em;
  position: relative;
  z-index: 0;
  left: 0;
  width: 90%;
  order: 4; 
  }
  
  div#tagsHeader { order: 5; }
  div#tagsDestination { order: 6; }
  div#tagsOther { order: 7; }
  
  div#tagsOther, div#tagsDestination {
  display: block;
  width: 100%;
  position: relative;
  column-count: 2;
  column-gap: 1em;
  word-wrap: break-word;
  }
  
  div.config {
  width: 90%;
  order: 2; 
  }
}

@media (max-width: 30em) {
  div#tagsOther, div#tagsDestination {
  column-count: 1;
  }
}

/* Touchscreen */
@media (pointer: coarse) {
  .leaflet-interactive {
    stroke-width: 8;
  }
}