/* ========================================================================= Animationen — zurückhaltend, kurz, ohne Spielerei. Ziel: die Anwendung soll in der Live-Demo ruhig und hochwertig wirken. ========================================================================= */ /* ---------- Grundbewegungen ---------- */ @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes dialogEnter { from { opacity: 0; transform: translateY(16px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes dialogLeave { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(.985); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } @keyframes schreiben { to { stroke-dashoffset: 0; } } /* ---------- Seiteneinstieg beim Öffnen eines Moduls ---------- */ [data-page-enter] { animation: fade .22s ease both; } .anim-rise { animation: rise .38s cubic-bezier(.2,.7,.3,1) both; } /* Gestaffelter Aufbau: --i steuert die Verzögerung */ .anim-stagger { animation: rise .42s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i, 0) * 55ms); } .anim-shake { animation: shake .4s ease both; } /* ---------- Timeline-Einträge ---------- Der versteckte Ausgangszustand gilt nur, wenn JavaScript aktiv ist (Klasse .js am ). Ohne JavaScript bleibt die Timeline sichtbar. */ .js .auftrag-timeline__item { opacity: 0; transform: translateY(12px); transition: opacity .45s cubic-bezier(.2,.7,.3,1), transform .45s cubic-bezier(.2,.7,.3,1); transition-delay: calc(var(--i, 0) * 70ms); } .js .auftrag-timeline__item.is-sichtbar { opacity: 1; transform: translateY(0); } .auftrag-timeline__item.is-aktuell .auftrag-timeline__puls { animation: puls 2s ease-in-out infinite; } @keyframes puls { 0%, 100% { box-shadow: 0 0 0 0 oklch(58% 0.12 80 / .55); } 50% { box-shadow: 0 0 0 7px oklch(58% 0.12 80 / 0); } } /* ---------- Planungseinträge ---------- */ .plan-eintrag { opacity: 0; animation: rise .4s cubic-bezier(.2,.7,.3,1) both; } .plan-eintrag.is-sichtbar { opacity: 1; } /* ---------- Neu gespeicherte Notiz kurz hervorheben ---------- */ @keyframes notizNeu { 0% { background: var(--c-primary-100); border-color: var(--c-primary-400); transform: translateY(-6px); opacity: 0; } 18% { opacity: 1; transform: translateY(0); } 100% { background: #fff; border-color: var(--c-line-200); transform: translateY(0); opacity: 1; } } .notiz.is-neu { animation: notizNeu 2.2s cubic-bezier(.2,.7,.3,1) both; } /* ---------- Vorschau-Dialog ---------- */ .vorschau-overlay { animation: fade .16s ease both; } .vorschau-overlay .vorschau { animation: dialogEnter .26s cubic-bezier(.2,.75,.3,1) both; } .vorschau-overlay.is-schliessend { animation: fade .16s ease reverse both; } .vorschau-overlay.is-schliessend .vorschau { animation: dialogLeave .16s ease both; } #vorschauBody > * { animation: fade .22s ease both; } /* ---------- Unterschrift: Zug wird "geschrieben" ---------- */ .unterschrift-svg.is-animiert .unterschrift-svg__zug, .unterschrift-svg.is-animiert .unterschrift-svg__schwung { stroke-dasharray: 400; stroke-dashoffset: 400; animation: schreiben 1s cubic-bezier(.45,.05,.3,1) forwards; } .unterschrift-svg.is-animiert .unterschrift-svg__zug:nth-of-type(1) { animation-delay: .35s; animation-duration: .35s; } .unterschrift-svg.is-animiert .unterschrift-svg__zug:nth-of-type(2) { animation-delay: .55s; animation-duration: .40s; } .unterschrift-svg.is-animiert .unterschrift-svg__zug:nth-of-type(3) { animation-delay: .85s; animation-duration: .45s; } .unterschrift-svg.is-animiert .unterschrift-svg__zug:nth-of-type(4) { animation-delay: 1.20s; animation-duration: .30s; } .unterschrift-svg.is-animiert .unterschrift-svg__zug:nth-of-type(5) { animation-delay: 1.40s; animation-duration: .45s; } .unterschrift-svg.is-animiert .unterschrift-svg__zug:nth-of-type(6) { animation-delay: 1.75s; animation-duration: .45s; } .unterschrift-svg.is-animiert .unterschrift-svg__zug:nth-of-type(7) { animation-delay: 2.10s; animation-duration: .45s; } .unterschrift-svg.is-animiert .unterschrift-svg__schwung { animation-delay: 2.45s; animation-duration: .60s; } /* ---------- Hover-Feinschliff ---------- */ .sidebar__link, .btn, .anhang, .anhang-chip { will-change: auto; } /* ---------- Barrierefreiheit ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; transition-delay: 0ms !important; } .js .auftrag-timeline__item { opacity: 1; transform: none; } .plan-eintrag { opacity: 1; } }