:root {
	--abstandflipper: 20px;
	--standardtransition: all 0.5s ease;
	--flipperbg: var(--dunkelrot);
	--flippergroesse: 33.3%;
	--flipperpuffer: 3px;
}

/* -- Flipboxen -- */
.frame-flipbox {
	float: left;
	clear: both;
	width: 100%;
    opacity: 0;
}

.frame-type-shortcut.frame-flipbox > .rahmen > .frame {
	width: calc(var(--flippergroesse) - var(--abstandflipper) + var(--flipperpuffer));
	display: inline-block;
	vertical-align: top;
	float: none;
	clear: none;
	margin: 0 0 var(--abstandflipper) 0;
	overflow: visible !important;
	cursor: pointer;	
}

.frame-type-shortcut.frame-flipbox > .rahmen > .frame:nth-child(3n+2) {
	margin-left: var(--abstandflipper);
	margin-right: var(--abstandflipper);
}

.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-bodytext {
	display: block;
	background: var(--flipperbg);
	color: var(--weiss);
	width: calc(100% - var(--abstandflipper) * 2);
	height: calc(100% - var(--abstandflipper) * 6);
	padding: calc(var(--abstandflipper) * 3) var(--abstandflipper);
	border-radius: var(--abstand25);
	box-shadow: inset 0 0 0 4px var(--weiss);
}

.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-bodytext h1,
.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-bodytext h2,
.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-bodytext h3,
.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-bodytext a {
	color: var(--weiss);
}

.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-bodytext h1,
.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-bodytext h2,
.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-bodytext h3 {
	margin-top: 0;
}

.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-bodytext .scrollbox {
	height: 100%;
	overflow: auto;
}

.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-gallery,
.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-gallery .ce-row,
.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-gallery .ce-column,
.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-gallery .image {
	margin: 0;
	width: 100%;
	height: 100%;
	float: left;
	clear: both;
	display: block;
}

.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-gallery .ce-row,
.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-gallery .ce-column,
.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-gallery .image {
	height: auto;
}

.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-gallery {
	background: var(--flipperbg);
	border-radius: var(--abstand25);
	width: 100%;
	height: 100%;
    padding: 0;
	text-align: center;
	float: left;
	clear: both;
	box-shadow: inset 0 0 0 4px var(--weiss);
}

.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-gallery .ce-row {
	width: calc(100% - calc(var(--marginabstand) * 4));
    margin: calc(var(--marginabstand) * 6) calc(var(--marginabstand) * 2);


}

.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-gallery picture {
	width: 100px;
	background: var(--weiss);
	display: block;
	float: left;
	clear: both;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 100%;
	padding: calc(var(--marginabstand) * 3);
}

.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-gallery .image-caption {
	display: block;
	width: 100%;
	float: left;
	clear: both;
	color: var(--weiss);
	margin: calc(var(--marginabstand) * 3) 0 0 0;
	font-size: var(--fs40);
    line-height: var(--lh12);
    font-weight: 500;
}


.frame-flipbox > .rahmen > .frame img {
	width: 100% !important;
	height: auto !important;
	transition: var(--standardtransition); 
}

.frame-flipbox > .rahmen > .frame .image {
	overflow: hidden;
}

/*
.frame-flipbox > .rahmen > .frame:hover .image img {
	transform: scale(1.1); 
}
*/
/* -- flipper -- */
/* entire container, keeps perspective */
.flipcontainer {
	perspective: 1000px;
	width: 100%;
	height: 100%;
}

/* flip the pane when hovered */
.flipcontainer.hover .flipper {
	transform: rotateY(180deg);
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
	width: 100%;
	height: 100%;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
	transition: var(--standardtransition);
	opacity: 0;
}

.back.showback {
	z-index: 3;
	backface-visibility: visible;
	opacity: 1;
	top: -1px;
}

.front.hidefront {	
	backface-visibility: hidden;
	opacity: 0;
}