.b-form,
.frame-type-form_formframework {
  @media (min-width: 400px) {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @extend .section-title;
  }

  &.t-blue {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: $white;
    }

    .form-label,
    .form-check-label,
    .form-check-wrapping-label .form-check-label {
      color: $white;
    }

    .form-text {
      color: $white;
    }

    .form-control,
    .form-select {
      background-color: $white;
      color: $primary;
      border-color: $primary-50;

      &:hover {
        border-color: $primary;
      }

      &:focus {
        background-color: $white;
      }
    }

    .form-check-input {
      background-color: $white;
      border-color: $primary-50;

      &:hover {
        border-color: $primary;
      }

      &:checked {
        background-color: $primary;
        border-color: $primary;
      }
    }

    .form-control,
    .form-select,
    .form-check-input {
      &:focus-visible {
        outline-color: $secondary-rosenrot;
      }
    }
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .btn {
    @extend .btn-primary;
    display: block;
    margin-left: auto;
    margin-top: 1rem;
  }

  label {
    font-size: $font-size-sm;
    .required {
      color: $color-accent;
      margin-left: 0.25rem;
    }
  }

  .container,
  [class*="container-"] {
    max-width: 700px !important;

    @include media-breakpoint-up(xl) {
      max-width: 800px !important;
    }

    @include media-breakpoint-up(1800) {
      max-width: 900px !important;
    }
  }
}

.b-form {
  @include media-breakpoint-up(xl) {
    .form-control,
    .form-select {
      padding: 1rem 1rem;
    }
  }
  @include media-breakpoint-up(1600) {
    .form-control,
    .form-select {
      padding: 1.25rem 1rem;
    }
  }

  &--banner {
    overflow: hidden;

    > div {
      overflow: visible !important;
    }

    .b-form {
      &__inner {
        padding: clamp(1rem, 2vw, 2rem) 0;
      }

      &__title {
        margin-bottom: 1.5rem;
      }

      &__column--form {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 3rem calc(var(--hks-gutter-x) * 0.5);

        @include media-breakpoint-up(xl) {
          padding: 2rem 0;
        }

        // @include media-breakpoint-up(1600) {
        //   padding: 0;
        // }
      }

      &__accent-wrapper {
        max-width: 800px;

        &.t-accent--block {
          padding: 0;
        }
      }

      &__form-wrap {
        width: 100%;

        form {
          width: 100%;
          margin-inline-start: 0;
          margin-inline-end: auto;
        }
      }

      &__figure {
        position: relative;
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      &__image {
        width: 100%;
        height: 100%;
        min-height: 16rem;
        object-fit: cover;
      }
    }

    @include media-breakpoint-up(xl) {
      .b-form {
        &__form-wrap form {
          max-width: none;
        }

        &__image {
          min-height: 100%;
        }
      }
    }

    @include media-breakpoint-up(1800) {
      .b-form {
        &__form-wrap form {
          max-width: none;
        }
      }
    }
  }

  &:has(.t-accent) {
    overflow: visible;
  }
}

.b-banner-form div:has(.t-accent) {
  overflow: visible;
}