/* purpur — Bewegung. Nur opacity und transform, eine Kurve, drei Dauern. */
:root{--m-ease:cubic-bezier(.2,.7,.2,1);--m-fast:160ms;--m-base:240ms;--m-slow:400ms}

/* Einzug: Inhalt kommt an, Kinder gestaffelt */
@keyframes m-rise{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.m-stagger>*{animation:m-rise var(--m-slow) var(--m-ease) both}
.m-stagger>*:nth-child(1){animation-delay:30ms}.m-stagger>*:nth-child(2){animation-delay:60ms}.m-stagger>*:nth-child(3){animation-delay:90ms}.m-stagger>*:nth-child(4){animation-delay:120ms}.m-stagger>*:nth-child(5){animation-delay:150ms}.m-stagger>*:nth-child(6){animation-delay:180ms}.m-stagger>*:nth-child(7){animation-delay:210ms}.m-stagger>*:nth-child(8){animation-delay:240ms}.m-stagger>*:nth-child(9){animation-delay:270ms}.m-stagger>*:nth-child(10){animation-delay:300ms}.m-stagger>*:nth-child(n+11){animation-delay:330ms}

/* Das Zeichen setzt sich: das vordere Blatt rutscht in den Versatz */
@keyframes m-settle{from{transform:translate(-7px,-5px);opacity:.6}to{transform:none;opacity:1}}
.rail .ws.mark-intro svg rect:nth-of-type(2){animation:m-settle 520ms var(--m-ease) 120ms both}
@keyframes m-settle-hover{0%{transform:none}40%{transform:translate(-3px,-2px)}100%{transform:none}}
.rail .ws:hover svg rect:nth-of-type(2){animation:m-settle-hover 480ms var(--m-ease)}

/* Frist: ein Puls, nie mehr */
@keyframes m-pulse{0%{box-shadow:0 0 0 0 rgba(200,71,43,.45)}100%{box-shadow:0 0 0 10px rgba(200,71,43,0)}}
.st.due,.due,.chip[style*="B42318"]{animation:m-pulse 900ms ease-out 700ms 1}

/* Zähler und Marker treffen etwas später ein */
.badge{animation:m-rise var(--m-base) var(--m-ease) 500ms both}

/* Hover: Karten und Zeilen heben sich kaum, Links färben sich */
.card,.row,.ev{transition:transform var(--m-fast) var(--m-ease),border-color var(--m-fast) var(--m-ease),background var(--m-fast) var(--m-ease)}
.row:hover,.ev:hover{transform:translateX(2px)}
.btn{transition:background var(--m-fast) var(--m-ease),color var(--m-fast) var(--m-ease),transform var(--m-fast) var(--m-ease)}
.btn:active{transform:translateY(1px)}

/* Drawer gleitet von rechts, Tabs wechseln mit Blende */
@keyframes m-slide{from{opacity:0;transform:translate3d(16px,0,0)}to{opacity:1;transform:none}}
.m-drawer{animation:m-slide var(--m-base) var(--m-ease) both}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
.m-tabpane{animation:m-fade var(--m-fast) var(--m-ease) both}

/* Laden: Felder-Schimmer statt grauer Balken */
@keyframes m-shimmer{0%{opacity:.35}50%{opacity:.7}100%{opacity:.35}}
.m-skeleton{background:#EFE6F1;animation:m-shimmer 1.4s ease-in-out infinite}
.m-skeleton.s2{background:#D9C4DF;animation-delay:.2s}.m-skeleton.s3{background:#E6C3CF;animation-delay:.4s}

@media (prefers-reduced-motion:reduce){
  .m-stagger>*,.rail .ws svg rect,.st.due,.due,.chip[style*="B42318"],.badge,.m-drawer,.m-tabpane,.m-skeleton{animation:none!important}
  .card,.row,.ev,.btn{transition:none!important}
}