/* ══════════════════════════════════════════════════════════════
   aymiz — Bewegung.
   Regel: Jede Animation erklärt etwas. Nichts bewegt sich zur Zierde.
   Alles unter 500 ms, alles abschaltbar über prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════ */

:root{
  --ease-out:  cubic-bezier(.22,.9,.28,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --ease-back: cubic-bezier(.34,1.4,.64,1);
}

/* ── Auftritt ──────────────────────────────────────────────
   Elemente steigen kurz auf, gestaffelt. Führt das Auge von
   oben nach unten durch die Seite.                            */
@keyframes rise{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes popIn{
  0%{ opacity:0; transform:scale(.86) }
  100%{ opacity:1; transform:scale(1) }
}
@keyframes slideUp{
  from{ opacity:0; transform:translateY(14px) }
  to{ opacity:1; transform:none }
}

.m-rise{ animation:rise .42s var(--ease-out) both; }
.m-pop{ animation:popIn .3s var(--ease-back) both; }
.m-fade{ animation:fadeIn .3s var(--ease-soft) both; }

/* Staffelung: bis zwölf Elemente nacheinander */
.m-stagger > *{ animation:rise .42s var(--ease-out) both; }
.m-stagger > *:nth-child(1){ animation-delay:.02s }
.m-stagger > *:nth-child(2){ animation-delay:.06s }
.m-stagger > *:nth-child(3){ animation-delay:.10s }
.m-stagger > *:nth-child(4){ animation-delay:.14s }
.m-stagger > *:nth-child(5){ animation-delay:.18s }
.m-stagger > *:nth-child(6){ animation-delay:.22s }
.m-stagger > *:nth-child(7){ animation-delay:.26s }
.m-stagger > *:nth-child(8){ animation-delay:.30s }
.m-stagger > *:nth-child(n+9){ animation-delay:.34s }

/* ── Feinmotorik ───────────────────────────────────────────── */
.btn, .side__link, .chip, .tab{ transition:transform .12s var(--ease-out), box-shadow .16s var(--ease-out), background-color .16s var(--ease-soft), opacity .16s; }
.btn:active{ transform:scale(.975); }
.card{ transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.card--hover:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(78,56,20,.18); }
.side__link{ position:relative; }
.side__link.active::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:var(--gold, #C07C1E);
  animation:popIn .28s var(--ease-back) both;
}

/* ── Skelett beim Laden ────────────────────────────────────
   Ersetzt "Wird geladen …". Zeigt die Form, bevor der Inhalt da ist. */
.sk{
  border-radius:.4rem;
  background:linear-gradient(90deg, rgba(20,21,26,.06) 25%, rgba(20,21,26,.11) 37%, rgba(20,21,26,.06) 63%);
  background-size:400% 100%;
  animation:shimmer 1.3s var(--ease-soft) infinite;
}
@keyframes shimmer{ from{ background-position:100% 0 } to{ background-position:-100% 0 } }
.sk-line{ height:11px; margin:9px 0; }
.sk-line.w-70{ width:70% } .sk-line.w-50{ width:50% } .sk-line.w-90{ width:90% }
.sk-n{ height:26px; width:58px; margin-bottom:8px; }

/* ── Fortschritt beim Stapel ───────────────────────────────── */
.m-bar{
  height:4px; border-radius:99px; background:rgba(20,21,26,.09);
  overflow:hidden; margin-top:10px;
}
.m-bar > i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--gold,#C07C1E), var(--gold-lt,#EBB44E));
  transition:width .35s var(--ease-out);
}

/* ── Hinweise, die kurz erscheinen ─────────────────────────── */
.m-toasts{
  position:fixed; z-index:2000; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  display:flex; flex-direction:column-reverse; gap:8px; align-items:center;
  pointer-events:none; width:max-content; max-width:min(92vw,420px);
}
@media (min-width:992px){ .m-toasts{ left:auto; right:22px; bottom:22px; transform:none; align-items:flex-end; } }

.m-toast{
  display:flex; align-items:center; gap:9px;
  background:#14151A; color:#F4F3EF;
  padding:11px 16px; border-radius:11px; font-size:14px; font-weight:500;
  box-shadow:0 12px 32px -10px rgba(0,0,0,.5);
  animation:toastIn .3s var(--ease-back) both;
}
.m-toast.is-out{ animation:toastOut .22s var(--ease-soft) both; }
.m-toast--good{ background:#12603F; }
.m-toast--bad{ background:#9E1B33; }
.m-toast i{ font-size:16px; }
@keyframes toastIn{
  from{ opacity:0; transform:translateY(14px) scale(.94) }
  to{ opacity:1; transform:none }
}
@keyframes toastOut{
  from{ opacity:1 } to{ opacity:0; transform:translateY(6px) scale(.97) }
}

/* ── Der Moment: Text erscheint ────────────────────────────── */
.m-caret::after{
  content:"▌"; color:var(--gold,#C07C1E); animation:blink .9s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }

/* Kurzes Aufleuchten, wenn etwas fertig ist */
@keyframes flashOk{
  0%{ box-shadow:0 0 0 0 rgba(192,124,30,.5) }
  100%{ box-shadow:0 0 0 14px rgba(192,124,30,0) }
}
.m-flash{ animation:flashOk .7s var(--ease-out); }

/* Zahl, die hochzählt, soll nicht springen */
.m-num{ font-variant-numeric:tabular-nums; }

/* ── Bild wechselt beim Stapellauf ─────────────────────────── */
.m-swap{ animation:fadeIn .25s var(--ease-soft) both; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .sk{ animation:none; background:rgba(20,21,26,.08); }
}