.elementor-23602 .elementor-element.elementor-element-46ad4f6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23602 .elementor-element.elementor-element-45d1e81{width:var( --container-widget-width, 300px );max-width:300px;--container-widget-width:300px;--container-widget-flex-grow:0;}.elementor-23602 .elementor-element.elementor-element-a06a417{width:var( --container-widget-width, 300px );max-width:300px;--container-widget-width:300px;--container-widget-flex-grow:0;}@media(min-width:768px){.elementor-23602 .elementor-element.elementor-element-46ad4f6{--content-width:300px;}}/* Start custom CSS for container, class: .elementor-element-46ad4f6 *//* === Container (3D Bühne) === */
.flip-card-inner{
  position: relative;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  transform-style: preserve-3d;
  overflow: hidden;
  line-height: 0;
  contain: paint;
}

/* === Front- & Rückseite übereinander === */
.flip-card-front,
.flip-card-back{
  position: absolute;
  inset: 0;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .6s ease;
  z-index: 1; /* baseline */
}

/* === Bilder füllen === */
.flip-card-front img,
.flip-card-back img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === Startzustand === */
.flip-card-front{
  transform: rotateY(0deg);
  z-index: 2; /* vorne */
}
.flip-card-back{
  transform: rotateY(180deg);
  z-index: 1;
}

/* === Hover: Back nach vorne === */
.flip-card-inner.is-ready:hover .flip-card-front{
  transform: rotateY(-180deg);
  z-index: 1; /* nach hinten */
}
.flip-card-inner.is-ready:hover .flip-card-back{
  transform: rotateY(0deg);
  z-index: 2; /* nach vorne */
}

/* === Hover-Leave: Front sofort vorne === */
.flip-card-inner.is-ready:not(:hover) .flip-card-front{
  transform: rotateY(0deg);
  z-index: 2;
}
.flip-card-inner.is-ready:not(:hover) .flip-card-back{
  transform: rotateY(180deg);
  z-index: 1;
}

/* === Optional: Tap-to-flip für Mobile === */
.flip-card-inner.is-flipped .flip-card-front{
  transform: rotateY(-180deg);
  z-index: 1;
}
.flip-card-inner.is-flipped .flip-card-back{
  transform: rotateY(0deg);
  z-index: 2;
}/* End custom CSS */