/* Realistischer Schmetterling */
.butterfly {
	position: absolute;
	width: 40px;
	height: 40px;
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Der Körper des Schmetterlings */
.butterfly-body {
	position: absolute;
	width: 4px;
	height: 20px;
	background: linear-gradient(to bottom, #333 70%, #444 100%);
	left: 18px;
	top: 10px;
	border-radius: 50% 50% 0 0;
}

/* Die Fühler des Schmetterlings */
.butterfly-body:before,
.butterfly-body:after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border-top: 1px solid #333;
	border-radius: 50%;
	top: -5px;
}

.butterfly-body:before {
	left: -5px;
	transform: rotate(-30deg);
}

.butterfly-body:after {
	right: -5px;
	transform: rotate(30deg);
}

/* Die Flügel des Schmetterlings */
.butterfly-wings {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-origin: center;
}

/* Wing styles - shared properties */
.wing-top-left, .wing-top-right, .wing-bottom-left, .wing-bottom-right {
	position: absolute;
}

/* Specific wing positions */
.wing-top-left {
	width: 18px;
	height: 22px;
	left: 2px;
	top: 2px;
	border-radius: 80% 80% 60% 80%;
	transform-origin: bottom right;
}

.wing-top-right {
	width: 18px;
	height: 22px;
	right: 2px;
	top: 2px;
	border-radius: 80% 80% 80% 60%;
	transform-origin: bottom left;
}

.wing-bottom-left {
	width: 14px;
	height: 16px;
	left: 6px;
	top: 22px;
	border-radius: 60% 60% 80% 70%;
	transform-origin: top right;
}

.wing-bottom-right {
	width: 14px;
	height: 16px;
	right: 6px;
	top: 22px;
	border-radius: 60% 60% 70% 80%;
	transform-origin: top left;
}

/* Butterfly color schemes */
.butterfly-1 .wing-top-left,
.butterfly-1 .wing-top-right,
.butterfly-1 .wing-bottom-left,
.butterfly-1 .wing-bottom-right {
  background: #e67e22 !important;
  border: 1px solid #d35400 !important;
  box-shadow: 0 0 8px rgba(230, 126, 34, 0.7) !important;
}

.butterfly-2 .wing-top-left,
.butterfly-2 .wing-top-right,
.butterfly-2 .wing-bottom-left,
.butterfly-2 .wing-bottom-right {
  background: #3498db !important;
  border: 1px solid #2980b9 !important;
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.7) !important;
}

.butterfly-3 .wing-top-left,
.butterfly-3 .wing-top-right,
.butterfly-3 .wing-bottom-left,
.butterfly-3 .wing-bottom-right {
  background: #00812b !important;
  border: 2px solid #006622 !important;
  box-shadow: 0 0 12px rgba(0, 129, 43, 1) !important;
  opacity: 1 !important;
}

.butterfly-4 .wing-top-left,
.butterfly-4 .wing-top-right,
.butterfly-4 .wing-bottom-left,
.butterfly-4 .wing-bottom-right {
  background: #9b59b6 !important;
  border: 1px solid #8e44ad !important;
  box-shadow: 0 0 8px rgba(155, 89, 182, 0.7) !important;
}

/* Naturstimmung für die Schmetterlinge */
.butterfly:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 20px;
	left: 0;
	top: 10px;
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
	opacity: 0;
	transform: scaleX(0.1);
	transform-origin: left;
	transition: transform 0.3s;
}

/* Flügelschlag-Animation */
@keyframes flap {
	0%, 100% { transform: rotateY(0deg); }
	50% { transform: rotateY(40deg); }
}

/* BUTTERFLY FLIGHT PATHS - Kommentiert nach Farben */

/* ORANGE SCHMETTERLING - Nach links/unten */
@keyframes fly-path-1 {
	0% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(-100px, -50px) rotate(10deg); }
	50% { transform: translate(-150px, 0px) rotate(-15deg); }
	75% { transform: translate(-100px, 50px) rotate(5deg); }
	95%, 100% { transform: translate(-210px, 100px) rotate(-5deg); }
}

/* BLAUER SCHMETTERLING - Nach rechts/unten */
@keyframes fly-path-2 {
	0% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(50px, -100px) rotate(-10deg); }
	50% { transform: translate(100px, -50px) rotate(15deg); }
	75% { transform: translate(100px, 50px) rotate(-5deg); }
	95%, 100% { transform: translate(170px, 110px) rotate(5deg); }
}

/* GRÜNER SCHMETTERLING - Gerade nach oben */
@keyframes fly-path-3 {
	0% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(-50px, -100px) rotate(5deg); }
	50% { transform: translate(0px, -150px) rotate(-10deg); }
	75% { transform: translate(50px, -100px) rotate(15deg); }
	95%, 100% { transform: translate(-60px, -180px) rotate(0deg); }
}

/* LILA SCHMETTERLING - Nach rechts/oben */
@keyframes fly-path-4 {
	0% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(100px, 50px) rotate(-5deg); }
	50% { transform: translate(150px, 0px) rotate(10deg); }
	75% { transform: translate(100px, -50px) rotate(-15deg); }
	95%, 100% { transform: translate(150px, -100px) rotate(0deg); }
}

/* BUTTERFLY ANIMATIONS - Angepasst für 400px Scroll-Breite */
.container.open .butterfly {
	opacity: 1;
}

/* ALLE SCHMETTERLINGE starten beim Siegel (leicht versetzt) */
.container.open .butterfly-1 {
	left: 145px; /* Leicht links vom Siegel */
	top: 95px;   /* Leicht oberhalb */
	/* ORANGE SCHMETTERLING - fliegt nach links/unten */
	animation: fly-path-1 8s ease-in-out forwards 1s, flutter-1 2s ease-in-out infinite 9s;
}

.container.open .butterfly-2 {
	left: 155px; /* Leicht rechts vom Siegel */
	top: 105px;  /* Leicht unterhalb */
	/* BLAUER SCHMETTERLING - fliegt nach rechts/unten */
	animation: fly-path-2 9s ease-in-out forwards 1.3s, flutter-2 2.2s ease-in-out infinite 10.3s;
}

.container.open .butterfly-3 {
	left: 148px; /* Minimal links vom Zentrum */
	top: 102px;  /* Minimal unterhalb */
	/* GRÜNER SCHMETTERLING - fliegt nach oben */
	animation: fly-path-3 8.5s ease-in-out forwards 1.6s, flutter-3 1.8s ease-in-out infinite 10.1s;
}

.container.open .butterfly-4 {
	left: 152px; /* Minimal rechts vom Zentrum */
	top: 98px;   /* Minimal oberhalb */
	/* LILA SCHMETTERLING - fliegt nach rechts/oben */
	animation: fly-path-4 9.5s ease-in-out forwards 1.9s, flutter-4 2.1s ease-in-out infinite 11.4s;
}

/* Flügelschlag-Animationen */
.container.open .butterfly .wing-top-left,
.container.open .butterfly .wing-bottom-left {
	animation: flap 0.15s ease-in-out infinite alternate;
}

.container.open .butterfly .wing-top-right,
.container.open .butterfly .wing-bottom-right {
	animation: flap 0.15s ease-in-out infinite alternate-reverse;
}

/* Hover effect for butterflies */
.butterfly:hover {
	filter: brightness(1.2);
}

/* FLUTTER ANIMATIONS - Dynamisches Flattern an den Zielpositionen */

/* Orange Schmetterling - Links/unten Position */
@keyframes flutter-1 {
	0% { transform: translate(-210px, 100px) rotate(-5deg); }
	25% { transform: translate(-215px, 95px) rotate(-2deg); }
	50% { transform: translate(-205px, 105px) rotate(-8deg); }
	75% { transform: translate(-212px, 98px) rotate(-3deg); }
	100% { transform: translate(-210px, 100px) rotate(-5deg); }
}

/* Blauer Schmetterling - Rechts/unten Position */
@keyframes flutter-2 {
	0% { transform: translate(170px, 110px) rotate(5deg); }
	25% { transform: translate(175px, 105px) rotate(2deg); }
	50% { transform: translate(165px, 115px) rotate(8deg); }
	75% { transform: translate(172px, 108px) rotate(3deg); }
	100% { transform: translate(170px, 110px) rotate(5deg); }
}

/* Grüner Schmetterling - Oben/links Position */
@keyframes flutter-3 {
	0% { transform: translate(-60px, -180px) rotate(0deg); }
	25% { transform: translate(-65px, -175px) rotate(3deg); }
	50% { transform: translate(-55px, -185px) rotate(-3deg); }
	75% { transform: translate(-62px, -178px) rotate(1deg); }
	100% { transform: translate(-60px, -180px) rotate(0deg); }
}

/* Lila Schmetterling - Rechts/oben Position */
@keyframes flutter-4 {
	0% { transform: translate(150px, -100px) rotate(0deg); }
	25% { transform: translate(155px, -95px) rotate(-2deg); }
	50% { transform: translate(145px, -105px) rotate(2deg); }
	75% { transform: translate(152px, -102px) rotate(-1deg); }
	100% { transform: translate(150px, -100px) rotate(0deg); }
}