/* Zurückhaltende Bewegung, ausschließlich auf den Startseiten. */
.note-list a:focus-visible { background-color: rgba(20, 43, 255, .06); }
@media (hover: hover) {
  .note-list a:hover { background-color: rgba(20, 43, 255, .06); }
}
@media (prefers-reduced-motion: no-preference) {
  .note-list a { transition: background-color 220ms ease; }
  .note-list .note-image { transition: transform 220ms ease; }
  .note-list a:focus-visible .note-image { transform: translateX(3px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .note-list a:hover .note-image { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-art img { animation: hero-arrive 700ms ease-out both; }
  @keyframes hero-arrive {
    from { opacity: .85; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .button { transition: background-color 180ms ease; }
  .project .arrow, .note-list .note-arrow {
    display: inline-block;
    transition: transform 180ms ease;
  }
  .project:is(:hover, :focus-visible) .arrow,
  .note-list a:is(:hover, :focus-visible) .note-arrow {
    transform: translate(4px, -4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}