html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: 'Figtree-Regular';
  min-height: max-content;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

h1 {
  font-size: 72px;
  margin-block-start: 0;
  margin-block-end: 0;
  color: white;
}


h2 {
  font-size: 48px;
  margin-block-start: 0;
  margin-block-end: 0;
  color: white;
}

h3 {
  font-size: 24px;
  margin-block-start: 0;
  margin-block-end: 0;
  color: white;
}

@media(max-width:1100px) {
  h1 {
    font-size: clamp(2rem, 1rem + 2.5vw, 6rem);
    margin-block-start: 0;
    margin-block-end: 0;
    color: white;
  }


  h2 {
    font-size: 48px;
    margin-block-start: 0;
    margin-block-end: 0;
    color: white;
  }

  h3 {
    font-size: clamp(1rem, 0.6rem + 2vw, 3rem);
    margin-block-start: 0;
    margin-block-end: 0;
    color: white;
  }
}

li {
  color: white;
  text-decoration: none;
  display: unset;
  font-size: 18px;
}

li:hover {
  text-decoration: underline;
  cursor: pointer;
}

p {
  color: white;
  font-size: 15px;
  margin-block-start: 0;
  margin-block-end: 0;
}

.bestanden {
  color: #2ecc71;
  /* Grün */
}

.abgebrochen {
  color: #e74c3c;
  /* Rot */
}

.keine-angaben {
  color: #95a5a6;
  /* Grau */
}

.done {
  color: #2ecc71;
  font-weight: 700;
}

.in-progress {
  color: #3498db;
  font-weight: 700;
}

.in-optimization-progress {
  color: #9b59b6;
  font-weight: 700;
}

button:hover {
  cursor: pointer;
}