.qm-amination-rotation {
    -webkit-perspective: 1500;
    -moz-perspective: 1500;
    -o-perspective: 1500;
    perspective: 1500;
    /* Hier wird die Perspektive der gesamten Szene festgelegt. Der Wert hat Auswirkung auf die Verzerrung */
    margin: 0 1em;
}

.qm-amination-rotation-turnaround {
    /* Kind-Elemente  (.front + .back) sollen ihre 3D-Eigenschaften behalten*/
    position: relative;

    -webkit-transition: 1000ms;
    -moz-transition: 1000ms;
    -o-transition: 1000ms;
    transition: 1000ms;

    transition-timing-function: ease-in-out;
    transform-style: preserve-3d;
}

.qm-amination-rotation:hover .qm-amination-rotation-turnaround {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.qm-amination-rotation-turnaround-vertical .qm-amination-rotation-turnaround-back {
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
}

.qm-amination-rotation-turnaround-front, .qm-amination-rotation-turnaround-back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden  /* Die Rückseite von Elementen soll unsichtbar sein */ ;

    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0px;
    width: 100%;
    height: 100%;
    font-weight: bold;
}

.qm-amination-rotation-turnaround-front {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    z-index: 2;
}

.qm-amination-rotation-turnaround-back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg) /* Die Rückseite des Logos wird umgedreht, um dann bei der Drehung der gesamten Szene vorne zu sein :) */ ;
    z-index: 1;
}


.qm-moderationskachel {
    position: relative;
    margin: 15px;
}

.qm-moderationskachel .qm-lead {
    font-weight: 600;
}

.qm-moderationskachel .qm-moderationskachel-content {
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
}

.qm-moderationskachel .qm-moderationskachel-back {
    padding-left: 8%;
    padding-right: 8%;
}

.qm-moderationskachel .qm-moderationskachel-back h3 {
    font-size: 1.1em;
}

.qm-moderationskachel .qm-moderationskachel-back p {
    font-size: 1.0em;
}

.qm-moderationskachel .qm-moderationskachel-header {
    font-size: 1.1em;
    text-transform: uppercase;
    font-family: 'Noto Serif', serif;
}