/* ==================== GRUNDSTILE ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: #000;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
}

/* ==================== HINTERGRUNDVIDEO ==================== */
#background-video {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  transform: translateY(var(--wave-shift, 0%));
  transition: transform 600ms ease;  /* weiche Bewegung */
  will-change: transform;
  z-index: -1; /* hinter Inhalt */
}



/* ==================== HEADER ==================== */
.header {
  position: absolute;
  top: 1.5rem;
  left: 0;
  width: 100%;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Kalender oben links */
#datePicker {
  background: #000;
  color: #fff;
  border: none;
  border-radius: 25px;
  padding: 0.6rem 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

#datePicker::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/*Navigation Neu

/* Grundstruktur */
.dropdown {
  position: relative;
  display: inline-block;
  font-family: sans-serif;
}

/* Button mit ausgewähltem Ort */
.dropdown-toggle {
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  border: none;
  border-radius: 20px;
  padding: 0.8rem 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 150px;
  gap: 0.5rem;
}

/* Pfeil */
.dropdown-toggle .arrow {
  transition: transform 0.3s ease;
}

/* Dropdown-Menü */
.dropdown-menu {
  position: absolute;
  top: 110%;
  left: 0;
  background: #000;
  border-radius: 20px;
  display: none;
  flex-direction: column;
  padding: 0.0rem 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  animation: fadeDown 0.25s ease;
  z-index: 100;
  min-width: 150px;
}

/* Animiertes Einblenden */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sichtbar, wenn aktiv */
.dropdown.active .dropdown-menu {
  display: flex;
}

/* Pfeil nach oben bei aktivem Menü */
.dropdown.active .arrow {
  transform: rotate(180deg);
}

/* Labels im Menü */
#hauptmenue label {
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 0.8rem 1.2rem;
  border-radius: 15px;
  cursor: pointer;
  transition: background 0.2s ease;
  display: block;
}

/* Hover-Farbe */
#hauptmenue label:hover {
  background: #999;
}

/* Inputs ausblenden */
#hauptmenue input[type="radio"] {
  display: none;
}


/* ==================== TITEL UND TEMPERATUR ==================== */
.title {
  font-size: 2rem;
  font-weight: 700;
  color: #000;
  text-shadow: 0 2px 6px rgba(255, 255, 255, 0.5);
  margin-bottom: 1.2rem;
}

/* ==================== FLOW / WASSERSTAND ==================== */
.Flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 1rem;
  color: #000;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.4);
}

/* Zahl und Einheit nebeneinander */
.Flow-Value {
  display: flex;
  align-items: baseline; /* sorgt für schöne vertikale Ausrichtung */
  justify-content: center;
  gap: 0.3rem; /* Abstand zwischen Zahl und Einheit */
}

/* Zahl (groß und fett) */
.Zahl-Flow {
  font-size: 9rem;
  font-weight: 800;
  line-height: 1;
}

/* Einheit (kleiner, aber auf gleicher Linie) */
.Einheit-Flow {
  font-size: 1.5rem;
  font-weight: 600;
}

/* Text darunter */
.Text-Flow {
  margin-top: 0.4rem;
  font-size: 2rem;
  font-weight: 600;
}


.Wassertemperatur {
  display: flex;
  align-items: baseline; /* sorgt dafür, dass Text schön auf gleicher Linie steht */
  justify-content: center; /* zentriert horizontal */
  gap: 0.5rem; /* Abstand zwischen Zahl und Text */
  color: #000;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.4);
}

/* Zahl größer und fett */
.Zahl-Temp {
  font-size: 2.5rem;
  font-weight: 700;
}

/* Text daneben etwas kleiner */
.Text-Temp {
  font-size: 1.2rem;
  font-weight: 600;
}

.title {
  opacity: 0;
  font-size: 2.5rem;
  text-align: center;
  animation: showTitle 6s ease forwards;
  transform-origin: center;
}
 

/* ==================== ANIMATION: Intro ==================== */

/* Ausgangszustände */
.title {
  opacity: 0;
  animation: showTitle 4s ease forwards;
}

main {
  opacity: 0;
  animation: showMain 4s ease forwards;
}

/* Keyframes für Titel: Einblenden → Halten → Ausblenden */
@keyframes showTitle {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Keyframes für Main: wartet auf Titel und blendet danach ein */
@keyframes showMain {
  0%, 65% {
    opacity: 0;
  }
  80% {
    opacity: 0.5;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
  }
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 768px) {
  /* Header neu anordnen */
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* Kalender bleibt oben */
  #dateTime {
    align-self: flex-start;
  }

  /* Burger-Button aktivieren */
  .burger {
    display: block;
  }

  /* Menü standardmäßig verstecken */
  #hauptmenue {
    display: none;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.9);
    position: absolute;
    top: 3rem;
    right: 0;
    border-radius: 15px;
    padding: 1rem;
  }

  /* Menü sichtbar, wenn aktiv */
  .burger[aria-expanded="true"] + #hauptmenue {
    display: flex;
  }

  #hauptmenue li a {
    font-size: 1rem;
    text-align: center;
    width: 100%;
  }

  /* Haupttext kleiner */
  .title {
    font-size: 1.5rem;
  }

  .Wassertemperatur {
    font-size: 1.2rem;
  }
}

/* Hintergrundvideo */
#background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}