@charset "UTF-8";

/*
Typography

Styleguide 2.2
*/

/*
Copy

<p>
    Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
    incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
    Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat
    nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa
    qui officia deserunt mollit anim id est laborum.
</p>

Styleguide 2.2.1
*/
body {
    font-family: $font-family;
    color: $color-font-secondary;
    background-color: $color-light-bg; // Die normalen Sections haben u.a. eine BG Farbe
    font-size: 10px;
    line-height: 1.4;
}

/*
Headlines

All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6`
classes are also available, for when you want to match the font styling of a
heading but still want your text to be displayed inline.
<h1>.h1 - Franz jagt im komplett verwahrlosten Taxi quer durch BÅyern.</h1>
<h2>.h2 - Franz jagt im komplett verwahrlosten Taxi quer durch BÅyern.</h2>
<h3>.h3 - Franz jagt im komplett verwahrlosten Taxi quer durch BÅyern.</h3>
<h4>.h4 - Franz jagt im komplett verwahrlosten Taxi quer durch BÅyern.</h4>
<h5>.h5 - Franz jagt im komplett verwahrlosten Taxi quer durch BÅyern.</h5>
<h6>.h6 - Franz jagt im komplett verwahrlosten Taxi quer durch BÅyern.</h6>

Styleguide 2.2.2
*/

// element  font-size   margin-top-bottom   margin-left-right
$headlines: (
        h1 3.4285714286em 0.1em 0,
        h2 2.5714285714em 0.83em 0,
        h3 1.4285714286em 0.8em 0,
        h4 1.4285714286em 0.8em 0,
        h5 1.4285714286em 0.8em 0,
        h6 1.4285714286em 0.8em 0,
);

@each $value in $headlines {
    #{nth($value, 1)},
    .#{nth($value, 1)} {
        font-size: nth($value, 2);
        font-weight: $font-bold;
        color: $color-font-primary;
        line-height: 1.5;
        margin: nth($value, 3) + .3em nth($value, 4) nth($value, 3) - .3em nth($value, 4);

        &.readable {
            text-transform: none;
        }

    }
}

/*
Hyperlinks

<a href="#">Visit online</a>

Styleguide 2.2.3
 */
a {
    color: $color-font-primary;
    text-decoration: none;
    transition: color 0.1s linear;
    outline: none;
}

a:hover {
    color: lighten($color-font-primary, 20%);
    outline: none;
}

a:active,a:focus {
    color: lighten($color-font-primary, 10%);
    outline: none;
}

/*
Other Elements

Everything else:
<p><strong>strong - Franz jagt im komplett verwahrlosten ...</strong></p>
<p><b>b - Franz jagt im komplett verwahrlosten ...</b></p>
<p><i>i - Franz jagt im komplett verwahrlosten ...</i></p>
<p><cite>cite - Franz jagt im komplett verwahrlosten ...</cite></p>
<p><em>em - Franz jagt im komplett verwahrlosten ...</em></p>
<p><var>var - Franz jagt im komplett verwahrlosten ...</var></p>
<p><address>address - Franz jagt im komplett verwahrlosten ...</address></p>
<p><dfn>dfn - Franz jagt im komplett verwahrlosten ...</dfn></p>
<p><small>small - Franz jagt im komplett verwahrlosten ...</small></p>

Styleguide 2.2.4
 */
b, strong {
    font-weight: 700;
}

i, cite, em, var, address, dfn {
    font-style: italic;
}

.small, small {
    font-size: 0.9em;
    color: $color-font-secondary;
    line-height: 1.2;
    display: inline-block;
    vertical-align: baseline;
}

table {
    font-size: .9em;
}

ul {
    li {
        margin: .5em 0;
    }
}

p {
    margin: .8em 0;
}