/* Styles für die Bottom-Navigation auf Smartphones und Tablets */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  /* Bottom-Navigation steht vor allen anderen Elementen im Vordergrund */
  z-index: 100;

  /* Hintergrundfarbe der Bottom-Navigation */
  background-color: #003f72;

  height: 70px;

  border-top-left-radius: 8px;
  border-top-right-radius: 8px;

  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.bottom-nav ul {
  list-style: none;
  padding-left: 0;

  display: flex;
  justify-content: space-around;

  /* ul dehnt sich auf die gesamte Höhe der Bottom-Navigation aus */
  height: 100%;
}

.bottom-nav ul li {
  width: 100%;
  height: 100%;
}

.bottom-nav ul li a {
  text-decoration: none;

  /* Anklickbare Fläche dehnt sich auf volle Höhe des umgebenden Elementes aus */
  height: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  /* Zeilenabstand zwischen Icon und Schrift in der Bottom-Navigation */
  line-height: 2;
}

.bottom-nav ul li a i {
  /* Größe der Icons der Bottom-Navigation */
  font-size: 1.5rem;
}

.bottom-nav ul li a span {

  /* Größe der Schrift der Bottom-Navigation, die die Icons erläutert */
  font-size: 0.75rem;

  color: #ffffff;
}

.whatsapp-icon {
  color: #25D366;
}

.telefon-icon {
  color: #ffffff;
}


/* Elemente der Bottom-Navigation, die auf Smartphones nicht zu sehen sind */
.hidden-mobile {
  display: none;
}