ihk24/gfi-ihk-2024/stories/_global/gfi-styles/_verteiler.scss

@import "ihk-finder-form";

.ihk-landing {
  overflow: hidden;

  .ihk-finder {
    max-width: 380px;
    margin-left: 10vw;
    margin-bottom: 20%;
    @media(max-width: 1239px) {
      max-width: 340px;
    }
  }

  @media(min-width: 768px) {
    .page-header {
      height: 120px;
    }
    .page-wrapper, .page-header.nav-open:not(.scrolled) ~ .page-wrapper {
      border-top: 120px solid white;
    }
  }

  .ihk-selection {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: calc(100vh - 220px);
    min-height: calc(var(--viewport-height, 1vh) * 100 - 220px);
    display: flex;
    align-items: center;
    @media(max-width: 567px) {
      margin-top: 0;
      margin-bottom: 15px;
    }

    .row {
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
    }

    .col {
      max-width: 50%;
      @media(max-width: 999px) {
        max-width: 500px;
        margin: 0 auto;
      }
      @media(max-width: 567px) {
        max-width: none;
        padding: 0 40px;
      }
    }

    .col:last-child {
      text-align: center;
    }

    .map {
      position: relative;
      display: block;
      width: calc(65vh - 100px);
      max-width: 100%;
      min-width: 400px;
      margin: 0 auto;

      &:before {
        content: "";
        position: relative;
        display: block;
        padding-top: 135%;
        padding-bottom: 1px;
        background-image: url("../../assets/img/germany.svg");
        background-size: 100%;
        background-repeat: no-repeat;
      }

      .marker {
        position: absolute;
        display: block;

        > a {
          position: absolute;
          display: block;
          width: 10px;
          height: 10px;
          background-color: $color-primary;
          border-radius: 50%;
          margin: -6px;
          box-shadow: 0 0 0 1px $color-primary-light-03;
          transition: 0.25s ease;
        }

        &:hover, &.hover {
          z-index: 102;

          > a {
            background-color: $color-secondary-dark;
            box-shadow: 0 0 0 6px rgba($color-secondary, 0.3);

            &:before {
              content: "";
              @include full-size;
              margin: -5px;
              border-radius: 50%;
            }
          }

          .tooltip {
            @include show;
            //transition: opacity 0.2s ease 0.1s, visibility 0s ease 0.1s, transform 0.2s ease 0.1s;
            transform: translate3d(0, 0, 0);
          }

          &:not(.open) .tooltip {
            pointer-events: none;
          }
        }

        &.open {
          > a {
            background-color: $color-secondary-dark;
            box-shadow: 0 0 0 6px rgba($color-secondary, 0.3);
          }

          .tooltip {
            @include show;
            z-index: 101;
            transform: translate3d(0, 0, 0);

            .title {
              font-size: 24px;
              padding: 26px 70px 190px 30px;
              min-width: 380px;
            }

            &.long-name .title, &.extra-long-name .title {
              min-width: 466px;
            }

            .closer {
              @include show(0.3s);
            }

            .contents {
              @include show(0.3s);
            }
          }

          &.sideways .tooltip {
            transform: translate3d(30px, 70%, 0);

            &::before {
              margin-top: -13px;
            }

            &::after {
              left: -11px;
              transition: 0.2s ease 0.2s;
            }
          }

          /*
          &[data-title="ihk-flensburg"], &[data-title="ihk-kiel"], &[data-title="ihk-neubrandenburg"] {
            .tooltip {
              transform: translate3d(30px, 40%, 0);
              &:before {
                border-width: 14px 14px 14px 0;
                border-color: transparent $color-primary transparent transparent;
                top: 60%;
                margin-top: 0;
                left: -14px;
              }
            }
          }
          */
        }
      }

      .tooltip {
        position: absolute;
        display: block;
        left: -2px;
        bottom: 100%;
        background-color: $color-primary;
        color: white;
        padding: 0;
        margin-bottom: 14px;
        @include hide;
        transform: translate3d(0, -10px, 0);
        box-shadow: 0 0 0 1px rgba(white, 0.2);
        pointer-events: none;
        z-index: 100;

        &:before {
          content: "";
          position: absolute;
          display: block;
          left: 0;
          top: 100%;
          margin-top: -1px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 12px 12px 0 0;
          border-color: $color-primary transparent transparent transparent;
          transition: 0.2s ease;
        }

        &::after {
          content: "";
          position: absolute;
          display: block;
          border-style: solid;
          border-width: 11px 11px 11px 0;
          border-color: transparent $color-primary transparent transparent;
          top: 30%;
          margin-top: 0;
          left: 1px;
          transition: 0.2s;
        }

        &.long-name, &.extra-long-name {
          .title {
            white-space: normal;
            min-width: 300px;
          }

          .contents {
            top: 90px;
          }
        }

        &.extra-long-name .contents {
          top: 120px;
        }

        .title {
          position: relative;
          display: block;
          font-size: 18px;
          line-height: 1.2;
          font-family: "Korb", sans-serif;
          white-space: nowrap;
          margin: 0;
          padding: 6px 12px;
          min-width: 50px;
          transition: min-width 0.2s ease 0.2s, font-size 0.2s ease 0.2s, padding 0.2s ease 0.2s;
        }

        .contents {
          position: absolute;
          top: 60px;
          font-size: 18px;
          padding: 10px 30px 26px;
          @include hide;
          width: 100%;

          &:after {
            content: "";
            position: relative;
            display: block;
            clear: both;
          }

          .btn {
            background-color: $color-secondary;
            float: right;
            color: $color-primary;
            white-space: nowrap;

            &:hover {
              box-shadow: 0 0 0 5px rgba($color-secondary, 0.5);
            }
          }
        }

        .details {
          margin-bottom: 30px;
        }

        .closer {
          position: absolute;
          right: 0;
          top: 0;
          width: 40px;
          height: 40px;
          background-color: transparent;
          border: 0;
          @include hide;
          @extend .icon-schliessen;
          font-size: 30px;
          line-height: 1;
          padding: 5px;
          text-align: center;
          color: white;
          margin: 10px;
          cursor: pointer;
          @include focus-visible;
          transition: 0.3s ease;

          &:before {
            font-family: "Icons";
          }
        }
      }
    }

    .artwork {
      width: calc(45vw - 50px);
      max-height: 66vh;
      top: 50%;
      transform: translate(0, -50%);

      @media(min-width: 1000px) {
        margin: 0;
        @media(max-width: 1339px) {
          width: 44vw;
        }
      }
      @media(min-height: 1050px) {
        max-height: 700px;
      }
    }

    @media(max-width: 999px) {
      .col:first-child {
        display: none;
      }
      .col:last-child {
        min-height: calc(400px + 30vw);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .artwork {
        width: 110%;
        height: 100%;
        max-height: none;
      }
      form {
        margin-left: 0;
      }
    }
    @media(max-width: 567px) {
      .artwork {
        width: 180%;
        margin-right: -80%;
        margin-top: 0;
      }
      form {
        max-width: 100%;
        margin-left: 0;
      }
    }
  }

  .page-header {
    &:before {
      border: 0;
      box-shadow: none;
      //display: none;
    }

    .logo {
      z-index: 1;

      &:after {
        content: "";
        @include full-size;
        margin-left: 160px;
        background-color: white;
      }
    }

    nav {
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      z-index: 0;
      @include hide;
      overflow: auto;
      height: calc(100vh - 100px);
      height: calc(var(--viewport-height, 1vh) * 100 - 100px);
      @media(max-width: 767px) {
        height: calc(100vh - 80px);
        height: calc(var(--viewport-height, 1vh) * 100 - 80px);
      }
      @media(max-width: 359px) {
        height: calc(100vh - 70px);
        height: calc(var(--viewport-height, 1vh) * 100 - 70px);
      }
      @media(max-width: 1200px), (max-height: 800px) {
        align-items: flex-start;
        justify-content: flex-start;
      }

      &::before {
        content: '';
        display: block;
        flex-grow: 1;
      }

      &:after {
        content: '';
        display: block;
        flex-grow: 2;
      }
    }

    &.nav-open {
      z-index: 103;
      @media (min-width: 1200px) {
        height: 120px;
        .logo img {
          height: 75px;
        }
      }

      nav {
        @include show;
        left: 0;
        transform: none;
      }

      .ihk-index {
        transform: translate3d(0, 0, 0) scale(1);
      }

      .toggle-ihk-list {
        @extend .icon-schliessen;

        span:first-child {
          display: none;
        }

        span:last-child {
          display: block;
        }
      }
    }

    .right {
      position: relative;
      z-index: 1;
      padding: 0 40px;
      @media(max-width: 999px) {
        padding: 0 20px;
      }
      @media(max-width: 567px) {
        padding: 0 17px;
      }

      > * {
        display: inline-block;
        vertical-align: middle;
        @include focus-visible;
        transition: 0.3s ease;
      }

      .has-icon {
        font-size: 0;
        text-decoration: none;
        padding: 10px;

        &:before {
          font-size: 30px;
          line-height: 1;
          font-family: "Icons";
        }

        @media(max-width: 999px) {
          display: none;
        }
      }
    }

    .toggle-ihk-list {
      position: relative;
      border: 2px solid $color-primary;
      padding: 15px 20px 15px 54px;
      font-family: "Korb", sans-serif;
      font-size: 22px;
      line-height: 26px;
      background-color: transparent;
      border-radius: 24px;
      cursor: pointer;
      min-width: 258px;
      margin-left: 15px;
      @extend .icon-liste;
      @media(max-width: 767px) {
        padding: 8px 16px 8px 46px;
        border-radius: 18px;
        font-size: 20px;
        min-width: 184px;
      }

      &:before {
        font-family: "Icons";
        position: absolute;
        font-size: 30px;
        line-height: 1;
        left: 16px;
        top: 50%;
        margin-top: -15px;
        @media(max-width: 767px) {
          left: 13px;
          font-size: 26px;
          line-height: 30px;
        }
      }

      span {
        display: block;

        &:last-child {
          display: none;
        }
      }

      @media(min-width: 1200px) {
        &:hover {
          box-shadow: 0 0 0 5px rgba($color-primary, 0.4);
          background-color: $color-primary;
          color: $color-white;
        }
      }
    }

    .ihk-list {
      max-width: 1442px;
      width: 100%;
      max-height: 100%;
      margin: 0 auto;
    }

    .ihk-index {
      font-size: 18px;
      line-height: 22px;
      list-style: none;
      padding: 30px 40px 50px;
      columns: 4;
      column-gap: 30px;
      margin: 0;
      transition: 0.4s ease;
      transform: translate3d(0, 0, 0) scale(0.94);
      @media(max-width: 1199px) {
        columns: 3;
      }
      @media(max-width: 999px) {
        columns: 3;
        padding: 30px 30px 50px;
      }
      @media(max-width: 567px) {
        columns: 1;
        padding: 20px 20px 40px;
      }

      li {
        position: relative;
        padding-left: 30px;

        ul {
          padding: 0;
          margin-bottom: 6px;
        }

        li {
          list-style: none;
          padding-left: 0;
        }
      }

      > li {
        break-inside: avoid-column;
        page-break-inside: avoid;
      }

      .index-letter {
        //position: absolute;
        //left: 0;
        //top: 4px;
        //width: 22px;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: -20px;
        display: inline-block;
        padding: 4px;
        height: 26px;
        border-radius: 4px;
        font-weight: 600;
        background-color: $color-primary-light-03;
        line-height: 22px;
        text-align: center;
      }

      a {
        position: relative;
        display: block;
        padding: 4px 5px 4px 24px;
        text-decoration: underline;
        @extend .icon-small-arrow-right-simple;
        transition: 0.2s ease;
        cursor: pointer;

        &:before {
          font-family: "Icons";
          display: flex;
          position: absolute;
          font-size: 18px;
          line-height: 22px;
          left: 0;
          color: $color-secondary;
          text-decoration: none;
        }

        &:hover {
          color: $color-secondary-dark;
        }
      }
    }
  }

  .finder-footer {
    text-align: right;
    @media(min-width: 1000px) {
      position: fixed;
      bottom: 0;
      right: 0;
    }

    nav {
      margin: 0 20px 20px;
    }

    ul {
      margin: 0;
      list-style: none;
      font-size: 0;
      line-height: 0;
    }

    li {
      display: inline-block;
      margin-right: 15px;
    }

    a {
      font-size: 18px;
      line-height: 24px;
      padding: 5px;
      display: block;
      @include focus-visible;
      transition: 0.2s ease;

      &.has-icon {
        position: relative;
        padding-right: 30px;
      }

      &:before {
        font-family: "Icons";
        font-size: 20px;
        position: absolute;
        display: block;
        right: 3px;
        font-weight: 400;
      }
    }
  }
}

.ihk-landing-article {

  .verteiler-article-cover {
    @media(min-width: 768px) {
      margin-top: 40px;
    }
    @media(max-width: 767px) {
      margin: -6px 0 0;

      .image-box {
        margin: 0 -20px;
      }

    }

    &:after {
      content: "";
      display: block;
      clear: both;
    }

    .row {
      justify-content: center;
    }

    .col {
      padding-top: 0;
      margin-bottom: -30px;

      @media(min-width: 768px) {
        margin-bottom: -60px;
      }
      @media(min-width: 1200px) {
        margin-bottom: -80px;
      }
      @media(min-width: 1400px) {
        max-width: 83.33334%;
      }
    }
  }

  article.col {
    position: relative;
    z-index: 1;
    background-color: #fff;
    max-width: 100%;

    .responsive-table {
      margin: 1rem -20px;
      padding: 0 20px;
      overflow: auto;

      table {
        margin: 0;
        border-right: 20px solid #fff;
      }
    }
  }

  .right {
    margin-right: 34px;
    @media(max-width: 767px) {
      margin-right: 20px;
    }

    @media(max-width: 359px) {
      margin-right: 16px;
    }
  }

  .verteiler-article-btn {
    position: relative;
    overflow: hidden;
    transition: 0.2s ease;
    background-color: #E3EBF5;
    color: #003366;

    &::before {
      transition: none;
    }

    @media(max-width: 359px) {
      padding-left: 12px;
      padding-right: 12px;

      &.has-icon {
        padding-right: 40px;

        &::before {
          right: 10px;
        }
      }
    }

    + .btn {
      margin-left: 12px;

      @media(max-width: 767px) {
        margin-left: 6px;
      }
    }


  }

  .finder-footer {
    margin-top: calc(1.5vw + 40px);
    @media(min-width: 1000px) {
      position: relative;
      bottom: auto;
      right: auto;
    }
  }
}