/* Prozess-Animation – Nachbau der animierten Illustrationen der bisherigen Website. */
.wp-block-ea-solar-prozess-animation {
	--ea-von: #60a5fa;
	--ea-bis: #2563eb;
	position: relative;
	display: inline-block;
	background: #fff;
	border-radius: 1.5rem;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	transition: transform 0.5s, box-shadow 0.5s;
	animation: ea-fade-in-scale 0.6s ease-out;
	max-width: 100%;
}
.wp-block-ea-solar-prozess-animation:hover { transform: scale(1.05); box-shadow: 0 35px 60px -15px rgb(0 0 0 / 0.3); }
.ea-farbe-blau { --ea-von: #60a5fa; --ea-bis: #2563eb; }
.ea-farbe-gruen { --ea-von: #4ade80; --ea-bis: #16a34a; }
.ea-farbe-lila { --ea-von: #c084fc; --ea-bis: #9333ea; }
.ea-farbe-orange { --ea-von: #fb923c; --ea-bis: #ea580c; }
.ea-farbe-marke { --ea-von: #4ade80; --ea-bis: #16a34a; }

.ea-pa__nummer {
	position: absolute; top: -1rem; left: -1rem; z-index: 10;
	width: 3rem; height: 3rem; border-radius: 9999px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(to right, var(--ea-von), var(--ea-bis));
	color: #fff; font-weight: 700; font-size: 1.125rem;
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	animation: ea-bounce-gentle 2s ease-in-out infinite;
}
.ea-pa__buehne {
	position: relative; overflow: hidden;
	width: 20rem; max-width: 100%; height: 16rem; padding: 2rem; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
	border-radius: 1rem;
}
.ea-pa__muster { position: absolute; inset: 0; opacity: 0.1; }
.ea-pa__muster span { position: absolute; border-radius: 9999px; border: 1px solid; }
.ea-pa__muster span:nth-child(1) { top: .5rem; left: .5rem; width: 1rem; height: 1rem; border-color: #86efac; animation: ea-spin 8s linear infinite; }
.ea-pa__muster span:nth-child(2) { top: .5rem; right: .5rem; width: .75rem; height: .75rem; border-color: #93c5fd; animation: ea-spin-reverse 6s linear infinite; }
.ea-pa__muster span:nth-child(3) { bottom: .5rem; left: .5rem; width: .5rem; height: .5rem; border-color: #86efac; animation: ea-spin 8s linear infinite; }
.ea-pa__muster span:nth-child(4) { bottom: .5rem; right: .5rem; width: 1.25rem; height: 1.25rem; border-color: #d8b4fe; animation: ea-spin-reverse 6s linear infinite; }

.ea-pa-relativ { position: relative; }
.ea-pa-kopf { width: 4rem; height: 4rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.ea-pa-kopf--klein { width: 3.5rem; height: 3.5rem; }
.ea-pa-kopf--dunkel { background: linear-gradient(to bottom right, #374151, #111827); }
.ea-pa-kopf--blau { background: linear-gradient(to bottom right, #2563eb, #1e40af); }
.ea-pa-kopf--lila { background: linear-gradient(to bottom right, #9333ea, #6b21a8); }
.ea-pa-kopf--orange { background: linear-gradient(to bottom right, #ea580c, #9a3412); }
.ea-pa-auge { width: 1rem; height: 1rem; border-radius: 9999px; background: #fff; margin-bottom: .25rem; }

/* 1 – Beratung */
.ea-pa-beratung { display: flex; align-items: center; gap: 1.5rem; animation: ea-consultation 4s ease-in-out infinite; }
.ea-pa-person { position: relative; }
.ea-pa-badge { position: absolute; top: -.25rem; right: -.25rem; width: 1.5rem; height: 1.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(to right, #4ade80, #16a34a); animation: ea-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.ea-pa-sprechblase { position: relative; animation: ea-fade-in-scale .6s ease-out; }
.ea-pa-sprechblase__inhalt { display: flex; gap: .25rem; background: #fff; padding: .75rem; border-radius: .75rem; border: 2px solid #bbf7d0; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); }
.ea-pa-sprechblase__inhalt span { width: .375rem; height: .375rem; border-radius: 9999px; background: #4ade80; animation: ea-bounce 1s infinite; }
.ea-pa-sprechblase__inhalt span:nth-child(2) { animation-delay: .1s; }
.ea-pa-sprechblase__inhalt span:nth-child(3) { animation-delay: .2s; }

/* 2 – Termin */
.ea-pa-termin { position: relative; animation: ea-appointment 3s ease-in-out infinite; }
.ea-pa-kalender { width: 6rem; height: 5rem; background: #fff; border: 3px solid #d1d5db; border-radius: .5rem; overflow: hidden; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); box-sizing: border-box; }
.ea-pa-kalender__kopf { height: 1rem; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(to right, #22c55e, #16a34a); }
.ea-pa-kalender__raster { padding: .5rem; display: grid; grid-template-columns: repeat(3, .5rem); gap: .25rem; justify-content: start; }
.ea-pa-kalender__raster span { width: .5rem; height: .5rem; border-radius: .25rem; background: #e5e7eb; }
.ea-pa-kalender__raster span.is-aktiv { background: linear-gradient(to right, #22c55e, #16a34a); animation: ea-pulse-glow 2s ease-in-out infinite; }
.ea-pa-check { position: absolute; top: -.25rem; right: -.25rem; width: 1.5rem; height: 1.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #4ade80, #16a34a); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); animation: ea-bounce-in .6s ease-out; }
.ea-pa-check span, .ea-pa-kaestchen--ok span { width: .5rem; height: .375rem; border-bottom: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) translate(-1px, -1px); }
.ea-pa-zeiger { position: absolute; right: -2rem; top: .5rem; animation: ea-point 1.5s ease-in-out infinite; }
.ea-pa-zeiger__linie { position: absolute; top: 1.5rem; right: -1.5rem; height: 2px; width: 2rem; background: linear-gradient(to right, #4ade80, transparent); animation: ea-extend 1s ease-out; }

/* 3 – Angebot */
.ea-pa-angebot { position: relative; animation: ea-quote 4s ease-in-out infinite; }
.ea-pa-dokument { width: 5rem; background: #fff; border: 2px solid #d1d5db; border-radius: .5rem; padding: .75rem; display: flex; flex-direction: column; gap: .375rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); box-sizing: border-box; }
.ea-pa-zeile { display: block; height: .375rem; width: 100%; border-radius: .25rem; background: linear-gradient(to right, #d1d5db, #e5e7eb); animation: ea-type-in 1s ease-out; }
.ea-pa-zeile--75 { width: 75%; animation-delay: .1s; }
.ea-pa-zeile:nth-child(3) { animation-delay: .2s; }
.ea-pa-zeile--66 { width: 66%; animation-delay: .3s; }
.ea-pa-dokument__fuss { display: flex; justify-content: flex-end; gap: .25rem; margin-top: .375rem; }
.ea-pa-kaestchen { width: .75rem; height: .75rem; border: 1px solid #9ca3af; border-radius: .25rem; box-sizing: border-box; animation: ea-fade-in .8s ease-out .4s both; }
.ea-pa-kaestchen--ok { border: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #22c55e, #16a34a); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); animation: ea-check-in .8s ease-out .5s both; }
.ea-pa-kaestchen--ok span { width: .3rem; height: .2rem; border-width: 1px; }
.ea-pa-euro { position: absolute; top: -.5rem; right: -.5rem; width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .875rem; line-height: 1.25rem; background: linear-gradient(to right, #4ade80, #16a34a); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); animation: ea-float-money 2s ease-in-out infinite; }
.ea-pa-person-rechts { position: absolute; right: -1.5rem; top: -.5rem; }

/* 4 – Planung */
.ea-pa-planung { position: relative; animation: ea-planning 5s ease-in-out infinite; }
.ea-pa-zahnrad { position: relative; width: 4rem; height: 4rem; border: 3px solid #9ca3af; border-radius: 9999px; box-sizing: border-box; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); animation: ea-spin 8s linear infinite; }
.ea-pa-zahnrad__ring { position: absolute; inset: .5rem; border: 2px solid #9ca3af; border-radius: 9999px; }
.ea-pa-zahn { position: absolute; background: #9ca3af; }
.ea-pa-zahnrad > .ea-pa-zahn--o, .ea-pa-zahnrad > .ea-pa-zahn--u { left: 50%; width: .5rem; height: 1rem; }
.ea-pa-zahnrad > .ea-pa-zahn--o { top: 0; transform: translate(-50%, -.5rem); }
.ea-pa-zahnrad > .ea-pa-zahn--u { bottom: 0; transform: translate(-50%, .5rem); }
.ea-pa-zahnrad > .ea-pa-zahn--l, .ea-pa-zahnrad > .ea-pa-zahn--r { top: 50%; width: 1rem; height: .5rem; }
.ea-pa-zahnrad > .ea-pa-zahn--l { left: 0; transform: translate(-.5rem, -50%); }
.ea-pa-zahnrad > .ea-pa-zahn--r { right: 0; transform: translate(.5rem, -50%); }
.ea-pa-zahnrad__kern { position: absolute; inset: 1rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #facc15, #f97316); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); animation: ea-pulse-bright 2s ease-in-out infinite; }
.ea-pa-zahnrad__kern span { width: .5rem; height: .75rem; background: #fff; border-radius: 9999px 9999px 0 0; }
.ea-pa-zahnrad-klein { position: absolute; right: -1.5rem; top: 1.5rem; width: 2.5rem; height: 2.5rem; border: 2px solid #4ade80; border-radius: 9999px; box-sizing: border-box; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); animation: ea-spin-reverse 6s linear infinite; }
.ea-pa-zahnrad-klein .ea-pa-zahn { background: #4ade80; }
.ea-pa-zahnrad-klein .ea-pa-zahn--o, .ea-pa-zahnrad-klein .ea-pa-zahn--u { left: 50%; width: .375rem; height: .5rem; }
.ea-pa-zahnrad-klein .ea-pa-zahn--o { top: 0; transform: translate(-50%, -.25rem); }
.ea-pa-zahnrad-klein .ea-pa-zahn--u { bottom: 0; transform: translate(-50%, .25rem); }
.ea-pa-zahnrad-klein .ea-pa-zahn--l, .ea-pa-zahnrad-klein .ea-pa-zahn--r { top: 50%; width: .5rem; height: .375rem; }
.ea-pa-zahnrad-klein .ea-pa-zahn--l { left: 0; transform: translate(-.25rem, -50%); }
.ea-pa-zahnrad-klein .ea-pa-zahn--r { right: 0; transform: translate(.25rem, -50%); }
.ea-pa-planer { position: absolute; left: -2rem; top: .25rem; }
.ea-pa-blaupause { position: absolute; bottom: -.25rem; right: -.25rem; width: 1.5rem; height: 1rem; background: #bfdbfe; border: 1px solid #93c5fd; border-radius: .25rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); animation: ea-blueprint 2s ease-in-out infinite; }

/* 5 – Installation */
.ea-pa-installation { position: relative; animation: ea-installation 3s ease-in-out infinite; }
.ea-pa-modul { width: 6rem; height: 4rem; padding: .375rem; box-sizing: border-box; border-radius: .5rem; background: linear-gradient(to bottom right, #1f2937, #000); display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.ea-pa-modul span { border-radius: 2px; background: linear-gradient(135deg, #1e3a8a, #1e40af); animation: ea-solar-shine 2s ease-in-out infinite; }
.ea-pa-energie { position: absolute; top: -.25rem; left: 50%; transform: translateX(-50%); width: .25rem; height: 1.5rem; }
.ea-pa-energie span { position: absolute; top: 0; width: .25rem; height: 1.5rem; background: linear-gradient(to top, #facc15, transparent); animation: ea-energy-flow 1.5s ease-out infinite; }
.ea-pa-energie span:nth-child(1) { left: 0; }
.ea-pa-energie span:nth-child(2) { left: .25rem; animation-delay: .2s; }
.ea-pa-energie span:nth-child(3) { left: -.25rem; animation-delay: .4s; }
.ea-pa-sonne { position: absolute; top: -1.5rem; right: -1.5rem; animation: ea-spin 20s linear infinite; }
.ea-pa-sonne__kern { position: relative; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: linear-gradient(to right, #facc15, #f97316); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); animation: ea-pulse-bright 2s ease-in-out infinite; }
.ea-pa-strahl { position: absolute; left: 50%; top: 50%; width: 2px; height: 2rem; margin: -1rem 0 0 -1px; transform: rotate(var(--ea-winkel)); }
.ea-pa-strahl span { position: absolute; top: -.6rem; left: 0; width: 2px; height: .75rem; background: linear-gradient(to top, #facc15, transparent); transform-origin: bottom; animation: ea-ray-dance 1s ease-in-out infinite; }
.ea-pa-fortschritt { position: absolute; bottom: -.75rem; left: 50%; transform: translateX(-50%); width: 5rem; height: .375rem; background: #e5e7eb; border-radius: 9999px; overflow: hidden; }
.ea-pa-fortschritt span { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(to right, #22c55e, #22c55e); animation: ea-progress 3s ease-out infinite; }

/* Animationen */
.ea-anim-float { animation: ea-float 3s ease-in-out infinite; }
.ea-anim-float-delayed { animation: ea-float-delayed 4s ease-in-out 1s infinite; }
.ea-anim-blink { animation: ea-blink 3s ease-in-out infinite; }
.ea-anim-blink-delayed { animation: ea-blink-delayed 3s ease-in-out .5s infinite; }
@keyframes ea-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ea-float-delayed { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes ea-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes ea-spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0); } }
@keyframes ea-pulse { 50% { opacity: .5; } }
@keyframes ea-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8,0,1,1); } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,.2,1); } }
@keyframes ea-pulse-glow { 0%, 100% { box-shadow: 0 0 5px rgba(34,197,94,.5); transform: scale(1); } 50% { box-shadow: 0 0 20px rgba(34,197,94,.8); transform: scale(1.05); } }
@keyframes ea-pulse-bright { 0%, 100% { box-shadow: 0 0 10px rgba(255,193,7,.6); transform: scale(1); } 50% { box-shadow: 0 0 25px rgba(255,193,7,.9); transform: scale(1.1); } }
@keyframes ea-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ea-fade-in-scale { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes ea-bounce-gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ea-bounce-in { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
@keyframes ea-blink { 0%, 90% { opacity: 1; } 95% { opacity: .3; } 100% { opacity: 1; } }
@keyframes ea-blink-delayed { 0%, 85% { opacity: 1; } 90% { opacity: .3; } 95% { opacity: 1; } }
@keyframes ea-type-in { from { width: 0; } }
@keyframes ea-check-in { 0% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1.2) rotate(180deg); } 100% { transform: scale(1) rotate(360deg); opacity: 1; } }
@keyframes ea-float-money { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-8px) rotate(5deg); } 75% { transform: translateY(-12px) rotate(-5deg); } }
@keyframes ea-point { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes ea-extend { from { width: 0; opacity: 0; } to { width: 2rem; opacity: 1; } }
@keyframes ea-blueprint { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }
@keyframes ea-solar-shine { 0%, 100% { background: linear-gradient(135deg, #1e3a8a, #1e40af); } 50% { background: linear-gradient(135deg, #3b82f6, #60a5fa); } }
@keyframes ea-energy-flow { 0% { transform: translateY(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }
@keyframes ea-ray-dance { 0%, 100% { transform: scaleY(1); opacity: .7; } 50% { transform: scaleY(1.5); opacity: 1; } }
@keyframes ea-progress { from { width: 0; } to { width: 100%; } }
@keyframes ea-consultation { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes ea-appointment { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ea-quote { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(1deg); } 75% { transform: rotate(-1deg); } }
@keyframes ea-planning { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes ea-installation { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-2px) rotate(.5deg); } 75% { transform: translateY(-4px) rotate(-.5deg); } }

@media (prefers-reduced-motion: reduce) {
	.wp-block-ea-solar-prozess-animation, .wp-block-ea-solar-prozess-animation * { animation: none !important; transition: none !important; }
}