html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  user-select: none;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  /*background-color: #EEE;*/
}


#loading {
  top: 0;
  left: 300px;
  width: calc(100% - 300px - 380px);
  height: 100%;
  position: absolute;
  text-align: center;
  background-color: rgba(0,0,0,0.7);
}
#loading img:first-of-type {
  margin-top: 100px;
  opacity: 0.7;
}
#loading img:last-of-type {
  margin-top: 60px;
  opacity: 0.3;
}

#map {
  width: 100%; 
  height: 100%;
}

#menue_left, #menue_right {
  position: fixed;
  top: 0;
  height: 100%;
  text-align: center;
  color: #DDD;
  background-color: rgba(0,0,0,0.7);
  box-shadow: 0px 0px 24px 6px rgba(0,0,0,0.37);
}
#menue_left {
  left: 0;
  width: 300px;
}
#menue_right { 
  right: 0;
  width: 380px;
}

#menue_left>div, #menue_right>div {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  padding-top: 0;
  margin-right: 6px;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #333;
}
#menue_left>div::-webkit-scrollbar, #menue_right>div::-webkit-scrollbar {
  width: 4px;
}
#menue_left>div::-webkit-scrollbar-thumb, #menue_right>div::-webkit-scrollbar-thumb  {
  background-color: #333;
  border-radius: 5px;
}

#menue_right>div {
  margin-top: 115px;
  height: calc(100% - 139px); /* 115 + 12 + 12 padding */
}
#menue_left>div {
  margin-top: 115px;
  height: calc(100% - 139px); /* 115 + 12 + 12 padding */
}


#logo_right_white, #logo_left_white {
  position: absolute;
  left: calc(50% - 70px);
}
#logo_right_white {
  bottom: 12px;
  display: none;
}
#logo_left_white {
  top: 12px;
}
#logo_right_white>img, #logo_left_white>img {
  opacity: 0.7;
}



#choose_language {
  position: absolute;
  right: 12px;
  top: 12px;
}
#choose_language a {
  opacity: 0.7;
  border: 1.5px solid white;
  font-size: 0.9em;
  border-radius: 4px;
  padding: 4px;
  color: white;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  background-color: rgba(0,0,0,0.2);
  text-decoration: none;
  padding: 3px 6px;
}
#choose_language a:hover {
  opacity: 1;
  background-color: rgba(0,0,0,0.3);
}
#choose_language a img {
  height: 10px;
}

#compass {
  position: absolute;
  left: 10px;
  top: 24px;
  opacity: 0.8;
}
#compass>img {
  width: 40px;
  height: 40px;
}

#control_buttons {
  position: absolute;
  right: 12px;
  top: 45px;
}

.control_button {
  opacity: 0.7;
  border: 1.5px solid white;
  border-radius: 4px;
  padding: 4px;
  color: white;
  font-size: 1.4em;
  display: inline-block;
  text-align: center;
  width: 22px;
  cursor: pointer;
  background-color: rgba(0,0,0,0.2);
}
.control_button:hover {
  opacity: 1;
  background-color: rgba(0,0,0,0.3);
}
.control_button_margin {
  margin-right: 5px;
}


#control_buttons_divider {
  position: absolute;
  top: 85px;
  width: calc(100% - 24px);
  border: none;
  background-color: #AAA;
  height: 1px;
}



#logo_right_divider {
  /*
  position: absolute;
  top: 85px;
  
  border: none;
  background-color: #AAA;
  height: 1px;
  */
  width: calc(100% - 24px);
  border: none;
  background-color: #AAA;
  height: 1px;
  margin-bottom: 9px;
}



#logo_right_white {
  position: absolute;
  width: 100%;
  right: 0;
  left: 0;
  bottom: 12px;
  display: none;
  text-align: center;
}


table.legend {
  font-size: 0.8em;
  text-align: left;
  width: 100%;
}
table.legend td {
  padding-left: 10px;
  padding-right: 10px;
}
table.legend td:first-of-type {
  text-align: right;
}
table.legend th {
  text-align: center;
  font-size: 1.1em;
  background-color: #333;
  padding: 5px;
}
table.legend img {
  width: 65px;
}

#menue_right table.legend {
  display: none;
}



#content {
  user-select: text;
}
#content h1 {
  font-size: 1.2em;
}
#content p {
  font-size: 0.9em;
}
#content p a {
  color: inherit;
}
#content p a:after {
  position: relative;
  display: inline-block;
  font-family: 'Font Awesome 5 Free';
  color: inherit;
  content: " \f35d";
  font-weight: 900;
  font-size: 0.6em;
  margin-left: 2px;
  margin-right: 2px;
  top: -2px;
}



.c_images {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.c_images>div {
  position: relative;
  width: calc(50% - 6px);
  max-width: 180px;
  margin: 3px;
  height: auto;
}
.c_images>div.c_single {
  width: calc(100% - 6px);
  max-width: 360px;
}
.c_images>div>div {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
}
.c_images>div>div>a {
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
  color: white;
  cursor: pointer;
}
.c_images>div>a {
  position: relative;
  display: block;
  top: 0; left: 0;
  width: 100%;
  padding-top: 75%;
}
.c_images>div>a>img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
  cursor: zoom-in;
}


.c_image {
  position: relative;
  font-size: 0.8em;
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
  width: calc(100% - 6px);
  max-width: 360px;
  padding-bottom: 3px;
  margin: auto;
}
.c_image>div>a>img {
  width: 100%;
  border-radius: 3px 3px 0 0;
  cursor: zoom-in;
}
.c_image>a {
  color: white;
  font-size: 0.7em;
}
.c_image>div>div {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
}
.c_image>div>div>a {
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
  color: white;
  cursor: pointer;
}


.c_trail_details {
  font-size: 0.9em;
  width: calc(100% - 6px);
  max-width: 250px;
  margin: auto;
  margin-bottom: 18px;
}
.c_trail_details table {
  width: 100%;
  border-collapse: collapse;
}
.c_trail_details table td {
  border: 1px solid #888;
  padding: 5px 10px;
}
.c_trail_details table td:first-of-type {
  text-align: right;
}
.c_trail_details table td:last-of-type {
  text-align: left;
}
.c_trail_details .very_easy {
  color: lightgreen;
}
.c_trail_details .easy {
  color: lightskyblue;
}
.c_trail_details .moderate {
  color: lightcoral;
}
.c_trail_details .difficult {
  color: lightgrey;
}
.c_trail_details .red_trail_number, .c_trail_details .yellow_trail_number {
  display: inline-block;
  padding: 0 10px;
  font-size: 1em;
  color: black;
  font-weight: bold;
  font-family: monospace;
}
.c_trail_details .red_trail_number {
  background: linear-gradient(90deg, lightcoral 0%, lightcoral 20%, white 20.1%, white 79.9%, lightcoral 80%, lightcoral 100%);
}
.c_trail_details .yellow_trail_number {
  background: linear-gradient(90deg, khaki 0%, khaki 20%, white 20.1%, white 79.9%, khaki 80%, khaki 100%);
}








@media only screen and (max-width: 1740px) {
  #menue_left {
    left: 0;
    width: 250px;
  }
  #menue_right { 
    right: 0;
    width: 330px;
  }
  #menue_right>div {
    margin-top: 105px;
    height: calc(100% - 129px); /* 105 + 12 + 12 padding */
  }
  #loading {
    left: 250px;
    width: calc(100% - 250px - 330px);
  }
  #compass>img {
    width: 35px;
    height: 35px;
  }
  .control_button {
    font-size: 1.1em;
    width: 18px;
  }
  #choose_language a {
    font-size: 0.78em;
  }
  #choose_language a img {
    height: 9px;
  }
  #compass {
    top: 22px;
  }
  #control_buttons {
    top: 42px;
  }
  #control_buttons_divider {
    top: 75px;
  }
}


@media only screen and (max-width: 1530px) {
  #menue_left {
    display: none;
  }
  #menue_right { 
    right: 0;
    width: 300px;
  }
  #menue_right>div {
    margin-top: 95px;
    height: calc(100% - 222px); /* 95 + 12 padding + 115 logo unten */
  }
  #loading {
    left: 0;
    width: calc(100% - 300px);
  }
  #compass>img {
    width: 32px;
    height: 32px;
  }
  .control_button {
    font-size: 0.9em;
    width: 14px;
  }
  #logo_right_white {
    display: block;
  }
  #menue_right table.legend {
    display: table;
  }
  #choose_language a {
    font-size: 0.7em;
  }
  #choose_language a img {
    height: 8px;
  }
  #compass {
    top: 20px;
  }
  #control_buttons {
    top: 39px;
  }
  #control_buttons_divider {
    top: 68px;
  }
  #content {
    margin-bottom: 50px;
  }
}



@media only screen and (max-height: 700px) and (max-width: 1530px) {
  #logo_right_white {
    display: inline-block;
    position: static;
    margin-top: 25px;
  }
  #menue_right>div {
    height: calc(100% - 117px); /* 92 + 12 + 12 padding */
  }
}


@media only screen and (max-width: 700px) {
  #menue_right {
    position: relative;
    width: 100%;
    height: auto;
    background-position-x: 1px; /* Dient nur dazu, um in Javascript abzufragen, ob es sich um diese Darstellung handelt oder nicht */
  }
  #menue_right>div {
    margin-top: 0;
    padding-top: 115px;
    height: auto;
  }
  #loading {
    left: 0;
    width: 100%;
  }
  #compass>img {
    width: 40px;
    height: 40px;
  }
  .control_button {
    font-size: 1.4em;
    width: 22px;
  }
  #logo_right_white {
    display: inline-block;
    position: static;
    margin-top: 25px;
  }
  /*
  #menue_right>div>hr {
    display: block;
  }
  */
  #choose_language a {
    font-size: 1em;
  }
  #choose_language a img {
    height: 10px;
  }
  #compass {
    top: 12px;
  }
  #control_buttons {
    top: 45px;
  }
  #control_buttons_divider {
    top: 85px;
  }
  #content {
    margin-bottom: 50px;
  }
}

.menue_right_down {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
}
.menue_right_down>div {
  margin-top: 0 !important;
  padding-top: 115px !important;
  height: auto !important;
}
.menue_right_down #compass>img {
  width: 40px !important;
  height: 40px !important;
}
.menue_right_down .control_button {
  font-size: 1.4em !important;
  width: 22px !important;
}
.menue_right_down #logo_right_white {
  display: inline-block !important;
  position: static !important;
  margin-top: 25px !important;
}
/*
.menue_right_down>div>hr {
  display: block !important;
}
*/
.menue_right_down #choose_language a {
  font-size: 1em !important;
}
.menue_right_down #choose_language a img {
  height: 10px !important;
}
.menue_right_down #compass {
  top: 12px !important;
}
.menue_right_down #control_buttons {
  top: 45px !important;
}
.menue_right_down #control_buttons_divider {
  top: 85px !important;
}
.menue_right_down #content {
  margin-bottom: 50px !important;
}




@media only screen and (max-width: 400px) {
  #choose_language a {
    font-size: 0.78em;
  }
  #choose_language a img {
    height: 9px;
  }
  #control_buttons {
    top: 41px;
  }
  #control_buttons_divider {
    top: 80px;
  }
}

@media only screen and (max-width: 370px) {
  #compass {
    display: none;
  }
}


@media only screen and (max-width: 320px) {
  .control_button {
    font-size: 1.1em;
    width: 18px;
  }
  #choose_language a {
    font-size: 0.7em;
  }
  #choose_language a img {
    height: 8px;
  }
  #control_buttons {
    top: 39px;
  }
  #control_buttons_divider {
    top: 72px;
  }
}

@media only screen and (max-width: 285px) {
  .control_button {
    font-size: 0.9em;
    width: 14px;
  }
  #choose_language a {
    font-size: 0.6em;
  }
  #choose_language a img {
    height: 7px;
  }
  #control_buttons {
    top: 38px;
  }
  #control_buttons_divider {
    top: 65px;
  }
}