html, body {
  height: 100%;
}

:root {
  --hintergrundfarbe: 250, 250, 250;
  --textfarbe: 87, 87, 87;
  --textfarbe_light: 115, 115, 115;
  --ueberschrift: 87, 87, 87;
  --highlightfarbe: 36, 53, 136;
}
	
body {
  font-family: open-sans, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.4rem;
  line-height: 1.5;
  background-color: rgb(var(--hintergrundfarbe));
  color: rgb(var(--textfarbe_light));
  text-align: left;
  overflow: scroll;
  -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

h1 {
  font-weight: 300;
  font-size: 1.9rem;
  font-style: normal;
  padding-top: calc(8.0vh);
  color: rgb(var(--ueberschrift));
}


h2 {
  font-weight: 300;
  font-style: normal;
  font-size: 1.8rem;
  color: rgb(var(--ueberschrift));

}

h3 {
  font-weight: 300;
  font-style: normal;
  font-size: 1.6rem;
  color: rgb(var(--ueberschrift));
}

@media only screen and (max-width: 1100px) {
  body {
  font-size: 1.1rem;
  }
  h1 {
  font-size: 1.5rem;
  }
  h2 {
  font-size: 1.4rem;
  }
  h3 {
  font-size: 1.4rem;
  }
}


/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

nav {
  top: 0px;
  font-size: 1.0rem;
  font-weight: 300;
  color: rgb(0,0,0);
  background-color: rgb(var(--hintergrundfarbe));
  z-index: 2000;
  width: 100%;
  /* box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px; */
}

.nav-item a:hover,
.nav-link a:hover{
  color: rgb(var(--hintergrundfarbe));
  background-color: rgb(var(--highlightfarbe));
  text-decoration: none;
}

/* Trenn-Element im Menü (ausser im Mobilgeräte-Bereich) */
@media only screen and (min-width: 992px) {
  .navbar .navbar-nav .nav-item .nav-link {
    padding: 0 0.5em;
  }
  .navbar .navbar-nav .nav-item:not(:last-child) .nav-link {
    border-right: 2px solid #ccc;
  }
}

#wrapper {
  position: relative;
  min-height: 100%;
}

#distance_footer_large {
  height: 100px;
}

#distance_footer {
  height: 235px;
}

#footer {
  background-color: rgb(var(--hintergrundfarbe));
  color: rgb(var(--textfarbe));
  font-size: 0.9rem;
  font-weight: 300;
  position: absolute;
  bottom: 0px;
  width: 100%;
  min-height: 100px;
  /* box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px; */
}

@media only screen and (min-width: 1200px) {
#footer {
  position: fixed;
}
}

#footer a {
  color: rgb(var(--highlightfarbe));
  text-decoration: underline;
}

#footer a:hover {
  color: rgb(var(--hintergrundfarbe));
  background-color: rgb(var(--highlightfarbe));
  text-decoration: none;
}

strong {
  font-weight: 700;
  font-style: normal;
}

small {
  font-size: 0.95rem;
}

@media only screen and (max-width: 992px) {
small {
  font-size: 0.75rem;
  }
}

.list_dots {
  list-style: circle;
  padding-left: 20px;
}

a {
  color: rgb(var(--textfarbe_light));
  text-decoration: none;
}

a:hover {
  color: rgb(var(--hintergrundfarbe));
  background-color: rgb(var(--highlightfarbe));
  text-decoration: none;
}

ul {
  text-align: left;
  padding: 0;
  margin: 0;
  margin-left: 60px;
  list-style-position: outside;
  list-style-type: circle;
}

#keymessage1 {
  background-image: url("../pics/keymessage1.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 80px;
}

#keymessage2 {
  background-image: url("../pics/keymessage2.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 80px;
}

.keymessage_1 {
  background-color: rgba(var(--hintergrundfarbe),0.8);
  padding: 5px;
  font-weight: 300;
  font-style: normal;
  font-size: 1.8rem;
  color: rgb(var(--ueberschrift));
}

@media only screen and (max-width: 992px) {
.keymessage_1 {
  font-weight: 700;
  font-size: 1.4rem;
  color: rgb(var(--textfarbe_light));
  }
}

.keymessage_2 {
  background-color: rgba(var(--hintergrundfarbe),0.6);
  padding: 5px;
  font-weight: 300;
  font-style: normal;
  font-size: 1.8rem;
  color: rgb(var(--ueberschrift));
}

@media only screen and (max-width: 992px) {
.keymessage_2 {
  font-weight: 700;
  font-size: 1.4rem;
  color: rgb(var(--textfarbe_light));
  }
}
	
.logo {
  max-width: calc(250px + 20.0vw);
  text-align: center;
}

.logo_footer {
  width: 400px;
}

#welcome_optimaPlusConsult {
  height: 100vh;
}

@media only screen and (min-width: 1200px) {
#welcome_grafik {
  background-color: rgb(135,135,135);
  background-image: url("../pics/welcome1.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
}

#welcome_text {
  background-color: rgb(var(--hintergrundfarbe));
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--textfarbe));
}

@media only screen and (max-width: 1200px) {
#welcome_text {
  background-color: rgb(var(--hintergrundfarbe));
  background-image: url("../pics/welcome2.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-attachment:scroll; 
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
}
}

#map_ro {
  max-height: 400px;
}

#map_ro:hover {
  background-color: rgb(var(--hintergrundfarbe));
  color: rgb(var(--textfarbe_light));
  text-decoration: none;
}

#ranft {
  max-width: 400px;
}

#icon_agb_p {
  max-height: 50px;
  max-width: 100px;
}

#icon_agb {
  max-height: 50px;
}

#icon_agb:hover {
  background-color: rgb(var(--hintergrundfarbe));
  color: rgb(var(--textfarbe_light));
  text-decoration: none;
}

.blue {
  color: rgb(var(--highlightfarbe));
}