@font-face {
  font-family: "Plex";
  src: url('IBMPlexSerif-Light.ttf');
}

@font-face {
  font-family: "Plex";
  src: url('IBMPlexSerif-Regular.ttf');
  font-weight: bold;
}

html, body {
   touch-action: auto;
}

div.sheet {   /* auch id=contt */
  font-family: "Plex";
  text-align: center;
  margin-left: auto;
  margin-right: auto;  
}
div#pin_form input {  
  margin-left: 0.2vw;
  margin-right: 0.2vw;
  text-align: center;
  font-family: inherit;
  font-size: inherit;
}

@media (orientation: landscape) {
  div.sheet {   /* auch id=contt */
    max-width: 1024px;
    border: 1px solid lightgreen;
    box-shadow: 0px 0px 32px #999;
    
  }
  div#pin_form {
    font-size: 3vw; /* was 30ex */
    padding: 2ex;  
  }  
  div#pin_form input {  
    width: 5vw;
    height: 4vw;
    border: 2px solid green;
    margin-left: 0.2vw;
    margin-right: 0.2vw;
  }
}

@media (orientation: portrait) {
  div.sheet {   /* auch id=contt */
    width: 100vw;
  }
  div#pin_form {
    font-size: 7vw; /* was 30ex */
    padding: 1vw;  
  }  
  div#pin_form input {  
    width: 8vw;
    height: 10vw;
    border: 1px solid green;
    margin-left: 1.2vw;
    margin-right: 1.2vw;
  }
}

/* Styles für die PIN - Page */
div#pin {
  font-family: "Plex";
  font-size: max(2.8vh, 12pt);
  padding: 0px; 
  z-index: 10;  
  hyphens: auto;
}

div#pin figure {  
  border: 0px solid orange;
  position: relative;
  padding: 0px;
  margin: 0px;  
  /* width: min(100vw, 1024px); */
  width: min(100%, 100vw);
  /* width: 100%; */
  z-index: -1;
  /*background-image: url("../img/60_small.jpg");
  background-size: 100%;
  background-repeat: repeat-y;
  background-attachment: scroll;*/
  opacity: 100%;
  /* height: 100vh; */
  /* height: 100%; *Z
  opacity: 0.8; 
  /* overflow: scroll; */
}

div#pin figure img {  
  position: relative; 
  width: min(100vw, 100%);
}


/* Styles für die Welcome- Page */
div#welcome {
  font-family: "Plex";
  font-size: max(2.8vh, 12pt);
  padding: 0px; 
  z-index: 10;  
  hyphens: auto;
}

div#welcome div#textcontent {
  font-family: inherit;  
  padding: 2ex;
  z-index: 20;
  /* opacity: 20%; */
}

div#welcome div#buttoncontainer {
  /* display: flex; */
}

div#welcome button {
  font-family: inherit;  
  font-size: inherit; 
  background-color: lightgreen;
  margin-left: 0.5ex; margin-right: 0.5ex;
  margin-bottom: 0.4ex;  
  flex: auto; 
}
div#welcome #KarteAnzeigen {
  z-index: 50;
  position: relative;
}

div#welcome h1 {
  font-family: inherit;  
}

div#welcome span.emph {  
  font-weight: bold;
  font-size: 110%;
  margin-bottom: 2ex;
}

div#welcome p {  
  margin-bottom: 2ex; 
}

div#welcome ul {  
  list-style: none;
}

div#welcome li {  
  line-height: 1.35;
}
div#welcome li span {
  position: relative;
}
div#welcome li span.highlight1::before {
  background-color: lightgreen;
  content: "";
  position: absolute;
  width:  8ex; /* calc(20% + 4px);  */
  height: 60%;
  left: -2ex;
  bottom: 0;
  z-index: -1;
  transform: rotate(-2deg);
}

div#welcome figure#bgimage {  
  border: 0px solid orange;
  position: fixed;
  padding: 0px;
  margin: 0px;  
  width: min(100vw, 1024px);
  /* width: 100%; */
  z-index: -1;
  background-image: url("../img/Karte.jpg");
  background-size: 100%;
  background-repeat: repeat-y;
  opacity: 100%;
  height: 100vh;
  opacity: 0.2;  
}

div#welcome h2 {
  font-family: inherit;
}

div#welcome a.gpx {
   font-family: inherit;
   font-size: inherit;
}

div#welcome img.acty {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  text-align: center;
  margin-top: 1ex;
  margin-bottom: 1ex;   
}
div#welcome img.retro {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  text-align: center;
  margin-top: 1ex;
  margin-bottom: 0ex;   
}
div#welcome span.footnote {
  font-size: 50%;  
}

div.alert {
  border: 2px solid green;
  background-color: lightyellow;  
  width: min(40ex, 80vw);
  margin-left: auto;
  margin-right: auto; 
}