ihk24/gfi-ihk-2024/stories/components/contact/contact.scss

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.contact-wrapper {
  position: relative;
  background-color: var(--theme-color-primary-dimmed-04);
  border-bottom: var(--border-width) solid var(--theme-color-secondary);
  padding: var(--content-box-padding);
  overflow: hidden;
  font-size: var(--font-size-small);
  margin: var(--section-margin) 0;

  > h2, > h3, > .like-h2, > .like-h3 {
    margin-top: var(--section-headline-margin);
  }

  h5, .like-h5, h6, .like-h6 {
    margin-top: -0.3em;
    font-size: var(--font-size-copy);
    font-family: var(--font-korb);
  }

  .contact-person {
    display: flex;
    margin: 0 calc((var(--content-box-padding) + var(--col-padding)) * -1);
    padding-bottom: 25px !important;
  }

  &:not([data-tab-style="open"]) {
    .contact-person {
      position: absolute;
      top: 0;
      @include hide;
      transform: translate3d(0, 0, 0) scale(0.95);
      width: calc(100% + (var(--content-box-padding) + var(--col-padding)) * 2);

      &.active {
        position: relative;
        @include show(0.4s);
        transform: translate3d(0, 0, 0) scale(1);
        order: 1;
        z-index: 1;
      }
    }
  }

  .image-box, .text-box {
    flex: 1 1 100%;
    padding: 0 var(--col-padding);
  }

  p, .text {
    margin-bottom: 0.4em;
  }

  .contacts {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: height 0.3s $easeOutQuad;
  }

  .contact-buttons, .tab-buttons {
    padding: 0;
    list-style: none;
    margin: 1.1em -0.3em 0;

    li {
      margin: 0 0.3em 0.6em;
    }

    .btn {
      margin-left: -0.06em;
    }
  }

  .contact-buttons li:last-child {
    margin-bottom: 0;
  }

  .tab-buttons {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.3em 1.2em;

    .btn {
      /*
      --button-min-size: 38px;
      --button-padding: 8px 14px;
      font-size: var(--font-size-small);
      border-radius: var(--border-radius-sm);
      */

      &::after {
        display: none;
      }
    }

    li:not(.active) .btn:not(:hover) {
      background-color: var(--theme-color-primary-dimmed-03);
      color: var(--theme-color-primary);
    }
  }

  img {
    max-width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
    opacity: 1;

    &.loading {
      opacity: 0;
    }
  }

  &[data-size='lg'] {
    .image-box {
      max-width: 33.333333%;
      padding-left: calc(var(--content-box-padding) + var(--col-padding));
    }

    .text-box {
      padding-right: calc(var(--content-box-padding) + var(--col-padding));

      &:first-child {
        padding-left: calc(var(--content-box-padding) + var(--col-padding));
        max-width: 880px;
      }
    }
  }

  &[data-size='md'] {
    .image-box {
      padding-left: calc(var(--content-box-padding) + var(--col-padding));
    }

    .text-box {
      min-width: calc(100% - 360px - var(--content-box-padding) * 2);
      padding-right: calc(var(--content-box-padding) + var(--col-padding));

      &:first-child {
        padding-left: calc(var(--content-box-padding) + var(--col-padding));
      }
    }
  }

  &[data-size='sm'] {
    padding: calc(var(--content-box-padding) * 2) var(--content-box-padding);

    .image-box {
      margin-bottom: 1em;
    }

    .contact-person {
      flex-direction: column;
      padding: 0 var(--content-box-padding);
    }

    .tab-buttons {
      margin-bottom: 0.8em;
    }
  }

  &.ansprechpartner {
    background-color: var(--theme-color-primary-dimmed-03);
    padding: 20px;
    border-bottom: none;
  }
}

.sidebar .contact-wrapper h2, .sidebar .contact-wrapper .like-h2 {
  margin-top: var(--section-headline-margin);
  margin-bottom: 0.6em;
}

.sidebar, .contacts-in-text {
  .contact-wrapper {
    padding: 20px 20px 10px;
    font-size: 18px;

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

    + * {
      margin-top: 48px;
    }

    h2, .like-h2 {
      @extend h3;
      margin-top: 0;
    }

    .tab-buttons {
      padding: 0;
    }

    .contact-buttons li {
      display: block;
    }

    .contact-person {
      flex-direction: column;
      margin: 0;
      display: block;
      padding: 0;
      width: auto;

      > div {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 10px 0;

        &.text-box:first-child {
          padding: 0 0 10px;
        }
      }
    }
  }
}

.ansprechpartner {
  display: block !important;
  .contact{
    float: left;
    max-width: 49%;
  }
}