@media screen and (min-width: 481px) and (max-width: 768px) {

   nav {
      height: 5rem;
   }
   .nav-container {
      width: 80%;
   }

   .navbar-active {
      height: 8vh;
      background: var(--scharff-blue);
   }

   .nav-icons {
      display: none;
   }


   .icons {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 0;
      z-index: 2000;
   }

   .nav-links {
      position: fixed;
      right: 0;
      height: 110vh;
      top: 80px;
      background: var(--scharff-jade);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      margin-right: 0;
      padding-top: 8rem;
      width: 100%;
      transform: translateX(0%);
      transition: transform 0.35s ease-in;
   }

   .nav-active {
      transform: translateX(100%);
   }

   .nav-links .desktop {
      display: none;
   }

   .nav-links li {
      opacity: 0;
   }

   .nav-links li.desktop_item {
      display: none;
   }

   .nav-links li.mobile_item {
      display: block;
   }

   nav .nav-inner li a {
      font-size: 14px;
      line-height: 2;
   }

   nav .nav-inner li a:hover {
      color: var(--gold-color);
   }

   .nav-links li.mobile_item a {
      text-align: left;
      font-size: 0.8rem;
      letter-spacing: 2px;
   }

   nav .nav-inner li.desktop_job a:hover {
      color: var(--scharff-blue);
   }

   .nav-logo img {
      width: 200px;
      margin-top: auto;
   }

   .burger {
      display: block;
      margin-top: 11px;
   }

   .container {
      width: 96%;
   }

   .container.onTop {
      margin-top: 5rem;
   }

   .container-content {
      width: 60%;
      left: 6%;
      top: 30%;
   }

   .container-content-text.center {
      width: 80%;
   }

   .container-content-text h1 {
      padding: 0.5rem 1rem;
   }

   .container-content-text h2 {
      padding: 0.5rem 1rem;
   }

   .container--headline {
      width: 80%;
      padding-right: 10%;
   }

   .container--headline.imprint {
      width: 80%;
   }

   .container--inner {
      flex-direction: column;
      width: 80%;
   }

   .container-content.blue {
      left: 35%;
      top: 30%;
   }

   .container-content.green {
      left: 35%;
      top: 30%;
   }

   p {
      font-size: 0.9rem;
      line-height: 1.65rem;
   }

   h1 {
      color: #fff;
      font-size: 0.5rem;
      line-height: 1;
      margin-top: 0.5rem;
      letter-spacing: 5px;
      margin-bottom: 0;
   }

   h2 {
      font-size: 1.85rem;
      line-height: 1;
   }

   h2.big {
      font-size: 1.85rem;
      line-height: 1;
   }

   h2.small {
      font-size: 1.85rem;
   }

   h3 {
      font-size: 1.25rem;
      line-height: 1.1;
   }


   .button-group {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 80%;
      margin: auto;
      gap: 2rem;
   }

   .chevron-icon {
      display: none;
   }

}