.flex-widget-wrapper {
  padding:0;margin:0;
}

.flex-image-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.flex-box {
  flex: 1 1 30%;
  width: 33.33333333333%;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.flex-box.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Editor Ansicht immer sichtbar */
.elementor-editor-active .flex-box {
  opacity: 1 !important;
  transform: none !important;
}

/* euer Container mit grünem Hintergrund */
.card-box {
  overflow: hidden;
  transition: background 0.3s ease;
}

/* Bild */
.image-wrapper {
  position: relative;
  overflow: hidden;
  margin:30px;
}

.image-wrapper img {
  width: 100%;
  display: block;
  transition: transform 0.3s ease;
}

/* Overlay */
.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* Text im Bild (hover only) */
.overlay-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  color: white;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.overlay-text h2,
.overlay-text p {
  margin: 0;
  color: white;
}

/* Weißer Textcontainer unter Bild */
.text-box {
  background: #fff;
  padding: 30px;
  min-height: 350px;
  margin: 0;
  transition: opacity 0.3s ease;
}

.text-box h2 {
  margin: 0;
  color: #98AA42;
}

.text-box p {
  margin-top: 5px;
  color: #000;
}

/* Hover-Effekte */
.image-wrapper:hover .overlay {
  opacity: 1;
}

.image-wrapper:hover + .text-box h2,
.image-wrapper:hover + .text-box p {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-wrapper:hover .overlay-text {
  opacity: 1;
}

/* Responsive */
@media (max-width: 960px) {
	
  .flex-box {
	 width: 100%;
	 flex:inherit!important;
  }
  
  
}