/* Allgemein */

.h5-flip {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
  font-weight: 600;
  color: #ff9900;
}

.h5-flip-back {
  font-weight: bold;
  color: #ff9900;
  font-weight: bold;
}

.h6-flip {
  font-weight: 600;
  color: #545454;
}

.button-flip-card {
  background-color: #FF9900;
  color: white;
  padding: 5px 20px;
  font-weight: bold;
  border: solid 3px #FF9900;
  border-radius: 5px 5px 5px 5px;
}

.button-flip-card:hover {
  background-color: #cc7a00;
  border: solid 3px #cc7a00;
}

/* Flip-Card */

.flip-card {
  background-color: transparent;
  width: auto;
  height: auto;
  perspective: 1000px;
}

.div-content-front {
  background-color: white;
  border-radius: 0px 0px 10px 10px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 10px;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: rgba(187,187,187,0);
  color: black;
  border-radius: 10px;
  padding: 20px;
}

.flip-card-back {
  background-color: #ffffff;
  color: #000000;
  transform: rotateY(180deg);
  border-radius: 10px;
  padding: 20px;
  text-align: left;
}

.list-flip {
  padding-left: 15px;
}

/* ================Flip-Card=============== */