html,
body {
    background-color: #fff;
    color: #4a4d4e;
    font: 18px "Helvetica";
    min-width: 320px;
    max-width: 100vw;
    overflow-x: hidden;
}

a, a:visited, a:active {
    color: #4a4d4e;
    border: 0;
}

a.cta {
    width: 220px;
    height: 36px;
    border-radius: 18px;
    box-shadow: 6px 6px 12px 0 rgba(0, 0, 0, 0.35);
    border: solid 1px #5a195f;
    background-color: #5a195f;
    padding: 8px;
    color: #fff;
    display: block;
    margin-top: 50px;
    text-align: center;
    font-size: 14px;
}

h1 {
    font: 48px "Helvetica";
    font-weight: bold;
}

h2 {
    font: 34px "Helvetica";
    font-weight: bold;
}

h3 {
    font: 18px "Helvetica";
    font-weight: bold;
}

h4 {
    font: 14px "Helvetica";
    font-weight: bold;
}

.img-fluid {
    // ie10 fix
    width: 100% \9;
}

.jumbotron {
    margin-bottom: 0;
    padding: 0;
    background: transparent;
}

.hero {
    color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    position: relative;
    height: 700px;
}

.hero .logo {
    position: absolute;
    top: 40px; left: 40px;
}

.hero .social {
    position: absolute;
    top: 40px; right: 40px;
}

.hero .social.facebook {
    right: 112px;
}

.hero h1 {
    font-size: 48px;
    font-weight: 300;
    padding-top: 47px;
}

.hero.normal h1 {
    padding-top: 107px;
}

.hero p {
    font-size: 24px;
    margin-top: 24px;
    line-height: 1.02
}

.hero.default {
    height: 80px;
    width: 100%;
}

.stores {
    width: 100%;
    text-align: center;
}

div.stores {
    margin: 160px auto 0;
}

.stores img {
    border-radius: 8px;
    width: 166px;
    margin: 34px 6px;
}

div.stoerer {
    width: 450px;
    height: 100px;
    background-color: #0db9f3;
    padding: 16px;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    font-size: 24px;
}
div.stoerer span {
    font-size: 40px;
    display: block;
}

/* @1x Images (Pixel Ratio 1.0) */
#home {background-image:url(../img/home-dark-bg-1920-x-906-hell.jpg?v=1.1.0);}

/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
    #home {background-image:url(../img/home-dark-bg-1920-x-906-hell@2x.jpg?v=1.1.0);}
}

/* @3x Images (Pixel Ratio of 2.25+) */
@media only screen and (-o-min-device-pixel-ratio: 9/4),
only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-device-pixel-ratio: 2.25),
only screen and (min-resolution: 2.25dppx) {
    #home {background-image:url(../img/home-dark-bg-1920-x-906-hell@3x.jpg?v=1.1.0)}
}


/* @1x Images (Pixel Ratio 1.0) */
#kay {background-image:url(../img/kay-titelimage.jpg?v=1.1.0);}

/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
    #kay {background-image:url(../img/kay-titelimage@2x.jpg?v=1.1.0)}
}

/* @3x Images (Pixel Ratio of 2.25+) */
@media only screen and (-o-min-device-pixel-ratio: 9/4),
only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-device-pixel-ratio: 2.25),
only screen and (min-resolution: 2.25dppx) {
    #kay {background-image:url(../img/kay-titelimage@3x.jpg?v=1.1.0)}
}

/* @1x Images (Pixel Ratio 1.0) */
#mira {background-image:url(../img/mira-titelimage.jpg?v=1.1.0);}

/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
    #mira {background-image:url(../img/mira-titelimage@2x.jpg?v=1.1.0)}
}

/* @3x Images (Pixel Ratio of 2.25+) */
@media only screen and (-o-min-device-pixel-ratio: 9/4),
only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-device-pixel-ratio: 2.25),
only screen and (min-resolution: 2.25dppx) {
    #mira {background-image:url(../img/mira-titelimage@3x.jpg?v=1.1.0)}
}


/* @1x Images (Pixel Ratio 1.0) */
#verena {background-image:url(../img/verena-titelimage.jpg?v=1.1.0);}

/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
    #verena {background-image:url(../img/verena-titelimage@2x.jpg?v=1.1.0)}
}

/* @3x Images (Pixel Ratio of 2.25+) */
@media only screen and (-o-min-device-pixel-ratio: 9/4),
only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-device-pixel-ratio: 2.25),
only screen and (min-resolution: 2.25dppx) {
    #verena {background-image:url(../img/verena-titelimage@3x.jpg?v=1.1.0)}
}

/* @1x Images (Pixel Ratio 1.0) */
.hero.default {background-image:url(../img/default-header.png?v=1.1.0);}

/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
    .hero.default {background-image:url(../img/default-header@2x.png?v=1.1.0);}
}

/* @3x Images (Pixel Ratio of 2.25+) */
@media only screen and (-o-min-device-pixel-ratio: 9/4),
only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-device-pixel-ratio: 2.25),
only screen and (min-resolution: 2.25dppx) {
    .hero.default {background-image:url(../img/default-header@3x.png?v=1.1.0);}
}

.datenschutz {
    background-color: #5a195f;
    padding: 40px 0 46px;
    display: none;
}

.datenschutz * {
    color: #fff;
    font-family: Helvetica;
    font-size: 18px;
    font-weight: normal;
}

.datenschutz a, .datenschutz a:hover, .datenschutz a:focus .datenschutz a:visited {
    text-decoration: underline;
    color: #fff;
}

.datenschutz button {
    border: 1px solid #fff;
    padding: 8px 50px;
    background-color: transparent;
    border-radius: 18px;
    box-shadow: 6px 6px 12px 0 rgba(0, 0, 0, 0.35);
}

.aufzaehlung p {
    font-weight: normal;
    margin: 8px 0 0 0;
    text-align: left;
}

.einrueckung li p {
    font-weight: normal;
    margin: 8px 0 0 50px;
    text-align: left;
}

.aufzaehlung ul {
    list-style-type: none;
}

.aufzaehlung ul > li:before {
    content: "-" " ";
}

.aufzaehlung ol {
    counter-reset: level2; /* Erstellt mit jedem ol Element eine neue Instanz des Abschnittszählers. */
    list-style-type: none;
    padding-left: 0;
    list-style-position: inside;
}

.aufzaehlung.einrueckung ol {
    list-style-position: initial;
}
.aufzaehlung li {
    margin-top: 8px;
    font-weight: normal;
}

.aufzaehlung ol.l1 {
    padding-left: 0;
    margin-bottom: 32px;
}

.aufzaehlung ol > li {
    margin-top: 16px;
    font-weight: bold;
}

.einrueckung ol.l2 {
    padding-left: 50px;
}
.einrueckung ol.l2 > li {
    list-style-position: inside;
    text-indent: -35px;
    font-weight: normal;
}

.aufzaehlung ol > li::before {
    counter-increment: level2;            /* Inkrementiert nur diese Instanz
                                            des Abschnittszählers. */
    content: counters(level2,".") ". ";    /* Fügt den Wert aller Instanzen
                                            des Abschnittszählers durch "."
                                            getrennt hinzu. */
    /* Falls < IE8 unterstützt werden soll,
       sollte sichergestellt werden, dass
       kein Leerzeichen nach dem ',' steht. */
}


.aufzaehlung ol.l3 {
    counter-reset: level3;                /* Erstellt mit jedem ol Element
                                            eine neue Instanz des
                                            Abschnittszählers. */
    list-style-type: none;
    list-style-position: inside;
    padding-left: 32px;
}

.aufzaehlung ol.l3 > li {
    font-weight: normal;
}

.aufzaehlung ol.l3 > li::before {
    counter-increment: level3;

    content: "(" counter(level3, lower-alpha) ") ";    /* Fügt den Wert aller Instanzen
                                            des Abschnittszählers durch "."
                                            getrennt hinzu. */
    /* Falls < IE8 unterstützt werden soll,
       sollte sichergestellt werden, dass
       kein Leerzeichen nach dem ',' steht. */
}

.highlight {
    background-color: #f4f4f4;
    border: solid 1px #cccccc;
    margin: 0 -11px 20px -11px;
    padding: 11px;
    border-radius: 8px;
    box-shadow: 6px 6px 12px 0 rgba(0, 0, 0, 0.35);
}

nav.jumbotron {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.nav-pills .nav-link {
    padding: 0;
    height: 50px;
    font-size: 24px;
    line-height: 0.83;
    color: #5a195f;
    border-bottom: 8px solid transparent;
    border-radius: 0;
    margin-top: 32px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #5a195f;
    background-color: transparent;
    font-weight: bold;
    border-bottom-color: #5a195f;
}

article h1, article h2 {
    margin-top: 160px;
    text-align: center;
}

article h2:first-of-type {
    margin-top: 80px;
}

article p {
    margin-top: 15px;
    text-align: center;
    margin-bottom: 50px;
}

.testimonial p {
    margin-bottom: 0px;
}

.carousel > .row > .col-xs-12 {
    padding-right: 0;
}

.owl-carousel {
    padding-top: 118px;
}

.owl-stage, .testimonials  {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.owl-item, .testimonials > div {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: auto !important;
}

.owl-carousel .owl-nav {
    overflow: hidden;
    height: 52px;
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
}

.owl-carousel .item {
    width: 350px;
    text-align: center;
}
.owl-nav button.owl-prev {
    margin-right: 16px;
}

.owl-nav .nav-btn {
    height: 52px;
    width: 52px;
    cursor: pointer;
    background-size: 52px;
    top: 0 !important;
}

button:focus {
    outline: none;
}

.owl-nav .owl-prev.disabled,
.owl-nav .owl-next.disabled{
    pointer-events: none;
    opacity: 0.2;
}

.owl-nav .prev-slide{
    background: url(../img/back.svg?v=1.1.0) no-repeat scroll top left;
    left: 0;
}
.owl-nav .next-slide{
    background: url(../img/next.svg?v=1.1.0) no-repeat scroll top right;
    right: 0;
}

.item {
    width: 100%;
    border-radius: 8px;
    background-color: #f4f4f4;
    text-align: center;
}


.item h3 {
    position: absolute;
    color: #fff;
    font-weight: bold;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 16px;
    margin-bottom: 10px;
    line-height: 1.33;
    width: 100%;
}


.item p {
    color: #333;
    padding: 55px 16px 23px 16px;
    height: 160px;
    border: solid 1px #cccccc;
    border-top: 0;
    margin: 0;
    border-radius: 0 0 8px 8px;

}

.testimonials .col-xs-12 {
    padding-bottom: 16px;
}

.testimonial {
    margin-top: 53px;
    border-radius: 8px;
    box-shadow: 6px 6px 12px 0 rgba(0, 0, 0, 0.35);
    border: solid 1px #cccccc;
    background-color: #f4f4f4;
    text-align: center;
    padding-bottom: 86px;
}


.testimonial img {
    border-radius: 50%;
    position: relative;
    display: block;
    top: -26px;
    width: 56px;
    margin:0 auto;
}

.testimonial h3 {
    color: #2a2a2a;
    min-height: 59px;
    overflow: hidden;
    margin-bottom: 10px;
    margin-top: -16px;
    padding: 0 16px;
}


.testimonial p {
    clear: both;
    font-size: 16px;
    font-weight: normal;
    padding: 0 16px;
}

.testimonial > span {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 0 15px;
    margin: 0 -15px 16px;
}

.testimonial a.btn {
    color: #5a195f;
    border: 1px solid #5a195f;
    background-color: #fff;
    border-radius: 18px;
    max-width: 240px;
    overflow-x: hidden;
    margin: 16px auto;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 6px 6px 12px 0 rgba(0, 0, 0, 0.35);
}

footer {
    margin-top: 160px;
}

footer.jumbotron {
    background-color: #ebeef0;
    font-size: 14px;
}
footer.jumbotron .container {
    padding-bottom: 33px;
}

footer.jumbotron .row .col {
    padding-top: 56px;
}

footer img {
    margin-top: 30px;
}

footer img.social {
    margin-right: 41px;
}

.icon {
    display: block;
    height: 28px;
    line-height: 28px;
    margin: 20px 0 8px;
    background: transparent center left no-repeat;
    background-size: 28px;
    padding-left: 35px;
}

.icon-kontakt{
    background-image: url("../img/contact.svg?v=1.1.0");
}

.icon-impressum{
    background-image: url("../img/impressum.svg?v=1.1.0");
}
.icon-datenschutz {
    background-image: url("../img/datenschutz.svg?v=1.1.0");
}
.icon-nutzungsbedingungen {
    background-image: url("../img/nutzungsbedingung.svg?v=1.1.0");
}


.mt-4x {
    margin-top: 52px;
}

.mb-4x {
    margin-bottom: 52px;
}

.postcard {
    border-radius: 8px;
}

.postcard p {
    font-size: 16px;
}

.postcard > div:first-of-type {
    padding-top: 37px;
    border-radius: 8px 0 0 8px;
    background: #0073B4 url("../img/blue-bg-landscape-desktop.svg?v=1.1.0") no-repeat center bottom;
    background-size: contain;
    color: #fff;
    text-align: center;
}
.postcard > div:first-of-type img {
    left: 0;
}

.postcard > div:nth-of-type(2) {
    padding: 30px 30px;
    background-color: #f4f4f4;
    border: 1px solid #979797;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    line-height: 1.38;
}

.row.postcard > div:nth-of-type(2) h3, .row.postcard > div:nth-of-type(2) p {
    text-align: left;
    margin-bottom: 0;
}

.postcard-gray > div:first-of-type {
    background: #f4f4f4 none;
    border: 1px solid #979797;
    border-right: 0;
    border-radius: 8px 0 0 8px;
}

div.book > img {
    margin-bottom: 28px;
}

@media (max-width: 1199.98px) { }

@media (max-width: 991.98px) {

    .hero .stores {
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .hero .stores img {
        margin: 20px 6px;
    }


    .hero.normal h1 {
        font-size: 36px;
        font-weight: normal;
        padding-top: 107px;
    }

    .postcard > div:nth-of-type(2) {
        padding: 13px;
    }


    div.stores {
        margin: 16px auto 0;
    }


    article h2 {
        margin-top: 70px;
    }


    .item {
        border-radius: 5.6px;
    }

    .carousel .item {
        width: 244px;
    }

    .item h3 {
        margin-top: 11px;
        font-size: 14px;
    }


    .item p {
        color: #333;
        padding: 36px 16px 6px 16px;
        height: 114px;
        border-radius: 0 0 5.6px 5.6px;
        font-size: 14px;
    }

    .testimonial a.btn {
        max-width:200px;
    }
}

@media (min-width: 768px) {
    .position-md-fixed {
        position: fixed!important;
    }
}

@media (max-width: 767.98px) {
    .hero .logo {
        left: 20px;
    }

    .hero .social {
        position: absolute;
        top: 40px; right: 40px;
    }

    .hero .social.facebook {
        right: 112px;
    }

    .hero h1 {
        padding-top: 95px;
    }


    .postcard > div:first-of-type {
        border-radius: 5.6px 5.6px 0 0;
    }
    .postcard > div:nth-of-type(2) {
        border: 1px solid #979797;
        border-top: 0;
        border-radius: 0 0 5.6px 5.6px;
    }

    .postcard-gray > div:first-of-type {
        border: 1px solid #979797;
        border-bottom: 0;
        border-radius: 5.6px 5.6px 0 0;
    }

    .hero.normal h1 {
        font-size: 24px;
        font-weight: normal;
    }

    nav .container {
        max-width: 100%;
        padding: 0;
    }

    .item {
        max-width: 350px;
        margin: 0 auto;
        margin-bottom: 15px;
    }

    .item h3 {
        max-width: 350px;
    }
    footer {
        margin-top: 16px;
    }

    footer.jumbotron .row .col {
        padding-top: 38px;
    }

    footer img {
        margin-top: 0;
    }

    .icon {
        margin-top: 0;
    }

    .testimonial p {
        margin-bottom: 10px;
    }
}

@media (max-width: 575.98px) {
    .hero {
        height: 525px;
    }


    .hero .logo {
        position: absolute;
        top: 40px; left: 40px;
    }

    .hero .social {
        position: absolute;
        top: 40px; right: 40px;
    }

    .hero .social.facebook {
        right: 112px;
    }

    .hero h1 {
        font-size: 36px;
        font-weight: 300;
    }

    .hero p {
        font-size: 18px;
        margin-top: 7px;
    }

    .nav-pills .nav-link {
        margin-top: 21px;
        height: 39px;
        font-size: 16px;
    }

    .stores img {
        border-radius: 6px;
        width: 140px;
        margin: 20px 5px;
    }

    article > h2:first-of-type {
        margin-top: 60px;
    }

    article > h2 {
        margin-top: 120px;
    }

    .owl-carousel {
        padding-top: 33px;
    }

    .owl-carousel .owl-nav {
        display: none;
    }

    .owl-carousel .owl-dots {
        position: absolute;
        top: 0;
        width: 100%;
        height: 8px;
        text-align: center;
    }
    .owl-carousel .owl-dots .owl-dot span {
        background: none repeat scroll 0 0 #869791;
        border-radius: 8px;
        display: block;
        height: 8px;
        margin: 0 2px;
        opacity: 0.5;
        width: 8px;
    }

    .owl-carousel .owl-dots .owl-dot.active span {
        background: #5a195f;
        opacity: 1;
    }
}