/* ==========================================================================
   FHG Falling Leaves — v1.1.0
   Dekorative fallende Blaetter-Animation
   ========================================================================== */

.fhg-falling-leaves {
	position: relative;
	width: 100%;
	pointer-events: none;
}

/* --- Blatt (gemeinsam) --- */
.fhg-leaf {
	position: absolute;
	opacity: 0;
	will-change: transform, opacity;
	z-index: 1;
}

.fhg-leaf img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

/* Flip via CSS Custom Property */
.fhg-leaf img {
	transform: var(--fhg-leaf-flip, none);
}

/* ==========================================================================
   Animation — nur wenn sichtbar
   ========================================================================== */

/* Blatt 1: Faellt mit Pendeln nach rechts startend */
.fhg-fl--visible .fhg-leaf--1 {
	animation: fhg-leaf-fall-1
		var(--fhg-leaf-duration, 1.8s)
		cubic-bezier(0.25, 0.46, 0.45, 0.94)
		var(--fhg-leaf-delay, 0s)
		forwards;
}

/* Blatt 2: Faellt mit Pendeln nach links startend */
.fhg-fl--visible .fhg-leaf--2 {
	animation: fhg-leaf-fall-2
		var(--fhg-leaf-duration, 1.8s)
		cubic-bezier(0.25, 0.46, 0.45, 0.94)
		var(--fhg-leaf-delay, 0.4s)
		forwards;
}

/* --- Keyframes Blatt 1 ---
   Pendelt: rechts → links → rechts → Ruhe
   Rotiert: gegen Uhrzeiger → mit → gegen → End-Rotation */
@keyframes fhg-leaf-fall-1 {
	0% {
		opacity: 0;
		transform:
			translateY( calc( var(--fhg-leaf-fall, 150px) * -1 ) )
			translateX( var(--fhg-leaf-sway, 30px) )
			rotate(-20deg);
	}
	15% {
		opacity: 1;
	}
	25% {
		transform:
			translateY( calc( var(--fhg-leaf-fall, 150px) * -0.6 ) )
			translateX( calc( var(--fhg-leaf-sway, 30px) * -0.7 ) )
			rotate(12deg);
	}
	50% {
		transform:
			translateY( calc( var(--fhg-leaf-fall, 150px) * -0.2 ) )
			translateX( calc( var(--fhg-leaf-sway, 30px) * 0.4 ) )
			rotate(-8deg);
	}
	75% {
		transform:
			translateY( calc( var(--fhg-leaf-fall, 150px) * 0.05 ) )
			translateX( calc( var(--fhg-leaf-sway, 30px) * -0.15 ) )
			rotate( calc( var(--fhg-leaf-end-rot, -15deg) + 5deg ) );
	}
	100% {
		opacity: 1;
		transform:
			translateY(0)
			translateX(0)
			rotate( var(--fhg-leaf-end-rot, -15deg) );
	}
}

/* --- Keyframes Blatt 2 ---
   Pendelt: links → rechts → links → Ruhe (gespiegelt zu Blatt 1)
   Etwas laengere Amplitude fuer Variation */
@keyframes fhg-leaf-fall-2 {
	0% {
		opacity: 0;
		transform:
			translateY( calc( var(--fhg-leaf-fall, 150px) * -1.1 ) )
			translateX( calc( var(--fhg-leaf-sway, 30px) * -1 ) )
			rotate(18deg);
	}
	15% {
		opacity: 1;
	}
	30% {
		transform:
			translateY( calc( var(--fhg-leaf-fall, 150px) * -0.55 ) )
			translateX( calc( var(--fhg-leaf-sway, 30px) * 0.8 ) )
			rotate(-10deg);
	}
	55% {
		transform:
			translateY( calc( var(--fhg-leaf-fall, 150px) * -0.15 ) )
			translateX( calc( var(--fhg-leaf-sway, 30px) * -0.3 ) )
			rotate(6deg);
	}
	80% {
		transform:
			translateY( calc( var(--fhg-leaf-fall, 150px) * 0.03 ) )
			translateX( calc( var(--fhg-leaf-sway, 30px) * 0.1 ) )
			rotate( calc( var(--fhg-leaf-end-rot, 10deg) - 3deg ) );
	}
	100% {
		opacity: 1;
		transform:
			translateY(0)
			translateX(0)
			rotate( var(--fhg-leaf-end-rot, 10deg) );
	}
}

/* ==========================================================================
   Reduced Motion — Barrierefreiheit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.fhg-fl--visible .fhg-leaf--1,
	.fhg-fl--visible .fhg-leaf--2 {
		animation: none;
		opacity: 1;
		transform: rotate( var(--fhg-leaf-end-rot, 0deg) );
	}
}


/* ==========================================================================
   Reduced Motion — Barrierefreiheit
   ========================================================================== */
@media (max-width: 767px) {
	 .elementor-676 .elementor-element.elementor-element-e3b991a .fhg-leaf--2 {
    width: 150px;
    left: calc(100% - 180px);
    top: 30px;
  }
}