body:not(.inhalte_bearbeiten) .flipper:hover {
    transform: rotateY(180deg);

    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
 .flipper .bild,
.flipper .text_wrapper{
    background-color: white;
}
.flipper .bild img{
    width:100%;
}
.flipper .front,
.flipper .back{
    width:100%;
    max-width:100%;
    box-sizing: border-box;
    text-align:center;
    vertical-align: middle;

    width: 100%; /* Falls es sich um ein Block-Element handelt */
    transition: background-color 0.8s;


    overflow:hidden;
}
.flipper, .flipper .front, .flipper .back {
    width: 100%;
}
/* flip speed goes here */
.flipper {
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
}
/* hide back of pane during swap */
.flipper .front, .flipper .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
/* front pane, placed above back */
.flipper .front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}
/* back, initially hidden pane */
.flipper .back {
    transform: rotateY(180deg);
}
.flipper .vparent{
    display:grid !important;
    grid-template-columns: 1fr;
    grid-template-areas: 'text';
    justify-items:center;
    align-items: center;
    align-content: center; /* extra fuer safari */
}
.flipper .vchild{
    grid-area:text;
}
body.inhalte_bearbeiten .flipper_off:after,
body.inhalte_bearbeiten .flipper:after{
    opacity:1;
    transition: all .4s;
    text-transform: none;
    position:absolute;
    top:0px;
    right:0px;
    font-size:10px;
    max-height:20px;
    line-height:12px;

    padding:5px;
    color:white;
    content:'Flipper';
}