.dpp-flipbox {
  position: relative;
  perspective: 1000px;
}

.dpp-flipbox__inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;
  height: 100%; /* durch JS gesetzt, wenn nötig */
}

.dpp-flipbox__button{
   display:inline-block;
   padding:5px 20px;
}

.dpp-flipbox:hover .dpp-flipbox__inner {
    /* Dieser Effekt wird je nach Klasse (horizontal/vertical/...) überschrieben */
}

.dpp-flipbox__front,
.dpp-flipbox__back {
	backface-visibility: hidden;
    box-sizing: border-box;
    overflow: hidden;    
    width: 100%;
}

.dpp-flipbox__front {
    position: relative;
    z-index: 2;
}

.dpp-flipbox__back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transform: rotateY(180deg);
    z-index: 1;
}


.dpp-flipbox__back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}


.dpp-flipbox__front {
    z-index: 2;
}

.dpp-flipbox__back {
    transform: rotateY(180deg);
}

.dpp-flipbox--align-left {
  text-align: left;
}

.dpp-flipbox--align-center {
  text-align: center;
}

.dpp-flipbox--align-right {
  text-align: right;
}

.dpp-flipbox__text,
.dpp-flipbox__button,
.dpp-flipbox__heading {
  color: inherit;
}

.dpp-flipbox {
  width: 100%;
}

/* ============================================= */
/* === Flip-Effekte ============================ */
/* ============================================= */

/* Horizontal Flip */
.dpp-flipbox--horizontal:hover .dpp-flipbox__inner {
    transform: rotateY(180deg);
}

/* Vertikal Flip */
.dpp-flipbox--vertical .dpp-flipbox__back {
    transform: rotateX(180deg);
}
.dpp-flipbox--vertical:hover .dpp-flipbox__inner {
    transform: rotateX(180deg);
}


/* Diagonal Flip */
.dpp-flipbox--diagonal .dpp-flipbox__inner {
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
}

.dpp-flipbox--diagonal:hover .dpp-flipbox__inner {
    transform: rotate3d(1, 1, 0, 180deg);
}

.dpp-flipbox--diagonal .dpp-flipbox__front,
.dpp-flipbox--diagonal .dpp-flipbox__back {
    backface-visibility: hidden;
    width: 100%;
    height: 100%;
}

.dpp-flipbox--diagonal .dpp-flipbox__back {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate3d(1, 1, 0, 180deg);
}


/* Fade */
.dpp-flipbox--fade .dpp-flipbox__back {
    opacity: 0;
    transform: none;
    transition: opacity 0.6s ease;
}
.dpp-flipbox--fade:hover .dpp-flipbox__back {
    opacity: 1;
}
.dpp-flipbox--fade .dpp-flipbox__front {
    transition: opacity 0.6s ease;
}
.dpp-flipbox--fade:hover .dpp-flipbox__front {
    opacity: 0;
}

/* Slide */
.dpp-flipbox--slide .dpp-flipbox__inner {
    transform: none;
}
.dpp-flipbox--slide .dpp-flipbox__back {
    transform: translateY(100%);
}
.dpp-flipbox--slide:hover .dpp-flipbox__back {
    transform: translateY(0);
}
.dpp-flipbox--slide:hover .dpp-flipbox__front {
    transform: translateY(-100%);
}
.dpp-flipbox--slide .dpp-flipbox__front,
.dpp-flipbox--slide .dpp-flipbox__back {
    transition: transform 0.6s ease;
    transform: translateY(0);
}

/* ============================================= */
/* === Optionaler Hover-Zoom =================== */
/* ============================================= */

.dpp-flipbox--zoom:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}