.finder {
  &.beratungsstellen {
    .views-exposed-form {
      .search-block {
        width: 100%;
        margin: 0 auto;
        &.bg-primary-300 {
          background-color: #30737F;
        }
        .search-label {
          text-transform: uppercase;
        }
        .search-form-wrapper {
          position: relative;
          #edit-ort-wrapper {
            position: relative;
            z-index: 1;
          }
          .form-item {
            position: relative;
          }
          .form-actions {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            aspect-ratio: 1/1;
            overflow: hidden;
            z-index: 2;

            input {
              position: relative;
              font-size: 0;
              width: 100%;
              aspect-ratio: 1/1;
              overflow: hidden;
              border: none;
              z-index: 2;
            }
            &::before {
              position: absolute;
              top: 2px;
              right: 2px;
              bottom: 2px;
              left: 2px;
              content: ' ';
              background-image: url('../../images/icons/search.svg');
              background-repeat: no-repeat;
              background-size: 80%;
              background-position: center center;
              display: block;
              background-color: #FAF0E8;
            }
          }
        }
        .form-item-ort-value {
          display: none;
        }

        .origin-address-autocomplete {
          label {
            display: none;
          }

          .description {
            display: none;
          }
        }
      }
      .find {
        .text-primary-300 {
          color: #30737F;
        }
        &.kategorie {
          .bef-checkboxes {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: stretch;
            gap: 1rem;
            .form-item {
              flex-basis: 100%;
              flex-grow: 0;
              flex-shrink: 0;
              position: relative;
              @media all and (min-width: 768px) {
                flex-basis: calc(50% - .5rem);
              }
              @media all and (min-width: 1024px) {
                flex-basis: calc(25% - .75rem);
                width: calc(25% - 0.75rem);
              }
              input[type="checkbox"] {
                visibility: hidden;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 2;
              }

              input[type="checkbox"] ~ label {
                height: 100%;
                .card {
                  border: 1px solid white;
                  border-bottom: 6px solid var(--border);
                  background-color: white;
                  padding: 12px 8px;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  justify-content: flex-start;
                  .tax_name {
                      h4 {
                      font-weight: 700;
                      color: var(--color);
                        margin-bottom: 8px;
                    }
                    p {
                      margin-bottom: .25rem;
                      hyphens: auto;
                      color: #30737F;
                    }
                  }
                  &:hover {
                    cursor: pointer;
                  }
                  &.goextern {
                    padding: 0;
                    justify-content: space-between;
                    .tax_name {
                      padding: 12px 8px;
                    }
                    .goextern_sign {
                      width: 100%;
                      height: 36px;
                      text-align: right;
                      position: relative;
                      mask-image: url('../../public/images/misc/extern_mask.svg');
                      mask-repeat: no-repeat;
                      mask-position: bottom right;
                      background-color: #F3DFCF;
                      .goextern_icon {
                        width: 12px;
                        height: 12px;
                        background-image: url('../../public/images/icons/arrow-up-extern.svg');
                        content: '';
                        position: absolute;
                        right: 8px;
                        bottom: 10px;
                        background-repeat: no-repeat;
                        background-position: center center;
                      }
                    }
                  }
                }
              }

              input[type="checkbox"]:checked ~ label {
                .card {
                  border: 1px solid var(--border);
                  border-bottom: 12px solid var(--border);
                  padding-bottom: 2px;
                }
              }
            }
          }
          .katchips {visibility:hidden;}
        }
        &.actions {
          input {
            border-color: #30737F;
            color: #30737F;
            width: auto;
            margin: 0 auto;
            @media all and (max-width: 767px) {
              width: 100%;
            }
          }
        }
      }
    }
    #katchips-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      .petrol {
        flex-basis: auto;
        width: auto;
        background-color: #0f6674;
        color: white;
        border-radius: .75rem;
        padding: .25rem .75rem;
        line-height: 12px;
        font-size: 12px;
      }
    }
    .twocol {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 24px;
      justify-content: stretch;
      .views-row {
        flex-basis: calc(50% - 12px);
        flex-grow: 0;
        flex-shrink: 0;
      }
    }
    .content-h-100 {
      @media all and (min-width: 640px) {
        min-height: 500px;
      }
    }
    .content-h-100 > div {
      @media all and (min-width: 640px) {
        height: 100%;
        min-height: 500px;
        position: relative;
      }
    }
    .content-h-100 .map {
      height: 100%;
      min-height: 90vh;
      position: relative;
      @media all and (min-width: 640px) {
        height: 600px!important;
        padding-bottom: 16px;
        min-height: 300px;
      }
    }
    .finderresults {
      &.scroll {
        max-height: 600px;
        overflow-y: scroll;
        @media all and (max-width: 639px) {
          .views-row {
            .field--name-field-beratungsstellen-kategorie {
              margin: .25rem 0;
            }
            .field--name-field-address {
              p {
                margin: 0;
              }
            }
          }
        }
      }
      &.map {
        .itnrwMap {
          padding-bottom: 0;
          position: relative;
          overflow: visible;
          .popover {
            max-width: 300px !important;
            .popover-body {
              width: 300px !important;
            }
          }
          @media all and (min-width: 640px) {
            position: absolute!important;
          }
        }
      }
    }
    .sidebar-list {
      .view-content {
        a {
          &:before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 4px;
            background-image: url('../../images/icons/beratungsstellen.svg');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
          }
        }
      }
      .finder-back {
        a {
          text-decoration: none;
          &:before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 4px;
            background-image: url('../../images/icons/breadcrumb_divider.svg');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            transform: rotate(180deg);
          }
        }
      }
    }
  }
  &.but {
    .search-block {
      width: 100%;
      margin: 0 auto;
      .search-label {
        text-transform: uppercase;
      }
      input {
        padding: 0.75rem;
        color: #000;
        width: 100%;
      }
      .nolabel {
        label {
          display: none;
        }
      }
    }
    .bef-exposed-form {
      flex-direction: column;

      .form-radios {
        .form-item {
          border: 1px solid #000;
          padding: 10px 20px;
          margin-bottom: 12px;
          text-align: left;
          display: flex;
          flex-direction: row;
          align-items: center;
          input {
            width: 24px;
            height: 24px;
            margin-right: 16px;
            accent-color: #30727f;
            flex-shrink: 0;
            flex-grow: 0;
          }
          label {
            font-size: 20px;
            flex-grow: 1;
            flex-shrink: 1;
            min-height: 55px;
            h4 {
              font-weight: 700;
            }
            .tax_name {
              flex-grow: 1;
              justify-content: center;
              line-height: 20px;
              hyphens: auto;
            }
            .tax_icon {
              aspect-ratio: 1/1;
              height: 55px;
              background-size: contain;
              &.buergergeld {
                background-image: url('../../images/misc/buergergeld.svg');
                background-size: contain;
                background-position: center center;
              }
              &.sonstige {
                background-image: url('../../images/misc/sonstige_leistung.svg');
                background-size: contain;
                background-position: center center;
              }
              &.keine_leistung {
                background-image: url('../../images/misc/keine_leistung.svg');
                background-size: contain;
                background-position: center center;
              }
            }
          }
          /*&:first-of-type {
            display: none;
          }*/
        }
      }
    }
  }
}

.beratungsstellen {
  &.teaser {
    height: 100%;
    .title {
      line-height: 1rem;
      @media all and (min-width: 640px) {
        line-height: 2rem;
      }
    }
    .stelleninfo {
      .chargeable_item {
        background-color: #FAF0E8;
      }
      .flex {
        margin: 8px 0;
      }
      .icon {
        width: 16px;
        height: 16px;
        align-self: flex-start;
        position: relative;
        top: 4px;
        &.location {
          display: block;
          content: url('../../images/icons/location.svg');
        }
        &.phone {
          display: block;
          content: url('../../images/icons/phone.svg');
        }
        &.mail {
          display: block;
          content: url('../../images/icons/mail.svg');
        }
        &.url {
          display: block;
          content: url('../../images/icons/url.svg');
        }
      }
    }
  }
}
.paragraph--type--suche-but,
.paragraph--type--suche-beratungsstellen,
.paragraph--type--zustaendigkeitsfinder-komponente {
  .views-exposed-form {
    .auto-results-wrapper {
      border: none;
      li {
        color: #01626B;
        text-align: left;
        padding: 10px;
        &.auto-selected {
          background-color: #B1B1B1;
          &:hover {
            color: #ffffff;
            background-color: #01626B;
          }
        }
      }
    }
  }
}
.itnrwMap {
  .popover {
    .popover-header {
      display: none;
    }
    .popover-body {
      padding: 0 !important;
      height: auto !important;
      .bs_popup {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-bottom: 5px solid;
        background-color: #fff;
        padding: 10px;
        font-size: 1rem;
        h5 {
          font-weight: 700;
          color: #01626B;
        }
        .popup_address {
          .icon {
            width: 16px;
            height: 16px;
            align-self: flex-start;
            position: relative;
            top: 4px;
            &.location {
              display: block;
              content: url('../../images/icons/location.svg');
            }
          }
          p {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
.finder-wrapper {
  background-color: #faf0e8;
  padding: 28px;
}
.hyphens-auto {
  hyphens: auto;
}