@charset "UTF-8";

.richtext .steps {
  .text a, .rte--list a {
    &.external, &.extranet, &.intranet, &[data-linktypeicon="CMExternalLink"], &[data-linktypeicon="CMDownload"] {
      background-color: $color-primary-light-03;
      background-color: var(--theme-color-primary-dimmed-02, $color-primary-light-03);

      &:after {
        outline-color: $color-primary-light-03;
        outline-color: var(--theme-color-primary-dimmed-02, $color-primary-light-03);
        color: $color-primary;
        color: var(--theme-color-primary, $color-primary);
      }
    }
  }
}

.steps {
  position: relative;
  display: block;
  margin: calc(3% + 20px) 0;
  padding: 32px 0 34px;
  background-color: $color-primary-light-04;
  background-color: var(--theme-color-primary-dimmed-04, $color-primary-light-04);

  > h3, > h2 {
    margin: 0 42px;
    border-bottom: 1px solid $color-primary-light-02;
    border-bottom: 1px solid var(--theme-color-primary-dimmed-02, $color-primary-light-02);
    padding-bottom: 20px;
  }

  .slide {
    padding: 24px 42px;

    &:not(.current) {
      height: 1px;
    }

    > *:last-child {
      margin-bottom: 2px;
    }
  }

  .prev, .count {
    display: none;
  }

  .next {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 42px;
    @extend .btn;
    @extend .has-icon;
    @extend .icon-pfeil-rechts;

    &:active, &:focus, &:active:focus {
      color: $color-white;
      outline: 0;
    }

    &:after {
      content: "Weiter";
    }
  }

  .tabs {
    list-style: none;
    padding: 32px 0 0;
    margin: 0 42px;
    border-top: 1px solid $color-primary-light-02;
    border-top: 1px solid var(--theme-color-primary-dimmed-02, $color-primary-light-02);

    button {
      font-family: "Korb";
      display: inline-block;
      position: relative;
      background-color: $color-primary-light-03;
      color: $color-primary;
      padding: 5px 18px;
      border-radius: 18px;
      margin-right: 10px;
      text-decoration: none;
      transition: 0.3s ease;
      @include focusvisible;
      line-height: 1.2;
      border: 0;
      cursor: pointer;
      margin-bottom: 8px;
      margin-left: -2px;
    }

    li.active button, button:hover {
      background-color: $color-primary;
      color: $color-white;
    }
  }

  @media(max-width: 567px) {
    .controls {
      .next {
        position: relative;
        margin: 20px 20px 0;
        float: right;
      }
      &:after {
        content: "";
        position: relative;
        display: block;
        clear: both;
      }
    }
  }
}

.main-col .steps {
  .controls li {
    padding: 0;
    margin: 0;

    &:after {
      display: none;
    }
  }

  .slide {
    padding: 24px 42px;

    &:not(.current) {
      height: 1px;
    }

    > *:last-child {
      margin-bottom: 2px;
    }
  }

  .prev, .count {
    display: none;
  }

  .tabs {
    list-style: none;
    padding: 32px 0 0;
    margin: 0 42px;
    border-top: 1px solid $color-primary-light-02;
    border-top: 1px solid var(--theme-color-primary-dimmed-02, $color-primary-light-02);
  }

  @media(max-width: 567px) {
    margin: calc(1.5vw + 28px) -20px 0;
    padding: 24px 0 28px;

    > h3, > h2, .tabs {
      margin: 0 20px;
    }

    .slide {
      padding: 20px;
    }
  }
}