/* karte4 flip - simple card */
.carousel-item.karte4-item {
    height: 500px;
    perspective: 1000px;
    text-align: center;
    overflow: hidden;
}

.carousel-item.karte4-item .card {
    position: relative;
    width: 280px;
    height: 477px;
    margin: 0 auto;
    margin: 0 auto;
    transition: transform 1s ease;
    transform-style: preserve-3d;
}

.carousel-item.karte4-item .card-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: url(/wp-content/themes/warten-26/img/ticket3.svg) no-repeat center center;
    background-size: cover;
    z-index: 2;
}

.carousel-item.karte4-item .card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: url(/wp-content/themes/warten-26/img/ticket3.svg) no-repeat center center;
    background-size: cover;
    transform: rotateY(180deg);
    z-index: 1;
    color: #000;
}

.carousel-item.karte4-item.flip .card {
    transform: rotateY(-180deg);
}

.carousel-item.karte4-item .cardspan {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px;
}

.carousel-item.karte4-item .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
}

.carousel-item.karte4-item .logo img { height: 30px; width: auto; }
.carousel-item.karte4-item .flip-trigger, .carousel-item.karte4-item .resetflip { cursor: pointer; }
.carousel-item.karte4-item .flip-trigger img, .carousel-item.karte4-item .resetflip img { height: 22px; width: auto; }
.carousel-item.karte4-item .schriftzug img { height: 30px; width: auto; }
.carousel-item.karte4-item .card-back .schriftzug img { height: 25px; max-height: 25px; }

.carousel-item.karte4-item .content { padding: 15px; text-align: center; }
.carousel-item.karte4-item .vorzeile { color: #333; font-size: 13px; margin-bottom: 8px; }
.carousel-item.karte4-item .schlagzeile { font-size: 20px; font-weight: bold; color: #000; }
.carousel-item.karte4-item .card-back .content { overflow-y: auto; height: calc(100% - 60px); }
.carousel-item.karte4-item .card-img { max-width: 100%; height: auto; margin: 10px 0; }