/* Flipbox */


/*Flipbox Kacheln*/

article[id*="flipbox"] {
    /* float: left; */
    width: 100%;
    margin: 32px 0 32px 0;
    padding: 96px 10% 0 10%;
}

article[id*="flipbox"] .flip-container,
article[id*="flipbox"] .front,
article[id*="flipbox"] .back {
    width: 100%;
    height: 100%;
}

article[id*="flipbox"] div.Schaufenster {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1%;
    width: 100%;
}

article[id*='flipbox'].strichoben .SchaufensterHead {
    border-top: 2px solid #f2f2f2;
    padding: 96px 0 0 0;
    margin: 66px 0 0px 0;
}

article[id*='flipbox'].strichunten .SchaufensterHead {
    border-top: none;
    width: 100%;
    padding: 30px 0 0 0;
    margin: 30px 0 30px 0;
}

article[id*='flipbox'].strichunten .Schaufenster {
    border-top: none;
    border-bottom: 2px solid #f2f2f2;
    padding: 30px 0 30px 0;
    margin: 30px 0 30px 0;
}

article[id*="flipbox"] .flip-container {
    width: 32%;
    height: 0;
    padding-top: 48%;
    background: #004996;
    position: relative;
}

article[id*="flipbox"] .flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    left: 0;
}

article[id*="flipbox"] .flipper .front,
article[id*="flipbox"] .flipper .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.25em;
    right: 0;
    margin: auto;
}

article[id*="flipbox"] .flipper .back {
    border: solid 10px #f2f2f2;
    background: #fff;
    padding: 1.5rem;
    width: 100%;
    position: relative;
    height: 100%;
    font-size: 1.25rem;
}

article[id*="flipbox"] .flipper .back a {
    color: #000;
}

article[id*="flipbox"] .flipper .back a span {
    font-weight: 600;
    font-size: 1.5rem;
    color: #004996;
}

article[id*="flipbox"] .flipper .front {
    color: #fff;
    font-size: 2em;
    text-align: center;
    font-family: 'Avenir_next_bold', sans-serif;
    -webkit-transition: opacity .35s, width .1ms, -webkit-transform .7s;
    transition: opacity .35s, width .1ms, -webkit-transform .7s;
    -o-transition: transform .7s, opacity .35s, width .1ms;
    transition: transform .7s, opacity .35s, width .1ms;
    transition: transform .7s, opacity .35s, width .1ms, -webkit-transform .7s;
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    z-index: 1;
    width: 100%;
    background: #004996;
}

article[id*="flipbox"] .flipper:hover .front {
    width: 0;
    opacity: 0;
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
    -webkit-transition: opacity .7s .1s, width .1ms .7s, -webkit-transform .8s;
    transition: opacity .7s .1s, width .1ms .7s, -webkit-transform .8s;
    -o-transition: transform .8s, opacity .7s .1s, width .1ms .7s;
    transition: transform .8s, opacity .7s .1s, width .1ms .7s;
    transition: transform .8s, opacity .7s .1s, width .1ms .7s, -webkit-transform .8s;
}

article[id*="flipbox"] .flipper .back {
    transform: unset;
}

article[id*="flipbox"] .flipper .front .imgCropCon {
    margin: 0 auto 2rem;
    width: 100%;
    padding: 0 28px;
    height: 50%;
    position: relative;
    background: #fff;
}

article[id*="flipbox"] .flipper .front .imgCropCon img {
    margin: 0 auto;
    width: auto;
    height: 265px;
    top: 0;
    position: absolute;
    left: 0;
    right: 0;
    object-fit: cover;
}

article[id*="flipbox"] .flipper .front .name {
    color: #fff;
    margin: auto;
    width: 90%;
    display: block;
    position: relative;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.85rem;
    font-weight: 600;
    height: 24%;
    min-height: 122px;
    margin: auto;
    font-size: 75%;
    font-family: 'Avenir_next_LT_bold', sans-serif;
    letter-spacing: 1px;
}

article[id*="flipbox"] .flipper .front .subtitle {
    color: #fff;
    display: block;
    text-align: center;
    margin: 1rem;
    font-size: 55%;
    line-height: 1.75rem;
}

@media screen and (max-width:1600px) {
    article[id*="flipbox"] .flipper .front .name {
        font-size: 1.175rem;
        min-height: 100px;
    }
    article[id*="flipbox"] .flipper .front .imgCropCon {
        margin: 0 auto 2rem;
    }
    article[id*="flipbox"] .flipper .back {
        font-size: 1.25rem;
        padding: 1rem;
    }
}

@media screen and (max-width:1278px) {
    article[id*="flipbox"] .flipper .front .name {
        font-size: 1.175rem;
    }
    article[id*="flipbox"] .flip-container {
        width: 49%;
        padding-top: 68%;
    }
    article[id*="flipbox"] .flipper .back {
        font-size: 1.25rem;
        padding: 1rem;
    }
}

@media screen and (max-width:1012px) {
    article[id*="flipbox"] .flipper .front .name {
        font-size: 1.175rem;
    }
}

@media screen and (max-width:888px) {
    article[id*="flipbox"] .flip-container {
        width: 100%;
        height: 0;
        padding-top: 83%;
    }
    article[id*="flipbox"] .flipper .front .imgCropCon {
        margin: 0 auto 4rem;
    }
    article[id*="flipbox"] .flipper .front .name {
        font-size: 1.575rem;
    }
    article[id*="flipbox"] .flipper .front .imgCropCon img {
        height: 143%;
    }
}

@media screen and (max-width:552px) {
    article[id*="flipbox"] {
        padding: 0;
    }
    article[id*="flipbox"] .flip-container {
        padding-top: 100%;
    }
    article[id*="flipbox"] .flipper .front .name {
        font-size: 1.25rem;
        margin-top: 1.25rem;
    }
    article[id*="flipbox"] .flipper .front .imgCropCon,
    article[id*="flipbox"] .flipper .front .subtitle {
        margin: 0;
    }
    article[id*="flipbox"] .flipper .back {
        height: 100%;
    }
}