/* getyoursite Dashboard Motion, Gegenstueck zu assets/dashboard-motion.js.
   Alle Animationen haengen an Klassen, die das Script setzt (.dm-on). Ohne
   Script oder bei reduzierter Bewegung bleibt die Seite unveraendert. */

:root{--dm-ease:cubic-bezier(.16,1,.3,1);--dm-dur:.38s}
.dm-expressive{--dm-dur:.85s}

/* ---------- Einblenden ---------- */
.dm-on .dm-in{animation:dmIn var(--dm-dur) var(--dm-ease) var(--dm-d,0ms) both}
@keyframes dmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dm-expressive .dm-in{animation-name:dmInX}
@keyframes dmInX{from{opacity:0;transform:translateY(22px) scale(.985);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.dm-expressive.dm-lite .dm-in{animation-name:dmInLite}
@keyframes dmInLite{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Panels animieren ihre Karten selbst, nicht mehr als ganzer Block. */
.dm-on .pt-panel.active{animation:none}

/* Ueberschrift Wort fuer Wort */
.dm-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.dm-w>span{display:inline-block;animation:dmWord .9s var(--dm-ease) var(--dm-d,0ms) both}
@keyframes dmWord{from{transform:translateY(105%)}to{transform:none}}

/* ---------- Gleitende Markierung ---------- */
.dm-on .pt-nav ul,.dm-on .ad-nav,.dm-on .ws-tabs{position:relative}
.dm-ink{position:absolute;left:0;top:0;pointer-events:none;z-index:0;opacity:0;
  transition:transform .5s var(--dm-ease),width .5s var(--dm-ease),height .5s var(--dm-ease),opacity .2s}
.dm-calm .dm-ink{transition-duration:.32s,.32s,.32s,.2s}
.dm-ink--line::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--brand,#1466ff)}
.dm-on .pt-tab.active::after{opacity:0}
.dm-ink--pill{border-radius:10px;background:#dfeaff}
.dm-on .ad-nav button{position:relative;z-index:1;transition:background .2s,color .2s}
.dm-on .ad-nav button.on{background:transparent}
.dm-on .ad-nav button.on:hover{background:transparent}
.dm-on .ad-nav button .ws-icon{transition:transform .25s var(--dm-ease)}
.dm-on .ad-nav button:hover .ws-icon{transform:translateX(2px)}
.dm-ink--tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:#1466ff}
.dm-on .ws-tabs button{position:relative;z-index:1;transition:color .2s}
.dm-on .ws-tabs button[aria-selected="true"]{border-color:transparent}
@media(max-width:640px){.pt-nav .dm-ink{display:none}}

/* ---------- Portal: Login ---------- */
.dm-expressive .gate{position:relative;overflow:hidden;isolation:isolate}
.dm-expressive .gate::before,.dm-expressive .gate::after{content:"";position:absolute;z-index:-1;width:62vmax;height:62vmax;border-radius:50%;
  pointer-events:none;animation:dmDrift 19s ease-in-out infinite alternate}
.dm-expressive .gate::before{top:-24vmax;left:-18vmax;background:radial-gradient(circle,rgba(20,102,255,.22),transparent 62%)}
.dm-expressive .gate::after{bottom:-28vmax;right:-20vmax;background:radial-gradient(circle,rgba(90,176,240,.24),transparent 62%);animation-duration:23s;animation-direction:alternate-reverse}
@keyframes dmDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(8vmax,6vmax) scale(1.12)}}
.dm-expressive .gate-card{animation:dmInX 1.1s var(--dm-ease) .1s both}
.dm-expressive.dm-lite .gate-card{animation-name:dmInLite}
.dm-expressive .gate-card>*{animation:dmInLite .9s var(--dm-ease) both}
.dm-expressive .gate-card>:nth-child(2){animation-delay:.18s}
.dm-expressive .gate-card>:nth-child(3){animation-delay:.24s}
.dm-expressive .gate-card>:nth-child(n+4){animation-delay:.3s}
.dm-expressive .gate-tab{transition:background .25s,color .25s,box-shadow .25s}
.dm-expressive .gate-hint.show,.dm-expressive .gate-sent.show{animation:dmInLite .5s var(--dm-ease) both}

/* ---------- Portal: Karten ---------- */
.dm-expressive :where(.pt-card,.order){position:relative}
.dm-expressive .pt-card,.dm-expressive .addon,.dm-expressive .order{isolation:isolate;transition:transform .35s var(--dm-ease),box-shadow .35s,border-color .35s}
.dm-expressive .pt-card::before,.dm-expressive .addon::before,.dm-expressive .order::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .4s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(20,102,255,.075),transparent 62%)}
@media(hover:hover){
  .dm-expressive .pt-card:hover::before,.dm-expressive .addon:hover::before,.dm-expressive .order:hover::before{opacity:1}
  .dm-expressive .order:hover,.dm-expressive .mini-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
  .dm-expressive .next-step{transition:transform .3s var(--dm-ease),border-color .3s}
  .dm-expressive .next-step:hover{transform:translateY(-2px);border-color:var(--brand-200)}
  .dm-expressive .type-crd:hover svg{transform:scale(1.12) rotate(-4deg)}
}
.dm-expressive .type-crd svg{transition:transform .35s var(--dm-ease),stroke .2s}
.dm-expressive .type-crd:has(input:checked){animation:dmSelect .45s var(--dm-ease)}
.dm-expressive .urg-pill:has(input:checked){animation:dmSelect .45s var(--dm-ease)}
@keyframes dmSelect{40%{transform:scale(.97)}100%{transform:none}}

/* Budget-Ring */
.dm-pop{animation:dmPop .9s var(--dm-ease) .9s both}
@keyframes dmPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.dm-expressive .ring svg{overflow:visible}
.dm-expressive .ring .val{filter:drop-shadow(0 4px 10px rgba(20,102,255,.28))}

/* Projekt-Phasen laufen nacheinander voll */
.dm-ph-play li:nth-child(1){--i:0}.dm-ph-play li:nth-child(2){--i:1}.dm-ph-play li:nth-child(3){--i:2}.dm-ph-play li:nth-child(4){--i:3}
.dm-ph-play li.is-done .bar::after,.dm-ph-play li.is-now .bar::after{animation:dmBar .7s var(--dm-ease) calc(var(--i) * 220ms + 450ms) both}
@keyframes dmBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.dm-ph-play li b{animation:dmInLite .6s var(--dm-ease) calc(var(--i) * 220ms + 450ms) both}
.dm-expressive .ph-steps li.is-now b::after{display:inline-block;animation:dmDot 1.8s ease-in-out infinite}
@keyframes dmDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}
.dm-expressive .ph-steps li.is-now .bar::before{content:"";position:absolute;inset:0;z-index:1;border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-100%);animation:dmShine 2.4s ease-in-out 1.6s infinite}
@keyframes dmShine{to{transform:translateX(100%)}}

/* Neue Auftraege und Zahlungen */
.dm-on .dm-new{animation:dmNew 2.2s var(--dm-ease) both}
@keyframes dmNew{0%{opacity:0;transform:translateY(-10px) scale(.98);box-shadow:0 0 0 0 rgba(20,102,255,0)}
  25%{opacity:1;transform:none;box-shadow:0 0 0 4px rgba(20,102,255,.18),0 16px 40px rgba(20,102,255,.16)}
  100%{box-shadow:var(--shadow-sm)}}
.dm-stamp{animation:dmStamp .6s var(--dm-ease) .9s both}
@keyframes dmStamp{from{opacity:0;transform:scale(1.6) rotate(-6deg)}to{opacity:1;transform:none}}

/* Knopf: laedt und erledigt */
.btn.is-loading{pointer-events:none;opacity:.85}
.btn.is-loading .arr{display:none}
.btn.is-loading::after{content:"";width:15px;height:15px;margin-left:4px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:dmSpin .7s linear infinite}
.btn.is-done .arr{display:none}
.btn.is-done::after{content:"✓";margin-left:4px;font-weight:800;animation:dmPop .45s var(--dm-ease) both}
@keyframes dmSpin{to{transform:rotate(360deg)}}

/* ---------- Admin ---------- */
.dm-calm .ad-gate-card{animation:dmIn .5s var(--dm-ease) both}
.dm-title{display:inline-block;animation:dmIn .35s var(--dm-ease) both}
.dm-bump{display:inline-block;animation:dmBump .7s var(--dm-ease)}
@keyframes dmBump{30%{transform:scale(1.12);color:var(--brand,#1466ff)}100%{transform:none}}
.dm-calm .ad-kpi,.dm-calm .ad-step{transition:transform .25s var(--dm-ease),box-shadow .25s,border-color .25s}
@media(hover:hover){.dm-calm .ad-kpi:hover,.dm-calm .ad-step:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--line-2)}}
.dm-calm .q-item{transition:background .2s}
.dm-calm .q-item.dm-new{animation:dmRowNew 1.8s ease-out}
@keyframes dmRowNew{0%{background:rgba(20,102,255,.1)}100%{background:transparent}}
.dm-ghost{pointer-events:none;overflow:hidden;box-sizing:border-box}
.dm-ghost.dm-leave{transition:height .38s var(--dm-ease),padding .38s var(--dm-ease),opacity .25s,background .25s;
  height:0!important;padding-top:0!important;padding-bottom:0!important;opacity:0;background:#ecfdf3}
.dm-flash>td,.crm-card.dm-flash{animation:dmFlash 1.6s ease-out}
.dm-flash[data-dm-tone="done"]>td,.crm-card.dm-flash[data-dm-tone="done"]{animation-name:dmFlashDone}
@keyframes dmFlash{0%{background:rgba(20,102,255,.13)}100%{background:transparent}}
@keyframes dmFlashDone{0%{background:rgba(36,131,72,.14)}100%{background:transparent}}
.dm-calm select.ad-status{transition:border-color .2s,box-shadow .2s}
.dm-calm select.ad-status:focus{border-color:#1466ff;box-shadow:0 0 0 3px rgba(20,102,255,.14);outline:0}
.dm-calm .sec-filter button{transition:background .2s,color .2s,box-shadow .2s}

/* Kundenakte */
.dm-calm .ws-customer{transition:background .22s,box-shadow .22s}
.dm-calm .ws-customer.selected{animation:dmSelBar .35s var(--dm-ease)}
@keyframes dmSelBar{from{box-shadow:inset 0 #1466ff}to{box-shadow:inset 4px 0 #1466ff}}
.dm-calm .ws-primary,.dm-calm .ws-edit,.dm-calm .ad-mini{transition:background .2s,border-color .2s,color .2s,transform .2s var(--dm-ease)}
.dm-calm .ws-primary:active,.dm-calm .ws-edit:active,.dm-calm .ad-mini:active{transform:scale(.97)}

/* Fenster und Seitenleiste */
.dm-on .offer-backdrop.show{animation:dmFade .22s ease-out both}
.dm-on .offer-backdrop.show .offer-box{animation:dmModal .34s var(--dm-ease) both}
@keyframes dmFade{from{opacity:0}to{opacity:1}}
@keyframes dmModal{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.dm-on .crm-backdrop.show{animation:dmFade .22s ease-out both}
.dm-on .crm-drawer{transition:transform .38s var(--dm-ease)}
.dm-on .ad-toast{transition:opacity .25s var(--dm-ease),transform .35s var(--dm-ease)}

/* Platzhalter waehrend des Ladens */
.dm-on #ad-kpis:empty::before,.dm-on #ad-kunden:empty::before,.dm-on #customer-detail:empty::before,.dm-on #ad-queue:empty::before{
  content:"";display:block;grid-column:1/-1;border-radius:var(--r-lg,24px);
  background:linear-gradient(90deg,#edf0f6 25%,#f7f9fc 50%,#edf0f6 75%) 0 0/200% 100%;animation:dmShimmer 1.3s linear infinite}
.dm-on #ad-kpis:empty::before{height:104px}
.dm-on #ad-queue:empty::before{height:220px;border-radius:0}
.dm-on #ad-kunden:empty::before{height:340px;margin:16px;border-radius:12px}
.dm-on #customer-detail:empty::before{height:420px;border-radius:12px}
@keyframes dmShimmer{from{background-position:100% 0}to{background-position:-100% 0}}

/* Sicherheit: reduzierte Bewegung schaltet die Dauer-Effekte ab. */
@media (prefers-reduced-motion:reduce){
  .dm-expressive .gate::before,.dm-expressive .gate::after,.dm-expressive .ph-steps li.is-now b::after,
  .dm-expressive .ph-steps li.is-now .bar::before{animation:none}
}