@font-face {
  font-family: 'Lelo-Regular';
  src: url('../fonts/Lelo-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lelo-Bold';
  src: url('../fonts/Lelo-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Lelo-Italic';
  src: url('../fonts/Lelo-RegularItalic.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Lelo-RegularItalic';
  src: url('../fonts/Lelo-RegularItalic.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
}

:root {
  --accent_color: #ffbb00;
  --accent_color_bar: #ffc671;
  --accent_color_gradient: #ffd78d;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
}

html {
  margin: 0;
  padding: 0;
}

h1 {
  font-family: Lelo-Bold, sans-serif;
  font-size: 4vh;
  line-height: 4vh;
  text-align: left;
  margin-bottom: -1.0vh;
  text-transform: uppercase;
  width: 100%;
}

h2 {
  font-family: Lelo-Bold, sans-serif;
  font-size: 3vh;
  text-align: left;
  margin-bottom: -2.5vh;
  width: 100%;
}

p {
  font-family: Lelo-Regular, sans-serif;
  font-size: 2.5vh;
  line-height: 2.5vh;
  text-align: left;
}

.popup {
  display: none;
  position: fixed;
  left: 5%;
  top: 20vh;
  width: 90%;
  height: 60vh;
  background-color: white;
  border-left: 2vh solid red;
  text-align: center;
  padding: 2vh;
  box-sizing: border-box;
  z-index: 1000;
}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(150, 150, 150, 0.8);
  z-index: 500;
}

#closePopup {
  margin-top: 2vh;
  padding: 1vh;
  background-color: red;
  color: white;
  border: none;
  cursor: pointer;
  height: 5vh;
  width: 50%;
  font-family: Lelo-Regular, sans-serif;
  font-size: 2.5vh;
  line-height: 2.5vh;
}

.header {
  align-items: center;
  background-color: rgb(255, 255, 255);
  box-sizing: border-box;
  display: flex;
  height: 8vh;
  justify-content: space-between;
  left: 0;
  overflow: hidden;
  padding: 1vh;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
}

.footer {
  align-items: center;
  background-color: rgb(255, 255, 255);
  box-sizing: border-box;
  display: flex;
  height: 3vh;
  justify-content: center;
  left: 0;
  overflow: hidden;
  padding: 1vh;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 100;
}

.footer-text {
  display: flex;
  flex-direction: column;
  margin-left: 0.75vh;
  margin-right: 0.75vh;
  font-family: "Lelo-Regular", sans-serif;
  font-size: 1.8vh;
  color: rgba(0, 0, 0, 0.8);
  text-decoration: none;
  cursor: pointer;
  text-transform: none;
}

.logo {
  height: 80%;
  margin-left: 1vh;
}

.logo-projektpartner {
  width: auto;
  height: 12vh;
  padding: 2vh;
  object-fit: contain;
  max-width: 30vh;
}

#container-logos-projekt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.header-texts {
  display: flex;
  flex-direction: column;
  margin-right: 1vh;
}

.header-teutolab {
  font-family: Lelo-Bold, sans-serif;
  font-size: 4vh;
  font-style: normal;
  line-height: 1;
  text-align: left;
}

.header-calculator {
  font-family: Lelo-Bold, sans-serif;
  font-size: 2vh;
  font-style: normal;
  line-height: 1;
  margin-top: 0;
  text-align: left;
}

#announcement-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  z-index: -10;
  opacity: 0.0;
  font-family: Lelo-Bold, sans-serif;
  font-size: 6vh;
  color: rgba(0, 0, 0, 0.8);
  font-style: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2.0vh solid var(--accent_color_bar);
}

#white-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -10;
  opacity: 0.0;
}

.background-gradient {
  background: linear-gradient(to bottom, var(--accent_color_gradient), rgb(245, 245, 245) 40%);
  bottom: 32vh;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
  transition: opacity 1s;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.background-bottom {
  background-image: url('../images/ernaehrung.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  height: 32vh;
  position: absolute;
  width: 100%;
  z-index: -1;
  transition: bottom 1s;
}

@media screen and (min-aspect-ratio: 2.2) {
  .background-bottom {
    background-size: contain;
  }
}

.landing-page {
  background-color: #f9f9f8;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

.outer-div {
  display: flex;
  width: 100%;
  height: 100%;
}

.outer-div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(11, 129, 0, 0.10), rgba(255, 255, 0, 0));
  z-index: 2;
}

.left-image,
.right-image {
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

.left-image {
  background-image: url('../images/landing_left.jpg');
  background-position: left top;
}

.right-image {
  background-image: url('../images/landing_right.jpg');
  background-position: right top;
}

@media (max-aspect-ratio: 1/1.7) {
  .left-image {
    background-size: cover;
    background-position: right;
  }

  .right-image {
    background-size: cover;
    background-position: left;
  }
}

.landing-page-container {
  max-width: 80vh;
  height: 75vh;
  width: 75%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), white 20%, white);
  padding-left: 3vh;
  padding-right: 3vh;
  padding-bottom: 2vh;
  top: auto;
  bottom: 5vh;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  ;
  border-left: 0.0vh solid rgb(0, 0, 0);
  border-right: 0.0vh solid rgb(78, 139, 70);
  overflow-y: auto;
}

.gradient-overlay {
  position: absolute;
  left: 0;
  width: 100%;
  height: 6vh;
  background-image: linear-gradient(to top, white, transparent);
  z-index: 3;
  max-width: 80vh;
  width: 84%;
  left: 50%;
  top: auto;
  bottom: 5vh;
  transform: translateX(-50%);
}

.calculator-launch-button {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 10vh;
  border: 1px solid rgb(0, 0, 0);
  display: flex;
  align-items: center;
  position: relative;
  font-family: Lelo-Bold, sans-serif;
  font-size: 3vh;
  justify-content: center;
  color: rgba(0, 0, 0, 0.8);
  transition: transform 0.3s ease, background-color 0.3s ease;
  margin-top: 3vh;
  padding-left: 2vh;
  padding-right: 2vh;
  box-sizing: border-box;
}

#calculator-launch-button-co2 {
  color: rgba(18, 136, 18, 0.9);
}

#calculator-launch-button-wasser {
  color: rgba(0, 0, 0, 0.55);
  opacity: 0.4;
}

#calculator-launch-button-muell {
  color: rgba(0, 0, 0, 0.55);
  opacity: 0.4;
}


.calculator-launch-button:hover {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.1);
}

#global-bar-container {
  background-color: rgb(250, 250, 250);
  box-sizing: border-box;
  display: flex;
  height: 8vh;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 8vh;
  width: 100%;
  border-top: 0.4vh solid rgba(0, 0, 0, 0.6);
  border-bottom: 0.4vh solid rgba(0, 0, 0, 0.6);
  z-index: -100;
}

.global-bar {
  background-color: #ffc671;
  height: 100%;
  left: 0;
  width: 0%;
  position: absolute;
  border-top-right-radius: 3vh;
  transition: width 0.75s ease-in-out, background-image 1.5s ease-in-out;
  box-shadow: 0.3vh -0.1vh 0 0 rgb(39, 39, 39);
  bottom: 0;
}

.global-bar-average {
  background-color: rgb(240, 240, 240);
  height: 100%;
  left: 0;
  width: 66%;
  position: absolute;
  border-top-right-radius: 3vh;
  transition: width 0.75s ease-in-out;
  box-shadow: 0.3vh -0.1vh 0 0 rgb(39, 39, 39);
  bottom: 0;
}

#global-bar-text {
  background-color: rgb(250, 250, 250);
  position: absolute;
  font-size: 2.5vh;
  border-radius: 2.0vh;
  font-family: Lelo-Bold, sans-serif;
  color: rgba(0, 0, 0, 0.7);
  border: 0.3vh solid rgb(39, 39, 39);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  padding-top: 0.2vh;
  left: -20%;
  transition: left 1s ease-in-out, opacity 1s ease-in-out, transform 1s ease, font-size 0.3s ease;
  animation: scaleText 0.3s ease-out;
  padding-left: 2.0vh;
  padding-right: 2.0vh;
}

#global-bar-description-container {
  background-color: transparent;
  box-sizing: border-box;
  display: flex;
  height: 3vh;
  left: 0;
  position: absolute;
  top: 15.8vh;
  width: 100%;
  z-index: -100;
  overflow-x: hidden;
}

#global-bar-description-position {
  background-color: transparent;
  height: 100%;
  left: -50%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: left;
  border-left: 0.3vh solid rgb(39, 39, 39);
  transition: left 0.75s ease-in-out, right 0.75s ease-in-out;
  white-space: nowrap;
}

#global-bar-description-text {
  background-color: transparent;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 1vh;
  padding-left: 1vh;
  transition: transform 0.75s ease-in-out;
  font-size: 1.8vh;
  font-family: Lelo-Bold, sans-serif;
  color: rgba(0, 0, 0, 0.7);
}

#global-bar-description-position-average {
  left: 66%;
  background-color: transparent;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: left;
  border-left: 0.3vh solid rgb(39, 39, 39);
  transition: left 0.75s ease-in-out, right 0.75s ease-in-out;
  white-space: nowrap;
  transition: border-left 0.75s ease-in-out;
}

#global-bar-description-text-average {
  background-color: transparent;
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 1vh;
  padding-left: 1vh;
  transition: transform 0.75s ease-in-out, width 0.75s ease-in-out;
  font-size: 1.8vh;
  font-family: Lelo-Bold, sans-serif;
  color: rgba(0, 0, 0, 0.7);
}

.center-div {
  background-color: transparent;
  height: 70vh;
  width: 90%;
  max-width: 80vh;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.slide-div {
  background-color: transparent;
  height: 66vh;
  box-sizing: border-box;
  width: 90%;
  overflow: hidden;
  margin: auto;
  display: flex;
  justify-content: center;
  opacity: 0;
  border-right: 1.5vh solid var(--accent_color_bar);
  transition: border-color 0.3s ease;
}

.info-box {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  transform: translateY(-100%);
  position: absolute;
  bottom: 0;
}

.info-content {
  background-color: rgba(255, 255, 255, 0.75);
  padding-left: 4vh;
  padding-right: 4vh;
  height: 100%;
  position: absolute;
  top: 0;
  overflow-y: scroll;
  width: 90%;
}

.info-content::-webkit-scrollbar {
  width: 0;
}

.info-content:hover::-webkit-scrollbar {
  width: 1vh;
}

.info-content::-webkit-scrollbar-thumb {
  background-color: rgb(200, 200, 200);
}

.fade-overlay {
  position: absolute;
  bottom: 15%;
  left: 0;
  right: 0;
  height: 20vh;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.70));
  pointer-events: none;
}

.button-info-down-box {
  background-color: transparent;
  display: flex;
  align-items: center;
  position: absolute;
  top: 85%;
  height: 6vh;
  justify-content: center;
  margin-top: 2vh;
  width: 60%;
}

.button-info-down {
  background-color: transparent;
  background-image: url('../images/arrow_down.svg');
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  cursor: pointer;
  text-indent: -9999px;
  transition: transform 0.3s ease;
  height: 6vh;
  width: 6vh;
  background-size: 6vh 6vh;
}

.button-info-down:hover {
  filter: brightness(1.3);
  transform: scale(1.3);
}

.question-box {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  transform: translateY(0%);
}

.question-content {
  align-items: center;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-family: Lelo, sans-serif;
  position: relative;
  width: 100%;
}

.question-topic {
  align-items: center;
  background-color: transparent;
  color: #66625b;
  display: flex;
  font-family: Lelo-Bold, sans-serif;
  font-size: 2.5vh;
  font-weight: bold;
  justify-content: center;
  padding-top: 1vh;
  text-transform: uppercase;
  top: 0;
  width: 90%;
}

.question-question {
  align-items: center;
  background-color: transparent;
  color: rgb(32, 32, 32);
  display: flex;
  font-family: Lelo-Bold, sans-serif;
  font-size: 3vh;
  line-height: 3vh;
  justify-content: center;
  padding-bottom: 1.5vh;
  padding-top: 1vh;
  text-align: center;
  top: 0;
  width: 90%;
  display: inline-flex;
}

div>label {
  display: block;
}

input[type="radio"]:before {
  background: var(--accent_color);
  border-radius: 50%;
  content: "";
  height: 1.2vh;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.2vh;
}

input[type="radio"]:checked:before {
  opacity: 1;
}

input[type="radio"] {
  appearance: none;
  border-radius: 50%;
  border: 0.3vh solid #a3a3a3;
  height: 2.5vh;
  position: relative;
  width: 2.5vh;
}

label {
  color: #585858;
  cursor: pointer;
  font-family: 'Lelo-Bold', sans-serif;
  font-size: 2.5vh;
  transition: color 0.5s ease;
}

label:hover {
  color: var(--accent_color);
  transform: scale(1.02);
}

input[type="checkbox"] {
  appearance: none;
  border: 0.3vh solid #a3a3a3;
  height: 2.5vh;
  position: relative;
  width: 2.5vh;
  margin-right: 1vh;
  vertical-align: middle;
}

input[type="checkbox"]:before {
  background: var(--accent_color);
  content: "";
  height: 1.2vh;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.2vh;
  opacity: 0;
  transition: opacity 0.2s;
}

input[type="checkbox"]:checked:before {
  opacity: 1;
}

input[type="radio"]+span {
  position: relative;
  top: -0.6vh;
}

input[type="checkbox"]+span {
  position: relative;
  top: 0.0;
}

.button-info-box {
  background-color: transparent;
  display: flex;
  align-items: center;
  position: relative;
  height: 6vh;
  justify-content: center;
  margin-top: 2vh;
  width: 6vh;
  opacity: 0.7;
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.7);
    color: black;
  }

  50% {
    transform: scale(1.15) rotate(3deg);
    background-color: rgba(0, 0, 0, 0.03);
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.9);
    color: red;
  }
}

.single-pulse {
  animation: pulse 2s ease-in-out;
}

.button-info {
  background-color: transparent;
  border: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: transform 0.3s ease;
  height: 6vh;
  width: 6vh;
  font-family: 'Lelo-Bold';
  font-size: 4vh;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, background-color, box-shadow;
}

.pulsing {
  animation: pulse 3s infinite ease-in-out;
}

.button-info:hover {
  filter: brightness(1.3);
  transform: scale(1.3);
}

.emission-bar-local-base {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4vh;
  border: 0.4vh solid rgb(90, 90, 90);
  height: 4vh;
  margin-top: 3vh;
  overflow: hidden;
  width: 70%;
  display: flex;
  align-items: center;
  position: relative;
}

.emission-bar-local {
  background-color: var(--accent_color_bar);
  border-radius: inherit;
  height: 100%;
  transition: width 0.75s ease-in-out;
  box-sizing: content-box;
  justify-content: center;
  align-items: center;
  display: flex;
}

.emission-bar-local-text {
  position: absolute;
  font-size: 1.8vh;
  font-family: Lelo-Bold, sans-serif;
  color: #00000080;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  padding-top: 0.2vh;
  left: -20%;
  transition: left 1s ease-in-out, opacity 1s ease-in-out, transform 1s ease, font-size 0.3s ease;
  animation: scaleText 0.3s ease-out;
}

.animate-text {
  animation: scaleText 0.3s ease-in-out;
}

@keyframes scaleText {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.navigation-box {
  background-color: transparent;
  display: flex;
  height: 10vh;
  justify-content: center;
  margin-top: 2vh;
  width: 70%;
  opacity: 0.8;
}

#navigation-box-intro {
  position: absolute;
  bottom: 3vh;
  background-color: transparent;
  display: flex;
  height: 6vh;
  justify-content: center;
  margin-top: 2vh;
  width: 90%;
  opacity: 0.8;
}


.navigation-button-box {
  background-color: transparent;
  height: 5vh;
  margin-bottom: 3vh;
  margin-top: 3vh;
  width: 20%;
}

.slide-button-next {
  background-color: transparent;
  background-image: url('../images/arrow_right.svg');
  background-position: right;
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  cursor: pointer;
  height: 80%;
  text-indent: -9999px;
  transition: transform 0.3s ease;
  width: 80%;
}

.slide-button-prev {
  background-color: transparent;
  background-image: url('../images/arrow_left.svg');
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  cursor: pointer;
  float: right;
  height: 80%;
  text-indent: -9999px;
  transition: transform 0.3s ease;
  width: 80%;
}

.slide-button-next:hover,
.slide-button-prev:hover {
  filter: brightness(1.3);
  transform: scale(1.3);
}

.slide-div {
  left: 0;
  position: absolute;
  transition: left 0.5s ease-in-out, opacity 1.0s ease-in-out;
  width: 100%;
  border-radius: 3vh 0 0 3vh;
}

.enumerator {
  background-color: transparent;
  color: #00000075;
  display: flex;
  font-family: Lelo-Bold, sans-serif;
  font-size: 2vh;
  height: 10vh;
  justify-content: center;
  padding-top: 3.5vh;
  width: 30%;
}

.slider-selection-text {
  color: var(--accent_color);
  cursor: pointer;
  font-family: 'Lelo-Bold', sans-serif;
  font-size: 2.5vh;
  transition: color 0.5s ease;
  background-color: transparent;
  margin-top: 3vh;
}

.slider-box {
  background-color: transparent;
  width: 70%;
  margin-top: 2vh;
  margin-bottom: 4vh;
}

input[type="range"] {
  width: 100%;
  appearance: none;
  height: 1.5vh;
  /*background: linear-gradient(to left, rgb(255, 120, 120), rgba(0, 0, 0, 0.05)) no-repeat;*/
  background: rgba(0, 0, 0, 0.05);
  outline: none;
  padding: 0;
  margin: 0;
  border: 0.3vh solid #a3a3a3;
  border-radius: 0.0vh;
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 10%,
      rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%,
      rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.05) 30%,
      rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.05) 50%,
      rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.05) 70%,
      rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 80%,
      rgba(0, 0, 0, 0.05) 80%, rgba(0, 0, 0, 0.05) 90%,
      rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.05) 100%);
}

/* Ernährung, 7 Optionen */
#input_02 {
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 12.5%,
      rgba(0, 0, 0, 0) 12.5%, rgba(0, 0, 0, 0) 27.5%,
      rgba(0, 0, 0, 0.1) 27.5%, rgba(0, 0, 0, 0.1) 42.5%,
      rgba(0, 0, 0, 0) 42.5%, rgba(0, 0, 0, 0) 57.5%,
      rgba(0, 0, 0, 0.1) 57.5%, rgba(0, 0, 0, 0.1) 72.5%,
      rgba(0, 0, 0, 0) 72.5%, rgba(0, 0, 0, 0) 87.5%,
      rgba(0, 0, 0, 0.1) 87.5%, rgba(0, 0, 0, 0.1) 100%);
}


input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3.5vh;
  height: 4.5vh;
  border-radius: 0%;
  background-color: rgba(var(--accent_color), 0.5);
  border: var(--accent_color) 0.8vh solid;
  cursor: pointer;
  -webkit-transition: background .15s ease-in-out;
  transition: background .15s ease-in-out;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: rgba(var(--accent_color), 0.7);
}

input[type="range"]::-moz-range-thumb {
  appearance: none;
  width: 2.5vh;
  height: 3.5vh;
  border-radius: 0%;
  background-color: rgba(var(--accent_color), 0.5);
  border: var(--accent_color) 0.8vh solid;
  cursor: pointer;
  -webkit-transition: background .15s ease-in-out;
  transition: background .15s ease-in-out;
}

input[type="range"]::-moz-range-thumb:hover {
  background: rgba(var(--accent_color), 0.7);
}

input::-moz-focus-inner,
input::-moz-focus-outer {
  border: 0;
}

.emission-bar-local-base-zwischenergebnis {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0vh;
  border: 0.4vh solid rgb(90, 90, 90);
  height: 6vh;
  margin-top: 3vh;
  overflow: hidden;
  width: 70%;
  display: flex;
  align-items: center;
  position: relative;
}

.emission-bar-local-zwischenergebnis {
  background-color: var(--accent_color_bar);
  border-radius: inherit;
  height: 100%;
  transition: width 0.75s ease-in-out;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  display: flex;
}

.emission-bar-local-text-zwischenergebnis {
  position: absolute;
  font-size: 2.5vh;
  font-family: Lelo-Bold, sans-serif;
  color: #00000080;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  padding-top: 0.2vh;
  left: -20%;
  transition: left 1s ease-in-out, opacity 1s ease-in-out, transform 1s ease, font-size 0.3s ease;
  animation: scaleText 0.3s ease-out;
}

.emission-bar-local-zwischenergebnis-durchschnitt-wrapper {
  position: relative;
  height: 3vh;
  overflow: hidden;
  right: 0;
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-top: 0.2vh;
}

.emission-bar-local-zwischenergebnis-durchschnitt {
  background-color: transparent;
  height: 2vh;
  left: 30%;
  width: 100%;
  display: flex;
  border-left: 0.3vh solid rgba(0, 0, 0, 0.80);
  padding: 0.6vh;
  font-size: 1.5vh;
  font-family: Lelo-Bold, sans-serif;
  position: relative;
}

.container-grundwert {
  align-items: center;
  background-color: transparent;
  color: var(--accent_color);
  display: flex;
  font-family: Lelo-Bold, sans-serif;
  font-size: 5vh;
  line-height: 5vh;
  justify-content: center;
  text-align: center;
  top: 0;
  margin-bottom: 0.8vh;
}

.end-div {
  background-color: rgb(255, 255, 255);
  height: 100%;
  width: 100%;
  margin: auto;
  transition: border-color 0.3s ease;
  padding: 2vh;
  overflow-y: auto;
}


table {
  width: 80%;
  border-collapse: collapse;
  margin-top: 2vh;
  background-color: rgba(255, 255, 255, 0.8);
}

th,
td {
  text-align: left;
  padding: 1vh;
  font-family: Lelo-Bold, sans-serif;
  color: #66625b;
}

th {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.75);
  font-size: 2.0vh;
}

td {
  font-size: 2vh;
}

tr:nth-child(even) {
  background-color: rgba(245, 245, 245, 0.9);
}

.text-grundwert {
  align-items: center;
  background-color: transparent;
  color: rgb(32, 32, 32);
  font-family: Lelo-Regular, sans-serif;
  font-size: 2.5vh;
  line-height: 2.6vh;
  text-align: left;
  top: 0;
  width: 80%;
}

.text-zwischenergebnis {
  align-items: center;
  background-color: transparent;
  color: rgb(32, 32, 32);
  display: flex;
  font-family: Lelo-Regular, sans-serif;
  font-size: 2.8vh;
  line-height: 2.9vh;
  justify-content: center;
  padding-top: 1vh;
  text-align: left;
  top: 0;
  width: 75%;
  display: inline-flex;
}

#bar_plot_container {
  height: 30vh;
  display: flex;
  justify-content: left;
  align-items: stretch;
  position: relative;
  margin-top: 3vh;
  border-left: 0.3vh solid black;
  border-bottom: 0.3vh solid black;
  width: 80%;
  color: rgb(32, 32, 32);
  font-family: Lelo-Bold, sans-serif;
  font-size: 1.4vh;
  padding-left: 0.5vh;
}

#bar_plot {
  width: 20%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 20%;
  text-align: center;
}

#bar_plot_avr {
  width: 20%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
}

#bar_plot_4,
#bar_plot_avr_4 {
  border-top-left-radius: 2vh;
  border-top-right-radius: 2vh;
  border-top: 0.4vh solid rgb(90, 90, 90);
  box-shadow: none;
}

#bar_plot_1,
#bar_plot_2,
#bar_plot_3,
#bar_plot_4 {
  color: rgb(70, 70, 70);
}

#bar_plot_5 {
  border: none;
  box-shadow: none;
  font-size: 1.8vh;
  font-family: Lelo-Bold, sans-serif;
  color: rgba(0, 0, 0, 0.6);
  padding-bottom: 0.4vh;
  width: 110%;
}

#bar_plot_avr_1,
#bar_plot_avr_2,
#bar_plot_avr_3 {
  box-shadow: inset 0 0.3vh 0 0 rgb(90, 90, 90);
}

.bar_plot {
  width: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  z-index: 1;
  border-left: 0.4vh solid rgb(90, 90, 90);
  border-right: 0.4vh solid rgb(90, 90, 90);
  box-shadow: inset 0 0.3vh 0 0 rgb(90, 90, 90);
  font-size: 1.3vh;
  font-family: Lelo-Bold, sans-serif;
  color: rgb(70, 70, 70);
}

#fixed_size_bar {
  position: absolute;
  bottom: 0;
  left: 40%;
  width: 20%;
  height: 100%;
  background-color: rgba(200, 200, 200, 0.55);
  border: 0.4vh solid rgb(90, 90, 90);
  border-bottom: none;
  z-index: 2;
  border-top-left-radius: 2vh;
  border-top-right-radius: 2vh;
}

#bar_text {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: transparent;
  font-size: 1.6vh;
  font-family: Lelo-Bold, sans-serif;
  color: rgba(0, 0, 0, 0.7);
  bottom: 0;
  position: absolute;
  right: 0;
  border-top: 0.3vh dotted rgba(0, 0, 0, 0.45);
  text-align: right;
  z-index: 0;
}

#text_container {
  position: relative;
  width: 80%;
  height: 1.5vh;
  margin-top: 0.3vh;
}

.sub_text {
  position: absolute;
  top: 0;
  font-size: 1.3vh;
  font-family: Lelo-Bold, sans-serif;
  color: rgba(0, 0, 0, 0.7);
}

#sub_text_1 {
  left: 20%;
}

#sub_text_2 {
  left: 58%;
}