From 6a2f1dd629cb75a2bae2bca9a87bf82f0c9cc395 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 17 Mar 2026 12:46:48 +0100
Subject: [PATCH] Simplify road map CSS

---
 docs/.vuepress/components/RoadmapProgress.vue | 473 ++++++------------
 1 file changed, 159 insertions(+), 314 deletions(-)

diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue
index 0b00aed..2d13863 100644
--- a/docs/.vuepress/components/RoadmapProgress.vue
+++ b/docs/.vuepress/components/RoadmapProgress.vue
@@ -148,11 +148,15 @@ const connectorStyle = (index) => {
 </script>
 
 <style scoped>
+/* Color tokens */
 .roadmap {
   margin: 1.5rem 0;
+  --c-done: #eab308;
+  --c-progress: #6366f1;
+  --c-planned: #059669;
 }
 
-/* === Legende === */
+/* === Legend === */
 .roadmap-legend {
   display: flex;
   gap: 20px;
@@ -175,122 +179,31 @@ const connectorStyle = (index) => {
   flex-shrink: 0;
 }
 
-.roadmap-legend-dot--done {
-  background: #eab308;
-}
-
-.roadmap-legend-dot--in-progress {
-  background: #6366f1;
-}
-
-.roadmap-legend-dot--planned {
-  background: #059669;
-}
+.roadmap-legend-dot--done        { background: var(--c-done); }
+.roadmap-legend-dot--in-progress { background: var(--c-progress); }
+.roadmap-legend-dot--planned     { background: var(--c-planned); }
 
 /* === Timeline === */
 .roadmap-timeline {
   position: relative;
-  padding-left: 0;
 }
 
-/* === Drei Punkte: vorherige Umsetzungen === */
-.roadmap-past {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-left: -12px;
-  padding-left: 12px;
-  padding-top: 12px;
-  padding-bottom: 20px;
-  position: relative;
-}
-
-.roadmap-past-dots {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  width: 24px;
-}
-
-.roadmap-past-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #eab308;
-  opacity: 0.5;
-}
-
-.roadmap-past-dot:nth-child(2) {
-  opacity: 0.7;
-}
-
-.roadmap-past-dot:nth-child(3) {
-  opacity: 0.9;
-}
-
-.roadmap-past-label {
-  font-size: 0.85em;
-  color: var(--vp-c-text);
-  opacity: 0.6;
-  font-style: italic;
-}
-
-/* === Klickbare Dots === */
-.roadmap-expandable {
-  cursor: pointer;
-  border-radius: 10px;
-  transition: background-color 0.25s ease;
-}
-
-.roadmap-expandable:hover {
-  background-color: rgba(128, 128, 128, 0.08);
-}
-
-.roadmap-past.roadmap-expandable:hover {
-  background-color: rgba(234, 179, 8, 0.1);
-}
-
-.roadmap-future.roadmap-expandable:hover {
-  background-color: rgba(5, 150, 105, 0.1);
-}
-
-.roadmap-expandable:hover .roadmap-past-label,
-.roadmap-expandable:hover .roadmap-future-label {
-  opacity: 0.85;
-}
-
-.roadmap-expandable:hover .roadmap-past-dot,
-.roadmap-expandable:hover .roadmap-future-dot {
-  opacity: 1;
-}
-
-/* Verbindungslinie von den Punkten zum ersten Eintrag */
-.roadmap-past::after {
-  content: '';
-  position: absolute;
-  left: 24px;
-  transform: translateX(-50%);
-  bottom: -28px;
-  height: 48px;
-  width: 3px;
-  background: #eab308;
-  z-index: 1;
-}
-
-/* === Drei Punkte am Ende: weitere geplante Features === */
+/* === Past & Future expandable rows === */
+.roadmap-past,
 .roadmap-future {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-left: -12px;
   padding-left: 12px;
-  padding-top: 20px;
-  padding-bottom: 12px;
   position: relative;
+  opacity: 0;
 }
 
+.roadmap-past   { padding-top: 12px; padding-bottom: 20px; }
+.roadmap-future { padding-top: 20px; padding-bottom: 12px; }
 
+.roadmap-past-dots,
 .roadmap-future-dots {
   display: flex;
   flex-direction: column;
@@ -299,22 +212,22 @@ const connectorStyle = (index) => {
   width: 24px;
 }
 
+.roadmap-past-dot,
 .roadmap-future-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: #059669;
-  opacity: 0.9;
 }
 
-.roadmap-future-dot:nth-child(2) {
-  opacity: 0.7;
-}
+.roadmap-past-dot                { background: var(--c-done);    opacity: 0.5; }
+.roadmap-past-dot:nth-child(2)   { opacity: 0.7; }
+.roadmap-past-dot:nth-child(3)   { opacity: 0.9; }
 
-.roadmap-future-dot:nth-child(3) {
-  opacity: 0.5;
-}
+.roadmap-future-dot              { background: var(--c-planned); opacity: 0.9; }
+.roadmap-future-dot:nth-child(2) { opacity: 0.7; }
+.roadmap-future-dot:nth-child(3) { opacity: 0.5; }
 
+.roadmap-past-label,
 .roadmap-future-label {
   font-size: 0.85em;
   color: var(--vp-c-text);
@@ -322,18 +235,51 @@ const connectorStyle = (index) => {
   font-style: italic;
 }
 
+/* Connector line from past dots to first entry */
+.roadmap-past::after {
+  content: '';
+  position: absolute;
+  left: 24px;
+  transform: translateX(-50%);
+  bottom: -28px;
+  height: 48px;
+  width: 3px;
+  background: var(--c-done);
+  z-index: 1;
+}
+
+/* === Expandable hover === */
+.roadmap-expandable {
+  cursor: pointer;
+  border-radius: 10px;
+  transition: background-color 0.25s ease;
+}
+
+.roadmap-expandable:hover                    { background-color: rgba(128, 128, 128, 0.08); }
+.roadmap-past.roadmap-expandable:hover       { background-color: rgba(234, 179, 8, 0.1); }
+.roadmap-future.roadmap-expandable:hover     { background-color: rgba(5, 150, 105, 0.1); }
+
+.roadmap-expandable:hover .roadmap-past-label,
+.roadmap-expandable:hover .roadmap-future-label { opacity: 0.85; }
+
+.roadmap-expandable:hover .roadmap-past-dot,
+.roadmap-expandable:hover .roadmap-future-dot   { opacity: 1; }
+
+/* === Station === */
 .roadmap-station {
   position: relative;
   display: grid;
   grid-template-columns: 24px 1fr;
-  grid-template-rows: auto;
   column-gap: 20px;
   min-height: 80px;
   margin-left: -12px;
   padding-left: 12px;
+  cursor: default;
+  border-radius: 10px;
+  transition: background-color 0.25s ease;
 }
 
-/* === Verbindungslinie === */
+/* === Connector === */
 .roadmap-connector {
   position: absolute;
   left: 24px;
@@ -364,30 +310,27 @@ const connectorStyle = (index) => {
 }
 
 .roadmap-marker--done {
-  background: #eab308;
-  border: 3px solid #eab308;
+  background: var(--c-done);
+  border: 3px solid var(--c-done);
   color: #fff;
   font-size: 14px;
   font-weight: bold;
 }
 
 .roadmap-marker--in-progress {
-  background: #6366f1;
-  border: 3px solid #6366f1;
+  background: var(--c-progress);
+  border: 3px solid var(--c-progress);
   box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.2);
 }
 
-.roadmap-marker-svg {
-  width: 10px;
-  height: 10px;
-}
+.roadmap-marker-svg { width: 10px; height: 10px; }
 
 .roadmap-marker--planned {
   background: var(--vp-c-bg, #fff);
-  border: 3px solid #059669;
+  border: 3px solid var(--c-planned);
 }
 
-/* === Inhalt === */
+/* === Content === */
 .roadmap-content {
   grid-column: 2;
   grid-row: 1;
@@ -416,23 +359,12 @@ strong.roadmap-content-title {
   white-space: nowrap;
 }
 
-.roadmap-content-badge--done {
-  background: #fef9c3;
-  color: #854d0e;
-}
-
-.roadmap-content-badge--in-progress {
-  background: #e0e7ff;
-  color: #4338ca;
-}
-
-.roadmap-content-badge--planned {
-  background: #d1fae5;
-  color: #065f46;
-}
+.roadmap-content-badge--done        { background: #fef9c3; color: #854d0e; }
+.roadmap-content-badge--in-progress { background: #e0e7ff; color: #4338ca; }
+.roadmap-content-badge--planned     { background: #d1fae5; color: #065f46; }
 
 .roadmap-content-description {
-  margin: 6px 0 0 0;
+  margin: 6px 0 0;
   font-size: 0.9em;
   color: var(--vp-c-text);
   opacity: 0.75;
@@ -446,75 +378,24 @@ strong.roadmap-content-title {
   font-size: 0.82em;
 }
 
-.roadmap-content-issues a {
-  color: var(--vp-c-accent-bg);
-  text-decoration: none;
-  font-weight: 500;
-}
-
-.roadmap-content-issues a:hover {
-  text-decoration: underline;
-}
-
-/* === Hover: Hintergrund über gesamte Zeile + Marker-Puls === */
-.roadmap-station {
-  cursor: default;
-  border-radius: 10px;
-  transition: background-color 0.25s ease;
-}
+.roadmap-content-issues a            { color: var(--vp-c-accent-bg); text-decoration: none; font-weight: 500; }
+.roadmap-content-issues a:hover      { text-decoration: underline; }
 
+/* === Hover effects === */
 .roadmap-station:hover .roadmap-marker {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   transform: scale(1.25);
 }
 
-.roadmap-station--done:hover {
-  background-color: rgba(234, 179, 8, 0.1);
-}
+.roadmap-station--done:hover        { background-color: rgba(234, 179, 8, 0.1); }
+.roadmap-station--in-progress:hover { background-color: rgba(99, 102, 241, 0.1); }
+.roadmap-station--planned:hover     { background-color: rgba(5, 150, 105, 0.1); }
 
-.roadmap-station--done:hover .roadmap-marker {
-  box-shadow: 0 0 12px 4px rgba(234, 179, 8, 0.35);
-}
-
-.roadmap-station--in-progress:hover {
-  background-color: rgba(99, 102, 241, 0.1);
-}
-
-.roadmap-station--in-progress:hover .roadmap-marker {
-  box-shadow: 0 0 12px 4px rgba(99, 102, 241, 0.35);
-}
-
-.roadmap-station--planned:hover {
-  background-color: rgba(5, 150, 105, 0.1);
-}
-
-.roadmap-station--planned:hover .roadmap-marker {
-  box-shadow: 0 0 12px 4px rgba(5, 150, 105, 0.35);
-}
-
-/* ==========================================
-   Animation: Punkte poppen auf, Linie zieht
-   ========================================== */
-
-/* Vor der Animation: alles unsichtbar */
-.roadmap-past {
-  opacity: 0;
-}
-
-.roadmap--animated .roadmap-past {
-  animation: contentFadeIn 0.4s ease forwards;
-  animation-delay: 0.1s;
-}
-
-.roadmap-future {
-  opacity: 0;
-}
-
-.roadmap--animated .roadmap-future {
-  animation: contentFadeIn 0.3s ease forwards;
-  animation-delay: calc(0.85s + var(--i, 0) * 0.5s);
-}
+.roadmap-station--done:hover .roadmap-marker        { box-shadow: 0 0 12px 4px rgba(234, 179, 8, 0.35); }
+.roadmap-station--in-progress:hover .roadmap-marker { box-shadow: 0 0 12px 4px rgba(99, 102, 241, 0.35); }
+.roadmap-station--planned:hover .roadmap-marker     { box-shadow: 0 0 12px 4px rgba(5, 150, 105, 0.35); }
 
+/* === Animations: initial state === */
 .roadmap-station .roadmap-marker,
 .roadmap-station .roadmap-content {
   opacity: 0;
@@ -526,143 +407,45 @@ strong.roadmap-content-title {
   transform-origin: top center;
 }
 
-/* Nach mounted: Animation starten */
-/* Timing pro Station: Marker poppt auf, Linie zieht, nächster Marker poppt */
-/* Station i: marker bei 0.3 + i*0.5s, connector bei 0.3 + i*0.5 + 0.15s */
+/* Normal entrance */
+.roadmap--animated .roadmap-past {
+  animation: contentFadeIn 0.4s ease 0.1s forwards;
+}
+
+.roadmap--animated .roadmap-future {
+  animation: contentFadeIn 0.3s ease calc(0.85s + var(--i, 0) * 0.5s) forwards;
+}
 
 .roadmap--animated .roadmap-station .roadmap-marker {
   animation: markerPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
-             markerGlow 0.5s ease calc(0.3s + var(--i) * 0.5s) forwards;
+             markerGlow 0.5s ease forwards;
   animation-delay: calc(0.3s + var(--i) * 0.5s);
 }
 
-/* Content fliegt mit dem Marker ein */
 .roadmap--animated .roadmap-station .roadmap-content {
   animation: contentFadeIn 0.4s ease forwards;
   animation-delay: calc(0.3s + var(--i) * 0.5s);
 }
 
-/* Linie zieht sich nach unten */
 .roadmap--animated .roadmap-station .roadmap-connector {
   animation: lineGrow 0.4s ease forwards;
   animation-delay: calc(0.45s + var(--i) * 0.5s);
 }
 
-@keyframes markerPop {
-  0% {
-    opacity: 0;
-    transform: scale(0);
-  }
-  60% {
-    opacity: 1;
-    transform: scale(1.3);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes markerGlow {
-  0% {
-    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
-  }
-  50% {
-    box-shadow: 0 0 16px 6px rgba(255, 255, 255, 0.4);
-  }
-  100% {
-    box-shadow: none;
-  }
-}
-
-@keyframes contentFadeIn {
-  0% {
-    opacity: 0;
-    transform: translateX(-10px) scale(0.95);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-  }
-}
-
-@keyframes lineGrow {
-  0% {
-    transform: translateX(-50%) scaleY(0);
-    opacity: 0.5;
-  }
-  100% {
-    transform: translateX(-50%) scaleY(1);
-    opacity: 1;
-  }
-}
-
-/* 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);
+  animation: markerPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
+             markerGlow 0.5s ease forwards,
+             inProgressPulse 2s ease-in-out 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 === */
-@media (max-width: 600px) {
-  .roadmap-station {
-    column-gap: 14px;
-  }
-
-  .roadmap-content {
-    padding: 8px 0 20px 0;
-  }
-
-  strong.roadmap-content-title {
-    font-size: 1.05em;
-  }
-}
-
-/* Reduced motion: keine Animation */
-@media (prefers-reduced-motion: reduce) {
-  .roadmap-station .roadmap-marker,
-  .roadmap-station .roadmap-content {
-    opacity: 1;
-    transform: none;
-  }
-
-  .roadmap-station .roadmap-connector {
-    transform: translateX(-50%) scaleY(1);
-  }
-
-  .roadmap--animated .roadmap-station .roadmap-marker,
-  .roadmap--animated .roadmap-station .roadmap-content,
-  .roadmap--animated .roadmap-station .roadmap-connector {
-    animation: none;
-    opacity: 1;
-    transform: none;
-  }
-
-  .roadmap--animated .roadmap-station .roadmap-connector {
-    transform: translateX(-50%);
-  }
-}
-
-/* === Expanded: Animation ohne lange Verzögerung === */
+/* Expanded entrance (fast stagger) */
 .roadmap--expanded.roadmap--animated .roadmap-station .roadmap-marker {
   animation: markerPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
              markerGlow 0.7s ease forwards;
-  animation-delay: calc(var(--i) * 0.04s), calc(var(--i) * 0.04s);
+  animation-delay: calc(var(--i) * 0.04s);
 }
 
 .roadmap--expanded.roadmap--animated .roadmap-station .roadmap-content {
@@ -678,12 +461,74 @@ strong.roadmap-content-title {
 .roadmap--expanded.roadmap--animated .roadmap-station--in-progress .roadmap-marker {
   animation: markerPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
              markerGlow 0.7s ease forwards,
-             inProgressPulse 2s ease-in-out 0.7s infinite;
-  animation-delay: calc(var(--i) * 0.04s), calc(var(--i) * 0.04s), calc(var(--i) * 0.04s + 0.6s);
+             inProgressPulse 2s ease-in-out infinite;
+  animation-delay: calc(var(--i) * 0.04s),
+                   calc(var(--i) * 0.04s),
+                   calc(var(--i) * 0.04s + 0.6s);
 }
 
 .roadmap--expanded.roadmap--animated .roadmap-future {
   animation: contentFadeIn 0.6s ease forwards;
   animation-delay: calc(var(--i, 0) * 0.04s + 0.7s);
 }
+
+/* === Keyframes === */
+@keyframes markerPop {
+  0%   { opacity: 0; transform: scale(0); }
+  60%  { opacity: 1; transform: scale(1.3); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes markerGlow {
+  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
+  50%  { box-shadow: 0 0 16px 6px rgba(255, 255, 255, 0.4); }
+  100% { box-shadow: none; }
+}
+
+@keyframes contentFadeIn {
+  0%   { opacity: 0; transform: translateX(-10px) scale(0.95); }
+  100% { opacity: 1; transform: translateX(0) scale(1); }
+}
+
+@keyframes lineGrow {
+  0%   { transform: translateX(-50%) scaleY(0); opacity: 0.5; }
+  100% { transform: translateX(-50%) scaleY(1); opacity: 1; }
+}
+
+@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 === */
+@media (max-width: 600px) {
+  .roadmap-station              { column-gap: 14px; }
+  .roadmap-content              { padding: 8px 0 20px 0; }
+  strong.roadmap-content-title  { font-size: 1.05em; }
+}
+
+/* === Reduced motion === */
+@media (prefers-reduced-motion: reduce) {
+  .roadmap-station .roadmap-marker,
+  .roadmap-station .roadmap-content {
+    opacity: 1;
+    transform: none;
+  }
+
+  .roadmap-station .roadmap-connector {
+    transform: translateX(-50%);
+  }
+
+  .roadmap--animated .roadmap-station .roadmap-marker,
+  .roadmap--animated .roadmap-station .roadmap-content {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+
+  .roadmap--animated .roadmap-station .roadmap-connector {
+    animation: none;
+    transform: translateX(-50%);
+  }
+}
 </style>