/* Navbar container */
.navbar {
  overflow: hidden;
  font-size: 13px;
  background-color: #5a5b5e;
  font-family: Arial, Helvetica, sans-serif;
  z-index: 500;
  border: none;
}

/* Links inside the navbar */
.navbar a {
  position: relative; 
  float: left;
  font-size: 13px;
  color: white;
  text-align: center;
  padding: 10px 10px 10px 5px; 
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
  z-index: 510;
  padding-bottom: 3px;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 13px;
  border: none;
  outline: none;
  color: white;
  padding: 10px 10px 10px 5px; /* Gleich wie bei .navbar a */
  background-color: inherit;
  font: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
  border-right: 1px solid #ffffff; /* Hinzufügen eines rechten Separators*/
  transition: background-color 0.5s ease; /* Fadein Effekt Btn */
}


/* Entfernen des rechten Separators vom letzten Button */
.dropdown:last-child .dropbtn {
  border-right: none;
}

/* Hover-Effekt für Dropdown-Button */
.dropdown .dropbtn:hover {

  background-color: #4b4441; /* Button Hovereffekt-Hintergrundfarbe */
}

/* Hover-Effekt für Dropdown-Container und Button */
.dropdown:hover .dropbtn {
  background-color: #4b4441; /* Button Hovereffekt-Hintergrundfarbe */
}

/* Add a background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #transparent;
  /* Entfernen oder Anpassen der line-height */
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  position: absolute;
  left: 0%;
  right: 0%;
  margin-top: -5px;
  background-color: #transparent;
  width: 100%;  
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
  z-index: 520;
  opacity: 0; /* Startet als transparent */
  visibility: hidden; /* Anfangs nicht sichtbar */
  transition: opacity 0.3s ease, visibility 0.3s; /* Übergang hinzufügen */
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  opacity: 0.95; /* Vollständig sichtbar */
  visibility: visible; /* Sichtbar machen */
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 25.00%;
  padding: 20px;
  background-color: #transparent;
  height: auto;
}

/* Style links inside the columns */
.column a {
  float: none;
  color: #5c5d61;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a background color on hover */
.column a:hover {
  background-color: #ff6803;
  color: #ffffff;
    padding: 5px 5px 5px 5px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}