diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue
index b375b4f..0e9c244 100644
--- a/docs/.vuepress/components/RoadmapProgress.vue
+++ b/docs/.vuepress/components/RoadmapProgress.vue
@@ -26,7 +26,7 @@
@@ -323,18 +323,9 @@ const connectorStyle = (index) => {
box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.2);
}
-.roadmap-marker-pulse {
+.roadmap-marker-svg {
width: 10px;
height: 10px;
- border-radius: 50%;
- background: #fff;
- animation: pulse 2s ease-in-out infinite;
- margin: auto;
-}
-
-@keyframes pulse {
- 0%, 100% { transform: scale(1); opacity: 1; }
- 50% { transform: scale(1.3); opacity: 0.6; }
}
.roadmap-marker--planned {
@@ -534,9 +525,25 @@ strong.roadmap-content-title {
}
}
-/* Nach Animation: in-progress-Marker behält seinen box-shadow */
-.roadmap--animated .roadmap-marker--in-progress {
- box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.2);
+/* Nach Einblend-Animation: in-progress pulsiert dauerhaft */
+.roadmap--animated .roadmap-station--in-progress .roadmap-marker {
+ animation:
+ markerPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
+ markerGlow 0.5s ease forwards,
+ inProgressPulse 2s ease-in-out 1s infinite;
+ animation-delay:
+ calc(0.3s + var(--i) * 0.5s),
+ calc(0.3s + var(--i) * 0.5s),
+ calc(0.8s + var(--i) * 0.5s);
+}
+
+@keyframes inProgressPulse {
+ 0%, 100% {
+ box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.2);
+ }
+ 50% {
+ box-shadow: 0 0 0 9px rgba(99, 102, 241, 0.35);
+ }
}
/* === Responsive === */