ihk24/templates/source/sass/partials/objects/_footer.scss

@charset "UTF-8";

.page-footer {
  padding: calc(1.5vw + 30px) 0 calc(1vw + 20px);
  margin-top: calc(1.5vw + 40px);
  background-color: $color-primary-light-04;
  background-color: var(--theme-color-primary-dimmed-04, $color-primary-light-04);
  border-bottom: 8px solid $color-primary;
  border-bottom: 8px solid var(--theme-color-primary, $color-primary);
  z-index: 10;

  .container {
    @media(max-width: 767px) {
      display: flex;
      flex-direction: column;
    }
  }

  .row.contact {
    .col {
      flex: 1 1 33.3333%;
      max-width: 33.3333%;

      @media(max-width: 767px) {
        flex: 1 1 100%;
        max-width: 100%;
        padding-top: 0;
        padding-bottom: 0;
      }
    }

    h6:first-child {
      margin-top: 6px;
    }
  }

  .logos {
    margin: 0 -10px;

    @media(min-width: 1000px) {
      text-align: right;
    }

    a {
      display: inline-block;
      margin: 0 10px;
    }

    img {
      max-height: 30px;
    }
  }

  .contact-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;

    @media(max-width: 767px) {
      margin-top: 10px;
    }

    li {
      position: relative;
      margin-bottom: 6px;
      color: $color-link;
      color: var(--theme-color-link, $color-link);
      pointer-events: none;

      &:hover a, &:hover {
        color: $color-secondary-dark;
        color: var(--theme-color-secondary-intensed, $color-secondary-dark);
      }

      &.mail {
        @extend .icon-email;
      }
      &.phone {
        @extend .icon-telefon;
      }
      &:before {
        position: absolute;
        font-family: "Icons";
        font-size: 30px;
        line-height: 1;
        top: 50%;
        margin-top: -15px;
        transition: 0.2s ease;

        @media(max-width: 999px) {
          font-size: 24px;
          margin-top: -12px;
        }
      }
    }

    a {
      position: relative;
      padding-left: 44px;
      pointer-events: all;
      transition: 0.2s ease;

      @media(max-width: 999px) {
        padding-left: 34px;
      }
    }
  }

  .row.social {
    @media(max-width: 1199px) {
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }

  .row.barrier-free {
    text-align: right;
    color: $color-link;
    color: var(--theme-color-link, $color-link);

    ul {
      list-style: none;
      text-align: right;
      margin: 0 -14px;
      padding: 0;

      @media(max-width: 767px) {
        text-align: left;
      }

      &:after {
        content: "";
        position: relative;
        display: block;
        border-bottom: 1px solid $color-primary-light-03;
        border-bottom: 1px solid var(--theme-color-primary-dimmed-03, $color-primary-light-03);
        margin: 24px 14px 0;
      }
    }

    li {
      position: relative;
      display: inline-block;
      margin: 0 14px;

      &:hover a, &:hover {
        color: $color-secondary-dark;
        color: var(--theme-color-secondary-intensed, $color-secondary-dark);
      }

      @media(max-width: 767px) {
        display: block;
        margin: 12px 14px;
      }

      &:before {
        font-family: "Icons";
        font-size: 30px;
        line-height: 1;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -15px;
        transition: 0.2s ease;

        @media(max-width: 767px) {
          font-size: 24px;
          margin-top: -12px;
          left: 0;
          right: auto;
        }
      }
    }

    a {
      position: relative;
      display: block;
      padding-right: 38px;
      transition: 0.2s ease;

      @media(max-width: 767px) {
        padding-right: 5px;
        padding-left: 32px;
      }
    }
  }

  .row.copyright {
    @media(min-width: 1200px) {
      font-size: 18px;

      .col:first-child {
        flex: 1 1 66.66667%;
        max-width: 66.66667%;
      }
      .col:last-child {
        flex: 1 1 33.33333%;
        max-width: 33.33333%;
      }
    }

    @media(max-width: 1199px) {
      order: 1;

      .col:last-child {
        min-width: 100%;
        order: -1;
      }
    }

    p {
      margin-bottom: 8px;
    }
  }

  .legal-nav {
    @media(min-width: 768px) {
      text-align: right;
      font-size: 18px;
    }

    nav.col {
      padding-bottom: 0;
    }

    ul {
      padding: 0;
      margin: 0 -15px;
      list-style: none;

      @media(max-width: 767px) {
        margin: 0 -8px;

        &:after {
          content: "";
          position: relative;
          display: block;
          border-bottom: 1px solid $color-primary-light-03;
          border-bottom: 1px solid var(--theme-color-primary-dimmed-03, $color-primary-light-03);
          margin: 26px 8px 20px;
        }
      }
    }

    li {
      display: inline-block;
      margin: 0 10px;

      @media(max-width: 767px) {
        margin: 0 3px;
      }
    }

    a {
      display: block;
      padding: 5px;
      text-decoration: none;
    }
  }
}


// footer
/*
.footer {
  color: $cGlobalText;
  clear: both;
  padding: 5px 15px 0; // msc: IHK-2341
  li {
    list-style: none;
  }
  .content-wrapper {
    border-top: 2px solid $primary-color-light;
    padding: 32px 0 0 0;
  }
  .navigation {
    .main-nav-items,
    .nav-items,
    .link-to-maps {
      display: none;
    }
  }
  .contact {
    .phone {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      &.mobile {
        padding: 0 0 20px 40px;
        position: relative;
        &:before {
          @include icons2();
          @include backgroundpositionheightweight(icon_phone);
          content: "";
          display: inline-block;

          left: 0;
          position: absolute;
          top: -10px;

        }
      }
    }
    a {
      display: block;
      font-size: 1.3125em; // 21px
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      padding: 25px 0 0 75px;
      &:first-of-type {
        padding: 0 0 0 75px;
      }
      &:before {
        @include icons2();
        @include backgroundpositionxy(icon_phone , 0, 0);
  		@include backgroundheigt(icon_phone);
  		@include backgroundwidth(icon_phone);
        content: "";
        display: inline-block;

        left: 0;
        position: absolute;
        top: -3px;

      }
      &.email {
        padding: 0 0 20px 40px;
        position: relative;
        &:before {
            @include backgroundpositionxy(icon_mail , 0, 0);
  			@include backgroundheigt(icon_mail);
  			@include backgroundwidth(icon_mail);
  			top: -9px;
  			left: -8px;
        }
      }
      &.address {
        padding: 0 0 0 40px;
        position: relative;
        &:before {
        	top: 8px;
        	@include backgroundpositionOffset(icon_adress , 1, 0);
  			@include backgroundheigt(icon_adress);
  			@include backgroundwidthOffset(icon_adress, 3);
        }
      }
    }
  }
  .socialmedia {
    @include clearfix();
    border-top: 1px solid $primary-color-light;
    margin: 20px 0 0 0;
    padding: 30px 0 0 0;
    .text {
      //msc: IHK-2972
      font-size: 1.3125em; // 21px
      text-align: center;
      width: 100%;
    }
    .social-list {
      @include clearfix();
      //msc: IHK-2972 margin: -2px 0 0;
      text-align: center;
      a {
        @include icons2();
        @include backgroundpositionheightweight(facebook_default);
        content: "";
        display: inline-block;

        text-indent: - 999999px;

        &.fb {
          @include backgroundpositionheightweight(facebook_default);
          &:focus,
          &:hover {
            @include backgroundpositionheightweight(facebook_over);
          }
        }
        &.yt {
          @include backgroundpositionheightweight(youtube_default);
          &:focus,
          &:hover {
            @include backgroundpositionheightweight(youtube_over);
          }
        }
        &.tw {
          @include backgroundpositionheightweight(twitter_default);
          &:focus,
          &:hover {
            @include backgroundpositionheightweight(twitter_over);
          }
        }
        &.ig {
          @include backgroundpositionheightweight(instagram_default);
          &:focus,
          &:hover {
            @include backgroundpositionheightweight(instagram_over);
          }
        }
      }
    }
  }
  .social-item {
    //msc: IHK-2972 float: left;
    //msc: IHK-2972 width: calc(100% / 3);
    min-width: 40px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
  }
  .partners {
    margin: 60px 0 0 0;
  }
  .partner-list {
    @include clearfix();
    margin: 0;
    li {
      float: left;
      padding: 0 20px 20px 0;
      .dihk {
        height: 42px;
        width: 84px;
      }
      .ahk {
        height: 42px;
        width: 84px;
      }
      .ihk-nord {
        height: 42px;
        width: 123px;
      }
      .ihk24 {
        height: 42px;
        width: 145px;
      }
      &:last-child {
        padding: 0;
      }
    }
  }
  .imprint {
    a {
      color: $cGlobalText;
      display: block;
      font-size: 1.3125em; // 21px
      padding: 15px 0 15px 40px;
      text-decoration: underline;
      &:first-child {
        padding: 30px 0 15px 40px;
      }
    }
  }
  .content-media-right.mobile {
    float: none;
  }
  .outro {
    font-size: 1.125em; // 18px
    margin: 60px 0 55px 0;
  }
  //msc: IHK-2972
  .partners {
    display: none;
  }
  // hide desktop content
  .desktop {
    display: none;
  }
  // show mobile content
  .mobile {
    display: block;
  }
}


//.document-number.printonly {
//  font-size : larger;
//  padding-bottom: 10px;
//  padding-top: 10px;
// }

@media (min-width: $screen-sm-min),
print {
  .footer {
    padding: 75px 15px 0;
    li {
      list-style: none;
    }
    .content-wrapper {
      padding: 70px 0 0 0;
    }
    .navigation {
      @include flexbox();
      @include flow-direction(row);
      > div {
        @include flex(1);
        margin: 0 20px 0 0;
      }
      .main-nav-items,
      .nav-items {
        display: block;
        font-size: 1.1875em; // 19px
        line-height: 1em; // 19px
        a {
          @include font-family(korbregular);
          display: block;
          margin: 15px 0 0 0;
        }
        ul {
          margin: 0;
        }
        li:first-of-type {
          a {
            margin: 0;
          }
        }
      }
      .contact {
        .phone.desktop {
          color: $primary-color;
          font-size: 1.125em; // 18px
          padding: 0 0 0 50px;
          position: relative;
          &:before {
            @include icons2();
            @include backgroundpositionheightweight(icon_phone);
            content: "";
            display: inline-block;

            left: 0;
            position: absolute;
            top: -9px;

          }
          a {
          	padding: 0px;
          }
        }
        a {
          font-size: 1.125em; // 18px
          margin: 20px 0 0 0;
          padding: 0 0 0 50px;
          &:before {
            top: -9px;
          }
          &:first-of-type {
            margin: 0;
          }
          &.phone {
            font-size: 19px;
            &:before {
               @include backgroundpositionheightweight(icon_phone);
            }
          }
          &.address {
            &:before {
               top: 5px;
               @include backgroundpositionOffset(icon_adress, 1, 0);
               @include backgroundheigt(icon_adress);
  			   @include backgroundwidthOffset(icon_adress, 2);
            }
          }
        }
      }
    }
    .imprint {
      @include clearfix();
      float: right;
      margin: 20px 0 20px 0;
      a {
        float: left;
        font-size: 1em; // 16px
        padding: 0;
        &:first-child {
          padding: 0px;
        }
        &:nth-child(n+2) {
          margin: 0 0 0 5px;
          padding: 0 0 0 10px;
          position: relative;
          &:before {
            content: "•";
            display: block;
            position: absolute;
            left: 0;
          }
        }
        &:hover,
        &:focus {
          text-decoration: none;
        }
      }
    }
    .middle-wrapper {
      @include clearfix();
      border-top: 1px solid $primary-color-light;
      clear: both;
      color: $cGlobalText;
      display : block;
    }
    .partners {
      display: block;
      float: left;
      margin: 30px 0 0;
    }
    .partner-list {
      li {
        padding: 0 20px 0 0;
        .dihk {
          height: 28px;
          width: 56px;
        }
        .ahk {
          height: 28px;
          width: 56px;
        }
        .ihk-nord {
          height: 28px;
          width: 82px;
        }
        .ihk24 {
          height: 28px;
          width: 111px;
        }
      }
    }
    .socialmedia {
      @include clearfix();
      float: right;
      font-size: 1em;
      margin: 35px 0 0;
      .content-media-left {
        float: left;
      }
      .content-media-right {
        float: right;
      }
    }
    .socialmedia {
      border: none;
      margin: 30px 0 0;
      padding: 0;
      width: 40%;
      .text {
        font-size: 1em; // 16px
        width: auto; //msc: IHK-2972
      }
      .social-list {
        float: left;
        min-width: 150px;
        overflow: hidden;
        width: calc(100% - 150px);
        //msc: IHK-2972
        margin: -2px 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
        a {
          &.fb {
            @include backgroundpositionheightweight(facebook_default);
            &:focus,
            &:hover {
              @include backgroundpositionheightweight(facebook_over);
            }
          }
          &.yt {
            @include backgroundwidth(youtube_default);
            @include backgroundhightOffset(youtube_default, 12);
            @include backgroundpositionOffset(youtube_default, 0, 6);
            &:focus,
            &:hover {
              @include backgroundwidth(youtube_over);
              @include backgroundhightOffset(youtube_over, 12);
              @include backgroundpositionOffset(youtube_over, 0 , 6);
            }
          }
          &.tw {
            @include backgroundpositionheightweight(twitter_default);
            &:focus,
            &:hover {
              @include backgroundpositionheightweight(twitter_over);
            }
          }
        }
      }
    }
    .social-item {
      min-width: 50px;
      //msc: IHK-2972
      margin-right: 0px;
    }
    // hide mobile content
    .mobile {
      display: none;
    }
    // show desktop content
    .desktop {
      display: block;
    }
    .outro {
      clear: both;
      color: $cGlobalText;
      font-size: .9375em; // 15px
      margin: 20px 0 0 0;
    }
  }
}
*/