html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#map,
.gpx-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}


.map { height: 100vh }
#map1 {
  width: 100%;
  height: 100vh; 
  flex: 1; min-height: 200px;/* volle Bildschirmhöhe */
}

			footer { border-top: thin solid currentColor; padding-top: .5em; margin-top: .5em; }
			@media screen and (min-width:40em) {
				main {
					display: grid;
					gap: 1em;
					grid-template-columns: 0.618fr 1fr;
				}
			}


#map {
  width: 100%;      /* passt sich an den Bildschirm an */
  max-width: 100%;  /* verhindert Überlaufen */
  height: 800px;    /* feste Höhe bleibt */
   flex: 1; min-height: 200px;/* volle Bildschirmhöhe */
}