@font-face {
  font-family: AkkuratProBold;
  src: url(/assets/font/AkkuratPro-Bold.otf);
}
@font-face {
  font-family: AkkuratProRegular;
  src: url(/assets/font/AkkuratPro-Regular.otf);
}

@font-face {
  font-family: AkkuratProLight;
  src: url(/assets/font/AkkuratPro-Light.otf);
}

:root {
  --logo-color: #000000;
}

.font-AkkuratProBold {
  font-family: AkkuratProBold;
}
.font-AkkuratProRegular {
  font-family: AkkuratProRegular;
}
.font-AkkuratProLight {
  font-family: AkkuratProLight;
}

.full-height {
  margin: 0;
  height: 100%;
  /* overflow: hidden; */
}

.width_Logo {
  width: 300px;
}

.width_Logo_flex {
  width: 220px;
}

.width_Logo_Farbwaehler {
  width: 700px;
}

/* Füllstände */

.myHeight-red {
  height: 55px;
}

.myHeight-green {
  height: 55px;
}

.myHeight-blue {
  height: 55px;
}

.hide {
  display: none;
}

/* Lösungen Füllstände */

.Fuellstand_rot {
  height: 27%;
}

.Fuellstand_gruen {
  height: 40%;
}

.Fuellstand_blau {
  height: 75%;
}

/* Button nächste Seite */

.mybutton_border {
  border-radius: 100%;
  border: white 5px solid;
  display: flex;
}

/* Ausgewählter Farbbalken */
div.selected {
  outline: 5px #4667be solid;
  box-shadow: 0px 0px 0px 10px white;
}

.selected {
  outline: 5px #4667be solid;
  box-shadow: 0px 0px 0px 5px white;
}

/* Pfeil gelber Hintergrund */
/* .selected > img {
  background-color: #fac100;
  border-radius: 100%;
} */

.Pfeil-rechts a {
  border-radius: 100%;
}

.hide {
  visibility: hidden;
}

.show {
  visibility: visible;
}

.full-height {
  height: 100vh;
}

/* disable focus outline */
*:focus,
*:focus-visible {
  outline: none;
}

.sections {
  display: none;
}

body {
  overflow: hidden;
}

.bg-bluergb {
  background-color: blue;
}

.pt-90 {
  padding-top: 340px;
}

.pt-18 {
  padding-top: 70px;
}

.blue {
  color: #4667be;
}

.w-300 {
  width: 600px;
}