.stage3d {
	perspective: 750px;
	width: 100%;
	display: grid;
	place-items: center;
	overflow: visible;
	padding-top: 80px;
	padding-bottom: 80px;
}

.cube3d {
	width: 300px;
	height: 300px;
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(0deg) rotateY(0deg);
	transition: transform 0.1s ease-in-out;
}

.face3d {
	position: absolute;
	width: 100%;
	height: 100%;
  	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	background-color: rgba(255, 255, 255, .8);
	border: 0;
}

.front3d  { transform: translateZ(150px); }
.back3d   { transform: rotateY(180deg) translateZ(150px); }
.left3d   { transform: rotateY(-90deg) translateZ(150px); }
.right3d  { transform: rotateY(90deg) translateZ(150px); }
.top3d    { transform: rotateX(90deg) translateZ(150px); }
.bottom3d { transform: rotateX(-90deg) translateZ(150px); }

.cube-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 8px 14px;
	font-weight: 700;
	border: 0;
	border-radius: 8px;
	background: rgba(0,0,0,.75);
	color: #fff;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease-in-out;
	z-index: 3;
}

.front3d:hover .cube-btn {
	opacity: 1;
	pointer-events: auto;
}

.fjb-touch .front3d .cube-btn {
	opacity: 1 !important;
	pointer-events: auto !important;
}

.fjb-touch .front3d a img {
	opacity: 1 !important;
}

@media (hover: none), (pointer: coarse) {
	.cube3d {
		width: 80vw;    /* max 80% der Windowbreite */
		height: 80vw;   /* quadratisch */
		transform: rotateX(0deg) rotateY(0deg) !important;
		transition: none;
	}
	.cube3d .face3d:not(.front3d) { display: none; }
	.front3d a img { width: 100%; height: auto; max-width: 100%; opacity: 1 !important; }
	.front3d { transform: none !important; } 
	.stage3d { height: auto; }
	.front3d .cube-btn { opacity: 1 !important; pointer-events: auto !important; }
}