// -------------------------- //
// HEADINGS
// without nesting to set font-size correct see h2.h1
//
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: @gray-darker;
  // TOPLINE
  span:not([class]):not([class=""]) {
    font-size: 16px;
    color: @hwk-blue-light;
    display: block;
    @media (max-width: @screen-xs-max) {
    	font-size: 14px;
    }
  }
}

h3, .h3 {
  font-size: @font-size-h3;
}

h4, .h4 {
  span:not([class]):not([class=""]) {
    font-size: 14px;
    margin-bottom: 5px;
  }
}

h5, .h5 {
  font-size: @font-size-h5;
  span:not([class]):not([class=""]) {
    font-size: @font-size-xs;
  }
}

h6, .h6 {
  font-size: @font-size-h6;
  span:not([class]):not([class=""]) {
    font-size: @font-size-xs;
  }
}

//
// LINK common
// --------------------------------

a:not(.a-not-common) {
  border-bottom: 1px dotted @text-color;
  color: @link-color;
  &:active,
  &:hover,
  &:focus {
    text-decoration: none;
    background-color: @hwk-blue-light-25;
  }

  &.btn {
    border-style: solid;
    border-width: 1px;
  }
}

// remove dotted line from known elements
.carousel,
.dropdown,
.listgroup-wrapper,
.navbar-fixed-top,
#nav-level-3,
.panel-heading,
.section-teaser,
.site-footer {
  a {
    border-bottom: unset;

    &:hover,
    &:focus {
      //color: unset;
      background-color: unset;
    }
  }
}



p {
  color: @gray-dark;
  font-size: 20px;
  font-weight: 500;
  padding: 0px 0px 12px;
  margin: 0;
  line-height: @line-height-p;
  .glyphicon {
    top: 5px;
    //line-height: @line-height-p; // causes staircase effect with <br>
  }
}

small, .small {
  font-size: 85%;
  line-height: 1.4;
  .glyphicon {
    line-height: 1.2;
  }
}

// icon + text
// handle extrem long text line wrap
// needs <a> to be outside icon:
/*
<p class="icon-text-block">
  <span class="glyphicon glyphicon-xxx"></span>
  <a href="#"><span class="link-text">Linktext</span></a>
</p>
*/
.icon-text-block {
  display: flex;
  .glyphicon {
    flex-basis: 32px;
  }
  .small, &.small {
    .glyphicon {
      flex-basis: 30px;
    }
  }
  a:not(.btn) {
    flex: 1;
    border-bottom: unset;

    &:hover,
    &:focus {
      background-color: unset;
      .link-text {
        text-decoration: none;
        background-color: @hwk-blue-light-25;
      }
    }

    .link-text {
      border-bottom: 1px dotted @text-color;
    }
  }
}

// @since 2.0.1
.glyphicon.d-inline-block {
  float: none !important;
}
p .glyphicon.d-inline-block {
  top: 2px;
}

// --------------------------------

body {

  p {
    font-size: @font-size-base-p;
  }

  &, .content {

    // -------------------------- //
    // HEADINGS
    //
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
      margin-top: 0;
      line-height: @headings-line-height;
      font-weight: @headings-font-weight;
      .glyphicon {
        //line-height: @headings-line-height;;
      }

      &.white {
        &, span {
          color: #fff !important;
        }
      }
    }

    h1, .h1 {
      font-size: @font-size-h1;
      span {
        margin-bottom: 15px;
      }
      @media (max-width: @screen-xs-max) {
        font-size: 28px;
        margin-bottom: 15px;
      }
    }

    h2, .h2 {
      font-size: @font-size-h2;
      @media (max-width: @screen-xs-max) {
      	font-size: 24px;
      }
      span {
        margin-bottom: 7px;
      }

      @media (max-width: @screen-xs-max) {
        margin-bottom: 10px;
      }
    }

    h3, .h3 {
      margin-bottom: 12px;
      font-size: @font-size-h3;
      @media (max-width: @screen-xs-max) {
        font-size: 22px;
      }
      span {
        margin-bottom: 7px;
      }
    }

    h4, .h4 {
      margin-bottom: 12px;
      padding-bottom: 0;
      font-size: @font-size-h4;
      span:not([class]):not([class=""]) {
        margin-bottom: 5px;
      }
    }
    h5, .h5 {
      font-size: @font-size-h5;
    }
    h6, .h6 {
      font-size: @font-size-h6;
    }
    h5, .h5,
    h6, .h6 {
      margin: 0;
      padding-bottom: 0;
      color: @text-color;
      span:not([class]):not([class=""]) {
        margin-bottom: 2px;
      }
    }

    // -------------------------- //
    // TEXT
    //
    .lead {
      font-weight: @font-weight-bold;
      @media (max-width: @screen-xs-max) {
        font-size: 18px;
      }
    }

    .small, .font-size-small {
      font-size: @font-size-small;
      line-height: 22px;
    }

    .small-xs, .font-size-xs {
      font-size: @font-size-xs;
    }

    .small-xxs, .font-size-xxs {
      font-size: @font-size-xxs;
    }
  }

  .content {
    p + p {
      margin-top: 16px;
      margin-bottom: 0;
    }
    .small + .small {
      margin-top: 10px;
    }
    ul:not(.nav-tabs):not(.pagination):not(.aria-structure) {
      margin-left: 25px;
      list-style: none;

      li {
        position: relative;
        font-size: @font-size-base-p;
        margin-bottom: 12px;
        @media (max-width: @screen-xs-max) {
          font-size: 18px;
        }

        &::before {
          content: '\25A0';
          position: absolute;
          top: -2px;
          left: -20px;
          /* Safari ios only */
          @supports (-webkit-touch-callout: none) {
            font-size: 14px;
            top: 4px;
            left: -22px;
          }
        }
      }

      &.list-icon-check li,
      li.list-icon-check {
        &::before {
          content: '\E013';
          font-family: @icon-font-name;
          top: 0px;
          left: -25px;
        }
      }
    }
  }

  // -------------------------- //
  // BLOCKQUOTES
  //
  blockquote {

    &, &.color-hwk-blue-light, .color-hwk-blue-light {
      --blockquote-color: @hwk-blue-light;
    }

    &.color-hwk-blue-dark, .color-hwk-blue-dark {
      --blockquote-color: @hwk-blue-dark;
    }

    &.color-hwk-red-dark, .color-hwk-red-dark {
      --blockquote-color: @hwk-red-dark;
    }

    &.color-hwk-orange, .color-hwk-orange {
      --blockquote-color: @hwk-orange;
    }

    &.color-hwk-green-dark, .color-hwk-green-dark {
      --blockquote-color: @hwk-green-dark;
    }

    position: relative;
    padding: 0;
    margin: 40px 0;
    border: none;

    &, p {
      font-size: @font-size-large;
      font-style: italic;
    }

    footer {
      &::before {
        display: none;
      }
    }

    cite {
      font-size: @font-size-small;
      font-weight: @font-weight-normal;
    }

    // quotes
    &::before, &::after {
      font-weight: @font-weight-normal;
      font-size: 110px;
      position: absolute;
      line-height: 1;
    }

    &::before {
      content: '»';
      top: -40px;
      left: -60px;
    }

    &::after {
      content: '«';
      bottom: 6px;
      right: -44px;
    }

    // colors
    &, p, cite, &::before, &::after {
      // default
      color: @hwk-blue-light;
      color: var(--blockquote-color);
    }

    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      margin: 40px;
    }
    @media (max-width: @screen-xs-max) {
      margin: 20px 20px;
      &::before, &::after {
        font-size: 60px;
      }

      &::before {
        top: -20px;
        left: -35px;
      }

      &::after {
        bottom: 20px;
        right: -30px;
      }
    }
  }
}

//
// ICONS
// ---------------------
.content {
  .glyphicon {
    font-family: "HWK IconFont";
    font-size: 24px;
    //top: 5px;
    width: 32px;
    text-align: center;
  }

  .glyphicon-hero {
    font-size: 32px;
    padding-bottom: 5px;
  }

  .small .glyphicon {
    font-size: 22px;
    top: 1px;
    width: 30px;
  }
}

.glyphicon-vor:before {
  content: "\E079";
  transform: scaleX(-1);
  display: inherit;
}


// NEU VON KLAUS
.content p span.glyphicon {
  display: block;
  text-align: center;
  float: left;
}

footer #footer-content a .glyphicon {
  font-size: 20px;
  top: 1px;
  width: auto;
  float: left;
  @media (max-width: @screen-xs-max) {
  	width: 20px;
    text-align: center;
  }
}

.content span.glyphicon-hero {
  font-size: 32px;
  padding-bottom: 5px;
}

// neue Icons
.glyphicon-whatsapp:before {
  content: "\E201"
}

.glyphicon-snapchat:before {
  content: "\E202"
}

.glyphicon-tictoc:before {
  content: "\E203"
}

.glyphicon-instagram:before {
  content: "\E204"
}

// Weitere Icons
.glyphicon-aussenwirtschaft:before {
  content: "\E205"
}

.glyphicon-betriebsuebergabe:before {
  content: "\E206"
}

.glyphicon-betriebswirtschaft:before {
  content: "\E207"
}

.glyphicon-fachkraeftegewinnung:before {
  content: "\E208"
}

.glyphicon-frau:before {
  content: "\E209"
}

.glyphicon-mann:before {
  content: "\E210"
}

.glyphicon-gestaltung:before {
  content: "\E211"
}

.glyphicon-digitalisierung:before {
  content: "\E212"
}

.glyphicon-marketing:before {
  content: "\E213"
}

.glyphicon-recht:before {
  content: "\E214"
}

.glyphicon-standortsicherung:before {
  content: "\E215"
}

.glyphicon-technologie:before {
  content: "\E216"
}

.glyphicon-umwelt:before {
  content: "\E217"
}
