/* VAMED+WWH PMO – Animationen für alle farbigen Elemente
   Einblend-Animationen laufen nur beim Seitenwechsel (.anim), nicht bei jeder Änderung.
   Dauer-Animationen (Puls, Schimmer, Routen) laufen immer. prefers-reduced-motion wird respektiert. */

@property --v { syntax: "<number>"; inherits: false; initial-value: 0; }

@keyframes fadeUp   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop      { 0% { opacity: 0; transform: scale(.2); } 70% { transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
@keyframes growX    { from { transform: scaleX(0); } }
@keyframes growY    { from { transform: scaleY(0); } }
@keyframes ringFill { from { --v: 0; } }
@keyframes redPulse { 0% { box-shadow: 0 0 0 0 rgba(211,47,47,.55); } 70% { box-shadow: 0 0 0 7px rgba(211,47,47,0); } 100% { box-shadow: 0 0 0 0 rgba(211,47,47,0); } }
@keyframes orangePulse { 0% { box-shadow: 0 0 0 0 rgba(244,81,30,.5); } 70% { box-shadow: 0 0 0 6px rgba(244,81,30,0); } 100% { box-shadow: 0 0 0 0 rgba(244,81,30,0); } }
@keyframes shimmer  { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes stripe   { from { background-position: 0 0; } to { background-position: 200% 0; } }
@keyframes dash     { to { stroke-dashoffset: -24; } }
@keyframes bob      { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes mkIn     { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes mkPulse  { 0%,100% { stroke-width: 2px; stroke-opacity: 1; } 50% { stroke-width: 9px; stroke-opacity: .35; } }
@keyframes todayPulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(244,81,30,.5); } 50% { opacity: .7; box-shadow: 0 0 0 4px rgba(244,81,30,0); } }
@keyframes slideIn  { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes toastIn  { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes floaty   { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-18px,14px); } }

/* ---------- Dauerhaft: Markenelemente ---------- */
.logo .wm .v, .present-brand .wm .v, .menu-pop .ai-h .wm .v {
  background: linear-gradient(90deg, #2A9BD4 0%, #2A9BD4 35%, #9fdcf7 50%, #2A9BD4 65%, #2A9BD4 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 5s linear infinite;
}


/* Ampel: rot pulsiert, gelb atmet leicht */
.dot-r { animation: redPulse 2.4s ease-out infinite; }
.nav a .badge, .menu-tiles a .badge { animation: orangePulse 2s ease-out infinite; }
.kpi.orange { animation: none; }
.kpi.orange:before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }

/* Aktuelle Phase schimmert */
.phases .ph.cur, .gate.next .tag.orange {
  background: linear-gradient(90deg, #F4511E 0%, #F4511E 40%, #ff8a63 50%, #F4511E 60%, #F4511E 100%);
  background-size: 200% 100%; animation: shimmer 3.5s linear infinite; color: #fff;
}

/* Gantt: Heute-Linie pulsiert */
.g-today { animation: todayPulse 2s ease-in-out infinite; }

/* Projektkopf: Lichtkugel schwebt */
.p-head:after { animation: floaty 9s ease-in-out infinite; }

/* KI-Icon atmet */
.ai-h .ic, .ai-btn i { animation: orangePulse 3s ease-out infinite; border-radius: 50%; }
.ai-btn i { animation: none; }
.ai-btn:hover i { animation: pop .5s; }

/* Karte */
.leaflet-interactive.mk { transform-box: fill-box; transform-origin: center; animation: mkIn .6s cubic-bezier(.2,.9,.3,1.3) both; }
.leaflet-interactive.mk-r { animation: mkIn .6s cubic-bezier(.2,.9,.3,1.3) both, mkPulse 2.2s ease-in-out .6s infinite; }
.leaflet-interactive.route { stroke-dasharray: 6 6; animation: dash 1.2s linear infinite; }
.bob { animation: bob 2.6s ease-in-out infinite; }
.map-kpis div { animation: fadeUp .5s both; }
.map-kpis div:nth-child(2) { animation-delay: .08s; } .map-kpis div:nth-child(3) { animation-delay: .16s; } .map-kpis div:nth-child(4) { animation-delay: .24s; }

/* KI-Nachrichten und Toasts */
.msg { animation: fadeUp .35s ease both; }
.toast { animation: toastIn .3s cubic-bezier(.2,.9,.3,1.2) both; }
.ai-sugg button { transition: transform .15s, border-color .15s, background .15s; }
.ai-sugg button:hover { transform: translateX(3px); }

/* Interaktion: farbige Flächen reagieren */
.btn { transition: transform .15s ease, box-shadow .15s ease, background .2s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(24,24,66,.18); }
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.kpi, .card, .mod, .menu-tiles a, .todo .ti { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(24,24,66,.1); }
.mod:hover { transform: translateY(-2px); }
.menu-tiles a:hover { transform: translateY(-2px); }
.todo:hover .ti { transform: scale(1.12) rotate(-6deg); }
.nav a { transition: background .2s, color .2s, border-color .2s, padding .2s; }
.nav a:hover { padding-left: 26px; }
.chip, .subtabs a, .tabs a { transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.bar i, .stack span, .track span { transition: width .6s cubic-bezier(.2,.8,.2,1); }

/* ---------- Beim Seitenwechsel: Einblenden ---------- */
.anim .kpi { animation: fadeUp .5s cubic-bezier(.2,.8,.2,1) both; }
.anim .kpi:nth-child(2) { animation-delay: .06s; } .anim .kpi:nth-child(3) { animation-delay: .12s; }
.anim .kpi:nth-child(4) { animation-delay: .18s; } .anim .kpi:nth-child(5) { animation-delay: .24s; } .anim .kpi:nth-child(6) { animation-delay: .3s; }
.anim .card, .anim .gate, .anim .greet, .anim .p-head, .anim .pipeline div { animation: fadeUp .5s cubic-bezier(.2,.8,.2,1) both; }
.anim .grid > .card:nth-child(2), .anim .grid > .grid:nth-child(2) > .card:nth-child(1) { animation-delay: .1s; }
.anim .grid > .card:nth-child(3), .anim .grid > .grid:nth-child(2) > .card:nth-child(2) { animation-delay: .18s; }
.anim .gate:nth-child(2) { animation-delay: .04s; } .anim .gate:nth-child(3) { animation-delay: .08s; } .anim .gate:nth-child(4) { animation-delay: .12s; }
.anim .gate:nth-child(5) { animation-delay: .16s; } .anim .gate:nth-child(6) { animation-delay: .2s; } .anim .gate:nth-child(7) { animation-delay: .24s; }
.anim .pipeline div:nth-child(2) { animation-delay: .05s; } .anim .pipeline div:nth-child(3) { animation-delay: .1s; } .anim .pipeline div:nth-child(4) { animation-delay: .15s; }
.anim .pipeline div:nth-child(5) { animation-delay: .2s; } .anim .pipeline div:nth-child(6) { animation-delay: .25s; } .anim .pipeline div:nth-child(7) { animation-delay: .3s; }

.anim .dot { animation: pop .45s cubic-bezier(.2,.9,.3,1.4) .25s both; }
.anim .dot-r { animation: pop .45s cubic-bezier(.2,.9,.3,1.4) .25s both, redPulse 2.4s ease-out .7s infinite; }
.anim .tag { animation: fadeIn .5s ease .2s both; }
.anim .todo .ti, .anim .riskmatrix .cell { animation: pop .45s cubic-bezier(.2,.9,.3,1.4) both; }
.anim .todo:nth-child(2) .ti { animation-delay: .06s; } .anim .todo:nth-child(3) .ti { animation-delay: .12s; }
.anim .todo:nth-child(4) .ti { animation-delay: .18s; } .anim .todo:nth-child(5) .ti { animation-delay: .24s; } .anim .todo:nth-child(6) .ti { animation-delay: .3s; }
.anim .riskmatrix .cell:nth-child(3n) { animation-delay: .08s; } .anim .riskmatrix .cell:nth-child(3n+1) { animation-delay: .16s; }

.anim .bar i, .anim .stack span, .anim .track span { transform-origin: left center; animation: growX .9s cubic-bezier(.2,.8,.2,1) .15s both; }
.anim .cf { transform-origin: center bottom; animation: growY .8s cubic-bezier(.2,.8,.2,1) both; }
.anim .health { animation: ringFill 1.2s cubic-bezier(.2,.8,.2,1) .2s both; }

.anim .phases .ph { animation: fadeUp .4s ease both; }
.anim .phases .ph:nth-child(2) { animation-delay: .04s; } .anim .phases .ph:nth-child(3) { animation-delay: .08s; } .anim .phases .ph:nth-child(4) { animation-delay: .12s; }
.anim .phases .ph:nth-child(5) { animation-delay: .16s; } .anim .phases .ph:nth-child(6) { animation-delay: .2s; } .anim .phases .ph:nth-child(7) { animation-delay: .24s; }
.anim .phases .ph:nth-child(8) { animation-delay: .28s; } .anim .phases .ph:nth-child(9) { animation-delay: .32s; }
.anim .phases .ph.cur { animation: fadeUp .4s ease .32s both, shimmer 3.5s linear .8s infinite; }

.anim .g-bar { transform-origin: left center; animation: growX 1s cubic-bezier(.2,.8,.2,1) both; }
.anim .g-row:nth-child(3n+1) .g-bar { animation-delay: .06s; } .anim .g-row:nth-child(3n+2) .g-bar { animation-delay: .12s; }
.anim .g-ms { animation: pop .4s ease .8s both; }

.anim .mod { animation: fadeUp .4s ease both; }
.anim .mod:nth-child(4n+2) { animation-delay: .04s; } .anim .mod:nth-child(4n+3) { animation-delay: .08s; } .anim .mod:nth-child(4n) { animation-delay: .12s; }
.anim .ev { animation: slideIn .35s ease both; }
.anim .heat td.h { animation: fadeIn .6s ease both; }
.anim .heat tr:nth-child(2n) td.h { animation-delay: .1s; }
.anim .subtabs a.on, .anim .tabs a.on { animation: fadeIn .4s ease both; }

/* Pop-ups */
.mbg { animation: fadeIn .2s ease both; }
.modal { animation: fadeUp .3s cubic-bezier(.2,.8,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
}