/* Bewegung bleibt auf Divi-Inhalte begrenzt; Navigation, Formulare und Footer bleiben ruhig. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: entry 5% cover 27%) {
    :where(.et-l--post, .et-l--page, #left-area) .et_pb_image:not(.et_animated):not(.et_pb_sticky_module) .et_pb_image_wrap > img {
      animation: mgd-media-arrival 1ms ease-out both;
      animation-timeline: view();
      animation-range: entry 5% cover 27%;
    }

    /* Auch Inhaltsseiten ohne Bildmodule erhalten einen zurückhaltenden Impuls.
       Überschriften bleiben vollständig sichtbar, auch vor Beginn des Effekts. */
    :where(.et-l--post, .et-l--page, #left-area) :is(.et_pb_text, .et_pb_heading, .et_pb_fullwidth_header):not(.et_animated):not(.et_pb_sticky_module) :is(h1, h2, h3) {
      animation: mgd-heading-arrival 1ms ease-out both;
      animation-timeline: view();
      animation-range: entry 0% cover 19%;
    }
  }

  .et-l--post a.et_pb_button,
  .et-l--page a.et_pb_button {
    transition: box-shadow .2s ease;
  }

  :where(.et-l--post, .et-l--page) a.et_pb_button:hover {
    box-shadow: 0 .25rem .85rem rgb(41 40 38 / .14);
  }
}

@keyframes mgd-media-arrival {
  from { opacity: .84; translate: 0 .45rem; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes mgd-heading-arrival {
  from { translate: 0 .28rem; }
  to { translate: 0 0; }
}

/* Tastaturfokus bleibt auch ohne Animation deutlich erkennbar. */
:where(.et-l--post, .et-l--page) :is(a.et_pb_button, .et_pb_image a):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}