Data Migration to SoftDeCC: Preparation & Process

.sd-timeline { font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; position: relative; max-width: 640px; margin: 0 auto; padding: 40px 0; } .sd-timeline-track { position: absolute; left: 27px; top: 40px; bottom: 40px; width: 4px; background: #d9d9d9; border-radius: 2px; } .sd-timeline-progress { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: #005daa; border-radius: 2px; transition: height 0.15s linear; } .sd-step { position: relative; display: flex; gap: 24px; padding-bottom: 56px; } .sd-step:last-child { padding-bottom: 0; } .sd-circle { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background: #ffffff; border: 3px solid #1a1a1a; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; color: #1a1a1a; z-index: 2; transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease, transform 0.3s ease; } .sd-step.is-active .sd-circle { border-color: #005daa; color: #ffffff; background: #005daa; transform: scale(1.05); } .sd-content h3 { margin: 8px 0 6px; font-size: 18px; color: #1a1a1a; transition: color 0.3s ease; } .sd-content p { margin: 0; font-size: 15px; line-height: 1.5; color: #555555; } .sd-step.is-active .sd-content h3 { color: #005daa; } @media (max-width: 480px) { .sd-timeline-track { left: 21px; } .sd-circle { flex: 0 0 44px; width: 44px; height: 44px; font-size: 16px; } } (function () { const timeline = document.getElementById('sdTimelineMigration'); const progress = document.getElementById('sdProgressMigration'); const steps = timeline.querySelectorAll('.sd-step'); // Kreise einzeln highlighten, sobald sie die Bildschirmmitte erreichen const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { entry.target.classList.toggle('is-active', entry.isIntersecting); }); }, { rootMargin: '-45% 0px -45% 0px', threshold: 0 } ); steps.forEach((step) => observer.observe(step)); // Fortlaufende blaue Linie passend zum Scrollfortschritt innerhalb der Timeline function updateProgressLine() { const rect = timeline.getBoundingClientRect(); const viewportMid = window.innerHeight * 0.5; const total = rect.height; const scrolled = viewportMid - rect.top; const pct = Math.max(0, Math.min(1, scrolled / total)); progress.style.height = (pct * 100) + '%'; } window.addEventListener('scroll', updateProgressLine, { passive: true }); window.addEventListener('resize', updateProgressLine); updateProgressLine(); })();