/* Navigationsleiste */

.nav-bar{
  background-color: rgb(44, 62, 80);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  position: sticky; /* body {height: 3000px}, nicht (!) {bottom-margin}*/
  top: 0; /* sagt wo Nav-Leiste kleben bleiben soll */
  z-index: 1000;
}

.nav-element-kat, 
.nav-element {
  text-decoration: none; /* Unterstreichung durch <a> weg */
  color: inherit;        /* gleiche Farbe wie Text */
  font-size: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 18px; /*nav-Knöpfe größer/ bzw. kleiner machen*/
  padding-right: 18px; /*nav-Knöpfe größer/ bzw. kleiner machen*/
  transition: background-color 0.05s;
  border: 1px solid rgba(0,0,0,0.1);
}

.nav-element-kat {
  background-color: rgb(209, 46, 212);
  height: 53px;
  border-radius: 2px;
}

.nav-element {
  background-color: rgb(52, 73, 94);
  color: white;
  white-space: nowrap;
  border-radius: 1px;
}
/* 1. Verschieben (Gilt nur für PC-Maus) */
@media (hover: hover) {
  .nav-element-kat:hover {
    background-color: rgb(222, 96, 224);
    cursor: pointer;
  }
}
/* 2. Umbenennen (Gilt für das kurze Tippen auf dem Handy) */
.nav-element-kat:active {
  background-color: rgb(222, 96, 224);
}



/* 1. Verschieben (Gilt nur für PC-Maus) */
@media (hover: hover) {
  .nav-element:hover {
    background-color: rgb(81, 98, 114);
    cursor: pointer;
  }
}
/* 2. Umbenennen (Gilt für das kurze Tippen auf dem Handy) */
.nav-element-kat:active {
    background-color: rgb(81, 98, 114);
}

.navbar-graph-symbol {
  height: 17px;
}
.navbar-kat-graph-symbol {
  margin-bottom: -2px;
  height: 19px;
}

/* Dropdown-Menü */
.dropdown-button-kat {
  position: relative;
}

.dropdown-menu-kat {
  position: absolute;
  display: none;
  top: 100%;
  flex-direction: column;
  border: 1px groove rgb(0, 0, 0);
  border-radius: 2px;
}

.open-dropdown-menu-kat { 
  display: flex;
}

.dropdown-item-kat {
  text-decoration: none; /* Entfernt den Unterstrich */
  color: inherit;        /* Passt die Farbe an die Umgebung an (oder z. B. #333) */
  display: flex;
  gap: 10px;
  background-color: rgb(254, 184, 255);
  font-size: 18px;
  width: 170px;
  padding: 14px 18px 18px 16px;  /* top right bottom left */
  border: 1px solid rgb(0, 0, 0, 0.5);
}
/* 1. Verschieben (Gilt nur für PC-Maus) */
@media (hover: hover) {
  .dropdown-item-kat:hover {
    background-color: rgb(253, 169, 254);
    cursor: pointer;
  }
}
/* 2. Umbenennen (Gilt für das kurze Tippen auf dem Handy) */
.nav-element-kat:active {
  background-color: rgb(253, 169, 254);
}

.category-not-available {
  background-color: rgb(204, 203, 203);
}

.category-not-available:hover {
  background-color: rgb(213, 210, 210);
}

.navbar-time-icon {
  height: 26px;

}