.ki-entwickeln-wrapper {
  p {
    margin-bottom: 0 !important;
    @media (max-width: 767px) {
      font-size: 16px;
    }

    @media (min-width: 768px) and (max-width: 1079px) {
      font-size: 17px;
    }

    @media (min-width: 1680px) {
      font-size: 18px;
    }

    hyphens: auto;
  }

  .container {
    max-width: 1520px;

    @media (max-width: 767px) {
      padding: 0 40px !important;
    }

    @media (min-width: 768px) and (max-width: 1079px) {
      padding: 0 40px !important;
    }

    @media (min-width: 1080px) and (max-width: 1679px) {
      padding: 0 53px !important;
    }

    @media (min-width: 1680px) {
      padding: 0 40px !important;
    }
  }

  .bg-black {
    background-color: #000000;
    color: #ffffffe6;
  }

  .headline-subtitle {
    max-width: 820px;
    margin: 0 auto;
    font-family: "Sage Text", sans-serif;

    @media (max-width: 767px) {
      font-size: 16px;
      padding-bottom: 48px !important;
    }

    @media (min-width: 768px) and (max-width: 1079px) {
      padding-bottom: 72px !important;
      font-size: 20px;
    }

    @media (min-width: 1080px) and (max-width: 1679px) {
      font-size: 19px;
      padding-bottom: 80px !important;
    }

    @media (min-width: 1680px) {
      font-size: 22px;
      padding-bottom: 98px !important;
    }

    text-align: center;
    hyphens: auto;
  }

  h2 {
    max-width: 820px;
    margin: 0 auto;
    font-family: "Sage Headline", sans-serif;

    @media (max-width: 767px) {
      font-size: 34px;
    }

    @media (min-width: 768px) and (max-width: 1079px) {
      font-size: 46px;
    }

    @media (min-width: 1080px) and (max-width: 1679px) {
      font-size: 44px;
    }

    @media (min-width: 1680px) {
      font-size: 50px;
    }

    font-weight: 900;
    hyphens: auto;
  }

  .padding-left-0 {
    @media (max-width: 767px) {
      padding-top: 88px;
      padding-bottom: 48px;
    }

    @media (min-width: 768px) and (max-width: 1079px) {
      padding-top: 24px;
      padding-bottom: 56px;
    }

    @media (min-width: 1080px) and (max-width: 1679px) {
      padding: 32px 32px 32px 0px;
    }

    @media (min-width: 1680px) {
      padding: 40px 40px 40px 0px;
    }
  }

  .padding-right-0 {
    @media (max-width: 767px) {
      padding-top: 88px;
      padding-bottom: 48px;
    }

    @media (min-width: 768px) and (max-width: 1079px) {
      padding-top: 24px;
      padding-bottom: 56px;
    }

    @media (min-width: 1080px) and (max-width: 1679px) {
      padding: 32px 0px 32px 32px;
    }

    @media (min-width: 1680px) {
      padding: 40px 0px 40px 40px;
    }
  }

  .h2-small {
    text-align: left;
    hyphens: auto;
    font-weight: 900;
    margin: 0;

    @media (max-width: 767px) {
      font-size: 27px;
      margin-bottom: 24px !important;
    }

    @media (min-width: 768px) and (max-width: 1679px) {
      font-size: 34px;
    }

    @media (min-width: 1680px) {
      font-size: 40px;
    }
  }

  .kicker {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;

    p {
      font-family: "Sage Text", sans-serif;
      font-weight: 500;

      @media (max-width: 767px) {
        font-size: 15px;
      }

      @media (min-width: 768px) and (max-width: 1679px) {
        font-size: 16px;
      }

      @media (min-width: 1680px) {
        font-size: 18px;
      }
    }
  }

  .grid-3-columns {
    display: grid;

    @media (max-width: 767px) {
      grid-template-columns: repeat(1, 1fr);
      gap: 16px;
    }

    @media (min-width: 768px) and (max-width: 1079px) {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 64px;
      row-gap: 24px;
      padding: 0 28px;
    }

    @media (min-width: 1080px) and (max-width: 1679px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 72px;
      row-gap: 24px;
      padding: 0 28px;
    }

    @media (min-width: 1680px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 72px;
      row-gap: 24px;
      padding: 0 24px;
    }
  }

  .flex-item {
    display: flex;
    gap: 24px;
    align-items: start;
    padding-top: 24px;
    padding-bottom: 24px;

    h3 {
      margin-bottom: 8px;
      hyphens: auto;
      line-height: 1.4;

      @media (max-width: 767px) {
        font-size: 19px;
      }

      @media (min-width: 768px) and (max-width: 1679px) {
        font-size: 20px;
      }

      @media (min-width: 1680px) {
        font-size: 24px;
      }
    }

    p {
      @media (max-width: 767px) {
        margin-bottom: 18px !important;
      }

      @media (min-width: 768px) and (max-width: 1079px) {
        margin-bottom: 18px !important;
      }

      @media (min-width: 1080px) and (max-width: 1679px) {
        margin-bottom: 20px !important;
      }

      @media (min-width: 1680px) {
        margin-bottom: 20px !important;
      }
    }
  }

  .image-md {
    @media (max-width: 767px) {
      width: 50px !important;
      height: 50px !important;
      min-width: 50px;
      min-height: 50px;
    }

    @media (min-width: 768px) and (max-width: 1679px) {
      width: 53px !important;
      height: 53px !important;
      min-width: 53px;
      min-height: 53px;
    }

    @media (min-width: 1680px) {
      width: 60px !important;
      height: 60px !important;
      min-width: 60px;
      min-height: 60px;
    }
  }

  .flex-container {
    display: flex;
    gap: 24px;
    @media (max-width: 1079px) {
      flex-direction: column;
      gap: 16px;
    }
    justify-content: space-between;
    align-items: center;

    div {
      flex: 1 1 50%;
    }

    .order {
      @media (min-width: 1080px) {
        order: -1;
      }
    }

    svg {
      width: calc(100% + 48px);
      height: auto;
      display: block;
      margin-left: -24px;
      margin-right: -24px;
    }
  }

  .whitespace-nowrap {
    white-space: nowrap !important;
  }

  .style-list {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      background: none;
      padding-left: 36px;
      position: relative;
      margin-bottom: 8px;
      margin-top: 8px;

      hyphens: auto;

      @media (max-width: 767px) {
        font-size: 16px;
      }

      @media (min-width: 768px) and (max-width: 1679px) {
        font-size: 17px;
      }

      @media (min-width: 1680px) {
        font-size: 18px;
      }
    }

    li::before {
      content: "";
      position: absolute;
      margin-left: 3px;
      left: 0;
      top: 0.35em;
      width: 17px;
      height: 13px;
      background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='13' viewBox='0 0 17 13' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M2.29055 5.71337L0.160156 7.75436L6.38995 13L16.1602 1.71759L13.7014 0L6.02835 8.86069L2.29055 5.71337Z' fill='%2300A159'/></svg>")
        no-repeat center;
      background-size: contain;
    }
  }

  .logo-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    justify-items: center;
    align-items: center;

    @media (min-width: 1080px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    svg {
      max-width: 100%;
      height: auto;
      max-height: 73px;
    }
  }

  .mb-4 {
    @media (max-width: 767px) {
      margin-bottom: 54px !important;
    }

    @media (min-width: 768px) and (max-width: 1079px) {
      margin-bottom: 32px !important;
    }

    @media (min-width: 1080px) and (max-width: 1679px) {
      margin-bottom: 32px !important;
    }

    @media (min-width: 1680px) {
      margin-bottom: 54px !important;
    }
  }

  .text-center {
    text-align: center !important;
    max-width: 900px;

    h2 {
      text-align: center !important;
      margin: 0 auto;
    }
  }

  .link-white {
    color: #ffffffe6;
  }

  .text-big {
    @media (max-width: 767px) {
      font-size: 16px;
      margin-top: -8px;
    }

    @media (min-width: 768px) and (max-width: 1079px) {
      font-size: 20px;
    }

    @media (min-width: 1080px) and (max-width: 1679px) {
      font-size: 19px;
    }

    @media (min-width: 1680px) {
      font-size: 22px;
    }
  }

  .mb-6 {
    margin-bottom: 24px !important;
  }

  .pt-20 {
    @media (max-width: 1679px) {
      padding-top: 64px !important;
    }

    @media (min-width: 1680px) {
      padding-top: 80px !important;
    }
  }

  .pt-6 {
    @media (max-width: 767px) {
      padding-top: 24px !important;
    }

    @media (min-width: 768px) and (max-width: 1679px) {
      padding-top: 40px !important;
    }

    @media (min-width: 1680px) {
      padding-top: 64px !important;
    }
  }

  .pb-6 {
    @media (max-width: 767px) {
      padding-bottom: 24px !important;
    }

    @media (min-width: 768px) and (max-width: 1679px) {
      padding-bottom: 40px !important;
    }

    @media (min-width: 1680px) {
      padding-bottom: 64px !important;
    }
  }

  .mb-12 {
    @media (max-width: 1079px) {
      margin-bottom: 48px !important;
    }
  }

  .nowrap {
    white-space: nowrap !important;
  }

  .small-text {
    @media (max-width: 767px) {
      font-size: 16px;
    }

    @media (min-width: 768px) and (max-width: 1079px) {
      font-size: 17px;
    }

    @media (min-width: 1080px) and (max-width: 1679px) {
      font-size: 17px;
    }

    @media (min-width: 1680px) {
      font-size: 18px;
    }
  }
}