@media screen and (min-width: 320px) and (max-width: 480px) {

   nav {
      height: 5rem;
   }

   .nav-container {
   width: 80%;
   }

   .nav-icons {
      display: none;
   }

   .nav-logo img {
      width: 160px;
   }

   .icons {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 10px;
   }

   .burger {
      display: block;
      z-index: 1001;
   }

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

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

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

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

   .nav-links li a {
      color: #000;
   }

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

   .container {
      width: 96%;
      margin-left: 2%;
   }

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

   .container-content {
      width: 80%;
      left: 10%;
      top: 30%;
   }

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

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

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

   .container--headline {
      width: 90%;
      padding: 3rem 0 2rem 0;
   }

   .container--headline.imprint {
      width: 90%;
      padding-right: 0;
   }

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

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

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

   p {
      font-size: 0.95rem;
      line-height: 1.65;
      letter-spacing: 0;
   }

   h1,
   .container-text h1 {
      font-size: 0.7rem;
      line-height: 1;
      margin-top: 0.5rem;
      letter-spacing: 2px;
      margin-bottom: 0;
   }

   h2 {
      font-size: 1.5rem;
      line-height: 1.15;
   }

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

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

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

   h4 {
      letter-spacing: 5px;
   }


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

   .button {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      min-width: 140px;
   }

   .chevron-icon {
      display: none;
   }
}