/* =========================================================
   ERDMANN LIGHT
   Behalten:
   - Basis / Reset
   - Typografie-Grundlagen
   - Layout / inside / Artikelbreiten
   - Header / Footer
   - Navigation
   - Farben / bg-Klassen
   - Listen / unordered-lists
   - Teaser / Hero / Slider-nahe Regeln
   Entfernt:
   - News
   - FAQ
   - Glossar
   - Newsletter
   - Social / Team / Cards / Comments / Spezialmodule
========================================================= */


/* =========================================================
   1. RESET / BASE
========================================================= */

html {
    font-family: sans-serif;
    font-size: 10px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]),
[hidden],
template {
    display: none;
}

body,
figure {
    margin: 0;
}

img {
    border: 0;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    background-color: transparent;
    text-decoration: none;
}

a:active,
a:hover {
    outline: 0;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
    text-transform: none;
}

button,
html input[type="button"],
input[type="submit"],
input[type="reset"] {
    -webkit-appearance: button;
    cursor: pointer;
}

pre,
textarea {
    overflow: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* =========================================================
   2. TYPOGRAPHY
========================================================= */

body {
    font-family: freight-text-pro, Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.5;
    color: #171a22;
    background-color: #fff;
}

@media (min-width: 550px) {
    body {
        font-size: 22px;
    }
}

@media (min-width: 769px) {
    body {
        font-size: 24px;
    }
}

p {
    margin: 0 0 13.5px;
}

ul,
ol {
    margin-top: 0;
    margin-bottom: 13.5px;
}

small,
.small {
    font-size: 85%;
    opacity: .8;
}

cite {
    font-style: normal;
}

b,
strong,
optgroup {
    font-weight: 700;
}

dfn {
    font-style: italic;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 13.5px;
    line-height: 1.24;
    color: inherit;
    font-family: freight-sans-pro, Helvetica, Arial, sans-serif;
    font-weight: 700;
}

h1,
h2,
h3 {
    margin-top: 27px;
}

h4,
h5,
h6 {
    margin-top: 13.5px;
}

.h1,
h1 {
    font-size: 1.75em;
}

.h2,
h2 {
    font-size: 1.25em;
}

.h3,
.h4,
h3,
h4 {
    font-size: 1em;
}

.h5,
h5 {
    font-size: 18px;
}

.h6,
h6 {
    font-size: 14px;
}

h1 {
    margin: .67em 0 .5em;
    line-height: 1.1;
    -webkit-font-smoothing: antialiased;
}

@media (min-width: 550px) {
    h1 {
        font-size: 1.75em;
        text-align: left;
    }
}

@media (min-width: 769px) {
    h1 {
        font-size: 2.1875em;
    }
}

h3,
h4 {
    font-family: freight-text-pro, Georgia, "Times New Roman", serif;
}

h4 {
    font-style: italic;
    font-weight: 400;
}

a {
    color: #ff5636;
}

a:focus,
a:hover {
    color: #e92500;
    text-decoration: underline;
}


/* =========================================================
   3. UTILITIES
========================================================= */

.inside {
    position: relative;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.clear {
    clear: both;
    height: .1px;
    font-size: .1px;
    line-height: .1px;
}

.clearfix::before,
.clearfix::after {
    content: " ";
    display: table;
}

.clearfix::after {
    clear: both;
}

.invisible {
    position: absolute;
    top: -1000px;
    left: -1000px;
    display: inline;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}


/* =========================================================
   4. COLORS / BACKGROUNDS
========================================================= */

.bg-gray,
.bg-highlight-tertiary {
    background: #faf8f7;
    color: #4d4d4d;
}

.bg-gray blockquote p,
.bg-highlight-tertiary blockquote p {
    color: #654e41;
}

.bg-highlight-primary,
.bg-orange {
    background: #ff5636;
    background-image: linear-gradient(135deg, #ff6b50, #ff4d2c);
    color: #f2f2f2;
}

.bg-highlight-primary a,
.bg-orange a {
    color: #171a22;
}

.bg-highlight-primary h2 a,
.bg-orange h2 a {
    color: #fff;
}

.bg-black,
.bg-highlight-secondary {
    background: #171a22;
    color: #999;
}

.bg-black-alpha {
    background: rgba(23, 26, 34, .85);
    color: #fff;
}


/* =========================================================
   5. HEADLINE SPECIALS
========================================================= */

.hl-large {
    width: 66.66667%;
    margin-left: auto;
    margin-right: auto;
}

.hl-large::after {
    content: "";
    display: block;
    width: 20%;
    height: .125em;
    margin: .5em auto;
    background: #ff5636;
    text-align: center;
}

@media (min-width: 550px) {
    .hl-large {
        font-size: 2em;
    }
}

.bg-orange .hl-large::after {
    background: #f2f2f2;
}


/* =========================================================
   6. LISTS
========================================================= */

@font-face {
    font-family: icomoon;
    src:
        url(../../assets/icomoon/fonts/icomoon.eot?-hlfmf9);
    src:
        url(../../assets/icomoon/fonts/icomoon.eot?#iefix-hlfmf9) format("embedded-opentype"),
        url(../../assets/icomoon/fonts/icomoon.woff?-hlfmf9) format("woff"),
        url(../../assets/icomoon/fonts/icomoon.ttf?-hlfmf9) format("truetype"),
        url(../../assets/icomoon/fonts/icomoon.svg?-hlfmf9#icomoon) format("svg");
    font-weight: 400;
    font-style: normal;
}

.ce_text ul,
.ce_text li,
.unordered-lists .ce_text li {
    padding-left: 0;
}

.ce_text li,
.unordered-lists .ce_text li {
    margin-left: 1em;
    list-style-type: none;
}

.ce_text li::before,
.unordered-lists .ce_text li::before {
    display: inline-block;
    width: .5em;
    margin-left: -1em;
    padding-right: .5em;
    font-family: icomoon;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    content: "";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.unordered-lists .ce_text {
    position: relative;
    min-height: 1px;
    margin-top: 2em;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 550px) {
    .unordered-lists .ce_text {
        float: left;
        width: 50%;
    }
}

@media (min-width: 769px) {
    .unordered-lists .ce_text {
        float: left;
        width: 33.33333%;
    }

    .unordered-lists .ce_text:nth-of-type(4) {
        clear: left;
    }
}

.unordered-lists .ce_text .image_container + h3 {
    margin-top: .5em;
}


/* =========================================================
   7. HEADER / MAIN / FOOTER LAYOUT
========================================================= */

[id="header"] {
    position: relative;
    top: 0;
    width: 100%;
    z-index: 70;
    -webkit-font-smoothing: antialiased;
    transition: background .3s;
}

[id="header"].js-header-active {
    background: rgba(0, 0, 0, .25);
}

.mod_article > .inside,
[id="header"] > .inside {
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

@media (min-width: 550px) {
    .mod_article > .inside {
        width: 90%;
    }
}

@media (min-width: 769px) {
    .mod_article > .inside,
    [id="header"] > .inside {
        width: 90%;
        max-width: 960px;
    }
}

#container {
    position: relative;
}

[id="main"] .mod_article {
    position: relative;
    z-index: 1;
}

[id="main"] .mod_article > .inside {
    padding: 1.5em 15px;
}

[id="main"] .mod_article > .inside::before,
[id="main"] .mod_article > .inside::after {
    content: " ";
    display: table;
}

[id="main"] .mod_article > .inside::after {
    clear: both;
}

@media screen and (min-width: 769px) {
    [id="main"] .mod_article > .inside {
        width: 75%;
        max-width: 770px;
    }
}

[id="main"] .mod_article--wide > .inside {
    max-width: 930px;
}

@media screen and (min-width: 550px) {
    [id="main"] .mod_article > .inside {
        padding-left: 0;
        padding-right: 0;
    }

    [id="main"] .mod_article--wide > .inside {
        width: 90%;
    }
}

[id="main"] .mod_article--fullwidth .inside {
    width: 100%;
    max-width: none;
}

[id="main"] .mod_article--nopadding,
[id="main"] .mod_article--nopadding > .inside {
    padding: 0;
}

[id="main"] .p-t-5 > .inside { padding-top: 5em; }
[id="main"] .p-t-0 > .inside { padding-top: 0; }
[id="main"] .p-t-1 > .inside { padding-top: 1em; }
[id="main"] .p-t-2 > .inside { padding-top: 2em; }

[id="main"] .p-b-5 > .inside { padding-bottom: 5em; }
[id="main"] .p-b-0 > .inside { padding-bottom: 0; }
[id="main"] .p-b-1 > .inside { padding-bottom: 1em; }
[id="main"] .p-b-2 > .inside { padding-bottom: 2em; }

[id="main"] .p-t-m > .inside { padding-top: 2.5em; }
[id="main"] .p-b-m > .inside { padding-bottom: 2.5em; }

.full-width .inside {
    width: 100%;
    max-width: 100%;
}

.full-width .inside img {
    width: 100%;
    height: auto;
}

.full-width .inside .ce_text .ce_inside > * {
    max-width: 960px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 550px) {
    .full-width .inside .ce_text .image_container {
        max-width: 60%;
    }
}

.full-width .inside .ce_text .float_left {
    padding: 0;
}

[id="footer"] {
    position: relative;
    z-index: 1;
    padding: 2em 0 .5em;
    color: #ddd;
    background-color: #5C4730;
    box-shadow: none;
}

[id="footer"] > .inside {
    padding-left: 15px;
    padding-right: 15px;
}

@media screen and (min-width: 550px) {
    [id="footer"] > .inside {
        padding-left: 0;
        padding-right: 0;
    }
}

[id="footer"] .note {
    float: left;
    font-weight: 700;
}

[id="footer"] .copyright {
    text-align: center;
}

[id="footer"] .phone {
    margin-bottom: 1em;
    text-align: center;
}

[id="footer"] h2 {
    margin-bottom: 2em;
}


/* =========================================================
   8. TEASER / HERO / SLIDER-NAHE REGELN
========================================================= */

.custom {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-height: 800px;
}

.custom .teaser,
[id="main"] .teaser {
    position: relative;
    z-index: 2;
    max-height: 800px;
}

.custom .teaser > .inside,
[id="main"] .teaser > .inside {
    position: static;
    width: 100%;
    max-width: none;
    padding: 0;
}

.custom .teaser .ce_text,
[id="main"] .teaser .ce_text {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    width: auto;
    height: 100%;
    overflow: visible;
    color: #fff;
}

.custom .teaser .ce_text .ce_inside,
[id="main"] .teaser .ce_text .ce_inside {
    position: absolute;
    right: 0;
    bottom: 5vh;
    left: 0;
    max-width: 970px;
    margin: 0 auto;
}

.custom .teaser .teaser__text,
[id="main"] .teaser .teaser__text {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    color: #fff;
}

.custom .teaser .teaser__text .ce_inside,
[id="main"] .teaser .teaser__text .ce_inside {
    padding-left: 15px;
    padding-right: 15px;
}

.custom .teaser .teaser__text h2,
[id="main"] .teaser .teaser__text h2 {
    margin-top: .5em;
    margin-bottom: .25em;
    text-align: left;
}

.custom .teaser .teaser__image,
[id="main"] .teaser .teaser__image {
    max-height: 100vh;
}

.custom .teaser .teaser__image img,
[id="main"] .teaser .teaser__image img {
    width: 100%;
    max-width: none;
}

.custom .teaser .teaser__text--middle,
[id="main"] .teaser .teaser__text--middle {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.custom .teaser .teaser__text--middle .ce_inside,
[id="main"] .teaser .teaser__text--middle .ce_inside {
    position: relative;
    top: 50%;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    transform: translateY(-50%);
}

.custom .teaser .teaser__text--middle .ce_inside h1,
.custom .teaser .teaser__text--middle .ce_inside p,
[id="main"] .teaser .teaser__text--middle .ce_inside h1,
[id="main"] .teaser .teaser__text--middle .ce_inside p {
    text-align: center;
}


/* =========================================================
   9. NAVIGATION
========================================================= */

.nav-collapse,
.logo span,
.nav-button-toggle span {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    max-height: 0;
}

.nav ul {
    margin: 0;
    padding: 0 0 1em;
}

.nav li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.nav--inline li {
    display: inline-block;
}

.nav--main {
    clear: both;
    max-height: 0;
    color: #fff;
    font-family: freight-sans-pro, Helvetica, Arial, sans-serif;
    font-size: 1.125em;
    font-weight: 600;
    line-height: 2;
}

.nav--main li.imprint {
    display: none;
}

.nav--main a.trail,
.nav--main span.active {
    color: #ff5636;
    cursor: default;
}

@media (min-width: 1024px) {
    .nav--main {
        float: right;
        clear: none;
        max-height: none;
        margin-top: 0;
        margin-left: 1em;
        font-size: .875em;
        line-height: 1;
    }

    .nav--main ul::before,
    .nav--main ul::after {
        content: " ";
        display: table;
    }

    .nav--main ul::after {
        clear: both;
    }

    .nav--main li {
        float: left;
    }

    .nav--main a.trail,
    .nav--main span.active {
        position: relative;
        color: rgba(255,255,255,.5);
    }

    .without-teaser .nav--main a {
        color: #171a22;
    }

    .without-teaser .nav--main a:hover {
        color: #ff5636;
        border-color: currentColor;
    }
}

.nav-button-toggle {
    float: right;
    width: 2.4em;
    height: 2.4em;
    margin: .875em 1em 0;
    padding: .3em 0 0;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    font-size: .75em;
    text-align: center;
}

.nav-button-toggle .icon-menu {
    width: 1.5em;
    margin: 0 auto;
    fill: #fff;
    line-height: 1;
    transition: transform .25s;
}

.nav-button-toggle.opened .icon-menu {
    transform: rotate(-90deg);
}

.without-teaser .nav-button-toggle {
    border-color: #171a22;
}

.without-teaser .nav-button-toggle .icon-menu {
    fill: #171a22;
}

@media (min-width: 790px) {
    .nav-button-toggle {
        display: none;
    }
}

.nav--sub {
    margin-top: 2em;
    font-size: .875em;
}

.nav--sub::before,
.nav--sub::after {
    content: " ";
    display: table;
}

.nav--sub::after {
    clear: both;
}

.nav--sub ul {
    text-align: center;
}

.nav--sub li,
.nav--sub a {
    display: inline-block;
}

.nav--sub a {
    margin: 0 -0.25em;
    padding: .25em 1em;
    border: .125em solid #ff5636;
    border-right-width: 0;
    text-decoration: none;
}

.nav--sub .active a {
    color: #fff;
    background: #ff5636;
}

.nav--sub .first a {
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em;
}

.nav--sub .last a {
    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;
    border-right-width: .125em;
}


/* =========================================================
   10. IMAGE HELPERS
========================================================= */

.caption {
    max-width: 100%;
    font-style: italic;
}

.ce_image--full {
    position: absolute;
    z-index: -1;
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: auto;
}

.image-center .image_container {
    text-align: center;
}

.image-right .image_container {
    text-align: right;
}

.ce_gallery,
.image-shadow {
    text-align: center;
}

.image--circle img {
    overflow: hidden;
    border: .175em solid #fff;
    border-radius: 50%;
}

.image-shadow img {
    margin: .25em;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
}

/*footer*/
@media (max-width: 768px) {
    #footer .float_left,
    #footer .float_right {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}