div#floatmenu {
  position: fixed;
}

div#floatmenu ul.nav {
  flex-direction: column;
  /* gap: 1rem; */
  justify-content: center;
  align-items: center;
}

nav#floating_section-left .nav-link span{
  background-repeat: no-repeat;
  width: 60px;
  height: 50px;
  background-size: cover;
  top: -6px;
  background-position: center center;
}

nav#floating_section-left .work span {
  background-image: url('/sites/default/files/uploads/img/system/icons/arbeit.png');   
}
nav#floating_section-left .hobby span {
  background-image: url('/sites/default/files/uploads/img/system/icons/freizeit.png');   
}
nav#floating_section-left .innovation span {
  background-image: url('/sites/default/files/uploads/img/system/icons/innovation.png');   
}
nav#floating_section-left .living span {
  background-image: url('/sites/default/files/uploads/img/system/icons/wohnen.png');   
}


nav#floating_section-left a {
  color: #fff;
  text-decoration: none;
}
nav#floating_section-left .social {
  position: fixed;
  top: 170px;
}
nav#floating_section-left .social {
  padding: 0px;
  transform: translate(-170px, 0);
  min-width: 275px;
}
nav#floating_section-left .social li {
  display: block;
  margin: 5px;
  background: var(--main-color-third);
  width: 80%;
  border-radius: 0 5px 5px 0;
  transition: all 1s;
}
nav#floating_section-left .social li:hover {
  transform: translate(140px, 0);
  background: var(--main-color-third);
}
nav#floating_section-left li.menu-item--active-trail {
  transform: translate(140px, 0);
}
nav#floating_section-left .social li:hover a {
  color: var(--main-color-second);
}
nav#floating_section-left .social li:hover span {
  color: #fff;
  transform: rotate(360deg);
  transition: all 1000ms;
}

nav#floating_section-left  a.nav-link {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-content: center;
  flex-wrap: nowrap;
}



@media (max-width: 1690px){
  nav#floating_section-left li.menu-item--active-trail ,
  nav#floating_section-left .social li:hover {
      transform: none;
      background: var(--main-color-third);
      filter: drop-shadow(2px 4px 6px black);
  }
  nav#floating_section-left li.menu-item--active-trail {
      transform: none;
      background: var(--main-color-third);
      filter: drop-shadow(2px 4px 6px black);
  }
  nav#floating_section-left li.menu-item--active-trail span{
      filter: invert(1);
  }
}

@media (max-width: 1495px){
    

  div#floatmenu {
      z-index: 1000;
  }
  nav#floating_section-left .social {
      position: fixed;
      bottom:0;
      top: auto;
      transform: none;
      display: block;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      align-content: center;
      transform: translateY(35px);
      background: var(--main-color-third);
      box-shadow: 0 0 5px 0 var(--main-color-second);
  }
  nav#floating_section-left .social * {
    filter: unset!important;
  }
  nav#floating_section-left .social li {
    display: block;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    margin-top: 1rem;
  }
  nav#floating_section-left a.nav-link {
  flex-direction: column-reverse;
  gap: 1rem;
  padding: 0;
  }
  nav#floating_section-left .social li:hover span {
    transform:none;
  }
  nav#floating_section-left .nav-link span{
    width: 30px;
    height: 25px;
    background-size: cover;
    top: 0px;
    background-position: center center;
  }

}

@media (max-width: 698px){
  nav#floating_section-left .social {
    transform: translateY(75px);
  }
}