.hju-staff-card {
  width: 100%;
  height: 100%;
  perspective: 1000px;
  cursor: pointer;
}

.hju-staff-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.hju-staff-card.flipped .hju-staff-inner {
  transform: rotateY(180deg);
}

.hju-staff-front,
.hju-staff-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}

/* Vorderseite */
.hju-staff-front {
  z-index: 1;
}

/* Rückseite */
.hju-staff-back {
  transform: rotateY(180deg);
  padding: 16px;
  background-color:rgb(255,207,185);
  background-color:white;
  overflow-y: auto;
  z-index:1;
  backface-visibility: visible;
  opacity: 0;
  transition: opacity 0.8s;
}


.flipped .hju-staff-back {
	opacity: 1;
	
}









.hju-staff {
	position:relative;
	width:390px;
	height:470px;
	text-align:center;
	background-color:white;
	border-radius:10px;
	text-align:center;
  	box-sizing: border-box;
}
.hju-staff::before {
	content:"";
	border-radius:10px;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:0;
	background-color:var(--orange);
	opacity:0.5;
}
.hju-staff.color-scheme-100::before {
	background-color:var(--lightblue);
}
.hju-staff.color-scheme-101::before {
	background-color:var(--red);
}
.hju-staff.color-scheme-102::before {
	background-color:var(--turqoise);
}
.hju-staff.color-scheme-103::before {
	background-color:var(--orange);
}
.hju-staff.color-scheme-104::before {
	opacity:0.5;
	background: transparent linear-gradient(10deg, rgba(255, 159, 115, 1) 0%, rgba(255, 159, 115, 0.3) 100%) 0% 0% no-repeat padding-box;
	
}
.hju-staff.color-scheme-105::before {
	opacity:0.5;
	background: transparent linear-gradient(10deg, rgba(210, 179, 255, 1) 0%, rgba(210, 179, 255, 0.3) 100%) 0% 0% no-repeat padding-box;
}


.hju-staff .turn {
	position:absolute;
	top:8px;
	right:8px;
}
.hju_staff_image {
	margin-top:80px;
	margin-bottom:20px;
	border-radius: 50%;
	z-index:1;
	position:relative;
}
.hju-kachel-gradient {
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	position:absolute;
	left:0;
	top:60%;
	bottom:0;
	right:0;
	border-radius:10px;
	z-index:0;
}
.hju-staff-header,
.hju-staff-subheader {
	color:black;
	font-size:20px;
	font-weight:700;
	line-height:26px;
	margin:0;
	padding:0;
	z-index:1;
	position:relative;
}
.hju-staff-subheader {
	font-size:18px;
	font-weight:500;
	margin-bottom:20px;
}
.hju-staff-link {
	font-size:18px;
	font-weight:500;
	line-height:26px;
	color:var(--lightblue);
	z-index:2;
	position:relative;
	display:block;
	opacity: 1;
	transition:opacity 0.8s;
}
.flipped .hju-staff-link {
	opacity: 0;
}
.ready .hju-staff-link {
	width:0;
}
.hju-staff-description {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	padding:20px;
	box-sizing:border-box;
	text-align: left;
	font-size:18px;
	line-height:26px;
}
.color-scheme-90 .hju-kachel-link {
	color:var(--lightblue);
}
.color-scheme-91 .hju-kachel-link {
	color:var(--red);
}
.color-scheme-92 .hju-kachel-link {
	color:var(--turqoise);
}

@media only screen and (max-width: 450px) {

	.hju-staff {
		position:relative;
		width:calc(100vw - 40px);
		height:auto;
		min-height:470px;
	}
}