/* CSS-Styling für die Navigationsleiste */
ul.myNewNavbar {
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-Bottom-style: solid;
  display: inline-block;
  border-Bottom-color: #00000029;
  border-Bottom-width: 2px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}


ul.myNewNavbar li {
  float: left;
}

.myNewNavitem {
  display: block;
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 15px 12px 9px 12px;
  text-decoration: none;
  cursor: pointer;
}

.markOnHover:hover {
  background-color: #dadada;
}

/* CSS-Styling für das Responsive Design   achtung hier max-width */
@media screen and (max-width: 900px) {

  /* nicht das erste child im element -> unsichtbar sein bei kleinem display */
  ul.myNewNavbar li:not(:first-child) {
    display: none;
  }

  ul.myNewNavbar {
    display: block !important;
  }

  ul.myNewNavbar li.icon {
    float: right;
    display: block !important;
  }

  /* mit dem leerzeichen zwischen den klassen heißt, dass das li.icon innerhalb von nem ul.myNewNavbar element ist  also sein child, das ist somit keine aufzählung */
  ul.myNewNavbar li.icon a {
    display: block !important;
    text-align: center;
  }

  ul.myNewNavbar.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  ul.myNewNavbar.responsive li {
    float: none;
    display: inline;
  }

  ul.myNewNavbar.responsive li a {
    display: block;
    text-align: left;
  }



  /*  Hamburger menü zu Kreuz und zurück */

  /* https://stackoverflow.com/questions/35626116/css-transform-from-hamburger-icon-to-cross-to-arrow */
  
  .threebar {
    cursor: pointer;
    margin-top: 5px;
    margin-left: 5px;

    .bar {
      width: 20px;
      height: 2px;
      background: #000;
      margin-bottom: 6px;
      transition: all 0.6s ease;

      &:nth-child(1) {
        transform-origin: 50%;
      }

      &:nth-child(2) {
        transform-origin: 50%;
      }
    }

    &.cross {
      .bar:nth-child(1) {
        /* erstes child in children auflistung */
        transform: translateY(295%) rotate(45deg);
      }

      .bar:nth-child(2) {
        transform: translateY(-96%) rotate(-45deg);
      }

      .bar:nth-child(3) {
        opacity: 0;
      }
    }

  }
}