ihk24/templates/source/sass/webforms-component-modules/_fonts.scss

@charset "UTF-8";

@include font-definition('Icons', 'icons/icons');
@include font-definition('IHK24FontAwesome', 'ihk24-fontawesome/ihk24-fontawesome');
@include font-definition('Korb', 'korb_regular_macroman/korb-webfont');
@include font-definition('Korb', 'korb_bold_macroman/korb_bold-webfont', 700);
@include font-definition('Source Sans Pro', 'sourcesanspro_regular_macroman/SourceSansPro-Regular-webfont');
@include font-definition('Source Sans Pro', 'sourcesanspro_light_macroman/SourceSansPro-Light-webfont', 300);
@include font-definition('Source Sans Pro', 'sourcesanspro_italic_macroman/SourceSansPro-It-webfont', 400, italic);
@include font-definition('Source Sans Pro', 'sourcesanspro_semibold_macroman/SourceSansPro-Semibold-webfont', 600);
@include font-definition('Source Sans Pro', 'sourcesanspro_bold_macroman/SourceSansPro-Bold-webfont', 700);

@mixin h1 {
  font-family: "Korb", sans-serif;
  font-size: 64px;
  line-height: 1.1;
  font-weight: 400;
  margin: 0.6em -0.02em 0.5em;

  @media(max-width: 1339px) {
    font-size: 54px;
  }
  @media(max-width: 999px) {
    font-size: 46px;
  }
  @media(max-width: 767px) {
    font-size: 36px;
  }
}

@mixin h2 {
  font-family: "Korb", sans-serif;
  font-size: 42px;
  line-height: 1.2;
  font-weight: 400;
  margin: 1.6em -0.02em 0.6em;

  @media(max-width: 1339px) {
    font-size: 36px;
  }
  @media(max-width: 999px) {
    font-size: 32px;
  }
  @media(max-width: 767px) {
    font-size: 28px;
  }
}

@mixin h3 {
  font-family: "Korb", sans-serif;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 400;
  margin: 0.8em -0.02em 0.6em;

  @media(max-width: 1339px) {
    font-size: 32px;
  }
  @media(max-width: 999px) {
    font-size: 28px;
  }
  @media(max-width: 767px) {
    font-size: 24px;
  }
}

@mixin h4 {
  font-family: "Korb", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 28px;
  line-height: 1.2;
  margin: 1.5em 0 0.8em;

  @media(max-width: 1339px) {
    font-size: 24px;
  }
  @media(max-width: 767px) {
    font-size: 20px;
  }
}

@mixin h5 {
  font-family: "Korb", sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 400;
  margin: 1em 0 0.6em;

  @media(max-width: 1339px) {
    font-size: 20px;
  }
  @media(max-width: 767px) {
    font-size: 18px;
  }
}

@mixin h6 {
  font-size: 22px;
  font-weight: 600;
  margin: 1.2em 0 0.5em;

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

webforms-component {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 22px;
  line-height: 1.5;
  color: $color-text;
  color: var(--theme-color-text, $color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media(max-width: 1339px) {
    font-size: 20px;
  }
  @media(max-width: 999px) {
    font-size: 18px;
  }
  @media(max-width: 767px) {
    //font-size: 16px;
  }
  * {
    box-sizing: border-box;
  }
  .visually-hidden, .visuallyHidden, .visuallyhidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    max-width: 0;
    max-height: 0;
  }
}

webforms-component{
  h1, .like-h1 {
    @include h1;
  }

  h2, .like-h2 {
    @include h2;
  }

  h3, .like-h3 {
    @include h3;
  }

  h4, .like-h4 {
    @include h4;
  }


  h5, .like-h5 {
    @include h5;
  }

  h6 {
    @include h6;
  }
}


.title {
  font-family: "Korb", sans-serif;
  font-weight: 400;
}

webforms-component{
  h1, .like-h1,
  h2, .like-h2,
  h3, .like-h3,
  h5,
  h6 {
    &:first-child {
      margin-top: 0;
    }
  }

  p, .text, ul.nobreaks {
    margin: 0 0 0.5em;
  }

  ul.nobreaks {
    padding: 0;
    list-style: none;

    li {
      margin: 0;
      padding: 0;

      &:after {
        display: none;
      }
    }
  }

  p a, .text a {
    color: $color-link;
    transition: 0.2s ease;

    &:hover {
      color: $color-link-hover;
    }
  }

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

  .kicker {
    display: block;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 2px;
    letter-spacing: 0.3px;

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

    + h1, + h2, + h3, + h4 {
      margin-top: 0;
    }
  }

  .initial {
    font-weight: 600;
    margin: 12px 0 1em;
    min-height: 3.4em;

    &::first-letter {
      float: left;
      font-size: 3.4em;
      line-height: 1;
      margin: -0.04em 0.08em -0.2em -0.02em;
      font-weight: 400;
    }

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

      &::first-letter {
        margin-top: -0.05em;
      }
    }
  }

  [data-browser="firefox"] {
    .initial::first-letter {
      margin-top: 0.113em;
    }
  }

  .icon-box {
    font-family: "Icons";
    font-weight: 400;
    text-transform: none;
    text-decoration: none !important;
  }

}