// // Headlines // —————————————-

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {

font-weight: $heading-font-weight;
margin: 0;

&.brand {
  font-weight: 800;
  text-transform: uppercase;
}

&.underline, &.cluster {
  padding-left: 12px;
  padding-right: 12px;
  border-bottom: 1px solid $heading-border-color;
}

&.underline {
  text-align: center;
}

&.cluster {
  color: $font-color-light;
}

&.thin {
  font-weight: 200;
}

&.marketing-l {
  @include headline-variant($font-size-headline-marketing-elmt-l);
  font-weight: 200;
}

&.marketing-xl {
  @include headline-variant($font-size-headline-marketing-elmt-xl);
  font-weight: 200;
}

small,
.small {
  color: $font-color-light;
  font-size: 84%; // -16%
}

}

h1, .h1 { @include headline-variant($font-size-headline-h1); } h2, .h2 { @include headline-variant($font-size-headline-h2); } h3, .h3 { @include headline-variant($font-size-headline-h3); } h4, .h4 { @include headline-variant($font-size-headline-h4); } h5, .h5 { @include headline-variant($font-size-headline-h5); } h6, .h6 { @include headline-variant($font-size-headline-h6); }

// // Copytext // —————————————- p {

margin: 0;
padding-top: capline-bu(1, $font-size-regular, $line-height-regular); // depends on body
padding-bottom: baseline-bu(1, $font-size-regular, $line-height-regular); // depends on body

&.text-xsmall {
  padding-top: capline-bu(1, $font-size-xsmall, $line-height-regular); // depends on .text-small
  padding-bottom: baseline-bu(1, $font-size-xsmall, $line-height-regular); // depends on .text-small
}

&.text-small {
  padding-top: capline-bu(1, $font-size-small, $line-height-regular); // depends on .text-small
  padding-bottom: baseline-bu(1, $font-size-small, $line-height-regular); // depends on .text-small
}

&.text-large {
  padding-top: capline-bu(1, $font-size-large, $line-height-regular); // depends on .text-large
  padding-bottom: baseline-bu(1, $font-size-large, $line-height-regular); // depends on .text-large
}

&.text-xlarge {
  padding-top: capline-bu(1, $font-size-xlarge, $line-height-regular); // depends on .text-xlarge
  padding-bottom: baseline-bu(1, $font-size-xlarge, $line-height-regular); // depends on .text-xlarge
}

}

// // Emphases // —————————————- small, .text-xsmall {

font-size: $font-size-xsmall;

}

.text-small {

font-size: $font-size-small;

}

.text-large {

font-size: $font-size-large;

}

.text-xlarge {

font-size: $font-size-xlarge;

}

.text-xxlarge {

font-size: $font-size-headline-h2;

}

.text-xxxlarge {

font-size: $font-size-headline-h2;

}

.text-marketing-l {

@include headline-variant($font-size-headline-marketing-elmt-l);
font-weight: 200;

}

.text-marketing-xl {

@include headline-variant($font-size-headline-marketing-elmt-xl);
font-weight: 200;

}

.text-thin {

font-weight: 200 !important;

}

.text-semibold {

font-weight: $font-weight-semibold !important;

}

.text-strong, .text-bold {

font-weight: bold !important;

}

.text-emphased, .text-italic {

font-style: italic !important;

}

.text-uppercase {

text-transform: uppercase !important;

}

.text-muted {

color: $color-muted !important;

}

dfn, abbr, abbr {

background-image: $dfn-background-image;
background-position: 0 1em;
background-repeat: repeat-x;
background-size: 2px 1px;
border-bottom: 0; // reset normalize
font-style: inherit;
cursor: help;

}

mark {

background-color: $marked-bgr-color;
color: $marked-font-color;
padding: $marked-padding;

}

.text-positive { @include emphasis-variant($font-color-positive); } .text-warning { @include emphasis-variant($font-color-warning); } .text-negative { @include emphasis-variant($font-color-negative); } .text-brand { @include emphasis-variant($font-color-brand); } .text-inactive { @include emphasis-variant($font-color-inactive, true); }

// // Lists // —————————————- .list-unordered, .list-unordered-plain {

list-style: none;
margin: $list-unordered-margin;
padding: $list-unordered-padding;

> li:before {
  content: '\2013'; // endash + enspace
  padding-right: $list-unordered-indent;
}

.list-ordered,
.list-unordered,
.list-unordered-plain {
  margin-top: 0;
}

}

.list-unordered-bullet > li:before {

content: '\25AA'; // black small square + enspace

}

.list-unordered-plain {

> li:before {
  content: none;
  padding-right: 0;
}

}

.list-ordered {

list-style: none;
margin: $list-ordered-margin;
padding: $list-ordered-padding;
counter-reset: list-index;

> li {
  counter-increment: list-index;
}

&[reversed] > li {
  counter-increment: list-index - 1;
}

> li:before {
  content: counters(list-index, '.') '';
  padding-right: $list-ordered-indent;
}

.list-ordered,
.list-unordered {
  margin-top: 0;
}

}

.list-ordered-semibold > li:before {

font-weight: $font-weight-semibold;

}

// // Description Lists // —————————————-

.list-desc {

margin-top: 0; // Remove browser default
//margin-bottom: @line-height-computed;

> dd {
  margin-left: 0; // Undo browser default
  padding-bottom: baseline-bu(1, $font-size-regular, $line-height-regular);
}

}

.list-desc-horizontal {

@include clearfix();

> dt {
  text-align: left;
  font-weight: 600;
}

> dd {
  margin: 0;
  padding-bottom: baseline-bu(1, $font-size-regular, $line-height-regular);
}

@media (min-width: $description-list-breakpoint) {

  > dt {
    clear: left;
    float: left;
    text-align: right;
    width: ($component-offset-horizontal - building-units(1));
    font-weight: normal;
  }

  > dd {
    margin-left: $component-offset-horizontal;
    padding-bottom: 0;
  }

}

}

.list-desc-semibold {

> dt {
  font-weight: $font-weight-semibold;
}

}

// // Price Labels // —————————————-

.price {

margin: 0;
padding: 0;
vertical-align: baseline;
display: inline-block;

> sup {
  line-height: $line-height-ratio; // override normalize
  display: inline-block;
  vertical-align: top;
}

@include price-variant($price-font-size-regular);

}

.price-large { @include price-variant($price-font-size-large); } .price-xlarge { @include price-variant($price-font-size-xlarge); }

.price-expired {

font-size: $price-font-size-expired;

> sup {
  font-size: $price-font-size-expired;
}

}

// // Blockquote // —————————————-

.quote {

font-size: $quote-font-size;
font-style: italic;

margin: 0;
padding: 0;

}

.quote-author {

font-size: $quote-font-size-author;
font-style: normal;
font-weight: bold;
margin: 0;
margin-top: $quote-author-space;
padding: 0;

cite {
  font-style: normal;
}

}

.figure {

font-size: $quote-font-size;
margin: $quote-figure-margin;
padding: $quote-figure-padding;
border-left: $quote-figure-border-left;

}

.quote-list {

list-style: none;
padding-left: building-units(2);

.quote-list-item {
  border-left: $quote-figure-border-left;
  padding: $quote-figure-padding;

  .figure {
    border-left: 0;
    padding-left: 0;
  }

  *.quote-list {
    padding-left: building-units(1);

  }

}

}

// // Adresses // —————————————-

address {

font-style: normal;

}

.address-header small, .address-body, .address-footer {

font-size: $address-font-ratio;

}

.address-header, .address-body, .address-footer {

margin: 0;
padding: 0;

}

.address-header + .address-body, .address-body + .address-footer {

margin-top: $address-section-space;

}

.address-header {

font-weight: bold;

}

.address-footer label {

min-width: $address-label-offset;

}

// // Helpers // —————————————-

.text-left {

text-align: left;

}

.text-center {

text-align: center;

}

.text-right {

text-align: right;

}

@mixin text-alignement($size) {

.text-#{$size}-left   { text-align: left; }
.text-#{$size}-center { text-align: center; }
.text-#{$size}-right  { text-align: right; }

}

// default @include text-alignement('l');

// down-sizing @media screen and (max-width: #{$grid-medium-max}px) {

@include text-alignement('m');

}

@media screen and (max-width: #{$grid-small-max}px) {

@include text-alignement('s');

}

// up-sizing @media screen and (min-width: #{$grid-extra-large-min}px) {

@include text-alignement('xl');

}

.text-nowrap {

white-space: nowrap;

}

.text-ellipsis {

@include ellipsis();

}