.elementor-16448 .elementor-element.elementor-element-785acb7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-cb31ec5 *//* Grundcontainer */
.flip-card {
  background-color: transparent;
  width: 300px; /* Hier Breite anpassen */
  height: 400px; /* Hier Höhe anpassen */
  perspective: 1000px; /* Erzeugt den 3D-Effekt */
  margin: 10px;
}

/* Der innere Container, der sich dreht */
.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);
}

/* Hover-Effekt: Drehung um 180 Grad */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Positionierung von Vorder- und Rückseite */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Versteckt die Rückseite beim Drehen */
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
}

/* Styling Vorderseite */
.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Styling Rückseite */
.flip-card-back {
  background-color: #333; /* Deine Wunschfarbe */
  color: white;
  transform: rotateY(180deg); /* Text ist standardmäßig gespiegelt */
  padding: 20px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bc71df5 *//* Grundcontainer */
.flip-card {
  background-color: transparent;
  width: 300px; /* Hier Breite anpassen */
  height: 400px; /* Hier Höhe anpassen */
  perspective: 1000px; /* Erzeugt den 3D-Effekt */
  margin: 10px;
}

/* Der innere Container, der sich dreht */
.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);
}

/* Hover-Effekt: Drehung um 180 Grad */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Positionierung von Vorder- und Rückseite */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Versteckt die Rückseite beim Drehen */
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
}

/* Styling Vorderseite */
.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Styling Rückseite */
.flip-card-back {
  background-color: #333; /* Deine Wunschfarbe */
  color: white;
  transform: rotateY(180deg); /* Text ist standardmäßig gespiegelt */
  padding: 20px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8c19f5f *//* Grundcontainer */
.flip-card {
  background-color: transparent;
  width: 300px; /* Hier Breite anpassen */
  height: 400px; /* Hier Höhe anpassen */
  perspective: 1000px; /* Erzeugt den 3D-Effekt */
  margin: 10px;
}

/* Der innere Container, der sich dreht */
.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);
}

/* Hover-Effekt: Drehung um 180 Grad */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Positionierung von Vorder- und Rückseite */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Versteckt die Rückseite beim Drehen */
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
}

/* Styling Vorderseite */
.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Styling Rückseite */
.flip-card-back {
  background-color: #333; /* Deine Wunschfarbe */
  color: white;
  transform: rotateY(180deg); /* Text ist standardmäßig gespiegelt */
  padding: 20px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-86b9ea4 *//* Grundcontainer */
.flip-card {
  background-color: transparent;
  width: 300px; /* Hier Breite anpassen */
  height: 400px; /* Hier Höhe anpassen */
  perspective: 1000px; /* Erzeugt den 3D-Effekt */
  margin: 10px;
}

/* Der innere Container, der sich dreht */
.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);
}

/* Hover-Effekt: Drehung um 180 Grad */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Positionierung von Vorder- und Rückseite */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Versteckt die Rückseite beim Drehen */
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
}

/* Styling Vorderseite */
.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Styling Rückseite */
.flip-card-back {
  background-color: #333; /* Deine Wunschfarbe */
  color: white;
  transform: rotateY(180deg); /* Text ist standardmäßig gespiegelt */
  padding: 20px;
}/* End custom CSS */