/* imported in typo3conf/ext/atl_mask_export/Resources/Public/Stylesheets/import.css */
section.teaserelement {
    margin: 20px 0;
}

section.imageteaser + section.teaserelement,
section.section-h1 + section.teaserelement {
    margin: 40px 0;
}

section.teaserelement .card {
    border-radius: 0 !important;
}

section.teaserelement .card-img-wrapper {
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
}

section.teaserelement .card-img-top,
section.teaserelement .card-img-bottom {
    width: auto;
    height: 100%;
}

section.teaserelement .col-md-12 .card {
    height: 257px;
}

section.teaserelement .card-body {
    padding: 0;
}

section.teaserelement .teaserelement-white .card h2,
section.teaserelement .teaserelement-grey .card h2 {
    font-size: 26px;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 11px;
}

section.teaserelement .teaserelement-white .card h2:after,
section.teaserelement .teaserelement-grey .card h2:after {
    content: "";
    position: absolute;
    display: inline-block;
    left: 0;
    bottom: 0;
    border-bottom: 2px solid #ffb800;
    height: 1px;
    width: 89px;
}

section.teaserelement .teaserelement-yellow .card h2 {
    font-family: FagoWebPro-Bold, Helvetica, Arial, sans-serif;
    font-size: 18px;
    margin-bottom: 0;
}

section.teaserelement .links li {
    padding-bottom: 20px;
}

section.teaserelement .card .card-body > .links:first-child {
    display: table-cell;
    vertical-align: middle;
}

section.teaserelement .card .card-body > .links:first-child li.nav-item {
    padding-bottom: 40px;
}

section.teaserelement .card .card-body > .links:first-child li.nav-item:last-child {
    padding-bottom: 0;
}

section.teaserelement .card .card-body > .links:first-child li.nav-item a {
    font-family: FagoWebPro, Helvetica, Arial, sans-serif;
}

section.teaserelement .card .card-body > .links:first-child li.nav-item a.icon-exe,
section.teaserelement .card .card-body > .links:first-child li.nav-item a.icon-zip,
section.teaserelement .card .card-body > .links:first-child li.nav-item a.icon-pdf {
    padding-left: 45px;
}

section.teaserelement .card .card-body > .links:first-child li.nav-item a.icon-exe:before,
section.teaserelement .card .card-body > .links:first-child li.nav-item a.icon-zip:before,
section.teaserelement .card .card-body > .links:first-child li.nav-item a.icon-pdf:before {
    content: none;
}

section.teaserelement .card .card-body > .links:first-child li.nav-item a.icon-exe:after,
section.teaserelement .card .card-body > .links:first-child li.nav-item a.icon-zip:after,
section.teaserelement .card .card-body > .links:first-child li.nav-item a.icon-pdf:after {
    top: -7px;
}

section.teaserelement .links li a.button-reyher-yellow,
section.teaserelement .links li a.button-reyher-yellow-big {
    padding-right: 20px;
    margin-right: 20px;
}

section.teaserelement .col-md-6 .card {
    width: 540px;
    height: 540px;
}

@media screen and (min-width: 1200px) {
    section.teaserelement .col-md-6 .card {
        width: 540px;
        height: 540px;
    }

    section.teaserelement .col-md-6 .card .card-img-bottom {
        height: 245px;
    }
}

@media screen and (max-width: 1199px) {
    .teaserelement-white .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .teaserelement-grey .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    section.teaserelement .teaserelement-white .card {
        margin-bottom: 30px !important;
    }

    section.teaserelement .teaserelement-grey .col-atl-teaser-50 .card {
        margin-bottom: 30px !important;
    }
}

@media screen and (max-width: 991px) {
    section.teaserelement .teaserelement-white .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    section.teaserelement .teaserelement-grey .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    section.teaserelement .teaserelement-white .card {
        margin-bottom: 30px !important;
    }

    section.teaserelement .teaserelement-grey .col-atl-teaser-50 .card {
        margin-bottom: 30px !important;
    }

    section.teaserelement .teaserelement-yellow .card {
        width: 100%;
    }

    section.teaserelement .teaserelement-yellow .col-lg-3.col-md-6 .card {
        height: auto;
        width: 255px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 768px) {
    section.teaserelement .teaserelement-white .card {
        margin-bottom: 0 !important;
    }

    section.teaserelement .teaserelement-grey .col-atl-teaser-50 .card {
        margin-bottom: 0 !important;
    }

    section.teaserelement .teaserelement-yellow .card {
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 576px) {
    section.teaserelement .col-md-6 .card {
        width: unset;
        height: auto;
    }

    section.teaserelement .teaserelement-white .card {
        margin-bottom: 0 !important;
    }

    section.teaserelement .teaserelement-grey .col-atl-teaser-50 .card {
        margin-bottom: 0 !important;
    }

    section.teaserelement .teaserelement-white .card .card-img-top {
        /* display: none; */
    }

    section.teaserelement .teaserelement-yellow .card {
        width: 100%;
    }

    section.teaserelement .teaserelement-yellow .col-lg-3.col-md-6 .card {
        /* height: auto; */
        width: auto;
        margin-bottom: 0;
    }
}

section.teaserelement .col-atl-teaser-33 .card-body {
    height: 100%;
    max-height: 100%;
}

section.teaserelement .col-atl-teaser-33 .card-img-wrapper {
    display: none;
}

.col-atl-teaser-33:last-child {
    margin-bottom: 0 !important;
}

@media screen and (min-width: 768px) {
    section.teaserelement .col-atl-teaser-33 {
        margin-bottom: 20px;
    }

    section.teaserelement .col-atl-teaser-33 .card {
        width: 100%;
        height: auto;
    }
}

@media screen and (min-width: 992px) {
    section.teaserelement .col-atl-teaser-33 .card {
        /* width: 310px; */
        height: 310px;
    }
}

@media screen and (min-width: 1200px) {
    section.teaserelement .col-atl-teaser-33 .card {
        /* width: 352px; */
        height: 352px;
    }

    section.teaserelement .col-atl-teaser-33 .card-body {
        height: 54.5454%;
        max-height: 54.5454%;
    }

    section.teaserelement .col-atl-teaser-33 .card-img-wrapper {
        display: block;
        height: 45.4545%;
        max-height: 45.4545%;
    }
}

@media screen and (min-width: 768px) {
    section.teaserelement .col-lg-3.col-md-6 .card {
        width: 355px;
        height: 355px;
    }
}

@media screen and (min-width: 992px) {
    section.teaserelement .col-lg-3.col-md-6 .card {
        width: 227.5px;
        height: 227.5px;
    }
}

@media screen and (min-width: 1200px) {
    section.teaserelement .col-lg-3.col-md-6 .card {
        width: 260px;
        height: 260px;
    }
}

@media screen and (max-width: 576px) {
    section.teaserelement .row {
        margin-left: 1px;
        margin-right: 1px;
    }

    section.teaserelement .row .col-xs-12.padding-spacer-10 {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 768px) {
    section.teaserelement .row .col-sm-12.padding-spacer-10,
    section.teaserelement .row .col-sm-6.padding-spacer-10 {
        margin-bottom: 20px;
    }
}

section.teaserelement .card .card-img-top,
section.teaserelement .card .card-img-bottom {
    border-radius: unset;
}

section.teaserelement .card .card-body {
    height: 54.5454%;
    max-height: 54.5454%;
}

section.teaserelement .card .card-body:only-child {
    display: block;
}

section.teaserelement .teaserelement-grey .card .card-img-wrapper {
    height: 45.4545%;
    max-height: 45.4545%;
}

section.teaserelement .card .card-img-wrapper a.card-img-wrapper-link {
    display: block;
    width: 100%;
    height: 100%;
}

section.teaserelement .card .card-body .nav-item a {
    position: relative;
    display: inline-block;
    padding-left: 17px;
    color: #000;
    font-family: FagoWebPro, Helvetica, Arial, sans-serif;
}

section.teaserelement .card .card-body .nav-item a:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 12px;
    background: url("../Images/Mutter-Buttons.svg");
    background-size: auto;
    background-size: cover;
    position: absolute;
    top: 3px;
    left: 0;
}

section.teaserelement .col-sm-6.col-md-6.col-lg-3.col-xs-12.padding-spacer-10.centerItem .card .card-body {
    text-align: center;
}

section.teaserelement .teaserelement-grey .card {
    background-color: #f0f0f0;
    box-shadow: 0 0 4px 0 rgb(155 155 155 / .5);
    border: none;
    border-radius: unset;
    margin: auto;
}

section.teaserelement .teaserelement-grey .card-body {
    padding: 30px 30px 15px;
    font-size: 16px;
    line-height: 20px;
}

section.teaserelement .teaserelement-grey .card-body p {
    margin-bottom: 20px;
}

section.teaserelement .teaserelement-grey .card-body .reyher-card-divider {
    width: 100px;
    margin: 10px 0;
    height: 2px;
    background-color: #ffb800;
}

section.teaserelement .teaserelement-grey .card-body .card-title {
    font-size: 26px;
    margin-bottom: 11px;
}

section.teaserelement .teaserelement-white .card {
    background-color: #fff;
    box-shadow: 0 0 4px 0 rgb(155 155 155 / .5);
    border: none;
    border-radius: unset;
    margin: auto;
}

section.teaserelement .teaserelement-white .card .card-img-wrapper {
    height: 54.6296%;
    max-height: 54.6296%;
}

section.teaserelement .teaserelement-white .card .card-body {
    height: 45.3703%;
    max-height: 45.3703%;
    padding: 25px 30px 30px;
    font-size: 18px;
    line-height: 23px;
}

section.teaserelement .teaserelement-yellow .card {
    background-color: #ffb800;
    border: none;
    border-radius: unset;
}

section.teaserelement .teaserelement-yellow .card .card-body {
    height: 40%;
    max-height: 40%;
    padding: 20px 25px 30px 30px;
    font-size: 16px;
    line-height: 20px;
}

section.teaserelement .teaserelement-yellow .card .card-body:only-child {
    height: 100% !important;
    max-height: 100% !important;
    padding: 30px;
    font-size: 16px;
    line-height: 20px;
    display: table;
}

section.teaserelement .teaserelement-yellow .card .card-body:only-child .links .nav {
    display: block;
}

section.teaserelement .teaserelement-yellow .card .card-body .nav-item {
    padding-top: 5px;
}

section.teaserelement .teaserelement-yellow .card .card-body .nav-item a {
    font-size: 16px;
    line-height: 20px;
    color: #000;
    font-family: FagoWebPro, Helvetica, Arial, sans-serif;
}

section.teaserelement .teaserelement-yellow .card .card-body .nav-item a:hover {
    font-size: 16px;
    line-height: 20px;
    color: #000;
    font-family: FagoWebPro, Helvetica, Arial, sans-serif;
}

section.teaserelement .teaserelement-yellow .card .card-img-wrapper {
    height: 60%;
    max-height: 60%;
}

/* TEASER YELLOW - 4 in a row */
section.teaserelement .teaserelement-yellow .col-atl-teaser-25 .card {
    min-height: 100px;
    margin: 0 auto;
}

section.teaserelement .teaserelement-yellow .col-atl-teaser-25 .card .card-body {
    padding: 20px 15px 15px;
}

section.teaserelement .teaserelement-yellow .col-atl-teaser-25 .card .card-img-wrapper {
    height: 50%;
    margin-top: 0%;
    max-height: 50%;
    background-size: contain;
}

@media (min-width: 576px) {
    section.teaserelement .teaserelement-yellow .col-atl-teaser-25 .card {
        min-height: 170px;
    }
}

@media (min-width: 992px) {
    section.teaserelement .teaserelement-yellow .col-atl-teaser-25 .card .card-body {
        height: 40%;
        max-height: 40%;
        padding: 20px 15px 30px;
    }
}

@media (min-width: 1200px) {
    section.teaserelement .teaserelement-yellow .col-atl-teaser-25 .card .card-body {
        padding: 20px 25px 30px 30px;
    }

    section.teaserelement .teaserelement-yellow .col-atl-teaser-25 .card .card-img-wrapper {
        height: 60%;
        margin-top: 0;
        max-height: 60%;
        background-size: initial;
    }
}