@view-transition {
  navigation: auto;
}

/* Namen am dargestellten Element, nicht an der Part-Huelle: ein fixed darin verlore seinen Viewport-Bezug. */
#site-header {
  view-transition-name: header;
}

main {
  view-transition-name: main;
}

.insos-footer {
  view-transition-name: footer;
}

/* Der Kopf bleibt ohne Animation und steht damit still. Versatz kuerzer als die Dauer: sonst Luecke oder Durchscheinen. */
::view-transition-old(main),
::view-transition-old(footer) {
  animation: insos-seite-raus 400ms ease-out both;
}

::view-transition-new(main),
::view-transition-new(footer) {
  animation: insos-seite-rein 400ms ease-out 200ms both;
}

@keyframes insos-seite-raus {
  to {
    opacity: 0;
  }
}

@keyframes insos-seite-rein {
  from {
    opacity: 0;
  }
}

/* Reduzierte Bewegung: der Wechsel passiert uebergangslos. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(main),
  ::view-transition-new(main),
  ::view-transition-old(footer),
  ::view-transition-new(footer) {
    animation: none;
  }
}