/* Standard Teaser */
.card {

    border: 0;
    margin-bottom: 22px;

    .card-body {
        margin-top: -28px;
        margin-left: 21px;
        background-color: #fff;
        position: relative;

        .card-date{
            position: relative;
            font: 300 12px/20px GTWalsheimVogue, "Helvetica Neue", Helvetica, Arial, sans-serif;
            letter-spacing: 2px;
            &:before{
                content: "";
                width: 40px;
                height: 4px;
                display: block;
                background: rgb(184, 154, 106);
                margin: 24px 0 6px;
                transition: background-color 0.15s ease-in 0s;
            }
        }
    }

    p.card-author,
    p.card-kicker {
        font-family: GTWalsheimVogue, Helvetica, sans;
        font-size: 11px;
        font-weight: 300;
        letter-spacing: 1px;
        line-height: 13px;
        margin-bottom: 7px;
        text-transform: uppercase;
        @media (max-width: 575px){
            letter-spacing: 1.8px;
            line-height: 16px;
        }
    }

    h5.card-title {
        font-family: "DomaineDisplay";
        font-size: 22px;
        line-height: 28px;

        @media (min-width: 992px) and (max-width: 1199px) {
            font-size: 20px;
        }
    }

    .card-img-top {
        border-radius: 0;
        position: relative;
        .sponsored-content{
            top: auto;
            bottom: 0;
        }
    }

    .card-img-top:hover {
        background-color: red;
        background-blend-mode: multiply;
        transition: background-color 0.15s ease-in 0s;
    }
    .sponsored-content{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: -28px;
    }
}

a:hover .card {
    color: rgb(108, 110, 112) !important;
    text-decoration: none;

    .card-date{
        &:before{
          background: rgb(238, 0, 0);
        }
    }
}

/* Small Teaser */
.row.small .card {

    color: #6C6E70;
    margin-left: -6px;
    margin-right: -6px;

    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto,
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto,
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto,
    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
        padding-left: 6px;
        padding-right: 6px;
    }

    .card-body {
        margin-top: 0px;
        margin-left: 0px;
        padding: 12px 0px;
    }

    .card-img-top {
        padding-bottom: 66%;
        background-size: cover;
    }

    h5.card-title {
        font-family: "DomaineDisplay";
        font-size: 14px;
        letter-spacing: 2.1px;
        line-height: 18px;

        @media (min-width: 992px) and (max-width: 1199px) {
            font-size: 10px;
        }
    }
    /*
        h5.card-title:after {
            content: "\2192";
            color: rgba(238, 0, 0, 0.8);
            padding-left: 5px;
        }
    */
}


.col-lg-3.col-sm-6.col-12 .card,
.col-md-3.col-sm-6.col-12 .card,
.col-sm-6.col-12 .card{
    @media (max-width: 575px){
        flex-direction: row;
        border-bottom: 1px solid #caccce;
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-radius: 0;
    }
    .card-body {
        @media (max-width: 575px){
            width:65%;
            float:left;
            margin-top: -16px;
            margin-left: 0;
            padding: 16px;
        }
        @media (min-width: 576px){
            .sponsored-content{
                display:block;
                bottom: auto;
                top:-28px;
            }
        }
    }
    h5.card-title {
        @media (max-width: 575px){
            font-size:18px;
            line-height: 24px;
        }
    }

    .card-img-top {
        @media (max-width: 575px){
            width:35%;
            height:100%;
            padding-bottom:0!important;//important weil sonst von body.design-vogue .row.small .card .card-img-top überschrieben
            float:left;
            :after{
              padding-bottom:35%!important;
            }
        }
        .sponsored-content{
            top: auto;
            bottom: 0;
        }
    }
    .sponsored-content{
        @media (max-width: 575px){
            font-size:12px;
            line-height: 22px;
            height: 22px;
        }
    }
}

.top-highlight{
    .card {
        margin-bottom: 100px;
        @media (max-width: $break-sm) {
            margin-bottom: 66px;
        }
    }
    .card-body {
        margin: 0;
        padding-left: calc(16.667% + 40px);
        padding-bottom: 0;
        &:before {
            content: '';
            display: block;
            height: 100%;
            width: 1px;
            position: absolute;
            left: 16.667%;
            background: #000;
            top: 0;
        }
    }
    h5.card-title {
        font-size: 48px;
        line-height: 54px;
        font-style: italic;
        margin-bottom: 20px;
        @media (max-width: $break-sm) {
            font-size:32px;
            line-height:36px;
        }
    }
    .ctaButton{
        padding: 10px 30px;
    }
}

.newsletter-box{
    border-radius: 0;
    padding-bottom: 32px;
    >div{
        border-left: 1px solid #000;
        padding-left: 35px;
    }

    h5{
        font: 48px/54px DomaineDisplay, Times, "Times New Roman", serif;
    }
    p{
        font-family: GTWalsheimVogue, Helvetica, sans;

    }
}